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

package/dist/BreadcrumbNavigation/BreadcrumbNavigation.css

@@ -1,216 +0,0 @@
-/**
- * BreadcrumbNavigation component styles for React
- * Re-exports the base BreadcrumbNavigation styles from components-html
- */
-
-/**
- * BreadcrumbNavigation Component
- * Toont de hiërarchische locatie van de gebruiker en biedt navigatie naar bovenliggende pagina's.
- *
- * Usage:
- * <!-- Standaard -->
- * <nav aria-label="Broodkruimelpad" class="dsn-breadcrumb-navigation">
- *   <ol class="dsn-breadcrumb-navigation__list">
- *     <li class="dsn-breadcrumb-navigation__item">
- *       <a href="/home" class="dsn-breadcrumb-navigation__link">Home</a>
- *       <svg class="dsn-icon dsn-breadcrumb-navigation__separator" aria-hidden="true"><!-- chevron-right --></svg>
- *     </li>
- *
- * <!-- Compact item met terug-pijl (back-icon zit binnen de <a>) -->
- *     <li class="dsn-breadcrumb-navigation__item">
- *       <a href="/fruit" class="dsn-breadcrumb-navigation__link">
- *         <svg class="dsn-icon dsn-breadcrumb-navigation__back-icon" aria-hidden="true"><!-- arrow-left --></svg>
- *         Fruit
- *       </a>
- *       <svg class="dsn-icon dsn-breadcrumb-navigation__separator" aria-hidden="true"><!-- chevron-right --></svg>
- *     </li>
- *     <li class="dsn-breadcrumb-navigation__item dsn-breadcrumb-navigation__item--current">
- *       <a href="/appel" class="dsn-breadcrumb-navigation__link" aria-current="page">Appel</a>
- *     </li>
- *   </ol>
- * </nav>
- *
- * <!-- Compact variant (container query responsive collapse) -->
- * <nav aria-label="Broodkruimelpad" class="dsn-breadcrumb-navigation dsn-breadcrumb-navigation--compact">
- *   ...
- * </nav>
- */
-
-/* ===========================
-   Base — nav wrapper
-   =========================== */
-.dsn-breadcrumb-navigation {
-  display: block;
-  padding-block: var(--dsn-space-block-lg);
-  font-size: var(--dsn-breadcrumb-navigation-font-size);
-  font-weight: var(--dsn-breadcrumb-navigation-font-weight);
-  line-height: var(--dsn-breadcrumb-navigation-line-height);
-}
-
-/* ===========================
-   List
-   =========================== */
-.dsn-breadcrumb-navigation__list {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  column-gap: var(--dsn-breadcrumb-navigation-column-gap);
-}
-
-/* ===========================
-   Item
-   =========================== */
-.dsn-breadcrumb-navigation__item {
-  display: flex;
-  align-items: center;
-  padding-block: var(--dsn-breadcrumb-navigation-item-padding-block);
-  padding-inline: var(--dsn-breadcrumb-navigation-item-padding-inline);
-  gap: var(--dsn-breadcrumb-navigation-column-gap);
-}
-
-/* ===========================
-   Current page item
-   =========================== */
-.dsn-breadcrumb-navigation__item--current {
-  color: var(--dsn-breadcrumb-navigation-current-color);
-}
-
-/* ===========================
-   Link
-   =========================== */
-.dsn-breadcrumb-navigation__link {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--dsn-breadcrumb-navigation-link-column-gap);
-  color: var(--dsn-breadcrumb-navigation-link-color);
-  text-decoration-line: var(
-    --dsn-breadcrumb-navigation-link-text-decoration-line
-  );
-  text-underline-offset: var(
-    --dsn-breadcrumb-navigation-link-text-underline-offset
-  );
-  text-decoration-thickness: var(
-    --dsn-breadcrumb-navigation-link-text-decoration-thickness
-  );
-  cursor: pointer;
-  transition:
-    color var(--dsn-transition-duration-normal)
-      var(--dsn-transition-easing-default),
-    text-decoration-color var(--dsn-transition-duration-normal)
-      var(--dsn-transition-easing-default);
-}
-
-/* Current link — muted color, no underline, no hover effect */
-.dsn-breadcrumb-navigation__item--current .dsn-breadcrumb-navigation__link {
-  color: var(--dsn-breadcrumb-navigation-current-color);
-  text-decoration-line: none;
-  cursor: default;
-}
-
-/* Hover */
-.dsn-breadcrumb-navigation__link:hover:not(
-    .dsn-breadcrumb-navigation__item--current .dsn-breadcrumb-navigation__link
-  ) {
-  color: var(--dsn-breadcrumb-navigation-link-hover-color);
-  text-decoration-line: var(
-    --dsn-breadcrumb-navigation-link-hover-text-decoration-line
-  );
-}
-
-/* Active */
-.dsn-breadcrumb-navigation__link:active:not(
-    .dsn-breadcrumb-navigation__item--current .dsn-breadcrumb-navigation__link
-  ) {
-  color: var(--dsn-breadcrumb-navigation-link-active-color);
-  text-decoration-line: var(
-    --dsn-breadcrumb-navigation-link-active-text-decoration-line
-  );
-}
-
-/* Focus */
-.dsn-breadcrumb-navigation__link:focus-visible {
-  background-color: var(--dsn-focus-background-color);
-  color: var(--dsn-focus-color);
-  text-decoration: none;
-  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);
-  box-decoration-break: clone;
-}
-
-/* ===========================
-   Separator icon
-   =========================== */
-.dsn-breadcrumb-navigation__separator {
-  flex-shrink: 0;
-  width: var(--dsn-breadcrumb-navigation-separator-size);
-  height: var(--dsn-breadcrumb-navigation-separator-size);
-  color: var(--dsn-breadcrumb-navigation-separator-color);
-}
-
-/* Verberg separator na het laatste item */
-.dsn-breadcrumb-navigation__item:last-child
-  .dsn-breadcrumb-navigation__separator {
-  display: none;
-}
-
-/* ===========================
-   Back icon (compact variant)
-   =========================== */
-.dsn-breadcrumb-navigation__back-icon {
-  display: none;
-  flex-shrink: 0;
-  width: var(--dsn-breadcrumb-navigation-icon-size);
-  height: var(--dsn-breadcrumb-navigation-icon-size);
-}
-
-/* ===========================
-   RTL — richtingsgevoelige iconen omdraaien
-   =========================== */
-[dir='rtl'] .dsn-breadcrumb-navigation__separator,
-[dir='rtl'] .dsn-breadcrumb-navigation__back-icon {
-  transform: scaleX(-1);
-}
-
-/* ===========================
-   Compact variant — container query responsive collapse
-   =========================== */
-.dsn-breadcrumb-navigation--compact {
-  container-type: inline-size;
-  container-name: breadcrumb;
-}
-
-@container breadcrumb (max-width: 32rem) {
-  /* Verberg alle items */
-  .dsn-breadcrumb-navigation--compact .dsn-breadcrumb-navigation__item {
-    display: none;
-  }
-
-  /* Toon het ouder-item (tweede van achteren) */
-  .dsn-breadcrumb-navigation--compact
-    .dsn-breadcrumb-navigation__item:nth-last-child(2) {
-    display: flex;
-    align-items: center;
-  }
-
-  /* Toon het terug-icoon in het ouder-item */
-  .dsn-breadcrumb-navigation--compact
-    .dsn-breadcrumb-navigation__item:nth-last-child(2)
-    .dsn-breadcrumb-navigation__back-icon {
-    display: block;
-  }
-
-  /* Verberg het scheidingsteken na het ouder-item */
-  .dsn-breadcrumb-navigation--compact
-    .dsn-breadcrumb-navigation__item:nth-last-child(2)
-    .dsn-breadcrumb-navigation__separator {
-    display: none;
-  }
-}
-

