diff --git a/.claude/settings.json b/.claude/settings.json
new file mode 100644
index 000000000..10842a650
--- /dev/null
+++ b/.claude/settings.json
@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": ["Bash(yarn test:*)", "Bash(find:*)"],
+    "deny": [],
+    "ask": []
+  }
+}
diff --git a/.claude/settings.local.json b/.claude/settings.local.json
deleted file mode 100644
index f71f74de1..000000000
--- a/.claude/settings.local.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "permissions": {
-    "allow": ["Bash(fi:*)", "Bash(done)", "Bash(yarn test:unit:*)"],
-    "deny": [],
-    "ask": []
-  }
-}
diff --git a/.gitignore b/.gitignore
index 35ae3bd9e..5b7d54f1c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,9 @@
 !.env.example
 node_modules
 
+# Claude Code local settings
+.claude/*.local.json
+
 # Yarn 4 without Zero-installs
 .pnp.*
 .yarn/*
diff --git a/docs/code-review-checklist.md b/docs/code-review-checklist.md
index 2f42e3963..08d9cc59d 100644
--- a/docs/code-review-checklist.md
+++ b/docs/code-review-checklist.md
@@ -10,7 +10,7 @@ When performing code review, double check all of the items below:
 - [ ] All new components, functions and other entities are documented
 - [ ] The repo documentation markdown files are updated if the changes touch upon those.
 - [ ] If the change adds functions available to the user, tracking events are enabled with new ones defined if needed.
-- [ ] Any new Svelte components that have been created, follow the [Svelte component guidelines](contributing.md#svelte-components).
+- [ ] Any new Svelte components that have been created follow the [Svelte component guidelines](contributing.md#svelte-components).
 - [ ] Errors are handled properly and logged in the code.
 - [ ] Troubleshoot any failing checks in the PR.
 - [ ] Check that parts of the application that share dependencies with the PR but are not included in it are not unduly affected.
diff --git a/docs/contributing.md b/docs/contributing.md
index 8b11f6531..03ac6d607 100644
--- a/docs/contributing.md
+++ b/docs/contributing.md
@@ -379,7 +379,14 @@ let className: $$Props['class'] = $$props['class'];
 
 Follow Svelte's [guidelines for component documentation](https://svelte.dev/docs/faq#how-do-i-document-my-components). For an example, see [`IconBase`](/frontend/src/lib/components/icon/base/IconBase.svelte) component and its associated [type definition](/frontend/src/lib/components/icon/base/IconBase.type.ts).
 
-Place the Svelte docstring at the top of the file, before the `<script>` block.
+Place the Svelte docstring at the top of the file, before the `<script>` block. The documentation must consist of:
+
+- general description
+- 'Properties' (see below)
+- 'Slots' detailing all slots and their uses (if applicable)
+- 'Usage' showing a concise code block of the component’s use
+
+The type file defining the properties is the prime source of truth for the properties’ descriptions. Make sure the "Properties" section of the component doc string matches that.
 
 Add documentation for pages, layouts and other non-reusable components, detailing their main purpose. Include in their documentation under separate subheadings:
 
diff --git a/frontend/src/lib/admin/components/jobs/FeatureJobs.svelte b/frontend/src/lib/admin/components/jobs/FeatureJobs.svelte
index 7eefffa4a..9a6395432 100644
--- a/frontend/src/lib/admin/components/jobs/FeatureJobs.svelte
+++ b/frontend/src/lib/admin/components/jobs/FeatureJobs.svelte
@@ -1,3 +1,20 @@
+<!--
+@component
+Displays jobs for a specific admin feature, showing active and past job details.
+
+### Properties
+
+- `feature`: The admin feature to display jobs for.
+- `showFeatureLink`: Whether to show the "Go to Feature" link. Default: `true`
+- Any valid attributes of a `<section>` element
+
+### Usage
+
+```tsx
+<FeatureJobs feature={ADMIN_FEATURE.FactorAnalysis} />
+```
+-->
+
 <script lang="ts">
   import { ADMIN_FEATURE } from '$lib/admin/features';
   import { Button } from '$lib/components/button';
diff --git a/frontend/src/lib/admin/components/jobs/JobDetails.svelte b/frontend/src/lib/admin/components/jobs/JobDetails.svelte
index 30af6caed..8fd489828 100644
--- a/frontend/src/lib/admin/components/jobs/JobDetails.svelte
+++ b/frontend/src/lib/admin/components/jobs/JobDetails.svelte
@@ -1,3 +1,19 @@
+<!--
+@component
+Displays detailed information about a job, including its status, progress, and messages.
+
+### Properties
+
+- `job`: The job information to display.
+- Any valid attributes of an `<article>` element
+
+### Usage
+
+```tsx
+<JobDetails job={jobInfo} />
+```
+-->
+
 <script lang="ts">
   import { Button } from '$lib/components/button';
   import ButtonWithConfirmation from '$lib/components/buttonWithConfirmation/ButtonWithConfirmation.svelte';
diff --git a/frontend/src/lib/admin/components/jobs/WithPolling.svelte b/frontend/src/lib/admin/components/jobs/WithPolling.svelte
index 7a2578846..18fc4ab1b 100644
--- a/frontend/src/lib/admin/components/jobs/WithPolling.svelte
+++ b/frontend/src/lib/admin/components/jobs/WithPolling.svelte
@@ -1,8 +1,16 @@
-<!-- @component
-
+<!--
+@component
 A temporary utility component within which jobs are being polled.
 
 TODO[Svelte 5]: Count subscriptions to stores (or $states) and automatically start and stop polling.
+
+### Usage
+
+```tsx
+<WithPolling>
+  <FeatureJobs feature={ADMIN_FEATURE.FactorAnalysis} />
+</WithPolling>
+```
 -->
 
 <script lang="ts">
diff --git a/frontend/src/lib/admin/components/languageFeatures/LanguageSelector.svelte b/frontend/src/lib/admin/components/languageFeatures/LanguageSelector.svelte
index b1d89b0c3..1b7ae1e44 100644
--- a/frontend/src/lib/admin/components/languageFeatures/LanguageSelector.svelte
+++ b/frontend/src/lib/admin/components/languageFeatures/LanguageSelector.svelte
@@ -1,9 +1,20 @@
-<!--@component
-# Language Selector
+<!--
+@component
+Reusable component for selecting target language for language-based features (question info, argument condensation, etc.). Automatically selected if only one language is available.
 
-Reusable component for selecting target language for language-based features (question info, argument condensation, etc.).
-Automatically selected if only one language is available.
+### Properties
 
+- `selected`: The selected language value.
+- `name`: The name of the form element. Default: `'language'`
+- `id`: The id of the select element.
+- `options`: The available language options.
+- Any valid attributes of a `Select` component
+
+### Usage
+
+```tsx
+<LanguageSelector bind:selected={targetLanguage} />
+```
 -->
 
 <script lang="ts">
diff --git a/frontend/src/lib/candidate/components/logoutButton/LogoutButton.svelte b/frontend/src/lib/candidate/components/logoutButton/LogoutButton.svelte
index 9ec9c99db..cbd1568c9 100644
--- a/frontend/src/lib/candidate/components/logoutButton/LogoutButton.svelte
+++ b/frontend/src/lib/candidate/components/logoutButton/LogoutButton.svelte
@@ -8,15 +8,16 @@ Accesses `CandidateContext`.
 
 ### Properties
 
-- `logoutModalTimer`:Time in seconds that the logout modal created by the button waits before automatically logging the user out. Defaults to 30
-- `stayOnPage`: boolean deciding if pressing the button takes the user to the login page or not. Defaults to true
-- Any valid properties of a `<Button>` component.
+- `logoutModalTimer`: The duration in seconds a logout modal will wait before automatically logging the user out. Default: `30`
+- `stayOnPage`: Whether pressing the button takes the user to the login page or not. Default: `false`
+- Any valid properties of a `Button` component
 
 ### Settings
 
 - `entities.hideIfMissingAnswers.candidate`: Affects message shown.
 
 ### Usage
+
 ```tsx
 <LogoutButton />
 ```
@@ -30,10 +31,10 @@ Accesses `CandidateContext`.
   import { logDebugError } from '$lib/utils/logger';
   import type { LogoutButtonProps } from './LogoutButton.type';
 
-  type $$props = LogoutButtonProps;
+  type $$Props = LogoutButtonProps;
 
-  export let stayOnPage: $$props['stayOnPage'] = false;
-  export let logoutModalTimer: $$props['logoutModalTimer'] = 30;
+  export let stayOnPage: $$Props['stayOnPage'] = false;
+  export let logoutModalTimer: $$Props['logoutModalTimer'] = 30;
 
   ////////////////////////////////////////////////////////////////////
   // Get contexts
diff --git a/frontend/src/lib/candidate/components/logoutButton/LogoutButton.type.ts b/frontend/src/lib/candidate/components/logoutButton/LogoutButton.type.ts
index 8a638924b..7b4c2bc97 100644
--- a/frontend/src/lib/candidate/components/logoutButton/LogoutButton.type.ts
+++ b/frontend/src/lib/candidate/components/logoutButton/LogoutButton.type.ts
@@ -6,7 +6,7 @@ export type LogoutButtonProps = Partial<ButtonProps> & {
    */
   logoutModalTimer?: number;
   /**
-   * Whether pressing the button takes the user to the login page or not. @default true
+   * Whether pressing the button takes the user to the login page or not. @default false
    */
   stayOnPage?: boolean;
 };
diff --git a/frontend/src/lib/candidate/components/logoutButton/index.ts b/frontend/src/lib/candidate/components/logoutButton/index.ts
index c47c77e54..ecef0f03c 100644
--- a/frontend/src/lib/candidate/components/logoutButton/index.ts
+++ b/frontend/src/lib/candidate/components/logoutButton/index.ts
@@ -1 +1,2 @@
 export { default as LogoutButton } from './LogoutButton.svelte';
+export * from './LogoutButton.type';
diff --git a/frontend/src/lib/candidate/components/passwordField/PasswordField.svelte b/frontend/src/lib/candidate/components/passwordField/PasswordField.svelte
index e20eb8a34..f21cbc1f9 100644
--- a/frontend/src/lib/candidate/components/passwordField/PasswordField.svelte
+++ b/frontend/src/lib/candidate/components/passwordField/PasswordField.svelte
@@ -3,14 +3,17 @@
 PasswordField is an input box for password that comes with a button to reveal and hide the password
 
 ### Properties
-- `id` : optional id for the input
-- `password` : value of the password, bindable
-- `autoComplete` : autocomplete value for password input
-- `label`: the label for the password field. Defaults to `$t('common.password')`
-- `externalLabel` : whether the label is outside the component and should not be rendered inside
-- `focus`: bindable function to set focus to the password input
+
+- `id`: Optional id for the input.
+- `password`: Bindable: The password value.
+- `autocomplete`: The autocomplete value for password input. Default: `''`
+- `label`: The label for the password field.
+- `externalLabel`: Whether the label is outside the component and should not be rendered inside. Default: `false`
+- `focus`: Bindable: Function to set focus to the password input.
+- Any valid attributes of a `<div>` element
 
 ### Usage
+
 ```tsx
 <PasswordField bind:password={passwordOfContext} autocomplete="current-password" />
 ```
@@ -20,12 +23,15 @@ PasswordField is an input box for password that comes with a button to reveal an
   import { Button } from '$lib/components/button';
   import { getComponentContext } from '$lib/contexts/component';
   import { getUUID } from '$lib/utils/components';
+  import type { PasswordFieldProps } from './PasswordField.type';
+
+  type $$Props = PasswordFieldProps;
 
-  export let id: string | undefined = undefined;
-  export let password = '';
-  export let autocomplete = '';
-  export let label: string | undefined = undefined;
-  export let externalLabel = false;
+  export let id: $$Props['id'] = undefined;
+  export let password: $$Props['password'] = '';
+  export let autocomplete: $$Props['autocomplete'] = '';
+  export let label: $$Props['label'] = undefined;
+  export let externalLabel: $$Props['externalLabel'] = false;
   export function focus(): void {
     input?.focus();
   }
