### Install FDS using npm

Source: https://github.com/detfaellesdesignsystem/dkfds-components/blob/master/dist/README.md

Install the dkfds module as a project dependency using npm. This is the recommended installation method.

```shell
npm install --save dkfds
```

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

### Include FDS JavaScript

Source: https://github.com/detfaellesdesignsystem/dkfds-components/blob/master/dist/README.md

Include the FDS JavaScript file at the bottom of your HTML body. Replace '[path to dkfds folder]' with the actual path to your dkfds installation.

```html
<script src='[path to dkfds folder]/dist/js/dkfds.js'></script>
```

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

### Include FDS CSS

Source: https://github.com/detfaellesdesignsystem/dkfds-components/blob/master/dist/README.md

Include the FDS CSS file in the head of your HTML document. Replace '[path to dkfds folder]' with the actual path to your dkfds installation.

```html
<link type='text/css' rel='stylesheet' href='[path to dkfds folder]/dist/css/dkfds.css'>
```

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

### Initialize All DKFDS Components

Source: https://github.com/detfaellesdesignsystem/dkfds-components/blob/master/_autodocs/README.md

Import the DKFDS library and call the init function to automatically discover and initialize all components within the document. This includes polyfills and event listeners.

```javascript
import * as DKFDS from 'dkfds';

DKFDS.init(options)           // Initialize all components
```

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

### Date Picker Initialization and Control

Source: https://github.com/detfaellesdesignsystem/dkfds-components/blob/master/_autodocs/api-reference/date-picker.md

Demonstrates how to initialize the Date Picker component and control its behavior programmatically. This includes setting the language and manipulating date values.

```javascript
import { datePicker } from 'dkfds';

// Initialize date pickers in document
datePicker.init(document);

// Set custom language
datePicker.setLanguage({
  open_calendar: "Open calendar",
  // ... other strings
});

// Programmatic control
const input = document.querySelector('.date-picker');
datePicker.setCalendarValue(input, '2025-06-15');
datePicker.disable(input);
datePicker.enable(input);
```

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

### DKFDS Initialization

Source: https://github.com/detfaellesdesignsystem/dkfds-components/blob/master/_autodocs/README.md

Initializes all DKFDS components within the document or a specified scope. This function automatically discovers and sets up components based on their respective CSS classes and data attributes.

```APIDOC
## DKFDS.init()

### Description
Initializes all components in the document or within a specified scope. This function handles the discovery and setup of components, including polyfills and event listeners.

### Method
`DKFDS.init(options?: { scope: Element })`

### Parameters
#### Options
- **scope** (Element) - Optional - The DOM element within which to initialize components. If not provided, the entire document is used.

### Request Example
```javascript
import * as DKFDS from 'dkfds';

// Initialize all components in the document
DKFDS.init();

// Initialize only components within a specific element
DKFDS.init({ scope: document.querySelector('#my-form') });
```

### Response
This method does not return a value but initializes components in the DOM.
```

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

### DKFDS Initialization Options

Source: https://github.com/detfaellesdesignsystem/dkfds-components/blob/master/_autodocs/types.md

Specifies initialization options for DKFDS, including an optional scope element to search for components. Used by the init() function.

```javascript
{
  scope?: HTMLElement
}
```

```javascript
DKFDS.init({ scope: myElement })
```

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

### Manually Instantiate Accordion Component

Source: https://github.com/detfaellesdesignsystem/dkfds-components/blob/master/_autodocs/README.md

Import a specific component like Accordion from the DKFDS library and instantiate it manually by passing the target element to the constructor. Ensure to call the init method on the instance.

```javascript
import { Accordion } from 'dkfds';

const element = document.querySelector('.accordion');
const accordion = new Accordion(element);
accordion.init();
```

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

### Accordion Component

Source: https://github.com/detfaellesdesignsystem/dkfds-components/blob/master/_autodocs/README.md

Manually instantiate and initialize the Accordion component for collapsible sections.

```APIDOC
## Accordion Component

### Description
Provides functionality for collapsible sections within the UI. This component must be manually instantiated.

### Method
`new Accordion(element: Element)`

### Parameters
#### Element
- **element** (Element) - Required - The DOM element representing the accordion.

### Initialization
`accordion.init()`

### Request Example
```javascript
import { Accordion } from 'dkfds';

