@dsn-starter-kit/components-react 1.0.0

package/dist/DateInput/DateInput.css

@@ -0,0 +1,37 @@
+/**
+ * DateInput Component Styles
+ * Fixed-width wrapper positions the Button (subtle, small, icon-only) at inline-end inside the input.
+ * The input uses dsn-text-input base styles with extra padding-inline-end
+ * to prevent typed text from overlapping the button.
+ * Button hover/focus/color states come from the Button component itself.
+ */
+
+/* Wrapper — fixed md width (20ch), positions calendar button absolutely inside the input */
+.dsn-date-input-wrapper {
+  position: relative;
+  display: block;
+  inline-size: 100%;
+  max-inline-size: var(--dsn-form-control-width-md);
+}
+
+/* Calendar button — centered vertically, positioned at inline-end with reduced margin */
+.dsn-date-input__button {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: var(--dsn-date-input-button-inset-inline-end);
+  transform: translateY(-50%);
+}
+
+/* Input — extra padding-inline-end to make room for the calendar button */
+/* Hide the native browser calendar/date picker indicator */
+.dsn-date-input {
+  padding-inline-end: var(--dsn-date-input-padding-inline-end-with-icon);
+}
+
+.dsn-date-input::-webkit-calendar-picker-indicator {
+  display: none;
+}
+
+.dsn-date-input::-webkit-inner-spin-button {
+  display: none;
+}

package/dist/DateInput/DateInput.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import '../TextInput/TextInput.css';
+import './DateInput.css';
+export interface DateInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /**
+     * Whether the input is in an invalid state
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * Date Input component
+ * Date input with an interactive calendar button at inline-end that opens the native date picker.
+ * Fixed width (sm) — not configurable, as date inputs have a predictable content width.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <DateInput />
+ *
+ * // With label
+ * <FormFieldLabel htmlFor="date">Datum</FormFieldLabel>
+ * <DateInput id="date" />
+ *
+ * // With default value
+ * <DateInput defaultValue="2025-03-15" />
+ *
+ * // Invalid state
+ * <DateInput invalid aria-invalid="true" aria-describedby="error" />
+ * ```
+ */
+export declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=DateInput.d.ts.map

package/dist/DateInput/DateInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../src/DateInput/DateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,4BAA4B,CAAC;AACpC,OAAO,iBAAiB,CAAC;AAEzB,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,CACP;IACC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,SAAS,yFAyDrB,CAAC"}

package/dist/DateInput/DateInput.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import { Button } from '../Button';
+import { Icon } from '../Icon';
+import '../TextInput/TextInput.css';
+import './DateInput.css';
+/**
+ * Date Input component
+ * Date input with an interactive calendar button at inline-end that opens the native date picker.
+ * Fixed width (sm) — not configurable, as date inputs have a predictable content width.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <DateInput />
+ *
+ * // With label
+ * <FormFieldLabel htmlFor="date">Datum</FormFieldLabel>
+ * <DateInput id="date" />
+ *
+ * // With default value
+ * <DateInput defaultValue="2025-03-15" />
+ *
+ * // Invalid state
+ * <DateInput invalid aria-invalid="true" aria-describedby="error" />
+ * ```
+ */
+export const DateInput = React.forwardRef(({ className, invalid, disabled, readOnly, ...props }, ref) => {
+    const inputRef = React.useRef(null);
+    // Merge external ref with internal ref
+    const handleRef = React.useCallback((node) => {
+        inputRef.current =
+            node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current =
+                node;
+        }
+    }, [ref]);
+    const handleButtonClick = () => {
+        if (inputRef.current && 'showPicker' in inputRef.current) {
+            inputRef.current.showPicker();
+        }
+    };
+    const inputClasses = classNames('dsn-text-input', 'dsn-date-input', className);
+    return (_jsxs("div", { className: "dsn-date-input-wrapper", children: [_jsx("input", { ref: handleRef, type: "date", className: inputClasses, "aria-invalid": invalid || undefined, disabled: disabled, readOnly: readOnly, ...props }), !disabled && !readOnly && (_jsx(Button, { variant: "subtle", size: "small", iconOnly: true, iconStart: _jsx(Icon, { name: "calendar-event", "aria-hidden": true }), className: "dsn-date-input__button", onClick: handleButtonClick, children: "Datumkiezer openen" }))] }));
+});
+DateInput.displayName = 'DateInput';
+//# sourceMappingURL=DateInput.js.map

