@dsn-starter-kit/components-react 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/dist/ActionGroup/ActionGroup.css +8 -0
  2. package/dist/BreakoutSection/BreakoutSection.css +4 -0
  3. package/dist/Details/Details.css +14 -0
  4. package/dist/DotBadge/DotBadge.css +13 -0
  5. package/dist/File/File.css +16 -0
  6. package/dist/HeadingGroup/HeadingGroup.css +5 -0
  7. package/dist/HeadingGroup/HeadingGroup.d.ts +23 -0
  8. package/dist/HeadingGroup/HeadingGroup.d.ts.map +1 -0
  9. package/dist/HeadingGroup/HeadingGroup.js +12 -0
  10. package/dist/HeadingGroup/HeadingGroup.js.map +1 -0
  11. package/dist/HeadingGroup/index.d.ts +3 -0
  12. package/dist/HeadingGroup/index.d.ts.map +1 -0
  13. package/dist/HeadingGroup/index.js +2 -0
  14. package/dist/HeadingGroup/index.js.map +1 -0
  15. package/dist/Hero/Hero.css +4 -0
  16. package/dist/PageHeader/PageHeader.css +13 -0
  17. package/dist/PreHeading/PreHeading.css +10 -0
  18. package/dist/PreHeading/PreHeading.d.ts +8 -0
  19. package/dist/PreHeading/PreHeading.d.ts.map +1 -0
  20. package/dist/PreHeading/PreHeading.js +9 -0
  21. package/dist/PreHeading/PreHeading.js.map +1 -0
  22. package/dist/PreHeading/index.d.ts +3 -0
  23. package/dist/PreHeading/index.d.ts.map +1 -0
  24. package/dist/PreHeading/index.js +2 -0
  25. package/dist/PreHeading/index.js.map +1 -0
  26. package/dist/ProgressBar/ProgressBar.css +14 -0
  27. package/dist/ProgressBar/ProgressBar.d.ts +7 -2
  28. package/dist/ProgressBar/ProgressBar.d.ts.map +1 -1
  29. package/dist/ProgressBar/ProgressBar.js +2 -2
  30. package/dist/ProgressBar/ProgressBar.js.map +1 -1
  31. package/dist/Radio/Radio.css +36 -0
  32. package/dist/SearchInput/SearchInput.css +8 -0
  33. package/dist/Select/Select.css +8 -0
  34. package/dist/Spinner/Spinner.css +17 -0
  35. package/dist/index.css +172 -0
  36. package/dist/index.d.ts +2 -0
  37. package/dist/index.d.ts.map +1 -1
  38. package/dist/index.js +2 -0
  39. package/dist/index.js.map +1 -1
  40. package/package.json +3 -3
@@ -44,6 +44,14 @@
44
44
  row-gap: var(--dsn-action-group-row-gap);
45
45
  }
46
46
 
47
+ /* Link en LinkButton hebben align-self: flex-start om uitrekken te voorkomen
48
+ in verticale contexten — in een horizontale ActionGroup resetten we dit
49
+ zodat ze verticaal centreren met de Buttons naast hen. */
50
+ .dsn-action-group:not(.dsn-action-group--vertical) > .dsn-link,
51
+ .dsn-action-group:not(.dsn-action-group--vertical) > .dsn-link-button {
52
+ align-self: center;
53
+ }
54
+
47
55
  /* ===========================
48
56
  Vertical modifier
49
57
  =========================== */
@@ -15,5 +15,9 @@
15
15
  .dsn-breakout-section {
16
16
  margin-block: var(--dsn-space-block-4xl);
17
17
  margin-inline: calc(50% - 50vw);
18
+ border-block-start: var(--dsn-breakout-section-border-block-width) solid
19
+ var(--dsn-color-transparent);
20
+ border-block-end: var(--dsn-breakout-section-border-block-width) solid
21
+ var(--dsn-color-transparent);
18
22
  }
19
23
 
@@ -116,6 +116,20 @@
116
116
  transform: rotate(180deg);
117
117
  }
118
118
 
119
+ /* ===========================
120
+ Forced colors (High Contrast mode)
121
+ =========================== */
122
+ @media (forced-colors: active) {
123
+ .dsn-details__icon {
124
+ forced-color-adjust: auto;
125
+ color: LinkText;
126
+ }
127
+
128
+ .dsn-details__summary:hover .dsn-details__icon {
129
+ color: LinkText;
130
+ }
131
+ }
132
+
119
133
  /* ===========================
120
134
  Content area
121
135
  =========================== */
@@ -96,3 +96,16 @@
96
96
  }
97
97
  }
98
98
 
