@dsn-starter-kit/components-react 2.0.0 → 3.1.0

package/dist/Menu/Menu.d.ts

@@ -1,56 +0,0 @@
-import React from 'react';
-import './Menu.css';
-export type MenuOrientation = 'vertical' | 'horizontal';
-export interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
-    /**
-     * Bepaalt de lay-out van de items.
-     * - `vertical` (standaard): items onder elkaar, volledige breedte
-     * - `horizontal`: items naast elkaar, breedte op inhoud
-     * @default 'vertical'
-     */
-    orientation?: MenuOrientation;
-    /**
-     * Geeft aan dat level-1 items een `iconStart` hebben.
-     * Level 2+ items worden dan ingesprongen zodat hun tekst uitlijnt met het label van level 1.
-     * @default false
-     */
-    iconStart?: boolean;
-    /**
-     * `MenuLink`- en/of `MenuButton`-items (verplicht)
-     */
-    children: React.ReactNode;
-    /**
-     * Aanvullende CSS-klassen voor het `<ul>`-element
-     */
-    className?: string;
-}
-/**
- * Menu component
- * Containercomponent voor MenuLink- en MenuButton-items.
- * Rendert een `<ul>` met verticale (standaard) of horizontale oriëntatie.
- *
- * Gebruik `Menu` altijd binnen een semantisch element zoals `<nav>` —
- * dit is de verantwoordelijkheid van de ouder.
- *
- * @example
- * ```tsx
- * // Verticaal (standaard)
- * <nav aria-label="Hoofdnavigatie">
- *   <Menu>
- *     <MenuLink href="/home">Home</MenuLink>
- *     <MenuLink href="/over">Over ons</MenuLink>
- *     <MenuButton onClick={handleLogout}>Uitloggen</MenuButton>
- *   </Menu>
- * </nav>
- *
- * // Horizontaal
- * <nav aria-label="Paginanavigatie">
- *   <Menu orientation="horizontal">
- *     <MenuLink href="/home" current>Home</MenuLink>
- *     <MenuLink href="/over">Over ons</MenuLink>
- *   </Menu>
- * </nav>
- * ```
- */
-export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLUListElement>>;
-//# sourceMappingURL=Menu.d.ts.map

package/dist/Menu/Menu.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,YAAY,CAAC;AAEpB,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG,YAAY,CAAC;AAExD,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACvE;;;;;OAKG;IACH,WAAW,CAAC,EAAE,eAAe,CAAC;IAE9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,IAAI,oFAwBhB,CAAC"}

package/dist/Menu/Menu.js

@@ -1,38 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { classNames } from '@dsn-starter-kit/core';
-import './Menu.css';
-/**
- * Menu component
- * Containercomponent voor MenuLink- en MenuButton-items.
- * Rendert een `<ul>` met verticale (standaard) of horizontale oriëntatie.
- *
- * Gebruik `Menu` altijd binnen een semantisch element zoals `<nav>` —
- * dit is de verantwoordelijkheid van de ouder.
- *
- * @example
- * ```tsx
- * // Verticaal (standaard)
- * <nav aria-label="Hoofdnavigatie">
- *   <Menu>
- *     <MenuLink href="/home">Home</MenuLink>
- *     <MenuLink href="/over">Over ons</MenuLink>
- *     <MenuButton onClick={handleLogout}>Uitloggen</MenuButton>
- *   </Menu>
- * </nav>
- *
- * // Horizontaal
- * <nav aria-label="Paginanavigatie">
- *   <Menu orientation="horizontal">
- *     <MenuLink href="/home" current>Home</MenuLink>
- *     <MenuLink href="/over">Over ons</MenuLink>
- *   </Menu>
- * </nav>
- * ```
- */
-export const Menu = React.forwardRef(({ orientation = 'vertical', iconStart = false, className, children, ...props }, ref) => {
-    const classes = classNames('dsn-menu', orientation === 'horizontal' && 'dsn-menu--horizontal', iconStart && 'dsn-menu--icon-start', className);
-    return (_jsx("ul", { ref: ref, className: classes, ...props, children: children }));
-});
-Menu.displayName = 'Menu';
-//# sourceMappingURL=Menu.js.map