package/dist/DateInput/DateInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.js","sourceRoot":"","sources":["../../src/DateInput/DateInput.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,4BAA4B,CAAC;AACpC,OAAO,iBAAiB,CAAC;AAkBzB;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CACvC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC5D,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEtD,uCAAuC;IACvC,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,IAA6B,EAAE,EAAE;QAC/B,QAA4D,CAAC,OAAO;YACnE,IAAI,CAAC;QACP,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;YAC9B,GAAG,CAAC,IAAI,CAAC,CAAC;QACZ,CAAC;aAAM,IAAI,GAAG,EAAE,CAAC;YACd,GAAuD,CAAC,OAAO;gBAC9D,IAAI,CAAC;QACT,CAAC;IACH,CAAC,EACD,CAAC,GAAG,CAAC,CACN,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,IAAI,QAAQ,CAAC,OAAO,IAAI,YAAY,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YACzD,QAAQ,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QAChC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,UAAU,CAC7B,gBAAgB,EAChB,gBAAgB,EAChB,SAAS,CACV,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,wBAAwB,aACrC,gBACE,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,YAAY,kBACT,OAAO,IAAI,SAAS,EAClC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,KACd,KAAK,GACT,EACD,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,CACzB,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAC,OAAO,EACZ,QAAQ,QACR,SAAS,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,gBAAgB,wBAAe,EACrD,SAAS,EAAC,wBAAwB,EAClC,OAAO,EAAE,iBAAiB,mCAGnB,CACV,IACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC"}

package/dist/DateInput/index.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DateInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/DateInput/index.js

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

package/dist/DateInput/index.js.map

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

package/dist/DateInputGroup/DateInputGroup.css

@@ -0,0 +1,30 @@
+/**
+ * DateInputGroup Component Styles
+ * Three inputs (dag, maand, jaar) in a horizontal flex row — GOV.UK date input pattern.
+ * Each field has a label above its input.
+ */
+
+/* Outer wrapper — flex row with gap between the three fields */
+.dsn-date-input-group {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--dsn-date-input-group-gap);
+  align-items: flex-end;
+}
+
+/* Each field — label + input stacked vertically */
+.dsn-date-input-group__field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dsn-date-input-group-label-gap);
+}
+
+/* Field label — uses form field label styling tokens */
+.dsn-date-input-group__label {
+  font-family: var(--dsn-form-field-label-font-family);
+  font-size: var(--dsn-form-field-label-font-size);
+  font-weight: var(--dsn-form-field-label-font-weight);
+  line-height: var(--dsn-form-field-label-line-height);
+  color: var(--dsn-form-field-label-color);
+}

package/dist/DateInputGroup/DateInputGroup.d.ts

@@ -0,0 +1,65 @@
+import React from 'react';
+import './DateInputGroup.css';
+export interface DateInputGroupValue {
+    day: string;
+    month: string;
+    year: string;
+}
+export interface DateInputGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * The current value of the date group
+     */
+    value?: DateInputGroupValue;
+    /**
+     * Called when any field changes, with the full updated value object
+     */
+    onChange?: (value: DateInputGroupValue) => void;
+    /**
+     * Whether all fields are in an invalid state
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Whether all fields are disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * id prefix used to generate unique ids for each field (dag, maand, jaar)
+     * E.g. id="geboortedatum" → "geboortedatum-dag", "geboortedatum-maand", "geboortedatum-jaar"
+     */
+    id?: string;
+}
+/**
+ * Date Input Group component
+ * Three separate inputs for day, month and year.
+ * More accessible than a native date picker: works consistently across all browsers and
+ * devices, and allows partial input (e.g. year only).
+ *
+ * Wrap in a FormFieldset for a complete form field with legend and error message.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <DateInputGroup
+ *   value={{ day: '', month: '', year: '' }}
+ *   onChange={(val) => setValue(val)}
+ * />
+ *
+ * // Complete form field
+ * <FormFieldset>
+ *   <FormFieldLegend>Geboortedatum</FormFieldLegend>
+ *   <FormFieldDescription>Bijvoorbeeld: 15 3 1990</FormFieldDescription>
+ *   <DateInputGroup
+ *     id="geboortedatum"
+ *     value={value}
+ *     onChange={setValue}
+ *   />
+ * </FormFieldset>
+ *
+ * // Invalid state
+ * <DateInputGroup invalid value={value} onChange={setValue} />
+ * ```
+ */
+export declare const DateInputGroup: React.ForwardRefExoticComponent<DateInputGroupProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=DateInputGroup.d.ts.map