const element = document.querySelector('.accordion');
const accordion = new Accordion(element);
accordion.init();
```

### Response
This method initializes the Accordion component on the provided element.
```

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

### CharacterLimit Configuration Strings

Source: https://github.com/detfaellesdesignsystem/dkfds-components/blob/master/_autodocs/types.md

Defines strings for character limit feedback, including remaining and too many counts. The placeholder '{value}' is replaced with the actual count. Default values are in Danish.

```javascript
{
  character_remaining: string,
  characters_remaining: string,
  character_too_many: string,
  characters_too_many: string
}
```

```javascript
{
  character_remaining: "Du har {value} tegn tilbage",
  characters_remaining: "Du har {value} tegn tilbage",
  character_too_many: "Du har {value} tegn for meget",
  characters_too_many: "Du har {value} tegn for meget"
}
```

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

### Accordion Configuration Strings

Source: https://github.com/detfaellesdesignsystem/dkfds-components/blob/master/_autodocs/types.md

Defines labels for the open all and close all buttons in an accordion. The default values are in Danish.

```javascript
{
  open_all: string,
  close_all: string
}
```

```javascript
{
  open_all: "Åbn alle",
  close_all: "Luk alle"
}
```

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

### Initialize DKFDS Components within a Scope

Source: https://github.com/detfaellesdesignsystem/dkfds-components/blob/master/_autodocs/README.md

Import the DKFDS library and call the init function with a scope option to initialize components only within a specific element. This is useful for targeted initialization.

```javascript
import * as DKFDS from 'dkfds';

// Initializes only components within a specific element
DKFDS.init({ scope: document.querySelector('#my-form') });
```

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

### Include FDS SCSS

Source: https://github.com/detfaellesdesignsystem/dkfds-components/blob/master/dist/README.md

Add this SCSS code to your main.scss file to include FDS styling. Ensure the paths to fonts, images, and icons are correctly set.

```scss
@use 'node_modules/dkfds/src/stylesheets/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/'
);
```

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

### DatePicker Module

Source: https://github.com/detfaellesdesignsystem/dkfds-components/blob/master/_autodocs/README.md

Provides a set of functions to manage and interact with the DatePicker functionality, which is exported as a module.

```APIDOC
## DatePicker Module

### Description
Provides methods for initializing, configuring, and managing the DatePicker component. This module is exported separately and uses event delegation.

### Methods
- **`init(root)`**: Initializes the DatePicker within a given root element.
- **`setLanguage(strings)`**: Sets the language strings for the DatePicker.
- **`getDatePickerContext(el)`**: Retrieves the DatePicker context for a given element.
- **`disable(el)`**: Disables the DatePicker for a specific element.
- **`enable(el)`**: Enables the DatePicker for a specific element.
- **`setCalendarValue(el, dateString)`**: Sets the value of the DatePicker calendar for an element.
- **`validateDateInput(el)`**: Validates the date input of an element.
- **`renderCalendar(el, dateToDisplay)`**: Renders the calendar for a given element and date.
- **`updateCalendarIfVisible(el)`**: Updates the calendar if it is currently visible for an element.
- **`isDateInputInvalid(el)`**: Checks if the date input for an element is invalid.

### Request Example
```javascript
const datePicker = DKFDS.datePicker;

// Example: Initialize DatePicker for a specific element
const dateInput = document.getElementById('my-date-input');
datePicker.init(dateInput);

// Example: Disable DatePicker for an element
datePicker.disable(dateInput);
```

### Response
These methods perform actions on the DatePicker component and do not typically return values, except for `getDatePickerContext` and `isDateInputInvalid` which return specific context or boolean values.
```

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

### DatePicker Module API

Source: https://github.com/detfaellesdesignsystem/dkfds-components/blob/master/_autodocs/README.md

Access and use the DatePicker module's functions for initialization, language setting, validation, and rendering. This module uses event delegation.

```javascript
const datePicker = DKFDS.datePicker;

datePicker.init(root)
datePicker.setLanguage(strings)
datePicker.getDatePickerContext(el)
datePicker.disable(el)
datePicker.enable(el)
datePicker.setCalendarValue(el, dateString)
datePicker.validateDateInput(el)
datePicker.renderCalendar(el, dateToDisplay)
datePicker.updateCalendarIfVisible(el)
datePicker.isDateInputInvalid(el)
```

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