package/dist/Menu/Menu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../src/Menu/Menu.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,YAAY,CAAC;AA+BpB;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAClC,CACE,EACE,WAAW,GAAG,UAAU,EACxB,SAAS,GAAG,KAAK,EACjB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,OAAO,GAAG,UAAU,CACxB,UAAU,EACV,WAAW,KAAK,YAAY,IAAI,sBAAsB,EACtD,SAAS,IAAI,sBAAsB,EACnC,SAAS,CACV,CAAC;IAEF,OAAO,CACL,aAAI,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,KAAM,KAAK,YACxC,QAAQ,GACN,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}

package/dist/Menu/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Menu';
-//# sourceMappingURL=index.d.ts.map

package/dist/Menu/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/dist/Menu/index.js

@@ -1,2 +0,0 @@
-export * from './Menu';
-//# sourceMappingURL=index.js.map

package/dist/Menu/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/dist/MenuButton/MenuButton.css

@@ -1,106 +0,0 @@
-/**
- * MenuButton Component
- * Navigatieknop voor JS-acties met icoon- en badge-ondersteuning.
- * Semantisch een `<button>`, visueel consistent met MenuLink.
- *
- * Gedeelde visuele stijl via --dsn-menu-item-* tokens (menu-item.json).
- *
- * Structuur:
- * <li class="dsn-menu-button">
- *   <button type="button" class="dsn-menu-button__button">
- *     <svg class="dsn-icon" aria-hidden="true"><!-- icoon-start --></svg>
- *     <span class="dsn-menu-button__label">Label</span>
- *     <span class="dsn-dot-badge dsn-dot-badge--negative" aria-hidden="true"></span>
- *     <svg class="dsn-icon" aria-hidden="true"><!-- icoon-end --></svg>
- *   </button>
- * </li>
- */
-
-/* =============================================================================
-   List item
-   ============================================================================= */
-
-.dsn-menu-button {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-/* =============================================================================
-   Button
-   ============================================================================= */
-
-.dsn-menu-button__button {
-  /* Button reset */
-  appearance: none;
-  background: none;
-  border: 0;
-  cursor: pointer;
-  position: relative; /* Ankerpunt voor DotBadge */
-
-  /* Layout */
-  display: inline-flex;
-  align-items: center;
-  width: 100%;
-  min-block-size: var(--dsn-menu-item-min-block-size);
-  gap: var(--dsn-menu-item-gap);
-  padding-block: var(--dsn-menu-item-padding-block);
-  padding-inline: var(--dsn-menu-item-padding-inline);
-
-  /* Typography */
-  font-family: inherit;
-  font-size: var(--dsn-menu-item-font-size);
-  font-weight: var(--dsn-menu-item-font-weight);
-  line-height: var(--dsn-menu-item-line-height);
-  text-align: start;
-
-  /* Colors */
-  color: var(--dsn-menu-item-color);
-  background-color: var(--dsn-menu-item-background-color);
-
-  /* Transitions */
-  transition:
-    background-color var(--dsn-transition-duration-normal)
-      var(--dsn-transition-easing-default),
-    color var(--dsn-transition-duration-normal)
-      var(--dsn-transition-easing-default);
-}
-
-.dsn-menu-button__button > .dsn-icon {
-  width: var(--dsn-menu-item-icon-size);
-  height: var(--dsn-menu-item-icon-size);
-  flex-shrink: 0;
-}
-
-.dsn-menu-button__label {
-  /* De <button> zelf is full-width via width: 100%.
-     Het label vult de resterende ruimte zodat iconEnd rechts uitlijnt. */
-  flex: 1;
-  text-align: start;
-}
-
-/* =============================================================================
-   States
-   ============================================================================= */
-
-.dsn-menu-button__button:hover {
-  color: var(--dsn-menu-item-hover-color);
-  background-color: var(--dsn-menu-item-hover-background-color);
-}
-
-.dsn-menu-button__button:active {
-  color: var(--dsn-menu-item-active-color);
-  background-color: var(--dsn-menu-item-active-background-color);
-}
-
-.dsn-menu-button__button:focus-visible {
-  background-color: var(--dsn-focus-background-color);
-  color: var(--dsn-focus-color);
-  outline: var(--dsn-focus-outline-width) var(--dsn-focus-outline-style)
-    var(--dsn-focus-outline-color);
-  outline-offset: var(--dsn-focus-outline-offset);
-  box-shadow: 0 0 0
-    calc(var(--dsn-focus-outline-offset) + var(--dsn-focus-outline-width))
-    var(--dsn-focus-inverse-outline-color);
-}
-

package/dist/MenuButton/MenuButton.d.ts

@@ -1,54 +0,0 @@
-import React from 'react';
-import './MenuButton.css';
-export interface MenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    /**
-     * Icoon links van het label
-     */
-    iconStart?: React.ReactNode;
-    /**
-     * Icoon rechts van het label
-     */
-    iconEnd?: React.ReactNode;
-    /**
-     * DotBadge element voor statusindicatie (bijv. nieuw/ongelezen zonder getal).
-     * Verwacht een `<DotBadge>` component.
-     */
-    dotBadge?: React.ReactNode;
-    /**
-     * Zichtbare knoptekst
-     */
-    children?: React.ReactNode;
-    /**
-     * Aanvullende CSS-klassen voor het `<li>`-element
-     */
-    className?: string;
-}
-/**
- * MenuButton component
- * Navigatieknop voor JavaScript-acties — semantisch een `<button>`, visueel consistent met MenuLink.
- *
- * Gebruik in een `<ul>`-element wanneer de actie geen URL-navigatie is maar een JS-handeling triggert
- * (bijv. uitloggen, een modal openen of een sectie in/uitklappen).
- *
- * @example
- * ```tsx
- * // Basisgebruik
- * <MenuButton onClick={handleLogout}>Uitloggen</MenuButton>
- *
- * // Met icoon start
- * <MenuButton iconStart={<Icon name="settings" aria-hidden />}>
- *   Instellingen
- * </MenuButton>
- *
- * // Met DotBadge (statusindicatie)
- * <MenuButton
- *   iconStart={<Icon name="bell" aria-hidden />}
- *   dotBadge={<DotBadge variant="negative" />}
- * >
- *   Meldingen
- *   <span className="dsn-visually-hidden">, nieuwe meldingen beschikbaar</span>
- * </MenuButton>
- * ```
- */
-export declare const MenuButton: React.ForwardRefExoticComponent<MenuButtonProps & React.RefAttributes<HTMLButtonElement>>;
-//# sourceMappingURL=MenuButton.d.ts.map

