### Side Navigation HTML Example

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/components/src/block/side-navigation/stories/vl-side-navigation.stories-doc.mdx

A comprehensive HTML example demonstrating the structure and usage of the side navigation component with various sub-components.

```html
<vl-side-navigation hash-sync="true">
  <span slot="title">
    <vl-side-navigation-title>
      Side navigation
    </vl-side-navigation-title>
  </span>

  <vl-side-navigation-content>
    <vl-side-navigation-group>
      <vl-side-navigation-title slot="title">Content 1</vl-side-navigation-title>
      <vl-side-navigation-item>
        <a is="vl-link" href="#content-1-1">Item 1.1</a>
      </vl-side-navigation-item>
      <vl-side-navigation-item>
        <a is="vl-link" href="#content-1-2">Item 1.2</a>
      </vl-side-navigation-item>
      <vl-side-navigation-toggle parent="content-1">
        <a is="vl-link" href="#content-1-3">Item 1.3</a>
      </vl-side-navigation-toggle>
      <vl-side-navigation-group>
        <vl-side-navigation-title slot="title">Content 1.3</vl-side-navigation-title>
        <vl-side-navigation-item>
          <a is="vl-link" href="#content-1-3-1">Item 1.3.1</a>
        </vl-side-navigation-item>
        <vl-side-navigation-item>
          <a is="vl-link" href="#content-1-3-2">Item 1.3.2</a>
        </vl-side-navigation-item>
      </vl-side-navigation-group>
    </vl-side-navigation-group>
    <vl-side-navigation-group>
      <vl-side-navigation-title slot="title">Content 2</vl-side-navigation-title>
      <vl-side-navigation-item>
        <a is="vl-link" href="#content-2-1">Item 2.1</a>
      </vl-side-navigation-item>
      <vl-side-navigation-item>
        <a is="vl-link" href="#content-2-2">Item 2.2</a>
      </vl-side-navigation-item>
    </vl-side-navigation-group>
  </vl-side-navigation-content>
</vl-side-navigation>
```

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

### Header Slot Configuration

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/components/src/compliance/privacy/stories/vl-privacy.stories-doc.mdx

Example demonstrating how to replace the default functional header with a custom vl-functional-header, providing a 'Start' label for the back link.

```html
<vl-privacy>
  <vl-functional-header slot="functional-header" back="Start"></vl-functional-header>
</vl-privacy>
```

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

### vl-input-field Examples

Source: https://context7.com/milieuinfo/flux-web-components/llms.txt

Illustrates the usage of the vl-input-field component with various types and validation attributes. Includes examples for text, number, and password inputs, as well as block-level display. Event handling for 'vl-input', 'vl-change', and 'vl-valid' is demonstrated.

```html
<!-- Basic text input -->
<vl-input-field
  id="email"
  name="email"
  label="E-mailadres"
  placeholder="naam@voorbeeld.be"
  required
></vl-input-field>
```

```html
<!-- Number input with min/max -->
<vl-input-field
  type="number"
  name="quantity"
  label="Quantity"
  min="1"
  max="100"
  value="1"
></vl-input-field>
```

```html
<!-- Password input with pattern validation -->
<vl-input-field
  type="password"
  name="password"
  label="Password"
  pattern="^(?=.*[A-Za-z])(?=.*U)(?=.*V)[A-Za-zV]{8,}$"
  min-length="8"
  required
></vl-input-field>
```

```html
<!-- Block-level input (full width) -->
<vl-input-field block name="fullname" label="Full Name"></vl-input-field>
```

```javascript
const input = document.querySelector('vl-input-field');

input.addEventListener('vl-input', (event) => {
  console.log('Current value:', event.detail.value);
});

input.addEventListener('vl-change', (event) => {
  console.log('Value changed to:', event.detail.value);
});

input.addEventListener('vl-valid', (event) => {
  console.log('Input is valid, value:', event.detail.value);
});
```

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

### Install Flux Web Components

Source: https://context7.com/milieuinfo/flux-web-components/llms.txt

Installs the core packages for Flux Web Components using npm. This includes common utilities, components, styles, and the base styles from the GovFlanders design system.

```bash
# Install core packages
npm install @domg-wc/common @domg-wc/components @domg-wc/styles @domg/govflanders-style
```

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

### Popover with Actions

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/components/src/block/popover/stories/vl-popover.stories-doc.mdx

This example demonstrates a popover containing a list of actions. Each action can be selected and has an associated icon.

```html
<vl-popover-action-list @click=${actionListClickHandler}>
    <vl-popover-action selected=${selected} icon="search">Zoeken</vl-popover-action>
    <vl-popover-action icon="bell">Rapportenoverzicht</vl-popover-action>
    <vl-popover-action icon="pin">Vind locatie</vl-popover-action>
</vl-popover-action-list>
```

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

### Start Storybook Development Server

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/SKILLS.md

Launch the Storybook development server to preview components and their states. This is often used in conjunction with other commands.

```bash
npm run apps:storybook:dev
```

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

### Import VlButtonComponent

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/components/src/atom/button/stories/vl-button.stories-doc.mdx

Import the VlButtonComponent for use in your JavaScript files. Ensure the path is correct for your project setup.

