### Development Setup and Scripts

Source: https://github.com/madsb/dkfds-vue3/blob/main/README.md

Provides commands for setting up the development environment, including installing dependencies, building the library, and running the demo site.

```bash
# Install dependencies
pnpm install

# Build the library
pnpm run build

# Run demo site
pnpm run dev
```

```bash
# Development
pnpm run dev              # Run demo site
pnpm run build            # Build library
pnpm run test             # Run tests
pnpm run typecheck        # Check TypeScript types
pnpm run lint             # Lint code
pnpm run format           # Format code
```

--------------------------------

### Bash Command Example

Source: https://github.com/madsb/dkfds-vue3/blob/main/document-vue-components.md

An example bash command for importing a Vue component from a specific package (`@madsb/dkfds-vue3`). This is typically used within the installation section of component documentation.

```bash
import { FdsComponentName } from '@madsb/dkfds-vue3'
```

--------------------------------

### Start Documentation Site

Source: https://github.com/madsb/dkfds-vue3/blob/main/AGENTS.md

Starts the documentation site development server. Allows previewing documentation changes locally.

```shell
pnpm docs:dev
```

--------------------------------

### Vue Component Documentation Structure

Source: https://github.com/madsb/dkfds-vue3/blob/main/document-vue-components.md

Defines the standard markdown structure for documenting individual Vue components. It includes frontmatter with metadata, component name, installation, quick start, detailed API references for props, events, and slots, usage examples, accessibility information, DKFDS guidelines, best practices, related components, and testing examples.

```markdown
---
title: FdsComponentName
description: [Brief description from JSDoc]
category: [forms|input|navigation|feedback|data-display|layout]
dkfds: true
accessibility: [wcag compliance level]
tags: [dkfds, vue3, component, accessibility, additional, tags]
---

# FdsComponentName

[Brief description from JSDoc or component comments]

## Installation

```bash
import { FdsComponentName } from '@madsb/dkfds-vue3'
```

## Quick Start

[Simple, working example with most common props following DKFDS patterns]

```vue
<template>
  <FdsComponentName 
    v-model="value" 
    label="Eksempel etiket"
    id="example-id"
  />
</template>

<script setup>
import { ref } from 'vue'
import { FdsComponentName } from '@madsb/dkfds-vue3'

const value = ref('')
</script>
```

## Props

| Prop       | Type         | Default                | Required     | Description                                       |
| ---------- | ------------ | ---------------------- | ------------ | ------------------------------------------------- |
| [propName] | [exact type] | [default value or '-'] | [true/false] | [JSDoc description or 'No description available'] |

## Events

| Event       | Payload                      | Description                  |
| ----------- | ---------------------------- | ---------------------------- |
| [eventName] | [payload type and structure] | [When this event is emitted] |

## Slots

| Slot       | Slot Props             | Description             |
| ---------- | ---------------------- | ----------------------- |
| [slotName] | [props passed to slot] | [What this slot is for] |

## Usage Examples

### Basic Usage

```vue
[Complete working example with common use case]
```

### With Form Validation

```vue
[Example showing form integration if applicable]
```

### Accessibility Features

```vue
[Example highlighting accessibility features and WCAG compliance]
```

## API Reference

### Props Details

[Detailed explanation of complex props if needed]

### Component Methods

[If component exposes methods via defineExpose]

### TypeScript Interfaces

```typescript
[Any relevant type definitions from the component or types/ directory]
```

## Accessibility

- **WCAG Compliance**: [Level A/AA/AAA features]
- **Keyboard Navigation**: [Supported keyboard interactions]
- **Screen Reader**: [ARIA labels and descriptions provided]
- **Focus Management**: [How focus is handled]

## DKFDS Guidelines

- [Specific DKFDS design system requirements]
- [Usage in government self-service solutions]
- [Theme compatibility (VirkDK/BorgerDK)]

## Best Practices

- Always provide meaningful `id` attributes for form elements
- Use Danish labels and text for government solutions
- Consider mobile-first responsive design
- Follow DKFDS accessibility standards

## Related Components

- [List of related components in the library by category]

## Testing

```typescript
// Example test usage from __tests__ directory
import { mount } from '@vue/test-utils'
import FdsComponentName from '../FdsComponentName.vue'

const wrapper = mount(FdsComponentName, {
  props: { /* example props */ }
})
```
```

--------------------------------

### ESLint Configuration Example

Source: https://github.com/madsb/dkfds-vue3/blob/main/AGENTS.md

An example of an ESLint configuration file (`eslint.config.cjs`) used to define and adjust linting rules for the project.

```javascript
module.exports = {
  // ... other configurations
  rules: {
    'vue/html-indent': ['error', 2],
    '@typescript-eslint/explicit-function-return-type': 'warn',
  },
  // ... overrides and settings
};
```

--------------------------------

### Install Dependencies with pnpm

Source: https://github.com/madsb/dkfds-vue3/blob/main/AGENTS.md

Installs all project dependencies using the pnpm package manager. This is a foundational step for development.

```shell
pnpm install
```

--------------------------------

### Vue Test Example

Source: https://github.com/madsb/dkfds-vue3/blob/main/document-vue-components.md

An example of how to mount and test a Vue component using `@vue/test-utils`. It demonstrates importing the component and providing example props for testing purposes, commonly found in a component's `__tests__` directory.

```typescript
// Example test usage from __tests__ directory
import { mount } from '@vue/test-utils'
import FdsComponentName from '../FdsComponentName.vue'

const wrapper = mount(FdsComponentName, {
  props: { /* example props */ }
})
```

--------------------------------

### Prepare Package Script Example

Source: https://github.com/madsb/dkfds-vue3/blob/main/AGENTS.md