package/dist/BreadcrumbNavigation/BreadcrumbNavigation.d.ts

@@ -1,43 +0,0 @@
-import React from 'react';
-import './BreadcrumbNavigation.css';
-export interface BreadcrumbNavigationProps extends React.HTMLAttributes<HTMLElement> {
-    /**
-     * Toegankelijke naam van het `<nav>` landmark
-     * @default "Broodkruimelpad"
-     */
-    'aria-label'?: string;
-    /**
-     * `"compact"` activeert container-query responsief gedrag:
-     * bij weinig ruimte wordt enkel het ouder-item met terug-pijl getoond
-     * @default "default"
-     */
-    variant?: 'default' | 'compact';
-    /**
-     * `BreadcrumbNavigationItem` elementen
-     */
-    children: React.ReactNode;
-}
-/**
- * BreadcrumbNavigation component
- * Toont de hiërarchische locatie van de gebruiker en biedt navigatie naar bovenliggende pagina's.
- * Plaatsen vóór `<main>`, na de primaire navigatie.
- *
- * @example
- * ```tsx
- * // Standaard
- * <BreadcrumbNavigation aria-label="Broodkruimelpad">
- *   <BreadcrumbNavigationItem href="/home">Home</BreadcrumbNavigationItem>
- *   <BreadcrumbNavigationItem href="/categorie">Categorie</BreadcrumbNavigationItem>
- *   <BreadcrumbNavigationItem href="/product" current>Product</BreadcrumbNavigationItem>
- * </BreadcrumbNavigation>
- *
- * // Compact variant
- * <BreadcrumbNavigation aria-label="Broodkruimelpad" variant="compact">
- *   <BreadcrumbNavigationItem href="/home">Home</BreadcrumbNavigationItem>
- *   <BreadcrumbNavigationItem href="/categorie">Categorie</BreadcrumbNavigationItem>
- *   <BreadcrumbNavigationItem href="/product" current>Product</BreadcrumbNavigationItem>
- * </BreadcrumbNavigation>
- * ```
- */
-export declare const BreadcrumbNavigation: React.ForwardRefExoticComponent<BreadcrumbNavigationProps & React.RefAttributes<HTMLElement>>;
-//# sourceMappingURL=BreadcrumbNavigation.d.ts.map