```javascript
import { VlButtonComponent } from '@domg-wc/components/atom';
```

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

### Multiline Alert Example

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/components/src/block/alert/stories/vl-alert.stories-doc.mdx

Configure the alert component to handle multiline messages by setting `white-space: pre-line;`. Ensure content starts immediately after the opening tag for correct rendering.

```html
<!-- Correct -->
<vl-alert multiline
    ><span>Eerste regel.</span>
    <span>Tweede regel.</span>
</vl-alert>

<!-- Fout: newline na opening-tag geeft extra witruimte -->
<vl-alert multiline>
    <span>Eerste regel.</span>
    <span>Tweede regel.</span>
</vl-alert>
```

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

### HTML Structure Example

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/apps/storybook/docs/h_opmaak/1_opmaak-concept.mdx

Demonstrates the usage of layout classes like .vl-section, .vl-content-block, and .vl-grid for structuring content within a web page.

```html
<section class="vl-section">
  <div class="vl-content-block">
    <div class="vl-grid">
      <div class="vl-column vl-column--6">
        <!-- Slechts op dit niveau is er nood aan een web-component -->
        <vl-info-tile>...</vl-info-tile>
      </div>
    </div>
  </div>
</section>
```

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

### Example Form Data Structure

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/apps/storybook/docs/f_patronen/formulier/4_form-data/formulier-form-data.mdx

This is an example of the consistent object format for form data, where single-value controls have a single value and multi-value controls have an array of values.

```javascript
{
          "naam": "Dehbi",
          "startDate": "2025-07-11"
}
```

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

### Import Cascader Component

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/components/src/block/cascader/stories/vl-cascader.stories-doc.mdx

Import the VlCascaderComponent for use in your project. Ensure the component is correctly installed.

```javascript
import { VlCascaderComponent } from '@domg-wc/components/block';
```

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

### vl-button Examples

Source: https://context7.com/milieuinfo/flux-web-components/llms.txt

Demonstrates various configurations of the vl-button component, including different variants, icon placements, loading states, toggle functionality, and CTA links. Event handling for 'vl-click' and 'vl-toggle' is also shown.

```html
<!-- Basic button -->
<vl-button>Primary Button</vl-button>
```

```html
<!-- Secondary button with icon -->
<vl-button secondary icon="arrow-right" icon-placement="after">
  Next Step
</vl-button>
```

```html
<!-- Loading state button -->
<vl-button loading disabled>Processing...</vl-button>
```

```html
<!-- Toggle button -->
<vl-button toggle icon="bookmark">Bookmark</vl-button>
```

```html
<!-- CTA link button (renders as anchor) -->
<vl-button cta-link="https://example.com" external>
  Visit Website
</vl-button>
```

```html
<!-- Icon-only button (requires label for accessibility) -->
<vl-button icon="search" label="Search"></vl-button>
```

```javascript
const button = document.querySelector('vl-button');

button.addEventListener('vl-click', (event) => {
  console.log('Button clicked');
});

// For toggle buttons
button.addEventListener('vl-toggle', (event) => {
  console.log('Toggle state:', event.detail.on);
});
```

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

### Basic Popover Usage

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/components/src/block/popover/stories/vl-popover.stories-doc.mdx

This example shows how to trigger a popover using a button. The popover is linked to the button via the 'for' attribute.

```html
<vl-button id="popover-trigger"></vl-button>
<vl-popover for="popover-trigger"></vl-popover>
```

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

### vl-select with programmatic options

Source: https://context7.com/milieuinfo/flux-web-components/llms.txt

Set options dynamically using JavaScript. Listen for 'vl-change' events to get the selected value.

```html
<vl-select id="dynamic-select" name="status" label="Status"></vl-select>

<script>
  const select = document.querySelector('#dynamic-select');

  // Set options programmatically
  select.options = [
    { value: 'draft', label: 'Draft' },
    { value: 'pending', label: 'Pending Review', selected: true },
    { value: 'published', label: 'Published' },
    { value: 'archived', label: 'Archived', disabled: true }
  ];

  select.addEventListener('vl-change', (event) => {
    console.log('Selected value:', event.detail.value);
  });
</script>
```

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

### Example Conventional Commit

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/apps/storybook/docs/b_bijdragen/3_git-branching-strategie.mdx

An example of a commit message following the conventional commit specification, including ticket number, component, and a brief description.

```git
feat: FLUX-2322 - op de CDN de TinyMCE theming publiceren

de theming van TinyMCE wordt gepubliceerd in een artefact @domg-cdn/tinymce-theming
het infra-team breidt hun scripts uit zodat de code uit de artefact op de CDN gezet wordt
```

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

### Upload Progress with Padding and Margin

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/components/src/block/upload-progress/stories/vl-upload-progress.stories-doc.mdx

Apply custom padding and margin to the upload progress component using vl-padding and vl-margin utility classes. This example also sets filename, filesize, and progress percentage.

```html
<vl-upload-progress filename="document.pdf" filesize="123 MB" class="vl-padding vl-padding--small" progress="50"></vl-upload-progress>
```

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

### Info vl-alert example

Source: https://context7.com/milieuinfo/flux-web-components/llms.txt