package/dist/DateInputGroup/DateInputGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInputGroup.d.ts","sourceRoot":"","sources":["../../src/DateInputGroup/DateInputGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,sBAAsB,CAAC;AAE9B,MAAM,WAAW,mBAAmB;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,UAAU,CACX;IACC;;OAEG;IACH,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAE5B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAEhD;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,cAAc,4FA4EzB,CAAC"}

package/dist/DateInputGroup/DateInputGroup.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import { NumberInput } from '../NumberInput';
+import './DateInputGroup.css';
+/**
+ * Date Input Group component
+ * Three separate inputs for day, month and year.
+ * More accessible than a native date picker: works consistently across all browsers and
+ * devices, and allows partial input (e.g. year only).
+ *
+ * Wrap in a FormFieldset for a complete form field with legend and error message.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <DateInputGroup
+ *   value={{ day: '', month: '', year: '' }}
+ *   onChange={(val) => setValue(val)}
+ * />
+ *
+ * // Complete form field
+ * <FormFieldset>
+ *   <FormFieldLegend>Geboortedatum</FormFieldLegend>
+ *   <FormFieldDescription>Bijvoorbeeld: 15 3 1990</FormFieldDescription>
+ *   <DateInputGroup
+ *     id="geboortedatum"
+ *     value={value}
+ *     onChange={setValue}
+ *   />
+ * </FormFieldset>
+ *
+ * // Invalid state
+ * <DateInputGroup invalid value={value} onChange={setValue} />
+ * ```
+ */
+export const DateInputGroup = React.forwardRef(({ className, value, onChange, invalid, disabled, id, ...props }, ref) => {
+    const classes = classNames('dsn-date-input-group', className);
+    const handleChange = (field) => (e) => {
+        onChange?.({
+            day: value?.day ?? '',
+            month: value?.month ?? '',
+            year: value?.year ?? '',
+            [field]: e.target.value,
+        });
+    };
+    const dayId = id ? `${id}-dag` : undefined;
+    const monthId = id ? `${id}-maand` : undefined;
+    const yearId = id ? `${id}-jaar` : undefined;
+    return (_jsxs("div", { ref: ref, className: classes, ...props, children: [_jsxs("div", { className: "dsn-date-input-group__field", children: [_jsx("label", { className: "dsn-date-input-group__label", htmlFor: dayId, children: "Dag" }), _jsx(NumberInput, { id: dayId, width: "xs", value: value?.day ?? '', onChange: handleChange('day'), invalid: invalid, "aria-invalid": invalid || undefined, disabled: disabled, placeholder: "DD", min: 1, max: 31 })] }), _jsxs("div", { className: "dsn-date-input-group__field", children: [_jsx("label", { className: "dsn-date-input-group__label", htmlFor: monthId, children: "Maand" }), _jsx(NumberInput, { id: monthId, width: "xs", value: value?.month ?? '', onChange: handleChange('month'), invalid: invalid, "aria-invalid": invalid || undefined, disabled: disabled, placeholder: "MM", min: 1, max: 12 })] }), _jsxs("div", { className: "dsn-date-input-group__field", children: [_jsx("label", { className: "dsn-date-input-group__label", htmlFor: yearId, children: "Jaar" }), _jsx(NumberInput, { id: yearId, width: "sm", value: value?.year ?? '', onChange: handleChange('year'), invalid: invalid, "aria-invalid": invalid || undefined, disabled: disabled, placeholder: "JJJJ", min: 1, max: 9999 })] })] }));
+});
+DateInputGroup.displayName = 'DateInputGroup';
+//# sourceMappingURL=DateInputGroup.js.map

package/dist/DateInputGroup/DateInputGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInputGroup.js","sourceRoot":"","sources":["../../src/DateInputGroup/DateInputGroup.tsx"],"names":[],"mappings":"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"}

package/dist/DateInputGroup/index.d.ts

@@ -0,0 +1,3 @@
+export { DateInputGroup } from './DateInputGroup';
+export type { DateInputGroupProps, DateInputGroupValue, } from './DateInputGroup';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DateInputGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EACV,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,kBAAkB,CAAC"}

package/dist/DateInputGroup/index.js

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

package/dist/DateInputGroup/index.js.map

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

package/dist/Details/Details.css