package/dist/BreadcrumbNavigation/BreadcrumbNavigation.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BreadcrumbNavigation.d.ts","sourceRoot":"","sources":["../../src/BreadcrumbNavigation/BreadcrumbNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,4BAA4B,CAAC;AAEpC,MAAM,WAAW,yBAA0B,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAClF;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,oBAAoB,+FA4ChC,CAAC"}

package/dist/BreadcrumbNavigation/BreadcrumbNavigation.js

@@ -1,42 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { classNames } from '@dsn-starter-kit/core';
-import './BreadcrumbNavigation.css';
-/**
- * BreadcrumbNavigation component
- * Toont de hiërarchische locatie van de gebruiker en biedt navigatie naar bovenliggende pagina's.
- * Plaatsen vóór `<main>`, na de primaire navigatie.
- *
- * @example
- * ```tsx
- * // Standaard
- * <BreadcrumbNavigation aria-label="Broodkruimelpad">
- *   <BreadcrumbNavigationItem href="/home">Home</BreadcrumbNavigationItem>
- *   <BreadcrumbNavigationItem href="/categorie">Categorie</BreadcrumbNavigationItem>
- *   <BreadcrumbNavigationItem href="/product" current>Product</BreadcrumbNavigationItem>
- * </BreadcrumbNavigation>
- *
- * // Compact variant
- * <BreadcrumbNavigation aria-label="Broodkruimelpad" variant="compact">
- *   <BreadcrumbNavigationItem href="/home">Home</BreadcrumbNavigationItem>
- *   <BreadcrumbNavigationItem href="/categorie">Categorie</BreadcrumbNavigationItem>
- *   <BreadcrumbNavigationItem href="/product" current>Product</BreadcrumbNavigationItem>
- * </BreadcrumbNavigation>
- * ```
- */
-export const BreadcrumbNavigation = React.forwardRef(({ className, 'aria-label': ariaLabel = 'Broodkruimelpad', variant = 'default', children, ...props }, ref) => {
-    const classes = classNames('dsn-breadcrumb-navigation', variant === 'compact' && 'dsn-breadcrumb-navigation--compact', className);
-    const childArray = React.Children.toArray(children);
-    const processedChildren = childArray.map((child, index) => {
-        if (!React.isValidElement(child))
-            return child;
-        const isParentOfCurrent = variant === 'compact' && index === childArray.length - 2;
-        if (isParentOfCurrent) {
-            return React.cloneElement(child, { showBackIcon: true });
-        }
-        return child;
-    });
-    return (_jsx("nav", { ref: ref, className: classes, "aria-label": ariaLabel, ...props, children: _jsx("ol", { className: "dsn-breadcrumb-navigation__list", children: processedChildren }) }));
-});
-BreadcrumbNavigation.displayName = 'BreadcrumbNavigation';
-//# sourceMappingURL=BreadcrumbNavigation.js.map