Display an informational alert with an icon, title, and message. Use the `type="info"` attribute.

```html
<vl-alert
  type="info"
  icon="info-circle"
  title="Information"
  message="Your session will expire in 5 minutes."
></vl-alert>
```

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

### Basic vl-accordion example

Source: https://context7.com/milieuinfo/flux-web-components/llms.txt

Use this snippet to create a simple collapsible accordion section with a title and content.

```html
<vl-accordion>
  <span slot="title">Section Title</span>
  <p>Accordion content goes here.</p>
</vl-accordion>
```

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

### Migration Example: Bootstrap and Usage

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/apps/storybook/docs/g_recepten/proza-inline.mdx

Replace custom Proza utilities with vlProza. Set the domain once during bootstrap and use vlProza in templates for attribute values. vl-proza-message can be used without an explicit domain if FluxConfig is set.

```typescript
// eenmalig bij bootstrap (app.config.ts)
import { FluxConfig } from '@domg-wc/common';
FluxConfig.setPreferences({ prozaDomain: 'mijn-domein' });

// gebruik in templates
import { vlProza } from '@domg-wc/components/block';
html`<vl-alert title=${vlProza('disclaimer.titel')} type="warning"></vl-alert>`

// vl-proza-message zonder expliciet domein
html`<vl-proza-message code="mijn-code"></vl-proza-message>`
```

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

### Parse JSON Dependency Data with jq

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/resources/docs-internal/dependencies.md

Use jq to parse JSON data, such as dependency information. Examples include extracting all dependency keys, getting a specific dependency's version, and transforming the data into a more readable format or for use in other commands.

```bash
cat map-dta.json | jq '.dependencies | keys[]'
```

```bash
cat map-dta.json | jq '.dependencies.jsts.version'
```

```bash
jq -r '.dependencies | to_entries[] | "\(.key): \(.value.version)"' map-dta.json
```

```bash
jq -r '.dependencies | to_entries[] | "npm pkg set dependencies.\(.key)=\(.value.version)"' map-dta.json | bash
```

```bash
jq -r '.dependencies | to_entries[] | "npm pkg set dependencies.\(.key)=\(.value.version)"' ../../../dep-to-add/map-dta.json | bash
```

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

### Import Map Legend Component

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/map/src/components/legend/stories/vl-map-legend.stories-doc.mdx

Import the VlMapLegend component before use. Ensure it is installed in your project.

```javascript
import { VlMapLegend } from '@domg-wc/map';
```

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

### Warning vl-alert example

Source: https://context7.com/milieuinfo/flux-web-components/llms.txt

Show a warning alert using `type="warning"` to notify users of potential issues.

```html
<vl-alert
  type="warning"
  icon="alert-triangle"
  title="Warning"
  message="Some fields require attention before submitting."
></vl-alert>
```

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

### Basic Autocomplete Element

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/components/src/block/autocomplete/stories/vl-autocomplete.stories-doc.mdx

Render a basic Autocomplete web component. No specific setup is required beyond importing the component.

```html
<vl-autocomplete></vl-autocomplete>
```

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

### Naked vl-alert example

Source: https://context7.com/milieuinfo/flux-web-components/llms.txt

Use the `naked` attribute for an alert with minimal styling, suitable for subtle inline messages.

```html
<vl-alert type="info" naked>
  <span slot="title">Note</span>
  <p>This is a subtle inline message.</p>
</vl-alert>
```

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

### Dynamic Tabs Component Example

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/components/src/block/tabs/stories/vl-tabs.stories-doc.mdx

This snippet shows a dynamic variant of the tabs component. Refer to the story for the complete implementation details.

```typescript
import { ArgTypes, Canvas, Source } from '@storybook/addon-docs/blocks';
import * as VlTabsStories from './vl-tabs.stories';
import tabsStoryUtils from './vl-tabs.stories-util?raw';

<FluxComponentMetaData id="components-block-tabs-tabs" />

<FluxAlert type="info">
{`
    De v2 versie van deze component gebruik je via de custom-tag, de interne implementatie is voor de rest
    gelijk gebleven aan de v1 versie. In de toekomst zal deze component grondig herwerkt worden.
`}
</FluxAlert>


## Doel

Gebruik de `tabs` component om gerelateerde informatie op te splitsen in kleinere stukken content.
Op mobiel wordt de tab navigatie omgevormd tot een uitklapbaar menu.


## Voorbeeld

```js
import { VlTabsComponent } from '@domg-wc/components/block';
```

```html
<vl-tabs></vl-tabs>
```

<Canvas of={VlTabsStories.TabsDefault} />


## Configuratie

<ArgTypes of={VlTabsStories.TabsDefault} />


## Varianten

### Dynamisch

Zie de code onder de story voor het volledige voorbeeld.

<Canvas of={VlTabsStories.TabsDynamic} />

<details>
    <summary>TypeScript code</summary>
    <Source code={tabsStoryUtils} language="ts" dark={true} />
</details>

### In functional header

Wanneer de tabs in een functional header gerenderd worden, moet het attribuut `within-functional-header` toegevoegd worden.

Hier vind je een [voorbeeld van een functional header met tabs](/story/components-block-functional-header--functional-header-tabs).


## Referenties

### Digitaal Vlaanderen

[Documentatie Digitaal Vlaanderen - Tabs](https://overheid.vlaanderen.be/webuniversum/v3/documentation/components/vl-ui-tabs)

### Legacy Documentatie

[Legacy Storybook - Tabs](https://webcomponenten.omgeving.vlaanderen.be/storybook/?path=/docs/legacy-vl-tabs--uig-2115)

[Legacy Documentatie - Tabs](https://webcomponenten.omgeving.vlaanderen.be/doc/VlTabs.html)

[Legacy Demo - Tabs](https://webcomponenten.omgeving.vlaanderen.be/demo/vl-tabs.html)

```

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

