@dsn-starter-kit/components-react 3.5.0 → 4.0.0

package/dist/TextInput/TextInput.d.mts

@@ -1,5 +1,5 @@
 import React from "react";
-import { FormControlWidth } from "@dsn-starter-kit/core";
+import { FormControlInlineSize } from "@dsn-starter-kit/core";
 //#region src/TextInput/TextInput.d.ts
 interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   /**
@@ -12,10 +12,10 @@ interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
    */
   invalid?: boolean;
   /**
-   * Width variant for the input
-   * @default undefined (uses default max-width from form-control)
+   * Inline-size variant for the input
+   * @default undefined (uses default max-inline-size from form-control)
    */
-  width?: FormControlWidth;
+  inlineSize?: FormControlInlineSize;
 }
 /**
  * Text Input component

package/dist/TextInput/TextInput.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.mts","names":[],"sources":["../../src/TextInput/TextInput.tsx"],"mappings":";;;UAIiB,uBAAuB,MAAM,oBAAoB;;;;EAIhE;;;;;EAMA;;;;;EAMA,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;cA0BG,WAAS,MAAA,0BAAA,iBAAA,MAAA,cAAA"}
+{"version":3,"file":"TextInput.d.mts","names":[],"sources":["../../src/TextInput/TextInput.tsx"],"mappings":";;;UAIiB,uBAAuB,MAAM,oBAAoB;;;;EAIhE;;;;;EAMA;;;;;EAMA,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;cA0BF,WAAS,MAAA,0BAAA,iBAAA,MAAA,cAAA"}

package/dist/TextInput/TextInput2.mjs

@@ -26,8 +26,8 @@ import { jsx } from "react/jsx-runtime";
 * <TextInput readOnly value="Cannot edit this" />
 * ```
 */