package/dist/BreadcrumbNavigation/BreadcrumbNavigation.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BreadcrumbNavigation.js","sourceRoot":"","sources":["../../src/BreadcrumbNavigation/BreadcrumbNavigation.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,OAAO,4BAA4B,CAAC;AAsBpC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,KAAK,CAAC,UAAU,CAIlD,CACE,EACE,SAAS,EACT,YAAY,EAAE,SAAS,GAAG,iBAAiB,EAC3C,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,OAAO,GAAG,UAAU,CACxB,2BAA2B,EAC3B,OAAO,KAAK,SAAS,IAAI,oCAAoC,EAC7D,SAAS,CACV,CAAC;IAEF,MAAM,UAAU,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAEpD,MAAM,iBAAiB,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QACxD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;YAAE,OAAO,KAAK,CAAC;QAE/C,MAAM,iBAAiB,GACrB,OAAO,KAAK,SAAS,IAAI,KAAK,KAAK,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;QAE3D,IAAI,iBAAiB,EAAE,CAAC;YACtB,OAAO,KAAK,CAAC,YAAY,CACvB,KAA0D,EAC1D,EAAE,YAAY,EAAE,IAAI,EAAE,CACvB,CAAC;QACJ,CAAC;QAED,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,gBAAc,SAAS,KAAM,KAAK,YACjE,aAAI,SAAS,EAAC,iCAAiC,YAAE,iBAAiB,GAAM,GACpE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,oBAAoB,CAAC,WAAW,GAAG,sBAAsB,CAAC"}

package/dist/BreadcrumbNavigation/BreadcrumbNavigationItem.d.ts

@@ -1,32 +0,0 @@
-import React from 'react';
-export interface BreadcrumbNavigationItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-    /**
-     * URL van de pagina
-     */
-    href: string;
-    /**
-     * Markeert het huidige pagina-item; voegt `aria-current="page"` toe
-     * @default false
-     */
-    current?: boolean;
-    /**
-     * Zichtbare link- of paginatekst
-     */
-    children: React.ReactNode;
-    /**
-     * @internal — wordt gezet door BreadcrumbNavigation (compact variant)
-     */
-    showBackIcon?: boolean;
-}
-/**
- * BreadcrumbNavigationItem component
- * Enkel item in een BreadcrumbNavigation. Gebruik altijd binnen een `<BreadcrumbNavigation>`.
- *
- * @example
- * ```tsx
- * <BreadcrumbNavigationItem href="/home">Home</BreadcrumbNavigationItem>
- * <BreadcrumbNavigationItem href="/categorie" current>Categorie</BreadcrumbNavigationItem>
- * ```
- */
-export declare const BreadcrumbNavigationItem: React.ForwardRefExoticComponent<BreadcrumbNavigationItemProps & React.RefAttributes<HTMLLIElement>>;
-//# sourceMappingURL=BreadcrumbNavigationItem.d.ts.map

package/dist/BreadcrumbNavigation/BreadcrumbNavigationItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BreadcrumbNavigationItem.d.ts","sourceRoot":"","sources":["../../src/BreadcrumbNavigation/BreadcrumbNavigationItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,6BAA8B,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAClG;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,wBAAwB,qGA8CpC,CAAC"}