### Popover Actions with Divider

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/components/src/block/popover/stories/vl-popover.stories-doc.mdx

This example shows how to visually separate groups of actions within a popover action list using a horizontal rule (`<hr class="vl-separator" />`).

```html
<vl-popover-action-list>
    <vl-popover-action icon="search">Zoeken</vl-popover-action>
    <vl-popover-action icon="bell">Rapportenoverzicht</vl-popover-action>
    <vl-popover-action icon="pin">Vind locatie</vl-popover-action>
    <hr class="vl-separator" />
    <vl-popover-action icon="save">Bewaren</vl-popover-action>
    <vl-popover-action icon="trash">Verwijderen</vl-popover-action>
</vl-popover-action-list>
```

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

### Storybook Meta Data JSON Structure

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/AGENTS.md

Example structure for updating component meta-data JSON files. Add entries with component name, docs reference, and condition fields.

```json
{
  "component": "component-name",
  "docs": "path/to/docs",
  "condition": "optional-condition"
}
```

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

### Add Proza Message Preloader to HTML

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/components/src/block/proza-message/stories/vl-proza-message-preloader.stories-doc.mdx

Add the vl-proza-message-preloader custom element to your HTML. This will initialize the component and start preloading messages.

```html
<vl-proza-message-preloader></vl-proza-message-preloader>
```

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

### Basic Wizard Pane Usage

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/components/src/block/wizard/stories/vl-wizard-pane.stories-doc.mdx

Demonstrates how to use the vl-wizard-pane component within a vl-wizard. Each pane represents a step in the wizard.

```html
<vl-wizard>
    <vl-wizard-pane name="Step 1"><p>Pane content</p></vl-wizard-pane>
</vl-wizard>
```

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

### List Specific Dependencies

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/resources/docs-internal/dependencies.md

List specific dependencies with JSON output and a depth of 1.

```bash
npm list @domg-wc/common proj4 lit @domg-wc/components jsts --json --depth 1
```

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

### Disabled vl-checkbox

Source: https://context7.com/milieuinfo/flux-web-components/llms.txt

A checkbox that is disabled and cannot be interacted with. This example shows a pre-checked disabled state.

```html
<vl-checkbox disabled checked>
  Read-only option (selected)
</vl-checkbox>
```

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

### Basic Input Field Masked Usage

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/components/src/form/input-field-masked/stories/vl-input-field-masked.stories-doc.mdx

A basic example of how to use the vl-input-field-masked component in your HTML.

```html
<vl-input-field-masked></vl-input-field-masked>
```

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

### Registering Web Components (Batch Import)

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/apps/storybook/docs/a_afnemen/1_aan-de-slag.mdx

Register multiple web components at once using the `registerWebComponents` function. This approach requires importing the function and the specific component classes you intend to use.

```javascript
import { registerWebComponents } from '@domg-wc/common';
import { VlAccordionComponent } from '@domg-wc/components/block';

registerWebComponents([VlAccordionComponent]);
```

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

### List Project Dependencies

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/resources/docs-internal/dependencies.md

List the direct dependencies of your project with a specified depth. The output can be formatted as JSON.

```bash
npm list @nx/eslint-plugin @types/cypress @types/cypress-axe @types/jest @types/node lit @open-wc/testing sinon proj4 @storybook/addon-actions @storybook/web-components @domg-wc/components @domg-wc/common lit-html resize-observer-polyfill jsts --json --depth 1
```

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

### Import VlProzaMessage Component

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/components/src/block/proza-message/stories/vl-proza-message.stories-doc.mdx

Import the VlProzaMessage component for use in your project. Ensure the component is correctly installed.

```javascript
import { VlProzaMessage } from '@domg-wc/components/block';
```

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

### Run Storybook E2E Tests

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/AGENTS.md

This command initiates the Storybook development server in one terminal and the Storybook E2E tests in another. It's used for end-to-end testing of components within Storybook.

```bash
npm run apps:storybook:dev  # Terminal 1
npm run apps:storybook-e2e:watch  # Terminal 2
```

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

### Basic vl-select with slotted options

Source: https://context7.com/milieuinfo/flux-web-components/llms.txt

Use this for a simple dropdown with predefined options.

```html
<vl-select name="country" label="Country" placeholder="Select a country">
  <option value="BE">Belgium</option>
  <option value="NL">Netherlands</option>
  <option value="DE">Germany</option>
</vl-select>
```

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

### Section Overlap Code

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/styles/src/layout/section/stories/vl-section.stories-doc.mdx

Use this code for creating an overlapping section layout. Ensure the necessary Storybook setup is in place.