Shell script used for preparing the package for publishing, potentially including build steps or configuration adjustments.

```shell
#!/bin/bash

# Exit immediately if a command exits with a non-zero status.
set -e

echo "Preparing package for publishing..."

# Example: Run build script if not already done
# pnpm build

# Example: Copy necessary files
# cp README.md dist/

echo "Package preparation complete."
```

--------------------------------

### Install DKFDS Vue 3 Library

Source: https://github.com/madsb/dkfds-vue3/blob/main/README.md

Installs the @madsb/dkfds-vue3 package along with the core dkfds package using either npm or pnpm.

```bash
npm install @madsb/dkfds-vue3 dkfds
# or
pnpm add @madsb/dkfds-vue3 dkfds
```

--------------------------------

### FdsFunktionslink Usage Examples (Vue)

Source: https://github.com/madsb/dkfds-vue3/blob/main/documentation/src/stories/layout/Funktionslink.story.md

Demonstrates various ways to use the FdsFunktionslink component, including basic links, buttons with icons, and external links with security attributes. It shows how to import and use the component within a Vue 3 setup script.

```Vue
<template>
  <!-- Basic link -->
  <FdsFunktionslink href="/help"> Get Help </FdsFunktionslink>

  <!-- Button with icon -->
  <FdsFunktionslink type="button" icon="download" @click="downloadFile">
    Download
  </FdsFunktionslink>

  <!-- External link with security -->
  <FdsFunktionslink
    href="https://external-site.com"
    target="_blank"
    rel="noopener noreferrer"
    icon="open-in-new"
    icon-right
  >
    External Resource
  </FdsFunktionslink>
</template>

<script setup>
import { FdsFunktionslink } from '@madsb/dkfds-vue3'

const downloadFile = () => {
  // Handle download action
}
</script>
```

--------------------------------

### FdsTooltip Usage Example (Vue)

Source: https://github.com/madsb/dkfds-vue3/blob/main/documentation/src/stories/feedback/Tooltip.story.md

Demonstrates how to import and use the FdsTooltip component in a Vue 3 application. It shows basic setup with content, trigger, and position props.

```vue
<template>
  <FdsTooltip
    content="This field is required for processing your application"
    trigger="click"
    position="above"
  />
</template>

<script setup>
import { FdsTooltip } from '@madsb/dkfds-vue3'
</script>
```

--------------------------------

### Vitest Unit Test Example

Source: https://github.com/madsb/dkfds-vue3/blob/main/AGENTS.md

Example of a unit test file using Vitest and Testing Library. Tests are typically placed alongside their components in `src/__tests__/components`.

```typescript
import { render } from '@testing-library/vue';
import FdsInput from '@/components/forms/fds-input.vue';

describe('FdsInput', () => {
  it('renders with a label', () => {
    const label = 'Username';
    const { getByLabelText } = render(FdsInput, {
      props: { modelValue: '', label: label },
    });
    expect(getByLabelText(label)).toBeInTheDocument();
  });
});
```

--------------------------------

### SCSS Stylesheet Example

Source: https://github.com/madsb/dkfds-vue3/blob/main/AGENTS.md

Example of SCSS styling, showing how styles extend DKFDS SCSS. Stylesheets are typically located in `src/assets` or `src/styles`.

```scss
@import "src/styles/variables.scss";

.my-component {
  background-color: $primary-color;
  padding: $spacing-medium;
}
```

--------------------------------

### Run Local Development Sandbox

Source: https://github.com/madsb/dkfds-vue3/blob/main/AGENTS.md

Starts the Vite development server to locally run and test components. It's useful for quick smoke testing during development.

```shell
pnpm dev
```

--------------------------------

### Install DKFDS Vue 3 Package

Source: https://github.com/madsb/dkfds-vue3/blob/main/documentation/src/stories/Introduction.story.md

Installs the necessary package for the DKFDS Vue 3 component library using pnpm.

```bash
pnpm add @madsb/dkfds-vue3
```

--------------------------------

### Run Local Development Server

Source: https://github.com/madsb/dkfds-vue3/blob/main/documentation/src/stories/Introduction.story.md

Commands to install dependencies and run local development servers for the DKFDS Vue 3 project, including the demo sandbox and documentation site.

```bash
pnpm install
pnpm dev    # opens the demo sandbox
pnpm docs:dev  # starts the documentation site with these stories
```

--------------------------------

### Vue Component Example

Source: https://github.com/madsb/dkfds-vue3/blob/main/document-vue-components.md

A basic Vue 3 component example demonstrating the usage of a custom component (`FdsComponentName`) with `v-model`, a `label`, and an `id` attribute. This snippet showcases a typical setup for integrating components within a Vue application.

```vue
<template>
  <FdsComponentName 
    v-model="value" 
    label="Eksempel etiket"
    id="example-id"
  />
</template>

<script setup>
import { ref } from 'vue'
import { FdsComponentName } from '@madsb/dkfds-vue3'

const value = ref('')
</script>
```

--------------------------------

### Conventional Commits Example

Source: https://github.com/madsb/dkfds-vue3/blob/main/AGENTS.md

Example of a commit message following the Conventional Commits specification. This ensures a standardized commit history.

```gitcommit
feat(button): add loading state

Implements a loading state for the FdsButton component, indicated by a spinner.

- Added a new `loading` prop to FdsButton.
- Integrated a spinner icon when `loading` is true.
- Updated unit tests to cover the new state.

Closes #123
```

--------------------------------

### Utility Function Example

Source: https://github.com/madsb/dkfds-vue3/blob/main/AGENTS.md

Example of a utility function following camelCase naming conventions. These functions are typically found in `src/utils`.