99
+ /* Forced colors (High Contrast mode)
100
+ background-color wordt vervangen door Canvas — dot is onzichtbaar zonder border.
101
+ Pulse-animatie uitschakelen: opacity-animatie op systeemkleuren is onbetrouwbaar. */
102
+ @media (forced-colors: active) {
103
+ .dsn-dot-badge {
104
+ border: 1px solid transparent;
105
+ }
106
+
107
+ .dsn-dot-badge--pulse::before {
108
+ animation: none;
109
+ }
110
+ }
111
+
@@ -176,6 +176,22 @@ span.dsn-file__name {
176
176
  }
177
177
  }
178
178
 
179
+ /* =============================================================================
180
+ Forced colors (High Contrast mode)
181
+ ============================================================================= */
182
+
183
+ @media (forced-colors: active) {
184
+ .dsn-file__media > .dsn-icon {
185
+ forced-color-adjust: auto;
186
+ color: CanvasText;
187
+ }
188
+
189
+ .dsn-file__status-icon {
190
+ forced-color-adjust: auto;
191
+ color: CanvasText;
192
+ }
193
+ }
194
+
179
195
  /* =============================================================================
180
196
  FileList — ul wrapper voor meerdere File items
181
197
  ============================================================================= */
@@ -0,0 +1,5 @@
1
+ .dsn-heading-group {
2
+ display: flex;
3
+ flex-direction: column;
4
+ }
5
+
@@ -0,0 +1,23 @@
1
+ import React from 'react';
2
+ import type { HeadingLevel, HeadingAppearance } from '../Heading/Heading';
3
+ import './HeadingGroup.css';
4
+ export interface HeadingGroupProps extends React.HTMLAttributes<HTMLHeadingElement> {
5
+ /**
6
+ * Semantic heading level — determines the HTML element (h1–h6)
7
+ * @default 2
8
+ */
9
+ level?: HeadingLevel;
10
+ /**
11
+ * Visual appearance — controls font size, line height, and spacing.
12
+ * Defaults to matching the level (e.g. level 2 → heading-2).
13
+ */
14
+ appearance?: HeadingAppearance;
15
+ /**
16
+ * Content of the pre-heading. Wrapped in a dsn-pre-heading span automatically.
17
+ */
18
+ preHeading?: React.ReactNode;
19
+ children?: React.ReactNode;
20
+ className?: string;
21
+ }
22
+ export declare const HeadingGroup: React.ForwardRefExoticComponent<HeadingGroupProps & React.RefAttributes<HTMLHeadingElement>>;
23
+ //# sourceMappingURL=HeadingGroup.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"HeadingGroup.d.ts","sourceRoot":"","sources":["../../src/HeadingGroup/HeadingGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,oBAAoB,CAAC;AAE5B,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC;IACjF;;;OAGG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAE/B;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,8FA4BxB,CAAC"}
@@ -0,0 +1,12 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import React from 'react';
3
+ import { classNames } from '@dsn-starter-kit/core';
4
+ import './HeadingGroup.css';
5
+ export const HeadingGroup = React.forwardRef(({ level = 2, appearance, preHeading, className, children, ...props }, ref) => {
6
+ const resolvedAppearance = appearance ?? `heading-${level}`;
7
+ const Tag = `h${level}`;
8
+ const classes = classNames('dsn-heading', `dsn-heading--${resolvedAppearance}`, 'dsn-heading-group', className);
9
+ return (_jsxs(Tag, { ref: ref, className: classes, ...props, children: [preHeading != null && (_jsx("span", { className: "dsn-pre-heading", children: preHeading })), children] }));
10
+ });
11
+ HeadingGroup.displayName = 'HeadingGroup';
12
+ //# sourceMappingURL=HeadingGroup.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"HeadingGroup.js","sourceRoot":"","sources":["../../src/HeadingGroup/HeadingGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,OAAO,oBAAoB,CAAC;AAwB5B,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAI1C,CACE,EAAE,KAAK,GAAG,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EACpE,GAAG,EACH,EAAE;IACF,MAAM,kBAAkB,GACtB,UAAU,IAAK,WAAW,KAAK,EAAwB,CAAC;IAC1D,MAAM,GAAG,GAAG,IAAI,KAAK,EAAW,CAAC;IAEjC,MAAM,OAAO,GAAG,UAAU,CACxB,aAAa,EACb,gBAAgB,kBAAkB,EAAE,EACpC,mBAAmB,EACnB,SAAS,CACV,CAAC;IAEF,OAAO,CACL,MAAC,GAAG,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,KAAM,KAAK,aACzC,UAAU,IAAI,IAAI,IAAI,CACrB,eAAM,SAAS,EAAC,iBAAiB,YAAE,UAAU,GAAQ,CACtD,EACA,QAAQ,IACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC"}
@@ -0,0 +1,3 @@
1
+ export { HeadingGroup } from './HeadingGroup';
2
+ export type { HeadingGroupProps } from './HeadingGroup';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/HeadingGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { HeadingGroup } from './HeadingGroup';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/HeadingGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
@@ -26,6 +26,10 @@
26
26
 