```html
const SectionOverlap = () => html`
  <vl-section>
    <p>Content</p>
  </vl-section>
  <vl-section overlap>
    <p>Overlapping Content</p>
  </vl-section>
`;
```

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

### v2 Migratie Instructies

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/apps/storybook/docs/a_afnemen/4_migratie-aanpak.mdx

Bevat instructies voor het migreren naar v2, inclusief aanpassingen in imports, componentregistratie, CSS-stijlen en het verwijderen van legacy elementen. Let op wijzigingen in elementselectie.

```javascript
export const v2InfoBlock = `
- Imports aan te passen naar 
- Componenten te registreren met 
- CSS styles toe te voegen via 
- Legacy imports (zoals , etc.) te verwijderen
- Opletten bij het selecteren van elementen in code of in tests
  bv: 
  of 
  zullen breken
`
```

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

### vl-datepicker with date constraints

Source: https://context7.com/milieuinfo/flux-web-components/llms.txt

Configure minimum and maximum selectable dates, and specify the output format.

```html
<vl-datepicker
  name="appointment"
  label="Appointment Date"
  min-date="today"
  max-date="2025-12-31"
  format="d.m.Y"
></vl-datepicker>
```

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

### Basic Link Usage

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/components/src/atom/link/stories/vl-link.stories-doc.mdx

Use the vl-link component to display a basic link. This is the default and simplest way to render a link.

```html
<vl-link></vl-link>
```

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

### Import VlPopoverComponent

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/components/src/block/popover/stories/vl-popover.stories-doc.mdx

Import the VlPopoverComponent for use in your project. Ensure this is done before using the component.

```javascript
import { VlPopoverComponent } from '@domg-wc/components/block';
```

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

### Get Node Package Version

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/resources/docs-internal/dependencies.md

Retrieve the version of a specific Node.js package using npm or node's require function.

```bash
node -p "require('jsts/package.json').version"
```

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

### Import Wizard Pane Component

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/components/src/block/wizard/stories/vl-wizard-pane.stories-doc.mdx

Import the VlWizardPane class before using the component. Ensure the component is registered.

```javascript
import { VlWizardPane } from '@domg-wc/components/block';
```

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

### Basic Map Initialization

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/map/src/stories/vl-map.stories-doc.mdx

Initialize a basic map component. This is the simplest way to render a map on your page.

```html
<vl-map></vl-map>
```

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

### Run Component Tests with UI

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/AGENTS.md

Use this command to run component tests interactively with a UI. This is useful for development and debugging.

```bash
npm run libs:component-tests:watch
```

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

### Error vl-alert example

Source: https://context7.com/milieuinfo/flux-web-components/llms.txt

Display an error alert with `type="error"` and make it closable to allow users to dismiss the message.

```html
<vl-alert
  type="error"
  icon="alert-circle"
  title="Error"
  message="Unable to save changes. Please try again."
  closable
></vl-alert>
```

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

### Basic Progress Indicator Usage

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/components/src/block/progress-indicator/stories/vl-progress-indicator.stories-doc.mdx

Use the `<vl-progress-indicator>` tag to render a basic progress indicator. This serves as the default implementation.

```html
<vl-progress-indicator></vl-progress-indicator>
```

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

### Tabs within Functional Header

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/components/src/block/tabs/stories/vl-tabs.stories-doc.mdx

To render tabs within a functional header, add the `within-functional-header` attribute to the `vl-tabs` element. Refer to the provided link for an example.

```html
<vl-tabs within-functional-header></vl-tabs>
```

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

### Check and List Dependencies with depcheck

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/resources/docs-internal/dependencies.md

Use depcheck to identify unused dependencies in your project. The --oneline flag provides a compact output, and tail -n +2 is used to skip the header line. The output can then be used to list the actual dependencies.

```bash
cd ./build/dist/libs/map
DEPENDENCIES="$(npx depcheck --oneline | tail -n +2)"
echo ${DEPENDENCIES}
cd ../../../..
```

```bash
npm list ${DEPENDENCIES} --json --depth 1
```

```bash
mkdir ./build/dep-to-add
npm list $(npx depcheck ./build/dist/libs/map --oneline | tail -n +2) --json --depth 1 > ./build/dep-to-add/map-dta.json
```

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

### Import VlMapTiledWmsLayer

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/map/src/components/layer/wms-layer/vl-map-tiled-wms-layer/stories/vl-map-tiled-wms-layer.stories-doc.mdx

Import the VlMapTiledWmsLayer component. This is required before using the component.

```js
import { VlMapTiledWmsLayer } from '@domg-wc/map';
```

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

### HTML Form with Input Fields

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/apps/storybook/docs/e_richtlijnen/a_toegankelijkheid-aanpak/1_waarneembaar/1.3_aanpasbaar.mdx

Example of an HTML form structure using input fields with autocomplete attributes for credit card details and a submit button.

```html
<input autocomplete="cc-number" id="cc-num" type="text">
        </div>
        <div>
            <label for="exp-date">Expiry Date:</label>
            <input autocomplete="cc-exp" id="exp-date" type="month">
        </div>
        <div>
            <input type="submit" value="Continue">
        </div>
    </form>
    ```
