@nldd/design-system 0.8.55 → 0.8.57
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.
- package/README.md +15 -0
- package/dist/components/actions/button/button.d.ts +13 -4
- package/dist/components/actions/button/button.d.ts.map +1 -1
- package/dist/components/actions/button/button.js +23 -3
- package/dist/components/actions/button/button.js.map +1 -1
- package/dist/components/actions/button/button.styles.d.ts.map +1 -1
- package/dist/components/actions/button/button.styles.js +269 -87
- package/dist/components/actions/button/button.styles.js.map +1 -1
- package/dist/components/actions/button/button.template.d.ts.map +1 -1
- package/dist/components/actions/button/button.template.js +33 -17
- package/dist/components/actions/button/button.template.js.map +1 -1
- package/dist/components/actions/button-bar/button-bar.d.ts +2 -2
- package/dist/components/actions/button-bar/button-bar.d.ts.map +1 -1
- package/dist/components/actions/button-bar/button-bar.js +3 -1
- package/dist/components/actions/button-bar/button-bar.js.map +1 -1
- package/dist/components/actions/button-bar/button-bar.styles.d.ts.map +1 -1
- package/dist/components/actions/button-bar/button-bar.styles.js +28 -4
- package/dist/components/actions/button-bar/button-bar.styles.js.map +1 -1
- package/dist/components/actions/icon-button/icon-button.d.ts +14 -4
- package/dist/components/actions/icon-button/icon-button.d.ts.map +1 -1
- package/dist/components/actions/icon-button/icon-button.js +23 -3
- package/dist/components/actions/icon-button/icon-button.js.map +1 -1
- package/dist/components/actions/icon-button/icon-button.styles.d.ts.map +1 -1
- package/dist/components/actions/icon-button/icon-button.styles.js +127 -63
- package/dist/components/actions/icon-button/icon-button.styles.js.map +1 -1
- package/dist/components/actions/icon-button/icon-button.template.d.ts.map +1 -1
- package/dist/components/actions/icon-button/icon-button.template.js +4 -2
- package/dist/components/actions/icon-button/icon-button.template.js.map +1 -1
- package/dist/components/actions/menu/menu.d.ts +9 -0
- package/dist/components/actions/menu/menu.d.ts.map +1 -1
- package/dist/components/actions/menu/menu.js +27 -2
- package/dist/components/actions/menu/menu.js.map +1 -1
- package/dist/components/actions/split-button/split-button.d.ts +30 -20
- package/dist/components/actions/split-button/split-button.d.ts.map +1 -1
- package/dist/components/actions/split-button/split-button.js +73 -49
- package/dist/components/actions/split-button/split-button.js.map +1 -1
- package/dist/components/actions/split-button/split-button.styles.d.ts.map +1 -1
- package/dist/components/actions/split-button/split-button.styles.js +39 -3
- package/dist/components/actions/split-button/split-button.styles.js.map +1 -1
- package/dist/components/actions/split-button/split-button.template.d.ts.map +1 -1
- package/dist/components/actions/split-button/split-button.template.js +6 -1
- package/dist/components/actions/split-button/split-button.template.js.map +1 -1
- package/dist/components/actions/toolbar/toolbar.d.ts +91 -14
- package/dist/components/actions/toolbar/toolbar.d.ts.map +1 -1
- package/dist/components/actions/toolbar/toolbar.js +299 -103
- package/dist/components/actions/toolbar/toolbar.js.map +1 -1
- package/dist/components/actions/toolbar/toolbar.styles.d.ts +2 -0
- package/dist/components/actions/toolbar/toolbar.styles.d.ts.map +1 -1
- package/dist/components/actions/toolbar/toolbar.styles.js +109 -41
- package/dist/components/actions/toolbar/toolbar.styles.js.map +1 -1
- package/dist/components/actions/toolbar/toolbar.template.d.ts +7 -4
- package/dist/components/actions/toolbar/toolbar.template.d.ts.map +1 -1
- package/dist/components/actions/toolbar/toolbar.template.js +22 -69
- package/dist/components/actions/toolbar/toolbar.template.js.map +1 -1
- package/dist/components/components.js +1 -1
- package/dist/components/content/code-viewer/code-viewer.styles.d.ts.map +1 -1
- package/dist/components/content/code-viewer/code-viewer.styles.js +4 -0
- package/dist/components/content/code-viewer/code-viewer.styles.js.map +1 -1
- package/dist/components/content/icon/icon-aliases.d.ts.map +1 -1
- package/dist/components/content/icon/icon-aliases.js +48 -2
- package/dist/components/content/icon/icon-aliases.js.map +1 -1
- package/dist/components/content/icon/icon-registry.d.ts.map +1 -1
- package/dist/components/content/icon/icon-registry.js +37 -2
- package/dist/components/content/icon/icon-registry.js.map +1 -1
- package/dist/components/content/image/image.d.ts +1 -1
- package/dist/components/content/image/image.d.ts.map +1 -1
- package/dist/components/content/image/image.i18n.d.ts +1 -1
- package/dist/components/content/image/image.i18n.js +1 -1
- package/dist/components/content/image/image.i18n.js.map +1 -1
- package/dist/components/content/image/image.js +7 -2
- package/dist/components/content/image/image.js.map +1 -1
- package/dist/components/content/image/image.styles.d.ts.map +1 -1
- package/dist/components/content/image/image.styles.js +21 -30
- package/dist/components/content/image/image.styles.js.map +1 -1
- package/dist/components/content/image/image.template.d.ts.map +1 -1
- package/dist/components/content/image/image.template.js +4 -11
- package/dist/components/content/image/image.template.js.map +1 -1
- package/dist/components/content/image/lqip-encoder-element.js +1 -1
- package/dist/components/{index-C3JellW2.js → index-DHU98C6V.js} +1561 -783
- package/dist/components/inputs/combo-box/combo-box.styles.js +1 -1
- package/dist/components/inputs/dropdown/dropdown.styles.d.ts.map +1 -1
- package/dist/components/inputs/dropdown/dropdown.styles.js +31 -18
- package/dist/components/inputs/dropdown/dropdown.styles.js.map +1 -1
- package/dist/components/inputs/multi-line-text-field/multi-line-text-field.styles.js +1 -1
- package/dist/components/inputs/password-field/password-field.styles.js +1 -1
- package/dist/components/inputs/search-field/search-field.styles.js +1 -1
- package/dist/components/inputs/segmented-control/segmented-control.d.ts +5 -4
- package/dist/components/inputs/segmented-control/segmented-control.d.ts.map +1 -1
- package/dist/components/inputs/segmented-control/segmented-control.js +4 -3
- package/dist/components/inputs/segmented-control/segmented-control.js.map +1 -1
- package/dist/components/inputs/segmented-control/segmented-control.styles.d.ts.map +1 -1
- package/dist/components/inputs/segmented-control/segmented-control.styles.js +59 -9
- package/dist/components/inputs/segmented-control/segmented-control.styles.js.map +1 -1
- package/dist/components/inputs/segmented-control/segmented-control.template.js +3 -3
- package/dist/components/inputs/segmented-control/segmented-control.template.js.map +1 -1
- package/dist/components/inputs/stepper/stepper.styles.d.ts.map +1 -1
- package/dist/components/inputs/stepper/stepper.styles.js +16 -5
- package/dist/components/inputs/stepper/stepper.styles.js.map +1 -1
- package/dist/components/inputs/stepper/stepper.template.d.ts.map +1 -1
- package/dist/components/inputs/stepper/stepper.template.js +2 -0
- package/dist/components/inputs/stepper/stepper.template.js.map +1 -1
- package/dist/components/inputs/text-field/text-field.styles.js +1 -1
- package/dist/components/inputs/toggle-button/toggle-button.d.ts +4 -3
- package/dist/components/inputs/toggle-button/toggle-button.d.ts.map +1 -1
- package/dist/components/inputs/toggle-button/toggle-button.js +3 -2
- package/dist/components/inputs/toggle-button/toggle-button.js.map +1 -1
- package/dist/components/inputs/toggle-button/toggle-button.styles.d.ts.map +1 -1
- package/dist/components/inputs/toggle-button/toggle-button.styles.js +53 -17
- package/dist/components/inputs/toggle-button/toggle-button.styles.js.map +1 -1
- package/dist/components/inputs/toggle-button/toggle-button.template.d.ts.map +1 -1
- package/dist/components/inputs/toggle-button/toggle-button.template.js +3 -4
- package/dist/components/inputs/toggle-button/toggle-button.template.js.map +1 -1
- package/dist/components/inputs/token/token.styles.d.ts.map +1 -1
- package/dist/components/inputs/token/token.styles.js +24 -7
- package/dist/components/inputs/token/token.styles.js.map +1 -1
- package/dist/components/inputs/token/token.template.d.ts.map +1 -1
- package/dist/components/inputs/token/token.template.js +1 -0
- package/dist/components/inputs/token/token.template.js.map +1 -1
- package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.d.ts +1 -1
- package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.d.ts.map +1 -1
- package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.js +0 -5
- package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.js.map +1 -1
- package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.d.ts +1 -0
- package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.d.ts.map +1 -1
- package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.d.ts.map +1 -1
- package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.js +5 -0
- package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.js.map +1 -1
- package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.template.d.ts +1 -1
- package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.template.d.ts.map +1 -1
- package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.template.js +7 -3
- package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.template.js.map +1 -1
- package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.d.ts +1 -0
- package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.d.ts.map +1 -1
- package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.d.ts.map +1 -1
- package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.js +5 -0
- package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.js.map +1 -1
- package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.template.d.ts +1 -1
- package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.template.d.ts.map +1 -1
- package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.template.js +7 -3
- package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.template.js.map +1 -1
- package/dist/components/layout/page-sections/simple-section/simple-section.d.ts +1 -1
- package/dist/components/layout/page-sections/simple-section/simple-section.d.ts.map +1 -1
- package/dist/components/layout/page-sections/simple-section/simple-section.js +0 -5
- package/dist/components/layout/page-sections/simple-section/simple-section.js.map +1 -1
- package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.d.ts +1 -0
- package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.d.ts.map +1 -1
- package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.d.ts.map +1 -1
- package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.js +5 -0
- package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.js.map +1 -1
- package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.template.d.ts +1 -1
- package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.template.d.ts.map +1 -1
- package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.template.js +7 -3
- package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.template.js.map +1 -1
- package/dist/components/lists-and-tables/table/table.styles.d.ts.map +1 -1
- package/dist/components/lists-and-tables/table/table.styles.js +7 -0
- package/dist/components/lists-and-tables/table/table.styles.js.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.d.ts +2 -22
- package/dist/components/navigation/breadcrumbs/breadcrumbs.d.ts.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.i18n.d.ts +0 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.i18n.d.ts.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.i18n.js +0 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.i18n.js.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.js +2 -52
- package/dist/components/navigation/breadcrumbs/breadcrumbs.js.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.styles.d.ts.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.styles.js +1 -47
- package/dist/components/navigation/breadcrumbs/breadcrumbs.styles.js.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.template.d.ts.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.template.js +1 -17
- package/dist/components/navigation/breadcrumbs/breadcrumbs.template.js.map +1 -1
- package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.d.ts.map +1 -1
- package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.js +39 -19
- package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.js.map +1 -1
- package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.d.ts.map +1 -1
- package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.js +4 -0
- package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.js.map +1 -1
- package/dist/components/navigation/pagination/pagination.styles.d.ts.map +1 -1
- package/dist/components/navigation/pagination/pagination.styles.js +35 -15
- package/dist/components/navigation/pagination/pagination.styles.js.map +1 -1
- package/dist/components/navigation/pagination/pagination.template.d.ts.map +1 -1
- package/dist/components/navigation/pagination/pagination.template.js +2 -0
- package/dist/components/navigation/pagination/pagination.template.js.map +1 -1
- package/dist/components/navigation/tab-bar/tab-bar.d.ts +11 -4
- package/dist/components/navigation/tab-bar/tab-bar.d.ts.map +1 -1
- package/dist/components/navigation/tab-bar/tab-bar.js +17 -2
- package/dist/components/navigation/tab-bar/tab-bar.js.map +1 -1
- package/dist/components/navigation/tab-bar/tab-bar.styles.d.ts.map +1 -1
- package/dist/components/navigation/tab-bar/tab-bar.styles.js +74 -18
- package/dist/components/navigation/tab-bar/tab-bar.styles.js.map +1 -1
- package/dist/components/navigation/tab-bar/tab-bar.template.d.ts.map +1 -1
- package/dist/components/navigation/tab-bar/tab-bar.template.js +4 -1
- package/dist/components/navigation/tab-bar/tab-bar.template.js.map +1 -1
- package/dist/components/{prism-python-QiimuE8j.js → prism-python-9EoInm_N.js} +1 -1
- package/dist/components/{prism-rust-D4vfxUpk.js → prism-rust-Chzr6sBk.js} +1 -1
- package/dist/components/{prism-typescript-Dy2F4cF2.js → prism-typescript-DPJmu--x.js} +1 -1
- package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.js +2 -2
- package/dist/css/rich-text.css +6 -1
- package/dist/css/settings.css +139 -35
- package/dist/utilities/page-section-mixin.d.ts +1 -0
- package/dist/utilities/page-section-mixin.d.ts.map +1 -1
- package/dist/utilities/page-section-mixin.js +9 -0
- package/dist/utilities/page-section-mixin.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -32,6 +32,21 @@ import { NLDDButton, NLDDCheckbox, NLDDSwitch } from '@nldd/design-system';
|
|
|
32
32
|
|
|
33
33
|
Bekijk de live component documentatie: **https://minbzk.github.io/storybook/**
|
|
34
34
|
|
|
35
|
+
## Claude Code plugin
|
|
36
|
+
|
|
37
|
+
Deze repository is ook een Claude Code marketplace. De `nldd`-plugin geeft
|
|
38
|
+
Claude de kennis om applicaties te bouwen bovenop `@nldd/design-system`: de
|
|
39
|
+
juiste tags, attributen, CSS-tokens en patronen.
|
|
40
|
+
|
|
41
|
+
Toevoegen en installeren:
|
|
42
|
+
|
|
43
|
+
```
|
|
44
|
+
/plugin marketplace add MinBZK/storybook
|
|
45
|
+
/plugin install nldd@nldd-plugins
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
Bijwerken naar een nieuwere versie doe je met `/plugin marketplace update nldd-plugins`.
|
|
49
|
+
|
|
35
50
|
## Development setup
|
|
36
51
|
|
|
37
52
|
```bash
|
|
@@ -2,8 +2,9 @@
|
|
|
2
2
|
* Nederlandse Digitale Dienst Button Component (Lit + TypeScript)
|
|
3
3
|
*
|
|
4
4
|
* @element nldd-button
|
|
5
|
-
* @attr {string} variant - Button variant: 'primary' | 'secondary' | 'destructive' | 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent'
|
|
6
|
-
* @attr {string} size - Button size: 'xs' | 'sm' | 'md' (default: 'md')
|
|
5
|
+
* @attr {string} variant - Button variant: 'primary' | 'secondary' | 'destructive' | 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-base' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent'
|
|
6
|
+
* @attr {string} size - Button size: 'xs' | 'sm' | 'md' | 'lg' (default: 'md'). 'lg' uses larger text and 24px start/end icons.
|
|
7
|
+
* @attr {string} horizontal-alignment - Horizontal alignment of the button content: 'left' | 'center' | 'right' (default: unset, centered). Most visible with width="full" or a fixed width.
|
|
7
8
|
* @attr {boolean} disabled - Disabled state
|
|
8
9
|
* @attr {string} type - Button type for form submission: 'button' | 'submit' | 'reset' (ignored when href is set)
|
|
9
10
|
* @attr {boolean} expandable - Whether the button has a icon to indicate it opens a menu or popover
|
|
@@ -11,7 +12,9 @@
|
|
|
11
12
|
* @attr {string} popup-type - Type of popup container this button opens: 'menu' | 'listbox' | 'dialog' | 'tree' | 'grid'. Sets aria-haspopup on the inner button and forces aria-expanded to always be present (true/false) so screen readers know the popup state.
|
|
12
13
|
* @attr {string} width - Width mode: 'full' (stretches to container) or any CSS length (e.g. '240px')
|
|
13
14
|
* @attr {string} text - Button text
|
|
15
|
+
* @attr {string} supporting-text - Supporting text shown below the text (md/lg) or after it (sm/xs), in a secondary color. Part of the accessible name (unless `accessible-label` is set, which replaces the whole accessible name).
|
|
14
16
|
* @attr {boolean} single-line - When true, truncates overflowing text with an ellipsis instead of letting it wrap. Requires the button (or an ancestor) to constrain the width.
|
|
17
|
+
* @attr {boolean} no-highlight-border - Removes the per-variant highlight border (e.g. when nldd-button-bar draws a single group border instead).
|
|
15
18
|
* @attr {string} start-icon - Icon name for the start icon (before text)
|
|
16
19
|
* @attr {string} end-icon - Icon name for the end icon (after text)
|
|
17
20
|
* @attr {string} accessible-label - Accessible label for the button, overrides text for screen readers
|
|
@@ -28,8 +31,8 @@
|
|
|
28
31
|
import { LitElement } from 'lit';
|
|
29
32
|
import './../../content/icon/icon.js';
|
|
30
33
|
import './../../status-and-feedback/activity-indicator/activity-indicator.js';
|
|
31
|
-
type Variant = 'primary' | 'secondary' | 'destructive' | 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent';
|
|
32
|
-
type Size = 'xs' | 'sm' | 'md';
|
|
34
|
+
type Variant = 'primary' | 'secondary' | 'destructive' | 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-base' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent';
|
|
35
|
+
type Size = 'xs' | 'sm' | 'md' | 'lg';
|
|
33
36
|
type ButtonType = 'button' | 'submit' | 'reset';
|
|
34
37
|
type PopupType = 'menu' | 'listbox' | 'dialog' | 'tree' | 'grid';
|
|
35
38
|
export declare class NLDDButton extends LitElement {
|
|
@@ -38,6 +41,8 @@ export declare class NLDDButton extends LitElement {
|
|
|
38
41
|
private _internals;
|
|
39
42
|
variant: Variant;
|
|
40
43
|
size: Size;
|
|
44
|
+
/** Horizontal alignment of the button content. Most visible with width="full" or a fixed width. */
|
|
45
|
+
horizontalAlignment: 'left' | 'center' | 'right' | '';
|
|
41
46
|
/** Width mode: 'full' (stretch to container) or any CSS length. */
|
|
42
47
|
width: string;
|
|
43
48
|
expandable: boolean;
|
|
@@ -81,7 +86,11 @@ export declare class NLDDButton extends LitElement {
|
|
|
81
86
|
disabled: boolean;
|
|
82
87
|
/** Button text. */
|
|
83
88
|
text: string;
|
|
89
|
+
/** Supporting text: below the text (md/lg) or after it (sm/xs), in a secondary color. Part of the accessible name (unless `accessible-label` is set, which replaces the whole accessible name). */
|
|
90
|
+
supportingText: string;
|
|
84
91
|
singleLine: boolean;
|
|
92
|
+
/** Removes the per-variant highlight border (e.g. when nldd-button-bar draws a single group border instead). */
|
|
93
|
+
noHighlightBorder: boolean;
|
|
85
94
|
/** Icon name for the start icon (before text). When not set, the start-icon slot is used. */
|
|
86
95
|
startIcon: string;
|
|
87
96
|
/** Icon name for the end icon (after text). When not set, the end-icon slot is used. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button/button.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button/button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,8BAA8B,CAAC;AACtC,OAAO,sEAAsE,CAAC;AAE9E,KAAK,OAAO,GACT,SAAS,GACT,WAAW,GACX,aAAa,GACb,eAAe,GACf,oBAAoB,GACpB,gBAAgB,GAChB,cAAc,GACd,qBAAqB,GACrB,iBAAiB,GACjB,sBAAsB,CAAC;AAC1B,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACtC,KAAK,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAChD,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAEjE,qBACa,UAAW,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAgB;IAKtC,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAA0B;IAG5C,OAAO,EAAE,OAAO,CAAoB;IAGpC,IAAI,EAAE,IAAI,CAAQ;IAElB,mGAAmG;IAEnG,mBAAmB,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,EAAE,CAAM;IAE3D,mEAAmE;IAEnE,KAAK,SAAM;IAGX,UAAU,UAAS;IAGnB,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,SAAS,CAAC,EAAE,SAAS,CAAC;IAGtB,IAAI,EAAE,UAAU,CAAY;IAG5B,aAAa,EAAE,MAAM,GAAG,SAAS,CAAa;IAE9C;;;;;;;;OAQG;IAEH,oBAAoB,EAAE,OAAO,GAAG,IAAI,CAAQ;IAE5C;;;;;;OAMG;IAEH,mBAAmB,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAY;IAE3D;;;;;;;;OAQG;IAEH,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAEjB,mBAAmB;IAEnB,IAAI,SAAM;IAEV,mMAAmM;IAEnM,cAAc,SAAM;IAGpB,UAAU,UAAS;IAEnB,gHAAgH;IAEhH,iBAAiB,UAAS;IAE1B,6FAA6F;IAE7F,SAAS,SAAM;IAEf,wFAAwF;IAExF,OAAO,SAAM;IAEb,0GAA0G;IAE1G,eAAe,SAAM;IAErB,4DAA4D;IAE5D,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAErC,+DAA+D;IAE/D,MAAM,EAAE,MAAM,GAAG,SAAS,CAAa;IAEvC;;;OAGG;IAEH,GAAG,EAAE,MAAM,GAAG,SAAS,CAAa;IAEpC,OAAO,CAAC,WAAW,CAAS;IAEnB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IA4B/D,OAAO,CAAC,YAAY;IAyBpB,2DAA2D;IAC3D,YAAY,IAAI,MAAM;IAMtB;;;OAGG;IACM,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInC,MAAM;CAKf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}
|
|
@@ -2,8 +2,9 @@
|
|
|
2
2
|
* Nederlandse Digitale Dienst Button Component (Lit + TypeScript)
|
|
3
3
|
*
|
|
4
4
|
* @element nldd-button
|
|
5
|
-
* @attr {string} variant - Button variant: 'primary' | 'secondary' | 'destructive' | 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent'
|
|
6
|
-
* @attr {string} size - Button size: 'xs' | 'sm' | 'md' (default: 'md')
|
|
5
|
+
* @attr {string} variant - Button variant: 'primary' | 'secondary' | 'destructive' | 'accent-filled' | 'accent-transparent' | 'neutral-tinted' | 'neutral-base' | 'neutral-transparent' | 'critical-tinted' | 'critical-transparent'
|
|
6
|
+
* @attr {string} size - Button size: 'xs' | 'sm' | 'md' | 'lg' (default: 'md'). 'lg' uses larger text and 24px start/end icons.
|
|
7
|
+
* @attr {string} horizontal-alignment - Horizontal alignment of the button content: 'left' | 'center' | 'right' (default: unset, centered). Most visible with width="full" or a fixed width.
|
|
7
8
|
* @attr {boolean} disabled - Disabled state
|
|
8
9
|
* @attr {string} type - Button type for form submission: 'button' | 'submit' | 'reset' (ignored when href is set)
|
|
9
10
|
* @attr {boolean} expandable - Whether the button has a icon to indicate it opens a menu or popover
|
|
@@ -11,7 +12,9 @@
|
|
|
11
12
|
* @attr {string} popup-type - Type of popup container this button opens: 'menu' | 'listbox' | 'dialog' | 'tree' | 'grid'. Sets aria-haspopup on the inner button and forces aria-expanded to always be present (true/false) so screen readers know the popup state.
|
|
12
13
|
* @attr {string} width - Width mode: 'full' (stretches to container) or any CSS length (e.g. '240px')
|
|
13
14
|
* @attr {string} text - Button text
|
|
15
|
+
* @attr {string} supporting-text - Supporting text shown below the text (md/lg) or after it (sm/xs), in a secondary color. Part of the accessible name (unless `accessible-label` is set, which replaces the whole accessible name).
|
|
14
16
|
* @attr {boolean} single-line - When true, truncates overflowing text with an ellipsis instead of letting it wrap. Requires the button (or an ancestor) to constrain the width.
|
|
17
|
+
* @attr {boolean} no-highlight-border - Removes the per-variant highlight border (e.g. when nldd-button-bar draws a single group border instead).
|
|
15
18
|
* @attr {string} start-icon - Icon name for the start icon (before text)
|
|
16
19
|
* @attr {string} end-icon - Icon name for the end icon (after text)
|
|
17
20
|
* @attr {string} accessible-label - Accessible label for the button, overrides text for screen readers
|
|
@@ -43,6 +46,8 @@ let NLDDButton = class NLDDButton extends LitElement {
|
|
|
43
46
|
this._internals = this.attachInternals();
|
|
44
47
|
this.variant = 'neutral-tinted';
|
|
45
48
|
this.size = 'md';
|
|
49
|
+
/** Horizontal alignment of the button content. Most visible with width="full" or a fixed width. */
|
|
50
|
+
this.horizontalAlignment = '';
|
|
46
51
|
/** Width mode: 'full' (stretch to container) or any CSS length. */
|
|
47
52
|
this.width = '';
|
|
48
53
|
this.expandable = false;
|
|
@@ -80,7 +85,11 @@ let NLDDButton = class NLDDButton extends LitElement {
|
|
|
80
85
|
this.disabled = false;
|
|
81
86
|
/** Button text. */
|
|
82
87
|
this.text = '';
|
|
88
|
+
/** Supporting text: below the text (md/lg) or after it (sm/xs), in a secondary color. Part of the accessible name (unless `accessible-label` is set, which replaces the whole accessible name). */
|
|
89
|
+
this.supportingText = '';
|
|
83
90
|
this.singleLine = false;
|
|
91
|
+
/** Removes the per-variant highlight border (e.g. when nldd-button-bar draws a single group border instead). */
|
|
92
|
+
this.noHighlightBorder = false;
|
|
84
93
|
/** Icon name for the start icon (before text). When not set, the start-icon slot is used. */
|
|
85
94
|
this.startIcon = '';
|
|
86
95
|
/** Icon name for the end icon (after text). When not set, the end-icon slot is used. */
|
|
@@ -119,7 +128,9 @@ let NLDDButton = class NLDDButton extends LitElement {
|
|
|
119
128
|
const isEmpty = !this.text && !this.accessibleLabel;
|
|
120
129
|
if (import.meta.env?.DEV && isEmpty && !this._warnedA11y) {
|
|
121
130
|
this._warnedA11y = true;
|
|
122
|
-
console.warn(
|
|
131
|
+
console.warn(this.supportingText
|
|
132
|
+
? '<nldd-button>: supporting-text is set but text is empty, so the accessible name omits the main label. Set the text attribute (or accessible-label) so screen readers announce it.'
|
|
133
|
+
: '<nldd-button>: button has no text or accessible-label. This produces an inaccessible button (WCAG SC 4.1.2).');
|
|
123
134
|
}
|
|
124
135
|
else if (!isEmpty) {
|
|
125
136
|
this._warnedA11y = false;
|
|
@@ -184,6 +195,9 @@ __decorate([
|
|
|
184
195
|
__decorate([
|
|
185
196
|
property({ type: String, reflect: true })
|
|
186
197
|
], NLDDButton.prototype, "size", void 0);
|
|
198
|
+
__decorate([
|
|
199
|
+
property({ type: String, reflect: true, attribute: 'horizontal-alignment' })
|
|
200
|
+
], NLDDButton.prototype, "horizontalAlignment", void 0);
|
|
187
201
|
__decorate([
|
|
188
202
|
property({ type: String, reflect: true })
|
|
189
203
|
], NLDDButton.prototype, "width", void 0);
|
|
@@ -217,9 +231,15 @@ __decorate([
|
|
|
217
231
|
__decorate([
|
|
218
232
|
property({ type: String })
|
|
219
233
|
], NLDDButton.prototype, "text", void 0);
|
|
234
|
+
__decorate([
|
|
235
|
+
property({ type: String, reflect: true, attribute: 'supporting-text' })
|
|
236
|
+
], NLDDButton.prototype, "supportingText", void 0);
|
|
220
237
|
__decorate([
|
|
221
238
|
property({ type: Boolean, reflect: true, attribute: 'single-line' })
|
|
222
239
|
], NLDDButton.prototype, "singleLine", void 0);
|
|
240
|
+
__decorate([
|
|
241
|
+
property({ type: Boolean, reflect: true, attribute: 'no-highlight-border' })
|
|
242
|
+
], NLDDButton.prototype, "noHighlightBorder", void 0);
|
|
223
243
|
__decorate([
|
|
224
244
|
property({ type: String, attribute: 'start-icon' })
|
|
225
245
|
], NLDDButton.prototype, "startIcon", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../src/components/actions/button/button.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../src/components/actions/button/button.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button/button.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/button/button.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,yBAifxB,CAAC"}
|