-const TextInput = React.forwardRef(({ className, invalid, width, type = "text", ...props }, ref) => {
-	const classes = classNames("dsn-text-input", width && `dsn-text-input--width-${width}`, className);
+const TextInput = React.forwardRef(({ className, invalid, inlineSize, type = "text", ...props }, ref) => {
+	const classes = classNames("dsn-text-input", inlineSize && `dsn-text-input--inline-size-${inlineSize}`, className);
 	return /* @__PURE__ */ jsx("input", {
 		ref,
 		type,

package/dist/TextInput/TextInput2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput2.mjs","names":[],"sources":["../../src/TextInput/TextInput.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, FormControlWidth } from '@dsn-starter-kit/core';\nimport './TextInput.css';\n\nexport interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Whether the input is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Width variant for the input\n   * @default undefined (uses default max-width from form-control)\n   */\n  width?: FormControlWidth;\n}\n\n/**\n * Text Input component\n * Single-line text input with support for various states (hover, focus, disabled, invalid, read-only)\n *\n * @example\n * ```tsx\n * // Basic usage\n * <TextInput placeholder=\"Enter your name\" />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"email\">Email</FormFieldLabel>\n * <TextInput id=\"email\" type=\"email\" />\n *\n * // Disabled\n * <TextInput disabled value=\"Read only value\" />\n *\n * // Invalid\n * <TextInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n *\n * // Read-only\n * <TextInput readOnly value=\"Cannot edit this\" />\n * ```\n */\nexport const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(\n  ({ className, invalid, width, type = 'text', ...props }, ref) => {\n    const classes = classNames(\n      'dsn-text-input',\n      width && `dsn-text-input--width-${width}`,\n      className\n    );\n\n    return (\n      <input\n        ref={ref}\n        type={type}\n        className={classes}\n        aria-invalid={invalid || undefined}\n        {...props}\n      />\n    );\n  }\n);\n\nTextInput.displayName = 'TextInput';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,MAAa,YAAY,MAAM,YAC5B,EAAE,WAAW,SAAS,OAAO,OAAO,QAAQ,GAAG,SAAS,QAAQ;CAC/D,MAAM,UAAU,WACd,kBACA,SAAS,yBAAyB,SAClC,SACF;CAEA,OACE,oBAAC,SAAD;EACO;EACC;EACN,WAAW;EACX,gBAAc,WAAW,KAAA;EACzB,GAAI;CACL,CAAA;AAEL,CACF;AAEA,UAAU,cAAc"}
+{"version":3,"file":"TextInput2.mjs","names":[],"sources":["../../src/TextInput/TextInput.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, FormControlInlineSize } from '@dsn-starter-kit/core';\nimport './TextInput.css';\n\nexport interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Whether the input is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Inline-size variant for the input\n   * @default undefined (uses default max-inline-size from form-control)\n   */\n  inlineSize?: FormControlInlineSize;\n}\n\n/**\n * Text Input component\n * Single-line text input with support for various states (hover, focus, disabled, invalid, read-only)\n *\n * @example\n * ```tsx\n * // Basic usage\n * <TextInput placeholder=\"Enter your name\" />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"email\">Email</FormFieldLabel>\n * <TextInput id=\"email\" type=\"email\" />\n *\n * // Disabled\n * <TextInput disabled value=\"Read only value\" />\n *\n * // Invalid\n * <TextInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n *\n * // Read-only\n * <TextInput readOnly value=\"Cannot edit this\" />\n * ```\n */\nexport const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(\n  ({ className, invalid, inlineSize, type = 'text', ...props }, ref) => {\n    const classes = classNames(\n      'dsn-text-input',\n      inlineSize && `dsn-text-input--inline-size-${inlineSize}`,\n      className\n    );\n\n    return (\n      <input\n        ref={ref}\n        type={type}\n        className={classes}\n        aria-invalid={invalid || undefined}\n        {...props}\n      />\n    );\n  }\n);\n\nTextInput.displayName = 'TextInput';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,MAAa,YAAY,MAAM,YAC5B,EAAE,WAAW,SAAS,YAAY,OAAO,QAAQ,GAAG,SAAS,QAAQ;CACpE,MAAM,UAAU,WACd,kBACA,cAAc,+BAA+B,cAC7C,SACF;CAEA,OACE,oBAAC,SAAD;EACO;EACC;EACN,WAAW;EACX,gBAAc,WAAW,KAAA;EACzB,GAAI;CACL,CAAA;AAEL,CACF;AAEA,UAAU,cAAc"}

package/dist/TimeInput/TimeInput.d.mts

@@ -14,7 +14,7 @@ interface TimeInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement
 /**
  * Time Input component
  * Time input with an interactive clock button at inline-end that opens the native time picker.
- * Fixed width (sm) — not configurable, as time inputs have a predictable content width.
+ * Fixed inline-size (sm): not configurable, as time inputs have a predictable content length.
  *
  * @example
  * ```tsx

package/dist/TimeInput/TimeInput2.mjs

@@ -8,7 +8,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /**
 * Time Input component
 * Time input with an interactive clock button at inline-end that opens the native time picker.
-* Fixed width (sm) — not configurable, as time inputs have a predictable content width.
+* Fixed inline-size (sm): not configurable, as time inputs have a predictable content length.
 *
 * @example
 * ```tsx

package/dist/TimeInput/TimeInput2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TimeInput2.mjs","names":[],"sources":["../../src/TimeInput/TimeInput.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Button } from '../Button';\nimport { Icon } from '../Icon';\nimport './TimeInput.css';\n\nexport interface TimeInputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type'\n> {\n  /**\n   * Whether the input is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n}\n\n/**\n * Time Input component\n * Time input with an interactive clock button at inline-end that opens the native time picker.\n * Fixed width (sm) — not configurable, as time inputs have a predictable content width.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <TimeInput />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"time\">Tijd</FormFieldLabel>\n * <TimeInput id=\"time\" />\n *\n * // With default value\n * <TimeInput defaultValue=\"14:30\" />\n *\n * // Invalid state\n * <TimeInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n * ```\n */\nexport const TimeInput = React.forwardRef<HTMLInputElement, TimeInputProps>(\n  ({ className, invalid, disabled, readOnly, ...props }, ref) => {\n    const inputRef = React.useRef<HTMLInputElement>(null);\n\n    // Merge external ref with internal ref\n    const handleRef = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        (inputRef as React.MutableRefObject<HTMLInputElement | null>).current =\n          node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLInputElement | null>).current =\n            node;\n        }\n      },\n      [ref]\n    );\n\n    const handleButtonClick = () => {\n      if (inputRef.current && 'showPicker' in inputRef.current) {\n        inputRef.current.showPicker();\n      }\n    };\n\n    const inputClasses = classNames(\n      'dsn-text-input',\n      'dsn-time-input',\n      className\n    );\n\n    return (\n      <div className=\"dsn-time-input-wrapper\">\n        <input\n          ref={handleRef}\n          type=\"time\"\n          className={inputClasses}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          readOnly={readOnly}\n          {...props}\n        />\n        {!disabled && !readOnly && (\n          <Button\n            variant=\"subtle\"\n            size=\"small\"\n            iconOnly\n            iconStart={<Icon name=\"clock\" aria-hidden />}\n            className=\"dsn-time-input__button\"\n            onClick={handleButtonClick}\n          >\n            Tijdkiezer openen\n          </Button>\n        )}\n      </div>\n    );\n  }\n);\n\nTimeInput.displayName = 'TimeInput';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,YAAY,MAAM,YAC5B,EAAE,WAAW,SAAS,UAAU,UAAU,GAAG,SAAS,QAAQ;CAC7D,MAAM,WAAW,MAAM,OAAyB,IAAI;CAGpD,MAAM,YAAY,MAAM,aACrB,SAAkC;EACjC,SAA8D,UAC5D;EACF,IAAI,OAAO,QAAQ,YACjB,IAAI,IAAI;OACH,IAAI,KACT,IAAyD,UACvD;CAEN,GACA,CAAC,GAAG,CACN;CAEA,MAAM,0BAA0B;EAC9B,IAAI,SAAS,WAAW,gBAAgB,SAAS,SAC/C,SAAS,QAAQ,WAAW;CAEhC;CAEA,MAAM,eAAe,WACnB,kBACA,kBACA,SACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,SAAD;GACE,KAAK;GACL,MAAK;GACL,WAAW;GACX,gBAAc,WAAW,KAAA;GACf;GACA;GACV,GAAI;EACL,CAAA,GACA,CAAC,YAAY,CAAC,YACb,oBAAC,QAAD;GACE,SAAQ;GACR,MAAK;GACL,UAAA;GACA,WAAW,oBAAC,MAAD;IAAM,MAAK;IAAQ,eAAA;GAAa,CAAA;GAC3C,WAAU;GACV,SAAS;GACV,UAAA;EAEO,CAAA,CAEP;;AAET,CACF;AAEA,UAAU,cAAc"}
+{"version":3,"file":"TimeInput2.mjs","names":[],"sources":["../../src/TimeInput/TimeInput.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Button } from '../Button';\nimport { Icon } from '../Icon';\nimport './TimeInput.css';\n\nexport interface TimeInputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type'\n> {\n  /**\n   * Whether the input is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n}\n\n/**\n * Time Input component\n * Time input with an interactive clock button at inline-end that opens the native time picker.\n * Fixed inline-size (sm): not configurable, as time inputs have a predictable content length.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <TimeInput />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"time\">Tijd</FormFieldLabel>\n * <TimeInput id=\"time\" />\n *\n * // With default value\n * <TimeInput defaultValue=\"14:30\" />\n *\n * // Invalid state\n * <TimeInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n * ```\n */\nexport const TimeInput = React.forwardRef<HTMLInputElement, TimeInputProps>(\n  ({ className, invalid, disabled, readOnly, ...props }, ref) => {\n    const inputRef = React.useRef<HTMLInputElement>(null);\n\n    // Merge external ref with internal ref\n    const handleRef = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        (inputRef as React.MutableRefObject<HTMLInputElement | null>).current =\n          node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLInputElement | null>).current =\n            node;\n        }\n      },\n      [ref]\n    );\n\n    const handleButtonClick = () => {\n      if (inputRef.current && 'showPicker' in inputRef.current) {\n        inputRef.current.showPicker();\n      }\n    };\n\n    const inputClasses = classNames(\n      'dsn-text-input',\n      'dsn-time-input',\n      className\n    );\n\n    return (\n      <div className=\"dsn-time-input-wrapper\">\n        <input\n          ref={handleRef}\n          type=\"time\"\n          className={inputClasses}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          readOnly={readOnly}\n          {...props}\n        />\n        {!disabled && !readOnly && (\n          <Button\n            variant=\"subtle\"\n            size=\"small\"\n            iconOnly\n            iconStart={<Icon name=\"clock\" aria-hidden />}\n            className=\"dsn-time-input__button\"\n            onClick={handleButtonClick}\n          >\n            Tijdkiezer openen\n          </Button>\n        )}\n      </div>\n    );\n  }\n);\n\nTimeInput.displayName = 'TimeInput';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,YAAY,MAAM,YAC5B,EAAE,WAAW,SAAS,UAAU,UAAU,GAAG,SAAS,QAAQ;CAC7D,MAAM,WAAW,MAAM,OAAyB,IAAI;CAGpD,MAAM,YAAY,MAAM,aACrB,SAAkC;EACjC,SAA8D,UAC5D;EACF,IAAI,OAAO,QAAQ,YACjB,IAAI,IAAI;OACH,IAAI,KACT,IAAyD,UACvD;CAEN,GACA,CAAC,GAAG,CACN;CAEA,MAAM,0BAA0B;EAC9B,IAAI,SAAS,WAAW,gBAAgB,SAAS,SAC/C,SAAS,QAAQ,WAAW;CAEhC;CAEA,MAAM,eAAe,WACnB,kBACA,kBACA,SACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,SAAD;GACE,KAAK;GACL,MAAK;GACL,WAAW;GACX,gBAAc,WAAW,KAAA;GACf;GACA;GACV,GAAI;EACL,CAAA,GACA,CAAC,YAAY,CAAC,YACb,oBAAC,QAAD;GACE,SAAQ;GACR,MAAK;GACL,UAAA;GACA,WAAW,oBAAC,MAAD;IAAM,MAAK;IAAQ,eAAA;GAAa,CAAA;GAC3C,WAAU;GACV,SAAS;GACV,UAAA;EAEO,CAAA,CAEP;;AAET,CACF;AAEA,UAAU,cAAc"}

package/dist/index.cjs

@@ -1630,8 +1630,8 @@ LinkButton.displayName = "LinkButton";
 * <TextInput readOnly value="Cannot edit this" />
 * ```
 */
-const TextInput = react.default.forwardRef(({ className, invalid, width, type = "text", ...props }, ref) => {
-	const classes = (0, _dsn_starter_kit_core.classNames)("dsn-text-input", width && `dsn-text-input--width-${width}`, className);
+const TextInput = react.default.forwardRef(({ className, invalid, inlineSize, type = "text", ...props }, ref) => {
+	const classes = (0, _dsn_starter_kit_core.classNames)("dsn-text-input", inlineSize && `dsn-text-input--inline-size-${inlineSize}`, className);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 		ref,
 		type,
@@ -1694,8 +1694,8 @@ FileInput.displayName = "FileInput";
 * <EmailInput invalid aria-invalid="true" aria-describedby="error" />
 * ```
 */
-const EmailInput = react.default.forwardRef(({ className, invalid, width, autoComplete, ...props }, ref) => {
-	const classes = (0, _dsn_starter_kit_core.classNames)("dsn-text-input", width && `dsn-text-input--width-${width}`, className);
+const EmailInput = react.default.forwardRef(({ className, invalid, inlineSize, autoComplete, ...props }, ref) => {
+	const classes = (0, _dsn_starter_kit_core.classNames)("dsn-text-input", inlineSize && `dsn-text-input--inline-size-${inlineSize}`, className);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 		ref,
 		type: "email",
@@ -1731,8 +1731,8 @@ EmailInput.displayName = "EmailInput";
 * <PasswordInput invalid aria-invalid="true" aria-describedby="error" />
 * ```
 */
-const PasswordInput = react.default.forwardRef(({ passwordAutocomplete = "current-password", className, invalid, width, autoComplete, ...props }, ref) => {
-	const classes = (0, _dsn_starter_kit_core.classNames)("dsn-text-input", width && `dsn-text-input--width-${width}`, className);
+const PasswordInput = react.default.forwardRef(({ passwordAutocomplete = "current-password", className, invalid, inlineSize, autoComplete, ...props }, ref) => {
+	const classes = (0, _dsn_starter_kit_core.classNames)("dsn-text-input", inlineSize && `dsn-text-input--inline-size-${inlineSize}`, className);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 		ref,
 		type: "password",
@@ -1762,8 +1762,8 @@ PasswordInput.displayName = "PasswordInput";
 * <NumberInput invalid aria-invalid="true" aria-describedby="error" />
 * ```
 */
-const NumberInput = react.default.forwardRef(({ className, invalid, width, allowDecimals = false, ...props }, ref) => {
-	const classes = (0, _dsn_starter_kit_core.classNames)("dsn-text-input", width && `dsn-text-input--width-${width}`, className);
+const NumberInput = react.default.forwardRef(({ className, invalid, inlineSize, allowDecimals = false, ...props }, ref) => {
+	const classes = (0, _dsn_starter_kit_core.classNames)("dsn-text-input", inlineSize && `dsn-text-input--inline-size-${inlineSize}`, className);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 		ref,
 		type: "text",
@@ -1795,8 +1795,8 @@ NumberInput.displayName = "NumberInput";
 * <TelephoneInput invalid aria-invalid="true" aria-describedby="error" />
 * ```
 */
-const TelephoneInput = react.default.forwardRef(({ className, invalid, width, autoComplete, ...props }, ref) => {
-	const classes = (0, _dsn_starter_kit_core.classNames)("dsn-text-input", width && `dsn-text-input--width-${width}`, className);
+const TelephoneInput = react.default.forwardRef(({ className, invalid, inlineSize = "md", autoComplete, ...props }, ref) => {
+	const classes = (0, _dsn_starter_kit_core.classNames)("dsn-text-input", inlineSize && `dsn-text-input--inline-size-${inlineSize}`, className);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 		ref,
 		type: "tel",
@@ -1828,8 +1828,8 @@ TelephoneInput.displayName = "TelephoneInput";
 * <SearchInput invalid aria-invalid="true" aria-describedby="error" />
 * ```
 */
-const SearchInput = react.default.forwardRef(({ className, invalid, width, ...props }, ref) => {
-	const wrapperClasses = (0, _dsn_starter_kit_core.classNames)("dsn-search-input-wrapper", width && `dsn-search-input-wrapper--width-${width}`);
+const SearchInput = react.default.forwardRef(({ className, invalid, inlineSize, ...props }, ref) => {
+	const wrapperClasses = (0, _dsn_starter_kit_core.classNames)("dsn-search-input-wrapper", inlineSize && `dsn-search-input-wrapper--inline-size-${inlineSize}`);
 	const inputClasses = (0, _dsn_starter_kit_core.classNames)("dsn-text-input", "dsn-search-input", className);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: wrapperClasses,
@@ -1852,7 +1852,7 @@ SearchInput.displayName = "SearchInput";
 /**
 * Time Input component
 * Time input with an interactive clock button at inline-end that opens the native time picker.
-* Fixed width (sm) — not configurable, as time inputs have a predictable content width.
+* Fixed inline-size (sm): not configurable, as time inputs have a predictable content length.
 *
 * @example
 * ```tsx
@@ -1911,7 +1911,7 @@ TimeInput.displayName = "TimeInput";
 /**
 * 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.
+* Fixed inline-size (md): not configurable, as date inputs have a predictable content length.
 *
 * @example
 * ```tsx
@@ -2024,7 +2024,7 @@ const DateInputGroup = react.default.forwardRef(({ className, value, onChange, i
 					children: "Dag"
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberInput, {
 					id: dayId,
-					width: "xs",
+					inlineSize: "xs",
 					value: value?.day ?? "",
 					onChange: handleChange("day"),
 					invalid,
@@ -2043,7 +2043,7 @@ const DateInputGroup = react.default.forwardRef(({ className, value, onChange, i
 					children: "Maand"
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberInput, {
 					id: monthId,
-					width: "xs",
+					inlineSize: "xs",
 					value: value?.month ?? "",
 					onChange: handleChange("month"),
 					invalid,
@@ -2062,7 +2062,7 @@ const DateInputGroup = react.default.forwardRef(({ className, value, onChange, i
 					children: "Jaar"
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberInput, {
 					id: yearId,
-					width: "sm",
+					inlineSize: "sm",
 					value: value?.year ?? "",
 					onChange: handleChange("year"),
 					invalid,
@@ -2102,15 +2102,15 @@ DateInputGroup.displayName = "DateInputGroup";
 *   </Select>
 * </FormField>
 *
-* // Width variant
-* <Select width="lg">...</Select>
+* // Inline-size variant
+* <Select inlineSize="lg">...</Select>
 *
 * // Invalid state
 * <Select invalid aria-invalid="true" aria-describedby="error">...</Select>
 * ```
 */
-const Select = react.default.forwardRef(({ className, invalid, width, disabled, children, ...props }, ref) => {
-	const wrapperClasses = (0, _dsn_starter_kit_core.classNames)("dsn-select-wrapper", width && `dsn-select-wrapper--width-${width}`);
+const Select = react.default.forwardRef(({ className, invalid, inlineSize, disabled, children, ...props }, ref) => {
+	const wrapperClasses = (0, _dsn_starter_kit_core.classNames)("dsn-select-wrapper", inlineSize && `dsn-select-wrapper--inline-size-${inlineSize}`);
 	const selectClasses = (0, _dsn_starter_kit_core.classNames)("dsn-text-input", "dsn-select", className);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: wrapperClasses,
@@ -2154,8 +2154,8 @@ Select.displayName = "Select";
 * <TextArea readOnly value="View only" rows={3} />
 * ```
 */
-const TextArea = react.default.forwardRef(({ className, invalid, width, rows = 4, ...props }, ref) => {
-	const classes = (0, _dsn_starter_kit_core.classNames)("dsn-text-area", width && `dsn-text-area--width-${width}`, className);
+const TextArea = react.default.forwardRef(({ className, invalid, inlineSize, rows = 4, ...props }, ref) => {
+	const classes = (0, _dsn_starter_kit_core.classNames)("dsn-text-area", inlineSize && `dsn-text-area--inline-size-${inlineSize}`, className);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
 		ref,
 		className: classes,
@@ -3697,6 +3697,10 @@ const DrawerFooter = react.default.forwardRef(({ className, children, ...props }
 DrawerFooter.displayName = "DrawerFooter";
 //#endregion
 //#region src/PageHeader/PageHeader.tsx
+/** Auto-hide: boven deze scrollpositie (px) blijft de header altijd zichtbaar */
+const AUTO_HIDE_OFFSET = 100;
+/** Auto-hide: zoveel px omhoog scrollen voordat de header terugkomt */
+const AUTO_HIDE_REVEAL_DISTANCE = 64;
 /**
 * PageHeader component
 * Primaire navigatieheader voor een pagina. Mobile-first implementatie.
@@ -3744,11 +3748,24 @@ const PageHeader = react.default.forwardRef(({ className, logoSlot, sticky = "no
 	react.default.useEffect(() => {
 		if (sticky !== "auto-hide") return;
 		let lastScrollY = window.scrollY;
+		let scrolledUp = 0;
 		const handleScroll = () => {
 			const currentScrollY = window.scrollY;
-			const isScrollingDown = currentScrollY > lastScrollY && currentScrollY > 100;
-			combinedRef.current?.setAttribute("data-hidden", String(isScrollingDown));
+			const delta = currentScrollY - lastScrollY;
 			lastScrollY = currentScrollY;
+			let hidden;
+			if (currentScrollY <= AUTO_HIDE_OFFSET) {
+				hidden = false;
+				scrolledUp = 0;
+			} else if (delta > 0) {
+				hidden = true;
+				scrolledUp = 0;
+			} else if (delta < 0) {
+				scrolledUp -= delta;
+				if (scrolledUp < AUTO_HIDE_REVEAL_DISTANCE) return;
+				hidden = false;
+			} else return;
+			combinedRef.current?.setAttribute("data-hidden", String(hidden));
 		};
 		window.addEventListener("scroll", handleScroll, { passive: true });
 		return () => window.removeEventListener("scroll", handleScroll);
@@ -4494,22 +4511,29 @@ Image.displayName = "Image";
 const CardContext = react.default.createContext({});
 /**
 * Card component
-* Configureerbare container voor gestructureerde content met header, body en footer.
-* Gebruikt een stretched-link techniek: de link in `CardHeading` dekt de volledige card.
-* Screenreaders lezen alleen de heading-tekst als linknaam.
+* Configureerbare container met vier optionele secties: `CardPreHeader`,
+* `CardHeader`, `CardBody` en `CardFooter` (zie DR-2026-11).
+*
+* Zet `CardHeader` in de JSX altijd vóór `CardPreHeader`: zo kondigt een
+* screenreader de heading eerst aan. De CSS zet de pre-header visueel bovenaan.
+*
+* Met `href` wordt de heading een stretched link: de link dekt de volledige
+* card, en screenreaders lezen alleen de heading-tekst als linknaam.
 *
 * @example
 * ```tsx
 * <Card href="/artikel/slug">
 *   <CardHeader>
-*     <Image src="/foto.jpg" alt="" width={800} height={450} ratio="16:9" />
+*     <CardHeading level={2}>Artikeltitel</CardHeading>
 *   </CardHeader>
+*   <CardPreHeader>
+*     <Image src="/foto.jpg" alt="" width={800} height={450} ratio="16:9" />
+*   </CardPreHeader>
 *   <CardBody>
-*     <CardHeading level={2}>Artikeltitel</CardHeading>
 *     <Paragraph>Korte beschrijving.</Paragraph>
 *   </CardBody>
 *   <CardFooter>
-*     <Link href="/artikel/slug" aria-hidden tabIndex={-1}>Lees meer</Link>
+*     <CardAffordance>Lees meer</CardAffordance>
 *   </CardFooter>
 * </Card>
 * ```
@@ -4527,13 +4551,14 @@ const Card = react.default.forwardRef(({ className, href, children, ...props },
 });
 Card.displayName = "Card";
 /**
-* CardHeader sub-component
+* CardPreHeader sub-component
+* Staat in de DOM ná `CardHeader` en komt visueel bovenaan via `order: -1`.
 * Zonder children → toont automatisch een afbeeldingsplaceholder.
 */
-const CardHeader = react.default.forwardRef(({ className, children, ...props }, ref) => {
+const CardPreHeader = react.default.forwardRef(({ className, children, ...props }, ref) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref,
-		className: (0, _dsn_starter_kit_core.classNames)("dsn-card__header", className),
+		className: (0, _dsn_starter_kit_core.classNames)("dsn-card__pre-header", className),
 		...props,
 		children: children ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "dsn-card__image-placeholder",
@@ -4541,10 +4566,24 @@ const CardHeader = react.default.forwardRef(({ className, children, ...props },
 		})
 	});
 });
+CardPreHeader.displayName = "CardPreHeader";
+/**
+* CardHeader sub-component
+* Bevat de heading of het label van de card. Zet hem in de JSX vóór
+* `CardPreHeader`.
+*/
+const CardHeader = react.default.forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className: (0, _dsn_starter_kit_core.classNames)("dsn-card__header", className),
+		...props,
+		children
+	});
+});
 CardHeader.displayName = "CardHeader";
 /**
 * CardBody sub-component
-* Groeit via `flex: 1` zodat de footer altijd onderaan uitlijnt.
+* Inhoudssectie onder de header.
 */
 const CardBody = react.default.forwardRef(({ className, children, ...props }, ref) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -4558,7 +4597,7 @@ CardBody.displayName = "CardBody";
 /**
 * CardHeading sub-component
 * Ontvangt `href` automatisch via React context van de parent `Card`.
-* Wanneer `href` beschikbaar is, wraps de heading-tekst in een `<a class="dsn-card-heading__link">`.
+* Wanneer `href` beschikbaar is, staat de heading-tekst in een `<a class="dsn-card__link">`.
 * Het `::before` pseudo-element dekt de volledige card (stretched link).
 */
 const CardHeading = react.default.forwardRef(({ className, level = 2, children, ...props }, ref) => {
@@ -4566,21 +4605,67 @@ const CardHeading = react.default.forwardRef(({ className, level = 2, children,
 	const Tag = `h${level}`;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
 		ref,
-		className: (0, _dsn_starter_kit_core.classNames)("dsn-card-heading", className),
+		className: (0, _dsn_starter_kit_core.classNames)("dsn-card__heading", className),
 		...props,
 		children: href ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
 			href,
-			className: "dsn-card-heading__link",
+			className: "dsn-card__link",
 			children
 		}) : children
 	});
 });
 CardHeading.displayName = "CardHeading";
 /**
+* CardLabel sub-component
+* Gebruik in plaats van `CardHeading` wanneer de card geen nieuw onderwerp
+* introduceert, zoals bij login-opties of instellingen. Ontvangt `href` via
+* context, net als `CardHeading`.
+*/
+const CardLabel = react.default.forwardRef(({ className, children, ...props }, ref) => {
+	const { href } = react.default.useContext(CardContext);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		ref,
+		className: (0, _dsn_starter_kit_core.classNames)("dsn-card__label", className),
+		...props,
+		children: href ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+			href,
+			className: "dsn-card__link",
+			children
+		}) : children
+	});
+});
+CardLabel.displayName = "CardLabel";
+/**
+* CardDescription sub-component
+* Korte omschrijving met eigen typografie-tokens.
+*/
+const CardDescription = react.default.forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		ref,
+		className: (0, _dsn_starter_kit_core.classNames)("dsn-card__description", className),
+		...props,
+		children
+	});
+});
+CardDescription.displayName = "CardDescription";
+/**
+* CardMeta sub-component
+* Aanvullende gegevens bij de card, zoals een datum.
+*/
+const CardMeta = react.default.forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		ref,
+		className: (0, _dsn_starter_kit_core.classNames)("dsn-card__meta", className),
+		...props,
+		children
+	});
+});
+CardMeta.displayName = "CardMeta";
+/**
 * CardFooter sub-component
-* Directe kinderen staan boven de stretched link via `z-index: 2` in CSS.
-* Gebruik `aria-hidden` + `tabIndex={-1}` op de link wanneer deze dezelfde
-* bestemming heeft als de card — vermijdt een dubbele tabstop.
+* Staat altijd onderaan de card. Links en buttons staan boven de stretched
+* link en blijven zelfstandig klikbaar. Voor een visuele "Lees meer" naar
+* dezelfde bestemming als de card: gebruik `CardAffordance`.
 */
 const CardFooter = react.default.forwardRef(({ className, children, ...props }, ref) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -4592,6 +4677,21 @@ const CardFooter = react.default.forwardRef(({ className, children, ...props },
 });
 CardFooter.displayName = "CardFooter";
 /**
+* CardAffordance sub-component
+* Een `<span aria-hidden="true">` die eruitziet als een link. De stretched
+* link vangt de klik al af, dus er is geen tweede tabstop nodig.
+*/
+const CardAffordance = react.default.forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		ref,
+		className: (0, _dsn_starter_kit_core.classNames)("dsn-card__affordance", className),
+		"aria-hidden": "true",
+		...props,
+		children
+	});
+});
+CardAffordance.displayName = "CardAffordance";
+/**
 * CardGroup sub-component
 * Flexbox wrapper die gelijke hoogte garandeert en de footer in elke card onderaan uitlijnt.
 * Rendert `role="list"` wanneer `as="ul"` — nodig omdat CSS-resets de lijstsemantiek verwijderen.
@@ -5181,11 +5281,16 @@ exports.BreakoutSection = BreakoutSection;
 exports.Button = Button;
 exports.ButtonLink = ButtonLink;
 exports.Card = Card;
+exports.CardAffordance = CardAffordance;
 exports.CardBody = CardBody;
+exports.CardDescription = CardDescription;
 exports.CardFooter = CardFooter;
 exports.CardGroup = CardGroup;
 exports.CardHeader = CardHeader;
 exports.CardHeading = CardHeading;
+exports.CardLabel = CardLabel;
+exports.CardMeta = CardMeta;
+exports.CardPreHeader = CardPreHeader;
 exports.Checkbox = Checkbox;
 exports.CheckboxGroup = CheckboxGroup;
 exports.CheckboxOption = CheckboxOption;