package/dist/BreadcrumbNavigation/BreadcrumbNavigationItem.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { classNames } from '@dsn-starter-kit/core';
-import { Icon } from '../Icon';
-/**
- * BreadcrumbNavigationItem component
- * Enkel item in een BreadcrumbNavigation. Gebruik altijd binnen een `<BreadcrumbNavigation>`.
- *
- * @example
- * ```tsx
- * <BreadcrumbNavigationItem href="/home">Home</BreadcrumbNavigationItem>
- * <BreadcrumbNavigationItem href="/categorie" current>Categorie</BreadcrumbNavigationItem>
- * ```
- */
-export const BreadcrumbNavigationItem = React.forwardRef(({ className, href, current = false, showBackIcon = false, children, ...props }, ref) => {
-    const itemClasses = classNames('dsn-breadcrumb-navigation__item', current && 'dsn-breadcrumb-navigation__item--current', className);
-    return (_jsxs("li", { ref: ref, className: itemClasses, children: [_jsxs("a", { href: href, className: "dsn-breadcrumb-navigation__link", "aria-current": current ? 'page' : undefined, ...props, children: [showBackIcon && (_jsx(Icon, { name: "arrow-left", className: "dsn-breadcrumb-navigation__back-icon", "aria-hidden": true })), children] }), _jsx(Icon, { name: "chevron-right", className: "dsn-breadcrumb-navigation__separator", "aria-hidden": true })] }));
-});
-BreadcrumbNavigationItem.displayName = 'BreadcrumbNavigationItem';
-//# sourceMappingURL=BreadcrumbNavigationItem.js.map

package/dist/BreadcrumbNavigation/BreadcrumbNavigationItem.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BreadcrumbNavigationItem.js","sourceRoot":"","sources":["../../src/BreadcrumbNavigation/BreadcrumbNavigationItem.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAyB/B;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,KAAK,CAAC,UAAU,CAItD,CACE,EACE,SAAS,EACT,IAAI,EACJ,OAAO,GAAG,KAAK,EACf,YAAY,GAAG,KAAK,EACpB,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,WAAW,GAAG,UAAU,CAC5B,iCAAiC,EACjC,OAAO,IAAI,0CAA0C,EACrD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,cAAI,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,WAAW,aAClC,aACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,iCAAiC,kBAC7B,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,KACtC,KAAK,aAER,YAAY,IAAI,CACf,KAAC,IAAI,IACH,IAAI,EAAC,YAAY,EACjB,SAAS,EAAC,sCAAsC,wBAEhD,CACH,EACA,QAAQ,IACP,EACJ,KAAC,IAAI,IACH,IAAI,EAAC,eAAe,EACpB,SAAS,EAAC,sCAAsC,wBAEhD,IACC,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,wBAAwB,CAAC,WAAW,GAAG,0BAA0B,CAAC"}

package/dist/BreadcrumbNavigation/index.d.ts

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

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

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

package/dist/BreadcrumbNavigation/index.js

@@ -1,3 +0,0 @@
-export * from './BreadcrumbNavigation';
-export * from './BreadcrumbNavigationItem';
-//# sourceMappingURL=index.js.map

package/dist/BreadcrumbNavigation/index.js.map

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

package/dist/BreakoutSection/BreakoutSection.css

@@ -1,23 +0,0 @@
-/**
- * BreakoutSection Layout Component
- * Laat een sectie "uitslaan" buiten een beperkte paginabreedte om de volledige
- * viewportbreedte te beslaan.
- *
- * Vereiste: de parent (.dsn-page-body) moet overflow-x: clip hebben om
- * horizontale scrolbalken te voorkomen.
- *
- * Usage:
- * <section class="dsn-breakout-section">
- *   <!-- inhoud beslaat volledige viewportbreedte -->
- * </section>
- */
-
-.dsn-breakout-section {
-  margin-block: var(--dsn-space-block-4xl);
-  margin-inline: calc(50% - 50vw);
-  border-block-start: var(--dsn-breakout-section-border-block-width) solid
-    var(--dsn-color-transparent);
-  border-block-end: var(--dsn-breakout-section-border-block-width) solid
-    var(--dsn-color-transparent);
-}
-

package/dist/BreakoutSection/BreakoutSection.d.ts