27
27
  .dsn-hero {
28
28
  margin-inline: calc(50% - 50vw);
29
+ border-block-start: var(--dsn-hero-border-block-width) solid
30
+ var(--dsn-color-transparent);
31
+ border-block-end: var(--dsn-hero-border-block-width) solid
32
+ var(--dsn-color-transparent);
29
33
  min-block-size: max(
30
34
  var(--dsn-hero-min-block-size),
31
35
  var(--dsn-hero-block-size)
@@ -78,6 +78,19 @@
78
78
  }
79
79
  }
80
80
 
81
+ /* =============================================================================
82
+ Forced colors (High Contrast mode)
83
+ Default variant mist op large viewport een border-block-end (navbar neemt de
84
+ visuele scheiding over). In forced-colors mode is die achtergrondkleur niet
85
+ zichtbaar, dus de border herstellen voor sectieafbakening.
86
+ ============================================================================= */
87
+
88
+ @media (forced-colors: active) and (min-width: 64em) {
89
+ .dsn-page-header:not(.dsn-page-header--compact) {
90
+ border-block-end: var(--dsn-border-width-thick) solid transparent;
91
+ }
92
+ }
93
+
81
94
  /* =============================================================================
82
95
  Masthead (large viewport) — neutrale achtergrond, logo + servicemenu + zoek
83
96
  ============================================================================= */
@@ -0,0 +1,10 @@
1
+ .dsn-pre-heading {
2
+ display: block;
3
+ color: var(--dsn-pre-heading-color);
4
+ font-family: var(--dsn-pre-heading-font-family);
5
+ font-size: var(--dsn-pre-heading-font-size);
6
+ font-weight: var(--dsn-pre-heading-font-weight);
7
+ line-height: var(--dsn-pre-heading-line-height);
8
+ margin-block-end: var(--dsn-pre-heading-margin-block-end);
9
+ }
10
+
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ import './PreHeading.css';
3
+ export interface PreHeadingProps extends React.HTMLAttributes<HTMLSpanElement> {
4
+ children?: React.ReactNode;
5
+ className?: string;
6
+ }
7
+ export declare const PreHeading: React.ForwardRefExoticComponent<PreHeadingProps & React.RefAttributes<HTMLSpanElement>>;
8
+ //# sourceMappingURL=PreHeading.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PreHeading.d.ts","sourceRoot":"","sources":["../../src/PreHeading/PreHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,kBAAkB,CAAC;AAE1B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAC5E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,yFAYtB,CAAC"}
@@ -0,0 +1,9 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import React from 'react';
3
+ import { classNames } from '@dsn-starter-kit/core';
4
+ import './PreHeading.css';
5
+ export const PreHeading = React.forwardRef(({ children, className, ...props }, ref) => {
6
+ return (_jsx("span", { ref: ref, className: classNames('dsn-pre-heading', className), ...props, children: children }));
7
+ });
8
+ PreHeading.displayName = 'PreHeading';
9
+ //# sourceMappingURL=PreHeading.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PreHeading.js","sourceRoot":"","sources":["../../src/PreHeading/PreHeading.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,kBAAkB,CAAC;AAO1B,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACxC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzC,OAAO,CACL,eACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE,SAAS,CAAC,KAC/C,KAAK,YAER,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}
@@ -0,0 +1,3 @@
1
+ export { PreHeading } from './PreHeading';
2
+ export type { PreHeadingProps } from './PreHeading';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/PreHeading/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { PreHeading } from './PreHeading';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/PreHeading/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}
@@ -82,6 +82,20 @@
82
82
  margin-block-start: var(--dsn-progress-bar-gap-footer);
83
83
  }
84
84
 
