@nldd/design-system 0.8.57 → 0.8.59
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/dist/components/actions/button/button.d.ts +2 -2
- package/dist/components/actions/button/button.d.ts.map +1 -1
- package/dist/components/actions/button/button.js +1 -1
- 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 +83 -0
- package/dist/components/actions/button/button.styles.js.map +1 -1
- package/dist/components/actions/button-bar/button-bar.template.d.ts.map +1 -1
- package/dist/components/actions/button-bar/button-bar.template.js +4 -1
- package/dist/components/actions/button-bar/button-bar.template.js.map +1 -1
- package/dist/components/actions/button-group/button-group.styles.d.ts.map +1 -1
- package/dist/components/actions/button-group/button-group.styles.js +4 -2
- package/dist/components/actions/button-group/button-group.styles.js.map +1 -1
- package/dist/components/actions/icon-button/icon-button.d.ts +2 -2
- package/dist/components/actions/icon-button/icon-button.d.ts.map +1 -1
- package/dist/components/actions/icon-button/icon-button.js +1 -1
- 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 +68 -0
- package/dist/components/actions/icon-button/icon-button.styles.js.map +1 -1
- package/dist/components/actions/menu/menu.d.ts +25 -4
- package/dist/components/actions/menu/menu.d.ts.map +1 -1
- package/dist/components/actions/menu/menu.i18n.d.ts +1 -1
- package/dist/components/actions/menu/menu.i18n.js +1 -1
- package/dist/components/actions/menu/menu.i18n.js.map +1 -1
- package/dist/components/actions/menu/menu.js +50 -6
- package/dist/components/actions/menu/menu.js.map +1 -1
- package/dist/components/actions/menu/menu.styles.d.ts.map +1 -1
- package/dist/components/actions/menu/menu.styles.js +18 -4
- package/dist/components/actions/menu/menu.styles.js.map +1 -1
- package/dist/components/actions/menu/menu.template.d.ts.map +1 -1
- package/dist/components/actions/menu/menu.template.js +108 -47
- package/dist/components/actions/menu/menu.template.js.map +1 -1
- package/dist/components/components.js +88 -85
- package/dist/components/content/blockquote/blockquote.d.ts +3 -1
- package/dist/components/content/blockquote/blockquote.d.ts.map +1 -1
- package/dist/components/content/blockquote/blockquote.js +12 -1
- package/dist/components/content/blockquote/blockquote.js.map +1 -1
- package/dist/components/content/blockquote/blockquote.styles.d.ts.map +1 -1
- package/dist/components/content/blockquote/blockquote.styles.js +4 -0
- package/dist/components/content/blockquote/blockquote.styles.js.map +1 -1
- package/dist/components/content/blockquote/blockquote.template.js +1 -1
- package/dist/components/content/blockquote/blockquote.template.js.map +1 -1
- package/dist/components/content/byline/byline.d.ts +61 -0
- package/dist/components/content/byline/byline.d.ts.map +1 -0
- package/dist/components/content/byline/byline.js +103 -0
- package/dist/components/content/byline/byline.js.map +1 -0
- package/dist/components/content/byline/byline.styles.d.ts +2 -0
- package/dist/components/content/byline/byline.styles.d.ts.map +1 -0
- package/dist/components/content/byline/byline.styles.js +111 -0
- package/dist/components/content/byline/byline.styles.js.map +1 -0
- package/dist/components/content/byline/byline.template.d.ts +3 -0
- package/dist/components/content/byline/byline.template.d.ts.map +1 -0
- package/dist/components/content/byline/byline.template.js +27 -0
- package/dist/components/content/byline/byline.template.js.map +1 -0
- 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/code-viewer/code-viewer.template.d.ts.map +1 -1
- package/dist/components/content/code-viewer/code-viewer.template.js +4 -1
- package/dist/components/content/code-viewer/code-viewer.template.js.map +1 -1
- package/dist/components/content/image/image.template.d.ts.map +1 -1
- package/dist/components/content/image/image.template.js +3 -1
- 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/content/keyboard-shortcut/keyboard-shortcut.d.ts +27 -2
- package/dist/components/content/keyboard-shortcut/keyboard-shortcut.d.ts.map +1 -1
- package/dist/components/content/keyboard-shortcut/keyboard-shortcut.js +33 -2
- package/dist/components/content/keyboard-shortcut/keyboard-shortcut.js.map +1 -1
- package/dist/components/content/keyboard-shortcut/keyboard-shortcut.styles.d.ts.map +1 -1
- package/dist/components/content/keyboard-shortcut/keyboard-shortcut.styles.js +72 -13
- package/dist/components/content/keyboard-shortcut/keyboard-shortcut.styles.js.map +1 -1
- package/dist/components/content/keyboard-shortcut/keyboard-shortcut.template.d.ts.map +1 -1
- package/dist/components/content/keyboard-shortcut/keyboard-shortcut.template.js +3 -1
- package/dist/components/content/keyboard-shortcut/keyboard-shortcut.template.js.map +1 -1
- package/dist/components/content/rich-text/rich-text.d.ts +16 -0
- package/dist/components/content/rich-text/rich-text.d.ts.map +1 -1
- package/dist/components/content/rich-text/rich-text.js +19 -0
- package/dist/components/content/rich-text/rich-text.js.map +1 -1
- package/dist/components/content/tag/tag.d.ts +2 -2
- package/dist/components/content/tag/tag.d.ts.map +1 -1
- package/dist/components/content/tag/tag.js +1 -1
- package/dist/components/content/tag/tag.js.map +1 -1
- package/dist/components/content/tag/tag.styles.d.ts.map +1 -1
- package/dist/components/content/tag/tag.styles.js +81 -51
- package/dist/components/content/tag/tag.styles.js.map +1 -1
- package/dist/components/content/title/title.d.ts +6 -0
- package/dist/components/content/title/title.d.ts.map +1 -1
- package/dist/components/content/title/title.js +8 -0
- package/dist/components/content/title/title.js.map +1 -1
- package/dist/components/content/title/title.styles.d.ts.map +1 -1
- package/dist/components/content/title/title.styles.js +15 -0
- package/dist/components/content/title/title.styles.js.map +1 -1
- package/dist/components/{index-DHU98C6V.js → index-CtsEx0-K.js} +3902 -2158
- package/dist/components/index.d.ts +3 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +3 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/inputs/checkbox/checkbox.template.d.ts.map +1 -1
- package/dist/components/inputs/checkbox/checkbox.template.js +9 -3
- package/dist/components/inputs/checkbox/checkbox.template.js.map +1 -1
- package/dist/components/inputs/multi-line-text-field/multi-line-text-field.d.ts.map +1 -1
- package/dist/components/inputs/multi-line-text-field/multi-line-text-field.js +6 -0
- package/dist/components/inputs/multi-line-text-field/multi-line-text-field.js.map +1 -1
- package/dist/components/inputs/multi-line-text-field/multi-line-text-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/multi-line-text-field/multi-line-text-field.styles.js +11 -5
- package/dist/components/inputs/multi-line-text-field/multi-line-text-field.styles.js.map +1 -1
- package/dist/components/inputs/radio-button/radio-button.template.d.ts.map +1 -1
- package/dist/components/inputs/radio-button/radio-button.template.js +3 -1
- package/dist/components/inputs/radio-button/radio-button.template.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 +8 -2
- package/dist/components/inputs/toggle-button/toggle-button.template.js.map +1 -1
- package/dist/components/inputs/token/token.template.d.ts.map +1 -1
- package/dist/components/inputs/token/token.template.js +3 -1
- package/dist/components/inputs/token/token.template.js.map +1 -1
- package/dist/components/layout/collection/collection.template.d.ts.map +1 -1
- package/dist/components/layout/collection/collection.template.js +3 -1
- package/dist/components/layout/collection/collection.template.js.map +1 -1
- package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.template.d.ts.map +1 -1
- package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.template.js +6 -2
- package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.template.js.map +1 -1
- package/dist/components/layout/page-sections/hero/hero.d.ts +95 -0
- package/dist/components/layout/page-sections/hero/hero.d.ts.map +1 -0
- package/dist/components/layout/page-sections/hero/hero.js +168 -0
- package/dist/components/layout/page-sections/hero/hero.js.map +1 -0
- package/dist/components/layout/page-sections/hero/hero.styles.d.ts +2 -0
- package/dist/components/layout/page-sections/hero/hero.styles.d.ts.map +1 -0
- package/dist/components/layout/page-sections/hero/hero.styles.js +516 -0
- package/dist/components/layout/page-sections/hero/hero.styles.js.map +1 -0
- package/dist/components/layout/page-sections/hero/hero.template.d.ts +4 -0
- package/dist/components/layout/page-sections/hero/hero.template.d.ts.map +1 -0
- package/dist/components/layout/page-sections/hero/hero.template.js +18 -0
- package/dist/components/layout/page-sections/hero/hero.template.js.map +1 -0
- 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 +6 -2
- 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.template.d.ts.map +1 -1
- package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.template.js +6 -2
- 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.template.d.ts.map +1 -1
- package/dist/components/layout/page-sections/simple-section/simple-section.template.js +6 -2
- package/dist/components/layout/page-sections/simple-section/simple-section.template.js.map +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 +6 -2
- 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/list/list.template.d.ts.map +1 -1
- package/dist/components/lists-and-tables/list/list.template.js +3 -1
- package/dist/components/lists-and-tables/list/list.template.js.map +1 -1
- package/dist/components/lists-and-tables/list-item/list-item.d.ts +3 -4
- package/dist/components/lists-and-tables/list-item/list-item.d.ts.map +1 -1
- package/dist/components/lists-and-tables/list-item/list-item.js +7 -5
- package/dist/components/lists-and-tables/list-item/list-item.js.map +1 -1
- package/dist/components/lists-and-tables/list-item/list-item.template.d.ts +1 -1
- package/dist/components/lists-and-tables/list-item/list-item.template.d.ts.map +1 -1
- package/dist/components/lists-and-tables/list-item/list-item.template.js +2 -2
- package/dist/components/lists-and-tables/list-item/list-item.template.js.map +1 -1
- package/dist/components/lists-and-tables/table/table.template.d.ts.map +1 -1
- package/dist/components/lists-and-tables/table/table.template.js +7 -2
- package/dist/components/lists-and-tables/table/table.template.js.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.d.ts +44 -0
- package/dist/components/navigation/breadcrumbs/breadcrumbs.d.ts.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.i18n.d.ts +1 -0
- package/dist/components/navigation/breadcrumbs/breadcrumbs.i18n.d.ts.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.i18n.js +1 -0
- package/dist/components/navigation/breadcrumbs/breadcrumbs.i18n.js.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.js +84 -1
- 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 +64 -10
- 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 +17 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.template.js.map +1 -1
- package/dist/components/navigation/document-tab-bar/document-tab-bar.template.d.ts.map +1 -1
- package/dist/components/navigation/document-tab-bar/document-tab-bar.template.js +9 -3
- package/dist/components/navigation/document-tab-bar/document-tab-bar.template.js.map +1 -1
- package/dist/components/navigation/pagination/pagination.template.d.ts.map +1 -1
- package/dist/components/navigation/pagination/pagination.template.js +9 -3
- package/dist/components/navigation/pagination/pagination.template.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 +6 -2
- package/dist/components/navigation/tab-bar/tab-bar.template.js.map +1 -1
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.d.ts +18 -1
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.d.ts.map +1 -1
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.js +130 -24
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.js.map +1 -1
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.js +4 -4
- package/dist/components/navigation/top-title-bar/top-title-bar.template.d.ts.map +1 -1
- package/dist/components/navigation/top-title-bar/top-title-bar.template.js +3 -1
- package/dist/components/navigation/top-title-bar/top-title-bar.template.js.map +1 -1
- package/dist/components/{prism-python-9EoInm_N.js → prism-python-SgP2Rws4.js} +1 -1
- package/dist/components/{prism-rust-Chzr6sBk.js → prism-rust-CSuFXPDt.js} +1 -1
- package/dist/components/{prism-typescript-DPJmu--x.js → prism-typescript-DrsfPuKI.js} +1 -1
- package/dist/components/status-and-feedback/activity-indicator/activity-indicator.d.ts +6 -0
- package/dist/components/status-and-feedback/activity-indicator/activity-indicator.d.ts.map +1 -1
- package/dist/components/status-and-feedback/activity-indicator/activity-indicator.js +9 -0
- package/dist/components/status-and-feedback/activity-indicator/activity-indicator.js.map +1 -1
- package/dist/components/status-and-feedback/activity-indicator/activity-indicator.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/activity-indicator/activity-indicator.styles.js +30 -1
- package/dist/components/status-and-feedback/activity-indicator/activity-indicator.styles.js.map +1 -1
- package/dist/components/status-and-feedback/activity-indicator/activity-indicator.template.d.ts.map +1 -1
- package/dist/components/status-and-feedback/activity-indicator/activity-indicator.template.js +1 -0
- package/dist/components/status-and-feedback/activity-indicator/activity-indicator.template.js.map +1 -1
- package/dist/components/status-and-feedback/badge/badge.d.ts +1 -1
- package/dist/components/status-and-feedback/badge/badge.d.ts.map +1 -1
- package/dist/components/status-and-feedback/badge/badge.js.map +1 -1
- package/dist/components/status-and-feedback/badge/badge.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/badge/badge.styles.js +69 -75
- package/dist/components/status-and-feedback/badge/badge.styles.js.map +1 -1
- package/dist/components/status-and-feedback/banner/banner.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/banner/banner.styles.js +21 -35
- package/dist/components/status-and-feedback/banner/banner.styles.js.map +1 -1
- package/dist/components/status-and-feedback/banner/banner.template.d.ts.map +1 -1
- package/dist/components/status-and-feedback/banner/banner.template.js +9 -3
- package/dist/components/status-and-feedback/banner/banner.template.js.map +1 -1
- package/dist/components/status-and-feedback/inline-dialog/inline-dialog.template.d.ts.map +1 -1
- package/dist/components/status-and-feedback/inline-dialog/inline-dialog.template.js +6 -2
- package/dist/components/status-and-feedback/inline-dialog/inline-dialog.template.js.map +1 -1
- package/dist/components/status-and-feedback/progress-bar/progress-bar.d.ts +1 -1
- package/dist/components/status-and-feedback/progress-bar/progress-bar.d.ts.map +1 -1
- package/dist/components/status-and-feedback/progress-bar/progress-bar.js.map +1 -1
- package/dist/components/status-and-feedback/progress-bar/progress-bar.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/progress-bar/progress-bar.styles.js +73 -80
- package/dist/components/status-and-feedback/progress-bar/progress-bar.styles.js.map +1 -1
- package/dist/components/status-and-feedback/progress-circle/progress-circle.d.ts +1 -1
- package/dist/components/status-and-feedback/progress-circle/progress-circle.d.ts.map +1 -1
- package/dist/components/status-and-feedback/progress-circle/progress-circle.js.map +1 -1
- package/dist/components/status-and-feedback/progress-circle/progress-circle.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/progress-circle/progress-circle.styles.js +48 -50
- package/dist/components/status-and-feedback/progress-circle/progress-circle.styles.js.map +1 -1
- package/dist/components/status-and-feedback/progress-circle/progress-circle.template.js +1 -1
- package/dist/components/status-and-feedback/progress-circle/progress-circle.template.js.map +1 -1
- package/dist/components/status-and-feedback/status-bar/status-bar.d.ts +60 -0
- package/dist/components/status-and-feedback/status-bar/status-bar.d.ts.map +1 -0
- package/dist/components/status-and-feedback/status-bar/status-bar.js +116 -0
- package/dist/components/status-and-feedback/status-bar/status-bar.js.map +1 -0
- package/dist/components/status-and-feedback/status-bar/status-bar.styles.d.ts +2 -0
- package/dist/components/status-and-feedback/status-bar/status-bar.styles.d.ts.map +1 -0
- package/dist/components/status-and-feedback/status-bar/status-bar.styles.js +142 -0
- package/dist/components/status-and-feedback/status-bar/status-bar.styles.js.map +1 -0
- package/dist/components/status-and-feedback/status-bar/status-bar.template.d.ts +3 -0
- package/dist/components/status-and-feedback/status-bar/status-bar.template.d.ts.map +1 -0
- package/dist/components/status-and-feedback/status-bar/status-bar.template.js +32 -0
- package/dist/components/status-and-feedback/status-bar/status-bar.template.js.map +1 -0
- package/dist/css/rich-text.css +91 -13
- package/dist/css/settings.css +427 -338
- package/package.json +15 -2
|
@@ -7,18 +7,50 @@ export const keyboardShortcutStyles = css `
|
|
|
7
7
|
|
|
8
8
|
:host {
|
|
9
9
|
--_size: var(--components-keyboard-shortcut-md-size);
|
|
10
|
-
--_inline-padding: var(--primitives-space-
|
|
11
|
-
--_font: var(--primitives-font-
|
|
10
|
+
--_inline-padding: var(--primitives-space-4);
|
|
11
|
+
--_font-family: var(--primitives-font-family-monospace);
|
|
12
|
+
--_font-size: var(--primitives-font-size-80);
|
|
13
|
+
--_font-weight: var(--primitives-font-weight-body-regular);
|
|
14
|
+
--_line-height: var(--primitives-line-height-flat);
|
|
15
|
+
--_content-color: var(--components-keyboard-shortcut-content-color);
|
|
16
|
+
--_separator-color: var(--components-keyboard-shortcut-separator-color);
|
|
17
|
+
--_highlight-border-color: var(--components-keyboard-shortcut-border-color);
|
|
18
|
+
--_background-color: var(--components-keyboard-shortcut-background-color);
|
|
12
19
|
|
|
13
20
|
${inheritedTextReset}
|
|
14
21
|
display: inline-flex;
|
|
15
22
|
vertical-align: middle;
|
|
16
23
|
}
|
|
17
24
|
|
|
25
|
+
:host([color="inherit"]) {
|
|
26
|
+
--_content-color: currentColor;
|
|
27
|
+
--_separator-color: currentColor;
|
|
28
|
+
--_highlight-border-color: color-mix(in oklab, var(--semantics-content-contrast-color) 10%, transparent);
|
|
29
|
+
--_background-color: color-mix(in oklab, var(--semantics-content-contrast-color) 20%, transparent);
|
|
30
|
+
}
|
|
31
|
+
|
|
18
32
|
:host([size="sm"]) {
|
|
19
33
|
--_size: var(--components-keyboard-shortcut-sm-size);
|
|
20
|
-
--
|
|
21
|
-
|
|
34
|
+
--_font-size: var(--primitives-font-size-70);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
:host([size="inherit"]) {
|
|
38
|
+
--_size: 1.5em;
|
|
39
|
+
--_inline-padding: 0.35em;
|
|
40
|
+
--_font-size: 0.75em;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
:host([variant="simple"]) {
|
|
44
|
+
--_font-family: var(--primitives-font-family-body);
|
|
45
|
+
--_font-size: var(--primitives-font-size-100);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
:host([variant="simple"][size="sm"]) {
|
|
49
|
+
--_font-size: var(--primitives-font-size-90);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
:host([variant="simple"][size="inherit"]) {
|
|
53
|
+
--_font-size: inherit;
|
|
22
54
|
}
|
|
23
55
|
|
|
24
56
|
:host([hidden]) {
|
|
@@ -36,40 +68,67 @@ export const keyboardShortcutStyles = css `
|
|
|
36
68
|
|
|
37
69
|
.keyboard-shortcut {
|
|
38
70
|
display: inline-flex;
|
|
39
|
-
gap: var(--primitives-space-
|
|
71
|
+
gap: var(--primitives-space-2);
|
|
40
72
|
align-items: center;
|
|
41
73
|
}
|
|
42
74
|
|
|
75
|
+
:host([size="inherit"][variant="box"]) .keyboard-shortcut {
|
|
76
|
+
position: relative;
|
|
77
|
+
top: -0.05em;
|
|
78
|
+
}
|
|
79
|
+
|
|
43
80
|
|
|
44
81
|
/* # Elements */
|
|
45
82
|
|
|
46
83
|
.keyboard-shortcut__key {
|
|
47
84
|
box-sizing: border-box;
|
|
48
85
|
display: inline-flex;
|
|
49
|
-
|
|
86
|
+
box-shadow: inset 0 0 0 var(--components-keyboard-shortcut-border-thickness) var(--_highlight-border-color);
|
|
50
87
|
border-radius: var(--components-keyboard-shortcut-corner-radius);
|
|
51
|
-
background-color: var(--
|
|
88
|
+
background-color: var(--_background-color);
|
|
52
89
|
min-width: var(--_size);
|
|
53
90
|
height: var(--_size);
|
|
54
91
|
padding: 0 var(--_inline-padding);
|
|
55
92
|
align-items: center;
|
|
56
93
|
justify-content: center;
|
|
57
|
-
color: var(--
|
|
58
|
-
font: var(--_font);
|
|
94
|
+
color: var(--_content-color);
|
|
95
|
+
font-family: var(--_font-family);
|
|
96
|
+
font-size: var(--_font-size);
|
|
97
|
+
font-weight: var(--_font-weight);
|
|
98
|
+
line-height: var(--_line-height);
|
|
59
99
|
white-space: nowrap;
|
|
60
100
|
}
|
|
61
101
|
|
|
102
|
+
:host([variant="simple"]) .keyboard-shortcut {
|
|
103
|
+
gap: 0;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
:host([variant="simple"]) .keyboard-shortcut__key {
|
|
107
|
+
box-shadow: none;
|
|
108
|
+
background-color: transparent;
|
|
109
|
+
border-radius: 0;
|
|
110
|
+
min-width: 0;
|
|
111
|
+
height: auto;
|
|
112
|
+
padding: 0;
|
|
113
|
+
}
|
|
114
|
+
|
|
62
115
|
@media (forced-colors: active) {
|
|
63
116
|
.keyboard-shortcut__key {
|
|
64
|
-
border-color: CanvasText;
|
|
65
|
-
background-color: Canvas;
|
|
66
117
|
color: CanvasText;
|
|
67
118
|
}
|
|
119
|
+
|
|
120
|
+
:host(:not([variant="simple"])) .keyboard-shortcut__key {
|
|
121
|
+
border: var(--components-keyboard-shortcut-border-thickness) solid CanvasText;
|
|
122
|
+
background-color: Canvas;
|
|
123
|
+
}
|
|
68
124
|
}
|
|
69
125
|
|
|
70
126
|
.keyboard-shortcut__separator {
|
|
71
|
-
color: var(--
|
|
72
|
-
font: var(--_font);
|
|
127
|
+
color: var(--_separator-color);
|
|
128
|
+
font-family: var(--_font-family);
|
|
129
|
+
font-size: var(--_font-size);
|
|
130
|
+
font-weight: var(--_font-weight);
|
|
131
|
+
line-height: var(--_line-height);
|
|
73
132
|
}
|
|
74
133
|
`;
|
|
75
134
|
//# sourceMappingURL=keyboard-shortcut.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"keyboard-shortcut.styles.js","sourceRoot":"","sources":["../../../../src/components/content/keyboard-shortcut/keyboard-shortcut.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"keyboard-shortcut.styles.js","sourceRoot":"","sources":["../../../../src/components/content/keyboard-shortcut/keyboard-shortcut.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;IAiBrC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiHrB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"keyboard-shortcut.template.d.ts","sourceRoot":"","sources":["../../../../src/components/content/keyboard-shortcut/keyboard-shortcut.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAEnE,wBAAgB,QAAQ,CAAC,SAAS,EAAE,oBAAoB,
|
|
1
|
+
{"version":3,"file":"keyboard-shortcut.template.d.ts","sourceRoot":"","sources":["../../../../src/components/content/keyboard-shortcut/keyboard-shortcut.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAEnE,wBAAgB,QAAQ,CAAC,SAAS,EAAE,oBAAoB,wCAqBvD"}
|
|
@@ -11,7 +11,9 @@ export function template(component) {
|
|
|
11
11
|
return html `
|
|
12
12
|
<kbd class="keyboard-shortcut">
|
|
13
13
|
${keys.map((key, index) => html `
|
|
14
|
-
${index > 0 ? html `<span class="keyboard-shortcut__separator"
|
|
14
|
+
${index > 0 ? html `<span class="keyboard-shortcut__separator"
|
|
15
|
+
aria-hidden="true"
|
|
16
|
+
>+</span>` : ''}
|
|
15
17
|
<kbd class="keyboard-shortcut__key">${key}</kbd>
|
|
16
18
|
`)}
|
|
17
19
|
</kbd>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"keyboard-shortcut.template.js","sourceRoot":"","sources":["../../../../src/components/content/keyboard-shortcut/keyboard-shortcut.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,MAAM,UAAU,QAAQ,CAAC,SAA+B;IACvD,MAAM,IAAI,GAAG,SAAS,CAAC,WAAW,CAAC;IAEnC,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,IAAI,CAAA;;;;GAIV,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CAAA;;KAEP,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;MAC5B,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,
|
|
1
|
+
{"version":3,"file":"keyboard-shortcut.template.js","sourceRoot":"","sources":["../../../../src/components/content/keyboard-shortcut/keyboard-shortcut.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,MAAM,UAAU,QAAQ,CAAC,SAA+B;IACvD,MAAM,IAAI,GAAG,SAAS,CAAC,WAAW,CAAC;IAEnC,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,IAAI,CAAA;;;;GAIV,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CAAA;;KAEP,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;MAC5B,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;;cAER,CAAC,CAAC,CAAC,EAAE;0CACuB,GAAG;IACzC,CAAC;;EAEH,CAAC;AACH,CAAC"}
|
|
@@ -5,10 +5,25 @@
|
|
|
5
5
|
* typography. Uses no shadow DOM so styles apply to all nested elements.
|
|
6
6
|
* Import nldd-rich-text.css globally in your application.
|
|
7
7
|
*
|
|
8
|
+
* ## Breedtezones
|
|
9
|
+
* Kinderen worden in drie zones geplaatst: tekst (headings, paragrafen,
|
|
10
|
+
* lijsten, blockquote, div/section) leest op de `main`-maat; media en
|
|
11
|
+
* tabellen (img, figure, video, iframe, table) krijgen het `wide`-accent;
|
|
12
|
+
* al het overige — codeblokken en élke component — krijgt de volledige
|
|
13
|
+
* `full`-span met `justify-self: start`, zodat de ruimte beschikbaar is
|
|
14
|
+
* maar niet geforceerd wordt. Per kind te overschrijven met
|
|
15
|
+
* `data-width="main" | "wide" | "full"`. In de linkse layout lezen wide en
|
|
16
|
+
* full als bleed naar rechts; met `centered` zijn ze symmetrisch.
|
|
17
|
+
*
|
|
8
18
|
* @element nldd-rich-text
|
|
9
19
|
*
|
|
10
20
|
* @attr {string} spacing - Spacing between elements: 'flat' | 'tight' | 'snug' (default) | 'loose'
|
|
11
21
|
* @attr {boolean} centered - Centers the main column inside the container; without it, content is left-aligned
|
|
22
|
+
* @attr {string} color - 'inherit' laat alle tekst de kleur van de ondergrond
|
|
23
|
+
* volgen (voor gekleurde vlakken zoals de filled-categories). Links blijven
|
|
24
|
+
* onderstreept als affordance; secundaire tekst (figcaption) krijgt dezelfde
|
|
25
|
+
* kleur op verlaagde dekking. Bekende v1-gaten: inline code, mark, tabellen
|
|
26
|
+
* en hr behouden hun eigen surfaces. Leeg = standaard contentkleuren.
|
|
12
27
|
* @attr {object} translations - Override translation keys; unset keys fall back to Dutch
|
|
13
28
|
*/
|
|
14
29
|
import { LitElement } from 'lit';
|
|
@@ -17,6 +32,7 @@ type Spacing = 'flat' | 'tight' | 'snug' | 'loose';
|
|
|
17
32
|
export declare class NLDDRichText extends LitElement {
|
|
18
33
|
spacing: Spacing;
|
|
19
34
|
centered: boolean;
|
|
35
|
+
color: '' | 'inherit';
|
|
20
36
|
translations: Partial<NLDDRichTextTranslations>;
|
|
21
37
|
_t(key: keyof NLDDRichTextTranslations): string;
|
|
22
38
|
private _mutationObserver?;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rich-text.d.ts","sourceRoot":"","sources":["../../../../src/components/content/rich-text/rich-text.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"rich-text.d.ts","sourceRoot":"","sources":["../../../../src/components/content/rich-text/rich-text.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGjC,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAEpE,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AAInD,qBACa,YAAa,SAAQ,UAAU;IAE3C,OAAO,EAAE,OAAO,CAAU;IAG1B,QAAQ,UAAS;IAGjB,KAAK,EAAE,EAAE,GAAG,SAAS,CAAM;IAG3B,YAAY,EAAE,OAAO,CAAC,wBAAwB,CAAC,CAAM;IAE9C,EAAE,CAAC,GAAG,EAAE,MAAM,wBAAwB,GAAG,MAAM;IAItD,OAAO,CAAC,iBAAiB,CAAC,CAAmB;IAC7C,OAAO,CAAC,eAAe,CAAC,CAAiB;IAEhC,gBAAgB;IAIhB,iBAAiB,IAAI,IAAI;IAezB,oBAAoB,IAAI,IAAI;IAQrC,OAAO,CAAC,WAAW;CA+BnB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,YAAY,CAAC;KAC/B;CACD"}
|
|
@@ -11,10 +11,25 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
11
11
|
* typography. Uses no shadow DOM so styles apply to all nested elements.
|
|
12
12
|
* Import nldd-rich-text.css globally in your application.
|
|
13
13
|
*
|
|
14
|
+
* ## Breedtezones
|
|
15
|
+
* Kinderen worden in drie zones geplaatst: tekst (headings, paragrafen,
|
|
16
|
+
* lijsten, blockquote, div/section) leest op de `main`-maat; media en
|
|
17
|
+
* tabellen (img, figure, video, iframe, table) krijgen het `wide`-accent;
|
|
18
|
+
* al het overige — codeblokken en élke component — krijgt de volledige
|
|
19
|
+
* `full`-span met `justify-self: start`, zodat de ruimte beschikbaar is
|
|
20
|
+
* maar niet geforceerd wordt. Per kind te overschrijven met
|
|
21
|
+
* `data-width="main" | "wide" | "full"`. In de linkse layout lezen wide en
|
|
22
|
+
* full als bleed naar rechts; met `centered` zijn ze symmetrisch.
|
|
23
|
+
*
|
|
14
24
|
* @element nldd-rich-text
|
|
15
25
|
*
|
|
16
26
|
* @attr {string} spacing - Spacing between elements: 'flat' | 'tight' | 'snug' (default) | 'loose'
|
|
17
27
|
* @attr {boolean} centered - Centers the main column inside the container; without it, content is left-aligned
|
|
28
|
+
* @attr {string} color - 'inherit' laat alle tekst de kleur van de ondergrond
|
|
29
|
+
* volgen (voor gekleurde vlakken zoals de filled-categories). Links blijven
|
|
30
|
+
* onderstreept als affordance; secundaire tekst (figcaption) krijgt dezelfde
|
|
31
|
+
* kleur op verlaagde dekking. Bekende v1-gaten: inline code, mark, tabellen
|
|
32
|
+
* en hr behouden hun eigen surfaces. Leeg = standaard contentkleuren.
|
|
18
33
|
* @attr {object} translations - Override translation keys; unset keys fall back to Dutch
|
|
19
34
|
*/
|
|
20
35
|
import { LitElement } from 'lit';
|
|
@@ -26,6 +41,7 @@ let NLDDRichText = class NLDDRichText extends LitElement {
|
|
|
26
41
|
super(...arguments);
|
|
27
42
|
this.spacing = 'snug';
|
|
28
43
|
this.centered = false;
|
|
44
|
+
this.color = '';
|
|
29
45
|
this.translations = {};
|
|
30
46
|
}
|
|
31
47
|
_t(key) {
|
|
@@ -92,6 +108,9 @@ __decorate([
|
|
|
92
108
|
__decorate([
|
|
93
109
|
property({ type: Boolean, reflect: true })
|
|
94
110
|
], NLDDRichText.prototype, "centered", void 0);
|
|
111
|
+
__decorate([
|
|
112
|
+
property({ type: String, reflect: true })
|
|
113
|
+
], NLDDRichText.prototype, "color", void 0);
|
|
95
114
|
__decorate([
|
|
96
115
|
property({ type: Object })
|
|
97
116
|
], NLDDRichText.prototype, "translations", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rich-text.js","sourceRoot":"","sources":["../../../../src/components/content/rich-text/rich-text.ts"],"names":[],"mappings":";;;;;;AAAA
|
|
1
|
+
{"version":3,"file":"rich-text.js","sourceRoot":"","sources":["../../../../src/components/content/rich-text/rich-text.ts"],"names":[],"mappings":"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"}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* Voor interactieve chips (filter, dismiss) gebruik je <nldd-token>.
|
|
6
6
|
*
|
|
7
7
|
* @element nldd-tag
|
|
8
|
-
* @attr {string} color - Kleurvariant. Semantisch: 'neutral' | 'accent' | 'success' | 'warning' | 'critical'. Rijkskleuren: '
|
|
8
|
+
* @attr {string} color - Kleurvariant. Semantisch: 'neutral' | 'accent' | 'success' | 'warning' | 'critical'. Rijkskleuren: 'lintblauw' | 'donkerblauw' | 'hemelblauw' | 'lichtblauw' | 'paars' | 'violet' | 'robijnrood' | 'roze' | 'rood' | 'oranje' | 'donkergeel' | 'geel' | 'donkerbruin' | 'bruin' | 'donkergroen' | 'groen' | 'mosgroen' | 'mintgroen'. (default: 'neutral')
|
|
9
9
|
* @attr {string} size - Tag grootte: 'sm' | 'md' (default: 'md')
|
|
10
10
|
* @attr {string} text - Tag tekst (alternatief voor default slot)
|
|
11
11
|
* @attr {string} icon - Icoon voor de tekst
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
*/
|
|
18
18
|
import { LitElement } from 'lit';
|
|
19
19
|
import './../icon/icon.js';
|
|
20
|
-
type Color = 'neutral' | 'accent' | 'success' | 'warning' | 'critical' | '
|
|
20
|
+
type Color = 'neutral' | 'accent' | 'success' | 'warning' | 'critical' | 'lintblauw' | 'donkerblauw' | 'hemelblauw' | 'lichtblauw' | 'paars' | 'violet' | 'robijnrood' | 'roze' | 'rood' | 'oranje' | 'donkergeel' | 'geel' | 'donkerbruin' | 'bruin' | 'donkergroen' | 'groen' | 'mosgroen' | 'mintgroen';
|
|
21
21
|
type Size = 'sm' | 'md';
|
|
22
22
|
type Variant = 'text' | 'icon' | 'icon-and-text';
|
|
23
23
|
export declare class NLDDTag extends LitElement {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../../src/components/content/tag/tag.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,mBAAmB,CAAC;AAE3B,KAAK,KAAK,GAEP,SAAS,GACT,QAAQ,GACR,SAAS,GACT,SAAS,GACT,UAAU,GAEV,
|
|
1
|
+
{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../../src/components/content/tag/tag.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,mBAAmB,CAAC;AAE3B,KAAK,KAAK,GAEP,SAAS,GACT,QAAQ,GACR,SAAS,GACT,SAAS,GACT,UAAU,GAEV,WAAW,GACX,aAAa,GACb,YAAY,GACZ,YAAY,GACZ,OAAO,GACP,QAAQ,GACR,YAAY,GACZ,MAAM,GACN,MAAM,GACN,QAAQ,GACR,YAAY,GACZ,MAAM,GACN,aAAa,GACb,OAAO,GACP,aAAa,GACb,OAAO,GACP,UAAU,GACV,WAAW,CAAC;AACf,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACxB,KAAK,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,eAAe,CAAC;AAEjD,qBACa,OAAQ,SAAQ,UAAU;IACtC,OAAgB,MAAM,0BAAa;IAGnC,KAAK,EAAE,KAAK,CAAa;IAGzB,IAAI,EAAE,IAAI,CAAQ;IAGlB,IAAI,SAAM;IAGV,IAAI,SAAM;IAGV,OAAO,EAAE,OAAO,GAAG,EAAE,CAAM;IAG3B,eAAe,SAAM;IAGrB,YAAY,UAAS;IAGrB,YAAY,UAAS;IAErB,OAAO,CAAC,cAAc,CAAC,CAAmB;IAE1C,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,iBAAiB,IAAI,OAAO,CAK/B;IAEQ,iBAAiB;IAajB,oBAAoB;IAM7B,OAAO,CAAC,gBAAgB;IAgBf,OAAO;IASP,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* Voor interactieve chips (filter, dismiss) gebruik je <nldd-token>.
|
|
6
6
|
*
|
|
7
7
|
* @element nldd-tag
|
|
8
|
-
* @attr {string} color - Kleurvariant. Semantisch: 'neutral' | 'accent' | 'success' | 'warning' | 'critical'. Rijkskleuren: '
|
|
8
|
+
* @attr {string} color - Kleurvariant. Semantisch: 'neutral' | 'accent' | 'success' | 'warning' | 'critical'. Rijkskleuren: 'lintblauw' | 'donkerblauw' | 'hemelblauw' | 'lichtblauw' | 'paars' | 'violet' | 'robijnrood' | 'roze' | 'rood' | 'oranje' | 'donkergeel' | 'geel' | 'donkerbruin' | 'bruin' | 'donkergroen' | 'groen' | 'mosgroen' | 'mintgroen'. (default: 'neutral')
|
|
9
9
|
* @attr {string} size - Tag grootte: 'sm' | 'md' (default: 'md')
|
|
10
10
|
* @attr {string} text - Tag tekst (alternatief voor default slot)
|
|
11
11
|
* @attr {string} icon - Icoon voor de tekst
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../../../src/components/content/tag/tag.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../../../src/components/content/tag/tag.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/content/tag/tag.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"tag.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/content/tag/tag.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,yBA4NrB,CAAC"}
|
|
@@ -7,11 +7,13 @@ export const tagStyles = css `
|
|
|
7
7
|
|
|
8
8
|
:host {
|
|
9
9
|
--_corner-radius: var(--components-tag-md-corner-radius);
|
|
10
|
-
--_background-color: var(--
|
|
10
|
+
--_background-color: var(--semantics-categories-neutral-tinted-background-color);
|
|
11
11
|
--_min-height: var(--primitives-space-24);
|
|
12
12
|
--_inline-padding: var(--primitives-space-6);
|
|
13
13
|
--_gap: var(--primitives-space-3);
|
|
14
|
-
--_content-color: var(--
|
|
14
|
+
--_content-color: var(--semantics-categories-neutral-tinted-primary-content-color);
|
|
15
|
+
--_border-color: var(--semantics-categories-neutral-tinted-highlight-border-color);
|
|
16
|
+
--_border-width: var(--primitives-border-width-thin);
|
|
15
17
|
--_font: var(--primitives-font-body-sm-medium-flat);
|
|
16
18
|
--_icon-size: var(--primitives-space-16);
|
|
17
19
|
--_icon-offset-correction: var(--primitives-space-1);
|
|
@@ -33,120 +35,137 @@ export const tagStyles = css `
|
|
|
33
35
|
/* ## Color */
|
|
34
36
|
|
|
35
37
|
:host([color="accent"]) {
|
|
36
|
-
--_background-color: var(--
|
|
37
|
-
--_content-color: var(--
|
|
38
|
+
--_background-color: var(--semantics-categories-accent-tinted-background-color);
|
|
39
|
+
--_content-color: var(--semantics-categories-accent-tinted-primary-content-color);
|
|
40
|
+
--_border-color: var(--semantics-categories-accent-tinted-highlight-border-color);
|
|
38
41
|
}
|
|
39
42
|
|
|
40
43
|
:host([color="success"]) {
|
|
41
|
-
--_background-color: var(--
|
|
42
|
-
--_content-color: var(--
|
|
44
|
+
--_background-color: var(--semantics-categories-success-tinted-background-color);
|
|
45
|
+
--_content-color: var(--semantics-categories-success-tinted-primary-content-color);
|
|
46
|
+
--_border-color: var(--semantics-categories-success-tinted-highlight-border-color);
|
|
43
47
|
}
|
|
44
48
|
|
|
45
49
|
:host([color="warning"]) {
|
|
46
|
-
--_background-color: var(--
|
|
47
|
-
--_content-color: var(--
|
|
50
|
+
--_background-color: var(--semantics-categories-warning-tinted-background-color);
|
|
51
|
+
--_content-color: var(--semantics-categories-warning-tinted-primary-content-color);
|
|
52
|
+
--_border-color: var(--semantics-categories-warning-tinted-highlight-border-color);
|
|
48
53
|
}
|
|
49
54
|
|
|
50
55
|
:host([color="critical"]) {
|
|
51
|
-
--_background-color: var(--
|
|
52
|
-
--_content-color: var(--
|
|
56
|
+
--_background-color: var(--semantics-categories-critical-tinted-background-color);
|
|
57
|
+
--_content-color: var(--semantics-categories-critical-tinted-primary-content-color);
|
|
58
|
+
--_border-color: var(--semantics-categories-critical-tinted-highlight-border-color);
|
|
53
59
|
}
|
|
54
60
|
|
|
55
61
|
/* ### Rijkskleuren */
|
|
56
62
|
|
|
57
|
-
:host([color="coolgray"]) {
|
|
58
|
-
--_background-color: var(--components-tag-coolgray-background-color);
|
|
59
|
-
--_content-color: var(--components-tag-coolgray-content-color);
|
|
60
|
-
}
|
|
61
|
-
|
|
62
63
|
:host([color="lintblauw"]) {
|
|
63
|
-
--_background-color: var(--
|
|
64
|
-
--_content-color: var(--
|
|
64
|
+
--_background-color: var(--semantics-categories-lintblauw-tinted-background-color);
|
|
65
|
+
--_content-color: var(--semantics-categories-lintblauw-tinted-primary-content-color);
|
|
66
|
+
--_border-color: var(--semantics-categories-lintblauw-tinted-highlight-border-color);
|
|
65
67
|
}
|
|
66
68
|
|
|
67
69
|
:host([color="donkerblauw"]) {
|
|
68
|
-
--_background-color: var(--
|
|
69
|
-
--_content-color: var(--
|
|
70
|
+
--_background-color: var(--semantics-categories-donkerblauw-tinted-background-color);
|
|
71
|
+
--_content-color: var(--semantics-categories-donkerblauw-tinted-primary-content-color);
|
|
72
|
+
--_border-color: var(--semantics-categories-donkerblauw-tinted-highlight-border-color);
|
|
70
73
|
}
|
|
71
74
|
|
|
72
75
|
:host([color="hemelblauw"]) {
|
|
73
|
-
--_background-color: var(--
|
|
74
|
-
--_content-color: var(--
|
|
76
|
+
--_background-color: var(--semantics-categories-hemelblauw-tinted-background-color);
|
|
77
|
+
--_content-color: var(--semantics-categories-hemelblauw-tinted-primary-content-color);
|
|
78
|
+
--_border-color: var(--semantics-categories-hemelblauw-tinted-highlight-border-color);
|
|
75
79
|
}
|
|
76
80
|
|
|
77
81
|
:host([color="lichtblauw"]) {
|
|
78
|
-
--_background-color: var(--
|
|
79
|
-
--_content-color: var(--
|
|
82
|
+
--_background-color: var(--semantics-categories-lichtblauw-tinted-background-color);
|
|
83
|
+
--_content-color: var(--semantics-categories-lichtblauw-tinted-primary-content-color);
|
|
84
|
+
--_border-color: var(--semantics-categories-lichtblauw-tinted-highlight-border-color);
|
|
80
85
|
}
|
|
81
86
|
|
|
82
87
|
:host([color="paars"]) {
|
|
83
|
-
--_background-color: var(--
|
|
84
|
-
--_content-color: var(--
|
|
88
|
+
--_background-color: var(--semantics-categories-paars-tinted-background-color);
|
|
89
|
+
--_content-color: var(--semantics-categories-paars-tinted-primary-content-color);
|
|
90
|
+
--_border-color: var(--semantics-categories-paars-tinted-highlight-border-color);
|
|
85
91
|
}
|
|
86
92
|
|
|
87
93
|
:host([color="violet"]) {
|
|
88
|
-
--_background-color: var(--
|
|
89
|
-
--_content-color: var(--
|
|
94
|
+
--_background-color: var(--semantics-categories-violet-tinted-background-color);
|
|
95
|
+
--_content-color: var(--semantics-categories-violet-tinted-primary-content-color);
|
|
96
|
+
--_border-color: var(--semantics-categories-violet-tinted-highlight-border-color);
|
|
90
97
|
}
|
|
91
98
|
|
|
92
99
|
:host([color="robijnrood"]) {
|
|
93
|
-
--_background-color: var(--
|
|
94
|
-
--_content-color: var(--
|
|
100
|
+
--_background-color: var(--semantics-categories-robijnrood-tinted-background-color);
|
|
101
|
+
--_content-color: var(--semantics-categories-robijnrood-tinted-primary-content-color);
|
|
102
|
+
--_border-color: var(--semantics-categories-robijnrood-tinted-highlight-border-color);
|
|
95
103
|
}
|
|
96
104
|
|
|
97
105
|
:host([color="roze"]) {
|
|
98
|
-
--_background-color: var(--
|
|
99
|
-
--_content-color: var(--
|
|
106
|
+
--_background-color: var(--semantics-categories-roze-tinted-background-color);
|
|
107
|
+
--_content-color: var(--semantics-categories-roze-tinted-primary-content-color);
|
|
108
|
+
--_border-color: var(--semantics-categories-roze-tinted-highlight-border-color);
|
|
100
109
|
}
|
|
101
110
|
|
|
102
111
|
:host([color="rood"]) {
|
|
103
|
-
--_background-color: var(--
|
|
104
|
-
--_content-color: var(--
|
|
112
|
+
--_background-color: var(--semantics-categories-rood-tinted-background-color);
|
|
113
|
+
--_content-color: var(--semantics-categories-rood-tinted-primary-content-color);
|
|
114
|
+
--_border-color: var(--semantics-categories-rood-tinted-highlight-border-color);
|
|
105
115
|
}
|
|
106
116
|
|
|
107
117
|
:host([color="oranje"]) {
|
|
108
|
-
--_background-color: var(--
|
|
109
|
-
--_content-color: var(--
|
|
118
|
+
--_background-color: var(--semantics-categories-oranje-tinted-background-color);
|
|
119
|
+
--_content-color: var(--semantics-categories-oranje-tinted-primary-content-color);
|
|
120
|
+
--_border-color: var(--semantics-categories-oranje-tinted-highlight-border-color);
|
|
110
121
|
}
|
|
111
122
|
|
|
112
123
|
:host([color="donkergeel"]) {
|
|
113
|
-
--_background-color: var(--
|
|
114
|
-
--_content-color: var(--
|
|
124
|
+
--_background-color: var(--semantics-categories-donkergeel-tinted-background-color);
|
|
125
|
+
--_content-color: var(--semantics-categories-donkergeel-tinted-primary-content-color);
|
|
126
|
+
--_border-color: var(--semantics-categories-donkergeel-tinted-highlight-border-color);
|
|
115
127
|
}
|
|
116
128
|
|
|
117
129
|
:host([color="geel"]) {
|
|
118
|
-
--_background-color: var(--
|
|
119
|
-
--_content-color: var(--
|
|
130
|
+
--_background-color: var(--semantics-categories-geel-tinted-background-color);
|
|
131
|
+
--_content-color: var(--semantics-categories-geel-tinted-primary-content-color);
|
|
132
|
+
--_border-color: var(--semantics-categories-geel-tinted-highlight-border-color);
|
|
120
133
|
}
|
|
121
134
|
|
|
122
135
|
:host([color="donkerbruin"]) {
|
|
123
|
-
--_background-color: var(--
|
|
124
|
-
--_content-color: var(--
|
|
136
|
+
--_background-color: var(--semantics-categories-donkerbruin-tinted-background-color);
|
|
137
|
+
--_content-color: var(--semantics-categories-donkerbruin-tinted-primary-content-color);
|
|
138
|
+
--_border-color: var(--semantics-categories-donkerbruin-tinted-highlight-border-color);
|
|
125
139
|
}
|
|
126
140
|
|
|
127
141
|
:host([color="bruin"]) {
|
|
128
|
-
--_background-color: var(--
|
|
129
|
-
--_content-color: var(--
|
|
142
|
+
--_background-color: var(--semantics-categories-bruin-tinted-background-color);
|
|
143
|
+
--_content-color: var(--semantics-categories-bruin-tinted-primary-content-color);
|
|
144
|
+
--_border-color: var(--semantics-categories-bruin-tinted-highlight-border-color);
|
|
130
145
|
}
|
|
131
146
|
|
|
132
147
|
:host([color="donkergroen"]) {
|
|
133
|
-
--_background-color: var(--
|
|
134
|
-
--_content-color: var(--
|
|
148
|
+
--_background-color: var(--semantics-categories-donkergroen-tinted-background-color);
|
|
149
|
+
--_content-color: var(--semantics-categories-donkergroen-tinted-primary-content-color);
|
|
150
|
+
--_border-color: var(--semantics-categories-donkergroen-tinted-highlight-border-color);
|
|
135
151
|
}
|
|
136
152
|
|
|
137
153
|
:host([color="groen"]) {
|
|
138
|
-
--_background-color: var(--
|
|
139
|
-
--_content-color: var(--
|
|
154
|
+
--_background-color: var(--semantics-categories-groen-tinted-background-color);
|
|
155
|
+
--_content-color: var(--semantics-categories-groen-tinted-primary-content-color);
|
|
156
|
+
--_border-color: var(--semantics-categories-groen-tinted-highlight-border-color);
|
|
140
157
|
}
|
|
141
158
|
|
|
142
159
|
:host([color="mosgroen"]) {
|
|
143
|
-
--_background-color: var(--
|
|
144
|
-
--_content-color: var(--
|
|
160
|
+
--_background-color: var(--semantics-categories-mosgroen-tinted-background-color);
|
|
161
|
+
--_content-color: var(--semantics-categories-mosgroen-tinted-primary-content-color);
|
|
162
|
+
--_border-color: var(--semantics-categories-mosgroen-tinted-highlight-border-color);
|
|
145
163
|
}
|
|
146
164
|
|
|
147
165
|
:host([color="mintgroen"]) {
|
|
148
|
-
--_background-color: var(--
|
|
149
|
-
--_content-color: var(--
|
|
166
|
+
--_background-color: var(--semantics-categories-mintgroen-tinted-background-color);
|
|
167
|
+
--_content-color: var(--semantics-categories-mintgroen-tinted-primary-content-color);
|
|
168
|
+
--_border-color: var(--semantics-categories-mintgroen-tinted-highlight-border-color);
|
|
150
169
|
}
|
|
151
170
|
|
|
152
171
|
:host([hidden]) {
|
|
@@ -160,6 +179,9 @@ export const tagStyles = css `
|
|
|
160
179
|
box-sizing: border-box;
|
|
161
180
|
display: inline-flex;
|
|
162
181
|
border-radius: var(--_corner-radius);
|
|
182
|
+
/* Inset box-shadow rather than a border so the outline never adds to
|
|
183
|
+
the tag's size or shifts the text. */
|
|
184
|
+
box-shadow: inset 0 0 0 var(--_border-width) var(--_border-color);
|
|
163
185
|
background-color: var(--_background-color);
|
|
164
186
|
min-height: var(--_min-height);
|
|
165
187
|
padding: 0 var(--_inline-padding);
|
|
@@ -170,6 +192,14 @@ export const tagStyles = css `
|
|
|
170
192
|
white-space: nowrap;
|
|
171
193
|
}
|
|
172
194
|
|
|
195
|
+
@media (forced-colors: active) {
|
|
196
|
+
.tag {
|
|
197
|
+
border: var(--primitives-border-width-thin) solid CanvasText;
|
|
198
|
+
background-color: Canvas;
|
|
199
|
+
color: CanvasText;
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
|
|
173
203
|
|
|
174
204
|
/* # Elements */
|
|
175
205
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag.styles.js","sourceRoot":"","sources":["../../../../src/components/content/tag/tag.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"tag.styles.js","sourceRoot":"","sources":["../../../../src/components/content/tag/tag.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;IAkBxB,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0MrB,CAAC"}
|
|
@@ -7,6 +7,10 @@
|
|
|
7
7
|
* @element nldd-title
|
|
8
8
|
*
|
|
9
9
|
* @attr {number} size - Visual size of the title: 1–6 (default: 3)
|
|
10
|
+
* @attr {string} color - 'inherit' laat de titel de tekstkleur van de
|
|
11
|
+
* ondergrond volgen (voor gekleurde vlakken zoals de filled-categories);
|
|
12
|
+
* overline en subtitle krijgen dezelfde kleur op verlaagde dekking.
|
|
13
|
+
* Leeg = standaard contentkleuren.
|
|
10
14
|
*
|
|
11
15
|
* @slot overline - Optional overline above the title
|
|
12
16
|
* @slot - Title text (use h1–h6 for semantics)
|
|
@@ -15,9 +19,11 @@
|
|
|
15
19
|
*/
|
|
16
20
|
import { LitElement } from 'lit';
|
|
17
21
|
type Size = 1 | 2 | 3 | 4 | 5 | 6;
|
|
22
|
+
type TitleColor = '' | 'inherit';
|
|
18
23
|
export declare class NLDDTitle extends LitElement {
|
|
19
24
|
static styles: import("lit").CSSResult;
|
|
20
25
|
size: Size;
|
|
26
|
+
color: TitleColor;
|
|
21
27
|
render(): import("lit-html").TemplateResult;
|
|
22
28
|
}
|
|
23
29
|
declare global {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"title.d.ts","sourceRoot":"","sources":["../../../../src/components/content/title/title.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"title.d.ts","sourceRoot":"","sources":["../../../../src/components/content/title/title.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,KAAK,IAAI,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAClC,KAAK,UAAU,GAAG,EAAE,GAAG,SAAS,CAAC;AAEjC,qBACa,SAAU,SAAQ,UAAU;IACxC,OAAgB,MAAM,0BAAe;IAGrC,IAAI,EAAE,IAAI,CAAK;IAGf,KAAK,EAAE,UAAU,CAAM;IAEd,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}
|
|
@@ -13,6 +13,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
13
13
|
* @element nldd-title
|
|
14
14
|
*
|
|
15
15
|
* @attr {number} size - Visual size of the title: 1–6 (default: 3)
|
|
16
|
+
* @attr {string} color - 'inherit' laat de titel de tekstkleur van de
|
|
17
|
+
* ondergrond volgen (voor gekleurde vlakken zoals de filled-categories);
|
|
18
|
+
* overline en subtitle krijgen dezelfde kleur op verlaagde dekking.
|
|
19
|
+
* Leeg = standaard contentkleuren.
|
|
16
20
|
*
|
|
17
21
|
* @slot overline - Optional overline above the title
|
|
18
22
|
* @slot - Title text (use h1–h6 for semantics)
|
|
@@ -27,6 +31,7 @@ let NLDDTitle = class NLDDTitle extends LitElement {
|
|
|
27
31
|
constructor() {
|
|
28
32
|
super(...arguments);
|
|
29
33
|
this.size = 3;
|
|
34
|
+
this.color = '';
|
|
30
35
|
}
|
|
31
36
|
render() {
|
|
32
37
|
return titleTemplate();
|
|
@@ -36,6 +41,9 @@ NLDDTitle.styles = titleStyles;
|
|
|
36
41
|
__decorate([
|
|
37
42
|
property({ type: Number, reflect: true })
|
|
38
43
|
], NLDDTitle.prototype, "size", void 0);
|
|
44
|
+
__decorate([
|
|
45
|
+
property({ type: String, reflect: true })
|
|
46
|
+
], NLDDTitle.prototype, "color", void 0);
|
|
39
47
|
NLDDTitle = __decorate([
|
|
40
48
|
customElement('nldd-title')
|
|
41
49
|
], NLDDTitle);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"title.js","sourceRoot":"","sources":["../../../../src/components/content/title/title.ts"],"names":[],"mappings":";;;;;;AAAA
|
|
1
|
+
{"version":3,"file":"title.js","sourceRoot":"","sources":["../../../../src/components/content/title/title.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAM7C,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAIN,SAAI,GAAS,CAAC,CAAC;QAGf,UAAK,GAAe,EAAE,CAAC;IAKxB,CAAC;IAHS,MAAM;QACd,OAAO,aAAa,EAAE,CAAC;IACxB,CAAC;;AAVe,gBAAM,GAAG,WAAW,AAAd,CAAe;AAGrC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAC3B;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACnB;AAPX,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAYrB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"title.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/content/title/title.styles.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"title.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/content/title/title.styles.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,WAAW,yBAgPvB,CAAC"}
|