```typescript
export function formatCurrency(amount: number, currency: string = 'DKK'): string {
  return `${amount.toFixed(2)} ${currency}`;
}
```

--------------------------------

### Run Development and Demo Site (pnpm)

Source: https://github.com/madsb/dkfds-vue3/blob/main/CLAUDE.md

Commands to start the development server for the DKFDS Vue 3 component library and to run the demo site. This allows for real-time development and viewing of components.

```bash
pnpm run dev
```

--------------------------------

### Install Dependencies and Build Library (pnpm)

Source: https://github.com/madsb/dkfds-vue3/blob/main/CLAUDE.md

Commands to install project dependencies using pnpm and to build the Vue 3 component library for production. These are essential steps for development and deployment.

```bash
pnpm install
pnpm run build
```

--------------------------------

### Vue 3 Component File Example

Source: https://github.com/madsb/dkfds-vue3/blob/main/AGENTS.md

Example of a Vue 3 Single File Component (SFC) using TypeScript. Components follow kebab-case naming and use the `Fds` PascalCase prefix for exports.

```vue
<script setup lang="ts">
import { ref } from 'vue';

const count = ref(0);
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  padding: 10px;
}
</style>
```

--------------------------------

### Usage Example for FdsDatoFelter Component

Source: https://github.com/madsb/dkfds-vue3/blob/main/documentation/src/stories/input/DatoFelter.story.md

This snippet demonstrates how to use the FdsDatoFelter component within a Vue.js application. It shows the template setup with `v-model` binding and event handling for validation and dirty state changes. The script section imports the component and sets up reactive variables and handler functions.

```vue
<template>
  <FdsDatoFelter v-model="birthDate" @valid="handleValidation" @dirty="markFieldDirty" />
</template>

<script setup>
import { ref } from 'vue'
import { FdsDatoFelter } from '@madsb/dkfds-vue3'

const birthDate = ref('1990-06-15')

const handleValidation = (isValid) => {
  console.log('Date is valid:', isValid)
}

const markFieldDirty = (isDirty) => {
  console.log('Field is dirty:', isDirty)
}
</script>
```

--------------------------------

### Format Code with Prettier

Source: https://github.com/madsb/dkfds-vue3/blob/main/AGENTS.md

Applies Prettier formatting rules across the project's source files, examples, and documentation to maintain consistent code style.

```shell
pnpm format
```

--------------------------------

### Vue Toast Component Usage and Composable Example

Source: https://github.com/madsb/dkfds-vue3/blob/main/documentation/src/stories/feedback/Toast.story.md

Demonstrates how to use the FdsToast and FdsToastContainer components in a Vue template, and how to utilize the useToast composable for programmatic toast notifications. It shows setup for displaying a success toast manually and via a button click.

```vue
<template>
  <FdsToastContainer>
    <FdsToast
      type="success"
      heading="Success!"
      message="Your data has been saved successfully."
      :visible="showToast"
      @close="showToast = false"
    />
  </FdsToastContainer>

  <!-- Or use the useToast composable -->
  <button @click="showSuccessToast">Show Toast</button>
</template>

<script setup>
import { ref } from 'vue'
import { FdsToast, FdsToastContainer, useToast } from '@madsb/dkfds-vue3'

const showToast = ref(false)
const { showSuccess } = useToast()

const showSuccessToast = () => {
  showSuccess('Operation completed successfully!', {
    heading: 'Success',
    autoDismiss: 3000,
  })
}
</script>
```

--------------------------------

### Vue 3 Composable Function Example

Source: https://github.com/madsb/dkfds-vue3/blob/main/AGENTS.md

Example of a composable function following the `useX` pattern. These are typically placed in `src/composables`.

```typescript
import { ref, computed } from 'vue';

export function useCounter(initialValue: number = 0) {
  const count = ref(initialValue);
  const doubleCount = computed(() => count.value * 2);

  function increment() {
    count.value++;
  }

  return { count, doubleCount, increment };
}
```

--------------------------------

### FdsDetaljer FAQ Section Example

Source: https://github.com/madsb/dkfds-vue3/blob/main/documentation/src/stories/data-display/Detaljer.story.md

Illustrates using the FdsDetaljer component to create a frequently asked questions (FAQ) section. Each question serves as a header for collapsible answer content.

```vue
<FdsDetaljer header="How do I create an account?">
  To create an account, click the "Sign Up" button...
</FdsDetaljer>

<FdsDetaljer header="What payment methods do you accept?">
  We accept credit cards, PayPal, and bank transfers...
</FdsDetaljer>
```

--------------------------------

### Usage Example for FdsNavLink

Source: https://github.com/madsb/dkfds-vue3/blob/main/documentation/src/stories/navigation/NavLink.story.md

Demonstrates how to implement the FdsNavLink component in a Vue.js application. It shows how to pass props like 'href', 'current', 'icon', and 'hint', and how to handle the 'click' event for custom navigation logic.

```vue
<template>
  <FdsNavLink
    href="/dashboard"
    :current="$route.path === '/dashboard'"
    icon="dashboard"
    hint="Main overview page"
    @click="handleNavigation"
  >
    Dashboard
  </FdsNavLink>
</template>

<script setup>
import { FdsNavLink } from '@madsb/dkfds-vue3'

const handleNavigation = (event) => {
  // Handle navigation in SPA
  console.log('Navigating to dashboard')
}
</script>
```

--------------------------------

### Image Gallery Example using FdsFileUpload

Source: https://github.com/madsb/dkfds-vue3/blob/main/documentation/src/stories/input/FileUpload.story.md

Shows how to configure FdsFileUpload for an image gallery. It accepts any image format, allows multiple selections, limits the number of files to 5, and includes a hint for the user.