85
+ /* Forced colors (High Contrast mode)
86
+ appearance: none schakelt alle browser-styling uit waardoor track en fill
87
+ onzichtbaar worden. appearance: auto herstelt de native progress-stijl
88
+ zodat de browser zijn eigen system colors toepast. */
89
+ @media (forced-colors: active) {
90
+ .dsn-progress-bar__bar {
91
+ appearance: auto;
92
+ block-size: revert;
93
+ border: revert;
94
+ border-radius: revert;
95
+ background-color: revert;
96
+ }
97
+ }
98
+
85
99
  @media (prefers-reduced-motion: reduce) {
86
100
  .dsn-progress-bar__bar::-webkit-progress-value,
87
101
  .dsn-progress-bar__bar::-moz-progress-bar {
@@ -3,7 +3,7 @@ import './ProgressBar.css';
3
3
  export interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
4
4
  /**
5
5
  * Visueel verborgen label dat de voortgangsbalk beschrijft voor screenreaders.
6
- * Altijd vereist — gekoppeld via <label for> aan het <progress>-element.
6
+ * Altijd vereist — gekoppeld via `<label for>` aan het `<progress>`-element.
7
7
  */
8
8
  label: string;
9
9
  /**
@@ -20,10 +20,15 @@ export interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
20
20
  */
21
21
  description?: React.ReactNode;
22
22
  /**
23
- * ID voor het <progress>-element en de bijbehorende <label>.
23
+ * ID voor het `<progress>`-element en de bijbehorende `<label>`.
24
24
  * Automatisch gegenereerd via useId() indien weggelaten.
25
25
  */
26
26
  id?: string;
27
+ /**
28
+ * Verbergt het zichtbare percentage-getal. Gebruik dit voor decoratief gebruik
29
+ * in combinatie met aria-hidden="true" op de component.
30
+ */
31
+ hideValue?: boolean;
27
32
  }
28
33
  /**
29
34
  * ProgressBar component
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAErC,OAAO,mBAAmB,CAAC;AAE3B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,WAAW,yFAuCvB,CAAC"}
1
+ {"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAErC,OAAO,mBAAmB,CAAC;AAE3B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,WAAW,yFAqDvB,CAAC"}
@@ -26,11 +26,11 @@ import './ProgressBar.css';
26
26
  * <ProgressBar label="Stap voortgang" value={3} max={7} />
27
27
  * ```
28
28
  */
29
- export const ProgressBar = React.forwardRef(({ className, label, value, max = 100, description, id, ...props }, ref) => {
29
+ export const ProgressBar = React.forwardRef(({ className, label, value, max = 100, description, hideValue, id, ...props }, ref) => {
30
30
  const generatedId = useId();
31
31
  const progressId = id ?? generatedId;
32
32
  const percentage = Math.round((value / max) * 100);
33
- return (_jsxs("div", { ref: ref, className: classNames('dsn-progress-bar', className), ...props, children: [_jsx("label", { className: "dsn-visually-hidden", htmlFor: progressId, children: label }), _jsx("div", { className: "dsn-progress-bar__header", children: _jsxs("p", { className: "dsn-paragraph dsn-progress-bar__percentage", "aria-hidden": "true", children: [percentage, "%"] }) }), _jsxs("progress", { id: progressId, className: "dsn-progress-bar__bar", value: value, max: max, children: [percentage, "%"] }), description && (_jsx("p", { className: "dsn-paragraph dsn-progress-bar__description", children: description }))] }));
33
+ return (_jsxs("div", { ref: ref, className: classNames('dsn-progress-bar', className), ...props, children: [_jsx("label", { className: "dsn-visually-hidden", htmlFor: progressId, children: label }), !hideValue && (_jsx("div", { className: "dsn-progress-bar__header", children: _jsxs("p", { className: "dsn-paragraph dsn-progress-bar__percentage", "aria-hidden": "true", children: [percentage, "%"] }) })), _jsxs("progress", { id: progressId, className: "dsn-progress-bar__bar", value: value, max: max, children: [percentage, "%"] }), description && (_jsx("p", { className: "dsn-paragraph dsn-progress-bar__description", children: description }))] }));
34
34
  });
35
35
  ProgressBar.displayName = 'ProgressBar';
36
36
  //# sourceMappingURL=ProgressBar.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,mBAAmB,CAAC;AAgC3B;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,GAAG,GAAG,EAAE,WAAW,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzE,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,UAAU,GAAG,EAAE,IAAI,WAAW,CAAC;IACrC,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC;IAEnD,OAAO,CACL,eACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC,KAChD,KAAK,aAET,gBAAO,SAAS,EAAC,qBAAqB,EAAC,OAAO,EAAE,UAAU,YACvD,KAAK,GACA,EACR,cAAK,SAAS,EAAC,0BAA0B,YACvC,aACE,SAAS,EAAC,4CAA4C,iBAC1C,MAAM,aAEjB,UAAU,SACT,GACA,EACN,oBACE,EAAE,EAAE,UAAU,EACd,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,aAEP,UAAU,SACF,EACV,WAAW,IAAI,CACd,YAAG,SAAS,EAAC,6CAA6C,YACvD,WAAW,GACV,CACL,IACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}
1
+ {"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,mBAAmB,CAAC;AAsC3B;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,CACE,EACE,SAAS,EACT,KAAK,EACL,KAAK,EACL,GAAG,GAAG,GAAG,EACT,WAAW,EACX,SAAS,EACT,EAAE,EACF,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,UAAU,GAAG,EAAE,IAAI,WAAW,CAAC;IACrC,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC;IAEnD,OAAO,CACL,eACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC,KAChD,KAAK,aAET,gBAAO,SAAS,EAAC,qBAAqB,EAAC,OAAO,EAAE,UAAU,YACvD,KAAK,GACA,EACP,CAAC,SAAS,IAAI,CACb,cAAK,SAAS,EAAC,0BAA0B,YACvC,aACE,SAAS,EAAC,4CAA4C,iBAC1C,MAAM,aAEjB,UAAU,SACT,GACA,CACP,EACD,oBACE,EAAE,EAAE,UAAU,EACd,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,aAEP,UAAU,SACF,EACV,WAAW,IAAI,CACd,YAAG,SAAS,EAAC,6CAA6C,YACvD,WAAW,GACV,CACL,IACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}
@@ -157,6 +157,42 @@
157
157
  transform: scale(1);
158
158
  }
159
159
 
160
+ /* Forced colors (High Contrast mode)
161
+ background-color wordt genegeerd — inner circle verdwijnt tegen de control achtergrond.
162
+ Highlight/HighlightText zijn de system colors voor geselecteerde form controls. */
163
+ @media (forced-colors: active) {
164
+ .dsn-radio__control {
165
+ forced-color-adjust: none;
166
+ border-color: ButtonText;
167
+ background-color: Field;
168
+ }
169
+
170
+ .dsn-radio__input:checked + .dsn-radio__control {
171
+ border-color: Highlight;
172
+ background-color: Highlight;
173
+ }
174
+
175
+ .dsn-radio__input:checked + .dsn-radio__control .dsn-radio__inner-circle {
176
+ background-color: HighlightText;
177
+ }
178
+
179
+ .dsn-radio__input:checked:disabled + .dsn-radio__control {
180
+ border-color: GrayText;
181
+ background-color: GrayText;
182
+ }
183
+
184
+ .dsn-radio__input:checked:disabled
185
+ + .dsn-radio__control
186
+ .dsn-radio__inner-circle {
187
+ background-color: Field;
188
+ }
189
+
190
+ .dsn-radio__input:disabled + .dsn-radio__control {
191
+ border-color: GrayText;
192
+ background-color: Field;
193
+ }
194
+ }
195
+
160
196
  /* Invalid state */
161
197
  .dsn-radio__input--invalid + .dsn-radio__control {
162
198
  border-width: var(--dsn-radio-invalid-border-width);
@@ -30,6 +30,14 @@
30
30
  padding-inline-start: var(--dsn-search-input-padding-inline-start-with-icon);
31
31
  }
32
32
 
33
+ /* Forced colors (High Contrast mode) */
34
+ @media (forced-colors: active) {
35
+ .dsn-search-input__icon {
36
+ forced-color-adjust: auto;
37
+ color: ButtonText;
38
+ }
39
+ }
40
+
33
41
  /* Hide browser-native clear button — will be implemented as a separate pattern */
34
42
  .dsn-search-input::-webkit-search-cancel-button {
35
43
  display: none;
@@ -60,6 +60,14 @@
60
60
  border-color: var(--dsn-text-input-invalid-border-color);
61
61
  }
62
62
 
63
+ /* Forced colors (High Contrast mode) */
64
+ @media (forced-colors: active) {
65
+ .dsn-select__icon {
66
+ forced-color-adjust: auto;
67
+ color: ButtonText;
68
+ }
69
+ }
70
+
63
71
  /* Remove native arrow in IE/Edge */
64
72
  .dsn-select::-ms-expand {
65
73
  display: none;
@@ -82,6 +82,23 @@
82
82
  }
83
83
  }
84
84
 
85
+ /* Forced colors (High Contrast mode)
86
+ SVG stroke wordt genegeerd — forced-color-adjust: auto laat de browser
87
+ de kleuren overnemen. Track verbergen: enkel de arc is informatief. */
88
+ @media (forced-colors: active) {
89
+ .dsn-spinner__circle {
90
+ forced-color-adjust: none;
91
+ }
92
+
93
+ .dsn-spinner__track {
94
+ stroke: transparent;
95
+ }
96
+
97
+ .dsn-spinner__arc {
98
+ stroke: CanvasText;
99
+ }
100
+ }
101
+
85
102
  /* prefers-reduced-motion: subtiel pulseren i.p.v. roteren */
86
103
  @media (prefers-reduced-motion: reduce) {
87
104
  .dsn-spinner__circle {
package/dist/index.css CHANGED
@@ -44,6 +44,14 @@
44
44
  row-gap: var(--dsn-action-group-row-gap);
45
45
  }
46
46
 
47
+ /* Link en LinkButton hebben align-self: flex-start om uitrekken te voorkomen
48
+ in verticale contexten — in een horizontale ActionGroup resetten we dit
49
+ zodat ze verticaal centreren met de Buttons naast hen. */
50
+ .dsn-action-group:not(.dsn-action-group--vertical) > .dsn-link,
51
+ .dsn-action-group:not(.dsn-action-group--vertical) > .dsn-link-button {
52
+ align-self: center;
53
+ }
54
+
47
55
  /* ===========================
48
56
  Vertical modifier
49
57
  =========================== */
@@ -480,6 +488,10 @@
480
488
  .dsn-breakout-section {
481
489
  margin-block: var(--dsn-space-block-4xl);
482
490
  margin-inline: calc(50% - 50vw);
491
+ border-block-start: var(--dsn-breakout-section-border-block-width) solid
492
+ var(--dsn-color-transparent);
493
+ border-block-end: var(--dsn-breakout-section-border-block-width) solid
494
+ var(--dsn-color-transparent);
483
495
  }
484
496
 
485
497
 
@@ -1526,6 +1538,20 @@
1526
1538
  transform: rotate(180deg);
1527
1539
  }
1528
1540
 
1541
+ /* ===========================
1542
+ Forced colors (High Contrast mode)
1543
+ =========================== */
1544
+ @media (forced-colors: active) {
1545
+ .dsn-details__icon {
1546
+ forced-color-adjust: auto;
1547
+ color: LinkText;
1548
+ }
1549
+
1550
+ .dsn-details__summary:hover .dsn-details__icon {
1551
+ color: LinkText;
1552
+ }
1553
+ }
1554
+
1529
1555
  /* ===========================
1530
1556
  Content area
1531
1557
  =========================== */
@@ -1641,6 +1667,19 @@
1641
1667
  }
1642
1668
  }