### Date Picker Translation Strings

Source: https://github.com/detfaellesdesignsystem/dkfds-components/blob/master/_autodocs/api-reference/date-picker.md

Provides a set of translation strings for internationalizing the Date Picker component. These strings cover various user interface elements and messages.

```javascript
{
  "open_calendar": "Åbn kalender",
  "choose_a_date": "Vælg en dato",
  "choose_a_date_between": "Vælg en dato mellem {minDay}. {minMonthStr} {minYear} og {maxDay}. {maxMonthStr} {maxYear}",
  "choose_a_date_before": "Vælg en dato. Der kan vælges indtil {maxDay}. {maxMonthStr} {maxYear}.",
  "choose_a_date_after": "Vælg en dato. Der kan vælges fra {minDay}. {minMonthStr} {minYear} og fremad.",
  "previous_year": "Navigér ét år tilbage",
  "previous_month": "Navigér én måned tilbage",
  "next_month": "Navigér én måned frem",
  "next_year": "Navigér ét år frem",
  "select_month": "Vælg måned",
  "select_year": "Vælg år",
  "january": "januar"
  // ... all month and day names
}
```

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

### Import FDS JavaScript Module

Source: https://github.com/detfaellesdesignsystem/dkfds-components/blob/master/dist/README.md

Import the FDS JavaScript module in your main.js file to use its functionalities.

```javascript
import * as DKFDS from "dkfds";
```

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

### Tooltip Display Constants

Source: https://github.com/detfaellesdesignsystem/dkfds-components/blob/master/_autodocs/types.md

Defines constants related to the positioning and display of tooltips, including arrow distance, height, minimum margins, and WCAG reflow criteria.

```javascript
ARROW_DISTANCE_TO_TARGET = 4
ARROW_HEIGHT = 8
MIN_MARGIN = 8
WCAGReflowCriterion = 320
```

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

### DatePicker Date Format Constants

Source: https://github.com/detfaellesdesignsystem/dkfds-components/blob/master/_autodocs/types.md

Defines various date format options for the DatePicker component, including internal and display formats.

```javascript
DATE_FORMAT_OPTION_1 = "DD/MM/YYYY"
DATE_FORMAT_OPTION_2 = "DD-MM-YYYY"
DATE_FORMAT_OPTION_3 = "DD.MM.YYYY"
DATE_FORMAT_OPTION_4 = "DD MM YYYY"
DATE_FORMAT_OPTION_5 = "DD/MM-YYYY"
INTERNAL_DATE_FORMAT = "YYYY-MM-DD"
```

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

### DatePickerContext Interface

Source: https://github.com/detfaellesdesignsystem/dkfds-components/blob/master/_autodocs/types.md

Defines the state and DOM elements for a date picker component. Used by datePicker.getDatePickerContext() and accessed via the datePicker module.

```javascript
{
  calendarEl: HTMLDivElement,
  datePickerEl: HTMLElement,
  dialogEl: HTMLDivElement,
  internalInputEl: HTMLInputElement,
  externalInputEl: HTMLInputElement,
  statusEl: HTMLDivElement,
  guideEl: HTMLDivElement,
  firstYearChunkEl: HTMLElement,
  calendarDate: Date,
  minDate: Date | undefined,
  maxDate: Date | undefined,
  selectedDate: Date | undefined,
  rangeDate: Date | undefined,
  defaultDate: Date | undefined,
  inputDate: Date | undefined,
  dateFormatOption: string,
  toggleBtnEl: HTMLButtonElement
}
```

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

### TableSelectableRows Update Event Detail

Source: https://github.com/detfaellesdesignsystem/dkfds-components/blob/master/_autodocs/types.md

Custom event detail object for table row selection changes. Accessed via an event listener on the table element.

```javascript
{
  checkedNumber: number
}
```

```javascript
table.addEventListener('fds.table.selectable.updated', (event) => {
  console.log(event.detail.checkedNumber);
});
```

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

### DatePicker Year Chunk Constant

Source: https://github.com/detfaellesdesignsystem/dkfds-components/blob/master/_autodocs/types.md

Defines the number of years displayed in the year selector for the DatePicker component.

```javascript
YEAR_CHUNK = 12
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.