```vue
<FdsFileUpload
  label="Upload Images"
  :accept="['image/*']"
  :multiple="true"
  :max-files="5"
  hint="Select up to 5 images in any format"
/>
```

--------------------------------

### FdsTilbageLink Usage Example (Vue)

Source: https://github.com/madsb/dkfds-vue3/blob/main/documentation/src/stories/navigation/TilbageLink.story.md

Demonstrates how to use the FdsTilbageLink component in a Vue template, including importing the component and handling the click event for custom navigation logic.

```vue
<template>
  <FdsTilbageLink @click="goBack"> Tilbage til oversigt </FdsTilbageLink>
</template>

<script setup>
import { FdsTilbageLink } from '@madsb/dkfds-vue3'

const goBack = () => {
  // Custom back navigation logic
  // router.go(-1) or history.back()
}
</script>
```

--------------------------------

### FdsBreadcrumb Component API

Source: https://github.com/madsb/dkfds-vue3/blob/main/documentation/src/stories/navigation/Breadcrumb.story.md

Documentation for the FdsBreadcrumb component, including its props, events, and usage examples.

```APIDOC
## FdsBreadcrumb Component

Breadcrumb navigation component that provides hierarchical navigation with support for Vue Router integration, automatic current page detection, and full accessibility features. Follows DKFDS v11 breadcrumb design patterns.

### Usage

```vue
<template>
  <FdsBreadcrumb :items="breadcrumbItems" @item-click="handleBreadcrumbClick" />
</template>

<script setup>
import { FdsBreadcrumb } from '@madsb/dkfds-vue3'
import type { BreadcrumbItem } from '@madsb/dkfds-vue3'

const breadcrumbItems: BreadcrumbItem[] = [
  { text: 'Forside', href: '/' },
  { text: 'Komponenter', href: '/komponenter' },
  { text: 'Aktuel side' }, // Current page (no href)
]

const handleBreadcrumbClick = (event, item, index) => {
  console.log('Breadcrumb clicked:', item)
}
</script>
```

### Props

| Prop             | Type               | Default        | Description                                                 |
| ---------------- | ------------------ | -------------- | ----------------------------------------------------------- |
| `items`          | `BreadcrumbItem[]` | **required**   | Array of breadcrumb items representing navigation hierarchy |
| `ariaLabel`      | `string`           | `'Brødkrumme'` | ARIA label for the navigation element                       |
| `container`      | `boolean`          | `false`        | Add container class for standard DKFDS layout               |
| `useNativeLinks` | `boolean`          | `false`        | Force use of anchor tags even when Vue Router is available  |

### BreadcrumbItem Interface

```typescript
interface BreadcrumbItem {
  text: string // Display text for the breadcrumb
  href?: string // URL for standard navigation
  to?: string | Record<string, any> // Vue Router location object
  external?: boolean // Force external link behavior
  data?: any // Custom data for event handlers
}
```

### Events

| Event        | Payload                                                    | Description                               |
| ------------ | ---------------------------------------------------------- | ----------------------------------------- |
| `item-click` | `(event: MouseEvent, item: BreadcrumbItem, index: number)` | Emitted when a breadcrumb link is clicked |

### Navigation Behavior

- **Automatic Link Detection**: Items with `href` use standard anchor tags. Items with `to` use Vue Router links (when available). Items marked `external: true` always use anchor tags with `target="_blank"`. The last item is treated as the current page and rendered without a link.
- **Vue Router Integration**: Automatically detects Vue Router availability. Uses `<router-link>` for items with `to` property. Falls back to standard anchors when the router is unavailable. Respects `useNativeLinks` prop to force anchor tag usage.

### Accessibility

- **Semantic Structure**: Uses semantic `<nav>` element with a descriptive aria-label, implements proper ordered list `<ol>` hierarchy, marks the current page with `aria-current="page"`, and hides decorative separator icons from screen readers.
- **Keyboard Navigation**: Full keyboard support with Tab navigation. Links activate with Enter or Space keys. Focus indicators follow DKFDS accessibility standards. Screen readers announce navigation context and hierarchy.
- **ARIA Support**: Configurable aria-label (defaults to Danish "Brødkrumme"), proper landmark navigation structure, and current page identification for assistive technology.

### Design Guidelines

- **When to Use**: Recommended for multi-level site hierarchies (3+ levels), complex application navigation flows, when users need to understand their current location, e-commerce category navigation, and document or content hierarchies.
- **When NOT to Use**: Not recommended for single-level pages or simple sites, mobile-first designs where space is critical, linear processes where back navigation is handled differently, or when the hierarchy doesn't match user mental models.
- **Best Practices**: Keep breadcrumb text concise but descriptive. Ensure breadcrumb hierarchy matches site structure. Place consistently at the top of page content. Do not duplicate the current page in main navigation. Limit to essential levels (avoid overly deep hierarchies).
- **Content Guidelines**: Use clear, descriptive labels that match page titles. Maintain consistency with main navigation terminology. Consider abbreviation for very long category names. Ensure labels work in both desktop and mobile contexts.

### Mobile Behavior

Breadcrumbs wrap naturally on small screens. Text remains readable at a minimum of 14px size. Touch targets meet accessibility requirements. Long paths may require horizontal scrolling.

### Themes

The breadcrumb component automatically adapts to the selected theme: Default (standard DKFDS styling with blue links), VirkDK (business-oriented styling for Virk.dk context), and BorgerDK (citizen-oriented styling for Borger.dk context). All themes maintain proper contrast ratios and accessibility standards.
```

--------------------------------

### Import Vue Components and Composables

Source: https://github.com/madsb/dkfds-vue3/blob/main/CLAUDE.md

Example TypeScript import statements for accessing components, composables, and types from the DKFDS Vue 3 component library package.