package/dist/MenuButton/MenuButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MenuButton.d.ts","sourceRoot":"","sources":["../../src/MenuButton/MenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,kBAAkB,CAAC;AAE1B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACpF;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,UAAU,2FAiCtB,CAAC"}

package/dist/MenuButton/MenuButton.js

@@ -1,37 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { classNames } from '@dsn-starter-kit/core';
-import './MenuButton.css';
-/**
- * MenuButton component
- * Navigatieknop voor JavaScript-acties — semantisch een `<button>`, visueel consistent met MenuLink.
- *
- * Gebruik in een `<ul>`-element wanneer de actie geen URL-navigatie is maar een JS-handeling triggert
- * (bijv. uitloggen, een modal openen of een sectie in/uitklappen).
- *
- * @example
- * ```tsx
- * // Basisgebruik
- * <MenuButton onClick={handleLogout}>Uitloggen</MenuButton>
- *
- * // Met icoon start
- * <MenuButton iconStart={<Icon name="settings" aria-hidden />}>
- *   Instellingen
- * </MenuButton>
- *
- * // Met DotBadge (statusindicatie)
- * <MenuButton
- *   iconStart={<Icon name="bell" aria-hidden />}
- *   dotBadge={<DotBadge variant="negative" />}
- * >
- *   Meldingen
- *   <span className="dsn-visually-hidden">, nieuwe meldingen beschikbaar</span>
- * </MenuButton>
- * ```
- */
-export const MenuButton = React.forwardRef(({ iconStart, iconEnd, dotBadge, className, children, type = 'button', ...props }, ref) => {
-    const liClasses = classNames('dsn-menu-button', className);
-    return (_jsx("li", { className: liClasses, children: _jsxs("button", { ref: ref, type: type, className: "dsn-menu-button__button", ...props, children: [iconStart, _jsxs("span", { className: "dsn-menu-button__label", children: [children, dotBadge] }), iconEnd] }) }));
-});
-MenuButton.displayName = 'MenuButton';
-//# sourceMappingURL=MenuButton.js.map