diff --git a/frontend/src/lib/candidate/components/passwordField/PasswordField.type.ts b/frontend/src/lib/candidate/components/passwordField/PasswordField.type.ts
new file mode 100644
index 000000000..7071ffa14
--- /dev/null
+++ b/frontend/src/lib/candidate/components/passwordField/PasswordField.type.ts
@@ -0,0 +1,28 @@
+import type { SvelteHTMLElements } from 'svelte/elements';
+
+export type PasswordFieldProps = SvelteHTMLElements['div'] & {
+  /**
+   * Optional id for the input.
+   */
+  id?: string;
+  /**
+   * Bindable: The password value.
+   */
+  password?: string;
+  /**
+   * The autocomplete value for password input. @default ''
+   */
+  autocomplete?: string;
+  /**
+   * The label for the password field.
+   */
+  label?: string;
+  /**
+   * Whether the label is outside the component and should not be rendered inside. @default false
+   */
+  externalLabel?: boolean;
+  /**
+   * Bindable: Function to set focus to the password input.
+   */
+  focus?: () => void;
+};
diff --git a/frontend/src/lib/candidate/components/passwordField/index.ts b/frontend/src/lib/candidate/components/passwordField/index.ts
index 07eaa96b6..a30ae8679 100644
--- a/frontend/src/lib/candidate/components/passwordField/index.ts
+++ b/frontend/src/lib/candidate/components/passwordField/index.ts
@@ -1 +1,2 @@
 export { default as PasswordField } from './PasswordField.svelte';
+export * from './PasswordField.type';
diff --git a/frontend/src/lib/candidate/components/passwordSetter/PasswordSetter.svelte b/frontend/src/lib/candidate/components/passwordSetter/PasswordSetter.svelte
index f2fd80752..415b6f57d 100644
--- a/frontend/src/lib/candidate/components/passwordSetter/PasswordSetter.svelte
+++ b/frontend/src/lib/candidate/components/passwordSetter/PasswordSetter.svelte
@@ -8,16 +8,16 @@ Contains the dynamic `PasswordValidator` component.
 
 ### Properties
 
-- `password`: value for the password field
-- `autocomplete`: autocomplete attribute for the password input field
-- `errorMessage`: bindable error message if the password is invalid or doesn't match the confirmation password
-- `valid`: bindable property which can be read to see if the password is valid and the confirmation password matches
-- `reset`: bindable function with which to clear to form
+- `password`: Bindable: The password value.
+- `autocomplete`: The autocomplete attribute for the password input field. Default: `'new-password'`
+- `errorMessage`: Bindable: Error message if the password is invalid or doesn't match the confirmation password.
+- `valid`: Bindable: Whether the password is valid and the confirmation password matches.
+- `reset`: Bindable: Function to clear the form.
+- Any valid attributes of a `<form>` element
 
 ### Usage
 
 ```tsx
-
 <PasswordSetter
   bind:password={password}
   bind:valid={canSubmit}/>
@@ -29,11 +29,14 @@ Contains the dynamic `PasswordValidator` component.
   import { PasswordValidator } from '$candidate/components/passwordValidator';
   import { getComponentContext } from '$lib/contexts/component';
   import { getUUID } from '$lib/utils/components';
+  import type { PasswordSetterProps } from './PasswordSetter.type';
+
+  type $$Props = PasswordSetterProps;
 
-  export let password = '';
-  export let autocomplete = 'new-password';
-  export let errorMessage: string | undefined = undefined;
-  export let valid = false;
+  export let password: $$Props['password'] = '';
+  export let autocomplete: $$Props['autocomplete'] = 'new-password';
+  export let errorMessage: $$Props['errorMessage'] = undefined;
+  export let valid: $$Props['valid'] = false;
   export function reset(): void {
     password = '';
     passwordConfirmation = '';
diff --git a/frontend/src/lib/candidate/components/passwordSetter/PasswordSetter.type.ts b/frontend/src/lib/candidate/components/passwordSetter/PasswordSetter.type.ts
new file mode 100644
index 000000000..aefe3abe4
--- /dev/null
+++ b/frontend/src/lib/candidate/components/passwordSetter/PasswordSetter.type.ts
@@ -0,0 +1,24 @@
+import type { SvelteHTMLElements } from 'svelte/elements';
+
+export type PasswordSetterProps = SvelteHTMLElements['form'] & {
+  /**
+   * Bindable: The password value.
+   */
+  password?: string;
+  /**
+   * The autocomplete attribute for the password input field. @default 'new-password'
+   */
+  autocomplete?: string;
+  /**
+   * Bindable: Error message if the password is invalid or doesn't match the confirmation password.
+   */
+  errorMessage?: string;
+  /**
+   * Bindable: Whether the password is valid and the confirmation password matches.
+   */
+  valid?: boolean;
+  /**
+   * Bindable: Function to clear the form.
+   */
+  reset?: () => void;
+};
diff --git a/frontend/src/lib/candidate/components/passwordSetter/index.ts b/frontend/src/lib/candidate/components/passwordSetter/index.ts
index e86d4d5d4..11d70715f 100644
--- a/frontend/src/lib/candidate/components/passwordSetter/index.ts
+++ b/frontend/src/lib/candidate/components/passwordSetter/index.ts
@@ -1 +1,2 @@
 export { default as PasswordSetter } from './PasswordSetter.svelte';
+export * from './PasswordSetter.type';
diff --git a/frontend/src/lib/candidate/components/passwordValidator/PasswordValidator.svelte b/frontend/src/lib/candidate/components/passwordValidator/PasswordValidator.svelte
index 28b5f1304..24ff46356 100644
--- a/frontend/src/lib/candidate/components/passwordValidator/PasswordValidator.svelte
+++ b/frontend/src/lib/candidate/components/passwordValidator/PasswordValidator.svelte
@@ -21,9 +21,11 @@ Therefore, the validity should be also checked on form submit as well and on the
 Accesses validation functions from `@openvaa/app-shared`.
 
 ### Properties
-- `password`: The password to validate
-- `username`: The username used to prevent the password from being too similar
-- `validPassword`: A boolean that is set to true when the password is valid
+
+- `password`: The password to validate.
+- `username`: The username used to prevent the password from being too similar. Default: `''`
+- `validPassword`: Bindable: Whether the password is valid.
+- Any valid attributes of a `<div>` element
 
 ### Usage
 
@@ -42,10 +44,13 @@ When using this component, the `validPassword` property should be bound to a boo
   import { tweened } from 'svelte/motion';
   import { getComponentContext } from '$lib/contexts/component';
   import { assertTranslationKey } from '$lib/i18n/utils/assertTranslationKey';
+  import type { PasswordValidatorProps } from './PasswordValidator.type';
+
+  type $$Props = PasswordValidatorProps;
 
-  export let password = '';
-  export let username = '';
-  export let validPassword = false;
+  export let password: $$Props['password'] = '';
+  export let username: $$Props['username'] = '';
+  export let validPassword: $$Props['validPassword'] = false;
 
   const { t } = getComponentContext();
 
diff --git a/frontend/src/lib/candidate/components/passwordValidator/PasswordValidator.type.ts b/frontend/src/lib/candidate/components/passwordValidator/PasswordValidator.type.ts
new file mode 100644
index 000000000..9271b6762
--- /dev/null
+++ b/frontend/src/lib/candidate/components/passwordValidator/PasswordValidator.type.ts
@@ -0,0 +1,16 @@
+import type { SvelteHTMLElements } from 'svelte/elements';
+
+export type PasswordValidatorProps = SvelteHTMLElements['div'] & {
+  /**
+   * The password to validate.
+   */
+  password?: string;
+  /**
+   * The username used to prevent the password from being too similar. @default ''
+   */
+  username?: string;
+  /**
+   * Bindable: Whether the password is valid.
+   */
+  validPassword?: boolean;
+};
diff --git a/frontend/src/lib/candidate/components/passwordValidator/index.ts b/frontend/src/lib/candidate/components/passwordValidator/index.ts
index a9acb4e33..6a843feb3 100644
--- a/frontend/src/lib/candidate/components/passwordValidator/index.ts
+++ b/frontend/src/lib/candidate/components/passwordValidator/index.ts
@@ -1 +1,2 @@
 export { default as PasswordValidator } from './PasswordValidator.svelte';
+export * from './PasswordValidator.type';
diff --git a/frontend/src/lib/candidate/components/preregisteredNotification/PreregisteredNotification.svelte b/frontend/src/lib/candidate/components/preregisteredNotification/PreregisteredNotification.svelte
index ecd7e2e87..7372c8d47 100644
--- a/frontend/src/lib/candidate/components/preregisteredNotification/PreregisteredNotification.svelte
+++ b/frontend/src/lib/candidate/components/preregisteredNotification/PreregisteredNotification.svelte
@@ -2,29 +2,30 @@
 @component
 Show a notification prompting the user to login instead of preregistering again.
 
-### Props
+### Properties
 
-- Any valid props for the `Alert` component.
+- Any valid properties of an `Alert` component
 
 ### Usage
 
 ```tsx