```typescript
// Import from component categories
import { FdsButton } from '@madsb/dkfds-vue3' // From layout
import { FdsInput } from '@madsb/dkfds-vue3' // From input
import { FdsAlert } from '@madsb/dkfds-vue3' // From feedback

// Import composables
import { useToast, formId } from '@madsb/dkfds-vue3'

// Import types
import type { FdsLanguageItem } from '@madsb/dkfds-vue3'
```

--------------------------------

### Document Single Vue Component

Source: https://github.com/madsb/dkfds-vue3/blob/main/document-vue-components.md

Generates documentation for a single Vue component. It reads the .vue file, parses script setup for props and emits, imports types, extracts inline interfaces and JSDoc, analyzes the template for slots, events, and accessibility attributes, and saves the output to a specific markdown file.

```bash
pnpm document-vue-components src/components/forms/fds-input.vue
```

--------------------------------

### Vue Usage Example with Event Handling

Source: https://github.com/madsb/dkfds-vue3/blob/main/documentation/src/stories/layout/Sprogvaelger.story.md

Demonstrates how to use the FdsSprogvaelger component in a Vue.js template, including setting up language data and handling language change events.

```vue
<template>
  <FdsSprogvaelger v-model="languages" @language-change="handleLanguageChange" />
</template>

<script setup>
import { ref } from 'vue'
import { FdsSprogvaelger } from '@madsb/dkfds-vue3'

const languages = ref([
  { title: 'Dansk', active: true, lang: 'da', ariaLabel: 'Valgt sprog: Dansk' },
  { title: 'English', active: false, lang: 'en', ariaLabel: 'Select language: English' },
  { title: 'Deutsch', active: false, lang: 'de', ariaLabel: 'Wähle Sprache: Deutsch' },
])

const handleLanguageChange = (language) => {
  console.log('Language changed to:', language.lang)
}
</script>
```

--------------------------------

### Document Upload Example using FdsFileUpload

Source: https://github.com/madsb/dkfds-vue3/blob/main/documentation/src/stories/input/FileUpload.story.md

Demonstrates how to use the FdsFileUpload component to allow users to upload multiple PDF or Word documents. It specifies the accepted file types, enables multiple file selection, sets a maximum file size limit, and provides a descriptive hint.

```vue
<FdsFileUpload
  label="Upload Supporting Documents"
  :accept="['.pdf', '.doc', '.docx']"
  :multiple="true"
  :max-file-size="10485760"
  hint="Upload PDF or Word documents (max 10MB each)"
/>
```

--------------------------------

### Vue Alert Messages using DKFDS Components

Source: https://github.com/madsb/dkfds-vue3/blob/main/COMPONENT_INDEX.md

Provides examples of displaying alert messages with different variants (success, error) and options like `closeable` and `show-icon` using the `FdsAlert` component.

```Vue
<FdsAlert variant="success" closeable>
  Your changes have been saved successfully.
</FdsAlert>

<FdsAlert variant="error" header="Error" show-icon>
  Please correct the errors below before continuing.
</FdsAlert>
```

--------------------------------

### FdsPre Component Usage Example

Source: https://github.com/madsb/dkfds-vue3/blob/main/documentation/src/stories/data-display/Pre.story.md

Demonstrates how to use the FdsPre component with different content types: a code string, a JSON object, and slot content. It also shows the import statement for the component.

```vue
<template>
  <!-- Code string -->
  <FdsPre header="JavaScript Example" code="const hello = 'world';" />

  <!-- JSON object -->
  <FdsPre header="API Response" :json="{ status: 'success', data: userInfo }" />

  <!-- Slot content -->
  <FdsPre header="Configuration">
    server: host: localhost port: 3000
  </FdsPre>
</template>

<script setup>
import { FdsPre } from '@madsb/dkfds-vue3'

const userInfo = { id: 1, name: 'Anders' }
</script>
```

--------------------------------

### Vue Usage Example: FdsModal

Source: https://github.com/madsb/dkfds-vue3/blob/main/documentation/src/stories/feedback/Modal.story.md

Demonstrates how to use the FdsModal component within a Vue 3 application. It shows how to import and register the component, trigger its visibility using a button, and handle user interactions via custom events.

```vue
<template>
  <FdsButton @click="openModal">Open Modal</FdsButton>

  <FdsModal
    ref="modalRef"
    header="Confirm Action"
    accept-text="Confirm"
    cancel-text="Cancel"
    @accept="handleConfirm"
    @cancel="handleCancel"
  >
    Are you sure you want to proceed with this action?
  </FdsModal>
</template>

<script setup>
import { ref } from 'vue'
import { FdsModal, FdsButton } from '@madsb/dkfds-vue3'

const modalRef = ref(null)

const openModal = () => {
  modalRef.value.showModal()
}

const handleConfirm = () => {
  console.log('User confirmed')
}

const handleCancel = () => {
  console.log('User cancelled')
}
</script>
```

--------------------------------

### Run Tests (PNPM)

Source: https://github.com/madsb/dkfds-vue3/blob/main/README.md

Commands to execute tests within the project using PNPM. Includes options for running tests once, with coverage, or with a UI.

```bash
pnpm run test:run         # Run tests once
pnpm run test:coverage    # Run tests with coverage
pnpm run test:ui          # Run tests with UI
```

--------------------------------

### Documentation Commands (pnpm)

Source: https://github.com/madsb/dkfds-vue3/blob/main/CLAUDE.md

Commands to manage the VitePress documentation site for the DKFDS Vue 3 component library. Includes running the site in development, building for production, and previewing the built documentation.

```bash
pnpm docs:dev
pnpm docs:build
pnpm docs:preview
```

--------------------------------