1643
1669
 
1670
+ /* Forced colors (High Contrast mode)
1671
+ background-color wordt vervangen door Canvas — dot is onzichtbaar zonder border.
1672
+ Pulse-animatie uitschakelen: opacity-animatie op systeemkleuren is onbetrouwbaar. */
1673
+ @media (forced-colors: active) {
1674
+ .dsn-dot-badge {
1675
+ border: 1px solid transparent;
1676
+ }
1677
+
1678
+ .dsn-dot-badge--pulse::before {
1679
+ animation: none;
1680
+ }
1681
+ }
1682
+
1644
1683
 
1645
1684
  /* ===== Drawer ===== */
1646
1685
 
@@ -2084,6 +2123,22 @@ span.dsn-file__name {
2084
2123
  }
2085
2124
  }
2086
2125
 
2126
+ /* =============================================================================
2127
+ Forced colors (High Contrast mode)
2128
+ ============================================================================= */
2129
+
2130
+ @media (forced-colors: active) {
2131
+ .dsn-file__media > .dsn-icon {
2132
+ forced-color-adjust: auto;
2133
+ color: CanvasText;
2134
+ }
2135
+
2136
+ .dsn-file__status-icon {
2137
+ forced-color-adjust: auto;
2138
+ color: CanvasText;
2139
+ }
2140
+ }
2141
+
2087
2142
  /* =============================================================================
2088
2143
  FileList — ul wrapper voor meerdere File items
2089
2144
  ============================================================================= */