@@ -0,0 +1,134 @@
+/**
+ * Details component styles for React
+ * Re-exports the base Details styles from components-html
+ */
+
+/**
+ * Details Component
+ * Expandable disclosure widget based on the native <details>/<summary> element.
+ *
+ * Usage:
+ * <!-- Default (closed) -->
+ * <details class="dsn-details">
+ *   <summary class="dsn-details__summary">
+ *     <svg class="dsn-icon dsn-details__icon" aria-hidden="true"><!-- chevron-down --></svg>
+ *     <span class="dsn-details__summary-label">Label</span>
+ *   </summary>
+ *   <div class="dsn-details__content">
+ *     <p class="dsn-paragraph">Aanvullende informatie.</p>
+ *   </div>
+ * </details>
+ *
+ * <!-- Default open -->
+ * <details class="dsn-details" open>
+ *   <summary class="dsn-details__summary">
+ *     <svg class="dsn-icon dsn-details__icon" aria-hidden="true"><!-- chevron-down --></svg>
+ *     <span class="dsn-details__summary-label">Label</span>
+ *   </summary>
+ *   <div class="dsn-details__content">
+ *     <p class="dsn-paragraph">Inhoud is standaard zichtbaar.</p>
+ *   </div>
+ * </details>
+ */
+
+/* ===========================
+   Base layout
+   =========================== */
+.dsn-details {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--dsn-details-row-gap);
+}
+
+/* ===========================
+   Summary (toggle trigger)
+   =========================== */
+.dsn-details__summary {
+  display: flex;
+  align-items: center;
+  gap: var(--dsn-details-summary-gap);
+  width: fit-content;
+  list-style: none;
+  cursor: pointer;
+}
+
+/* Hide native browser disclosure marker (WebKit) */
+.dsn-details__summary::-webkit-details-marker {
+  display: none;
+}
+
+/* ===========================
+   Summary label
+   =========================== */
+.dsn-details__summary-label {
+  color: var(--dsn-details-summary-color);
+  text-decoration-line: var(--dsn-details-summary-text-decoration-line);
+  text-underline-offset: var(--dsn-details-summary-text-underline-offset);
+  text-decoration-thickness: var(
+    --dsn-details-summary-text-decoration-thickness
+  );
+}
+
+/* ===========================
+   Summary hover state
+   =========================== */
+.dsn-details__summary:hover .dsn-details__summary-label {
+  color: var(--dsn-details-summary-hover-color);
+  text-decoration-line: var(--dsn-details-summary-hover-text-decoration-line);
+}
+
+/* ===========================
+   Summary active state
+   =========================== */
+.dsn-details__summary:active .dsn-details__summary-label {
+  color: var(--dsn-details-summary-active-color);
+}
+
+/* ===========================
+   Summary focus state — consistent met Link component
+   =========================== */
+.dsn-details__summary: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;
+}
+
+/* ===========================
+   Icon — rotates 180° when open
+   =========================== */
+.dsn-details__icon {
+  flex-shrink: 0;
+  width: var(--dsn-details-icon-size);
+  height: var(--dsn-details-icon-size);
+  color: var(--dsn-details-summary-color);
+  transition: transform var(--dsn-transition-duration-normal)
+    var(--dsn-transition-easing-default);
+}
+
+.dsn-details[open] .dsn-details__icon {
+  transform: rotate(180deg);
+}
+
+/* ===========================
+   Content area
+   =========================== */
+.dsn-details__content {
+  margin-inline-start: calc(
+    var(--dsn-details-icon-size) / 2 -
+      var(--dsn-details-content-border-inline-start-width) / 2
+  );
+  background-color: var(--dsn-details-content-background-color);
+  border-inline-start: var(--dsn-details-content-border-inline-start-width)
+    solid var(--dsn-details-content-border-color);
+  padding-inline-start: var(--dsn-details-content-padding-inline-start);
+  padding-inline-end: var(--dsn-details-content-padding-inline-end);
+  padding-block: var(--dsn-details-content-padding-block);
+}
+