-popupQueue.push({ 
-  component: PreregisteredNotification, 
+popupQueue.push({
+  component: PreregisteredNotification,
 });
 ```
 -->
 
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import { Alert, type AlertProps } from '$lib/components/alert';
+  import { Alert } from '$lib/components/alert';
   import { Button } from '$lib/components/button';
   import { getAppContext } from '$lib/contexts/app';
   import { sanitizeHtml } from '$lib/utils/sanitize';
   import type { Route } from '$lib/utils/route';
+  import type { PreregisteredNotificationProps } from './PreregisteredNotification.type';
 
-  /* eslint-disable @typescript-eslint/no-unused-vars */
-  type $$Props = Partial<AlertProps>;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  type $$Props = PreregisteredNotificationProps;
 
   const { getRoute, t } = getAppContext();
 
diff --git a/frontend/src/lib/candidate/components/preregisteredNotification/PreregisteredNotification.type.ts b/frontend/src/lib/candidate/components/preregisteredNotification/PreregisteredNotification.type.ts
new file mode 100644
index 000000000..d7c39fbeb
--- /dev/null
+++ b/frontend/src/lib/candidate/components/preregisteredNotification/PreregisteredNotification.type.ts
@@ -0,0 +1,3 @@
+import type { AlertProps } from '$lib/components/alert';
+
+export type PreregisteredNotificationProps = Partial<AlertProps>;
diff --git a/frontend/src/lib/candidate/components/preregisteredNotification/index.ts b/frontend/src/lib/candidate/components/preregisteredNotification/index.ts
index c668eb674..3e4fcb97f 100644
--- a/frontend/src/lib/candidate/components/preregisteredNotification/index.ts
+++ b/frontend/src/lib/candidate/components/preregisteredNotification/index.ts
@@ -1 +1,2 @@
 export { default as PreregisteredNotification } from './PreregisteredNotification.svelte';
+export * from './PreregisteredNotification.type';
diff --git a/frontend/src/lib/candidate/components/termsOfUse/TermsOfUse.svelte b/frontend/src/lib/candidate/components/termsOfUse/TermsOfUse.svelte
index c782648ad..6c0bf12a4 100644
--- a/frontend/src/lib/candidate/components/termsOfUse/TermsOfUse.svelte
+++ b/frontend/src/lib/candidate/components/termsOfUse/TermsOfUse.svelte
@@ -1,10 +1,8 @@
-<!--@component
-
-# Candidate app terms of use
-
+<!--
+@component
 A utility component for displaying candidate app terms of use and privacy statement.
 
-## Usage
+### Usage
 
 ```tsx
 <TermsOfUse />
diff --git a/frontend/src/lib/candidate/components/termsOfUse/TermsOfUseForm.svelte b/frontend/src/lib/candidate/components/termsOfUse/TermsOfUseForm.svelte
index c3adddb00..dec441d39 100644
--- a/frontend/src/lib/candidate/components/termsOfUse/TermsOfUseForm.svelte
+++ b/frontend/src/lib/candidate/components/termsOfUse/TermsOfUseForm.svelte
@@ -1,14 +1,17 @@
-<!--@component
-
-# Candidate app terms of use form
-
+<!--
+@component
 Show the terms of use along with a checkbox for accepting them.
 
-## Dynamic component
+### Dynamic component
 
 Accesses `CandidateContext`.
 
-## Usage
+### Properties
+
+- `termsAccepted`: Bindable: Whether the terms are accepted. Default: `false`
+- Any valid attributes of a `<section>` element
+
+### Usage
 
 ```tsx
 <script lang="ts">
diff --git a/frontend/src/lib/components/accordionSelect/AccordionSelect.svelte b/frontend/src/lib/components/accordionSelect/AccordionSelect.svelte
index 2359dc514..3718a3f99 100644
--- a/frontend/src/lib/components/accordionSelect/AccordionSelect.svelte
+++ b/frontend/src/lib/components/accordionSelect/AccordionSelect.svelte
@@ -1,18 +1,17 @@
-<!--@component
+<!--
+@component
 Show a select widget which is expanded when no selection is made and collapsed when an option is selected.
 
-If there’s only one option, it is automatically selected and no interactions are allowed.
+If there's only one option, it is automatically selected and no interactions are allowed.
 
 ### Properties
 
-- `options`: The titles of the options.
-- `activeIndex`: The index of the active option. Bind to this to change or read the active option. @default 0
+- `options`: The titles and other data related to the options.
+- `activeIndex`: The index of the active option. Bind to this to change or read the active option.
+- `labelGetter`: A callback used to get the label for each option. Default: `String`
+- `onChange`: Callback for when the active option changes. The event `details` contains the active option as `option` as well as its `index`.
 - Any valid attributes of a `<div>` element
 
-### Callbacks
-
-- `onChange`: Callback for when the active option changes. The event `details` contains the active option as `option` as well as its `index`. Note, it's preferable to just bind to the `activeTab` property instead.
-
 ### Usage
 
 ```tsx
diff --git a/frontend/src/lib/components/alert/Alert.svelte b/frontend/src/lib/components/alert/Alert.svelte
index 6c59be781..04defeaa6 100644
--- a/frontend/src/lib/components/alert/Alert.svelte
+++ b/frontend/src/lib/components/alert/Alert.svelte
@@ -2,24 +2,25 @@
 @component
 Show a non-model alert or dialog that appears at the bottom of the screen.
 
-### Slots
-
-- `actions`: The action buttons to display.
-- default: The content of the alert.
-
 ### Properties
 
-- `title`: The title of the modal 
-- `icon`: The icon of the alert. @default `info`
-- `autoOpen`: Whether to open the alert automatically. @default `true`
+- `title`: The title of the alert.
+- `icon`: Possible icon of the alert.
+- `autoOpen`: Whether to open the alert automatically. Default: `true`
+- `isOpen`: Bind to this to get the alert's open state.
 - `onClose`: The callback triggered when the alert is closed.
-- Any valid properties of a `<div>` element.
+- Any valid attributes of a `<dialog>` element
 
 ### Bindable functions
 
 - `openAlert`: Opens the alert
 - `closeAlert`: Closes the alert
 
+### Slots
+
+- `actions`: The action buttons to display.
+- default: The content of the alert.
+
 ### Events
 
 - `open`: Fired after the alert is opened.
@@ -32,7 +33,7 @@ Show a non-model alert or dialog that appears at the bottom of the screen.
 <script lang="ts">
   let closeAlert: () => void;
 </script>
-<Alert 
+<Alert
   bind:closeAlert
   title="Can we help you?"
   icon="warning"
diff --git a/frontend/src/lib/components/avatar/Avatar.svelte b/frontend/src/lib/components/avatar/Avatar.svelte
index 16d273afc..5f5ae20be 100644
--- a/frontend/src/lib/components/avatar/Avatar.svelte
+++ b/frontend/src/lib/components/avatar/Avatar.svelte
@@ -5,8 +5,8 @@ Display either an image or a initials-based avatar for an entity. The color of t
 ### Properties
 
 - `entity`: The entity for which to display the avatar.
-- `size`: The size of the avatar. @default `'md'`
-- `linkFullImage`: Whether to link the thumbnail to the full image. @default false
+- `size`: The size of the avatar. Default: `'md'`
+- `linkFullImage`: Whether to link the thumbnail to the full image. Default: `false`
 - Any valid attributes of a `<figure>` element
 
 ### Usage
diff --git a/frontend/src/lib/components/button/Button.svelte b/frontend/src/lib/components/button/Button.svelte
index 48a30c8a5..26f7b1283 100644
--- a/frontend/src/lib/components/button/Button.svelte
+++ b/frontend/src/lib/components/button/Button.svelte
@@ -16,15 +16,15 @@ The button is rendered as an `<a>` element if `href` is supplied. Otherwise a `<
 
 ### Properties
 
-- `href`: The URL to navigate to. If this is not supplied be sure to provide an `on:click` event handler or other way of making the item interactive.
 - `text`: The required text of the button. If `variant` is `icon`, the text will be used as the `aria-label` and `title` for the button. You can override both by providing them as attributes, e.g. `aria-label="Another text"`.
-- `variant`: The type of the button.
-- `icon`: The name of the icon to display.
-- `color`: The color of the button or text.
-- `iconPos`: The position of the icon relative to the text.
+- `icon`: The name of the icon to use in the button or `null` if no icon should be used. Default: `'next'` if `variant='main'`, otherwise `null`
+- `color`: The color of the button or text. Default: `'primary'`
 - `disabled`: Whether the button is disabled. This can also be used with buttons rendered as `<a>` elements.
-- `loading`: Set to `true` to show a loading spinner instead of the possible icon and disable the button. @default false
-- `loadingText`: The text shown when `loading` is `true`. @default $t('common.loading')
+- `variant`: Type of the button, which defines it's appearance. Default: `'normal'`
+- `iconPos`: Position of the icon in the button. Only relevant if `icon` is not `null` and `variant` is not `icon` or `floating-icon`. Note that `top` and `bottom` are not supported if `variant='main'`. Default: `'right'` if `variant='main'`, otherwise `'left'`
+- `loading`: Set to `true` to show a loading spinner instead of the possible icon and disable the button. Default: `false`
+- `loadingText`: The text shown when `loading` is `true`. Default: `$t('common.loading')`
+- `href`: The URL to navigate to. If this is not supplied be sure to provide an `on:click` event handler or other way of making the item interactive.
 - Any valid attributes of either an `<a>` or `<button>` element depending whether `href` was defined or not, respectively.
 
 ### Slots
diff --git a/frontend/src/lib/components/buttonWithConfirmation/ButtonWithConfirmation.svelte b/frontend/src/lib/components/buttonWithConfirmation/ButtonWithConfirmation.svelte
index 4dcbabd04..3f839b357 100644
--- a/frontend/src/lib/components/buttonWithConfirmation/ButtonWithConfirmation.svelte
+++ b/frontend/src/lib/components/buttonWithConfirmation/ButtonWithConfirmation.svelte
@@ -16,16 +16,12 @@ The button is rendered as an `<a>` element if `href` is supplied. Otherwise a `<
 
 ### Properties
 
-- `href`: The URL to navigate to. If this is not supplied be sure to provide an `on:click` event handler or other way of making the item interactive.
-- `text`: The required text of the button. If `variant` is `icon`, the text will be used as the `aria-label` and `title` for the button. You can override both by providing them as attributes, e.g. `aria-label="Another text"`.
-- `variant`: The type of the button.
-- `icon`: The name of the icon to display.
-- `color`: The color of the button or text.
-- `iconPos`: The position of the icon relative to the text.
-- `disabled`: Whether the button is disabled. This can also be used with buttons rendered as `<a>` elements.
-- `loading`: Set to `true` to show a loading spinner instead of the possible icon and disable the button. @default false
-- `loadingText`: The text shown when `loading` is `true`. @default $t('common.loading')
-- Any valid attributes of either an `<a>` or `<button>` element depending whether `href` was defined or not, respectively.
+- `modalTitle`: The title of the confirmation modal.
+- `onConfirm`: Callback triggered when the user confirms the action.
+- `onCancel`: Callback triggered when the user cancels the action.
+- `cancelLabel`: The label for the cancel button in the modal.
+- `confirmLabel`: The label for the confirm button in the modal.
+- Any valid properties of a `<Button>` component except `href` and `on:click`.
 
 ### Slots
 
diff --git a/frontend/src/lib/components/categoryTag/CategoryTag.svelte b/frontend/src/lib/components/categoryTag/CategoryTag.svelte
index 258861152..07e23736f 100644
--- a/frontend/src/lib/components/categoryTag/CategoryTag.svelte
+++ b/frontend/src/lib/components/categoryTag/CategoryTag.svelte
@@ -5,10 +5,10 @@ Used to display a question category tag with the category's color.
 ### Properties
 
 - `category`: The `QuestionCategory` object.
-- `variant`: Whether to use an abbreviation or the full name. @default `'full'`
-- `suffix`: An optional suffix to add after the category name, e.g. '1/3'. @default undefined
-- `onShadedBg`: Set to `true` if using the component on a dark (`base-300`) background. @default false
-- Any valid attributes of a `<span>` element.
+- `variant`: Whether to use an abbreviation or the full name. Default: `'full'`
+- `suffix`: An optional suffix to add after the category name, e.g. '1/3'.
+- `onShadedBg`: Set to `true` if using the component on a dark (`base-300`) background. Default: `false`
+- Any valid attributes of a `<span>` element
 
 ### Usage
 
diff --git a/frontend/src/lib/components/constituencySelector/ConstituencySelector.svelte b/frontend/src/lib/components/constituencySelector/ConstituencySelector.svelte
index 4c9437e35..8d9f4cc29 100644
--- a/frontend/src/lib/components/constituencySelector/ConstituencySelector.svelte
+++ b/frontend/src/lib/components/constituencySelector/ConstituencySelector.svelte
@@ -1,28 +1,26 @@
-<!--@component
-
-# Constituency selection component
-
+<!--
+@component
 Display constituency selection inputs for elections.
 
-If any of the `ConstituencyGroup`s for the `Election`s are shared, only a single selectior will be shown for them. Also, if any `ConstituencyGroup`s are completely subsumed by another, only the selector for the child group will be shown and the selected parent will be implied.
+If any of the `ConstituencyGroup`s for the `Election`s are shared, only a single selector will be shown for them. Also, if any `ConstituencyGroup`s are completely subsumed by another, only the selector for the child group will be shown and the selected parent will be implied.
 
 ### Properties
 
 - `elections`: The `Election`s for which to show the `Constituency`s.
-- `disableSorting`: If `true`, the `Constituency`s are not ordered alphabetically. Default `false`.
-- `onShadedBg`: Set to `true` if using the component on a dark (`base-300`) background. @default false
+- `disableSorting`: If `true`, the `Constituency`s are not ordered alphabetically. Default: `false`
+- `onShadedBg`: Set to `true` if using the component on a dark (`base-300`) background. Default: `false`
 - `selected`: Bindable value for the `Id`s of the selected `Constituency`s organized by `Election`.
 - `useSingleGroup`: If specified, only this group is offered for selection and the `Constituency`s for the `Election`s are implied from this one. Only meaningful when there are multiple `Election`s whose `ConstituencyGroup` hierarchies overlap only partially. To be used when the `elections.startFromConstituencyGroup` setting is set.
 - `selectionComplete`: A utility bindable value which is `true` when a selection has been made for each `Election` or for the single group if `useSingleGroup` is set.
 - `onChange`: Callback triggered when the selection changes.
-- Any valid attributes of a `<div>` element.
+- Any valid attributes of a `<div>` element
 
 ### Usage
 
 ```tsx
-<ConstituenctSelector
-  elections={$dataRoot.elections} 
-  bind:selected={$selectedConstituencies} 
+<ConstituencySelector
+  elections={$dataRoot.elections}
+  bind:selected={$selectedConstituencies}
   onChange={(sel) => console.info('Selected', sel)} />
 ```
 -->
diff --git a/frontend/src/lib/components/controller/InfoMessages.svelte b/frontend/src/lib/components/controller/InfoMessages.svelte
index ca11ae001..6be6d59ce 100644
--- a/frontend/src/lib/components/controller/InfoMessages.svelte
+++ b/frontend/src/lib/components/controller/InfoMessages.svelte
@@ -1,20 +1,32 @@
-<!--@component
-# Info Messages Component
+<!--
+@component
+Reusable component for displaying informational messages with scrolling.
 
-Reusable component for displaying informational messages with scrolling
+### Properties
+
+- `messages`: Array of informational messages to display. Default: `[]`
+- Any valid attributes of a `<div>` element
+
+### Usage
+
+```tsx
+<InfoMessages messages={jobMessages} />
+```
 -->
 
 <script lang="ts">
   import { DEFAULT_MAX_MESSAGES, DEFAULT_MESSAGES_HEIGHT } from '$lib/admin/components/jobs/shared';
   import { getAdminContext } from '$lib/contexts/admin';
-  import type { JobMessage } from '$lib/server/admin/jobs/jobStore.type';
+  import type { InfoMessagesProps } from './InfoMessages.type';
 
-  const { t } = getAdminContext();
+  type $$Props = InfoMessagesProps;
+
+  export let messages: $$Props['messages'] = undefined;
 
-  export let messages: Array<JobMessage> = [];
+  const { t } = getAdminContext();
 
   // Get the most recent messages and reverse order (latest first)
-  $: displayMessages = messages.slice(-DEFAULT_MAX_MESSAGES).reverse();
+  $: displayMessages = messages?.slice(-DEFAULT_MAX_MESSAGES).reverse() ?? [];
 </script>
 
 <div class="p-3 rounded-lg bg-base-200 {DEFAULT_MESSAGES_HEIGHT} overflow-y-auto">
diff --git a/frontend/src/lib/components/controller/InfoMessages.type.ts b/frontend/src/lib/components/controller/InfoMessages.type.ts
new file mode 100644
index 000000000..3af684d9b
--- /dev/null
+++ b/frontend/src/lib/components/controller/InfoMessages.type.ts
@@ -0,0 +1,9 @@
+import type { SvelteHTMLElements } from 'svelte/elements';
+import type { JobMessage } from '$lib/server/admin/jobs/jobStore.type';
+
+export type InfoMessagesProps = SvelteHTMLElements['div'] & {
+  /**
+   * Array of informational messages to display. @default []
+   */
+  messages?: Array<JobMessage>;
+};
diff --git a/frontend/src/lib/components/controller/ProgressBar.svelte b/frontend/src/lib/components/controller/ProgressBar.svelte
index e685282b7..b4cf7a718 100644
--- a/frontend/src/lib/components/controller/ProgressBar.svelte
+++ b/frontend/src/lib/components/controller/ProgressBar.svelte
@@ -1,15 +1,45 @@
-<!--@component
-# Progress Bar Component
+<!--
+@component
+Reusable progress bar component for displaying task progress.
 
-Reusable progress bar component for displaying task progress
+### Properties
+
+- `progress`: Progress value between 0 and 1.
+- `label`: Label for the progress bar. Default: `t('adminApp.jobs.progress')`
+- `showPercentage`: Whether to show the percentage. Default: `true`
+- `color`: Color theme for the progress bar. Default: `'primary'`
+- `size`: Size of the progress bar. Default: `'md'`
+- Any valid attributes of a `<div>` element
+
+### Usage
+
+```tsx
+<ProgressBar progress={0.75} label="Processing" />
+```
 -->
 
 <script lang="ts">
-  export let progress: number; // Value between 0 and 1
-  export let label: string = 'Progress';
-  export let showPercentage: boolean = true;
-  export let color: 'primary' | 'secondary' | 'accent' = 'primary';
-  export let size: 'sm' | 'md' | 'lg' = 'md';
+  import { getComponentContext } from '$lib/contexts/component';
+  import type { ProgressBarProps } from './ProgressBar.type';
+
+  type $$Props = ProgressBarProps;
+
+  export let progress: $$Props['progress'];
+  export let label: $$Props['label'] = undefined;
+  export let showPercentage: $$Props['showPercentage'] = true;
+  export let color: $$Props['color'] = undefined;
+  export let size: $$Props['size'] = undefined;
+
+  const { t } = getComponentContext();
+
+  // Set defaults
+  $: size ||= 'md';
+  $: color ||= 'primary';
+  $: label ||= $t('adminApp.jobs.progress');
+
+  // Normalize progress value
+  let normalizedProgress: number;
+  let percentage: number;
 
   // Ensure progress is between 0 and 1
   $: normalizedProgress = Math.max(0, Math.min(1, progress));
diff --git a/frontend/src/lib/components/controller/ProgressBar.type.ts b/frontend/src/lib/components/controller/ProgressBar.type.ts
new file mode 100644
index 000000000..08a5beb96
--- /dev/null
+++ b/frontend/src/lib/components/controller/ProgressBar.type.ts
@@ -0,0 +1,24 @@
+import type { SvelteHTMLElements } from 'svelte/elements';
+
+export type ProgressBarProps = SvelteHTMLElements['div'] & {
+  /**
+   * Progress value between 0 and 1.
+   */
+  progress: number;
+  /**
+   * Label for the progress bar. @default t('adminApp.jobs.progress')
+   */
+  label?: string;
+  /**
+   * Whether to show the percentage. @default true
+   */
+  showPercentage?: boolean;
+  /**
+   * Color theme for the progress bar. @default 'primary'
+   */
+  color?: 'primary' | 'secondary' | 'accent';
+  /**
+   * Size of the progress bar. @default 'md'
+   */
+  size?: 'sm' | 'md' | 'lg';
+};
diff --git a/frontend/src/lib/components/controller/WarningMessages.svelte b/frontend/src/lib/components/controller/WarningMessages.svelte
index 75d7c0988..741899bde 100644
--- a/frontend/src/lib/components/controller/WarningMessages.svelte
+++ b/frontend/src/lib/components/controller/WarningMessages.svelte
@@ -1,21 +1,34 @@
-<!--@component
-# Warning Messages Component
+<!--
+@component
+Reusable component for displaying warning and error messages with scrolling.
 
-Reusable component for displaying warning and error messages with scrolling
+### Properties
+
+- `warnings`: Array of warning messages to display. Default: `[]`
+- `errors`: Array of error messages to display. Default: `[]`
+- Any valid attributes of a `<div>` element
+
+### Usage
+
+```tsx
+<WarningMessages warnings={warningMessages} errors={errorMessages} />
+```
 -->
 
 <script lang="ts">
   import { DEFAULT_MAX_MESSAGES, DEFAULT_MESSAGES_HEIGHT } from '$lib/admin/components/jobs/shared';
   import { getAdminContext } from '$lib/contexts/admin';
-  import type { JobMessage } from '$lib/server/admin/jobs/jobStore.type';
+  import type { WarningMessagesProps } from './WarningMessages.type';
 
-  const { t } = getAdminContext();
+  type $$Props = WarningMessagesProps;
+
+  export let warnings: $$Props['warnings'] = [];
+  export let errors: $$Props['errors'] = [];
 
-  export let warnings: Array<JobMessage> = [];
-  export let errors: Array<JobMessage> = [];
+  const { t } = getAdminContext();
 
   // Combine warnings and errors for display, limiting to maxMessages, and reverse order (latest first)
-  $: allMessages = [...warnings, ...errors].slice(-DEFAULT_MAX_MESSAGES).reverse();
+  $: allMessages = [...(warnings ?? []), ...(errors ?? [])].slice(-DEFAULT_MAX_MESSAGES).reverse();
 </script>
 
 <div class="p-3 rounded-lg bg-base-200 {DEFAULT_MESSAGES_HEIGHT} overflow-y-auto">
diff --git a/frontend/src/lib/components/controller/WarningMessages.type.ts b/frontend/src/lib/components/controller/WarningMessages.type.ts
new file mode 100644
index 000000000..d2b7da11c
--- /dev/null
+++ b/frontend/src/lib/components/controller/WarningMessages.type.ts
@@ -0,0 +1,13 @@
+import type { SvelteHTMLElements } from 'svelte/elements';
+import type { JobMessage } from '$lib/server/admin/jobs/jobStore.type';
+
+export type WarningMessagesProps = SvelteHTMLElements['div'] & {
+  /**
+   * Array of warning messages to display. @default []
+   */
+  warnings?: Array<JobMessage>;
+  /**
+   * Array of error messages to display. @default []
+   */
+  errors?: Array<JobMessage>;
+};
diff --git a/frontend/src/lib/components/controller/index.ts b/frontend/src/lib/components/controller/index.ts
index e91df14d9..c9041285e 100644
--- a/frontend/src/lib/components/controller/index.ts
+++ b/frontend/src/lib/components/controller/index.ts
@@ -1,3 +1,6 @@
 export { default as InfoMessages } from './InfoMessages.svelte';
+export * from './InfoMessages.type';
 export { default as ProgressBar } from './ProgressBar.svelte';
+export * from './ProgressBar.type';
 export { default as WarningMessages } from './WarningMessages.svelte';
+export * from './WarningMessages.type';
diff --git a/frontend/src/lib/components/electionTag/ElectionTag.svelte b/frontend/src/lib/components/electionTag/ElectionTag.svelte
index 55d138e81..b9ad41f80 100644
--- a/frontend/src/lib/components/electionTag/ElectionTag.svelte
+++ b/frontend/src/lib/components/electionTag/ElectionTag.svelte
@@ -7,8 +7,8 @@ Used when the application has multiple elections and question may apply to only
 ### Properties
 
 - `election`: The `Election` object.
-- `variant`: Whether to use an abbreviation or the full name. @default `'short'`
-- `onShadedBg`: Set to `true` if using the component on a dark (`base-300`) background. @default false
+- `variant`: Whether to use an abbreviation or the full name. Default: `'short'`
+- `onShadedBg`: Set to `true` if using the component on a dark (`base-300`) background. Default: `false`
 - Any valid attributes of a `<span>` element.
 
 ### Usage
diff --git a/frontend/src/lib/components/entityFilters/EntityFilters.svelte b/frontend/src/lib/components/entityFilters/EntityFilters.svelte
index 41fdce52a..572f69e52 100644
--- a/frontend/src/lib/components/entityFilters/EntityFilters.svelte
+++ b/frontend/src/lib/components/entityFilters/EntityFilters.svelte
@@ -4,9 +4,9 @@ Show filters for entities. This component and the individual filter components o
 
 ### Properties
 
-- `filters`: The filter objects to render.
+- `filterGroup`: The filters applied to the contents.
 - `targets`: The target entitiess of the filter objects. Note that these will only be used to get value options, not for actual filtering.
-- Any valid attributes of a `<div>` element
+- Any valid attributes of a `<div>` element.
 
 ### Usage
 
diff --git a/frontend/src/lib/components/entityFilters/text/TextEntityFilter.svelte b/frontend/src/lib/components/entityFilters/text/TextEntityFilter.svelte
index 3e1d194fc..712dd7450 100644
--- a/frontend/src/lib/components/entityFilters/text/TextEntityFilter.svelte
+++ b/frontend/src/lib/components/entityFilters/text/TextEntityFilter.svelte
@@ -4,9 +4,10 @@ Render a text filter for entities.
 
 ### Properties
 
-- `filter`: The text filter object to render.
-- `placeholder`: The placeholder text. @default `$t('entityFilters.text.placeholder')`
-- Any valid attributes of a `<div>` element
+- `filter`: The text filter object.
+- `placeholder`: The placeholder text. Default: `$t('components.entityFilters.text.placeholder')`
+- `variant`: The styling variant for the text field. Default: `'default'`
+- Any valid attributes of a `<div>` element.
 
 ### Usage
 
diff --git a/frontend/src/lib/components/entityTag/EntityTag.svelte b/frontend/src/lib/components/entityTag/EntityTag.svelte
index b3e713bb7..ce59e4ce0 100644
--- a/frontend/src/lib/components/entityTag/EntityTag.svelte
+++ b/frontend/src/lib/components/entityTag/EntityTag.svelte
@@ -5,8 +5,8 @@ Used to display an `Entity` as small tag including an icon.
 ### Properties
 
 - `entity`: A possibly wrapped entity, e.g. candidate or a party.
-- `variant`: Whether to use an abbreviation or the full name. @default `'default'`
-- `hideParent`: Whether to hide the possible parent nomination. @default false
+- `variant`: Whether to use an abbreviation or the full name. Default: `'default'`
+- `hideParent`: Whether to hide the possible parent nomination. Default: `false`
 - Any valid attributes of a `<div>` element.
 
 ### Usage
diff --git a/frontend/src/lib/components/errorMessage/ErrorMessage.svelte b/frontend/src/lib/components/errorMessage/ErrorMessage.svelte
index e01af11cd..0a0ccc966 100644
--- a/frontend/src/lib/components/errorMessage/ErrorMessage.svelte
+++ b/frontend/src/lib/components/errorMessage/ErrorMessage.svelte
@@ -4,9 +4,9 @@ Used to display an error message. Also logs the error to the console.
 
 ### Properties
 
-- `inline`: Whether to show an inline version of the message. By default the message tries to center itself in the available area and displays a large emoji. @default `false`
-- `message`: The message to display. Default `$t('error.default')`
-- `logMessage`: The message to log in the console in development mode. @default value of `message`
+- `inline`: Whether to show an inline version of the message. By default the message tries to center itself in the available area and displays a large emoji. Default: `false`
+- `message`: The message to display. Default: `$t('error.default')`
+- `logMessage`: The message to log in the console in development mode. Default: value of `message`
 - Any valid attributes of a `<div>` element.
 
 ### Usage
diff --git a/frontend/src/lib/components/expander/Expander.svelte b/frontend/src/lib/components/expander/Expander.svelte
index 2d03b9438..a116b1497 100644
--- a/frontend/src/lib/components/expander/Expander.svelte
+++ b/frontend/src/lib/components/expander/Expander.svelte
@@ -13,15 +13,14 @@ A component for expanders that contain a title and some content. Use the
 
 ### Properties
 
-- `title`: Title used for the expander. This is also used as the aria-label for 
-  the checkbox on which the expander operates on.
-- `variant`: The type for the expander.
-- `iconColor`: The color for the icon. Default color is primary.
-- `iconPos`: The position for the icon. Default is text, which means the icon will
-    be where the text ends.
-- `titleClass`: Custom class string to add to the `<div>` containing the title.
-- `contentClass`: Custom class string to add to the `<div>` containing the main content.
+- `title`: Title is seen as the text in the expander's visible part, and it is mandatory. Title will also be used as a 'aria-label' for a checkbow on which the expander operates on.
+- `iconColor`: The color of the next-icon that is used in the expander. Default: `'primary'`
+- `iconPos`: The position of the next-icon that is used in the expander. Default: `'text'`
+- `titleClass`: Variable with which to configure the expanders title if no variants are in use.
+- `contentClass`: Variable with which to configure the expanders content if no variants are in use.
 - `defaultExpanded`: Variable used to define if the expander is expanded or not by default.
+- `variant`: Variable used to define a variant for the expander.
+- Any valid attributes of a `<div>` element.
 
 You should not try to use a variant and customize at the same time.
 
diff --git a/frontend/src/lib/components/headingGroup/HeadingGroup.svelte b/frontend/src/lib/components/headingGroup/HeadingGroup.svelte
index 6d417dd21..47b2a329e 100644
--- a/frontend/src/lib/components/headingGroup/HeadingGroup.svelte
+++ b/frontend/src/lib/components/headingGroup/HeadingGroup.svelte
@@ -5,8 +5,8 @@ and the main title.
 
 ### Properties
 
-- `aria-roledescription`: The Aria role description of the `<hgroup>` element representing the pre-title. @default $t('components.headingGroup.roleDescription')
-- `role`: The Aria role of the `<hgroup>` element. @default 'group'
+- `aria-roledescription`: The Aria role description of the `<hgroup>` element. Default: `$t('aria.headingGroup')`
+- `role`: The Aria role of the `<hgroup>` element. Default: `'group'`
 - Any valid attributes of a `<hgroup>` element.
 
 ### Slots
diff --git a/frontend/src/lib/components/headingGroup/PreHeading.svelte b/frontend/src/lib/components/headingGroup/PreHeading.svelte
index ad66f50ba..6787d4b1e 100644
--- a/frontend/src/lib/components/headingGroup/PreHeading.svelte
+++ b/frontend/src/lib/components/headingGroup/PreHeading.svelte
@@ -4,7 +4,7 @@ Used for a pre-title, or kicker, above the main title of a page within a `Headin
 
 ### Properties
 
-- `aria-roledescription`: The Aria role description of the `<p>` element representing the pre-title. @default $t('components.preHeading.roleDescription')
+- `aria-roledescription`: The Aria role description of the `<p>` element representing the pre-title. Default: `$t('aria.preHeading')`
 - Any valid attributes of a `<p>` element.
 
 ### Slots
diff --git a/frontend/src/lib/components/heroEmoji/HeroEmoji.svelte b/frontend/src/lib/components/heroEmoji/HeroEmoji.svelte
index d22e9486e..1727a70b4 100644
--- a/frontend/src/lib/components/heroEmoji/HeroEmoji.svelte
+++ b/frontend/src/lib/components/heroEmoji/HeroEmoji.svelte
@@ -12,10 +12,7 @@ using the `class` attribute, e.g. `class="text-[10rem]"`.
 
 ### Properties
 
-- `emoji`: The emoji to use. Note that all non-emoji characters will be removed. If `undefined` the component will not be rendered at all. @default `undefined`
-- `aria-hidden`: @default `true`
-- `role`: Aria role @default `img`
-- `class`: Additional class string to append to the element's default classes.
+- `emoji`: The emoji to use. Note that all non-emoji characters will be removed. If `undefined` the component will not be rendered at all. Default: `undefined`
 - Any valid attributes of a `<div>` element.
 
 ### Usage
diff --git a/frontend/src/lib/components/icon/Icon.svelte b/frontend/src/lib/components/icon/Icon.svelte
index 283cc596e..f3b8e1bbc 100644
--- a/frontend/src/lib/components/icon/Icon.svelte
+++ b/frontend/src/lib/components/icon/Icon.svelte
@@ -8,15 +8,12 @@ any valid attributes of the `<svg>` element.
 
 ### Properties
 
-- `name`: the name of the icon to use
-- `size`: The size of the icon as one of the predefined sizes 'sm', 'md' or 'lg'. For arbitrary values, you can supply a `class` property, such as `h-[3.15rem] w-[3.15rem]`. @default 'md'
-- `color`: The color of the icon as one of the predefined colours. For arbitrary values, use the `customColor` and `customColorDark` properties. @default 'current'
+- `name`: The name of the icon to use.
+- `size`: The size of the icon as one of the predefined sizes 'sm', 'md' or 'lg'. For arbitrary values, you can supply a `class` property, such as `h-[3.15rem] w-[3.15rem]`. Default: `'md'`
+- `color`: The color of the icon as one of the predefined colours. For arbitrary values, use the `customColor` and `customColorDark` properties. Default: `'current'`
 - `customColor`: A custom color string to use for the icon, e.g. in case of parties, which will override the `color` property. Make sure to define both `customColor` and `customColorDark` together.
 - `customColorDark`: A custom color string to use for the icon in dark mode, which will override the `color` property.
-- `aria-hidden`: @default `true`
-- `role`: Aria role @default `img`
-- `class`: Additional class string to append to the element's default classes.
-- Any valid attributes of a `<svg>` element
+- Any valid attributes of a `<svg>` element.
 
 ### Usage
 
diff --git a/frontend/src/lib/components/infoAnswer/InfoAnswer.svelte b/frontend/src/lib/components/infoAnswer/InfoAnswer.svelte
index 4d4f9b472..e6d333ce7 100644
--- a/frontend/src/lib/components/infoAnswer/InfoAnswer.svelte
+++ b/frontend/src/lib/components/infoAnswer/InfoAnswer.svelte
@@ -6,7 +6,7 @@ Used to display a possibly wrapped entity's answer to an info question. Dependin
 
 - `answer`: The possibly missing answer to the question.
 - `question`: The info question object.
-- `format`: How to format the answer. @default `default`
+- `format`: How to format the answer. Default: `'default'`
   - `default`: use the same format as in `<EntityDetails>`.
   - `tag`: format the answers as a pill or tag. Nb. links are always rendered as tags.
 - Any valid common attributes of an HTML element.
diff --git a/frontend/src/lib/components/infoBadge/InfoBadge.svelte b/frontend/src/lib/components/infoBadge/InfoBadge.svelte
index a0d03016c..ab99d8d55 100644
--- a/frontend/src/lib/components/infoBadge/InfoBadge.svelte
+++ b/frontend/src/lib/components/infoBadge/InfoBadge.svelte
@@ -1,16 +1,18 @@
 <!--
-  @component
-  Small badge component used to display information next to other components.
+@component
+Small badge component used to display information next to other components.
 
-  ### Properties
+### Properties
 
-  - `text`: Text to be dispyled in the badge.
-  - `classes`: Custom css classes added to the wrapping div element.
+- `text`: Text to be displayed in the badge.
+- `classes`: Custom css classes.
+- `disabled`: Whether the badge is disabled and rendered as grey.
 
-  ### Usage
-
-  <InfoBadge text="example" classes="p-10" />
+### Usage
 
+```tsx
+<InfoBadge text="example" classes="p-10" />
+```
 -->
 
 <script lang="ts">
diff --git a/frontend/src/lib/components/input/PreviewAllInputs.svelte b/frontend/src/lib/components/input/PreviewAllInputs.svelte
index bbfd49bfa..a5fdd6c66 100644
--- a/frontend/src/lib/components/input/PreviewAllInputs.svelte
+++ b/frontend/src/lib/components/input/PreviewAllInputs.svelte
@@ -1,12 +1,32 @@
+<!--
+@component
+Preview component displaying all available input types.
+
+### Properties
+
+- `info`: Optional info text to display with inputs.
+- `locked`: Whether inputs are locked. Default: `false`
+- Any valid attributes of a `<div>` element
+
+### Usage
+
+```tsx
+<PreviewAllInputs info="Example info" locked={false} />
+```
+-->
+
 <script lang="ts">
   import { Input } from '.';
+  import type { PreviewAllInputsProps } from './PreviewAllInputs.type';
+
+  type $$Props = PreviewAllInputsProps;
+
+  export let info: $$Props['info'] = undefined;
+  export let locked: $$Props['locked'] = false;
 
   function onChange(value: unknown) {
     console.info('New value:', value);
   }
-
-  export let info: string | undefined = undefined;
-  export let locked = false;
 </script>
 
 <div class="mb-[10rem] flex w-[30rem] flex-col gap-md">
diff --git a/frontend/src/lib/components/input/PreviewAllInputs.type.ts b/frontend/src/lib/components/input/PreviewAllInputs.type.ts
new file mode 100644
index 000000000..57b5e77cc
--- /dev/null
+++ b/frontend/src/lib/components/input/PreviewAllInputs.type.ts
@@ -0,0 +1,12 @@
+import type { SvelteHTMLElements } from 'svelte/elements';
+
+export type PreviewAllInputsProps = SvelteHTMLElements['div'] & {
+  /**
+   * Optional info text to display with inputs.
+   */
+  info?: string;
+  /**
+   * Whether inputs are locked. @default false
+   */
+  locked?: boolean;
+};
diff --git a/frontend/src/lib/components/input/index.ts b/frontend/src/lib/components/input/index.ts
index f24890611..a57399a6f 100644
--- a/frontend/src/lib/components/input/index.ts
+++ b/frontend/src/lib/components/input/index.ts
@@ -2,6 +2,8 @@ export { default as Input } from './Input.svelte';
 export * from './Input.type';
 export { default as InputGroup } from './InputGroup.svelte';
 export * from './InputGroup.type';
+export { default as PreviewAllInputs } from './PreviewAllInputs.svelte';
+export * from './PreviewAllInputs.type';
 export { default as QuestionInput } from './QuestionInput.svelte';
 export * from './QuestionInput.type';
 export * from './shared';
diff --git a/frontend/src/lib/components/loading/Loading.svelte b/frontend/src/lib/components/loading/Loading.svelte
index 797018e8b..4139ea182 100644
--- a/frontend/src/lib/components/loading/Loading.svelte
+++ b/frontend/src/lib/components/loading/Loading.svelte
@@ -4,10 +4,10 @@ Used to display a loading spinner with an optionally visible text label.
 
 ### Properties
 
-- `inline`: Whether to show an inline version of the spinner. By default the spinner tries to center itself in the available area. @default `false`
-- `label`: he label text. @default `$t('common.loading')`
-- `showLabel`: Whether to show the text label. The label will always be shown to screen readers. @default `false`
-- `size`: The size of the loading spinner. @default `'lg'`
+- `inline`: Whether to show an inline version of the spinner. By default the spinner tries to center itself in the available area. Default: `false`
+- `label`: The label text. Default: `$t('common.loading')`
+- `showLabel`: Whether to show the text label. The label will always be shown to screen readers. Default: `false`
+- `size`: The size of the loading spinner. Default: `'lg'`
 - Any valid attributes of a `<div>` element.
 
 ### Usage
diff --git a/frontend/src/lib/components/matchScore/MatchScore.svelte b/frontend/src/lib/components/matchScore/MatchScore.svelte
index ec10ca6d0..125984298 100644
--- a/frontend/src/lib/components/matchScore/MatchScore.svelte
+++ b/frontend/src/lib/components/matchScore/MatchScore.svelte
@@ -5,7 +5,8 @@ Display an entity's match score.
 ### Properties
 
 - `score`: The match score as a `string` or a `number`. Note that `$t('components.matchScore.label')` will be used display the score.
-- `label`: The label to display under the score. @default `$t('components.matchScore.label')`
+- `label`: The label to display under the score. Default: `$t('components.matchScore.label')`
+- `showLabel`: Whether to show the label. Default: `true`
 - Any valid attributes of a `<div>` element
 
 ### Usage
diff --git a/frontend/src/lib/components/openVAALogo/OpenVAALogo.svelte b/frontend/src/lib/components/openVAALogo/OpenVAALogo.svelte
index 4f30aa7ba..ae420a21b 100644
--- a/frontend/src/lib/components/openVAALogo/OpenVAALogo.svelte
+++ b/frontend/src/lib/components/openVAALogo/OpenVAALogo.svelte
@@ -8,15 +8,10 @@ attributes of one.
 
 ### Properties
 
-- `title`: The `<title>` of the SVG logo. Functions much the same way as the `alt``
-  attribute of an `<img>`.
-- `color`: The color of the logo as one of the predefined colours.
-  For arbitrary values, you can supply a `class` property, such as
-  `fill-[#123456]`. @default `'neutral'`
-  - `size`: The size of the logo as one of the predefined sizes 'sm', 'md' or 'lg'.
-    For arbitrary values, you can supply a `class` attribute, such as 
-    `class="h-[3.5rem]"`. @default `'md'`
-  - Any valid attributes of a `<svg>` element
+- `title`: The `<title>` of the SVG logo. Functions much the same way as the `alt` attribute of an `<img>`. Default: `'OpenVAA'`
+- `size`: The size of the logo as one of the predefined sizes 'sm', 'md' or 'lg'. For arbitrary values, you can supply a `class` property, such as `h-[3.15rem] w-[3.15rem]`. Default: `'md'`
+- `color`: The color of the logo as one of the predefined colours. For arbitrary values, you can supply a `class` property, such as `fill-[#123456]`. Default: `'neutral'`
+- Any valid attributes of a `<svg>` element.
   
 ### Usage
 
diff --git a/frontend/src/lib/components/successMessage/SuccessMessage.svelte b/frontend/src/lib/components/successMessage/SuccessMessage.svelte
index d787cffa1..ff849744f 100644
--- a/frontend/src/lib/components/successMessage/SuccessMessage.svelte
+++ b/frontend/src/lib/components/successMessage/SuccessMessage.svelte
@@ -4,8 +4,8 @@ Used to display a message when an action succeeds.
 
 ### Properties
 
-- `inline`: Whether to show an inline version of the message. By default the message tries to center itself in the available area and displays a large emoji. @default `false`
-- `message`: The error message to display. Default `$t('common.success')`
+- `inline`: Whether to show an inline version of the message. By default the message tries to center itself in the available area and displays a large emoji. Default: `false`
+- `message`: The message to display. Default: `$t('common.success')`
 - Any valid attributes of a `<div>` element.
 
 ### Usage
diff --git a/frontend/src/lib/dynamic-components/appLogo/AppLogo.svelte b/frontend/src/lib/dynamic-components/appLogo/AppLogo.svelte
index 64002c7e2..6be371a3f 100644
--- a/frontend/src/lib/dynamic-components/appLogo/AppLogo.svelte
+++ b/frontend/src/lib/dynamic-components/appLogo/AppLogo.svelte
@@ -10,11 +10,10 @@ Logo files for use on a light and a dark background can be defined. If the latte
 
 ### Properties
 
-- `alt`: The `alt` text for the logo image.
-- `inverse`: If `true`, the light and dark versions of the logo will be reversed. Set to `true` if using the logo on a dark background. @default `false`
-- `size`: The size of the logo as one of the predefined sizes 'sm', 'md' or 'lg'. For arbitrary values, you can supply a `class` attribute, such as `class="h-[3.5rem]"`. @default `'md'`
-- `class`: Additional class string to append to the element's default classes.
-- Any valid attributes of the `<div>` element wrapping the light and dark `<img>` elements
+- `alt`: The `alt` text for the logo image. If missing, the publisher name or 'OpenVAA' will be used, depending on the logo shown.
+- `inverse`: If `true`, the light and dark versions of the logo will be reversed. Set to `true` if using the logo on a dark background. Default: `false`
+- `size`: The size of the logo as one of the predefined sizes 'sm', 'md' or 'lg'. For arbitrary values, you can supply a `class` attribute, such as `class="h-[3.5rem]"`. Default: `'md'`
+- Any valid attributes of a `<div>` element
 
 ### Usage
 
diff --git a/frontend/src/lib/dynamic-components/dataConsent/DataConsent.svelte b/frontend/src/lib/dynamic-components/dataConsent/DataConsent.svelte
index 06aca1b97..cc995a86d 100644
--- a/frontend/src/lib/dynamic-components/dataConsent/DataConsent.svelte
+++ b/frontend/src/lib/dynamic-components/dataConsent/DataConsent.svelte
@@ -8,10 +8,10 @@ Accesses `AppContext` to set and read `userPreferences`.
 
 ### Properties
 
-- `description`: Whether and how to show the data consent description. @default `modal`
-  - `none`: Don’t show the description.
-  - `inline`: Show the consent description above the buttons.
-  - `modal`: Show a button that opens the description in a modal.
+- `description`: Whether and how to show the data consent description. Default: `'modal'`
+  - `'none'`: Don't show the description.
+  - `'inline'`: Show the consent description above the buttons.
+  - `'modal'`: Show a button that opens the description in a modal.
 - Any valid attributes of a `<div>` element.
 
 ### Events
diff --git a/frontend/src/lib/dynamic-components/entityCard/EntityCard.svelte b/frontend/src/lib/dynamic-components/entityCard/EntityCard.svelte
index bfb2604ad..02a9f2b02 100644
--- a/frontend/src/lib/dynamic-components/entityCard/EntityCard.svelte
+++ b/frontend/src/lib/dynamic-components/entityCard/EntityCard.svelte
@@ -12,14 +12,14 @@ This is a dynamic component, because it accesses the `dataRoot` and other proper
 
 ### Properties
 
-- `action`: Custom action to take when the card is clicked, defaults to a link to the entity’s `ResultEntity` route. If the card has subentites, the action will only be triggered by clicking the content above them.
-- `entity`: A possibly ranked nakedEntity, e.g. candidate or a party.
-- `variant`: The variant-dependend layout variant. Usually set automatically.
-  - `'list'`: In a list of entities. The default.
+- `action`: Custom action to take when the card is clicked, defaults to a link to the entity's `ResultEntity` route. If the card has subentites, the action will only be triggered by clicking the content above them.
+- `entity`: A possibly ranked entity, e.g. candidate or a party.
+- `variant`: The context-dependend layout variant. Usually set automatically. Default: `'list'`
+  - `'list'`: In a list of entities.
   - `'details'`: As part of the header of `EntityDetails`.
-  - `'subcard'`; In a list of nested nakedEntity cards, e.g., the candidates for a party.
-- `maxSubcards`: The maximum number of sub-entities to show. If there are more a button will be shown for displaying the remaining ones. @default `3`
-- `showElection`: Whether to show the possible nomination’s election and constituency. @default `false`
+  - `'subcard'`: In a list of nested entity cards, e.g., the candidates for a party.
+- `maxSubcards`: The maximum number of sub-entities to show. If there are more a button will be shown for displaying the remaining ones. Default: `3`
+- `showElection`: Whether to show the possible nomination's election and constituency. Default: `false`
 - Any valid attributes of an `<article>` element.
 
 ### Tracking events
diff --git a/frontend/src/lib/dynamic-components/entityCard/EntityCardAction.svelte b/frontend/src/lib/dynamic-components/entityCard/EntityCardAction.svelte
index 44f00a43f..62fed30f0 100644
--- a/frontend/src/lib/dynamic-components/entityCard/EntityCardAction.svelte
+++ b/frontend/src/lib/dynamic-components/entityCard/EntityCardAction.svelte
@@ -6,7 +6,7 @@ TODO[Svelte 5]: Maybe convert into `$snippet`.
 ### Properties
 
 - `action`: The action to take when the part or card is clicked.
-- `shadeOnHover`: Whether to shade the element on hover. Use when applying to subcards or their parent card's header. @default `false`
+- `shadeOnHover`: Whether to shade the element on hover. Use when applying to subcards or their parent card's header. Default: `false`
 - Any valid attributes common to HTML elements. Note that these will only be applied if `<EntityCardAction>` is rendered.
 
 ### Slots
diff --git a/frontend/src/lib/dynamic-components/entityDetails/EntityChildren.svelte b/frontend/src/lib/dynamic-components/entityDetails/EntityChildren.svelte
index f9d35a0b0..6a22e33f2 100644
--- a/frontend/src/lib/dynamic-components/entityDetails/EntityChildren.svelte
+++ b/frontend/src/lib/dynamic-components/entityDetails/EntityChildren.svelte
@@ -4,9 +4,10 @@ Used to show an entity's children in an `EntityDetails` component.
 
 ### Properties
 
-- `entities`: An array of possibly ranked entities, e.g. a party’s candidates.
-- `entityType`: The type of the entities being displayed. Used to pick correct translations
+- `entities`: An array of possibly ranked entities, e.g. a party's candidates.
+- `entityType`: The type of the entities being displayed. Used to pick correct translations.
 - `action`: An optional callback for building the card actions for the child possible entities. If nullish, the default action filled in by `EntityCard` will be used. If `false`, no actions will be added.
+- Any valid attributes of a `<div>` element
 
 ### Usage
 
@@ -19,12 +20,14 @@ Used to show an entity's children in an `EntityDetails` component.
   import { getComponentContext } from '$lib/contexts/component';
   import { EntityList } from '$lib/dynamic-components/entityList';
   import { EntityListControls } from '../entityList';
-  import type { EntityType } from '@openvaa/data';
-  import type { CardAction, EntityCardProps } from '../entityCard';
+  import type { EntityCardProps } from '../entityCard';
+  import type { EntityChildrenProps } from './EntityChildren.type';
 
-  export let entities: Array<MaybeWrappedEntityVariant>;
-  export let entityType: EntityType;
-  export let action: ((entity: MaybeWrappedEntityVariant) => CardAction) | false | null | undefined = undefined;
+  type $$Props = EntityChildrenProps;
+
+  export let entities: $$Props['entities'];
+  export let entityType: $$Props['entityType'];
+  export let action: $$Props['action'] = undefined;
 
   ////////////////////////////////////////////////////////////////////
   // Get contexts
diff --git a/frontend/src/lib/dynamic-components/entityDetails/EntityChildren.type.ts b/frontend/src/lib/dynamic-components/entityDetails/EntityChildren.type.ts
new file mode 100644
index 000000000..b48b291f4
--- /dev/null
+++ b/frontend/src/lib/dynamic-components/entityDetails/EntityChildren.type.ts
@@ -0,0 +1,18 @@
+import type { EntityType } from '@openvaa/data';
+import type { SvelteHTMLElements } from 'svelte/elements';
+import type { CardAction } from '../entityCard';
+
+export type EntityChildrenProps = SvelteHTMLElements['div'] & {
+  /**
+   * An array of possibly ranked entities, e.g. a party's candidates.
+   */
+  entities: Array<MaybeWrappedEntityVariant>;
+  /**
+   * The type of the entities being displayed. Used to pick correct translations.
+   */
+  entityType: EntityType;
+  /**
+   * An optional callback for building the card actions for the child possible entities. If nullish, the default action filled in by `EntityCard` will be used. If `false`, no actions will be added.
+   */
+  action?: ((entity: MaybeWrappedEntityVariant) => CardAction) | false | null;
+};
diff --git a/frontend/src/lib/dynamic-components/entityDetails/EntityInfo.svelte b/frontend/src/lib/dynamic-components/entityDetails/EntityInfo.svelte
index 3889983ed..2824a7d75 100644
--- a/frontend/src/lib/dynamic-components/entityDetails/EntityInfo.svelte
+++ b/frontend/src/lib/dynamic-components/entityDetails/EntityInfo.svelte
@@ -9,7 +9,8 @@ This is a dynamic component, because it accesses `appSettings` and `dataRoot` fr
 ### Properties
 
 - `entity`: A possibly ranked entity, e.g. candidate or a party.
-- `questions`: An array of `info` questions 
+- `questions`: An array of `info` questions.
+- Any valid attributes of a `<div>` element
 
 ### Settings
 
@@ -28,7 +29,6 @@ This is a dynamic component, because it accesses `appSettings` and `dataRoot` fr
   import {
     type AnyEntityVariant,
     type AnyNominationVariant,
-    type AnyQuestionVariant,
     ENTITY_TYPE,
     type EntityType,
     isObjectType,
@@ -42,10 +42,12 @@ This is a dynamic component, because it accesses `appSettings` and `dataRoot` fr
   import { unwrapEntity } from '$lib/utils/entities';
   import { sanitizeHtml } from '$lib/utils/sanitize';
   import InfoItem from './InfoItem.svelte';
-  import type { EntityDetailsProps } from './EntityDetails.type';
+  import type { EntityInfoProps } from './EntityInfo.type';
 
-  export let entity: EntityDetailsProps['entity'];
-  export let questions: Array<AnyQuestionVariant>;
+  type $$Props = EntityInfoProps;
+
+  export let entity: $$Props['entity'];
+  export let questions: $$Props['questions'];
 
   ////////////////////////////////////////////////////////////////////
   // Get contexts
diff --git a/frontend/src/lib/dynamic-components/entityDetails/EntityInfo.type.ts b/frontend/src/lib/dynamic-components/entityDetails/EntityInfo.type.ts
new file mode 100644
index 000000000..0527f27ca
--- /dev/null
+++ b/frontend/src/lib/dynamic-components/entityDetails/EntityInfo.type.ts
@@ -0,0 +1,14 @@
+import type { AnyQuestionVariant } from '@openvaa/data';
+import type { SvelteHTMLElements } from 'svelte/elements';
+import type { EntityDetailsProps } from './EntityDetails.type';
+
+export type EntityInfoProps = SvelteHTMLElements['div'] & {
+  /**
+   * A possibly ranked entity, e.g. candidate or a party.
+   */
+  entity: EntityDetailsProps['entity'];
+  /**
+   * An array of `info` questions.
+   */
+  questions: Array<AnyQuestionVariant>;
+};
diff --git a/frontend/src/lib/dynamic-components/entityDetails/EntityOpinions.svelte b/frontend/src/lib/dynamic-components/entityDetails/EntityOpinions.svelte
index a029d3be7..9c80eb680 100644
--- a/frontend/src/lib/dynamic-components/entityDetails/EntityOpinions.svelte
+++ b/frontend/src/lib/dynamic-components/entityDetails/EntityOpinions.svelte
@@ -6,7 +6,8 @@ Used to show an entity's answers to `opinion` questions and possibly those of th
 
 - `entity`: A possibly ranked entity, e.g. candidate or a party.
 - `questions`: An array of `opinion` questions.
-- `answers`: An optional `AnswerStore` with the Voter’s answers to the questions.
+- `answers`: An optional `AnswerStore` with the Voter's answers to the questions.
+- Any valid attributes of a `<div>` element
 
 ### Usage
 
@@ -21,13 +22,14 @@ Used to show an entity's answers to `opinion` questions and possibly those of th
   import { OpinionQuestionInput, QuestionOpenAnswer } from '$lib/components/questions';
   import { getAppContext } from '$lib/contexts/app';
   import { unwrapEntity } from '$lib/utils/entities';
-  import type { AnyEntityVariant, AnyQuestionVariant } from '@openvaa/data';
-  import type { AnswerStore } from '$lib/contexts/voter';
-  import type { EntityDetailsProps } from './EntityDetails.type';
+  import type { AnyEntityVariant } from '@openvaa/data';
+  import type { EntityOpinionsProps } from './EntityOpinions.type';
 
-  export let entity: EntityDetailsProps['entity'];
-  export let questions: Array<AnyQuestionVariant>;
-  export let answers: AnswerStore | undefined = undefined;
+  type $$Props = EntityOpinionsProps;
+
+  export let entity: $$Props['entity'];
+  export let questions: $$Props['questions'];
+  export let answers: $$Props['answers'] = undefined;
 
   ////////////////////////////////////////////////////////////////////
   // Get contexts
diff --git a/frontend/src/lib/dynamic-components/entityDetails/EntityOpinions.type.ts b/frontend/src/lib/dynamic-components/entityDetails/EntityOpinions.type.ts
new file mode 100644
index 000000000..c96327f1d
--- /dev/null
+++ b/frontend/src/lib/dynamic-components/entityDetails/EntityOpinions.type.ts
@@ -0,0 +1,19 @@
+import type { AnyQuestionVariant } from '@openvaa/data';
+import type { SvelteHTMLElements } from 'svelte/elements';
+import type { AnswerStore } from '$lib/contexts/voter';
+import type { EntityDetailsProps } from './EntityDetails.type';
+
+export type EntityOpinionsProps = SvelteHTMLElements['div'] & {
+  /**
+   * A possibly ranked entity, e.g. candidate or a party.
+   */
+  entity: EntityDetailsProps['entity'];
+  /**
+   * An array of `opinion` questions.
+   */
+  questions: Array<AnyQuestionVariant>;
+  /**
+   * An optional `AnswerStore` with the Voter's answers to the questions.
+   */
+  answers?: AnswerStore;
+};
diff --git a/frontend/src/lib/dynamic-components/entityDetails/InfoItem.svelte b/frontend/src/lib/dynamic-components/entityDetails/InfoItem.svelte
index 38b40ede7..d4797ab50 100644
--- a/frontend/src/lib/dynamic-components/entityDetails/InfoItem.svelte
+++ b/frontend/src/lib/dynamic-components/entityDetails/InfoItem.svelte
@@ -4,8 +4,9 @@ Used to show a label-content pair in a Candidate's basic information.
 
 ### Properties
 
-- `label`: the label of the information
-- `vertical`: layout mode for the item
+- `label`: The label of the information.
+- `vertical`: Layout mode for the item. Default: `false`
+- Any valid attributes of a `<div>` element
 
 ### Slots
 
@@ -21,10 +22,12 @@ Used to show a label-content pair in a Candidate's basic information.
 -->
 
 <script lang="ts">
-  /** The info label */
-  export let label: string;
-  /** The info layout mode */
-  export let vertical = false;
+  import type { InfoItemProps } from './InfoItem.type';
+
+  type $$Props = InfoItemProps;
+
+  export let label: $$Props['label'];
+  export let vertical: $$Props['vertical'] = false;
 </script>
 
 <div class="grid justify-start gap-md {vertical ? 'vertical-grid' : 'horizontal-grid'}">
diff --git a/frontend/src/lib/dynamic-components/entityDetails/InfoItem.type.ts b/frontend/src/lib/dynamic-components/entityDetails/InfoItem.type.ts
new file mode 100644
index 000000000..e3248efd0
--- /dev/null
+++ b/frontend/src/lib/dynamic-components/entityDetails/InfoItem.type.ts
@@ -0,0 +1,12 @@
+import type { SvelteHTMLElements } from 'svelte/elements';
+
+export type InfoItemProps = SvelteHTMLElements['div'] & {
+  /**
+   * The label of the information.
+   */
+  label: string;
+  /**
+   * Layout mode for the item. @default false
+   */
+  vertical?: boolean;
+};
diff --git a/frontend/src/lib/dynamic-components/entityDetails/index.ts b/frontend/src/lib/dynamic-components/entityDetails/index.ts
index 92236e8f8..54e046dc1 100644
--- a/frontend/src/lib/dynamic-components/entityDetails/index.ts
+++ b/frontend/src/lib/dynamic-components/entityDetails/index.ts
@@ -1,7 +1,12 @@
 export { default as EntityChildren } from './EntityChildren.svelte';
+export * from './EntityChildren.type';
 export { default as EntityDetails } from './EntityDetails.svelte';
 export * from './EntityDetails.type';
 export { default as EntityDetailsDrawer } from './EntityDetailsDrawer.svelte';
 export * from './EntityDetailsDrawer.type';
 export { default as EntityInfo } from './EntityInfo.svelte';
+export * from './EntityInfo.type';
 export { default as EntityOpinions } from './EntityOpinions.svelte';
+export * from './EntityOpinions.type';
+export { default as InfoItem } from './InfoItem.svelte';
+export * from './InfoItem.type';
diff --git a/frontend/src/lib/dynamic-components/entityList/EntityListControls.svelte b/frontend/src/lib/dynamic-components/entityList/EntityListControls.svelte
index a45da8189..3f09f4d2d 100644
--- a/frontend/src/lib/dynamic-components/entityList/EntityListControls.svelte
+++ b/frontend/src/lib/dynamic-components/entityList/EntityListControls.svelte
@@ -7,14 +7,11 @@ TODO: Consider moving the tracking events away from the component and just addin
 ### Properties
 
 - `entities`: A list of possibly ranked entities, e.g. candidates or a parties.
-- `filterGroup`: The filters applied to the entities
-- `searchProperty`: The property used for the search tool. Default 'name'
+- `filterGroup`: The filters applied to the contents.
+- `searchProperty`: The property used for the search tool. Default: `'name'`
+- `onUpdate`: Callback for when the filters are applied.
 - Any valid attributes of a `<div>` element.
 
-###  Callbacks
-
--  `onUpdate`: Callback for when the filters are applied.
-
 ### Tracking events
 
 - `filters_reset`
diff --git a/frontend/src/lib/dynamic-components/feedback/Feedback.svelte b/frontend/src/lib/dynamic-components/feedback/Feedback.svelte
index 3eeaad309..96c23a4f0 100644
--- a/frontend/src/lib/dynamic-components/feedback/Feedback.svelte
+++ b/frontend/src/lib/dynamic-components/feedback/Feedback.svelte
@@ -8,14 +8,16 @@ Accesses the `AppContext` and the `FeedbackWriter` api.
 
 ### Properties
 
+- `showActions`: Whether to show the standard action buttons below the feedback form. Default: `true`
+- `variant`: The layout variant of the feedback form. Default: `'default'`
 - Any valid attributes of a `<form>` element.
 
-### Bindable properties and functions
+### Bindable properties
 
-- `status`: The status of the feedback form. @default `'default'`
-- `canSubmit`: Bind to this to know whether the feedback can be submitted, i.e. the user has entered something. @default `false`
-- `reset()`: Reset the form so that if the user opens it again, they can fill new feedback. You should call this when closing any modal containing the feedback.
-- `submit()`: Submit the feedback.
+- `canSubmit`: Bind to this to know whether the feedback can be submitted, i.e. the user has entered something. Default: `false`
+- `status`: Bind to this to access the status of the feedback form. Default: `'default'`
+- `submit`: Submit the feedback or close the modal if it's already been submitted.
+- `reset`: Reset the form so that if the user opens it again, they can fill new feedback. You should call this when closing any modal containing the feedback.
 
 ### Events
 
diff --git a/frontend/src/lib/dynamic-components/logoutButton/LogoutButton.svelte b/frontend/src/lib/dynamic-components/logoutButton/LogoutButton.svelte
index 23f60d4a7..c8c274ebf 100644
--- a/frontend/src/lib/dynamic-components/logoutButton/LogoutButton.svelte
+++ b/frontend/src/lib/dynamic-components/logoutButton/LogoutButton.svelte
@@ -6,7 +6,13 @@ Allows user to log out.
 
 Accesses `AuthContext` and `AppContext`.
 
+### Properties
+
+- `redirectTo`: The route to redirect to after logging out. Default: `'Home'`
+- Any valid properties of a `<Button>` component.
+
 ### Usage
+
 ```tsx
 <LogoutButton />
 ```
diff --git a/frontend/src/lib/dynamic-components/navigation/NavGroup.svelte b/frontend/src/lib/dynamic-components/navigation/NavGroup.svelte
index b4c0b27c8..d859ad8bd 100644
--- a/frontend/src/lib/dynamic-components/navigation/NavGroup.svelte
+++ b/frontend/src/lib/dynamic-components/navigation/NavGroup.svelte
@@ -2,16 +2,14 @@
 @component
 Use to group `NavItem` components. Displays a faint line above the group.
 
-### Slots
+### Properties
 
-- default: The contents of the navigation group. Should be mostly 
-`<NavItem>` components.
+- `title`: Optional title for the navigation group.
+- Any valid attributes of a `<ul>` element.
 
-### Properties
+### Slots
 
-- `role`: Aria role @default `list`
-- `class`: Additional class string to append to the element's default classes.
-- Any valid attributes of a `<section>` element.
+- default: The contents of the navigation group. Should be mostly `<NavItem>` components.
 
 ### Usage
 
diff --git a/frontend/src/lib/dynamic-components/navigation/NavItem.svelte b/frontend/src/lib/dynamic-components/navigation/NavItem.svelte
index a15125411..af8739c14 100644
--- a/frontend/src/lib/dynamic-components/navigation/NavItem.svelte
+++ b/frontend/src/lib/dynamic-components/navigation/NavItem.svelte
@@ -10,12 +10,10 @@ Accesses `LayoutContext`.
 
 ### Properties
 
-- `href`: The URL to navigate to. If this is not supplied be sure to provide an `on:click` event handler or other way of making the item interactive.
-- `icon`: An optional `IconName` of the icon to use. @default `undefined`
-- `text`: A required text to display.
-- `autoCloseNav`: Whether the menu available from the page context should be closed when the item is clicked. @default `true`
+- `icon`: The optional name of the icon to use with the navigation item. See the `Icon` component for more details.
+- `text`: The text to display in the navigation item.
 - `disabled`: Whether the button is disabled. This can also be used with items rendered as `<a>` elements.
-- `class`: Additional class string to append to the element's default classes.
+- `autoCloseNav`: Whether the menu available from the page context should be closed when the item is clicked. Default: `true`
 - Any valid attributes of either an `<a>` or `<button>` element depending whether `href` was defined or not, respectively.
 
 ### Usage
diff --git a/frontend/src/lib/dynamic-components/navigation/Navigation.svelte b/frontend/src/lib/dynamic-components/navigation/Navigation.svelte
index cc49d6c74..74f16a6b6 100644
--- a/frontend/src/lib/dynamic-components/navigation/Navigation.svelte
+++ b/frontend/src/lib/dynamic-components/navigation/Navigation.svelte
@@ -2,16 +2,15 @@
 @component
 Create navigation menus for the application in a predefined style.
 
-### Slots
-
-- default: The content of the navigation menu. It should mainly consist
-  of `<NavGroup>` components containing `<NavItem>` components.
-
 ### Properties
 
-- `hidden`: Set to `true` to whenever the navigation is hidden. @default false
+- `hidden`: Set to `true` to whenever the navigation is hidden. Default: `false`
 - Any valid attributes of a `<nav>` element.
 
+### Slots
+
+- default: The content of the navigation menu. It should mainly consist of `<NavGroup>` components containing `<NavItem>` components.
+
 ### Events
 
 - `keyboardFocusOut`: Emitted when the component loses a keyboard user's 
diff --git a/frontend/src/lib/dynamic-components/navigation/admin/AdminNav.svelte b/frontend/src/lib/dynamic-components/navigation/admin/AdminNav.svelte
index dcd72908d..f51986600 100644
--- a/frontend/src/lib/dynamic-components/navigation/admin/AdminNav.svelte
+++ b/frontend/src/lib/dynamic-components/navigation/admin/AdminNav.svelte
@@ -25,6 +25,10 @@ A template part that outputs the navigation menu for the Admin App for use in `L
   import { getLayoutContext } from '$lib/contexts/layout';
   import { NavGroup, Navigation, NavItem } from '$lib/dynamic-components/navigation';
   import { LanguageSelection } from '../languages';
+  import type { AdminNavProps } from './AdminNav.type';
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  type $$Props = AdminNavProps;
 
   const { navigation } = getLayoutContext(onDestroy);
   const { authToken, t, getRoute } = getAdminContext();
diff --git a/frontend/src/lib/dynamic-components/navigation/admin/AdminNav.type.ts b/frontend/src/lib/dynamic-components/navigation/admin/AdminNav.type.ts
new file mode 100644
index 000000000..a51f691d5
--- /dev/null
+++ b/frontend/src/lib/dynamic-components/navigation/admin/AdminNav.type.ts
@@ -0,0 +1,3 @@
+import type { NavigationProps } from '../Navigation.type';
+
+export type AdminNavProps = NavigationProps;
diff --git a/frontend/src/lib/dynamic-components/navigation/admin/index.ts b/frontend/src/lib/dynamic-components/navigation/admin/index.ts
index fbafe1b5e..01b70f44e 100644
--- a/frontend/src/lib/dynamic-components/navigation/admin/index.ts
+++ b/frontend/src/lib/dynamic-components/navigation/admin/index.ts
@@ -1 +1,2 @@
 export { default as AdminNav } from './AdminNav.svelte';
+export * from './AdminNav.type';
diff --git a/frontend/src/lib/dynamic-components/navigation/candidate/CandidateNav.svelte b/frontend/src/lib/dynamic-components/navigation/candidate/CandidateNav.svelte
index bf6ce6e48..965045f03 100644
--- a/frontend/src/lib/dynamic-components/navigation/candidate/CandidateNav.svelte
+++ b/frontend/src/lib/dynamic-components/navigation/candidate/CandidateNav.svelte
@@ -1,11 +1,15 @@
 <!--
 @component
-A template part that outputs the navigation menu for the Candidate App for use in use in `Layout`.
+A template part that outputs the navigation menu for the Candidate App for use in `Layout`.
 
 ### Dynamic component
 
 - Accesses the `CandidateContext`.
 
+### Properties
+
+- Any valid properties of a `Navigation` component
+
 ### Usage
 
 ```tsx
@@ -22,6 +26,10 @@ A template part that outputs the navigation menu for the Candidate App for use i
   import { getLayoutContext } from '$lib/contexts/layout';
   import { NavGroup, Navigation, NavItem } from '$lib/dynamic-components/navigation';
   import { LanguageSelection } from '../languages';
+  import type { CandidateNavProps } from './CandidateNav.type';
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  type $$Props = CandidateNavProps;
 
   const { navigation } = getLayoutContext(onDestroy);
   const {
diff --git a/frontend/src/lib/dynamic-components/navigation/candidate/CandidateNav.type.ts b/frontend/src/lib/dynamic-components/navigation/candidate/CandidateNav.type.ts
new file mode 100644
index 000000000..540f9db9a
--- /dev/null
+++ b/frontend/src/lib/dynamic-components/navigation/candidate/CandidateNav.type.ts
@@ -0,0 +1,3 @@
+import type { NavigationProps } from '../Navigation.type';
+
+export type CandidateNavProps = NavigationProps;
diff --git a/frontend/src/lib/dynamic-components/navigation/candidate/index.ts b/frontend/src/lib/dynamic-components/navigation/candidate/index.ts
index 17cace842..6a623911a 100644
--- a/frontend/src/lib/dynamic-components/navigation/candidate/index.ts
+++ b/frontend/src/lib/dynamic-components/navigation/candidate/index.ts
@@ -1 +1,2 @@
 export { default as CandidateNav } from './CandidateNav.svelte';
+export * from './CandidateNav.type';
diff --git a/frontend/src/lib/dynamic-components/navigation/voter/VoterNav.svelte b/frontend/src/lib/dynamic-components/navigation/voter/VoterNav.svelte
index 6cdb23b66..c5dc05ed3 100644
--- a/frontend/src/lib/dynamic-components/navigation/voter/VoterNav.svelte
+++ b/frontend/src/lib/dynamic-components/navigation/voter/VoterNav.svelte
@@ -31,6 +31,10 @@ A template part that outputs the navigation menu for the Voter App for use in `L
   import { getVoterContext } from '$lib/contexts/voter';
   import { NavGroup, Navigation, NavItem } from '$lib/dynamic-components/navigation';
   import { LanguageSelection } from '../languages';
+  import type { VoterNavProps } from './VoterNav.type';
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  type $$Props = VoterNavProps;
 
   const { navigation } = getLayoutContext(onDestroy);
 
diff --git a/frontend/src/lib/dynamic-components/navigation/voter/VoterNav.type.ts b/frontend/src/lib/dynamic-components/navigation/voter/VoterNav.type.ts
new file mode 100644
index 000000000..96e6ad512
--- /dev/null
+++ b/frontend/src/lib/dynamic-components/navigation/voter/VoterNav.type.ts
@@ -0,0 +1,3 @@
+import type { NavigationProps } from '../Navigation.type';
+
+export type VoterNavProps = NavigationProps;
diff --git a/frontend/src/lib/dynamic-components/navigation/voter/index.ts b/frontend/src/lib/dynamic-components/navigation/voter/index.ts
index b1457f6fc..0aa55f2fd 100644
--- a/frontend/src/lib/dynamic-components/navigation/voter/index.ts
+++ b/frontend/src/lib/dynamic-components/navigation/voter/index.ts
@@ -1 +1,2 @@
 export { default as VoterNav } from './VoterNav.svelte';
+export * from './VoterNav.type';