package/dist/MenuButton/MenuButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MenuButton.js","sourceRoot":"","sources":["../../src/MenuButton/MenuButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,kBAAkB,CAAC;AA8B1B;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACxC,CACE,EACE,SAAS,EACT,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,SAAS,GAAG,UAAU,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC;IAE3D,OAAO,CACL,aAAI,SAAS,EAAE,SAAS,YACtB,kBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,yBAAyB,KAC/B,KAAK,aAER,SAAS,EACV,gBAAM,SAAS,EAAC,wBAAwB,aACrC,QAAQ,EACR,QAAQ,IACJ,EACN,OAAO,IACD,GACN,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}

package/dist/MenuButton/index.d.ts

@@ -1,2 +0,0 @@
-export * from './MenuButton';
-//# sourceMappingURL=index.d.ts.map

package/dist/MenuButton/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MenuButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/MenuButton/index.js

@@ -1,2 +0,0 @@
-export * from './MenuButton';
-//# sourceMappingURL=index.js.map

package/dist/MenuButton/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/MenuButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/MenuLink/MenuLink.css

@@ -1,212 +0,0 @@
-/**
- * MenuLink Component
- * Navigatielink met niveau-hiërarchie, actieve staat en uitklapbare subnavigatie.
- * Semantisch een `<a>`, visueel consistent met MenuButton.
- *
- * Gedeelde visuele stijl via --dsn-menu-item-* tokens (menu-item.json).
- * MenuLink-specifieke tokens via --dsn-menu-link-* (current-staat, level-indent).
- *
- * Structuur:
- * <li class="dsn-menu-link">
- *   <a class="dsn-menu-link__link" href="/pagina">
- *     <svg class="dsn-icon" aria-hidden="true"><!-- icoon-start --></svg>
- *     <span class="dsn-menu-link__label">Pagina</span>
- *     <span class="dsn-number-badge dsn-number-badge--negative" aria-hidden="true">5</span>
- *     <svg class="dsn-icon" aria-hidden="true"><!-- icoon-end --></svg>
- *   </a>
- *   <!-- optioneel: scheidingslijn + uitklapknop -->
- *   <span class="dsn-menu-link__divider" aria-hidden="true"></span>
- *   <button type="button" class="dsn-button dsn-button--subtle dsn-button--size-small dsn-button--icon-only dsn-menu-link__expand-button" aria-expanded="false">
- *     <svg class="dsn-icon" aria-hidden="true"><!-- chevron-right --></svg>
- *     <span class="dsn-button__label">
- *       Uitklappen
- *       <span class="dsn-visually-hidden"> voor Pagina</span>
- *     </span>
- *   </button>
- * </li>
- *
- * Niveau-varianten (op het <li>-element):
- *   dsn-menu-link--level-2   (1× level-indent via margin-inline-start)
- *   dsn-menu-link--level-3   (2× level-indent via margin-inline-start)
- *   dsn-menu-link--level-4   (3× level-indent via margin-inline-start)
- *
- * Actieve pagina — border-inline-start indicator op de <a>:
- *   aria-current="page" op het <a>-element → current-kleuren + indicator
- *
- * Uitklapbaar:
- *   aria-expanded="true/false" op dsn-menu-link__expand-button
- */
-
-/* =============================================================================
-   List item
-   ============================================================================= */
-
-.dsn-menu-link {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  align-items: stretch;
-  /* Ruimte tussen de link, de scheiding en de uitklapknop */
-  column-gap: var(--dsn-space-inline-sm);
-}
-
-/* =============================================================================
-   Link
-   ============================================================================= */
-
-.dsn-menu-link__link {
-  display: inline-flex;
-  align-items: center;
-  flex: 1;
-  min-block-size: var(--dsn-menu-item-min-block-size);
-  gap: var(--dsn-menu-item-gap);
-  padding-block: var(--dsn-menu-item-padding-block);
-  padding-inline: var(--dsn-menu-item-padding-inline);
-  font-family: inherit;
-  font-size: var(--dsn-menu-item-font-size);
-  font-weight: var(--dsn-menu-item-font-weight);
-  line-height: var(--dsn-menu-item-line-height);
-  text-decoration: none;
-  color: var(--dsn-menu-item-color);
-  background-color: var(--dsn-menu-item-background-color);
-  transition:
-    background-color var(--dsn-transition-duration-normal)
-      var(--dsn-transition-easing-default),
-    color var(--dsn-transition-duration-normal)
-      var(--dsn-transition-easing-default);
-}
-
-.dsn-menu-link__link > .dsn-icon {
-  width: var(--dsn-menu-item-icon-size);
-  height: var(--dsn-menu-item-icon-size);
-  flex-shrink: 0;
-}
-
-.dsn-menu-link__label {
-  /* Geen flex: 1 — badge en iconEnd staan direct achter de tekst.
-     De <a> zelf is flex: 1 en vult de volledige breedte. */
-}
-
-/* =============================================================================
-   States
-   ============================================================================= */
-
-.dsn-menu-link__link:hover {
-  color: var(--dsn-menu-item-hover-color);
-  background-color: var(--dsn-menu-item-hover-background-color);
-}
-
-.dsn-menu-link__link:active {
-  color: var(--dsn-menu-item-active-color);
-  background-color: var(--dsn-menu-item-active-background-color);
-}
-
-.dsn-menu-link__link:focus-visible {
-  background-color: var(--dsn-focus-background-color);
-  color: var(--dsn-focus-color);
-  outline: var(--dsn-focus-outline-width) var(--dsn-focus-outline-style)
-    var(--dsn-focus-outline-color);
-  outline-offset: var(--dsn-focus-outline-offset);
-  box-shadow: 0 0 0
-    calc(var(--dsn-focus-outline-offset) + var(--dsn-focus-outline-width))
-    var(--dsn-focus-inverse-outline-color);
-}
-
-/* =============================================================================
-   Current (actieve pagina) — border-inline-start indicator
-   ============================================================================= */
-
-.dsn-menu-link__link[aria-current='page'] {
-  font-weight: var(--dsn-menu-link-current-font-weight);
-  color: var(--dsn-menu-link-current-color);
-  background-color: var(--dsn-menu-link-current-background-color);
-  border-inline-start: var(--dsn-menu-link-current-indicator-width) solid
-    var(--dsn-menu-link-current-indicator-color);
-  /* Compenseer de indicator-breedte zodat de tekst horizontaal uitlijnt met niet-actieve items */
-  padding-inline-start: calc(
-    var(--dsn-menu-item-padding-inline) -
-      var(--dsn-menu-link-current-indicator-width)
-  );
-}
-
-.dsn-menu-link__link[aria-current='page']:hover {
-  color: var(--dsn-menu-link-current-hover-color);
-  background-color: var(--dsn-menu-link-current-hover-background-color);
-}
-
-.dsn-menu-link__link[aria-current='page']:active {
-  color: var(--dsn-menu-link-current-active-color);
-  background-color: var(--dsn-menu-link-current-active-background-color);
-}
-
-/* =============================================================================
-   Current in horizontale Menu — border-block-end indicator
-   Overschrijft de border-inline-start uit de verticale variant.
-   ============================================================================= */
-
-.dsn-menu--horizontal .dsn-menu-link__link[aria-current='page'] {
-  border-inline-start: none;
-  /* Reset de padding-compensatie van de verticale variant */
-  padding-inline-start: var(--dsn-menu-item-padding-inline);
-  border-block-end: var(--dsn-menu-link-current-indicator-width) solid
-    var(--dsn-menu-link-current-indicator-color);
-  /* Compenseer de indicator-hoogte zodat de tekst verticaal uitlijnt met niet-actieve items */
-  padding-block-end: calc(
-    var(--dsn-menu-item-padding-block) -
-      var(--dsn-menu-link-current-indicator-width)
-  );
-}
-
-/* =============================================================================
-   Niveau-inspringing (level-indent) — via margin-inline-start
-   Zodat de border-inline-start indicator dicht bij de tekst blijft.
-   ============================================================================= */
-
-.dsn-menu-link--level-2 .dsn-menu-link__link {
-  margin-inline-start: var(--dsn-menu-link-level-indent);
-}
-
-.dsn-menu-link--level-3 .dsn-menu-link__link {
-  margin-inline-start: calc(2 * var(--dsn-menu-link-level-indent));
-}
-
-.dsn-menu-link--level-4 .dsn-menu-link__link {
-  margin-inline-start: calc(3 * var(--dsn-menu-link-level-indent));
-}
-
-/* =============================================================================
-   Scheidingslijn (divider) — losse <span> tussen link en uitklapknop
-   ============================================================================= */
-
-.dsn-menu-link__divider {
-  display: block;
-  flex-shrink: 0;
-  inline-size: 1px;
-  align-self: stretch;
-  background-color: var(--dsn-color-neutral-border-subtle);
-}
-
-/* =============================================================================
-   Uitklapknop (expand button)
-   ============================================================================= */
-
-.dsn-menu-link__expand-button {
-  flex-shrink: 0;
-  align-self: center;
-}
-
-/* Chevron (chevron-down) — 180° rotatie wanneer uitgevouwen, zelfde als Details */
-.dsn-menu-link__expand-button > .dsn-icon {
-  transition: transform var(--dsn-transition-duration-normal)
-    var(--dsn-transition-easing-default);
-}
-
-.dsn-menu-link__expand-button[aria-expanded='false'] > .dsn-icon {
-  transform: rotate(0deg);
-}
-
-.dsn-menu-link__expand-button[aria-expanded='true'] > .dsn-icon {
-  transform: rotate(180deg);
-}
-