@@ -3113,6 +3168,12 @@ fieldset.dsn-form-field--invalid {
3113
3168
  }
3114
3169
 
3115
3170
 
3171
+ .dsn-heading-group {
3172
+ display: flex;
3173
+ flex-direction: column;
3174
+ }
3175
+
3176
+
3116
3177
  /**
3117
3178
  * Hero Component
3118
3179
  * Prominente introductiesectie direct onder de PageHeader. Beslaat de volledige
@@ -3141,6 +3202,10 @@ fieldset.dsn-form-field--invalid {
3141
3202
 
3142
3203
  .dsn-hero {
3143
3204
  margin-inline: calc(50% - 50vw);
3205
+ border-block-start: var(--dsn-hero-border-block-width) solid
3206
+ var(--dsn-color-transparent);
3207
+ border-block-end: var(--dsn-hero-border-block-width) solid
3208
+ var(--dsn-color-transparent);
3144
3209
  min-block-size: max(
3145
3210
  var(--dsn-hero-min-block-size),
3146
3211
  var(--dsn-hero-block-size)
@@ -4837,6 +4902,19 @@ fieldset.dsn-form-field--invalid {
4837
4902
  }
4838
4903
  }
4839
4904
 
4905
+ /* =============================================================================
4906
+ Forced colors (High Contrast mode)
4907
+ Default variant mist op large viewport een border-block-end (navbar neemt de
4908
+ visuele scheiding over). In forced-colors mode is die achtergrondkleur niet
4909
+ zichtbaar, dus de border herstellen voor sectieafbakening.
4910
+ ============================================================================= */
4911
+
4912
+ @media (forced-colors: active) and (min-width: 64em) {
4913
+ .dsn-page-header:not(.dsn-page-header--compact) {
4914
+ border-block-end: var(--dsn-border-width-thick) solid transparent;
4915
+ }
4916
+ }
4917
+
4840
4918
  /* =============================================================================
4841
4919
  Masthead (large viewport) — neutrale achtergrond, logo + servicemenu + zoek
4842
4920
  ============================================================================= */