### Publishing Preparation (pnpm)

Source: https://github.com/madsb/dkfds-vue3/blob/main/CLAUDE.md

Steps required before publishing the DKFDS Vue 3 component library. This includes building the library and documentation, running all quality checks, and confirming the output directories.

```bash
# Build the library
pnpm run build

# Build documentation
pnpm docs:build

# Run all quality checks
pnpm run lint
pnpm run typecheck
pnpm test:run

# The built files will be in dist/
# The built documentation will be in docs-site/docs/.vitepress/dist/
# Ready for npm publish and documentation deployment
```

--------------------------------

### Run All Tests (CI)

Source: https://github.com/madsb/dkfds-vue3/blob/main/AGENTS.md

Runs all tests, including coverage and accessibility checks, ensuring the codebase meets quality standards for CI pipelines.

```shell
pnpm test:run
```

--------------------------------

### Run Unit Tests

Source: https://github.com/madsb/dkfds-vue3/blob/main/AGENTS.md

Executes all unit tests using Vitest. This command is used during development to verify component behavior.

```shell
pnpm test
```

--------------------------------

### Format and Lint Project Files

Source: https://github.com/madsb/dkfds-vue3/blob/main/CLAUDE.md

Runs the formatting and linting commands to ensure code quality and consistency across the project. It's recommended to run these after major edits.

```shell
pnpm run format && pnpm run lint:fix
```

--------------------------------

### Document All Components with Progress

Source: https://github.com/madsb/dkfds-vue3/blob/main/document-vue-components.md

Processes all components in the `/src/components/` directory and its subdirectories. This command includes verbose output to track the progress of documenting components across different categories.

```bash
pnpm document-vue-components src/components/ --verbose
```

--------------------------------

### Lint Code with ESLint

Source: https://github.com/madsb/dkfds-vue3/blob/main/AGENTS.md

Applies linting rules to the codebase to ensure code quality and consistency. Should be run before commits.

```shell
pnpm lint
```

--------------------------------

### FdsDetaljer Usage Example

Source: https://github.com/madsb/dkfds-vue3/blob/main/documentation/src/stories/data-display/Detaljer.story.md

Demonstrates how to import and use the FdsDetaljer component in a Vue.js application. It shows how to pass a header prop and provide default slot content.

```vue
<template>
  <FdsDetaljer header="More Information">
    This content is hidden by default and can be expanded by the user.
  </FdsDetaljer>
</template>

<script setup>
import { FdsDetaljer } from '@madsb/dkfds-vue3'
</script>
```

--------------------------------

### FdsToggleSwitch in Form Group

Source: https://github.com/madsb/dkfds-vue3/blob/main/documentation/src/stories/input/ToggleSwitch.story.md

Provides an example of integrating the FdsToggleSwitch within a form structure using FdsFormgroup, FdsLabel, and FdsHint components for enhanced context and accessibility.

```vue
<FdsFormgroup>
  <template #default="{ formid, ariaDescribedby }" >
    <FdsLabel :for-id="formid">Email Notifications</FdsLabel>
    <FdsHint>Receive updates about your account</FdsHint>
    <FdsToggleSwitch 
      :id="formid" 
      v-model="emailNotifications" 
    />
  </template>
</FdsFormgroup>
```

--------------------------------

### Import DKFDS Vue 3 Composables and Utilities

Source: https://github.com/madsb/dkfds-vue3/blob/main/README.md

Shows how to import and use composables like `useToast` and utilities like `generateId` from the @madsb/dkfds-vue3 library.

```typescript
// Import composables and utilities
import { useToast, formId } from '@madsb/dkfds-vue3/composables'
import { generateId, navigation } from '@madsb/dkfds-vue3/utils'
```

--------------------------------

### Testing Commands (PNPM & Shell)

Source: https://github.com/madsb/dkfds-vue3/blob/main/README.md

A collection of commands for running tests and type checking in the dkfds-vue3 project. This includes standard test execution, coverage reporting, and strict type checking.

```bash
# Run tests
pnpm test

# Run tests with coverage
pnpm test:coverage

# Type checking
pnpm typecheck

# Check with strict mode (shows potential improvements)
./typecheck-strict.sh
```

--------------------------------

### FdsDetaljer Custom Header Content Example

Source: https://github.com/madsb/dkfds-vue3/blob/main/documentation/src/stories/data-display/Detaljer.story.md

Demonstrates how to use the header slot in FdsDetaljer to provide custom, rich content for the summary, overriding the default header prop.

```vue
<FdsDetaljer>
  <template #header>
    <strong>Important Notice</strong>
    <span>(Please read)</span>
  </template>
  Important information content...
</FdsDetaljer>
```

--------------------------------

### Build Library and Generate Declarations

Source: https://github.com/madsb/dkfds-vue3/blob/main/AGENTS.md

Executes the library build process and generates TypeScript declaration files. This command is used for production builds.

```shell
pnpm build
```

--------------------------------

### FdsInput with Character Limit Integration

Source: https://github.com/madsb/dkfds-vue3/blob/main/documentation/src/stories/input/Input.story.md

Illustrates how to implement character limits for the FdsInput component by combining it with the FdsInputLimit component. This setup allows for visual feedback on character count and validation.

```vue
<template>
  <FdsInput v-model="text" maxlength="100" />
  <FdsInputLimit v-model="text" :limit="100" />
</template>
```

--------------------------------

### Run Tests (pnpm)

Source: https://github.com/madsb/dkfds-vue3/blob/main/CLAUDE.md

Commands for executing tests in the DKFDS Vue 3 component library. Supports running all tests, running once, running with coverage, running with a UI, and running specific test files or patterns.