```

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

### Import Autocomplete Component

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/components/src/block/autocomplete/stories/vl-autocomplete.stories-doc.mdx

Import the VlAutocomplete component from the DOMG-WC components library.

```javascript
import { VlAutocomplete } from '@domg-wc/components/block';
```

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

### JavaScript handling for vl-datepicker

Source: https://context7.com/milieuinfo/flux-web-components/llms.txt

Handle 'vl-change' events to get the ISO value, and use methods like 'getDates()' and 'getRawValue()' to retrieve selected dates or raw input.

```html
<script>
  const datepicker = document.querySelector('vl-datepicker');

  datepicker.addEventListener('vl-change', (event) => {
    console.log('ISO value:', event.detail.value);
  });

  // Get selected dates as Date objects
  const dates = datepicker.getDates();
  console.log('Selected dates:', dates);

  // Get raw input value
  const rawValue = datepicker.getRawValue();
</script>
```

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

### Integrate fat-lib Consumer

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/apps/consumer/src/app-fat-lib/index.html

Use this snippet to integrate the fat-lib consumer component. Ensure the compliance HTML is imported and the target DOM element exists.

```javascript
import { complianceHtml } from './html/compliance.html.js'; document.getElementById('domg-wc-compliance').innerHTML = complianceHtml('fat-lib', '@domg-wc-compliance.js');
```

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

### Parse Form Data on Submit

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/apps/storybook/docs/f_patronen/formulier/4_form-data/formulier-form-data.mdx

Prevent default form submission and use `parseFormData` to get form data as a consistent object. This is useful for handling form submissions manually.

```html
<form @submit=${this.onSubmit}>
  ...
</form>
```

```typescript
onSubmit(event: Event): void {
    // voorkomt het standaardgedrag van het formulier,
    // zodat we de formulierinzending zelf kunnen afhandelen.
    event.preventDefault();

    // parse de form data
    const data = parseFormData(event.target as HTMLFormElement);
    // print de form data in de console
    console.log(data);
}
```

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

### Manually Preload Domains

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/components/src/block/proza-message/stories/vl-proza-message-preloader.stories-doc.mdx

Use the static `preload` method to manually trigger the preloading of domains. This is useful when you need control over the order or timing of preloads.

```javascript
VlProzaMessagePreloader.preload('domein')
```

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

### Import VlMapSelectAction

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/map/src/components/action/layer-action/select-action/stories/vl-map-select-action.stories-doc.mdx

Import the VlMapSelectAction class from the '@domg-wc/map' package. This is required before using the component.

```javascript
import { VlMapSelectAction } from '@domg-wc/map';
```

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

### Set Form Data Example

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/apps/storybook/docs/f_patronen/formulier/4_form-data/formulier-form-data.mdx

Use `setFormData` to populate form controls with data. This function is compatible with custom and native HTML form elements. The data format is the same as the output of `parseFormData`.

```html
<form id="example-form">
    <input type="text" name="naam" />
    <select name="hobbies" multiple>
        <option value="value1">Value 1</option>
        <option value="value2">Value 2</option>
        <option value="value3">Value 3</option>
    </select>
    <input type="checkbox" name="waarheidsgetrouw" value="spreekt-de-waarheid">
</form>
```

```typescript
const formElement = document.getElementById('example-form') as HTMLFormElement;
// stel de form data in
setFormData(formElement, {
    naam: 'Dehbi',
    hobbies: ['Drummen', 'Zwemmen']
    });
```

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

### Import VlMapImageWmsLayer

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/map/src/components/layer/wms-layer/vl-map-image-wms-layer/stories/vl-map-image-wms-layer.stories-doc.mdx

Import the VlMapImageWmsLayer class from the map library. This is required before using the component.

```js
import { VlMapImageWmsLayer } from '@domg-wc/map';
```

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

### vl-select with grouped options

Source: https://context7.com/milieuinfo/flux-web-components/llms.txt

Organize options into groups using optgroup for better user experience.

```html
<vl-select name="city" label="City" placeholder="Choose a city">
  <optgroup label="Belgium">
    <option value="brussels">Brussels</option>
    <option value="antwerp">Antwerp</option>
  </optgroup>
  <optgroup label="Netherlands">
    <option value="amsterdam">Amsterdam</option>
    <option value="rotterdam">Rotterdam</option>
  </optgroup>
</vl-select>
```

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

### Injecting Global Styles into Shadow DOM

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/apps/storybook/docs/g_recepten/css-styling.mdx

When developing custom components with shadow DOM, global styles must be re-injected. This example shows how to import and use `vlElementsStyle` within a LitElement's static styles.

```typescript
import { vlElementsStyle } from '@domg-wc/styles';

export class ComponentMetShadowDom extends LitElement {