@@ -5560,6 +5638,17 @@ fieldset.dsn-form-field--invalid {
5560
5638
  }
5561
5639
 
5562
5640
 
5641
+ .dsn-pre-heading {
5642
+ display: block;
5643
+ color: var(--dsn-pre-heading-color);
5644
+ font-family: var(--dsn-pre-heading-font-family);
5645
+ font-size: var(--dsn-pre-heading-font-size);
5646
+ font-weight: var(--dsn-pre-heading-font-weight);
5647
+ line-height: var(--dsn-pre-heading-line-height);
5648
+ margin-block-end: var(--dsn-pre-heading-margin-block-end);
5649
+ }
5650
+
5651
+
5563
5652
  /**
5564
5653
  * ProgressBar Component
5565
5654
  * Horizontale voortgangsbalk voor bepaalde wachttijden.
@@ -5644,6 +5733,20 @@ fieldset.dsn-form-field--invalid {
5644
5733
  margin-block-start: var(--dsn-progress-bar-gap-footer);
5645
5734
  }
5646
5735
 
5736
+ /* Forced colors (High Contrast mode)
5737
+ appearance: none schakelt alle browser-styling uit waardoor track en fill
5738
+ onzichtbaar worden. appearance: auto herstelt de native progress-stijl
5739
+ zodat de browser zijn eigen system colors toepast. */
5740
+ @media (forced-colors: active) {
5741
+ .dsn-progress-bar__bar {
5742
+ appearance: auto;
5743
+ block-size: revert;
5744
+ border: revert;
5745
+ border-radius: revert;
5746
+ background-color: revert;
5747
+ }
5748
+ }
5749
+
5647
5750
  @media (prefers-reduced-motion: reduce) {
5648
5751
  .dsn-progress-bar__bar::-webkit-progress-value,
5649
5752
  .dsn-progress-bar__bar::-moz-progress-bar {
@@ -5811,6 +5914,42 @@ fieldset.dsn-form-field--invalid {
5811
5914
  transform: scale(1);
5812
5915
  }
5813
5916
 
5917
+ /* Forced colors (High Contrast mode)
5918
+ background-color wordt genegeerd — inner circle verdwijnt tegen de control achtergrond.
5919
+ Highlight/HighlightText zijn de system colors voor geselecteerde form controls. */
5920
+ @media (forced-colors: active) {
5921
+ .dsn-radio__control {
5922
+ forced-color-adjust: none;
5923
+ border-color: ButtonText;
5924
+ background-color: Field;
5925
+ }
5926
+
5927
+ .dsn-radio__input:checked + .dsn-radio__control {
5928
+ border-color: Highlight;
5929
+ background-color: Highlight;
5930
+ }
5931
+
5932
+ .dsn-radio__input:checked + .dsn-radio__control .dsn-radio__inner-circle {
5933
+ background-color: HighlightText;
5934
+ }
5935
+
5936
+ .dsn-radio__input:checked:disabled + .dsn-radio__control {
5937
+ border-color: GrayText;
5938
+ background-color: GrayText;
5939
+ }
5940
+
5941
+ .dsn-radio__input:checked:disabled
5942
+ + .dsn-radio__control
5943
+ .dsn-radio__inner-circle {
5944
+ background-color: Field;
5945
+ }
5946
+
5947
+ .dsn-radio__input:disabled + .dsn-radio__control {
5948
+ border-color: GrayText;
5949
+ background-color: Field;
5950
+ }
5951
+ }
5952
+
5814
5953
  /* Invalid state */
5815
5954
  .dsn-radio__input--invalid + .dsn-radio__control {
5816
5955
  border-width: var(--dsn-radio-invalid-border-width);
@@ -5883,6 +6022,14 @@ fieldset.dsn-form-field--invalid {
5883
6022
  padding-inline-start: var(--dsn-search-input-padding-inline-start-with-icon);
5884
6023
  }
5885
6024
 
6025
+ /* Forced colors (High Contrast mode) */
6026
+ @media (forced-colors: active) {
6027
+ .dsn-search-input__icon {
6028
+ forced-color-adjust: auto;
6029
+ color: ButtonText;
6030
+ }
6031
+ }
6032
+
5886
6033
  /* Hide browser-native clear button — will be implemented as a separate pattern */
5887
6034
  .dsn-search-input::-webkit-search-cancel-button {
5888
6035
  display: none;
@@ -5973,6 +6120,14 @@ fieldset.dsn-form-field--invalid {
5973
6120
  border-color: var(--dsn-text-input-invalid-border-color);
5974
6121
  }
5975
6122
 
6123
+ /* Forced colors (High Contrast mode) */
6124
+ @media (forced-colors: active) {
6125
+ .dsn-select__icon {
6126
+ forced-color-adjust: auto;
6127
+ color: ButtonText;
6128
+ }
6129
+ }
6130
+
5976
6131
  /* Remove native arrow in IE/Edge */
5977
6132
  .dsn-select::-ms-expand {
5978
6133
  display: none;
@@ -6141,6 +6296,23 @@ fieldset.dsn-form-field--invalid {
6141
6296
  }
6142
6297
  }
6143
6298
 
6299
+ /* Forced colors (High Contrast mode)
6300
+ SVG stroke wordt genegeerd — forced-color-adjust: auto laat de browser
6301
+ de kleuren overnemen. Track verbergen: enkel de arc is informatief. */
6302
+ @media (forced-colors: active) {
6303
+ .dsn-spinner__circle {
6304
+ forced-color-adjust: none;
6305
+ }
6306
+
6307
+ .dsn-spinner__track {
6308
+ stroke: transparent;
6309
+ }
6310
+
6311
+ .dsn-spinner__arc {
6312
+ stroke: CanvasText;
6313
+ }
6314
+ }
6315
+
6144
6316
  /* prefers-reduced-motion: subtiel pulseren i.p.v. roteren */
6145
6317
  @media (prefers-reduced-motion: reduce) {
6146
6318
  .dsn-spinner__circle {
package/dist/index.d.ts CHANGED
@@ -12,6 +12,8 @@ export * from './Hero';
12
12
  export * from './Grid';
13
13
  export * from './Stack';
14
14
  export * from './Heading';
15
+ export * from './HeadingGroup';
16
+ export * from './PreHeading';
15
17
  export * from './Paragraph';
16
18
  export * from './Link';
17
19
  export * from './UnorderedList';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AAGxB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAG9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AAGvB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAG3B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAG9B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAG9B,cAAc,QAAQ,CAAC;AAGvB,cAAc,YAAY,CAAC;AAG3B,cAAc,wBAAwB,CAAC;AACvC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAG7B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAElC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AAGxB,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAG9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AAGvB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAG3B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAG9B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAG9B,cAAc,QAAQ,CAAC;AAGvB,cAAc,YAAY,CAAC;AAG3B,cAAc,wBAAwB,CAAC;AACvC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAG7B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAElC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC"}
package/dist/index.js CHANGED
@@ -14,6 +14,8 @@ export * from './Grid';
14
14
  export * from './Stack';
15
15
  // Layout & Typography
16
16
  export * from './Heading';
17
+ export * from './HeadingGroup';
18
+ export * from './PreHeading';
17
19
  export * from './Paragraph';
18
20
  export * from './Link';
19
21
  export * from './UnorderedList';
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,oBAAoB;AACpB,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AAExB,sBAAsB;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAE9B,kBAAkB;AAClB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AAEvB,cAAc;AACd,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAE3B,eAAe;AACf,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAE9B,gCAAgC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAE9B,sBAAsB;AACtB,cAAc,QAAQ,CAAC;AAEvB,2BAA2B;AAC3B,cAAc,YAAY,CAAC;AAE3B,wBAAwB;AACxB,cAAc,wBAAwB,CAAC;AACvC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAE7B,wBAAwB;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAElC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,oBAAoB;AACpB,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AAExB,sBAAsB;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAE9B,kBAAkB;AAClB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AAEvB,cAAc;AACd,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAE3B,eAAe;AACf,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAE9B,gCAAgC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAE9B,sBAAsB;AACtB,cAAc,QAAQ,CAAC;AAEvB,2BAA2B;AAC3B,cAAc,YAAY,CAAC;AAE3B,wBAAwB;AACxB,cAAc,wBAAwB,CAAC;AACvC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAE7B,wBAAwB;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAElC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dsn-starter-kit/components-react",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "React components for the design system",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",
@@ -32,8 +32,8 @@
32
32
  "access": "public"
33
33
  },
34
34
  "dependencies": {
35
- "@dsn-starter-kit/core": "1.0.1",
36
- "@dsn-starter-kit/design-tokens": "1.0.1"
35
+ "@dsn-starter-kit/core": "1.0.2",
36
+ "@dsn-starter-kit/design-tokens": "1.0.2"
37
37
  },
38
38
  "peerDependencies": {
39
39
  "react": ">=18.0.0",