```bash
pnpm test
pnpm test:run
pnpm test:coverage
pnpm test:ui
pnpm test src/__tests__/components/fds-button.test.ts
pnpm test button
```

--------------------------------

### FdsIkon in Buttons and for Error Messages

Source: https://github.com/madsb/dkfds-vue3/blob/main/documentation/src/stories/layout/Ikon.story.md

Shows practical examples of using FdsIkon within a FdsButton for a 'Save' action and displaying a meaningful 'error' icon with an accessible label for form validation feedback.

```vue
<!-- Decorative: Icon adds visual interest but doesn't convey meaning -->
<FdsButton>
  <FdsIkon icon="save" :decorative="true" />
  Save Document
</FdsButton>

<!-- Meaningful: Icon conveys important information -->
<FdsIkon icon="error" :decorative="false" aria-label="Error: Form validation failed" />
```

--------------------------------

### FdsCheckbox Usage Example (Vue)

Source: https://github.com/madsb/dkfds-vue3/blob/main/documentation/src/stories/input/Checkbox.story.md

Demonstrates various ways to use the FdsCheckbox component, including single boolean models, array models for groups, and conditional content using slots.

```vue
<template>
  <!-- Single checkbox (boolean model) -->
  <FdsCheckbox v-model="acceptTerms"> I accept the terms and conditions </FdsCheckbox>

  <!-- Checkbox group (array model) -->
  <FdsCheckbox v-model="interests" value="sports">Sports</FdsCheckbox>
  <FdsCheckbox v-model="interests" value="music">Music</FdsCheckbox>
  <FdsCheckbox v-model="interests" value="travel">Travel</FdsCheckbox>

  <!-- Checkbox with conditional content -->
  <FdsCheckbox v-model="hasAllergies">
    I have allergies
    <template #content>
      <FdsLabel>Please specify:</FdsLabel>
      <FdsTextarea v-model="allergyDetails" />
    </template>
  </FdsCheckbox>
</template>

<script setup>
import { ref } from 'vue'
import { FdsCheckbox } from '@madsb/dkfds-vue3'

const acceptTerms = ref(false)
const interests = ref([])
const hasAllergies = ref(false)
const allergyDetails = ref('')
</script>
```

--------------------------------

### Import DKFDS SCSS Styles (Default Theme)

Source: https://github.com/madsb/dkfds-vue3/blob/main/README.md

Imports DKFDS base styles with the default theme and the @madsb/dkfds-vue3 component styles using SCSS module system.

```scss
// main.scss
// 1. Import DKFDS base styles with default theme
@use '../../node_modules/dkfds/src/stylesheets/dkfds' as dkfds with (
  $font-path: '../../node_modules/dkfds/src/fonts/IBMPlexSans/',
  $image-path: '../../node_modules/dkfds/src/img/',
  $icons-folder-path: '../../node_modules/dkfds/src/img/svg-icons/'
);

// 2. Import Vue3 components - one simple import!
@use '@madsb/dkfds-vue3/styles';
```

--------------------------------

### Document Vue Components in a Directory

Source: https://github.com/madsb/dkfds-vue3/blob/main/document-vue-components.md

Processes all `fds-*.vue` and `xfds-*.vue` files within a specified directory. For each file, it follows the single component documentation process. It also creates an index file for the category and reports progress if the verbose flag is used.

```bash
pnpm document-vue-components src/components/input/
```

--------------------------------

### Accessibility Test with vitest-axe

Source: https://github.com/madsb/dkfds-vue3/blob/main/AGENTS.md

Demonstrates integrating `vitest-axe` for automated accessibility testing within Vitest. This helps ensure components meet accessibility standards.

```typescript
import { render } from '@testing-library/vue';
import FdsButton from '@/components/buttons/fds-button.vue';
import {
  toHaveNoViolations,
} from 'vitest-axe';

expect.extend({
  toHaveNoViolations,
});

describe('FdsButton accessibility', () => {
  it('should have no accessibility violations', async () => {
    const { container } = render(FdsButton, {
      props: { label: 'Click Me' },
    });
    await expect(container).toHaveNoViolations();
  });
});
```

--------------------------------

### Vue 3 Accordion Usage Examples

Source: https://github.com/madsb/dkfds-vue3/blob/main/documentation/src/stories/data-display/Accordion.story.md

Demonstrates the basic and controlled usage of the FdsAccordion component, as well as its integration within an FdsAccordionGroup for coordinated behavior. Includes necessary imports and event handling.

```vue
<template>
  <!-- Basic accordion -->
  <FdsAccordion header="Section Title"> Content that can be expanded or collapsed </FdsAccordion>

  <!-- Controlled accordion with v-model -->
  <FdsAccordion
    v-model="isExpanded"
    header="Controlled Section"
    @fds.accordion.open="handleOpen"
    @fds.accordion.close="handleClose"
  >
    Controlled content visibility
  </FdsAccordion>

  <!-- Accordion group for coordinated behavior -->
  <FdsAccordionGroup>
    <FdsAccordion header="Section 1">Content 1</FdsAccordion>
    <FdsAccordion header="Section 2">Content 2</FdsAccordion>
    <FdsAccordion header="Section 3">Content 3</FdsAccordion>
  </FdsAccordionGroup>
</template>

<script setup>
import { ref } from 'vue'
import { FdsAccordion, FdsAccordionGroup } from '@madsb/dkfds-vue3'

const isExpanded = ref(false)

const handleOpen = () => {
  console.log('Accordion opened')
}

const handleClose = () => {
  console.log('Accordion closed')
}
</script>
```

--------------------------------

### Run Test Coverage

Source: https://github.com/madsb/dkfds-vue3/blob/main/AGENTS.md

Generates a test coverage report, indicating which parts of the codebase are exercised by the tests. Crucial for CI gates.