    static get styles(): CSSResult[] {
        return [...vlElementsStyle];
    }
}
```

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

### Import VlMapLayerStyle

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/map/src/components/layer-style/stories/vl-map-layer-style.stories-doc.mdx

Import the VlMapLayerStyle class from the @domg-wc/map package. This is required before using the component.

```javascript
import { VlMapLayerStyle } from '@domg-wc/map';
```

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

### Import VlMapMultiselectActions

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/map/src/components/action/layer-action/select-action/multiselect-actions/stories/vl-map-multiselect-actions.stories-doc.mdx

Import the VlMapMultiselectActions class for use in your project.

```js
import { VlMapMultiselectActions } from '@domg-wc/map';
```

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

### Import VlMapSideSheet

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/map/src/components/side-sheet/stories/vl-map-side-sheet.stories-doc.mdx

Import the VlMapSideSheet class for use in your project. Ensure this component is available in your environment.

```javascript
import { VlMapSideSheet } from '@domg-wc/map';
```

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

### Basic Side Navigation Layout Usage

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/components/src/block/next/side-navigation/stories/vl-side-navigation-layout.stories-doc.mdx

Use the vl-side-navigation-layout-next component with a content slot to automatically generate a navigation.

```html
<vl-side-navigation-layout-next>
    <div slot="content">
        <!-- Je content met headings en bijhorende id's-->
    </div>
</vl-side-navigation-layout-next>
```

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

### External Link with Label

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/components/src/atom/link/stories/vl-link.stories-doc.mdx

Configure an external link by providing a label. This clearly indicates that the link opens in a new window and provides descriptive text for screen readers.

```html
<vl-link label="Dit is een externe link" external>Externe link</vl-link>
```

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

### Import VlMapActionControl

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/map/src/components/controls/action-control/stories/vl-map-action-control.stories-doc.mdx

Import the VlMapActionControl class from the '@domg-wc/map' library.

```javascript
import { VlMapActionControl } from '@domg-wc/map';
```

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

### Import Side Navigation Component

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/components/src/block/next/side-navigation/stories/vl-side-navigation.stories-doc.mdx

Import the VlSideNavigationComponent for use in your project.

```javascript
import { VlSideNavigationComponent } from '@domg-wc/components/block/next';
```

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

### Registering a Web Component (Direct Import)

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/apps/storybook/docs/a_afnemen/1_aan-de-slag.mdx

Use this method to register a web component by directly importing its specific module. This makes the component's tag available for use in your HTML.

```javascript
import '@domg-wc/components/block/accordion';
```

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

### Import VlDocumentComponent

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/components/src/block/document/stories/vl-document.stories-doc.mdx

Import the VlDocumentComponent from the components library. This is required before using the component in your project.

```javascript
import { VlDocumentComponent } from '@domg-wc/components/block';
```

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

### Use CSS Variables for Styling

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/styles/src/base/var/stories/vl-var.stories-doc.mdx

Demonstrates how to use CSS variables for styling elements. Ensure the variables are defined in the global scope.

```css
.my-details {
    background-color: var(--vl-color--background-default);
}
```

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

### Generate Dependency Tree with dependency-tree

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/resources/docs-internal/dependencies.md

Use dependency-tree to generate a dependency tree for your project files. Specify the directory and the entry file. Optional arguments include --list-form for list format, -c for require config, and -w for webpack config.

```bash
dependency-tree --directory=path/to/all/supported/files [--list-form] [-c path/to/require/config] [-w path/to/webpack/config] filename
```

```bash
dependency-tree --directory=libs/components/src index.ts
```

```bash
dependency-tree --directory=./libs/components/src ./libs/components/src/index.ts
```

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

### Import VlTitleComponent

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/components/src/atom/title/stories/vl-title.stories-doc.mdx

Import the VlTitleComponent from the '@domg-wc/components/atom' package. This is necessary before using the component in your JavaScript code.

```javascript
import { VlTitleComponent } from '@domg-wc/components/atom';
```

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

### Voorbeeld: Afbeelding Gecombineerd met Tekst

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/apps/storybook/docs/e_richtlijnen/a_toegankelijkheid-aanpak/1_waarneembaar/1.1_tekstalternatieven.mdx

Laat zien hoe een afbeelding kan worden gecombineerd met tekst, waarbij de afbeelding zelf een leeg `alt`-attribuut heeft omdat de tekst de functie ervan beschrijft.

```html
<a href="products.html">
        <img src="icon.gif" alt="">Products page
    </a>
```

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

### Import VlCheckboxComponent

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/components/src/form/checkbox/stories/vl-checkbox.stories-doc.mdx

Import the VlCheckboxComponent for use in your project. Ensure it's available in your components.

```javascript
import { VlCheckboxComponent } from '@domg-wc/components/form';
```

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

### Storybook Template Guidelines

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/AGENTS.md

Guidelines for writing Storybook templates, including helper functions, attribute/property/event prefixes, and slot handling. Ensure correct usage of `story()` and `unsafeHTML` to prevent issues.

```typescript
story() helper from "@resources/utils-storybook"
sort args alphabetically (unless logical order preferred)
Boolean attributes use `?` prefix (e.g., `?disabled=${disabled}`)
Properties prefixed with `.` (e.g., `.steps=${steps}`)
Events prefixed with `@` (e.g., `@vl-click-step=${handler}`)
Slots use `unsafeHTML` directive (e.g., `${unsafeHTML(defaultSlot)}`)
```

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

### Create Custom Flux Web Component

Source: https://context7.com/milieuinfo/flux-web-components/llms.txt

Illustrates how to create a custom web component by extending `BaseLitElement` and using the `webComponent` decorator. It includes defining styles with `vlResetStyles` and `css`, and properties using `PropertyDeclarations`.

```typescript
// Create a custom component extending Flux base classes
import { BaseLitElement, webComponent } from '@domg-wc/common';
import { html, css, CSSResult, PropertyDeclarations } from 'lit';

