From f58e705e87b5aa797fa4b9d5c70f6eca4c69482f Mon Sep 17 00:00:00 2001
From: Ruben van der Linde <rubenvdlinde@gmail.com>
Date: Thu, 19 Mar 2026 17:36:26 +0100
Subject: [PATCH 01/12] fix: Add naam to delete dialog fallback chain

The delete confirmation dialog showed raw UUIDs instead of object names
for Dutch-language apps that use 'naam' instead of 'name'/'title'.
---
 src/components/CnDeleteDialog/CnDeleteDialog.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CnDeleteDialog/CnDeleteDialog.vue b/src/components/CnDeleteDialog/CnDeleteDialog.vue
index 3484c0e..8994a98 100644
--- a/src/components/CnDeleteDialog/CnDeleteDialog.vue
+++ b/src/components/CnDeleteDialog/CnDeleteDialog.vue
@@ -128,7 +128,7 @@ export default {
 	computed: {
 		itemName() {
 			if (this.nameFormatter) return this.nameFormatter(this.item)
-			return this.item[this.nameField] || this.item.name || this.item.title || this.item.id
+			return this.item[this.nameField] || this.item.name || this.item.naam || this.item.title || this.item.id
 		},
 		resolvedWarningText() {
 			return this.warningText.replace('{name}', this.itemName)

From 192b7e57b6f45ca667611c32e4377545873f6419 Mon Sep 17 00:00:00 2001
From: Ruben van der Linde <rubenvdlinde@gmail.com>
Date: Thu, 19 Mar 2026 20:08:03 +0100
Subject: [PATCH 02/12] fix: escape curly braces in MDX to prevent JSX parsing

---
 docs/components/cn-advanced-form-dialog.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/cn-advanced-form-dialog.md b/docs/components/cn-advanced-form-dialog.md
index 207eef8..349d3e3 100644
--- a/docs/components/cn-advanced-form-dialog.md
+++ b/docs/components/cn-advanced-form-dialog.md
@@ -35,7 +35,7 @@ The dialog uses the same **two-phase pattern** as other CRUD dialogs: after the
 |------|------|---------|-------------|
 | `schema` | Object | `null` | JSON Schema used to derive property list, types, and labels (e.g. `schema.properties`, `schema.required`, `schema.title`) |
 | `item` | Object | `null` | Existing object for edit mode; `null` for create mode |
-| `dialogTitle` | String | `''` | Override dialog title; default is "Create {schemaTitle}" or "Edit {schemaTitle}" |
+| `dialogTitle` | String | `''` | Override dialog title; default is "Create \{schemaTitle\}" or "Edit \{schemaTitle\}" |
 | `nameField` | String | `'title'` | Property used as display name (e.g. in breadcrumbs or other UI) |
 | `successText` | String | `''` | Message shown in result phase on success; default "\{schemaTitle\} saved successfully." |
 | `cancelLabel` | String | `'Cancel'` | Label for cancel button in form phase |

From 30f2142f150a9814bbe032086db842fb6230e1a1 Mon Sep 17 00:00:00 2001
From: Ruben van der Linde <rubenvdlinde@gmail.com>
Date: Thu, 19 Mar 2026 22:34:57 +0100
Subject: [PATCH 03/12] feat: add Dutch (nl) locale support for documentation

---
 docs/i18n/nl/code.json                        | 329 ++++++++++++++++++
 .../current.json                              |  30 ++
 .../nl/docusaurus-theme-classic/footer.json   |  50 +++
 .../nl/docusaurus-theme-classic/navbar.json   |  18 +
 docusaurus/docusaurus.config.js               |  10 +-
 5 files changed, 436 insertions(+), 1 deletion(-)
 create mode 100644 docs/i18n/nl/code.json
 create mode 100644 docs/i18n/nl/docusaurus-plugin-content-docs/current.json
 create mode 100644 docs/i18n/nl/docusaurus-theme-classic/footer.json
 create mode 100644 docs/i18n/nl/docusaurus-theme-classic/navbar.json

diff --git a/docs/i18n/nl/code.json b/docs/i18n/nl/code.json
new file mode 100644
index 0000000..5aaed38
--- /dev/null
+++ b/docs/i18n/nl/code.json
@@ -0,0 +1,329 @@
+{
+  "theme.ErrorPageContent.title": {
+    "message": "Deze pagina is gecrasht.",
+    "description": "The title of the fallback page when the page crashed"
+  },
+  "theme.BackToTopButton.buttonAriaLabel": {
+    "message": "Scroll naar boven",
+    "description": "The ARIA label for the back to top button"
+  },
+  "theme.blog.archive.title": {
+    "message": "Archief",
+    "description": "The page & hero title of the blog archive page"
+  },
+  "theme.blog.archive.description": {
+    "message": "Archief",
+    "description": "The page & hero description of the blog archive page"
+  },
+  "theme.blog.paginator.navAriaLabel": {
+    "message": "Paginanavigatie blog",
+    "description": "The ARIA label for the blog pagination"
+  },
+  "theme.blog.paginator.newerEntries": {
+    "message": "Nieuwere items",
+    "description": "The label used to navigate to the newer blog posts page (previous page)"
+  },
+  "theme.blog.paginator.olderEntries": {
+    "message": "Oudere items",
+    "description": "The label used to navigate to the older blog posts page (next page)"
+  },
+  "theme.blog.post.paginator.navAriaLabel": {
+    "message": "Paginanavigatie blog",
+    "description": "The ARIA label for the blog posts pagination"
+  },
+  "theme.blog.post.paginator.newerPost": {
+    "message": "Nieuwer bericht",
+    "description": "The blog post button label to navigate to the newer/previous post"
+  },
+  "theme.blog.post.paginator.olderPost": {
+    "message": "Ouder bericht",
+    "description": "The blog post button label to navigate to the older/next post"
+  },
+  "theme.tags.tagsPageLink": {
+    "message": "Laat alle tags zien",
+    "description": "The label of the link targeting the tag list page"
+  },
+  "theme.colorToggle.ariaLabel.mode.system": {
+    "message": "system mode",
+    "description": "The name for the system color mode"
+  },
+  "theme.colorToggle.ariaLabel.mode.light": {
+    "message": "lichte modus",
+    "description": "The name for the light color mode"
+  },
+  "theme.colorToggle.ariaLabel.mode.dark": {
+    "message": "donkere modus",
+    "description": "The name for the dark color mode"
+  },
+  "theme.colorToggle.ariaLabel": {
+    "message": "Schakel tussen donkere en lichte modus (momenteel {mode})",
+    "description": "The ARIA label for the color mode toggle"
+  },
+  "theme.docs.breadcrumbs.navAriaLabel": {
+    "message": "Broodkruimels",
+    "description": "The ARIA label for the breadcrumbs"
+  },
+  "theme.docs.DocCard.categoryDescription.plurals": {
+    "message": "1 artikel|{count} artikelen",
+    "description": "The default description for a category card in the generated index about how many items this category includes"
+  },
+  "theme.docs.paginator.navAriaLabel": {
+    "message": "Documentatie pagina",
+    "description": "The ARIA label for the docs pagination"
+  },
+  "theme.docs.paginator.previous": {
+    "message": "Vorige",
+    "description": "The label used to navigate to the previous doc"
+  },
+  "theme.docs.paginator.next": {
+    "message": "Volgende",
+    "description": "The label used to navigate to the next doc"
+  },
+  "theme.docs.tagDocListPageTitle.nDocsTagged": {
+    "message": "Een artikel getagd|{count} artikelen getagd",
+    "description": "Pluralized label for \"{count} docs tagged\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+  },
+  "theme.docs.tagDocListPageTitle": {
+    "message": "{nDocsTagged} met \"{tagName}\"",
+    "description": "The title of the page for a docs tag"
+  },
+  "theme.docs.versionBadge.label": {
+    "message": "Versie: {versionLabel}"
+  },
+  "theme.docs.versions.unreleasedVersionLabel": {
+    "message": "Dit is nog niet uitgegeven documentatie voor {siteTitle}, versie {versionLabel}",
+    "description": "The label used to tell the user that he's browsing an unreleased doc version"
+  },
+  "theme.docs.versions.unmaintainedVersionLabel": {
+    "message": "Dit is de documentatie voor {siteTitle} {versionLabel}, welke niet langer actief wordt onderhouden.",
+    "description": "The label used to tell the user that he's browsing an unmaintained doc version"
+  },
+  "theme.docs.versions.latestVersionSuggestionLabel": {
+    "message": "Voor de huidige documentatie, zie de {latestVersionLink} ({versionLabel}).",
+    "description": "The label used to tell the user to check the latest version"
+  },
+  "theme.docs.versions.latestVersionLinkLabel": {
+    "message": "laatste versie",
+    "description": "The label used for the latest version suggestion link label"
+  },
+  "theme.common.editThisPage": {
+    "message": "Bewerk deze pagina",
+    "description": "The link label to edit the current page"
+  },
+  "theme.common.headingLinkTitle": {
+    "message": "Direct link naar {heading}",
+    "description": "Title for link to heading"
+  },
+  "theme.lastUpdated.atDate": {
+    "message": " op {date}",
+    "description": "The words used to describe on which date a page has been last updated"
+  },
+  "theme.lastUpdated.byUser": {
+    "message": " door {user}",
+    "description": "The words used to describe by who the page has been last updated"
+  },
+  "theme.lastUpdated.lastUpdatedAtBy": {
+    "message": "Laatst bijgewerkt{atDate}{byUser}",
+    "description": "The sentence used to display when a page has been last updated, and by who"
+  },
+  "theme.navbar.mobileVersionsDropdown.label": {
+    "message": "Versies",
+    "description": "The label for the navbar versions dropdown on mobile view"
+  },
+  "theme.NotFound.title": {
+    "message": "Pagina niet gevonden",
+    "description": "The title of the 404 page"
+  },
+  "theme.tags.tagsListLabel": {
+    "message": "Tags:",
+    "description": "The label alongside a tag list"
+  },
+  "theme.admonition.caution": {
+    "message": "pas op",
+    "description": "The default label used for the Caution admonition (:::caution)"
+  },
+  "theme.admonition.danger": {
+    "message": "gevaar",
+    "description": "The default label used for the Danger admonition (:::danger)"
+  },
+  "theme.admonition.info": {
+    "message": "info",
+    "description": "The default label used for the Info admonition (:::info)"
+  },
+  "theme.admonition.note": {
+    "message": "notitie",
+    "description": "The default label used for the Note admonition (:::note)"
+  },
+  "theme.admonition.tip": {
+    "message": "tip",
+    "description": "The default label used for the Tip admonition (:::tip)"
+  },
+  "theme.admonition.warning": {
+    "message": "waarschuwing",
+    "description": "The default label used for the Warning admonition (:::warning)"
+  },
+  "theme.AnnouncementBar.closeButtonAriaLabel": {
+    "message": "Sluiten",
+    "description": "The ARIA label for close button of announcement bar"
+  },
+  "theme.blog.sidebar.navAriaLabel": {
+    "message": "Navigatie recente blogitems",
+    "description": "The ARIA label for recent posts in the blog sidebar"
+  },
+  "theme.DocSidebarItem.expandCategoryAriaLabel": {
+    "message": "Categorie zijbalk uitklappen '{label}'",
+    "description": "The ARIA label to expand the sidebar category"
+  },
+  "theme.DocSidebarItem.collapseCategoryAriaLabel": {
+    "message": "Categorie zijbalk inklappen '{label}'",
+    "description": "The ARIA label to collapse the sidebar category"
+  },
+  "theme.IconExternalLink.ariaLabel": {
+    "message": "(opens in new tab)",
+    "description": "The ARIA label for the external link icon"
+  },
+  "theme.NavBar.navAriaLabel": {
+    "message": "Main",
+    "description": "The ARIA label for the main navigation"
+  },
+  "theme.navbar.mobileLanguageDropdown.label": {
+    "message": "Talen",
+    "description": "The label for the mobile language switcher dropdown"
+  },
+  "theme.NotFound.p1": {
+    "message": "We kunnen niet vinden waar je naar op zoek bent.",
+    "description": "The first paragraph of the 404 page"
+  },
+  "theme.NotFound.p2": {
+    "message": "Neem contact op met de eigenaar van de website die naar de originele URL heeft geleid en laat weten dat de link niet meer werkt.",
+    "description": "The 2nd paragraph of the 404 page"
+  },
+  "theme.TOCCollapsible.toggleButtonLabel": {
+    "message": "Op deze pagina",
+    "description": "The label used by the button on the collapsible TOC component"
+  },
+  "theme.blog.post.readMore": {
+    "message": "Lees meer",
+    "description": "The label used in blog post item excerpts to link to full blog posts"
+  },
+  "theme.blog.post.readMoreLabel": {
+    "message": "Lees meer over {title}",
+    "description": "The ARIA label for the link to full blog posts from excerpts"
+  },
+  "theme.blog.post.readingTime.plurals": {
+    "message": "Een minuut leestijd|{readingTime} minuten leestijd",
+    "description": "Pluralized label for \"{readingTime} min read\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+  },
+  "theme.CodeBlock.copy": {
+    "message": "Kopieer",
+    "description": "The copy button label on code blocks"
+  },
+  "theme.CodeBlock.copied": {
+    "message": "Gekopieerd",
+    "description": "The copied button label on code blocks"
+  },
+  "theme.CodeBlock.copyButtonAriaLabel": {
+    "message": "Kopieer code naar klembord",
+    "description": "The ARIA label for copy code blocks button"
+  },
+  "theme.CodeBlock.wordWrapToggle": {
+    "message": "Tekstterugloop in-/uitschakelen",
+    "description": "The title attribute for toggle word wrapping button of code block lines"
+  },
+  "theme.docs.breadcrumbs.home": {
+    "message": "Homepagina",
+    "description": "The ARIA label for the home page in the breadcrumbs"
+  },
+  "theme.docs.sidebar.collapseButtonTitle": {
+    "message": "Zijbalk inklappen",
+    "description": "The title attribute for collapse button of doc sidebar"
+  },
+  "theme.docs.sidebar.collapseButtonAriaLabel": {
+    "message": "Zijbalk inklappen",
+    "description": "The title attribute for collapse button of doc sidebar"
+  },
+  "theme.docs.sidebar.navAriaLabel": {
+    "message": "Docs zijbalk",
+    "description": "The ARIA label for the sidebar navigation"
+  },
+  "theme.docs.sidebar.closeSidebarButtonAriaLabel": {
+    "message": "Sluit navigatiebalk",
+    "description": "The ARIA label for close button of mobile sidebar"
+  },
+  "theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": {
+    "message": "← Terug naar het hoofdmenu",
+    "description": "The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)"
+  },
+  "theme.docs.sidebar.toggleSidebarButtonAriaLabel": {
+    "message": "Navigatiebalk schakelen",
+    "description": "The ARIA label for hamburger menu button of mobile navigation"
+  },
+  "theme.navbar.mobileDropdown.collapseButton.expandAriaLabel": {
+    "message": "Expand the dropdown",
+    "description": "The ARIA label of the button to expand the mobile dropdown navbar item"
+  },
+  "theme.navbar.mobileDropdown.collapseButton.collapseAriaLabel": {
+    "message": "Collapse the dropdown",
+    "description": "The ARIA label of the button to collapse the mobile dropdown navbar item"
+  },
+  "theme.docs.sidebar.expandButtonTitle": {
+    "message": "Zijbalk uitklappen",
+    "description": "The ARIA label and title attribute for expand button of doc sidebar"
+  },
+  "theme.docs.sidebar.expandButtonAriaLabel": {
+    "message": "Zijbalk uitklappen",
+    "description": "The ARIA label and title attribute for expand button of doc sidebar"
+  },
+  "theme.blog.post.plurals": {
+    "message": "Een bericht|{count} berichten",
+    "description": "Pluralized label for \"{count} posts\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+  },
+  "theme.blog.tagTitle": {
+    "message": "{nPosts} getagd met \"{tagName}\"",
+    "description": "The title of the page for a blog tag"
+  },
+  "theme.blog.author.pageTitle": {
+    "message": "{authorName} - {nPosts}",
+    "description": "The title of the page for a blog author"
+  },
+  "theme.blog.authorsList.pageTitle": {
+    "message": "Auteurs",
+    "description": "The title of the authors page"
+  },
+  "theme.blog.authorsList.viewAll": {
+    "message": "Bekijk alle auteurs",
+    "description": "The label of the link targeting the blog authors page"
+  },
+  "theme.blog.author.noPosts": {
+    "message": "Deze auteur heeft nog geen berichten geschreven.",
+    "description": "The text for authors with 0 blog post"
+  },
+  "theme.contentVisibility.unlistedBanner.title": {
+    "message": "Verborgen page",
+    "description": "The unlisted content banner title"
+  },
+  "theme.contentVisibility.unlistedBanner.message": {
+    "message": "Deze pagina is verborgen. Zoekmachines indexeren deze niet en alleen gebruikers met een directe link kunnen deze openen.",
+    "description": "The unlisted content banner message"
+  },
+  "theme.contentVisibility.draftBanner.title": {
+    "message": "Concept pagina",
+    "description": "The draft content banner title"
+  },
+  "theme.contentVisibility.draftBanner.message": {
+    "message": "Deze pagina is een concept. Deze zal alleen zichtbaar zijn in de ontwikkelomgeving en uitgesloten worden van de productie build.",
+    "description": "The draft content banner message"
+  },
+  "theme.ErrorPageContent.tryAgain": {
+    "message": "Probeer opnieuw",
+    "description": "The label of the button to try again rendering when the React error boundary captures an error"
+  },
+  "theme.common.skipToMainContent": {
+    "message": "Ga naar hoofdinhoud",
+    "description": "The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation"
+  },
+  "theme.tags.tagsPageTitle": {
+    "message": "Tags",
+    "description": "The title of the tag list page"
+  }
+}
diff --git a/docs/i18n/nl/docusaurus-plugin-content-docs/current.json b/docs/i18n/nl/docusaurus-plugin-content-docs/current.json
new file mode 100644
index 0000000..c2c971e
--- /dev/null
+++ b/docs/i18n/nl/docusaurus-plugin-content-docs/current.json
@@ -0,0 +1,30 @@
+{
+  "version.label": {
+    "message": "Volgende",
+    "description": "The label for version current"
+  },
+  "sidebar.tutorialSidebar.category.Layouts": {
+    "message": "Layouts",
+    "description": "The label for category 'Layouts' in sidebar 'tutorialSidebar'"
+  },
+  "sidebar.tutorialSidebar.category.Component Reference": {
+    "message": "Componentreferentie",
+    "description": "The label for category 'Component Reference' in sidebar 'tutorialSidebar'"
+  },
+  "sidebar.tutorialSidebar.category.Architecture": {
+    "message": "Architectuur",
+    "description": "The label for category 'Architecture' in sidebar 'tutorialSidebar'"
+  },
+  "sidebar.tutorialSidebar.category.Store": {
+    "message": "Opslag",
+    "description": "The label for category 'Store' in sidebar 'tutorialSidebar'"
+  },
+  "sidebar.tutorialSidebar.category.Integrations": {
+    "message": "Integraties",
+    "description": "The label for category 'Integrations' in sidebar 'tutorialSidebar'"
+  },
+  "sidebar.tutorialSidebar.category.Utilities": {
+    "message": "Hulpmiddelen",
+    "description": "The label for category 'Utilities' in sidebar 'tutorialSidebar'"
+  }
+}
diff --git a/docs/i18n/nl/docusaurus-theme-classic/footer.json b/docs/i18n/nl/docusaurus-theme-classic/footer.json
new file mode 100644
index 0000000..24b76f3
--- /dev/null
+++ b/docs/i18n/nl/docusaurus-theme-classic/footer.json
@@ -0,0 +1,50 @@
+{
+  "link.title.Docs": {
+    "message": "Documentatie",
+    "description": "The title of the footer links column with title=Docs in the footer"
+  },
+  "link.title.Community": {
+    "message": "Community",
+    "description": "The title of the footer links column with title=Community in the footer"
+  },
+  "link.title.Related": {
+    "message": "Gerelateerd",
+    "description": "The title of the footer links column with title=Related in the footer"
+  },
+  "link.item.label.Getting Started": {
+    "message": "Aan de slag",
+    "description": "The label of footer link with label=Getting Started linking to /docs/getting-started"
+  },
+  "link.item.label.Components": {
+    "message": "Componenten",
+    "description": "The label of footer link with label=Components linking to /docs/components/"
+  },
+  "link.item.label.Architecture": {
+    "message": "Architectuur",
+    "description": "The label of footer link with label=Architecture linking to /docs/architecture/overview"
+  },
+  "link.item.label.GitHub": {
+    "message": "GitHub",
+    "description": "The label of footer link with label=GitHub linking to https://github.com/ConductionNL/nextcloud-vue"
+  },
+  "link.item.label.Conduction": {
+    "message": "Conduction",
+    "description": "The label of footer link with label=Conduction linking to https://conduction.nl"
+  },
+  "link.item.label.Nextcloud Vue Components": {
+    "message": "Nextcloud Vue Componenten",
+    "description": "The label of footer link with label=Nextcloud Vue Components linking to https://nextcloud-vue-components.netlify.app/"
+  },
+  "link.item.label.Nextcloud Layout Components": {
+    "message": "Nextcloud Layout Componenten",
+    "description": "The label of footer link with label=Nextcloud Layout Components linking to https://docs.nextcloud.com/server/stable/developer_manual/design/layoutcomponents.html"
+  },
+  "link.item.label.Nextcloud App Development": {
+    "message": "Nextcloud App Ontwikkeling",
+    "description": "The label of footer link with label=Nextcloud App Development linking to https://docs.nextcloud.com/server/stable/developer_manual/app_development/index.html"
+  },
+  "copyright": {
+    "message": "Copyright © 2026 for <a href=\"https://openwebconcept.nl\">Open Webconcept</a> by <a href=\"https://conduction.nl\">Conduction B.V.</a>",
+    "description": "The footer copyright"
+  }
+}
diff --git a/docs/i18n/nl/docusaurus-theme-classic/navbar.json b/docs/i18n/nl/docusaurus-theme-classic/navbar.json
new file mode 100644
index 0000000..52e8bb1
--- /dev/null
+++ b/docs/i18n/nl/docusaurus-theme-classic/navbar.json
@@ -0,0 +1,18 @@
+{
+  "title": {
+    "message": "@conduction/nextcloud-vue",
+    "description": "The title in the navbar"
+  },
+  "logo.alt": {
+    "message": "Conduction Logo",
+    "description": "The alt text of navbar logo"
+  },
+  "item.label.Documentation": {
+    "message": "Documentatie",
+    "description": "Navbar item with label Documentation"
+  },
+  "item.label.GitHub": {
+    "message": "GitHub",
+    "description": "Navbar item with label GitHub"
+  }
+}
diff --git a/docusaurus/docusaurus.config.js b/docusaurus/docusaurus.config.js
index 4b5042f..8b26c9d 100644
--- a/docusaurus/docusaurus.config.js
+++ b/docusaurus/docusaurus.config.js
@@ -17,7 +17,11 @@ const config = {
 
   i18n: {
     defaultLocale: 'en',
-    locales: ['en'],
+    locales: ['en', 'nl'],
+    localeConfigs: {
+      en: { label: 'English' },
+      nl: { label: 'Nederlands' },
+    },
   },
 
   presets: [
@@ -60,6 +64,10 @@ const config = {
             label: 'GitHub',
             position: 'right',
           },
+          {
+            type: 'localeDropdown',
+            position: 'right',
+          },
         ],
       },
       footer: {

From a43900ba1ab678cb83eff985cc7718c350d85121 Mon Sep 17 00:00:00 2001
From: Ruben van der Linde <rubenvdlinde@gmail.com>
Date: Sat, 2 May 2026 17:54:26 +0200
Subject: [PATCH 04/12] feat(files): batchFiles action for one-shot
 publish/depublish/delete/label
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds `batchFiles(type, objectId, action, fileIds, params?)` to the files
plugin. Replaces the N-sequential-calls pattern (loop calling
publishFile/unpublishFile/deleteFile per id) with a single POST to
`/files/batch`.

The backend returns 200 when every operation succeeds, or 207 (multi-status)
when some fail; per-file outcomes live in `data.results` and aggregate
counts in `data.summary` ({ succeeded, failed, total }). Both 200 and 207
are treated as valid responses — the caller inspects data.summary to
decide whether to surface a partial-failure UI.

Backwards compatible: existing publishFile / unpublishFile / deleteFile
actions are unchanged. Consumers that haven't migrated continue to work.

Closes OpenRegister file-actions task 136 (ViewObject.vue migration to
the batch endpoint, paired in a separate openregister commit).
---
 docs/store/plugins/files.md        |  1 +
 src/store/plugins/files.js         | 54 ++++++++++++++++++++++++-
 tests/store/useObjectStore.spec.js | 64 ++++++++++++++++++++++++++++++
 3 files changed, 118 insertions(+), 1 deletion(-)

diff --git a/docs/store/plugins/files.md b/docs/store/plugins/files.md
index 453705e..fd62637 100644
--- a/docs/store/plugins/files.md
+++ b/docs/store/plugins/files.md
@@ -70,6 +70,7 @@ Tags:
 | `publishFile` | `(type, objectId, fileId) => Promise<boolean>` | POST `<object>/files/<fileId>/publish`. Re-fetches on success. |
 | `unpublishFile` | `(type, objectId, fileId) => Promise<boolean>` | POST `<object>/files/<fileId>/depublish`. Re-fetches on success. |
 | `deleteFile` | `(type, objectId, fileId) => Promise<boolean>` | DELETE `<object>/files/<fileId>`. Re-fetches on success. |
+| `batchFiles` | `(type, objectId, action, fileIds, params?) => Promise<object \| null>` | POST `<object>/files/batch` to apply `publish` / `depublish` / `delete` / `label` across many files in ONE round-trip. Returns `{ results, summary: { succeeded, failed, total } }` for both 200 (all OK) and 207 (partial). Re-fetches on success. |
 | `fetchTags` | `() => Promise<string[]>` | GET the tags endpoint (derived from `baseUrl` by replacing `/objects` with `/tags`). Returns the array (also stored in `state.tags`). |
 | `clearFiles` | `() => void` | From `createSubResourcePlugin`. Reset files state. |
 
diff --git a/src/store/plugins/files.js b/src/store/plugins/files.js
index b31bafb..8373f12 100644
--- a/src/store/plugins/files.js
+++ b/src/store/plugins/files.js
@@ -9,7 +9,7 @@ import { parseResponseError, networkError } from '../../utils/errors.js'
  * upload (multipart), publish, unpublish, and delete.
  *
  * State: files, filesLoading, filesError, tags, tagsLoading, tagsError
- * Actions: fetchFiles, uploadFiles, publishFile, unpublishFile, deleteFile, clearFiles, fetchTags
+ * Actions: fetchFiles, uploadFiles, publishFile, unpublishFile, deleteFile, batchFiles, clearFiles, fetchTags
  * Getters: getFiles, isFilesLoading, getFilesError, getTags, isTagsLoading, getTagsError
  *
  * @param {object} [options={}] Plugin options
@@ -245,6 +245,58 @@ export function filesPlugin(options = {}) {
 					this.filesLoading = false
 				}
 			},
+
+			/**
+			 * Apply a batch action across multiple files in ONE request.
+			 *
+			 * Replaces the N-sequential-call pattern (loop calling
+			 * publishFile/unpublishFile/deleteFile per id) with a single POST
+			 * to /files/batch. The backend returns 200 when every operation
+			 * succeeds, or 207 (multi-status) when some fail; the per-file
+			 * outcomes live in `data.results` and the aggregate counts in
+			 * `data.summary` (`{ succeeded, failed, total }`).
+			 *
+			 * @param {string} type The registered object type slug
+			 * @param {string} objectId The parent object ID
+			 * @param {('publish'|'depublish'|'delete'|'label')} action The batch action to apply
+			 * @param {(string|number)[]} fileIds File IDs to act on (max 100, validated server-side)
+			 * @param {object} [params={}] Action-specific parameters (e.g. labels for the 'label' action)
+			 * @return {Promise<object|null>} Response body `{ results, summary }`, or null on transport error
+			 */
+			async batchFiles(type, objectId, action, fileIds, params = {}) {
+				this.filesLoading = true
+				this.filesError = null
+
+				try {
+					const url = this._buildUrl(type, objectId) + '/files/batch'
+
+					const response = await fetch(url, {
+						method: 'POST',
+						headers: buildHeaders(),
+						body: JSON.stringify({
+							action,
+							fileIds,
+							...params,
+						}),
+					})
+
+					// 200 = all succeeded, 207 = partial success — both are
+					// valid responses; the caller inspects data.summary.
+					if (!response.ok && response.status !== 207) {
+						this.filesError = await parseResponseError(response, 'files')
+						return null
+					}
+
+					const data = await response.json()
+					await this.fetchFiles(type, objectId)
+					return data
+				} catch (error) {
+					this.filesError = networkError(error)
+					return null
+				} finally {
+					this.filesLoading = false
+				}
+			},
 		},
 	}
 }
diff --git a/tests/store/useObjectStore.spec.js b/tests/store/useObjectStore.spec.js
index e115a14..8c70086 100644
--- a/tests/store/useObjectStore.spec.js
+++ b/tests/store/useObjectStore.spec.js
@@ -303,6 +303,7 @@ describe('createObjectStore with plugins', () => {
 		expect(typeof store.uploadFiles).toBe('function')
 		expect(typeof store.publishFile).toBe('function')
 		expect(typeof store.deleteFile).toBe('function')
+		expect(typeof store.batchFiles).toBe('function')
 		expect(typeof store.fetchTags).toBe('function')
 		expect(typeof store.lockObject).toBe('function')
 		expect(typeof store.unlockObject).toBe('function')
@@ -324,6 +325,69 @@ describe('createObjectStore with plugins', () => {
 		expect(store.getTagsError).toBeNull()
 	})
 
+	it('batchFiles posts to /files/batch with one round-trip for many ids', async () => {
+		const useStore = createObjectStore('test-batch-files', {
+			plugins: [filesPlugin()],
+		})
+		store = useStore()
+		store.registerObjectType('case', '28', '5')
+
+		// Two responses: the batch POST + the follow-up fetchFiles refresh.
+		global.fetch = jest.fn()
+			.mockResolvedValueOnce({
+				ok: true,
+				status: 200,
+				json: () => Promise.resolve({
+					results: [{ fileId: 1, ok: true }, { fileId: 2, ok: true }],
+					summary: { succeeded: 2, failed: 0, total: 2 },
+				}),
+			})
+			.mockResolvedValueOnce({
+				ok: true,
+				json: () => Promise.resolve({ results: [], total: 0, page: 1, pages: 1, limit: 20, offset: 0 }),
+			})
+
+		const result = await store.batchFiles('case', 'obj-uuid', 'publish', [1, 2])
+
+		expect(global.fetch).toHaveBeenCalledTimes(2)
+		const [url, opts] = global.fetch.mock.calls[0]
+		expect(url).toContain('/files/batch')
+		expect(opts.method).toBe('POST')
+		expect(JSON.parse(opts.body)).toEqual({
+			action: 'publish',
+			fileIds: [1, 2],
+		})
+		expect(result.summary).toEqual({ succeeded: 2, failed: 0, total: 2 })
+	})
+
+	it('batchFiles accepts 207 partial-success without flagging error', async () => {
+		const useStore = createObjectStore('test-batch-207', {
+			plugins: [filesPlugin()],
+		})
+		store = useStore()
+		store.registerObjectType('case', '28', '5')
+
+		global.fetch = jest.fn()
+			.mockResolvedValueOnce({
+				ok: false,
+				status: 207,
+				json: () => Promise.resolve({
+					results: [{ fileId: 1, ok: true }, { fileId: 2, ok: false, error: 'locked' }],
+					summary: { succeeded: 1, failed: 1, total: 2 },
+				}),
+			})
+			.mockResolvedValueOnce({
+				ok: true,
+				json: () => Promise.resolve({ results: [], total: 0, page: 1, pages: 1, limit: 20, offset: 0 }),
+			})
+
+		const result = await store.batchFiles('case', 'obj-uuid', 'delete', [1, 2])
+
+		expect(result).not.toBeNull()
+		expect(result.summary.failed).toBe(1)
+		expect(store.filesError).toBeNull()
+	})
+
 	it('fetchTags calls tags API and stores array of strings', async () => {
 		const useStore = createObjectStore('test-fetch-tags', {
 			plugins: [filesPlugin()],

From 5bf89e078089cdc1aa54b2b7c968856e83f91be3 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Mon, 4 May 2026 10:20:03 +0200
Subject: [PATCH 05/12] Updated dashboard to allow icons

---
 .../CnDashboardPage/CnDashboardPage.vue       | 18 ++++++++++-
 .../CnWidgetWrapper/CnWidgetWrapper.vue       | 32 +++++++++++++++++++
 2 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/src/components/CnDashboardPage/CnDashboardPage.vue b/src/components/CnDashboardPage/CnDashboardPage.vue
index 6214f42..a1d72ed 100644
--- a/src/components/CnDashboardPage/CnDashboardPage.vue
+++ b/src/components/CnDashboardPage/CnDashboardPage.vue
@@ -83,7 +83,13 @@
 						:borderless="item.showTitle === false"
 						:flush="item.flush === true"
 						:buttons="getWidgetButtons(item)"
-						:style-config="item.styleConfig || {}">
+						:style-config="item.styleConfig || {}"
+						:title-icon-position="getWidgetTitleIconPosition(item)"
+						:title-icon-color="getWidgetTitleIconColor(item)">
+						<!-- Per-widget title icon (e.g. #widget-my-work-title-icon) -->
+						<template v-if="$slots['widget-' + item.widgetId + '-title-icon']" #title-icon>
+							<slot :name="'widget-' + item.widgetId + '-title-icon'" :item="item" :widget="getWidgetDef(item.widgetId)" />
+						</template>
 						<!-- Per-widget header actions (e.g. #widget-my-work-actions) -->
 						<template v-if="$slots['widget-' + item.widgetId + '-actions']" #actions>
 							<slot :name="'widget-' + item.widgetId + '-actions'" :item="item" :widget="getWidgetDef(item.widgetId)" />
@@ -320,6 +326,16 @@ export default {
 			return def?.buttons || []
 		},
 
+		getWidgetTitleIconPosition(item) {
+			const def = this.getWidgetDef(item.widgetId)
+			return def?.titleIconPosition || 'right'
+		},
+
+		getWidgetTitleIconColor(item) {
+			const def = this.getWidgetDef(item.widgetId)
+			return def?.titleIconColor || null
+		},
+
 		isTile(item) {
 			const def = this.getWidgetDef(item.widgetId)
 			return def?.type === 'tile'
diff --git a/src/components/CnWidgetWrapper/CnWidgetWrapper.vue b/src/components/CnWidgetWrapper/CnWidgetWrapper.vue
index 5f90637..ba19169 100644
--- a/src/components/CnWidgetWrapper/CnWidgetWrapper.vue
+++ b/src/components/CnWidgetWrapper/CnWidgetWrapper.vue
@@ -15,6 +15,12 @@
 		:style="wrapperStyles">
 		<!-- Header -->
 		<div v-if="showTitle" class="cn-widget-wrapper__header">
+			<!-- Title icon — left: rendered before the title group -->
+			<div v-if="$slots['title-icon'] && titleIconPosition === 'left'"
+				class="cn-widget-wrapper__title-icon"
+				:style="titleIconColor ? { color: titleIconColor } : {}">
+				<slot name="title-icon" />
+			</div>
 			<div class="cn-widget-wrapper__header-left">
 				<img
 					v-if="iconUrl"
@@ -32,6 +38,12 @@
 			<div class="cn-widget-wrapper__actions">
 				<slot name="actions" />
 			</div>
+			<!-- Title icon — right: rendered after actions, far right -->
+			<div v-if="$slots['title-icon'] && titleIconPosition === 'right'"
+				class="cn-widget-wrapper__title-icon"
+				:style="titleIconColor ? { color: titleIconColor } : {}">
+				<slot name="title-icon" />
+			</div>
 		</div>
 
 		<!-- Content -->
@@ -114,6 +126,20 @@ export default {
 			type: String,
 			default: null,
 		},
+		/**
+		 * Position of the title-icon slot in the header.
+		 * 'left' places it before the title; 'right' places it after the actions.
+		 */
+		titleIconPosition: {
+			type: String,
+			default: 'right',
+			validator: (v) => ['left', 'right'].includes(v),
+		},
+		/** CSS color value applied to the title-icon slot container */
+		titleIconColor: {
+			type: String,
+			default: null,
+		},
 		/** Footer action buttons: [{ text, link }] */
 		buttons: {
 			type: Array,
@@ -227,6 +253,12 @@ export default {
 	flex-shrink: 0;
 }
 
+.cn-widget-wrapper__title-icon {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+}
+
 .cn-widget-wrapper__footer {
 	display: flex;
 	justify-content: flex-end;

From 5083742bfb02c6dd9662ae08f496324ddffe9c9e Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Mon, 4 May 2026 10:27:13 +0200
Subject: [PATCH 06/12] Updated docs

---
 docs/components/cn-color-picker.md   | 15 +++++----------
 docs/components/cn-dashboard-page.md |  3 +++
 docs/components/cn-widget-wrapper.md |  3 +++
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/docs/components/cn-color-picker.md b/docs/components/cn-color-picker.md
index 6e00da6..35bfcda 100644
--- a/docs/components/cn-color-picker.md
+++ b/docs/components/cn-color-picker.md
@@ -1,6 +1,6 @@
 # CnColorPicker
 
-Themed wrapper around vue-color's `Chrome` picker. Forwards all props and events to the underlying component, so the full vue-color API stays available — this component only exists to remap the picker's hardcoded light-mode palette to Nextcloud CSS variables so it follows the active theme (light, dark, or nldesign).
+A color swatch button that opens a themed `Chrome` color picker (vue-color) in a popover. Clicking the swatch square toggles the picker. The active color is shown in the swatch (with a checker pattern behind it so alpha values render correctly). Remaps the picker's hardcoded light-mode palette to Nextcloud CSS variables so it follows the active theme (light, dark, or nldesign).
 
 ## Usage
 
@@ -30,22 +30,18 @@ export default {
 
 ## Props & events
 
-All props and listeners are forwarded to vue-color's `Chrome` component. The most commonly used:
-
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `value` | `string \| object` | — | Current color (string like `'#abcdef'`, `'rgba(...)'`, `'hsl(...)'`, or a vue-color color object). |
-| `disabled` | `Boolean` | `false` | Disables the swatch trigger and prevents the popover from opening. |
+| `value` | `string \| object` | `null` | Current color (string like `'#abcdef'`, `'rgba(...)'`, `'hsl(...)'`, or a vue-color color object). `null`/empty renders a transparent swatch. |
+| `disabled` | `Boolean` | `false` | Disables the swatch button and prevents the popover from opening. |
 | `mode` | `'hex' \| 'rgb' \| 'hsl' \| null` | `null` | Lock the numeric-input fields to a single mode and hide the toggle. `null` lets the user switch. The shown fields include alpha when `disable-alpha` is `false` (so `'rgb'` becomes RGBA, `'hsl'` becomes HSLA). |
-| `disable-alpha` | `Boolean` | `false` | Forwarded to `Chrome`. Hides the alpha bar and the alpha numeric field. |
-| `disable-fields` | `Boolean` | `false` | Forwarded to `Chrome`. Hides the hex/RGB/HSL numeric fields entirely. |
+
+Additional props (e.g. `disable-alpha`, `disable-fields`) are forwarded via `$attrs` to the underlying `Chrome` picker. See vue-color's [`Chrome` component](https://github.com/linx4200/vue-color) for the full prop surface.
 
 | Event | Payload | Description |
 |-------|---------|-------------|
 | `input` | `{ hex, hex8, rgba, hsl, hsv, a, source }` | Fires whenever the user changes the color via any control. |
 
-See vue-color's [`Chrome` component](https://github.com/linx4200/vue-color) for the full prop and event surface.
-
 ## Theming
 
 This component remaps the following Chrome internals to Nextcloud variables:
@@ -64,7 +60,6 @@ Consumers don't need to add any CSS overrides themselves.
 
 ## Notes
 
-- This is purely the picker UI. It does not include a swatch trigger, popover, text input, or format conversion — wire those at the call site if you need them.
 - `vue-color` is a direct dependency of this library, so the picker is always available.
 
 ## Related
diff --git a/docs/components/cn-dashboard-page.md b/docs/components/cn-dashboard-page.md
index 9f9f102..f63cced 100644
--- a/docs/components/cn-dashboard-page.md
+++ b/docs/components/cn-dashboard-page.md
@@ -98,6 +98,8 @@ const { widgets, layout, loading, onLayoutChange } = useDashboardView({
 | `type` | String | `'custom'` (default) or `'tile'` |
 | `iconUrl` | String | Header icon image URL |
 | `iconClass` | String | Header icon CSS class |
+| `titleIconPosition` | String | Position of the `widget-{id}-title-icon` slot: `'left'` (before title) or `'right'` (after actions, default) |
+| `titleIconColor` | String | CSS color applied to the title-icon slot container (e.g. `'#e74c3c'`) |
 | `buttons` | Array | Footer buttons: `[{ text, link }]` |
 | `itemApiVersions` | Number[] | NC Dashboard API versions — triggers auto-rendering |
 | `reloadInterval` | Number | Auto-refresh interval in seconds (NC widgets) |
@@ -129,4 +131,5 @@ const { widgets, layout, loading, onLayoutChange } = useDashboardView({
 | `header-actions` | — | Extra buttons in the page header (right side) |
 | `widget-{widgetId}` | `{ item, widget }` | Custom content for a specific widget |
 | `widget-{widgetId}-actions` | `{ item, widget }` | Header action buttons for a specific widget |
+| `widget-{widgetId}-title-icon` | `{ item, widget }` | Extra icon in the widget header; position and color controlled by `titleIconPosition` / `titleIconColor` on the widget definition |
 | `empty` | — | Custom empty state when no layout items exist |
diff --git a/docs/components/cn-widget-wrapper.md b/docs/components/cn-widget-wrapper.md
index 9b7aee2..318ef76 100644
--- a/docs/components/cn-widget-wrapper.md
+++ b/docs/components/cn-widget-wrapper.md
@@ -46,6 +46,8 @@ Container shell around a dashboard widget. Provides a header with icon and title
 | `flush` | Boolean | `false` | Remove content padding — lets content extend edge-to-edge |
 | `iconUrl` | String | `null` | Image URL for the header icon |
 | `iconClass` | String | `null` | CSS class for the header icon (e.g. Nextcloud icon class) |
+| `titleIconPosition` | String | `'right'` | Position of the `title-icon` slot in the header: `'left'` places it before the title group; `'right'` places it after the actions |
+| `titleIconColor` | String | `null` | CSS color value applied to the `title-icon` slot container (e.g. `'#e74c3c'`) |
 | `buttons` | Array | `[]` | Footer button links: `[{ text, link }]` |
 | `styleConfig` | Object | `{}` | Runtime style overrides: `{ backgroundColor?, borderStyle?, borderWidth?, borderColor?, borderRadius?, padding?: { top, right, bottom, left } }` |
 
@@ -55,4 +57,5 @@ Container shell around a dashboard widget. Provides a header with icon and title
 |------|-------------|
 | default | Widget content rendered in the scrollable body area |
 | `actions` | Buttons or controls placed in the right side of the header |
+| `title-icon` | Extra icon element rendered in the header at the position controlled by `titleIconPosition` (left of title or right of actions) |
 | `footer` | Custom footer content (replaces the `buttons` prop rendering) |

From d332edd26589989b1ed8ee2bd4d42699137ee8ed Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Mon, 4 May 2026 10:43:30 +0200
Subject: [PATCH 07/12] Updated docs check to check for gaps in documentation

---
 CLAUDE.md             |   1 +
 scripts/check-docs.js | 207 +++++++++++++++++++++++++++++++++++++++---
 2 files changed, 195 insertions(+), 13 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 913e537..279c1d4 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -224,6 +224,7 @@ See `examples/manifest-demo/manifest.json` for a fuller reference and `docs/migr
 5. **Run `npm test` before submitting changes**
 6. **CSS class prefix**: All classes use `cn-` prefix to avoid collisions
 7. **Theming**: Use Nextcloud CSS variables only (`var(--color-primary-element)`, `var(--color-border)`, etc.). Do NOT reference `--nldesign-*` variables — the nldesign app overrides Nextcloud's own variables, so theming works automatically.
+8. **Always update docs when you add, rename, or remove a prop, event, or slot** — edit `docs/components/cn-<component>.md` in the same change. The CI `check:docs` step (run via `npm run check:docs`) verifies both that a doc file exists AND that every SFC prop and named slot appears in it. Run it locally before committing to catch gaps.
 
 ## Adding New Components
 
diff --git a/scripts/check-docs.js b/scripts/check-docs.js
index f049210..2175090 100644
--- a/scripts/check-docs.js
+++ b/scripts/check-docs.js
@@ -19,8 +19,12 @@
  *
  * Exempt exports are allow-listed in EXEMPT (e.g. registerIcons).
  *
- * Exits 1 when any export lacks coverage. All categories are reported in
- * a single run so CI surfaces every gap at once.
+ * Phase 1 — existence: exits 1 when any export lacks a doc file.
+ * Phase 2 — accuracy: for every Component export, verifies that each prop
+ *   name and each static named-slot from the SFC appears somewhere in the
+ *   component's doc file. Exits 1 when any are missing.
+ *
+ * All categories are reported in a single run so CI surfaces every gap at once.
  */
 
 const fs = require('fs')
@@ -83,6 +87,137 @@ const STORE_MENTION_ONLY = {
 	getSchemaApiUrl: 'plugins.md',
 }
 
+// ---------------------------------------------------------------------------
+// SFC parsing helpers (used by Phase 2 accuracy check)
+// ---------------------------------------------------------------------------
+
+/**
+ * Extract prop names from a Vue SFC's script-block `props:` definition.
+ * Handles both object form (`props: { name: { ... } }`) and array form
+ * (`props: ['name1', 'name2']`). Uses brace-depth tracking so prop option
+ * keys (type, default, required, validator) are not mistaken for prop names.
+ * @param {string} sfcPath absolute path to the .vue file
+ * @return {string[]} camelCase prop names, or empty array when none found
+ */
+function extractSfcProps(sfcPath) {
+	if (!fs.existsSync(sfcPath)) return []
+	const source = fs.readFileSync(sfcPath, 'utf8')
+	const scriptMatch = source.match(/<script\b[^>]*>([\s\S]*?)<\/script>/m)
+	if (!scriptMatch) return []
+	const script = scriptMatch[1]
+
+	const propsIdx = script.search(/\bprops\s*:/)
+	if (propsIdx === -1) return []
+	const afterProps = script.slice(propsIdx)
+
+	// Array form: props: ['a', 'b']
+	const arrMatch = afterProps.match(/^props\s*:\s*\[([^\]]*)\]/)
+	if (arrMatch) {
+		const names = []
+		const re = /['"]([^'"]+)['"]/g
+		let m
+		while ((m = re.exec(arrMatch[1])) !== null) names.push(m[1])
+		return names
+	}
+
+	// Object form: walk characters tracking brace depth.
+	// Keys are captured at depth 1 (direct children of the props object):
+	//   - Right before a `{` opens a sub-object (e.g. `title: {`)
+	//   - At end of line for flat props (e.g. `name: String,`)
+	const braceIdx = afterProps.indexOf('{')
+	if (braceIdx === -1) return []
+
+	const propNames = []
+	let depth = 0
+	let lineText = ''
+
+	for (let i = braceIdx; i < afterProps.length; i++) {
+		const ch = afterProps[i]
+		if (ch === '{') {
+			// Capture key immediately before its options object opens
+			if (depth === 1) {
+				const key = lineText.match(/^\s+([a-zA-Z][a-zA-Z0-9]*)\s*:/)
+				if (key) propNames.push(key[1])
+			}
+			depth++
+		} else if (ch === '}') {
+			depth--
+			if (depth === 0) break
+		} else if (ch === '\n') {
+			// Capture flat prop (no sub-object) at end of its line
+			if (depth === 1) {
+				const key = lineText.match(/^\s+([a-zA-Z][a-zA-Z0-9]*)\s*:/)
+				if (key) propNames.push(key[1])
+			}
+			lineText = ''
+			continue
+		}
+		lineText += ch
+	}
+
+	return [...new Set(propNames)]
+}
+
+/**
+ * Extract names of all statically-named `<slot>` elements from a Vue SFC
+ * template. Dynamic `:name="..."` bindings are intentionally skipped since
+ * the slot name is only known at runtime and cannot be literally checked.
+ * @param {string} sfcPath absolute path to the .vue file
+ * @return {string[]} static slot names (the implicit default slot is excluded)
+ */
+function extractSfcNamedSlots(sfcPath) {
+	if (!fs.existsSync(sfcPath)) return []
+	const source = fs.readFileSync(sfcPath, 'utf8')
+	const templateMatch = source.match(/<template\b[^>]*>([\s\S]*?)<\/template>/m)
+	if (!templateMatch) return []
+
+	const slots = new Set()
+	const slotRe = /<slot\b([^>]*?)(?:\s*\/?>)/g
+	let m
+	while ((m = slotRe.exec(templateMatch[1])) !== null) {
+		const attrs = m[1]
+		if (attrs.includes(':name=')) continue // skip dynamic slot names
+		const nameM = attrs.match(/\bname="([^"]+)"/)
+		if (nameM) slots.add(nameM[1])
+	}
+	return [...slots]
+}
+
+/**
+ * Accuracy check for one Component export: verifies that every prop name and
+ * every static named slot defined in the SFC is mentioned at least once in
+ * the component's doc file (by camelCase or kebab-case name).
+ * @param {string} componentName PascalCase name (e.g. 'CnWidgetWrapper')
+ * @param {string} docPath absolute path to the component's .md file
+ * @return {string[]} plain-English issue strings (empty when all covered)
+ */
+function checkComponentDetail(componentName, docPath) {
+	const sfcPath = path.join(ROOT, 'src', 'components', componentName, `${componentName}.vue`)
+	if (!fs.existsSync(sfcPath) || !fs.existsSync(docPath)) return []
+
+	const docContent = fs.readFileSync(docPath, 'utf8')
+	const issues = []
+
+	for (const prop of extractSfcProps(sfcPath)) {
+		const kebab = toKebab(prop)
+		if (!docContent.includes(prop) && !docContent.includes(kebab)) {
+			issues.push(`prop \`${prop}\` (${kebab}) not mentioned in doc`)
+		}
+	}
+
+	for (const slot of extractSfcNamedSlots(sfcPath)) {
+		if (!docContent.includes(slot)) {
+			issues.push(`slot \`${slot}\` not mentioned in doc`)
+		}
+	}
+
+	return issues
+}
+
+// ---------------------------------------------------------------------------
+// Shared utilities
+// ---------------------------------------------------------------------------
+
 /**
  * Convert PascalCase or camelCase to kebab-case.
  * @param {string} name identifier to convert
@@ -228,14 +363,23 @@ function isCovered(info) {
 	return stems.has(info.expectedStem)
 }
 
+// ---------------------------------------------------------------------------
+// Phase 1: existence check
+// ---------------------------------------------------------------------------
+
 const exports_ = parsePublicExports(INDEX_FILE)
 
 const categories = new Map()
+const componentExports = [] // collected for Phase 2
+
 for (const name of exports_) {
 	const info = classify(name)
 	if (info.category === 'Exempt') {
 		continue
 	}
+	if (info.category === 'Components') {
+		componentExports.push(name)
+	}
 	if (!categories.has(info.category)) {
 		categories.set(info.category, { checked: 0, missing: [] })
 	}
@@ -261,21 +405,58 @@ for (const [category, { checked, missing }] of ordered) {
 	console.log(`  ${mark} ${category}: ${covered}/${checked}`)
 }
 
-if (totalMissing === 0) {
-	console.log(`\n✓ All ${totalChecked} public exports are documented.`)
-	process.exit(0)
+if (totalMissing > 0) {
+	console.error(`\n✗ ${totalMissing} export(s) are missing documentation:\n`)
+	for (const [category, { missing }] of ordered) {
+		if (missing.length === 0) {
+			continue
+		}
+		console.error(`${category}:`)
+		for (const { name, expectedPath } of missing) {
+			console.error(`  - ${name}  →  ${expectedPath}`)
+		}
+		console.error('')
+	}
+	console.error('Create the missing files (or add the missing mention) so every public export is documented.')
+	process.exit(1)
 }
 
-console.error(`\n✗ ${totalMissing} export(s) are missing documentation:\n`)
-for (const [category, { missing }] of ordered) {
-	if (missing.length === 0) {
-		continue
+console.log(`\n✓ All ${totalChecked} public exports are documented.`)
+
+// ---------------------------------------------------------------------------
+// Phase 2: accuracy check — every SFC prop and named slot must appear in doc
+// ---------------------------------------------------------------------------
+
+console.log('\nChecking component doc accuracy (props and slots):\n')
+
+const detailFailures = []
+
+for (const name of componentExports) {
+	const kebab = toKebab(name)
+	const docPath = path.join(DOCS_DIR, 'components', `${kebab}.md`)
+	const issues = checkComponentDetail(name, docPath)
+	if (issues.length > 0) {
+		detailFailures.push({ name, issues })
 	}
-	console.error(`${category}:`)
-	for (const { name, expectedPath } of missing) {
-		console.error(`  - ${name}  →  ${expectedPath}`)
+}
+
+const detailChecked = componentExports.length
+const detailFailed = detailFailures.length
+
+if (detailFailed === 0) {
+	console.log(`  ✓ All ${detailChecked} component docs cover their props and slots.`)
+	process.exit(0)
+}
+
+console.log(`  ✓ ${detailChecked - detailFailed}/${detailChecked} component docs cover their props and slots.`)
+console.error(`\n✗ ${detailFailed} component doc(s) are missing prop or slot coverage:\n`)
+for (const { name, issues } of detailFailures) {
+	const kebab = toKebab(name)
+	console.error(`${name}  (docs/components/${kebab}.md):`)
+	for (const issue of issues) {
+		console.error(`  - ${issue}`)
 	}
 	console.error('')
 }
-console.error('Create the missing files (or add the missing mention) so every public export is documented.')
+console.error('Add the missing props/slots to the component doc so every SFC interface item is covered.')
 process.exit(1)

From 5af4ae7c972cc3cdfa494d3aed4235da0fb16d2a Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Mon, 4 May 2026 10:43:58 +0200
Subject: [PATCH 08/12] Updated docs based on recently changed workflow

---
 docs/components/cn-configuration-card.md | 14 ++----
 docs/components/cn-detail-page.md        |  5 ++
 docs/components/cn-facet-sidebar.md      |  1 +
 docs/components/cn-index-page.md         |  2 +
 docs/components/cn-index-sidebar.md      |  1 +
 docs/components/cn-mass-copy-dialog.md   |  6 ++-
 docs/components/cn-mass-delete-dialog.md |  8 +++-
 docs/components/cn-mass-export-dialog.md | 12 +++--
 docs/components/cn-mass-import-dialog.md | 24 ++++++++--
 docs/components/cn-object-sidebar.md     |  1 +
 docs/components/cn-register-mapping.md   | 61 ++++++++++++++++--------
 docs/components/cn-schema-form-dialog.md |  1 +
 docs/components/cn-settings-card.md      |  6 +--
 docs/components/cn-settings-section.md   | 38 ++++++++-------
 docs/components/cn-stats-block.md        |  1 +
 docs/components/cn-status-badge.md       |  1 +
 docs/components/cn-tabbed-form-dialog.md |  1 +
 docs/components/cn-version-info-card.md  | 43 +++++++++++------
 18 files changed, 147 insertions(+), 79 deletions(-)

diff --git a/docs/components/cn-configuration-card.md b/docs/components/cn-configuration-card.md
index 50d471a..7f2063d 100644
--- a/docs/components/cn-configuration-card.md
+++ b/docs/components/cn-configuration-card.md
@@ -14,24 +14,16 @@ Configuration card with title, actions, and status indicator. Used for feature t
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `title` | String | `''` | Card title |
-| `description` | String | `''` | Card description |
-| `status` | String | `null` | `'active'`, `'inactive'`, `'error'`, `'warning'` |
-| `statusLabel` | String | `''` | Override status display text |
-| `loading` | Boolean | `false` | Loading state |
-
-## Events
-
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `action` | `actionName` | Action button clicked |
 
 ## Slots
 
 | Slot | Description |
 |------|-------------|
 | `default` | Card content |
-| `#actions` | Action buttons |
+| `#icon` | Icon displayed in the card header |
+| `#actions` | Action buttons in the card header |
 | `#status` | Custom status indicator |
+| `#footer` | Footer content below the card body |
 
 ## Usage
 
diff --git a/docs/components/cn-detail-page.md b/docs/components/cn-detail-page.md
index 77d8259..74b838b 100644
--- a/docs/components/cn-detail-page.md
+++ b/docs/components/cn-detail-page.md
@@ -18,6 +18,11 @@ A generic detail/overview page component. The simpler counterpart to CnIndexPage
 | `iconSize` | Number | `28` | Icon size in pixels |
 | `loading` | Boolean | `false` | Loading state |
 | `loadingLabel` | String | `'Loading...'` | Message shown during loading |
+| `sidebar` | Boolean | `false` | Whether to activate the external `CnObjectSidebar` via the `objectSidebarState` inject |
+| `sidebarOpen` | Boolean | `true` | Whether the sidebar starts open (only relevant when `sidebar` is `true`) |
+| `objectType` | String | `''` | Object type slug passed to the sidebar (e.g. `'pipelinq_lead'`) |
+| `objectId` | String\|Number | `''` | Object ID passed to the sidebar |
+| `sidebarProps` | Object | `{}` | Extra sidebar configuration forwarded to `CnObjectSidebar` (`register`, `schema`, `hiddenTabs`, `title`, `subtitle`) |
 | `error` | Boolean | `false` | Error state |
 | `errorMessage` | String | `'An error occurred'` | Message shown in error state |
 | `onRetry` | Function | `null` | Callback for retry button in error state. If null, no retry button shown. |
diff --git a/docs/components/cn-facet-sidebar.md b/docs/components/cn-facet-sidebar.md
index 44586ff..5cf6f37 100644
--- a/docs/components/cn-facet-sidebar.md
+++ b/docs/components/cn-facet-sidebar.md
@@ -20,6 +20,7 @@ Auto-generated faceted search sidebar from schema. Renders filter controls for p
 | `loading` | Boolean | `false` | Loading state |
 | `title` | String | `'Filters'` | Sidebar title |
 | `clearLabel` | String | `'Clear all'` | Clear all button label |
+| `userIsAdmin` | Boolean | `true` | Whether the current user is an admin. When `false`, schema properties with `adminOnly: true` are hidden from the filter list. |
 
 ## Events
 
diff --git a/docs/components/cn-index-page.md b/docs/components/cn-index-page.md
index 55ba00c..93784c5 100644
--- a/docs/components/cn-index-page.md
+++ b/docs/components/cn-index-page.md
@@ -18,6 +18,8 @@ The main list page component. Combines a data table (or card grid), filter bar,
 |------|------|---------|-------------|
 | `title` | String | *(required)* | Page title |
 | `description` | String | `''` | Optional subtitle |
+| `showTitle` | Boolean | `false` | Show the page header (icon, title, description) inline above the table. When `false` (default), the title is shown in the sidebar header instead. |
+| `icon` | String | `''` | MDI icon name for the page header. Defaults to `schema.icon` when a schema is provided. |
 | `schema` | Object | `null` | OpenRegister schema for auto-generating columns, filters, and form fields |
 | `objects` | Array | `[]` | Row data |
 | `pagination` | Object | `null` | Pagination state (`\{ currentPage, totalPages, totalItems, pageSize \}`) |
diff --git a/docs/components/cn-index-sidebar.md b/docs/components/cn-index-sidebar.md
index 3312a83..e0f3b13 100644
--- a/docs/components/cn-index-sidebar.md
+++ b/docs/components/cn-index-sidebar.md
@@ -86,6 +86,7 @@ When using `CnIndexPage`, the sidebar is managed internally — you do not need
 | `filtersLabel` | String | `'Filters'` | Heading above the filter controls |
 | `columnsHeading` | String | `'Column Visibility'` | Heading inside the Columns tab |
 | `columnsDescription` | String | `'Select which columns to display in the table'` | Subtitle inside the Columns tab |
+| `userIsAdmin` | Boolean | `true` | Whether the current user is an admin. When `false`, schema properties with `adminOnly: true` are hidden from the filter list in the Search tab. |
 
 ### Events
 
diff --git a/docs/components/cn-mass-copy-dialog.md b/docs/components/cn-mass-copy-dialog.md
index 6caa6cf..5ca33a3 100644
--- a/docs/components/cn-mass-copy-dialog.md
+++ b/docs/components/cn-mass-copy-dialog.md
@@ -20,8 +20,12 @@ Two-phase mass copy dialog with naming pattern. Allows users to define a naming
 | `dialogTitle` | String | `'Copy items'` | |
 | `patternLabel` | String | `'Naming pattern'` | |
 | `patternPlaceholder` | String | `'\{name\} (copy)'` | |
-| `confirmLabel` | String | `'Copy'` | |
+| `emptyText` | String | `'No items selected for copying.'` | Message shown when all items have been removed from the list |
+| `successText` | String | `'Items successfully copied.'` | Message shown in the result phase on success |
 | `cancelLabel` | String | `'Cancel'` | |
+| `closeLabel` | String | `'Close'` | Label for the close button shown in the result phase |
+| `confirmLabel` | String | `'Copy'` | |
+| `removeLabel` | String | `'Remove from list'` | Tooltip/label for the per-item remove button |
 
 ## Events
 
diff --git a/docs/components/cn-mass-delete-dialog.md b/docs/components/cn-mass-delete-dialog.md
index a9d7790..e3022cd 100644
--- a/docs/components/cn-mass-delete-dialog.md
+++ b/docs/components/cn-mass-delete-dialog.md
@@ -18,9 +18,13 @@ Two-phase mass delete confirmation dialog. Shows list of items to delete, requir
 | `nameField` | String | `'title'` | Field to display as item name |
 | `nameFormatter` | Function | `null` | Optional function `(item) => string` to format item names. Overrides `nameField` when provided. |
 | `dialogTitle` | String | `'Delete items'` | |
-| `warningText` | String | `''` | Warning message |
-| `confirmLabel` | String | `'Delete'` | |
+| `warningText` | String | `''` | Warning text shown above the item list |
+| `emptyText` | String | `'No items selected for deletion.'` | Message shown when all items have been removed from the list |
+| `successText` | String | `'Items successfully deleted.'` | Message shown in the result phase on success |
 | `cancelLabel` | String | `'Cancel'` | |
+| `closeLabel` | String | `'Close'` | Label for the close button shown in the result phase |
+| `confirmLabel` | String | `'Delete'` | |
+| `removeLabel` | String | `'Remove from list'` | Tooltip/label for the per-item remove button |
 
 ## Events
 
diff --git a/docs/components/cn-mass-export-dialog.md b/docs/components/cn-mass-export-dialog.md
index e07ae91..a530e06 100644
--- a/docs/components/cn-mass-export-dialog.md
+++ b/docs/components/cn-mass-export-dialog.md
@@ -14,11 +14,15 @@ Export format selection dialog. Lets users pick a format and triggers export for
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `items` | Array | `[]` | Items to export |
-| `formats` | Array | `['json', 'csv']` | Available export formats |
-| `dialogTitle` | String | `'Export items'` | |
-| `confirmLabel` | String | `'Export'` | |
+| `dialogTitle` | String | `'Export objects'` | |
+| `description` | String | `''` | Optional description text shown above the format selector |
+| `formats` | Array | `[{ id: 'excel', label: 'Excel (.xlsx)' }, { id: 'csv', label: 'CSV (.csv)' }]` | Available export formats as `[{ id, label }]` objects |
+| `defaultFormat` | String | `'excel'` | ID of the format selected by default |
+| `successText` | String | `'Export completed successfully.'` | Message shown in the result phase on success |
+| `formatLabel` | String | `'Export format'` | Label above the format selector |
 | `cancelLabel` | String | `'Cancel'` | |
+| `closeLabel` | String | `'Close'` | Label for the close button shown in the result phase |
+| `confirmLabel` | String | `'Export'` | |
 
 ## Events
 
diff --git a/docs/components/cn-mass-import-dialog.md b/docs/components/cn-mass-import-dialog.md
index 8f5426b..f752392 100644
--- a/docs/components/cn-mass-import-dialog.md
+++ b/docs/components/cn-mass-import-dialog.md
@@ -14,12 +14,26 @@ File upload dialog with options and results summary. Supports importing data fro
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `dialogTitle` | String | `'Import items'` | |
-| `acceptedTypes` | String | `'.json,.csv'` | Accepted file types |
-| `options` | Array | `[]` | Additional import options |
-| `confirmLabel` | String | `'Import'` | |
+| `dialogTitle` | String | `'Import data'` | |
+| `acceptedTypes` | String | `'.json,.xlsx,.xls,.csv'` | Accepted file types (input `accept` attribute) |
+| `options` | Array | `[]` | Additional import option definitions |
+| `fileTypeHelp` | Array | `[{ label, description }]` | Help entries shown in the "Supported file types" list; defaults to JSON, Excel, and CSV entries |
+| `canSubmit` | Boolean | `true` | Whether the form is ready to submit. The parent can set this to `false` (via a slot) while required options are incomplete. |
+| `successText` | String | `'Import completed successfully!'` | Message shown in the result phase when all rows imported without errors |
+| `partialSuccessText` | String | `'Import completed with errors. Check the details below.'` | Message shown when the import finished but with some errors |
+| `loadingText` | String | `'Importing data — this may take a moment for large files...'` | Text shown while the import is running |
+| `summaryTitle` | String | `'Import summary'` | Heading above the result summary table |
+| `supportedFormatsLabel` | String | `'Supported file types:'` | Label above the file type help list |
+| `selectFileLabel` | String | `'Select file'` | Label for the file-picker button |
 | `cancelLabel` | String | `'Cancel'` | |
-| `maxFileSize` | Number | `10485760` | Max file size in bytes (10MB default) |
+| `closeLabel` | String | `'Close'` | Label for the close button shown in the result phase |
+| `confirmLabel` | String | `'Import'` | |
+| `sheetLabel` | String | `'Sheet'` | Column header for the sheet name in the summary table |
+| `foundLabel` | String | `'Found'` | Column header for the found-rows count |
+| `createdLabel` | String | `'Created'` | Column header for the created-rows count |
+| `updatedLabel` | String | `'Updated'` | Column header for the updated-rows count |
+| `unchangedLabel` | String | `'Unchanged'` | Column header for the unchanged-rows count |
+| `errorsLabel` | String | `'Errors'` | Column header for the error count |
 
 ## Events
 
diff --git a/docs/components/cn-object-sidebar.md b/docs/components/cn-object-sidebar.md
index 4009e1c..dd7c93b 100644
--- a/docs/components/cn-object-sidebar.md
+++ b/docs/components/cn-object-sidebar.md
@@ -60,6 +60,7 @@ Right sidebar for entity detail pages. Provides standardized tabs — Files, Not
 | `open` | Boolean | | `true` | Whether the sidebar is visible |
 | `title` | String | | `''` | Sidebar title (defaults to `objectType`) |
 | `subtitle` | String | | `''` | Sidebar subtitle |
+| `subtitleProp` | String | | `''` | **Deprecated** — use `subtitle` instead |
 | `apiBase` | String | | `'/apps/openregister/api'` | Base URL for OpenRegister API calls |
 | `filesLabel` | String | | `'Files'` | Files tab label |
 | `notesLabel` | String | | `'Notes'` | Notes tab label |
diff --git a/docs/components/cn-register-mapping.md b/docs/components/cn-register-mapping.md
index 0cc327c..e4df8ea 100644
--- a/docs/components/cn-register-mapping.md
+++ b/docs/components/cn-register-mapping.md
@@ -4,45 +4,64 @@ sidebar_position: 27
 
 # CnRegisterMapping
 
-OpenRegister register/schema configuration panel. Allows admin users to map app object types to OpenRegister registers and schemas.
+OpenRegister register/schema configuration panel. Lets admin users map app object types to OpenRegister registers and schemas. Groups related object types together, shows a register dropdown (with auto-schema-matching), and a save/reimport action area.
 
-**Wraps**: NcSelect, NcNoteCard, NcButton, NcLoadingIcon
+**Wraps**: NcSelect, NcNoteCard, NcButton, NcLoadingIcon (via CnSettingsSection)
 
 ![CnRegisterMapping showing register and schema dropdowns for each entity type](/img/screenshots/cn-register-mapping.png)
 
-![CnRegisterMapping showing source, register, and schema dropdowns for each entity type](/img/screenshots/cn-register-mapping.png)
-
 ## Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `objectTypes` | Object | `\{\}` | Map of `\{ typeSlug: \{ source, register, schema \} \}` |
-| `registers` | Array | `[]` | Available registers |
-| `schemas` | Array | `[]` | Available schemas |
-| `sources` | Array | `[]` | Available sources |
-| `loading` | Boolean | `false` | Loading state |
-| `saving` | Boolean | `false` | Save in progress |
+| `groups` | Array | *(required)* | Groups of object types that share a register. Each group: `{ name, description?, registerConfigKey?, types: [{ slug, label, description?, configKey? }] }` |
+| `name` | String | `'Register configuration'` | Section title |
+| `description` | String | `'Configure OpenRegister schema mappings for your object types'` | Section description |
+| `docUrl` | String | `''` | Documentation URL — shows an info icon next to the title |
+| `configuration` | Object | `{}` | Current configuration values keyed by config key: `{ register: '5', client_schema: '28', ... }` |
+| `showSaveButton` | Boolean | `true` | Whether to show the Save button |
+| `saving` | Boolean | `false` | Whether a save is in progress |
+| `showReimportButton` | Boolean | `false` | Whether to show the Re-import button |
+| `reimporting` | Boolean | `false` | Whether a reimport is in progress |
+| `saveButtonText` | String | `'Save configuration'` | Save button label |
+| `reimportButtonText` | String | `'Re-import configuration'` | Re-import button label |
+| `autoMatch` | Boolean | `true` | When a register is selected, automatically match schema titles to object type slugs |
+| `labels` | Object | `{ register, schema, configured, notConfigured, noSchemas, selectRegister, selectSchema, allConfigured, partiallyConfigured }` | Override UI strings (all default to translated English) |
 
 ## Events
 
 | Event | Payload | Description |
 |-------|---------|-------------|
-| `save` | `mappings` | Save mappings object |
-| `refresh` | — | Refresh registers/schemas list |
-| `auto-detect` | — | Auto-detect schemas from register |
+| `update:configuration` | `configuration` | Emitted when any register or schema selection changes (use with `.sync` or `v-model`) |
+| `save` | — | Save button clicked |
+| `reimport` | — | Re-import button clicked |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `#actions` | Extra action buttons rendered alongside Save/Re-import |
+| `#group-header` | Custom header content for each group (scoped: `{ group }`) |
+| `#footer` | Footer content below the configuration section |
 
 ## Usage
 
 ```vue
 <CnRegisterMapping
-  :object-types="settings.objectTypes"
-  :registers="registers"
-  :schemas="schemas"
-  :sources="sources"
-  :loading="loading"
+  :groups="[
+    {
+      name: 'Client management',
+      registerConfigKey: 'client_register',
+      types: [
+        { slug: 'client', label: 'Clients', configKey: 'client_schema' },
+        { slug: 'contact', label: 'Contacts', configKey: 'contact_schema' },
+      ],
+    },
+  ]"
+  :configuration="settings"
   :saving="saving"
-  @save="onSaveMappings"
-  @refresh="fetchRegisters" />
+  @update:configuration="settings = $event"
+  @save="onSave" />
 ```
 
-This component is typically used in the admin settings page of an app to let administrators configure which OpenRegister registers and schemas map to each entity type in the app.
+This component is typically used in the admin settings page of an app to let administrators configure which OpenRegister registers and schemas map to each entity type.
diff --git a/docs/components/cn-schema-form-dialog.md b/docs/components/cn-schema-form-dialog.md
index 67244d5..1f66c3d 100644
--- a/docs/components/cn-schema-form-dialog.md
+++ b/docs/components/cn-schema-form-dialog.md
@@ -58,6 +58,7 @@ These props feed external data into the form. The component never fetches data o
 | `userGroups` | `Array` | `[]` | User groups for the Security (RBAC) tab. Each entry should have `{ id, displayname }`. The groups `admin` and `public` are automatically filtered out from this list since they have dedicated rows. Groups are sorted alphabetically by display name. When empty, only the built-in `public`, `user`, and `admin` rows are shown. |
 | `availableTags` | `Array` | `[]` | Tags available for the file property tag configuration. Array of strings (e.g. `['image', 'document', 'audio']`). Used in the property detail panel when a property has `type: 'file'` to configure allowed file tags. When empty, the tag selector shows no options. |
 | `loadingGroups` | `Boolean` | `false` | Whether user groups are still being loaded by the parent. When `true`, the Security tab shows a loading indicator instead of the RBAC table. Set this to `true` while fetching groups, then `false` once `userGroups` is populated. |
+| `inheritedProperties` | `Object` | `{}` | Properties inherited from parent schemas (allOf). Displayed as locked, non-editable rows in the Properties tab so the user can see the full property surface including inherited fields. |
 | `objectCount` | `Number` | `0` | Number of objects currently attached to this schema. Used for two purposes: (1) the "Delete Objects" and "Publish Objects" buttons are disabled when `objectCount === 0` (nothing to act on), and (2) the "Delete" (schema) button is disabled when `objectCount > 0` (cannot delete a schema with attached objects). |
 
 ### Action button visibility props
diff --git a/docs/components/cn-settings-card.md b/docs/components/cn-settings-card.md
index 60df04d..04212c3 100644
--- a/docs/components/cn-settings-card.md
+++ b/docs/components/cn-settings-card.md
@@ -13,9 +13,9 @@ Collapsible card for organizing settings into sections. Used in admin settings p
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `title` | String | `''` | Card title |
-| `description` | String | `''` | Card description |
-| `collapsed` | Boolean | `false` | Initial collapsed state |
-| `collapsible` | Boolean | `true` | Allow collapsing |
+| `icon` | String | `''` | Emoji or text icon displayed before the title |
+| `collapsible` | Boolean | `false` | Allow collapsing the card |
+| `defaultCollapsed` | Boolean | `false` | Whether the card starts in a collapsed state (only relevant when `collapsible` is `true`) |
 
 ## Events
 
diff --git a/docs/components/cn-settings-section.md b/docs/components/cn-settings-section.md
index e51fa85..a1073cd 100644
--- a/docs/components/cn-settings-section.md
+++ b/docs/components/cn-settings-section.md
@@ -16,19 +16,18 @@ Admin settings section with loading and error states. Wraps NcSettingsSection wi
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `title` | String | `''` | Section title |
-| `description` | String | `''` | Section description |
-| `loading` | Boolean | `false` | Loading state |
-| `error` | String | `null` | Error message to display |
-| `saveLabel` | String | `'Save'` | Save button label |
-| `saving` | Boolean | `false` | Save in progress |
-
-## Events
-
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `save` | — | Save button clicked |
-| `retry` | — | Retry button clicked (on error) |
+| `name` | String | *(required)* | Section title (passed to `NcSettingsSection`) |
+| `description` | String | `''` | Brief section description shown under the title |
+| `detailedDescription` | String | `''` | Longer description rendered in a separate block below the title |
+| `docUrl` | String | `''` | Documentation URL — shows an info icon link next to the title |
+| `loading` | Boolean | `false` | Loading state — shows a loading indicator instead of content |
+| `loadingMessage` | String | `'Loading...'` | Message shown during loading |
+| `error` | Boolean | `false` | Error state — shows an error card with optional retry button |
+| `errorMessage` | String | `'An error occurred'` | Message shown in error state |
+| `onRetry` | Function | `null` | Callback for the retry button. When `null`, no retry button is shown. |
+| `retryButtonText` | String | `'Retry'` | Label for the retry button |
+| `empty` | Boolean | `false` | Empty state — shows an empty message instead of content |
+| `emptyMessage` | String | `'No data available'` | Message shown when the section has no data |
 
 ## Slots
 
@@ -36,17 +35,20 @@ Admin settings section with loading and error states. Wraps NcSettingsSection wi
 |------|-------------|
 | `default` | Section content |
 | `#actions` | Extra action buttons |
+| `#description` | Custom description content (replaces `description` prop) |
+| `#footer` | Footer content rendered below the section body |
+| `#empty` | Custom empty state (replaces the default empty message) |
 
 ## Usage
 
 ```vue
 <CnSettingsSection
-  title="API Configuration"
+  name="API Configuration"
+  description="Configure the external API connection"
   :loading="loading"
-  :error="error"
-  :saving="saving"
-  @save="onSave"
-  @retry="fetchSettings">
+  :error="hasError"
+  error-message="Could not load settings"
+  :on-retry="fetchSettings">
   <NcTextField label="API URL" v-model="apiUrl" />
   <NcTextField label="API Key" v-model="apiKey" type="password" />
 </CnSettingsSection>
diff --git a/docs/components/cn-stats-block.md b/docs/components/cn-stats-block.md
index a10abbc..0009248 100644
--- a/docs/components/cn-stats-block.md
+++ b/docs/components/cn-stats-block.md
@@ -27,6 +27,7 @@ Statistics display card with icon, count, and optional breakdown. Used inside Cn
 | `horizontal` | Boolean | `false` | Icon-left layout |
 | `clickable` | Boolean | `false` | Enable click interaction |
 | `showZeroCount` | Boolean | `false` | Display 0 as a count value instead of the empty label |
+| `route` | Object | `null` | Vue Router location object (`{ name, path, query, ... }`). When set, the card renders as a `<router-link>` and clickable styles are applied automatically. |
 
 ## Events
 
diff --git a/docs/components/cn-status-badge.md b/docs/components/cn-status-badge.md
index 5a522e8..bf070ea 100644
--- a/docs/components/cn-status-badge.md
+++ b/docs/components/cn-status-badge.md
@@ -23,6 +23,7 @@ Color-coded pill badge for status, priority, or category display. Supports autom
 | Slot | Description |
 |------|-------------|
 | default | Custom label content |
+| `#icon` | Icon element displayed before the label text |
 
 ## Usage
 
diff --git a/docs/components/cn-tabbed-form-dialog.md b/docs/components/cn-tabbed-form-dialog.md
index bcdc5df..b5e0dab 100644
--- a/docs/components/cn-tabbed-form-dialog.md
+++ b/docs/components/cn-tabbed-form-dialog.md
@@ -19,6 +19,7 @@ A generic tabbed dialog for create/edit forms. Provides the standard dialog shel
 | `size` | `String` | `'large'` | NcDialog size |
 | `showCreateAnother` | `Boolean` | `false` | Show "Create Another" checkbox in create mode |
 | `disableSave` | `Boolean` | `false` | Disable primary button (parent controls validation) |
+| `disableSaveTooltip` | `String` | `''` | Tooltip shown on the save button when it is disabled — explains the blocked state to the user (also used as `aria-label` for accessibility). |
 | `successText` | `String` | `''` | Custom success message |
 | `cancelLabel` | `String` | `'Cancel'` | Cancel button text |
 | `closeLabel` | `String` | `'Close'` | Close button text (result phase) |
diff --git a/docs/components/cn-version-info-card.md b/docs/components/cn-version-info-card.md
index 9c3fba0..fe68993 100644
--- a/docs/components/cn-version-info-card.md
+++ b/docs/components/cn-version-info-card.md
@@ -4,7 +4,7 @@ sidebar_position: 26
 
 # CnVersionInfoCard
 
-Displays app version information in admin settings. Shows current version, Nextcloud compatibility, and optional update notice.
+Displays application version information in admin settings pages. Shows the app name, installed version, optional configured version, and an update status indicator with an optional update button.
 
 ## Props
 
@@ -12,29 +12,44 @@ Displays app version information in admin settings. Shows current version, Nextc
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `appName` | String | `''` | Application name |
-| `version` | String | `''` | Current version string |
-| `ncVersion` | String | `''` | Nextcloud version compatibility |
-| `phpVersion` | String | `''` | PHP version compatibility |
-| `databaseVersion` | String | `''` | Database version info |
-| `updateAvailable` | Boolean | `false` | Show update notice |
-| `latestVersion` | String | `''` | Latest available version |
+| `appName` | String | *(required)* | Application name displayed in the version row |
+| `appVersion` | String | *(required)* | Installed application version string |
+| `title` | String | `'Version information'` | Section title |
+| `description` | String | `'Information about the current application installation'` | Section description |
+| `docUrl` | String | `''` | Documentation URL — shows an info icon link next to the title |
+| `cardTitle` | String | `'Application information'` | Heading shown inside the card |
+| `configuredVersion` | String | `''` | Configured version string (for apps that track configuration versions separately). When non-empty, an extra row is shown. |
+| `isUpToDate` | Boolean | `true` | Whether the configured version matches the installed version. Controls the status indicator color. |
+| `showUpdateButton` | Boolean | `false` | Whether to show an "Update" action button |
+| `updating` | Boolean | `false` | Whether an update is currently in progress (shows a loading indicator on the button) |
+| `additionalItems` | Array | `[]` | Extra key-value items: `[{ label, value, statusClass? }]` |
 | `loading` | Boolean | `false` | Loading state |
+| `labels` | Object | `{ appName: 'Application Name', version: 'Version', configuredVersion: 'Configured Version' }` | Override the standard row labels |
+
+## Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `update` | — | Emitted when the Update button is clicked |
 
 ## Slots
 
 | Slot | Description |
 |------|-------------|
-| `#extra-info` | Additional version info rows |
+| `#actions` | Extra action buttons in the card header |
+| `#additional-items` | Custom additional items (replaces `additionalItems` prop rendering) |
+| `#footer` | Footer content below the card |
+| `#extra-cards` | Additional cards rendered after the version info card |
 
 ## Usage
 
 ```vue
 <CnVersionInfoCard
   app-name="OpenRegister"
-  version="1.5.0"
-  nc-version="28+"
-  php-version="8.1+"
-  :update-available="true"
-  latest-version="1.6.0" />
+  app-version="1.5.0"
+  configured-version="1.4.0"
+  :is-up-to-date="false"
+  :show-update-button="true"
+  :updating="updating"
+  @update="runUpdate" />
 ```

From 796e4eadf7f6af16efea957027a2a5a07591161e Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Mon, 4 May 2026 11:00:22 +0200
Subject: [PATCH 09/12] Updated check-docs to check more then just components

---
 scripts/check-docs.js | 210 +++++++++++++++++++++++++++++++++++++++---
 1 file changed, 196 insertions(+), 14 deletions(-)

diff --git a/scripts/check-docs.js b/scripts/check-docs.js
index 2175090..296b0c9 100644
--- a/scripts/check-docs.js
+++ b/scripts/check-docs.js
@@ -88,7 +88,137 @@ const STORE_MENTION_ONLY = {
 }
 
 // ---------------------------------------------------------------------------
-// SFC parsing helpers (used by Phase 2 accuracy check)
+// JS source helpers (used by Phase 2 accuracy check — non-component exports)
+// ---------------------------------------------------------------------------
+
+/**
+ * @param names that should be skipped during the accuracy check because they
+ * are either generic containers ('options', 'params') or too short to carry
+ * meaningful signal ('e', 'err'). The check would produce too many false
+ * positives if it required every doc to spell out these placeholder names.
+ */
+const SKIP_PARAMS = new Set(['options', 'params', 'e', 'err', 'error', 'cb', 'fn', 'response'])
+
+/**
+ * Find the JS source file that contains the definition of a given export.
+ * Returns null when the file cannot be determined (e.g. store constants that
+ * live in the same file as a plugin — those are covered by mention-only checks
+ * in Phase 1 and don't need an accuracy check).
+ * @param {string} exportName identifier from src/index.js
+ * @param {string} category classification returned by classify()
+ * @return {string|null} absolute path to the source file, or null
+ */
+function findSourceFile(exportName, category) {
+	if (category === 'Composables') {
+		return path.join(ROOT, 'src', 'composables', `${exportName}.js`)
+	}
+	if (category === 'Store plugins') {
+		// e.g. 'auditTrailsPlugin' → 'auditTrails.js'
+		const stem = exportName.slice(0, -'Plugin'.length)
+		return path.join(ROOT, 'src', 'store', 'plugins', `${stem}.js`)
+	}
+	if (category === 'Store factories') {
+		const map = {
+			useObjectStore: path.join(ROOT, 'src', 'store', 'index.js'),
+			createObjectStore: path.join(ROOT, 'src', 'store', 'index.js'),
+			createCrudStore: path.join(ROOT, 'src', 'store', 'createCrudStore.js'),
+			createSubResourcePlugin: path.join(ROOT, 'src', 'store', 'createSubResourcePlugin.js'),
+		}
+		return map[exportName] || null
+	}
+	if (category === 'Utilities') {
+		// Search every utils/*.js file (excluding the barrel) for this export
+		const utilDir = path.join(ROOT, 'src', 'utils')
+		for (const file of fs.readdirSync(utilDir)) {
+			if (!file.endsWith('.js') || file === 'index.js') continue
+			const filePath = path.join(utilDir, file)
+			const content = fs.readFileSync(filePath, 'utf8')
+			const funcRe = new RegExp(`export\\s+(?:async\\s+)?function\\s+${exportName}\\b`)
+			const constRe = new RegExp(`export\\s+const\\s+${exportName}\\b`)
+			if (funcRe.test(content) || constRe.test(content)) return filePath
+		}
+		return null
+	}
+	return null
+}
+
+/**
+ * Extract @param names from the JSDoc block immediately preceding the named
+ * export declaration in a JS file. Only looks at the JSDoc for that specific
+ * function so params from sibling exports don't pollute results.
+ * @param {string} filePath absolute path to the .js source file
+ * @param {string} exportName identifier to look up (function or const name)
+ * @return {string[]} @param identifiers (may include 'options.subKey' dotted forms)
+ */
+function extractFunctionParams(filePath, exportName) {
+	if (!filePath || !fs.existsSync(filePath)) return []
+	const source = fs.readFileSync(filePath, 'utf8')
+
+	// Locate the export declaration for this specific function
+	const funcRe = new RegExp(
+		`export\\s+(?:async\\s+)?function\\s+${exportName}\\b|export\\s+const\\s+${exportName}\\s*=`,
+	)
+	const funcMatch = funcRe.exec(source)
+	if (!funcMatch) return []
+
+	// Find the last /** ... */ JSDoc block that sits before this declaration
+	const before = source.slice(0, funcMatch.index)
+	const jsdocRe = /\/\*\*[\s\S]*?\*\//g
+	let lastJsdoc = null
+	let jsdocMatch
+	while ((jsdocMatch = jsdocRe.exec(before)) !== null) {
+		lastJsdoc = jsdocMatch[0]
+	}
+	if (!lastJsdoc) return []
+
+	// Pull out every @param identifier (handles both plain and [optional] forms)
+	const paramRe = /@param\s+\{[^}]+\}\s+\[?([a-zA-Z][a-zA-Z0-9._]*)\]?/g
+	const params = new Set()
+	let m
+	while ((m = paramRe.exec(lastJsdoc)) !== null) {
+		params.add(m[1])
+	}
+	return [...params]
+}
+
+/**
+ * Accuracy check for a non-component JS export: verifies that every
+ * meaningful @param name from the JSDoc appears in the export's doc file
+ * (by exact match or, for `options.subKey` dotted paths, by the leaf name).
+ * @param {string} exportName identifier from src/index.js
+ * @param {string|null} srcPath absolute path to the source file
+ * @param {string} docPath absolute path to the expected .md doc file
+ * @return {string[]} plain-English issue strings (empty when all covered)
+ */
+function checkJsAccuracy(exportName, srcPath, docPath) {
+	if (!srcPath || !fs.existsSync(srcPath) || !fs.existsSync(docPath)) return []
+
+	const params = extractFunctionParams(srcPath, exportName)
+	if (params.length === 0) return []
+
+	const docContent = fs.readFileSync(docPath, 'utf8')
+	const issues = []
+
+	for (const param of params) {
+		const parts = param.split('.')
+		const leaf = parts[parts.length - 1]
+
+		// Skip generic placeholder names
+		if (SKIP_PARAMS.has(leaf) || SKIP_PARAMS.has(param)) continue
+		// Skip single-character params and dual-form implementation names
+		if (leaf.length <= 1 || param.endsWith('OrOptions') || param.endsWith('OrString')) continue
+
+		// Check: the exact param name OR (for dotted paths) just the leaf must appear in the doc
+		if (!docContent.includes(param) && !docContent.includes(leaf)) {
+			issues.push(`param \`${param}\` not mentioned in doc`)
+		}
+	}
+
+	return issues
+}
+
+// ---------------------------------------------------------------------------
+// SFC parsing helpers (used by Phase 2 accuracy check — Component exports)
 // ---------------------------------------------------------------------------
 
 /**
@@ -370,7 +500,12 @@ function isCovered(info) {
 const exports_ = parsePublicExports(INDEX_FILE)
 
 const categories = new Map()
-const componentExports = [] // collected for Phase 2
+const componentExports = [] // collected for Phase 2a (SFC prop/slot check)
+
+// Categories that get a Phase 2b @param accuracy check (must have their own
+// doc file — Store constants use mention-only and are skipped).
+const JS_ACCURACY_CATEGORIES = new Set(['Composables', 'Utilities', 'Store factories', 'Store plugins'])
+const jsExports = [] // { name, category, docPath } collected for Phase 2b
 
 for (const name of exports_) {
 	const info = classify(name)
@@ -380,6 +515,11 @@ for (const name of exports_) {
 	if (info.category === 'Components') {
 		componentExports.push(name)
 	}
+	// Collect JS exports that have a dedicated doc file for the @param check
+	if (JS_ACCURACY_CATEGORIES.has(info.category) && !info.mentionFile && info.searchDir && info.expectedStem) {
+		const docPath = path.join(info.searchDir, `${info.expectedStem}.md`)
+		jsExports.push({ name, category: info.category, docPath })
+	}
 	if (!categories.has(info.category)) {
 		categories.set(info.category, { checked: 0, missing: [] })
 	}
@@ -424,7 +564,7 @@ if (totalMissing > 0) {
 console.log(`\n✓ All ${totalChecked} public exports are documented.`)
 
 // ---------------------------------------------------------------------------
-// Phase 2: accuracy check — every SFC prop and named slot must appear in doc
+// Phase 2a: accuracy check — every SFC prop and named slot must appear in doc
 // ---------------------------------------------------------------------------
 
 console.log('\nChecking component doc accuracy (props and slots):\n')
@@ -445,18 +585,60 @@ const detailFailed = detailFailures.length
 
 if (detailFailed === 0) {
 	console.log(`  ✓ All ${detailChecked} component docs cover their props and slots.`)
-	process.exit(0)
+} else {
+	console.log(`  ✓ ${detailChecked - detailFailed}/${detailChecked} component docs cover their props and slots.`)
+	console.error(`\n✗ ${detailFailed} component doc(s) are missing prop or slot coverage:\n`)
+	for (const { name, issues } of detailFailures) {
+		const kebab = toKebab(name)
+		console.error(`${name}  (docs/components/${kebab}.md):`)
+		for (const issue of issues) {
+			console.error(`  - ${issue}`)
+		}
+		console.error('')
+	}
 }
 
-console.log(`  ✓ ${detailChecked - detailFailed}/${detailChecked} component docs cover their props and slots.`)
-console.error(`\n✗ ${detailFailed} component doc(s) are missing prop or slot coverage:\n`)
-for (const { name, issues } of detailFailures) {
-	const kebab = toKebab(name)
-	console.error(`${name}  (docs/components/${kebab}.md):`)
-	for (const issue of issues) {
-		console.error(`  - ${issue}`)
+// ---------------------------------------------------------------------------
+// Phase 2b: accuracy check — every JSDoc @param must appear in the doc
+// ---------------------------------------------------------------------------
+
+console.log('\nChecking JS export doc accuracy (JSDoc @param names):\n')
+
+const jsDetailFailures = []
+
+for (const { name, category, docPath } of jsExports) {
+	const srcPath = findSourceFile(name, category)
+	const issues = checkJsAccuracy(name, srcPath, docPath)
+	if (issues.length > 0) {
+		jsDetailFailures.push({ name, category, issues, docPath })
+	}
+}
+
+const jsDetailChecked = jsExports.length
+const jsDetailFailed = jsDetailFailures.length
+
+if (jsDetailFailed === 0) {
+	console.log(`  ✓ All ${jsDetailChecked} JS export docs cover their @param names.`)
+} else {
+	console.log(`  ✓ ${jsDetailChecked - jsDetailFailed}/${jsDetailChecked} JS export docs cover their @param names.`)
+	console.error(`\n✗ ${jsDetailFailed} JS export doc(s) are missing @param coverage:\n`)
+	for (const { name, category, issues, docPath } of jsDetailFailures) {
+		const rel = path.relative(ROOT, docPath).replace(/\\/g, '/')
+		console.error(`${name} [${category}]  (${rel}):`)
+		for (const issue of issues) {
+			console.error(`  - ${issue}`)
+		}
+		console.error('')
 	}
-	console.error('')
+	console.error('Add the missing @param names to the doc so every JSDoc parameter is covered.')
+}
+
+// ---------------------------------------------------------------------------
+// Final exit
+// ---------------------------------------------------------------------------
+
+if (detailFailed > 0 || jsDetailFailed > 0) {
+	process.exit(1)
 }
-console.error('Add the missing props/slots to the component doc so every SFC interface item is covered.')
-process.exit(1)
+console.log('\n✓ All accuracy checks passed.')
+process.exit(0)

From 123d8988a7a071808d60900610a18635dd40c505 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Mon, 4 May 2026 11:03:12 +0200
Subject: [PATCH 10/12] Updated details

---
 scripts/check-docs.js | 42 +++++++++++++++++++++++++++++-------------
 1 file changed, 29 insertions(+), 13 deletions(-)

diff --git a/scripts/check-docs.js b/scripts/check-docs.js
index 296b0c9..27aaf86 100644
--- a/scripts/check-docs.js
+++ b/scripts/check-docs.js
@@ -604,29 +604,45 @@ if (detailFailed === 0) {
 
 console.log('\nChecking JS export doc accuracy (JSDoc @param names):\n')
 
-const jsDetailFailures = []
+// Accumulate results per category so we can print a Phase-1-style summary
+const jsDetailByCategory = new Map()
+for (const cat of JS_ACCURACY_CATEGORIES) {
+	jsDetailByCategory.set(cat, { checked: 0, failures: [] })
+}
 
 for (const { name, category, docPath } of jsExports) {
+	const bucket = jsDetailByCategory.get(category)
+	bucket.checked += 1
 	const srcPath = findSourceFile(name, category)
 	const issues = checkJsAccuracy(name, srcPath, docPath)
 	if (issues.length > 0) {
-		jsDetailFailures.push({ name, category, issues, docPath })
+		bucket.failures.push({ name, issues, docPath })
 	}
 }
 
-const jsDetailChecked = jsExports.length
-const jsDetailFailed = jsDetailFailures.length
+const JS_ORDER = ['Composables', 'Store factories', 'Store plugins', 'Utilities']
+let jsDetailFailed = 0
 
-if (jsDetailFailed === 0) {
-	console.log(`  ✓ All ${jsDetailChecked} JS export docs cover their @param names.`)
-} else {
-	console.log(`  ✓ ${jsDetailChecked - jsDetailFailed}/${jsDetailChecked} JS export docs cover their @param names.`)
+for (const cat of JS_ORDER) {
+	const { checked, failures } = jsDetailByCategory.get(cat)
+	const covered = checked - failures.length
+	const mark = failures.length === 0 ? '✓' : '✗'
+	console.log(`  ${mark} ${cat}: ${covered}/${checked}`)
+	jsDetailFailed += failures.length
+}
+
+if (jsDetailFailed > 0) {
 	console.error(`\n✗ ${jsDetailFailed} JS export doc(s) are missing @param coverage:\n`)
-	for (const { name, category, issues, docPath } of jsDetailFailures) {
-		const rel = path.relative(ROOT, docPath).replace(/\\/g, '/')
-		console.error(`${name} [${category}]  (${rel}):`)
-		for (const issue of issues) {
-			console.error(`  - ${issue}`)
+	for (const cat of JS_ORDER) {
+		const { failures } = jsDetailByCategory.get(cat)
+		if (failures.length === 0) continue
+		console.error(`${cat}:`)
+		for (const { name, issues, docPath } of failures) {
+			const rel = path.relative(ROOT, docPath).replace(/\\/g, '/')
+			console.error(`  ${name}  (${rel}):`)
+			for (const issue of issues) {
+				console.error(`    - ${issue}`)
+			}
 		}
 		console.error('')
 	}

From 7598e3b39047e951053d6863f800f4ca983ca434 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Mon, 4 May 2026 13:25:54 +0200
Subject: [PATCH 11/12] Added a better indicator if a property is edited or not
 filled in yet

---
 l10n/en.json                                  |   2 +
 l10n/nl.json                                  |   2 +
 .../CnAdvancedFormDialog/CnPropertiesTab.vue  | 253 ++++++++++--------
 src/css/index.css                             |   1 +
 src/css/main.css                              |   3 +
 5 files changed, 143 insertions(+), 118 deletions(-)
 create mode 100644 src/css/main.css

diff --git a/l10n/en.json b/l10n/en.json
index f08a22c..cb1ea1e 100644
--- a/l10n/en.json
+++ b/l10n/en.json
@@ -370,6 +370,7 @@
     "The 'admin' group always has full access (cannot be changed)": "The 'admin' group always has full access (cannot be changed)",
     "The following items will be permanently deleted. Remove any items you want to keep.": "The following items will be permanently deleted. Remove any items you want to keep.",
     "The object owner always has full access": "The object owner always has full access",
+    "This field has been changed — save to apply": "This field has been changed — save to apply",
     "Time": "Time",
     "Title": "Title",
     "Title *": "Title *",
@@ -402,6 +403,7 @@
     "Widget not available": "Widget not available",
     "Write a note...": "Write a note...",
     "Write back": "Write back",
+    "You have unsaved changes. Save to apply them.": "You have unsaved changes. Save to apply them.",
     "{name} (Copy)": "{name} (Copy)",
     "{name} - Copy": "{name} - Copy",
     "{title} saved successfully.": "{title} saved successfully.",
diff --git a/l10n/nl.json b/l10n/nl.json
index 96486af..aebef77 100644
--- a/l10n/nl.json
+++ b/l10n/nl.json
@@ -368,6 +368,7 @@
     "The 'admin' group always has full access (cannot be changed)": "De 'admin'-groep heeft altijd volledige toegang (kan niet worden gewijzigd)",
     "The following items will be permanently deleted. Remove any items you want to keep.": "De volgende items worden permanent verwijderd. Haal items die u wilt bewaren uit de selectie.",
     "The object owner always has full access": "De eigenaar van het object heeft altijd volledige toegang",
+    "This field has been changed — save to apply": "Dit veld is gewijzigd — sla op om toe te passen",
     "Time": "Tijd",
     "Title": "Titel",
     "Title *": "Titel *",
@@ -400,6 +401,7 @@
     "Widget not available": "Widget niet beschikbaar",
     "Write a note...": "Schrijf een notitie...",
     "Write back": "Terugschrijven",
+    "You have unsaved changes. Save to apply them.": "U heeft niet-opgeslagen wijzigingen. Sla op om ze toe te passen.",
     "{name} (Copy)": "{name} (Kopie)",
     "{name} - Copy": "{name} - Kopie",
     "{title} saved successfully.": "{title} succesvol opgeslagen.",
diff --git a/src/components/CnAdvancedFormDialog/CnPropertiesTab.vue b/src/components/CnAdvancedFormDialog/CnPropertiesTab.vue
index 2e85889..ec044e3 100644
--- a/src/components/CnAdvancedFormDialog/CnPropertiesTab.vue
+++ b/src/components/CnAdvancedFormDialog/CnPropertiesTab.vue
@@ -1,125 +1,135 @@
 <template>
-	<div class="cn-advanced-form-dialog__table-container">
-		<table class="cn-advanced-form-dialog__table">
-			<thead>
-				<tr class="cn-advanced-form-dialog__table-row">
-					<th class="cn-advanced-form-dialog__table-col-constrained">
-						{{ t('nextcloud-vue', 'Property') }}
-					</th>
-					<th class="cn-advanced-form-dialog__table-col-expanded">
-						{{ t('nextcloud-vue', 'Value') }}
-					</th>
-					<th
-						v-if="hasRowActionsSlot"
-						class="cn-advanced-form-dialog__table-col-actions">
-						<slot name="row-actions-header" />
-					</th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr
-					v-for="([key, value]) in objectProperties"
-					:key="key"
-					class="cn-advanced-form-dialog__table-row"
-					:class="{
-						'cn-advanced-form-dialog__table-row--selected': selectedProperty === key,
-						'cn-advanced-form-dialog__table-row--edited': isValueChanged(key),
-						'cn-advanced-form-dialog__table-row--non-editable': !isPropertyEditable(key, resolvedValue(key, value)),
-						[getPropertyValidationClass(key, value)]: validationDisplay === 'indicator',
-					}"
-					@click="handleRowClick(key, $event)">
-					<td class="cn-advanced-form-dialog__table-col-constrained cn-advanced-form-dialog__prop-cell"
-						:style="getPropCellStyle(key, value)">
-						<div class="cn-advanced-form-dialog__prop-cell-content">
-							<AlertCircle
-								v-if="validationDisplay === 'indicator' && getPropertyValidationState(key, resolvedValue(key, value)) === 'invalid'"
-								class="cn-advanced-form-dialog__validation-icon cn-advanced-form-dialog__validation-icon--error"
-								:size="16"
-								:title="getPropertyErrorMessage(key, resolvedValue(key, value))" />
-							<Alert
-								v-else-if="validationDisplay === 'indicator' && isValueChanged(key) && getPropertyValidationState(key, resolvedValue(key, value)) !== 'invalid'"
-								class="cn-advanced-form-dialog__validation-icon cn-advanced-form-dialog__validation-icon--edited"
-								:size="16"
-								:title="t('nextcloud-vue', 'This field has been changed')" />
-							<Alert
-								v-else-if="validationDisplay === 'indicator' && getPropertyValidationState(key, resolvedValue(key, value)) === 'warning'"
-								class="cn-advanced-form-dialog__validation-icon cn-advanced-form-dialog__validation-icon--warning"
-								:size="16"
-								:title="getPropertyWarningMessage(key, resolvedValue(key, value))" />
-							<Plus
-								v-else-if="validationDisplay === 'indicator' && getPropertyValidationState(key, resolvedValue(key, value)) === 'new'"
-								class="cn-advanced-form-dialog__validation-icon cn-advanced-form-dialog__validation-icon--new"
-								:size="16"
-								:title="getPropertyNewMessage(key)" />
-							<LockOutline
-								v-else-if="!isPropertyEditable(key, resolvedValue(key, value))"
-								class="cn-advanced-form-dialog__validation-icon cn-advanced-form-dialog__validation-icon--lock"
-								:size="16"
-								:title="getEditabilityWarning(key, resolvedValue(key, value)) || ''" />
-							<span :title="getPropertyTooltip(key)">{{ getPropertyDisplayName(key) }}</span>
-							<span
-								v-if="isRequired(key)"
-								class="cn-advanced-form-dialog__required-indicator"
-								:title="t('nextcloud-vue', 'Required')"
-								aria-label="required">*</span>
-							<span
-								v-if="isImmutableHint(key)"
-								class="cn-advanced-form-dialog__immutable-badge"
-								:title="t('nextcloud-vue', 'This value can be set on creation but cannot be changed afterwards.')">
-								{{ t('nextcloud-vue', 'Set once') }}
-							</span>
-						</div>
-					</td>
-					<td class="cn-advanced-form-dialog__table-col-expanded cn-advanced-form-dialog__value-cell">
-						<slot
-							name="value-cell"
-							:property-key="key"
-							:value="value"
-							:resolved-value="resolvedValue(key, value)"
-							:is-editing="selectedProperty === key"
-							:is-editable="isPropertyEditable(key, resolvedValue(key, value))"
-							:display-name="getPropertyDisplayName(key)"
-							:schema-prop="schema && schema.properties && schema.properties[key]"
-							:editability-warning="getPropertyEditabilityWarning(key, resolvedValue(key, value))"
-							:on-update="(v) => onPropertyValueUpdate(key, v)">
-							<CnPropertyValueCell
-								:ref="'cell-' + key"
+	<div>
+		<NcNoteCard
+			v-if="hasUnsavedChanges"
+			type="warning"
+			class="cn-advanced-form-dialog__unsaved-note">
+			{{ t('nextcloud-vue', 'You have unsaved changes. Save to apply them.') }}
+		</NcNoteCard>
+		<div class="cn-advanced-form-dialog__table-container">
+			<table class="cn-advanced-form-dialog__table">
+				<thead>
+					<tr class="cn-advanced-form-dialog__table-row">
+						<th class="cn-advanced-form-dialog__table-col-constrained">
+							{{ t('nextcloud-vue', 'Property') }}
+						</th>
+						<th class="cn-advanced-form-dialog__table-col-expanded">
+							{{ t('nextcloud-vue', 'Value') }}
+						</th>
+						<th
+							v-if="hasRowActionsSlot"
+							class="cn-advanced-form-dialog__table-col-actions">
+							<slot name="row-actions-header" />
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr
+						v-for="([key, value]) in objectProperties"
+						:key="key"
+						class="cn-advanced-form-dialog__table-row"
+						:class="{
+							'cn-advanced-form-dialog__table-row--selected': selectedProperty === key,
+							'cn-advanced-form-dialog__table-row--edited': isValueChanged(key),
+							'cn-advanced-form-dialog__table-row--non-editable': !isPropertyEditable(key, resolvedValue(key, value)),
+							[getPropertyValidationClass(key, value)]: validationDisplay === 'indicator',
+						}"
+						@click="handleRowClick(key, $event)">
+						<td class="cn-advanced-form-dialog__table-col-constrained cn-advanced-form-dialog__prop-cell"
+							:style="getPropCellStyle(key, value)">
+							<div class="cn-advanced-form-dialog__prop-cell-content">
+								<AlertCircle
+									v-if="validationDisplay === 'indicator' && getPropertyValidationState(key, resolvedValue(key, value)) === 'invalid'"
+									class="cn-advanced-form-dialog__validation-icon cn-advanced-form-dialog__validation-icon--error"
+									:size="16"
+									:title="getPropertyErrorMessage(key, resolvedValue(key, value))" />
+								<PencilOutline
+									v-else-if="validationDisplay === 'indicator' && isValueChanged(key) && getPropertyValidationState(key, resolvedValue(key, value)) !== 'invalid'"
+									v-tooltip="t('nextcloud-vue', 'This field has been changed — save to apply')"
+									class="cn-advanced-form-dialog__validation-icon cn-advanced-form-dialog__validation-icon--edited"
+									:size="16" />
+								<Alert
+									v-else-if="validationDisplay === 'indicator' && getPropertyValidationState(key, resolvedValue(key, value)) === 'warning'"
+									class="cn-advanced-form-dialog__validation-icon cn-advanced-form-dialog__validation-icon--warning"
+									:size="16"
+									:title="getPropertyWarningMessage(key, resolvedValue(key, value))" />
+								<Plus
+									v-else-if="validationDisplay === 'indicator' && getPropertyValidationState(key, resolvedValue(key, value)) === 'new'"
+									class="cn-advanced-form-dialog__validation-icon cn-advanced-form-dialog__validation-icon--new"
+									:size="16"
+									:title="getPropertyNewMessage(key)" />
+								<LockOutline
+									v-else-if="!isPropertyEditable(key, resolvedValue(key, value))"
+									class="cn-advanced-form-dialog__validation-icon cn-advanced-form-dialog__validation-icon--lock"
+									:size="16"
+									:title="getEditabilityWarning(key, resolvedValue(key, value)) || ''" />
+								<span :title="getPropertyTooltip(key)">{{ getPropertyDisplayName(key) }}</span>
+								<span
+									v-if="isRequired(key)"
+									class="cn-advanced-form-dialog__required-indicator"
+									:title="t('nextcloud-vue', 'Required')"
+									aria-label="required">*</span>
+								<span
+									v-if="isImmutableHint(key)"
+									class="cn-advanced-form-dialog__immutable-badge"
+									:title="t('nextcloud-vue', 'This value can be set on creation but cannot be changed afterwards.')">
+									{{ t('nextcloud-vue', 'Set once') }}
+								</span>
+							</div>
+						</td>
+						<td class="cn-advanced-form-dialog__table-col-expanded cn-advanced-form-dialog__value-cell">
+							<slot
+								name="value-cell"
 								:property-key="key"
-								:schema="schema"
-								:value="resolvedValue(key, value)"
-								:is-editable="isPropertyEditable(key, resolvedValue(key, value))"
+								:value="value"
+								:resolved-value="resolvedValue(key, value)"
 								:is-editing="selectedProperty === key"
+								:is-editable="isPropertyEditable(key, resolvedValue(key, value))"
 								:display-name="getPropertyDisplayName(key)"
+								:schema-prop="schema && schema.properties && schema.properties[key]"
 								:editability-warning="getPropertyEditabilityWarning(key, resolvedValue(key, value))"
-								:widget="(propertyOverrides[key] && propertyOverrides[key].widget) || null"
-								:select-options="(propertyOverrides[key] && propertyOverrides[key].selectOptions) || null"
-								:select-multiple="propertyOverrides[key] ? propertyOverrides[key].selectMultiple !== false : true"
-								:textarea-rows="(propertyOverrides[key] && propertyOverrides[key].textareaRows) || 4"
-								@update:value="onPropertyValueUpdate(key, $event)" />
-						</slot>
-					</td>
-					<td
-						v-if="hasRowActionsSlot"
-						class="cn-advanced-form-dialog__table-col-actions"
-						@click.stop>
-						<slot
-							name="row-actions"
-							:property-key="key"
-							:value="value"
-							:resolved-value="resolvedValue(key, value)"
-							:is-editable="isPropertyEditable(key, resolvedValue(key, value))"
-							:is-schema-property="!!(schema && schema.properties && Object.prototype.hasOwnProperty.call(schema.properties, key))" />
-					</td>
-				</tr>
-			</tbody>
-		</table>
+								:on-update="(v) => onPropertyValueUpdate(key, v)">
+								<CnPropertyValueCell
+									:ref="'cell-' + key"
+									:property-key="key"
+									:schema="schema"
+									:value="resolvedValue(key, value)"
+									:is-editable="isPropertyEditable(key, resolvedValue(key, value))"
+									:is-editing="selectedProperty === key"
+									:display-name="getPropertyDisplayName(key)"
+									:editability-warning="getPropertyEditabilityWarning(key, resolvedValue(key, value))"
+									:widget="(propertyOverrides[key] && propertyOverrides[key].widget) || null"
+									:select-options="(propertyOverrides[key] && propertyOverrides[key].selectOptions) || null"
+									:select-multiple="propertyOverrides[key] ? propertyOverrides[key].selectMultiple !== false : true"
+									:textarea-rows="(propertyOverrides[key] && propertyOverrides[key].textareaRows) || 4"
+									@update:value="onPropertyValueUpdate(key, $event)" />
+							</slot>
+						</td>
+						<td
+							v-if="hasRowActionsSlot"
+							class="cn-advanced-form-dialog__table-col-actions"
+							@click.stop>
+							<slot
+								name="row-actions"
+								:property-key="key"
+								:value="value"
+								:resolved-value="resolvedValue(key, value)"
+								:is-editable="isPropertyEditable(key, resolvedValue(key, value))"
+								:is-schema-property="!!(schema && schema.properties && Object.prototype.hasOwnProperty.call(schema.properties, key))" />
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
 	</div>
 </template>
 
 <script>
 import { translate as t } from '@nextcloud/l10n'
+import { NcNoteCard } from '@nextcloud/vue'
 import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'
 import Alert from 'vue-material-design-icons/Alert.vue'
+import PencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 import LockOutline from 'vue-material-design-icons/LockOutline.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import CnPropertyValueCell from './CnPropertyValueCell.vue'
@@ -128,8 +138,10 @@ export default {
 	name: 'CnPropertiesTab',
 
 	components: {
+		NcNoteCard,
 		AlertCircle,
 		Alert,
+		PencilOutline,
 		LockOutline,
 		Plus,
 		CnPropertyValueCell,
@@ -166,9 +178,14 @@ export default {
 		 * Any other CSS color string is applied directly.
 		 */
 		propCellColor: { type: String, default: null },
+		isNew: { type: Boolean, default: false },
 	},
 
 	computed: {
+		hasUnsavedChanges() {
+			if (this.isNew) return false
+			return Object.keys(this.formData).some(key => this.isValueChanged(key))
+		},
 		propCellStyle() {
 			if (this.propCellColor === null) return undefined
 			if (this.propCellColor === 'none') return { boxShadow: 'none' }
@@ -255,7 +272,7 @@ export default {
 				return { boxShadow: 'inset 3px 0 0 0 var(--color-error)' }
 			}
 			if (this.isValueChanged(key)) {
-				return { boxShadow: 'inset 3px 0 0 0 var(--color-warning)' }
+				return { boxShadow: 'inset 3px 0 0 0 var(--color-primary-element)' }
 			}
 			if (state === 'valid') {
 				return { boxShadow: 'inset 3px 0 0 0 var(--color-success)' }
@@ -264,7 +281,7 @@ export default {
 				return { boxShadow: 'inset 3px 0 0 0 var(--color-warning)' }
 			}
 			if (state === 'new') {
-				return { boxShadow: 'inset 3px 0 0 0 var(--color-primary-element)' }
+				return { boxShadow: 'inset 3px 0 0 0 var(--color-new)' }
 			}
 			return this.propCellStyle
 		},
@@ -590,10 +607,6 @@ export default {
 	box-shadow: inset 3px 0 0 0 var(--color-primary);
 }
 
-.cn-advanced-form-dialog__table-row--edited {
-	background-color: var(--color-warning-light);
-}
-
 .cn-advanced-form-dialog__table-row--non-editable {
 	background-color: var(--color-background-dark);
 	cursor: not-allowed;
@@ -661,7 +674,7 @@ export default {
 }
 
 .cn-advanced-form-dialog__validation-icon--edited {
-	color: var(--color-warning);
+	color: var(--color-primary-element);
 }
 
 .cn-advanced-form-dialog__validation-icon--warning {
@@ -673,7 +686,7 @@ export default {
 }
 
 .cn-advanced-form-dialog__validation-icon--new {
-	color: var(--color-primary-element);
+	color: var(--color-new);
 }
 
 .cn-advanced-form-dialog__required-indicator {
@@ -695,4 +708,8 @@ export default {
 	cursor: help;
 	white-space: nowrap;
 }
+
+.cn-advanced-form-dialog__unsaved-note {
+	margin-bottom: calc(3 * var(--default-grid-baseline));
+}
 </style>
diff --git a/src/css/index.css b/src/css/index.css
index b1f5446..7631867 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -1,4 +1,5 @@
 /* @conduction/nextcloud-vue — Main CSS entry point */
+@import './main.css';
 @import './table.css';
 @import './card.css';
 @import './pagination.css';
diff --git a/src/css/main.css b/src/css/main.css
new file mode 100644
index 0000000..e363e22
--- /dev/null
+++ b/src/css/main.css
@@ -0,0 +1,3 @@
+:root {
+  --color-new: var(--color-text-maxcontrast-default);
+}

From b7f542b0f247c5ed48c899e83330ee258ff09440 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Mon, 4 May 2026 17:13:04 +0200
Subject: [PATCH 12/12] Updated package and docs

---
 docs/components/cn-advanced-form-dialog.md |  8 ++---
 docs/components/cn-filter-bar.md           | 41 ++++++++++------------
 docs/components/cn-pagination.md           |  2 +-
 package-lock.json                          |  4 +--
 package.json                               |  2 +-
 5 files changed, 27 insertions(+), 30 deletions(-)

diff --git a/docs/components/cn-advanced-form-dialog.md b/docs/components/cn-advanced-form-dialog.md
index 349d3e3..38c830e 100644
--- a/docs/components/cn-advanced-form-dialog.md
+++ b/docs/components/cn-advanced-form-dialog.md
@@ -66,11 +66,11 @@ The dialog uses the same **two-phase pattern** as other CRUD dialogs: after the
 
 | Slot | Scope | Description |
 |------|-------|-------------|
-| `#form` | formData, updateField, objectProperties, jsonData, updateJsonFromExternal, isValidJson | Replace the entire form content (all tabs). Use for fully custom UI while still using the dialog chrome and confirm/close flow. |
+| `#form` | formData, updateField, objectProperties, jsonData, updateJson, isValidJson | Replace the entire form content (all tabs). Use for fully custom UI while still using the dialog chrome and confirm/close flow. |
 | `#register-schema-selection` | proceed | Optional step before the main tabs (e.g. choose register/schema). When this slot is provided, the main tabs are not shown until the consumer calls `proceed()`. |
 | `#tab-properties` | formData, updateField, objectProperties, selectedProperty, handleRowClick, getPropertyDisplayName, getPropertyValidationClass, isPropertyEditable, validationDisplay | Override the Properties tab content. Default is the built-in properties table. |
 | `#tab-metadata` | item, formData | Override the Metadata tab content. Default is a table with ID, Created, Updated. |
-| `#tab-data` | jsonData, updateJsonFromExternal, isValid, formatJSON | Override the Data (JSON) tab content. Default is CodeMirror + "Format JSON" button. |
+| `#tab-data` | jsonData, updateJson, isValid, formatJSON | Override the Data (JSON) tab content. Default is CodeMirror + "Format JSON" button. |
 | `#actions-left` | — | Content to the left of the Cancel/Close button in the dialog footer |
 | `#actions-right` | — | Content to the right of the primary Confirm button in the dialog footer |
 
@@ -188,9 +188,9 @@ async onConfirm(payload) {
 
 ```vue
 <CnAdvancedFormDialog :schema="schema" :item="item" @confirm="onConfirm" @close="close">
-  <template #form="{ formData, updateField, jsonData, updateJsonFromExternal, isValidJson }">
+  <template #form="{ formData, updateField, jsonData, updateJson, isValidJson }">
     <MyCustomForm :data="formData" @update="updateField" />
-    <MyJsonEditor :value="jsonData" :valid="isValidJson" @input="updateJsonFromExternal" />
+    <MyJsonEditor :value="jsonData" :valid="isValidJson" @input="updateJson" />
   </template>
 </CnAdvancedFormDialog>
 ```
diff --git a/docs/components/cn-filter-bar.md b/docs/components/cn-filter-bar.md
index 5ecbcc7..f006caa 100644
--- a/docs/components/cn-filter-bar.md
+++ b/docs/components/cn-filter-bar.md
@@ -4,42 +4,39 @@ sidebar_position: 12
 
 # CnFilterBar
 
-The top action bar of a list page. Shows the current result count, view-mode toggle, primary add button, and the bulk Actions menu.
+Search and filter controls row for list views. Renders a text search input, zero or more typed filter controls (select, text, checkbox), and an optional "Clear filters" button.
 
-**Wraps**: NcButton, NcActions, NcActionButton
-
-![CnFilterBar showing Cards/Table toggle, Add button, and Actions menu](/img/screenshots/cn-filter-bar.png)
+**Wraps**: NcTextField, NcSelect, NcButton, NcCheckboxRadioSwitch
 
 ## Anatomy
 
 ```
-+--------------------------------------------------------------------------+
-|  Showing N of N  |  [Cards] [Table]  |  [+ Add Entity]  [··· Actions ▾]  |  [⊞]
-+--------------------------------------------------------------------------+
-        ↑                   ↑                   ↑              ↑              ↑
-   result count        view toggle          primary CTA    bulk actions    sidebar toggle
++------------------------------------------------------------+
+|  [🔍 Search...]  |  [All types ▾]  |  [✓ Active only]  |  [Clear filters]
++------------------------------------------------------------+
+        ↑                   ↑                  ↑                     ↑
+   search input         select filter     checkbox filter        clear all
 ```
 
 | Region | Description |
 |--------|-------------|
-| **Result count** | "Showing N of N" — total visible vs total matched |
-| **View toggle** | Cards / Table radio buttons to switch between `CnCardGrid` and `CnDataTable` |
-| **Add button** | Primary call-to-action — opens CnFormDialog or navigates to create route |
-| **Actions menu** | Bulk-action dropdown — import, export, mass copy, mass delete |
-| **Sidebar toggle** | Icon button that opens/closes the `CnIndexSidebar` |
+| **Search input** | Free-text search; emits `search` on every keystroke. Shows a clear (×) button while text is entered |
+| **Filter controls** | One control per entry in `:filters`. Type `select` renders NcSelect, `text` renders NcTextField, `checkbox` renders NcCheckboxRadioSwitch |
+| **Clear filters** | Appears when any filter or the search term is non-empty (when `showClearAll` is `true`); emits `clear-all` |
 
 ## Usage
 
 ```vue
 <CnFilterBar
-  :result-count="objects.length"
-  :total-count="pagination.totalItems"
-  :view-mode="viewMode"
-  :add-label="t('myapp', 'Add Client')"
-  :actions="bulkActions"
-  @view-change="viewMode = $event"
-  @add="onCreate"
-  @action="onBulkAction" />
+  :search-value="searchTerm"
+  search-placeholder="Search clients..."
+  :filters="[
+    { key: 'type', label: 'All types', type: 'select', options: typeOptions, value: selectedType },
+    { key: 'active', label: 'Active only', type: 'checkbox', value: showActiveOnly },
+  ]"
+  @search="onSearch"
+  @filter-change="onFilterChange"
+  @clear-all="clearFilters" />
 ```
 
 ### Props
diff --git a/docs/components/cn-pagination.md b/docs/components/cn-pagination.md
index d5c3304..aa2176e 100644
--- a/docs/components/cn-pagination.md
+++ b/docs/components/cn-pagination.md
@@ -49,7 +49,7 @@ Full pagination bar with page navigation, ellipsis for large page counts, and a
 | `totalPages` | Number | `1` | Total number of pages |
 | `totalItems` | Number | `0` | Total number of items across all pages — used for the page info label |
 | `currentPageSize` | Number | `20` | Currently selected number of items per page |
-| `pageSizeOptions` | Array | `[10, 20, 50, 100, 250, 500, 1000]` | Options shown in the "Items per page" dropdown |
+| `pageSizeOptions` | Array | `[{ value: 10, label: '10' }, { value: 20, label: '20' }, …]` | Options shown in the "Items per page" dropdown. Each entry must be `{ value: number, label: string }` |
 | `minItemsToShow` | Number | `10` | Minimum item count before the pagination bar is rendered; hides it when all items fit on one page |
 | `firstLabel` | String | `'First'` | Accessible label for the First button |
 | `previousLabel` | String | `'Previous'` | Accessible label for the Previous button |
diff --git a/package-lock.json b/package-lock.json
index f23a38b..b0d736a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "@conduction/nextcloud-vue",
-	"version": "0.1.0-beta.17",
+	"version": "0.1.0-beta.18",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "@conduction/nextcloud-vue",
-			"version": "0.1.0-beta.17",
+			"version": "0.1.0-beta.18",
 			"license": "EUPL-1.2",
 			"dependencies": {
 				"@codemirror/lang-html": "^6.4.11",
diff --git a/package.json b/package.json
index e849c14..a571012 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@conduction/nextcloud-vue",
-	"version": "0.1.0-beta.17",
+	"version": "0.1.0-beta.18",
 	"description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
 	"license": "EUPL-1.2",
 	"author": "Conduction B.V. <info@conduction.nl>",