@@ -1,30 +0,0 @@
-import React from 'react';
-import './BreakoutSection.css';
-export type BreakoutSectionAs = 'div' | 'section' | 'article' | 'aside';
-export interface BreakoutSectionProps extends React.HTMLAttributes<HTMLElement> {
-    /**
-     * HTML-element — ontkoppelt semantiek van visuele stijl
-     * @default 'section'
-     */
-    as?: BreakoutSectionAs;
-    children?: React.ReactNode;
-}
-/**
- * BreakoutSection layout component
- * Laat een sectie "uitslaan" buiten een beperkte paginabreedte om de volledige
- * viewportbreedte te beslaan via `margin-inline: calc(50% - 50vw)`.
- *
- * Vereiste: de parent (.dsn-page-body) heeft `overflow-x: clip` zodat er geen
- * horizontale scrolbalk verschijnt.
- *
- * @example
- * ```tsx
- * <BreakoutSection style={{ backgroundColor: 'var(--dsn-color-accent-1-inverse-bg-default)' }}>
- *   <div style={{ maxInlineSize: 'var(--dsn-page-max-inline-size)', marginInline: 'auto', paddingInline: 'var(--dsn-page-body-padding-inline)' }}>
- *     <Heading level={2}>Uitgeslagen sectie</Heading>
- *   </div>
- * </BreakoutSection>
- * ```
- */
-export declare const BreakoutSection: React.ForwardRefExoticComponent<BreakoutSectionProps & React.RefAttributes<HTMLElement>>;
-//# sourceMappingURL=BreakoutSection.d.ts.map

package/dist/BreakoutSection/BreakoutSection.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BreakoutSection.d.ts","sourceRoot":"","sources":["../../src/BreakoutSection/BreakoutSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,uBAAuB,CAAC;AAE/B,MAAM,MAAM,iBAAiB,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAExE,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC7E;;;OAGG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IAEvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,eAAe,0FAW1B,CAAC"}

package/dist/BreakoutSection/BreakoutSection.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { classNames } from '@dsn-starter-kit/core';
-import './BreakoutSection.css';
-/**
- * BreakoutSection layout component
- * Laat een sectie "uitslaan" buiten een beperkte paginabreedte om de volledige
- * viewportbreedte te beslaan via `margin-inline: calc(50% - 50vw)`.
- *
- * Vereiste: de parent (.dsn-page-body) heeft `overflow-x: clip` zodat er geen
- * horizontale scrolbalk verschijnt.
- *
- * @example
- * ```tsx
- * <BreakoutSection style={{ backgroundColor: 'var(--dsn-color-accent-1-inverse-bg-default)' }}>
- *   <div style={{ maxInlineSize: 'var(--dsn-page-max-inline-size)', marginInline: 'auto', paddingInline: 'var(--dsn-page-body-padding-inline)' }}>
- *     <Heading level={2}>Uitgeslagen sectie</Heading>
- *   </div>
- * </BreakoutSection>
- * ```
- */
-export const BreakoutSection = React.forwardRef(({ as: As = 'section', className, children, ...props }, ref) => {
-    const classes = classNames('dsn-breakout-section', className);
-    return (_jsx(As, { ref: ref, className: classes, ...props, children: children }));
-});
-BreakoutSection.displayName = 'BreakoutSection';
-//# sourceMappingURL=BreakoutSection.js.map

package/dist/BreakoutSection/BreakoutSection.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BreakoutSection.js","sourceRoot":"","sources":["../../src/BreakoutSection/BreakoutSection.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,uBAAuB,CAAC;AAc/B;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAG7C,CAAC,EAAE,EAAE,EAAE,EAAE,GAAG,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC/D,MAAM,OAAO,GAAG,UAAU,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC;IAE9D,OAAO,CACL,KAAC,EAAE,IAAC,GAAG,EAAE,GAAgC,EAAE,SAAS,EAAE,OAAO,KAAM,KAAK,YACrE,QAAQ,GACN,CACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC"}

package/dist/BreakoutSection/index.d.ts

@@ -1,3 +0,0 @@
-export { BreakoutSection } from './BreakoutSection';
-export type { BreakoutSectionProps, BreakoutSectionAs, } from './BreakoutSection';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/BreakoutSection/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EACV,oBAAoB,EACpB,iBAAiB,GAClB,MAAM,mBAAmB,CAAC"}

package/dist/BreakoutSection/index.js

@@ -1,2 +0,0 @@
-export { BreakoutSection } from './BreakoutSection';
-//# sourceMappingURL=index.js.map

package/dist/BreakoutSection/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/BreakoutSection/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}