@webComponent('my-custom-component')
export class MyCustomComponent extends BaseLitElement {
  private title = '';

  static get styles(): CSSResult[] {
    return [
      vlResetStyles,
      css`
        :host {
          display: block;
          padding: var(--vl-spacing-medium);
        }
      `
    ];
  }

  static get properties(): PropertyDeclarations {
    return {
      title: { type: String }
    };
  }

  render() {
    return html`
      <vl-title>${this.title}</vl-title>
      <slot></slot>
    `;
  }
}
```

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

### Import ApplicationMenuLink Type

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/components/src/compliance/next/header/stories/vl-header.stories-doc.mdx

Import the ApplicationMenuLink TypeScript type from the '@govflanders/vl-widget-global-header-types' package. This is necessary for defining application links.

```javascript
import { ApplicationMenuLink } from '@govflanders/vl-widget-global-header-types';
```

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

### Import Side Navigation Layout Component

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/components/src/block/next/side-navigation/stories/vl-side-navigation-layout.stories-doc.mdx

Import the necessary component for using the side navigation layout.

```javascript
import { VlSideNavigationLayoutComponent } from '@domg-wc/components/block/next';
```

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

### Import VlMapOverviewMap Component

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/map/src/components/overview-map/stories/vl-map-overview-map.stories-doc.mdx

Import the VlMapOverviewMap component for use in your project. Ensure this import is present before using the component.

```javascript
import { VlMapOverviewMap } from '@domg-wc/map';
```

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

### Import Flux Web Components (Named Exports)

Source: https://context7.com/milieuinfo/flux-web-components/llms.txt

Demonstrates importing specific components like `VlButtonComponent` and `VlInputFieldComponent` using named exports for better tree-shaking. Components are then registered using `registerWebComponents` from the common utilities.

```typescript
// Named import (recommended for tree-shaking)
import { VlButtonComponent, VlInputFieldComponent } from '@domg-wc/components';
import { registerWebComponents } from '@domg-wc/common';

// Register components
registerWebComponents([VlButtonComponent, VlInputFieldComponent]);
```

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

### Import VlLinkComponent

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/components/src/atom/link/stories/vl-link.stories-doc.mdx

Import the VlLinkComponent for use in your project. Ensure this import is present before using the component.

```javascript
import { VlLinkComponent } from '@domg-wc/components/atom';
```

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

### Configure Web-Types for Flux Component

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/SKILLS.md

Import component argTypes and add the component to the web-types configuration file. This step is crucial for IDE support.

```typescript
import { {name}ArgTypes } from '../../../libs/components/src/{type}/{name}/stories/vl-{name}.stories-arg';

buildWTConfig(
    'vl-{name}',
    {name}ArgTypes,
    '../../libs/components/src/{type}/{name}/stories/vl-{name}.stories-doc.mdx',
    '/docs/components-{type}-{name}--documentatie'
),
```

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

### Project Dependencies in package.json

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/apps/storybook/docs/a_afnemen/1_aan-de-slag.mdx

Include these libraries in your package.json. The '@domg-wc/components' package is mandatory, while '@domg-wc/map' is optional for map functionality. Ensure you have access to the Departement Omgeving artifactory.

```json
{
    "name": "web-app",
    "version": "1.2.0",
    "license": "MIT",
    "scripts": {
        "build": "nx build",
    },
    "private": true,
    "devDependencies": {
        "cypress": "13.6.6",
        "eslint": "8.57.0",
        "jest": "29.7.0",
        "nx": "18.0.8",
        "prettier": "2.8.8",
        "typescript": "5.4.2"
    },
    "dependencies": {
        "@domg-wc/components": "2.0.0",
        "@domg-wc/map": "2.0.0"
    },
    "volta": {
        "node": "20.11.0"
    }
}
```

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

### Link Doel met Afbeelding

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/apps/storybook/docs/e_richtlijnen/a_toegankelijkheid-aanpak/2_bediendbaar/2.4_navigeerbaar.mdx

Wanneer een link een afbeelding bevat, gebruik dan het 'alt' attribuut van de afbeelding om het doel van de link te beschrijven.

```html
<a href="routes.html">
    <img src="topo.gif" alt="Current routes at Boulders Climbing Gym">
</a>
```

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

### Import VlProzaMessagePreloader

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/components/src/block/proza-message/stories/vl-proza-message-preloader.stories-doc.mdx

Import the VlProzaMessagePreloader component from the '@domg-wc/components/block' package. This is necessary to use the component in your JavaScript.

```javascript
import { VlProzaMessagePreloader } from '@domg-wc/components/block';
```

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

### Import Alert Component

Source: https://github.com/milieuinfo/flux-web-components/blob/develop-v2/libs/components/src/block/alert/stories/vl-alert.stories-doc.mdx

Import the VlAlert component from the library. This is required before using the component in your project.

```javascript
import { VlAlert } from '@domg-wc/components/block';
```