package/dist/MenuLink/MenuLink.d.ts

@@ -1,96 +0,0 @@
-import React from 'react';
-import './MenuLink.css';
-export type MenuLinkLevel = 1 | 2 | 3 | 4;
-export interface MenuLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-    /**
-     * Navigatie-URL van de link
-     */
-    href?: string;
-    /**
-     * Hiërarchisch niveau — bepaalt de `padding-inline-start` inspringing
-     * @default 1
-     */
-    level?: MenuLinkLevel;
-    /**
-     * Markeert de actieve/huidige pagina.
-     * Voegt `aria-current="page"` toe aan het `<a>`-element.
-     * @default false
-     */
-    current?: boolean;
-    /**
-     * Icoon links van het label
-     */
-    iconStart?: React.ReactNode;
-    /**
-     * Icoon rechts van het label — gebruik hier bij voorkeur geen NumberBadge (zie `numberBadge`)
-     */
-    iconEnd?: React.ReactNode;
-    /**
-     * NumberBadge element rechts van het label (naast iconEnd)
-     * Verwacht een `<NumberBadge>` component.
-     */
-    numberBadge?: React.ReactNode;
-    /**
-     * Toont een uitklapknop naast de link (voor subnavigatie).
-     * @default false
-     */
-    subItems?: boolean;
-    /**
-     * Geeft aan of de subnavigatie momenteel uitgevouwen is.
-     * Alleen relevant wanneer `subItems` true is.
-     * @default false
-     */
-    expanded?: boolean;
-    /**
-     * Callback die aangeroepen wordt wanneer op de uitklapknop geklikt wordt.
-     */
-    onExpandToggle?: () => void;
-    /**
-     * Zichtbare linktekst — ook gebruikt voor de toegankelijke naam van de uitklapknop
-     */
-    children?: React.ReactNode;
-    /**
-     * Aanvullende CSS-klassen voor het `<li>`-element
-     */
-    className?: string;
-}
-/**
- * MenuLink component
- * Navigatielink met niveau-hiërarchie, actieve staat en uitklapbare subnavigatie.
- * Semantisch een `<a>`, visueel consistent met MenuButton.
- *
- * Gebruik in een `<ul>`-element (het `<nav>`-element met lijst).
- *
- * @example
- * ```tsx
- * // Basisgebruik (level 1)
- * <MenuLink href="/dashboard">Dashboard</MenuLink>
- *
- * // Actieve pagina
- * <MenuLink href="/rapporten" current>Rapporten</MenuLink>
- *
- * // Level 2 (subpagina)
- * <MenuLink href="/rapporten/maandelijks" level={2}>Maandelijks</MenuLink>
- *
- * // Met icoon en NumberBadge
- * <MenuLink
- *   href="/inbox"
- *   iconStart={<Icon name="mail" aria-hidden />}
- *   numberBadge={<NumberBadge variant="negative">5</NumberBadge>}
- * >
- *   Inbox
- * </MenuLink>
- *
- * // Met uitklapknop
- * <MenuLink
- *   href="/rapporten"
- *   subItems
- *   expanded={isExpanded}
- *   onExpandToggle={() => setIsExpanded(!isExpanded)}
- * >
- *   Rapporten
- * </MenuLink>
- * ```
- */
-export declare const MenuLink: React.ForwardRefExoticComponent<MenuLinkProps & React.RefAttributes<HTMLAnchorElement>>;
-//# sourceMappingURL=MenuLink.d.ts.map

package/dist/MenuLink/MenuLink.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MenuLink.d.ts","sourceRoot":"","sources":["../../src/MenuLink/MenuLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,gBAAgB,CAAC;AAExB,MAAM,MAAM,aAAa,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAE1C,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAClF;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,QAAQ,yFAkEpB,CAAC"}