```shell
pnpm test:coverage
```

--------------------------------

### Import DKFDS Vue 3 Components, Types, and Composables

Source: https://github.com/madsb/dkfds-vue3/blob/main/COMPONENT_INDEX.md

Demonstrates how to import various elements from the '@madsb/dkfds-vue3' library, including components, type definitions, and composable functions.

```TypeScript
import { FdsButton, FdsInput, FdsAlert } from '@madsb/dkfds-vue3'

import type { FdsButtonProps, FdsInputProps } from '@madsb/dkfds-vue3'

import { useToast, formId, generateId } from '@madsb/dkfds-vue3'
```

--------------------------------

### FdsInput Integrated with FdsFormgroup for Validation

Source: https://github.com/madsb/dkfds-vue3/blob/main/documentation/src/stories/input/Input.story.md

Shows the integration of FdsInput within an FdsFormgroup for handling form validation and displaying error messages. This example includes a label, hint, and error message for an email input.

```vue
<template>
  <FdsFormgroup :error="emailError">
    <FdsLabel for="email">Email Address</FdsLabel>
    <FdsHint>We'll never share your email</FdsHint>
    <FdsInput id="email" v-model="email" type="email" placeholder="your@email.com" />
    <FdsFejlmeddelelse v-if="emailError">
      {{ emailError }}
    </FdsFejlmeddelelse>
  </FdsFormgroup>
</template>
```

--------------------------------

### FdsDetaljer Optional Form Fields Example

Source: https://github.com/madsb/dkfds-vue3/blob/main/documentation/src/stories/data-display/Detaljer.story.md

Shows how to use FdsDetaljer to hide optional form fields under an expandable header, improving form clarity. It includes nested form elements within the default slot.

```vue
<FdsDetaljer header="Advanced Settings">
  <FdsFormgroup>
    <FdsLabel for="advanced-option">Advanced Option</FdsLabel>
    <FdsInput id="advanced-option" />
  </FdsFormgroup>
</FdsDetaljer>
```

--------------------------------

### Import DKFDS Vue 3 CSS

Source: https://github.com/madsb/dkfds-vue3/blob/main/README.md

Imports the pre-built CSS file for the @madsb/dkfds-vue3 library.

```typescript
// main.ts
import '@madsb/dkfds-vue3/dist/dkfds-vue3.css'
```

--------------------------------

### Content Tabs (with panels)

Source: https://github.com/madsb/dkfds-vue3/blob/main/documentation/src/stories/navigation/Faneblade.story.md

Demonstrates the usage of FdsFaneblade, FdsFanebladeTab, and FdsFanebladePanel to create a tabbed interface with associated content panels.

```APIDOC
## Content Tabs (with panels)

### Description
Implements a tabbed interface where each tab is linked to a specific content panel. Users can switch between content sections by clicking on the tabs.

### Components Used
- `FdsFaneblade`: The main container for the tabbed interface.
- `FdsFanebladeTab`: Represents an individual tab button.
- `FdsFanebladePanel`: Represents the content area associated with a tab.

### Usage

```vue
<template>
  <fds-faneblade>
    <template #tabs>
      <fds-faneblade-tab
        id="overview"
        label="Overview"
        icon="dashboard"
        :active="activeTab === 'overview'"
        @click="setActiveTab"
      />
      <fds-faneblade-tab
        id="details"
        label="Details"
        :active="activeTab === 'details'"
        @click="setActiveTab"
      />
    </template>
    <template #panels>
      <fds-faneblade-panel id="overview" :active="activeTab === 'overview'">
        <h2>Overview Content</h2>
        <p>Content for the overview tab...</p>
      </fds-faneblade-panel>
      <fds-faneblade-panel id="details" :active="activeTab === 'details'">
        <h2>Details Content</h2>
        <p>Content for the details tab...</p>
      </fds-faneblade-panel>
    </template>
  </fds-faneblade>
</template>

<script setup>
import { ref } from 'vue'
import { FdsFaneblade, FdsFanebladeTab, FdsFanebladePanel } from '@madsb/dkfds-vue3'

const activeTab = ref('overview')
const setActiveTab = (tabId) => {
  activeTab.value = tabId
}
</script>
```

### Component Details:

#### `FdsFaneblade`

**Description:** Container for tab and panel components, utilizing slots for structure.

**Slots:**
- `tabs`: Slot for placing `fds-faneblade-tab` components.
- `panels`: Slot for placing `fds-faneblade-panel` components.

#### `FdsFanebladeTab`

**Description:** Renders an individual tab button.

**Props:**
- `id` (string, required): Unique identifier linking the tab to its corresponding panel.
- `label` (string, required): Text displayed on the tab button.
- `active` (boolean, optional, default: `false`): Indicates if the tab is currently selected.
- `icon` (string, optional): Identifier for a DKFDS icon to display with the tab label.

**Events:**
- `click`: Emits the `id` of the clicked tab.

#### `FdsFanebladePanel`

**Description:** Renders the content area for a specific tab.

**Props:**
- `id` (string, required): Identifier that matches the `id` of its corresponding `fds-faneblade-tab`.
- `active` (boolean, optional, default: `false`): Determines if the panel content is visible.
```

--------------------------------

### Single Required File Upload Example using FdsFileUpload

Source: https://github.com/madsb/dkfds-vue3/blob/main/documentation/src/stories/input/FileUpload.story.md

Illustrates the use of FdsFileUpload for uploading a single, required PDF file. This is suitable for scenarios where a specific document type is mandatory, like a CV submission.

```vue
<FdsFileUpload
  label="Upload CV"
  :accept="['.pdf']"
  :required="true"
  hint="PDF format required for CV submission"
/>
```