package/dist/Details/Details.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import './Details.css';
+export interface DetailsProps extends Omit<React.HTMLAttributes<HTMLDetailsElement>, 'onToggle'> {
+    /**
+     * Zichtbare labeltekst in de `<summary>`
+     */
+    summary: string;
+    /**
+     * Standaard open bij eerste render (ongecontroleerde staat)
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Callback die wordt aangeroepen wanneer de open/dicht staat wijzigt
+     */
+    onToggle?: (open: boolean) => void;
+    /**
+     * De verborgen inhoud
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Details component
+ * Uitvouwbare inhoudsaanwijzer voor aanvullende inhoud die niet iedereen nodig heeft.
+ * Gebaseerd op het native `<details>`/`<summary>` element — CSS-only, geen JavaScript voor de toggle.
+ *
+ * @example
+ * ```tsx
+ * // Standaard gesloten
+ * <Details summary="Meer informatie">
+ *   <Paragraph>Aanvullende informatie die beschikbaar is voor wie dit nodig heeft.</Paragraph>
+ * </Details>
+ *
+ * // Standaard open
+ * <Details summary="Meer informatie" defaultOpen>
+ *   <Paragraph>Inhoud is standaard zichtbaar.</Paragraph>
+ * </Details>
+ *
+ * // Met toggle callback
+ * <Details summary="Meer informatie" onToggle={(open) => console.log('open:', open)}>
+ *   <Paragraph>Inhoud.</Paragraph>
+ * </Details>
+ * ```
+ */
+export declare const Details: React.ForwardRefExoticComponent<DetailsProps & React.RefAttributes<HTMLDetailsElement>>;
+//# sourceMappingURL=Details.d.ts.map

package/dist/Details/Details.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../src/Details/Details.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,EACxC,UAAU,CACX;IACC;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,OAAO,yFA2BnB,CAAC"}

package/dist/Details/Details.js

@@ -0,0 +1,37 @@
+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';
+import './Details.css';
+/**
+ * Details component
+ * Uitvouwbare inhoudsaanwijzer voor aanvullende inhoud die niet iedereen nodig heeft.
+ * Gebaseerd op het native `<details>`/`<summary>` element — CSS-only, geen JavaScript voor de toggle.
+ *
+ * @example
+ * ```tsx
+ * // Standaard gesloten
+ * <Details summary="Meer informatie">
+ *   <Paragraph>Aanvullende informatie die beschikbaar is voor wie dit nodig heeft.</Paragraph>
+ * </Details>
+ *
+ * // Standaard open
+ * <Details summary="Meer informatie" defaultOpen>
+ *   <Paragraph>Inhoud is standaard zichtbaar.</Paragraph>
+ * </Details>
+ *
+ * // Met toggle callback
+ * <Details summary="Meer informatie" onToggle={(open) => console.log('open:', open)}>
+ *   <Paragraph>Inhoud.</Paragraph>
+ * </Details>
+ * ```
+ */
+export const Details = React.forwardRef(({ className, summary, defaultOpen = false, onToggle, children, ...props }, ref) => {
+    const classes = classNames('dsn-details', className);
+    const handleToggle = (event) => {
+        onToggle?.(event.currentTarget.open);
+    };
+    return (_jsxs("details", { ref: ref, className: classes, open: defaultOpen || undefined, onToggle: handleToggle, ...props, children: [_jsxs("summary", { className: "dsn-details__summary", children: [_jsx(Icon, { name: "chevron-down", className: "dsn-details__icon", "aria-hidden": true }), _jsx("span", { className: "dsn-details__summary-label", children: summary })] }), _jsx("div", { className: "dsn-details__content", children: children })] }));
+});
+Details.displayName = 'Details';
+//# sourceMappingURL=Details.js.map

package/dist/Details/Details.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Details.js","sourceRoot":"","sources":["../../src/Details/Details.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;AAC/B,OAAO,eAAe,CAAC;AA4BvB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CACrC,CACE,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,GAAG,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EACzE,GAAG,EACH,EAAE;IACF,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;IAErD,MAAM,YAAY,GAAG,CAAC,KAA+C,EAAE,EAAE;QACvE,QAAQ,EAAE,CAAE,KAAK,CAAC,aAAoC,CAAC,IAAI,CAAC,CAAC;IAC/D,CAAC,CAAC;IAEF,OAAO,CACL,mBACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,EAClB,IAAI,EAAE,WAAW,IAAI,SAAS,EAC9B,QAAQ,EAAE,YAAY,KAClB,KAAK,aAET,mBAAS,SAAS,EAAC,sBAAsB,aACvC,KAAC,IAAI,IAAC,IAAI,EAAC,cAAc,EAAC,SAAS,EAAC,mBAAmB,wBAAe,EACtE,eAAM,SAAS,EAAC,4BAA4B,YAAE,OAAO,GAAQ,IACrD,EACV,cAAK,SAAS,EAAC,sBAAsB,YAAE,QAAQ,GAAO,IAC9C,CACX,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC"}

package/dist/Details/index.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Details/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}

package/dist/Details/index.js

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

package/dist/Details/index.js.map

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