@nldd/design-system 0.8.52 → 0.8.53
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/assets/styles/slotted-reset.d.ts +51 -0
- package/dist/assets/styles/slotted-reset.d.ts.map +1 -0
- package/dist/assets/styles/slotted-reset.fixtures.d.ts +12 -0
- package/dist/assets/styles/slotted-reset.fixtures.d.ts.map +1 -0
- package/dist/assets/styles/slotted-reset.fixtures.js +21 -0
- package/dist/assets/styles/slotted-reset.fixtures.js.map +1 -0
- package/dist/assets/styles/slotted-reset.js +59 -0
- package/dist/assets/styles/slotted-reset.js.map +1 -0
- package/dist/components/actions/button/button.styles.d.ts.map +1 -1
- package/dist/components/actions/button/button.styles.js +2 -0
- package/dist/components/actions/button/button.styles.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 +4 -1
- package/dist/components/actions/icon-button/icon-button.styles.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 +2 -0
- package/dist/components/actions/split-button/split-button.styles.js.map +1 -1
- package/dist/components/actions/toolbar/toolbar.styles.d.ts.map +1 -1
- package/dist/components/actions/toolbar/toolbar.styles.js +4 -2
- package/dist/components/actions/toolbar/toolbar.styles.js.map +1 -1
- package/dist/components/components.js +1 -1
- package/dist/components/content/blockquote/blockquote.styles.d.ts.map +1 -1
- package/dist/components/content/blockquote/blockquote.styles.js +6 -2
- package/dist/components/content/blockquote/blockquote.styles.js.map +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 +2 -0
- package/dist/components/content/code-viewer/code-viewer.styles.js.map +1 -1
- package/dist/components/content/icon/icon-aliases.js +5 -5
- package/dist/components/content/icon/icon-aliases.js.map +1 -1
- package/dist/components/content/icon/icon-registry.js +2 -2
- package/dist/components/content/icon/icon-registry.js.map +1 -1
- package/dist/components/content/image/image.styles.d.ts.map +1 -1
- package/dist/components/content/image/image.styles.js +18 -6
- package/dist/components/content/image/image.styles.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 +2 -0
- package/dist/components/content/keyboard-shortcut/keyboard-shortcut.styles.js.map +1 -1
- package/dist/components/content/tag/tag.styles.d.ts.map +1 -1
- package/dist/components/content/tag/tag.styles.js +4 -2
- package/dist/components/content/tag/tag.styles.js.map +1 -1
- package/dist/components/content/title/title.styles.d.ts.map +1 -1
- package/dist/components/content/title/title.styles.js +21 -13
- package/dist/components/content/title/title.styles.js.map +1 -1
- package/dist/components/content/tooltip/tooltip.styles.d.ts.map +1 -1
- package/dist/components/content/tooltip/tooltip.styles.js +2 -0
- package/dist/components/content/tooltip/tooltip.styles.js.map +1 -1
- package/dist/components/forms/form-field/form-field.styles.d.ts.map +1 -1
- package/dist/components/forms/form-field/form-field.styles.js +34 -21
- package/dist/components/forms/form-field/form-field.styles.js.map +1 -1
- package/dist/components/{index-DYnIl3ts.js → index-Cwro7Ee_.js} +488 -298
- package/dist/components/inputs/checkbox-field/checkbox-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/checkbox-field/checkbox-field.styles.js +2 -0
- package/dist/components/inputs/checkbox-field/checkbox-field.styles.js.map +1 -1
- package/dist/components/inputs/code-editor/code-editor.styles.d.ts.map +1 -1
- package/dist/components/inputs/code-editor/code-editor.styles.js +9 -0
- package/dist/components/inputs/code-editor/code-editor.styles.js.map +1 -1
- package/dist/components/inputs/combo-box/combo-box.styles.d.ts.map +1 -1
- package/dist/components/inputs/combo-box/combo-box.styles.js +2 -0
- package/dist/components/inputs/combo-box/combo-box.styles.js.map +1 -1
- package/dist/components/inputs/dropdown/dropdown.styles.d.ts.map +1 -1
- package/dist/components/inputs/dropdown/dropdown.styles.js +16 -13
- package/dist/components/inputs/dropdown/dropdown.styles.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 +2 -0
- package/dist/components/inputs/multi-line-text-field/multi-line-text-field.styles.js.map +1 -1
- package/dist/components/inputs/number-field/number-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/number-field/number-field.styles.js +2 -0
- package/dist/components/inputs/number-field/number-field.styles.js.map +1 -1
- package/dist/components/inputs/password-field/password-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/password-field/password-field.styles.js +2 -0
- package/dist/components/inputs/password-field/password-field.styles.js.map +1 -1
- package/dist/components/inputs/radio-button-field/radio-button-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/radio-button-field/radio-button-field.styles.js +2 -0
- package/dist/components/inputs/radio-button-field/radio-button-field.styles.js.map +1 -1
- package/dist/components/inputs/radio-button-group/radio-button-group.styles.d.ts.map +1 -1
- package/dist/components/inputs/radio-button-group/radio-button-group.styles.js +2 -0
- package/dist/components/inputs/radio-button-group/radio-button-group.styles.js.map +1 -1
- package/dist/components/inputs/search-field/search-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/search-field/search-field.styles.js +2 -0
- package/dist/components/inputs/search-field/search-field.styles.js.map +1 -1
- package/dist/components/inputs/segmented-control/segmented-control.d.ts +5 -5
- package/dist/components/inputs/segmented-control/segmented-control.d.ts.map +1 -1
- package/dist/components/inputs/segmented-control/segmented-control.js +4 -4
- 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 +15 -2
- package/dist/components/inputs/segmented-control/segmented-control.styles.js.map +1 -1
- package/dist/components/inputs/segmented-control/segmented-control.template.d.ts.map +1 -1
- package/dist/components/inputs/segmented-control/segmented-control.template.js +6 -3
- package/dist/components/inputs/segmented-control/segmented-control.template.js.map +1 -1
- package/dist/components/inputs/switch-field/switch-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/switch-field/switch-field.styles.js +2 -0
- package/dist/components/inputs/switch-field/switch-field.styles.js.map +1 -1
- package/dist/components/inputs/text-field/text-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/text-field/text-field.styles.js +2 -0
- package/dist/components/inputs/text-field/text-field.styles.js.map +1 -1
- package/dist/components/inputs/toggle-button/toggle-button.js +3 -3
- 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 +2 -0
- 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 +6 -1
- 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 +2 -0
- package/dist/components/inputs/token/token.styles.js.map +1 -1
- package/dist/components/layout/card/card.styles.d.ts.map +1 -1
- package/dist/components/layout/card/card.styles.js +12 -0
- package/dist/components/layout/card/card.styles.js.map +1 -1
- package/dist/components/layout/page-footer/page-footer.styles.d.ts.map +1 -1
- package/dist/components/layout/page-footer/page-footer.styles.js +2 -0
- package/dist/components/layout/page-footer/page-footer.styles.js.map +1 -1
- package/dist/components/layout/window/window.styles.d.ts.map +1 -1
- package/dist/components/layout/window/window.styles.js +2 -0
- package/dist/components/layout/window/window.styles.js.map +1 -1
- package/dist/components/lists-and-menus/cells/cell/cell.styles.d.ts.map +1 -1
- package/dist/components/lists-and-menus/cells/cell/cell.styles.js +2 -0
- package/dist/components/lists-and-menus/cells/cell/cell.styles.js.map +1 -1
- package/dist/components/lists-and-menus/cells/description-cell/description-cell.styles.d.ts.map +1 -1
- package/dist/components/lists-and-menus/cells/description-cell/description-cell.styles.js +18 -12
- package/dist/components/lists-and-menus/cells/description-cell/description-cell.styles.js.map +1 -1
- package/dist/components/lists-and-menus/cells/text-cell/text-cell.styles.d.ts.map +1 -1
- package/dist/components/lists-and-menus/cells/text-cell/text-cell.styles.js +2 -0
- package/dist/components/lists-and-menus/cells/text-cell/text-cell.styles.js.map +1 -1
- package/dist/components/lists-and-menus/cells/title-cell/title-cell.styles.d.ts.map +1 -1
- package/dist/components/lists-and-menus/cells/title-cell/title-cell.styles.js +2 -0
- package/dist/components/lists-and-menus/cells/title-cell/title-cell.styles.js.map +1 -1
- package/dist/components/lists-and-menus/menu/menu.styles.d.ts.map +1 -1
- package/dist/components/lists-and-menus/menu/menu.styles.js +4 -0
- package/dist/components/lists-and-menus/menu/menu.styles.js.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.styles.d.ts.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.styles.js +3 -0
- package/dist/components/navigation/breadcrumbs/breadcrumbs.styles.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 +3 -0
- package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.js.map +1 -1
- package/dist/components/navigation/link/link.styles.d.ts.map +1 -1
- package/dist/components/navigation/link/link.styles.js +2 -0
- package/dist/components/navigation/link/link.styles.js.map +1 -1
- package/dist/components/navigation/menu-bar/menu-bar.styles.d.ts.map +1 -1
- package/dist/components/navigation/menu-bar/menu-bar.styles.js +2 -0
- package/dist/components/navigation/menu-bar/menu-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 +2 -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 +2 -0
- package/dist/components/navigation/pagination/pagination.styles.js.map +1 -1
- package/dist/components/navigation/skip-link/skip-link.styles.d.ts.map +1 -1
- package/dist/components/navigation/skip-link/skip-link.styles.js +3 -1
- package/dist/components/navigation/skip-link/skip-link.styles.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 +4 -1
- package/dist/components/navigation/tab-bar/tab-bar.styles.js.map +1 -1
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.d.ts.map +1 -1
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.js +3 -1
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.js.map +1 -1
- package/dist/components/navigation/top-title-bar/top-title-bar.styles.d.ts.map +1 -1
- package/dist/components/navigation/top-title-bar/top-title-bar.styles.js +4 -2
- package/dist/components/navigation/top-title-bar/top-title-bar.styles.js.map +1 -1
- package/dist/components/{prism-python-C9GXiQLy.js → prism-python-DupfA39T.js} +1 -1
- package/dist/components/{prism-rust-De_U8Otq.js → prism-rust-yPrYE0Hd.js} +1 -1
- package/dist/components/{prism-typescript-BJbUDHsa.js → prism-typescript-C1NT9IBX.js} +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 +4 -2
- package/dist/components/status-and-feedback/badge/badge.styles.js.map +1 -1
- package/dist/components/status-and-feedback/banner/banner.d.ts +3 -3
- package/dist/components/status-and-feedback/banner/banner.d.ts.map +1 -1
- package/dist/components/status-and-feedback/banner/banner.js +3 -2
- package/dist/components/status-and-feedback/banner/banner.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 +12 -10
- 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 +2 -4
- package/dist/components/status-and-feedback/banner/banner.template.js.map +1 -1
- package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.js +2 -0
- package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.js.map +1 -1
- package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.js +2 -0
- package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.js.map +1 -1
- package/dist/components/status-and-feedback/progress/progress.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/progress/progress.styles.js +2 -0
- package/dist/components/status-and-feedback/progress/progress.styles.js.map +1 -1
- package/dist/components/status-and-feedback/progress-bar/progress-bar.d.ts +9 -6
- 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 +22 -19
- 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 +77 -75
- package/dist/components/status-and-feedback/progress-bar/progress-bar.styles.js.map +1 -1
- package/dist/components/status-and-feedback/progress-bar/progress-bar.template.js +8 -8
- package/dist/components/status-and-feedback/progress-bar/progress-bar.template.js.map +1 -1
- package/dist/components/status-and-feedback/progress-circle/progress-circle.d.ts +25 -8
- 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 +42 -19
- 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 +88 -72
- 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.d.ts +6 -0
- package/dist/components/status-and-feedback/progress-circle/progress-circle.template.d.ts.map +1 -1
- package/dist/components/status-and-feedback/progress-circle/progress-circle.template.js +60 -19
- package/dist/components/status-and-feedback/progress-circle/progress-circle.template.js.map +1 -1
- package/dist/css/settings.css +207 -96
- package/package.json +1 -1
|
@@ -8,6 +8,15 @@ import { styleMap } from "lit/directives/style-map.js";
|
|
|
8
8
|
import { classMap } from "lit/directives/class-map.js";
|
|
9
9
|
import { ifDefined } from "lit/directives/if-defined.js";
|
|
10
10
|
import { unsafeStatic, html as html$1 } from "lit/static-html.js";
|
|
11
|
+
const slottedReset = css`
|
|
12
|
+
all: revert !important;
|
|
13
|
+
`;
|
|
14
|
+
const inheritedTextReset = css`
|
|
15
|
+
text-align: start !important;
|
|
16
|
+
letter-spacing: normal !important;
|
|
17
|
+
word-spacing: normal !important;
|
|
18
|
+
text-transform: none !important;
|
|
19
|
+
`;
|
|
11
20
|
const buttonStyles = css`
|
|
12
21
|
|
|
13
22
|
|
|
@@ -31,6 +40,7 @@ const buttonStyles = css`
|
|
|
31
40
|
--_disclosure-icon-margin-left: -2px;
|
|
32
41
|
--_disclosure-icon-size: var(--primitives-space-20);
|
|
33
42
|
|
|
43
|
+
${inheritedTextReset}
|
|
34
44
|
display: inline-block;
|
|
35
45
|
max-width: 100%;
|
|
36
46
|
user-select: none;
|
|
@@ -653,11 +663,11 @@ const aliases = {
|
|
|
653
663
|
// starburst-filled
|
|
654
664
|
"new": "starburst-filled",
|
|
655
665
|
"promotion": "starburst-filled",
|
|
656
|
-
//
|
|
657
|
-
"logout": "
|
|
658
|
-
"exit": "
|
|
659
|
-
//
|
|
660
|
-
"login": "
|
|
666
|
+
// arrow-right-out-bucket
|
|
667
|
+
"logout": "arrow-right-out-bucket",
|
|
668
|
+
"exit": "arrow-right-out-bucket",
|
|
669
|
+
// arrow-right-in-bucket
|
|
670
|
+
"login": "arrow-right-in-bucket",
|
|
661
671
|
// square-arrow-right-top
|
|
662
672
|
"external-link": "square-arrow-right-top",
|
|
663
673
|
// square-arrow-up
|
|
@@ -693,6 +703,8 @@ const iconRegistry = /* @__PURE__ */ new Map([
|
|
|
693
703
|
["arrow-down-in-bucket", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n <path fill="currentColor" d="M13 3v10.586l4.293-4.293 1.414 1.414L12 17.414l-6.707-6.707 1.414-1.414L11 13.586V3zM5 16v3a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3h2v3a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-3z"/>\n</svg>'],
|
|
694
704
|
["arrow-left", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n <path fill="currentColor" d="m12 4-8 8 8 8 1.41-1.42L7.828 13H21v-2H7.828l5.582-5.58z"/>\n</svg>'],
|
|
695
705
|
["arrow-right", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n <path fill="currentColor" d="m12 4 8 8-8 8-1.41-1.42L16.172 13H3v-2h13.172L10.59 5.42z"/>\n</svg>'],
|
|
706
|
+
["arrow-right-in-bucket", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n <path fill="currentColor" d="M18 3a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3h-6v-2h6a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-6V3zm-3 9-5 5-1.41-1.42L11.17 13H3v-2h8.17L8.6 8.42 10 7z"/>\n</svg>'],
|
|
707
|
+
["arrow-right-out-bucket", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n <path fill="currentColor" d="M12 5H6a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h6v2H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h6zm9 7-5 5-1.41-1.42L17.17 13H9v-2h8.17L14.6 8.42 16 7z"/>\n</svg>'],
|
|
696
708
|
["arrow-u-turn-backward", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n <path fill="currentColor" d="M9.4 4.4 5.82 8H16a6 6 0 0 1 0 12h-4v-2h4a4 4 0 0 0 0-8H5.82l3.58 3.6L8 15 2 9l6-6z"/>\n</svg>'],
|
|
697
709
|
["arrow-u-turn-forward", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n <path fill="currentColor" d="M14.6 4.4 18.18 8H8a6 6 0 0 0 0 12h4v-2H8a4 4 0 0 1 0-8h10.18l-3.58 3.6L16 15l6-6-6-6z"/>\n</svg>'],
|
|
698
710
|
["arrow-up", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n <path fill="currentColor" d="m4 12 8-8 8 8-1.42 1.41L13 7.828V21h-2V7.828L5.42 13.41z"/>\n</svg>'],
|
|
@@ -828,8 +840,6 @@ const iconRegistry = /* @__PURE__ */ new Map([
|
|
|
828
840
|
["ship-wheel", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n <path fill="currentColor" d="M12 2a1 1 0 0 1 1 1v1.063a7.96 7.96 0 0 1 3.903 1.619l.754-.753a1 1 0 0 1 1.414 1.414l-.754.753A7.96 7.96 0 0 1 19.936 11H21a1 1 0 1 1 0 2h-1.064a7.95 7.95 0 0 1-1.619 3.903l.754.754a1 1 0 0 1-1.414 1.414l-.754-.754A7.95 7.95 0 0 1 13 19.936V21a1 1 0 1 1-2 0v-1.064a7.96 7.96 0 0 1-3.904-1.619l-.753.754a1 1 0 0 1-1.414-1.414l.753-.754A7.96 7.96 0 0 1 4.064 13H3a1 1 0 1 1 0-2h1.064a7.96 7.96 0 0 1 1.618-3.904l-.753-.753a1 1 0 0 1 1.414-1.414l.753.753A7.96 7.96 0 0 1 11 4.063V3a1 1 0 0 1 1-1M8.524 16.889A6 6 0 0 0 11 17.915v-3.09a3 3 0 0 1-.291-.12zm4.766-2.185q-.14.068-.29.121v3.09a6 6 0 0 0 2.475-1.026zM6.085 13c.153.911.51 1.752 1.025 2.475l2.185-2.185a3 3 0 0 1-.121-.29zm8.741 0q-.054.15-.122.29l2.185 2.185A6 6 0 0 0 17.915 13zM12 10.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M7.11 8.524A6 6 0 0 0 6.085 11h3.089q.053-.15.12-.291zm7.594 2.185q.069.142.122.291h3.089a6 6 0 0 0-1.026-2.476zM11 6.084A6 6 0 0 0 8.524 7.11l2.185 2.185A3 3 0 0 1 11 9.174zm2 3.09q.15.053.29.12l2.185-2.184A6 6 0 0 0 13 6.084z"/>\n</svg>'],
|
|
829
841
|
["slash-circle", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n <path fill="currentColor" d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20M5.68 7.1A8 8 0 0 0 16.9 18.32zM12 4c-1.85 0-3.55.63-4.9 1.68L18.32 16.9A8 8 0 0 0 12 4"/>\n</svg>'],
|
|
830
842
|
["sparkles", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n <path fill="currentColor" d="M15.4 10.16c.1-.53.86-.53.97 0l.8 3.67a1 1 0 0 0 .76.77l3.68.8c.52.1.52.86 0 .97l-3.68.79a1 1 0 0 0-.77.77l-.79 3.67c-.11.53-.86.53-.97 0l-.8-3.67a1 1 0 0 0-.76-.77l-3.68-.8c-.64-.22-.64-.98 0-.97l3.68-.79a1 1 0 0 0 .77-.77zM6.1 4.82c.1-.42.7-.42.79 0l.56 2.61c.06.31.3.55.61.62l2.61.56c.42.09.42.69 0 .78l-2.61.56a.8.8 0 0 0-.61.62l-.56 2.6c-.1.43-.7.43-.79 0l-.56-2.6a.8.8 0 0 0-.61-.62L2.32 9.4c-.43-.09-.43-.7 0-.78l2.6-.56a.8.8 0 0 0 .62-.62zM14.2 2.24c.07-.32.52-.32.59 0l.33 1.54a.6.6 0 0 0 .46.46l1.55.34c.31.06.31.52 0 .58l-1.55.34a.6.6 0 0 0-.46.46l-.33 1.54c-.07.32-.52.32-.59 0l-.33-1.54a.6.6 0 0 0-.46-.46l-1.55-.34c-.32-.06-.32-.52 0-.58l1.55-.34a.6.6 0 0 0 .46-.46z"/>\n</svg>'],
|
|
831
|
-
["square-arrow-right", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n <path fill="currentColor" d="M13 9V7a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-2h2v2a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h7a3 3 0 0 1 3 3v2z"/>\n <path fill="currentColor" d="M18.41 16.59 17 15.17 19.17 13H8v-2h11.17L17 8.83l1.41-1.42L23 12z"/>\n</svg>'],
|
|
832
|
-
["square-arrow-right-inward", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n <path fill="currentColor" d="M18 4a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3v-2h2v2a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v2H6V7a3 3 0 0 1 3-3z"/>\n <path fill="currentColor" d="m17 12-4.59 4.59L11 15.17 13.17 13H2v-2h11.17L11 8.83l1.41-1.42z"/>\n</svg>'],
|
|
833
843
|
["square-arrow-right-top", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n <path fill="currentColor" d="M11.772 8H5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-6.765l2-2V19c0 1.66-1.34 3-3 3H5c-1.66 0-3-1.34-3-3V9a3 3 0 0 1 3-3h8.772z"/>\n <path fill="currentColor" d="M22 11h-2V5.407l-9.296 9.296L9.3 13.3 18.6 4H13V2h9z"/>\n</svg>'],
|
|
834
844
|
["square-arrow-up", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n <path fill="currentColor" d="M9 11H7a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1h-2V9h2a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3H7c-1.66 0-3-1.34-3-3v-7a3 3 0 0 1 3-3h2z"/>\n <path fill="currentColor" d="M16.59 5.59 15.17 7 13 4.828V16h-2V4.828L8.83 7 7.41 5.59 12 1z"/>\n</svg>'],
|
|
835
845
|
["square-on-square", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n <path fill="currentColor" d="M18 5v1h1c1.66 0 3 1.34 3 3v10c0 1.658-1.308 3-3 3H9c-1.66 0-3-1.34-3-3v-1H5c-1.66 0-3-1.34-3-3V5a3 3 0 0 1 3-3h10c1.66 0 3 1.34 3 3M9 8a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1zM5 4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h1V9a3 3 0 0 1 3-3h7V5a1 1 0 0 0-1-1z"/>\n</svg>'],
|
|
@@ -1070,7 +1080,9 @@ const iconButtonStyles = css`
|
|
|
1070
1080
|
--_disclosure-icon-margin-right: calc(var(--primitives-space-2) * -1);
|
|
1071
1081
|
--_disclosure-icon-size: var(--primitives-space-20);
|
|
1072
1082
|
--_text-display: none;
|
|
1083
|
+
--_text-font: var(--primitives-font-body-xxs-medium-flat);
|
|
1073
1084
|
|
|
1085
|
+
${inheritedTextReset}
|
|
1074
1086
|
display: inline-block;
|
|
1075
1087
|
max-width: 100%;
|
|
1076
1088
|
user-select: none;
|
|
@@ -1322,7 +1334,7 @@ const iconButtonStyles = css`
|
|
|
1322
1334
|
display: var(--_text-display);
|
|
1323
1335
|
text-align: center;
|
|
1324
1336
|
color: inherit;
|
|
1325
|
-
font: var(--
|
|
1337
|
+
font: var(--_text-font);
|
|
1326
1338
|
white-space: nowrap;
|
|
1327
1339
|
}
|
|
1328
1340
|
`;
|
|
@@ -1341,6 +1353,7 @@ const tooltipStyles = css`
|
|
|
1341
1353
|
--_offset: 4; /* px, unitless — read by JS */
|
|
1342
1354
|
--_shift-padding: 8; /* px, unitless — read by JS */
|
|
1343
1355
|
|
|
1356
|
+
${inheritedTextReset}
|
|
1344
1357
|
display: contents;
|
|
1345
1358
|
}
|
|
1346
1359
|
|
|
@@ -1943,6 +1956,7 @@ const splitButtonStyles = css`
|
|
|
1943
1956
|
--_divider-color: var(--semantics-buttons-neutral-tinted-divider-color);
|
|
1944
1957
|
--_divider-length: var(--semantics-buttons-md-divider-length);
|
|
1945
1958
|
|
|
1959
|
+
${inheritedTextReset}
|
|
1946
1960
|
display: inline-flex;
|
|
1947
1961
|
isolation: isolate;
|
|
1948
1962
|
-webkit-tap-highlight-color: transparent;
|
|
@@ -2060,6 +2074,7 @@ const menuStyles = css`
|
|
|
2060
2074
|
--_item-size: var(--semantics-controls-sm-min-size);
|
|
2061
2075
|
}
|
|
2062
2076
|
|
|
2077
|
+
${inheritedTextReset}
|
|
2063
2078
|
display: block;
|
|
2064
2079
|
position: absolute;
|
|
2065
2080
|
margin: 0;
|
|
@@ -2187,6 +2202,7 @@ const menuItemStyles = css`
|
|
|
2187
2202
|
/* # Host */
|
|
2188
2203
|
|
|
2189
2204
|
:host {
|
|
2205
|
+
${inheritedTextReset}
|
|
2190
2206
|
display: block;
|
|
2191
2207
|
-webkit-tap-highlight-color: transparent;
|
|
2192
2208
|
}
|
|
@@ -2320,6 +2336,7 @@ const menuGroupStyles = css`
|
|
|
2320
2336
|
* rather than to whatever sits above. */
|
|
2321
2337
|
|
|
2322
2338
|
:host {
|
|
2339
|
+
${inheritedTextReset}
|
|
2323
2340
|
display: block;
|
|
2324
2341
|
margin-top: var(--primitives-space-4);
|
|
2325
2342
|
margin-bottom: var(--primitives-space-4);
|
|
@@ -2777,6 +2794,7 @@ const textCellStyles = css`
|
|
|
2777
2794
|
--_text-color: var(--context-cell-content-color, var(--semantics-content-color));
|
|
2778
2795
|
--_text-font: var(--primitives-font-body-md-regular-tight);
|
|
2779
2796
|
|
|
2797
|
+
${inheritedTextReset}
|
|
2780
2798
|
display: flex;
|
|
2781
2799
|
width: var(--_width);
|
|
2782
2800
|
min-width: var(--_min-width);
|
|
@@ -3135,6 +3153,7 @@ const inlineDialogStyles = css`
|
|
|
3135
3153
|
--_text-font: var(--primitives-font-body-md-bold-tight);
|
|
3136
3154
|
--_supporting-text-font: var(--primitives-font-body-sm-regular-tight);
|
|
3137
3155
|
|
|
3156
|
+
${inheritedTextReset}
|
|
3138
3157
|
display: flex;
|
|
3139
3158
|
flex-grow: 1;
|
|
3140
3159
|
align-items: center;
|
|
@@ -5131,9 +5150,10 @@ const toolbarStyles = css`
|
|
|
5131
5150
|
--_item-width: auto;
|
|
5132
5151
|
--_title-group-min-width: 200px;
|
|
5133
5152
|
--_title-group-height: var(--semantics-controls-md-min-size);
|
|
5134
|
-
--_title-font: var(--primitives-font-body-lg-
|
|
5153
|
+
--_title-font: var(--primitives-font-body-lg-medium-flat);
|
|
5135
5154
|
--_subtitle-font: var(--primitives-font-body-xs-regular-flat);
|
|
5136
5155
|
|
|
5156
|
+
${inheritedTextReset}
|
|
5137
5157
|
box-sizing: border-box;
|
|
5138
5158
|
display: block;
|
|
5139
5159
|
}
|
|
@@ -5141,7 +5161,7 @@ const toolbarStyles = css`
|
|
|
5141
5161
|
:host([size="sm"]) {
|
|
5142
5162
|
--_gap: var(--components-toolbar-sm-gap);
|
|
5143
5163
|
--_title-group-height: var(--semantics-controls-sm-min-size);
|
|
5144
|
-
--_title-font: var(--primitives-font-body-sm-
|
|
5164
|
+
--_title-font: var(--primitives-font-body-sm-medium-flat);
|
|
5145
5165
|
--_subtitle-font: var(--primitives-font-body-xxs-regular-flat);
|
|
5146
5166
|
}
|
|
5147
5167
|
|
|
@@ -5940,6 +5960,7 @@ const imageStyles = css`
|
|
|
5940
5960
|
--_object-position: center;
|
|
5941
5961
|
--_max-width: 100%;
|
|
5942
5962
|
|
|
5963
|
+
${inheritedTextReset}
|
|
5943
5964
|
box-sizing: border-box;
|
|
5944
5965
|
display: block;
|
|
5945
5966
|
max-width: var(--_max-width);
|
|
@@ -6013,8 +6034,7 @@ const imageStyles = css`
|
|
|
6013
6034
|
object-fit / object-position aren't inheritable into <picture>'s child
|
|
6014
6035
|
<img>, so we don't bother targeting <picture> here. */
|
|
6015
6036
|
|
|
6016
|
-
.image__img
|
|
6017
|
-
::slotted(img) {
|
|
6037
|
+
.image__img {
|
|
6018
6038
|
display: block;
|
|
6019
6039
|
width: 100%;
|
|
6020
6040
|
height: 100%;
|
|
@@ -6023,15 +6043,26 @@ const imageStyles = css`
|
|
|
6023
6043
|
object-position: var(--_object-position);
|
|
6024
6044
|
}
|
|
6025
6045
|
|
|
6046
|
+
::slotted(img) {
|
|
6047
|
+
${slottedReset}
|
|
6048
|
+
display: block !important;
|
|
6049
|
+
width: 100% !important;
|
|
6050
|
+
height: 100% !important;
|
|
6051
|
+
max-width: 100% !important;
|
|
6052
|
+
object-fit: var(--_object-fit) !important;
|
|
6053
|
+
object-position: var(--_object-position) !important;
|
|
6054
|
+
}
|
|
6055
|
+
|
|
6026
6056
|
/* <picture> is a wrapper that picks the right <source>; layout properties
|
|
6027
6057
|
like width/height DO apply to it directly even though object-fit doesn't.
|
|
6028
6058
|
Size it so the slotted picture fills the media wrapper, then let the
|
|
6029
6059
|
consumer style the inner <img> for fit/position. */
|
|
6030
6060
|
::slotted(picture) {
|
|
6031
|
-
|
|
6032
|
-
|
|
6033
|
-
|
|
6034
|
-
|
|
6061
|
+
${slottedReset}
|
|
6062
|
+
display: block !important;
|
|
6063
|
+
width: 100% !important;
|
|
6064
|
+
height: 100% !important;
|
|
6065
|
+
max-width: 100% !important;
|
|
6035
6066
|
}
|
|
6036
6067
|
|
|
6037
6068
|
|
|
@@ -6707,6 +6738,7 @@ const titleStyles = css`
|
|
|
6707
6738
|
--_font: var(--primitives-font-display-3-lg);
|
|
6708
6739
|
}
|
|
6709
6740
|
|
|
6741
|
+
${inheritedTextReset}
|
|
6710
6742
|
display: flex;
|
|
6711
6743
|
}
|
|
6712
6744
|
|
|
@@ -6868,25 +6900,31 @@ const titleStyles = css`
|
|
|
6868
6900
|
}
|
|
6869
6901
|
|
|
6870
6902
|
::slotted([slot="overline"]) {
|
|
6871
|
-
|
|
6872
|
-
|
|
6873
|
-
|
|
6874
|
-
|
|
6903
|
+
${slottedReset}
|
|
6904
|
+
${inheritedTextReset}
|
|
6905
|
+
margin: 0 !important;
|
|
6906
|
+
color: var(--semantics-content-secondary-color) !important;
|
|
6907
|
+
font: var(--primitives-font-body-sm-regular-tight) !important;
|
|
6908
|
+
overflow-wrap: anywhere !important;
|
|
6875
6909
|
}
|
|
6876
6910
|
|
|
6877
6911
|
::slotted(:not([slot])) {
|
|
6878
|
-
|
|
6879
|
-
|
|
6880
|
-
|
|
6881
|
-
|
|
6882
|
-
|
|
6912
|
+
${slottedReset}
|
|
6913
|
+
${inheritedTextReset}
|
|
6914
|
+
margin: 0 !important;
|
|
6915
|
+
color: var(--semantics-content-color) !important;
|
|
6916
|
+
font: var(--_font) !important;
|
|
6917
|
+
overflow-wrap: anywhere !important;
|
|
6918
|
+
text-wrap: pretty !important;
|
|
6883
6919
|
}
|
|
6884
6920
|
|
|
6885
6921
|
::slotted([slot="subtitle"]) {
|
|
6886
|
-
|
|
6887
|
-
|
|
6888
|
-
|
|
6889
|
-
|
|
6922
|
+
${slottedReset}
|
|
6923
|
+
${inheritedTextReset}
|
|
6924
|
+
margin: 0 !important;
|
|
6925
|
+
color: var(--semantics-content-secondary-color) !important;
|
|
6926
|
+
font: var(--primitives-font-body-sm-regular-tight) !important;
|
|
6927
|
+
overflow-wrap: anywhere !important;
|
|
6890
6928
|
}
|
|
6891
6929
|
|
|
6892
6930
|
.title__actions {
|
|
@@ -6959,6 +6997,7 @@ const blockquoteStyles = css`
|
|
|
6959
6997
|
--_attribution-font: var(--semantics-blockquotes-sm-attribution-font);
|
|
6960
6998
|
}
|
|
6961
6999
|
|
|
7000
|
+
${inheritedTextReset}
|
|
6962
7001
|
display: block;
|
|
6963
7002
|
max-width: var(--semantics-blockquotes-max-width);
|
|
6964
7003
|
}
|
|
@@ -7008,11 +7047,13 @@ const blockquoteStyles = css`
|
|
|
7008
7047
|
}
|
|
7009
7048
|
|
|
7010
7049
|
::slotted(p) {
|
|
7011
|
-
|
|
7050
|
+
${slottedReset}
|
|
7051
|
+
${inheritedTextReset}
|
|
7052
|
+
margin: 0 !important;
|
|
7012
7053
|
}
|
|
7013
7054
|
|
|
7014
7055
|
.blockquote__attribution::slotted(p) {
|
|
7015
|
-
display: inline;
|
|
7056
|
+
display: inline !important;
|
|
7016
7057
|
}
|
|
7017
7058
|
`;
|
|
7018
7059
|
function template$e(component) {
|
|
@@ -7080,10 +7121,11 @@ const tagStyles = css`
|
|
|
7080
7121
|
--_inline-padding: var(--primitives-space-6);
|
|
7081
7122
|
--_gap: var(--primitives-space-3);
|
|
7082
7123
|
--_content-color: var(--components-tag-neutral-content-color);
|
|
7083
|
-
--_font: var(--primitives-font-body-sm-
|
|
7124
|
+
--_font: var(--primitives-font-body-sm-medium-flat);
|
|
7084
7125
|
--_icon-size: var(--primitives-space-16);
|
|
7085
7126
|
--_icon-offset-correction: var(--primitives-space-1);
|
|
7086
7127
|
|
|
7128
|
+
${inheritedTextReset}
|
|
7087
7129
|
display: inline-flex;
|
|
7088
7130
|
vertical-align: middle;
|
|
7089
7131
|
}
|
|
@@ -7093,7 +7135,7 @@ const tagStyles = css`
|
|
|
7093
7135
|
--_min-height: var(--primitives-space-20);
|
|
7094
7136
|
--_inline-padding: var(--primitives-space-4);
|
|
7095
7137
|
--_gap: var(--primitives-space-2);
|
|
7096
|
-
--_font: var(--primitives-font-body-xs-
|
|
7138
|
+
--_font: var(--primitives-font-body-xs-medium-flat);
|
|
7097
7139
|
--_icon-size: var(--primitives-space-14);
|
|
7098
7140
|
}
|
|
7099
7141
|
|
|
@@ -7385,6 +7427,7 @@ const keyboardShortcutStyles = css`
|
|
|
7385
7427
|
--_inline-padding: var(--primitives-space-6);
|
|
7386
7428
|
--_font: var(--primitives-font-body-xs-regular-flat);
|
|
7387
7429
|
|
|
7430
|
+
${inheritedTextReset}
|
|
7388
7431
|
display: inline-flex;
|
|
7389
7432
|
vertical-align: middle;
|
|
7390
7433
|
}
|
|
@@ -9025,6 +9068,7 @@ const codeViewerStyles = css`
|
|
|
9025
9068
|
--_actions-area-size: calc(var(--semantics-controls-md-min-size) + var(--_actions-area-padding) * 2);
|
|
9026
9069
|
--_actions-z-index: 1;
|
|
9027
9070
|
|
|
9071
|
+
${inheritedTextReset}
|
|
9028
9072
|
display: flex;
|
|
9029
9073
|
position: relative;
|
|
9030
9074
|
}
|
|
@@ -9295,17 +9339,17 @@ const GRAMMAR_LOADERS = {
|
|
|
9295
9339
|
yaml: () => import("./prism-yaml-DO0f9pf6.js"),
|
|
9296
9340
|
json: () => import("./prism-json-DIMpow89.js"),
|
|
9297
9341
|
javascript: () => import("./prism-javascript-DeC_17Pw.js"),
|
|
9298
|
-
typescript: () => import("./prism-typescript-
|
|
9342
|
+
typescript: () => import("./prism-typescript-C1NT9IBX.js").then((n) => n.p),
|
|
9299
9343
|
css: () => import("./prism-css-B93tXdOU.js"),
|
|
9300
9344
|
html: () => import("./prism-markup-DfJYPYHA.js"),
|
|
9301
9345
|
xml: () => import("./prism-markup-DfJYPYHA.js"),
|
|
9302
9346
|
bash: () => import("./prism-bash-vbqaw3JR.js"),
|
|
9303
9347
|
markdown: () => import("./prism-markdown-D-uFBkiz.js"),
|
|
9304
|
-
rust: () => import("./prism-rust-
|
|
9348
|
+
rust: () => import("./prism-rust-yPrYE0Hd.js").then((n) => n.p),
|
|
9305
9349
|
gherkin: () => import("./prism-gherkin-CMPYyXOQ.js"),
|
|
9306
9350
|
toml: () => import("./prism-toml-Ubdq-a5x.js"),
|
|
9307
9351
|
sql: () => import("./prism-sql-BGqCBMyJ.js"),
|
|
9308
|
-
python: () => import("./prism-python-
|
|
9352
|
+
python: () => import("./prism-python-DupfA39T.js").then((n) => n.p)
|
|
9309
9353
|
};
|
|
9310
9354
|
const grammarLoads = /* @__PURE__ */ new Map();
|
|
9311
9355
|
function loadGrammar(language) {
|
|
@@ -9682,8 +9726,9 @@ const formFieldStyles = css`
|
|
|
9682
9726
|
/* # Host */
|
|
9683
9727
|
|
|
9684
9728
|
:host {
|
|
9685
|
-
--_gap:
|
|
9729
|
+
--_gap: var(--primitives-space-3);
|
|
9686
9730
|
|
|
9731
|
+
${inheritedTextReset}
|
|
9687
9732
|
display: block;
|
|
9688
9733
|
container-type: inline-size;
|
|
9689
9734
|
}
|
|
@@ -9718,6 +9763,10 @@ const formFieldStyles = css`
|
|
|
9718
9763
|
.form-field__header {
|
|
9719
9764
|
box-sizing: border-box;
|
|
9720
9765
|
display: flex;
|
|
9766
|
+
/* Paints above .form-field__main so a label descender stays readable where it
|
|
9767
|
+
overlaps the input focus ring — this is what lets the top-aligned --_gap stay
|
|
9768
|
+
tight. Reset to auto in the side-by-side layout below (no vertical overlap there). */
|
|
9769
|
+
z-index: 1;
|
|
9721
9770
|
flex-direction: column;
|
|
9722
9771
|
}
|
|
9723
9772
|
|
|
@@ -9726,6 +9775,7 @@ const formFieldStyles = css`
|
|
|
9726
9775
|
:host(:not([label-alignment])[form-label-alignment="left"]) .form-field__header,
|
|
9727
9776
|
:host(:not([label-alignment])[form-label-alignment="right"]) .form-field__header {
|
|
9728
9777
|
@container (min-width: ${mdMin$f}) {
|
|
9778
|
+
z-index: auto;
|
|
9729
9779
|
width: var(--semantics-forms-label-column-width);
|
|
9730
9780
|
min-height: var(--semantics-controls-md-min-size);
|
|
9731
9781
|
flex-grow: 0;
|
|
@@ -9847,6 +9897,7 @@ const formFieldHelpTextStyles = css`
|
|
|
9847
9897
|
/* # Host */
|
|
9848
9898
|
|
|
9849
9899
|
:host {
|
|
9900
|
+
${inheritedTextReset}
|
|
9850
9901
|
display: contents;
|
|
9851
9902
|
}
|
|
9852
9903
|
|
|
@@ -9863,30 +9914,32 @@ const formFieldHelpTextStyles = css`
|
|
|
9863
9914
|
/* # Links */
|
|
9864
9915
|
|
|
9865
9916
|
::slotted(a) {
|
|
9866
|
-
|
|
9867
|
-
|
|
9868
|
-
|
|
9869
|
-
|
|
9917
|
+
${slottedReset}
|
|
9918
|
+
${inheritedTextReset}
|
|
9919
|
+
border-radius: var(--primitives-corner-radius-xxs) !important;
|
|
9920
|
+
color: var(--semantics-links-color) !important;
|
|
9921
|
+
text-decoration: underline !important;
|
|
9922
|
+
text-underline-offset: var(--primitives-space-2) !important;
|
|
9870
9923
|
}
|
|
9871
9924
|
|
|
9872
9925
|
@media (hover: hover) {
|
|
9873
9926
|
::slotted(a:hover) {
|
|
9874
|
-
color: var(--semantics-links-is-hovered-color);
|
|
9927
|
+
color: var(--semantics-links-is-hovered-color) !important;
|
|
9875
9928
|
}
|
|
9876
9929
|
}
|
|
9877
9930
|
|
|
9878
9931
|
::slotted(a:active) {
|
|
9879
|
-
color: var(--semantics-links-is-active-color);
|
|
9932
|
+
color: var(--semantics-links-is-active-color) !important;
|
|
9880
9933
|
}
|
|
9881
9934
|
|
|
9882
9935
|
::slotted(a:focus-visible) {
|
|
9883
|
-
outline: var(--semantics-focus-ring-outline);
|
|
9884
|
-
outline-offset: var(--semantics-focus-ring-outline-offset);
|
|
9885
|
-
box-shadow: var(--semantics-focus-ring-box-shadow);
|
|
9936
|
+
outline: var(--semantics-focus-ring-outline) !important;
|
|
9937
|
+
outline-offset: var(--semantics-focus-ring-outline-offset) !important;
|
|
9938
|
+
box-shadow: var(--semantics-focus-ring-box-shadow) !important;
|
|
9886
9939
|
}
|
|
9887
9940
|
|
|
9888
9941
|
::slotted(a:focus:not(:focus-visible)) {
|
|
9889
|
-
outline: none;
|
|
9942
|
+
outline: none !important;
|
|
9890
9943
|
}
|
|
9891
9944
|
`;
|
|
9892
9945
|
const formFieldErrorTextStyles = css`
|
|
@@ -9895,6 +9948,7 @@ const formFieldErrorTextStyles = css`
|
|
|
9895
9948
|
/* # Host */
|
|
9896
9949
|
|
|
9897
9950
|
:host {
|
|
9951
|
+
${inheritedTextReset}
|
|
9898
9952
|
display: none;
|
|
9899
9953
|
}
|
|
9900
9954
|
|
|
@@ -9915,30 +9969,32 @@ const formFieldErrorTextStyles = css`
|
|
|
9915
9969
|
/* # Links */
|
|
9916
9970
|
|
|
9917
9971
|
::slotted(a) {
|
|
9918
|
-
|
|
9919
|
-
|
|
9920
|
-
|
|
9921
|
-
|
|
9972
|
+
${slottedReset}
|
|
9973
|
+
${inheritedTextReset}
|
|
9974
|
+
border-radius: var(--primitives-corner-radius-xxs) !important;
|
|
9975
|
+
color: var(--semantics-links-color) !important;
|
|
9976
|
+
text-decoration: underline !important;
|
|
9977
|
+
text-underline-offset: var(--primitives-space-2) !important;
|
|
9922
9978
|
}
|
|
9923
9979
|
|
|
9924
9980
|
@media (hover: hover) {
|
|
9925
9981
|
::slotted(a:hover) {
|
|
9926
|
-
color: var(--semantics-links-is-hovered-color);
|
|
9982
|
+
color: var(--semantics-links-is-hovered-color) !important;
|
|
9927
9983
|
}
|
|
9928
9984
|
}
|
|
9929
9985
|
|
|
9930
9986
|
::slotted(a:active) {
|
|
9931
|
-
color: var(--semantics-links-is-active-color);
|
|
9987
|
+
color: var(--semantics-links-is-active-color) !important;
|
|
9932
9988
|
}
|
|
9933
9989
|
|
|
9934
9990
|
::slotted(a:focus-visible) {
|
|
9935
|
-
outline: var(--semantics-focus-ring-outline);
|
|
9936
|
-
outline-offset: var(--semantics-focus-ring-outline-offset);
|
|
9937
|
-
box-shadow: var(--semantics-focus-ring-box-shadow);
|
|
9991
|
+
outline: var(--semantics-focus-ring-outline) !important;
|
|
9992
|
+
outline-offset: var(--semantics-focus-ring-outline-offset) !important;
|
|
9993
|
+
box-shadow: var(--semantics-focus-ring-box-shadow) !important;
|
|
9938
9994
|
}
|
|
9939
9995
|
|
|
9940
9996
|
::slotted(a:focus:not(:focus-visible)) {
|
|
9941
|
-
outline: none;
|
|
9997
|
+
outline: none !important;
|
|
9942
9998
|
}
|
|
9943
9999
|
`;
|
|
9944
10000
|
function renderOptional(label) {
|
|
@@ -10304,6 +10360,7 @@ const textFieldStyles = css`
|
|
|
10304
10360
|
--_text-font: var(--semantics-input-fields-md-text-font);
|
|
10305
10361
|
--_validation-icon-size: var(--semantics-input-fields-md-validation-icon-size);
|
|
10306
10362
|
|
|
10363
|
+
${inheritedTextReset}
|
|
10307
10364
|
display: block;
|
|
10308
10365
|
width: var(--_width);
|
|
10309
10366
|
max-width: 100%;
|
|
@@ -10656,6 +10713,7 @@ const multiLineTextFieldStyles = css`
|
|
|
10656
10713
|
--_icon-area-size: calc(var(--_min-size) - var(--semantics-input-fields-border-thickness) * 2);
|
|
10657
10714
|
--_validation-icon-size: var(--semantics-input-fields-md-validation-icon-size);
|
|
10658
10715
|
|
|
10716
|
+
${inheritedTextReset}
|
|
10659
10717
|
display: block;
|
|
10660
10718
|
width: var(--_width);
|
|
10661
10719
|
max-width: 100%;
|
|
@@ -11001,6 +11059,14 @@ const codeEditorStyles = css`
|
|
|
11001
11059
|
--_content-color: var(--semantics-content-color);
|
|
11002
11060
|
--_font: var(--primitives-font-monospace-sm-regular-snug);
|
|
11003
11061
|
|
|
11062
|
+
/* iOS Safari auto-zooms a focused field rendered under 16px (sm is ~14px).
|
|
11063
|
+
Bump to the 16px md size on touch to prevent it; non-touch keeps the
|
|
11064
|
+
compact size, and pinch-zoom stays available (no maximum-scale hack). */
|
|
11065
|
+
@media (pointer: coarse) {
|
|
11066
|
+
--_font: var(--primitives-font-monospace-md-regular-snug);
|
|
11067
|
+
}
|
|
11068
|
+
|
|
11069
|
+
${inheritedTextReset}
|
|
11004
11070
|
/* flex column + min-height:0 + flex:1 makes the host a good flex
|
|
11005
11071
|
citizen so a fixed-height parent grows the textarea; with no set
|
|
11006
11072
|
height it falls back to the rows attribute. */
|
|
@@ -11258,6 +11324,7 @@ const passwordFieldStyles = css`
|
|
|
11258
11324
|
--_visibility-toggle-padding: calc((var(--_min-size) - var(--semantics-input-fields-border-thickness) * 2 - var(--semantics-controls-sm-min-size)) / 2);
|
|
11259
11325
|
--_z-index-button-focus: 1;
|
|
11260
11326
|
|
|
11327
|
+
${inheritedTextReset}
|
|
11261
11328
|
display: block;
|
|
11262
11329
|
width: var(--_width);
|
|
11263
11330
|
max-width: 100%;
|
|
@@ -11667,6 +11734,7 @@ const searchFieldStyles = css`
|
|
|
11667
11734
|
--_end-gap: var(--primitives-space-6);
|
|
11668
11735
|
--_z-index-button-focus: 1;
|
|
11669
11736
|
|
|
11737
|
+
${inheritedTextReset}
|
|
11670
11738
|
display: block;
|
|
11671
11739
|
width: var(--_width);
|
|
11672
11740
|
max-width: 100%;
|
|
@@ -12015,6 +12083,7 @@ const numberFieldStyles = css`
|
|
|
12015
12083
|
--_text-font: var(--semantics-input-fields-md-text-font);
|
|
12016
12084
|
--_inline-padding: calc(var(--semantics-controls-md-inline-padding) - var(--semantics-input-fields-border-thickness));
|
|
12017
12085
|
|
|
12086
|
+
${inheritedTextReset}
|
|
12018
12087
|
display: inline-block;
|
|
12019
12088
|
-webkit-tap-highlight-color: transparent;
|
|
12020
12089
|
}
|
|
@@ -12367,6 +12436,7 @@ const dropdownStyles = css`
|
|
|
12367
12436
|
--_is-active-background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
|
|
12368
12437
|
--_is-active-content-color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
|
|
12369
12438
|
|
|
12439
|
+
${inheritedTextReset}
|
|
12370
12440
|
display: block;
|
|
12371
12441
|
width: var(--_width);
|
|
12372
12442
|
max-width: 100%;
|
|
@@ -12465,19 +12535,20 @@ const dropdownStyles = css`
|
|
|
12465
12535
|
/* # Elements */
|
|
12466
12536
|
|
|
12467
12537
|
::slotted(select) {
|
|
12468
|
-
|
|
12469
|
-
|
|
12470
|
-
|
|
12471
|
-
|
|
12472
|
-
|
|
12473
|
-
|
|
12474
|
-
|
|
12475
|
-
|
|
12476
|
-
|
|
12477
|
-
|
|
12478
|
-
|
|
12479
|
-
|
|
12480
|
-
|
|
12538
|
+
${slottedReset}
|
|
12539
|
+
box-sizing: border-box !important;
|
|
12540
|
+
position: absolute !important;
|
|
12541
|
+
inset: 0 !important;
|
|
12542
|
+
opacity: 0 !important;
|
|
12543
|
+
margin: 0 !important;
|
|
12544
|
+
outline: none !important;
|
|
12545
|
+
border: none !important;
|
|
12546
|
+
background: transparent !important;
|
|
12547
|
+
width: 100% !important;
|
|
12548
|
+
height: 100% !important;
|
|
12549
|
+
padding: 0 !important;
|
|
12550
|
+
font: var(--semantics-input-fields-native-select-font) !important;
|
|
12551
|
+
appearance: none !important;
|
|
12481
12552
|
}
|
|
12482
12553
|
|
|
12483
12554
|
.dropdown__value {
|
|
@@ -12708,6 +12779,7 @@ const comboBoxStyles = css`
|
|
|
12708
12779
|
--_z-index-button-focus: 1;
|
|
12709
12780
|
--_validation-icon-size: var(--semantics-input-fields-md-validation-icon-size);
|
|
12710
12781
|
|
|
12782
|
+
${inheritedTextReset}
|
|
12711
12783
|
display: block;
|
|
12712
12784
|
width: var(--_width);
|
|
12713
12785
|
max-width: 100%;
|
|
@@ -13785,6 +13857,7 @@ const checkboxFieldStyles = css`
|
|
|
13785
13857
|
/* # Host */
|
|
13786
13858
|
|
|
13787
13859
|
:host {
|
|
13860
|
+
${inheritedTextReset}
|
|
13788
13861
|
display: block;
|
|
13789
13862
|
}
|
|
13790
13863
|
|
|
@@ -14115,6 +14188,7 @@ const radioButtonFieldStyles = css`
|
|
|
14115
14188
|
/* # Host */
|
|
14116
14189
|
|
|
14117
14190
|
:host {
|
|
14191
|
+
${inheritedTextReset}
|
|
14118
14192
|
display: block;
|
|
14119
14193
|
}
|
|
14120
14194
|
|
|
@@ -14242,6 +14316,7 @@ const radioButtonGroupStyles = css`
|
|
|
14242
14316
|
/* # Host */
|
|
14243
14317
|
|
|
14244
14318
|
:host {
|
|
14319
|
+
${inheritedTextReset}
|
|
14245
14320
|
display: block;
|
|
14246
14321
|
}
|
|
14247
14322
|
|
|
@@ -14664,6 +14739,7 @@ const switchFieldStyles = css`
|
|
|
14664
14739
|
/* # Host */
|
|
14665
14740
|
|
|
14666
14741
|
:host {
|
|
14742
|
+
${inheritedTextReset}
|
|
14667
14743
|
display: block;
|
|
14668
14744
|
}
|
|
14669
14745
|
|
|
@@ -14799,6 +14875,7 @@ const segmentedControlStyles = css`
|
|
|
14799
14875
|
--_width: auto;
|
|
14800
14876
|
--_gap: var(--primitives-space-2);
|
|
14801
14877
|
|
|
14878
|
+
${inheritedTextReset}
|
|
14802
14879
|
display: inline-grid;
|
|
14803
14880
|
border-radius: var(--_corner-radius);
|
|
14804
14881
|
background-color: var(--semantics-buttons-neutral-tinted-background-color);
|
|
@@ -14852,9 +14929,12 @@ const segmentedControlItemStyles = css`
|
|
|
14852
14929
|
--_corner-radius: var(--semantics-controls-md-corner-radius);
|
|
14853
14930
|
--_min-size: var(--semantics-controls-md-min-size);
|
|
14854
14931
|
--_padding-inline: var(--primitives-space-12);
|
|
14932
|
+
--_gap: var(--semantics-buttons-md-gap);
|
|
14855
14933
|
--_font: var(--semantics-buttons-md-font);
|
|
14856
|
-
--_icon-size: var(--semantics-buttons-md-icon-
|
|
14934
|
+
--_icon-size: var(--semantics-buttons-md-icon-size);
|
|
14935
|
+
--_icon-only-icon-size: var(--semantics-buttons-md-icon-only-icon-size);
|
|
14857
14936
|
|
|
14937
|
+
${inheritedTextReset}
|
|
14858
14938
|
display: flex;
|
|
14859
14939
|
position: relative;
|
|
14860
14940
|
min-width: 0;
|
|
@@ -14869,8 +14949,10 @@ const segmentedControlItemStyles = css`
|
|
|
14869
14949
|
--_corner-radius: var(--semantics-controls-sm-corner-radius);
|
|
14870
14950
|
--_min-size: var(--semantics-controls-sm-min-size);
|
|
14871
14951
|
--_padding-inline: var(--primitives-space-8);
|
|
14952
|
+
--_gap: var(--semantics-buttons-sm-gap);
|
|
14872
14953
|
--_font: var(--semantics-buttons-sm-font);
|
|
14873
|
-
--_icon-size: var(--semantics-buttons-sm-icon-
|
|
14954
|
+
--_icon-size: var(--semantics-buttons-sm-icon-size);
|
|
14955
|
+
--_icon-only-icon-size: var(--semantics-buttons-sm-icon-only-icon-size);
|
|
14874
14956
|
}
|
|
14875
14957
|
|
|
14876
14958
|
|
|
@@ -14886,6 +14968,7 @@ const segmentedControlItemStyles = css`
|
|
|
14886
14968
|
min-width: var(--_min-size);
|
|
14887
14969
|
height: var(--_min-size);
|
|
14888
14970
|
padding-inline: var(--_padding-inline);
|
|
14971
|
+
gap: var(--_gap);
|
|
14889
14972
|
align-items: center;
|
|
14890
14973
|
justify-content: center;
|
|
14891
14974
|
color: var(--semantics-buttons-neutral-tinted-content-color);
|
|
@@ -14961,6 +15044,11 @@ const segmentedControlItemStyles = css`
|
|
|
14961
15044
|
justify-content: center;
|
|
14962
15045
|
}
|
|
14963
15046
|
|
|
15047
|
+
:host([variant="icon"]) .segmented-control__item-icon {
|
|
15048
|
+
width: var(--_icon-only-icon-size);
|
|
15049
|
+
height: var(--_icon-only-icon-size);
|
|
15050
|
+
}
|
|
15051
|
+
|
|
14964
15052
|
:host([variant="text"]) .segmented-control__item-icon {
|
|
14965
15053
|
display: none;
|
|
14966
15054
|
}
|
|
@@ -14976,6 +15064,7 @@ function segmentedControlTemplate(component) {
|
|
|
14976
15064
|
}
|
|
14977
15065
|
function segmentedControlItemTemplate(component) {
|
|
14978
15066
|
const isIcon = component.variant === "icon";
|
|
15067
|
+
const showPlaceholder = isIcon || component.variant === "icon-and-text" && !component.text;
|
|
14979
15068
|
const labelText = component.text || nothing;
|
|
14980
15069
|
const label = html`
|
|
14981
15070
|
<label class="segmented-control__item">
|
|
@@ -14989,12 +15078,12 @@ function segmentedControlItemTemplate(component) {
|
|
|
14989
15078
|
@change=${component._handleChange}
|
|
14990
15079
|
>
|
|
14991
15080
|
<span class="segmented-control__item-icon"
|
|
14992
|
-
aria-hidden=${
|
|
15081
|
+
aria-hidden=${isIcon ? nothing : "true"}
|
|
14993
15082
|
>
|
|
14994
|
-
${component.icon ? html`<nldd-icon name=${component.icon}></nldd-icon>` : html`<slot name="icon">${
|
|
15083
|
+
${component.icon ? html`<nldd-icon name=${component.icon}></nldd-icon>` : html`<slot name="icon">${showPlaceholder ? html`<nldd-icon name="icon-placeholder"></nldd-icon>` : nothing}</slot>`}
|
|
14995
15084
|
</span>
|
|
14996
15085
|
<span class="segmented-control__item-text"
|
|
14997
|
-
aria-hidden=${
|
|
15086
|
+
aria-hidden=${isIcon ? "true" : nothing}
|
|
14998
15087
|
>
|
|
14999
15088
|
${component.text}
|
|
15000
15089
|
</span>
|
|
@@ -15332,6 +15421,7 @@ const toggleButtonStyles = css`
|
|
|
15332
15421
|
--_icon-size: var(--semantics-buttons-md-icon-size);
|
|
15333
15422
|
--_icon-only-icon-size: var(--semantics-buttons-md-icon-only-icon-size);
|
|
15334
15423
|
|
|
15424
|
+
${inheritedTextReset}
|
|
15335
15425
|
display: inline-block;
|
|
15336
15426
|
user-select: none;
|
|
15337
15427
|
-webkit-tap-highlight-color: transparent;
|
|
@@ -15481,10 +15571,11 @@ const toggleButtonStyles = css`
|
|
|
15481
15571
|
function toggleButtonTemplate(component) {
|
|
15482
15572
|
const showText = component.variant !== "icon" && !!component.text;
|
|
15483
15573
|
const showIcon = component.variant !== "text" && component._hasIcon;
|
|
15574
|
+
const showPlaceholder = component.variant === "icon" || component.variant === "icon-and-text" && !component.text;
|
|
15484
15575
|
const ariaLabel = component.accessibleLabel || (component.variant === "icon" && component.text ? component.text : "") || nothing;
|
|
15485
15576
|
const isIconOnlyDisplay = showIcon && !showText;
|
|
15486
15577
|
const tooltipText = isIconOnlyDisplay ? component.accessibleLabel || component.text || "" : "";
|
|
15487
|
-
const icon = component.icon ? html`<nldd-icon class="toggle-button__icon" name=${component.icon}></nldd-icon>` : html`<slot name="icon" @slotchange=${component.requestUpdate}></slot>`;
|
|
15578
|
+
const icon = component.icon ? html`<nldd-icon class="toggle-button__icon" name=${component.icon}></nldd-icon>` : html`<slot name="icon" @slotchange=${component.requestUpdate}>${showPlaceholder ? html`<nldd-icon class="toggle-button__icon" name="icon-placeholder"></nldd-icon>` : nothing}</slot>`;
|
|
15488
15579
|
const textContent = showText ? html`<span class="toggle-button__text">${component.text}</span>` : nothing;
|
|
15489
15580
|
let result;
|
|
15490
15581
|
if (component.type === "checkbox" || component.type === "radio") {
|
|
@@ -15835,6 +15926,7 @@ const tokenStyles = css`
|
|
|
15835
15926
|
/* # Host */
|
|
15836
15927
|
|
|
15837
15928
|
:host {
|
|
15929
|
+
${inheritedTextReset}
|
|
15838
15930
|
display: inline-block;
|
|
15839
15931
|
user-select: none;
|
|
15840
15932
|
-webkit-tap-highlight-color: transparent;
|
|
@@ -19013,6 +19105,8 @@ const cardStyles = css`
|
|
|
19013
19105
|
/* # Host */
|
|
19014
19106
|
|
|
19015
19107
|
:host {
|
|
19108
|
+
--_highlight-border: inset 0 0 0 var(--components-card-highlight-border-width) var(--components-card-highlight-border-color);
|
|
19109
|
+
|
|
19016
19110
|
display: flex;
|
|
19017
19111
|
flex-direction: column;
|
|
19018
19112
|
}
|
|
@@ -19026,6 +19120,7 @@ const cardStyles = css`
|
|
|
19026
19120
|
|
|
19027
19121
|
.card {
|
|
19028
19122
|
display: flex;
|
|
19123
|
+
position: relative;
|
|
19029
19124
|
border-radius: var(--components-card-corner-radius);
|
|
19030
19125
|
box-shadow: var(--components-card-box-shadow);
|
|
19031
19126
|
background-color: var(--components-card-background-color);
|
|
@@ -19034,6 +19129,15 @@ const cardStyles = css`
|
|
|
19034
19129
|
flex-grow: 1;
|
|
19035
19130
|
}
|
|
19036
19131
|
|
|
19132
|
+
.card::after {
|
|
19133
|
+
content: '';
|
|
19134
|
+
position: absolute;
|
|
19135
|
+
inset: 0;
|
|
19136
|
+
border-radius: inherit;
|
|
19137
|
+
box-shadow: var(--_highlight-border);
|
|
19138
|
+
pointer-events: none;
|
|
19139
|
+
}
|
|
19140
|
+
|
|
19037
19141
|
|
|
19038
19142
|
/* # Elements */
|
|
19039
19143
|
|
|
@@ -21126,6 +21230,7 @@ const windowStyles = css`
|
|
|
21126
21230
|
/* # Host */
|
|
21127
21231
|
|
|
21128
21232
|
:host {
|
|
21233
|
+
${inheritedTextReset}
|
|
21129
21234
|
display: block;
|
|
21130
21235
|
}
|
|
21131
21236
|
|
|
@@ -21707,6 +21812,7 @@ const pageFooterLegalBarStyles = css`
|
|
|
21707
21812
|
`;
|
|
21708
21813
|
const pageFooterLegalBarItemStyles = css`
|
|
21709
21814
|
:host {
|
|
21815
|
+
${inheritedTextReset}
|
|
21710
21816
|
display: inline-flex;
|
|
21711
21817
|
}
|
|
21712
21818
|
|
|
@@ -22984,6 +23090,7 @@ const cellStyles = css`
|
|
|
22984
23090
|
--_max-width: none;
|
|
22985
23091
|
--_min-height: 0;
|
|
22986
23092
|
|
|
23093
|
+
${inheritedTextReset}
|
|
22987
23094
|
display: flex;
|
|
22988
23095
|
width: var(--_width);
|
|
22989
23096
|
min-width: var(--_min-width);
|
|
@@ -23156,6 +23263,7 @@ const titleCellStyles = css`
|
|
|
23156
23263
|
--_title-color: var(--context-cell-content-color, var(--semantics-content-color));
|
|
23157
23264
|
--_title-font: var(--primitives-font-display-5-sm);
|
|
23158
23265
|
|
|
23266
|
+
${inheritedTextReset}
|
|
23159
23267
|
display: flex;
|
|
23160
23268
|
width: var(--_width);
|
|
23161
23269
|
min-width: var(--_min-width);
|
|
@@ -23516,6 +23624,7 @@ const descriptionCellStyles = css`
|
|
|
23516
23624
|
--_max-width: none;
|
|
23517
23625
|
--_min-height: 0;
|
|
23518
23626
|
|
|
23627
|
+
${inheritedTextReset}
|
|
23519
23628
|
display: flex;
|
|
23520
23629
|
width: var(--_width);
|
|
23521
23630
|
min-width: var(--_min-width);
|
|
@@ -23578,30 +23687,34 @@ const descriptionCellStyles = css`
|
|
|
23578
23687
|
/* # Elements */
|
|
23579
23688
|
|
|
23580
23689
|
::slotted([slot="title"]) {
|
|
23581
|
-
|
|
23582
|
-
|
|
23583
|
-
|
|
23584
|
-
|
|
23585
|
-
|
|
23690
|
+
${slottedReset}
|
|
23691
|
+
${inheritedTextReset}
|
|
23692
|
+
margin: 0 !important;
|
|
23693
|
+
min-width: 0 !important;
|
|
23694
|
+
align-self: stretch !important;
|
|
23695
|
+
color: var(--context-cell-content-color, var(--semantics-content-secondary-color)) !important;
|
|
23696
|
+
font: var(--primitives-font-body-sm-regular-flat) !important;
|
|
23586
23697
|
}
|
|
23587
23698
|
|
|
23588
23699
|
@media (forced-colors: active) {
|
|
23589
23700
|
::slotted([slot="title"]) {
|
|
23590
|
-
forced-color-adjust: none;
|
|
23701
|
+
forced-color-adjust: none !important;
|
|
23591
23702
|
}
|
|
23592
23703
|
}
|
|
23593
23704
|
|
|
23594
23705
|
::slotted([slot="description"]) {
|
|
23595
|
-
|
|
23596
|
-
|
|
23597
|
-
|
|
23598
|
-
|
|
23599
|
-
|
|
23706
|
+
${slottedReset}
|
|
23707
|
+
${inheritedTextReset}
|
|
23708
|
+
margin: 0 !important;
|
|
23709
|
+
min-width: 0 !important;
|
|
23710
|
+
align-self: stretch !important;
|
|
23711
|
+
color: var(--context-cell-content-color, var(--semantics-content-color)) !important;
|
|
23712
|
+
font: var(--primitives-font-body-md-regular-tight) !important;
|
|
23600
23713
|
}
|
|
23601
23714
|
|
|
23602
23715
|
@media (forced-colors: active) {
|
|
23603
23716
|
::slotted([slot="description"]) {
|
|
23604
|
-
forced-color-adjust: none;
|
|
23717
|
+
forced-color-adjust: none !important;
|
|
23605
23718
|
}
|
|
23606
23719
|
}
|
|
23607
23720
|
`;
|
|
@@ -23969,6 +24082,7 @@ NLDDTimelineTrackCell = __decorateClass$h([
|
|
|
23969
24082
|
const smMax$1 = unsafeCSS(breakpoints.smMax);
|
|
23970
24083
|
const breadcrumbsStyles = css`
|
|
23971
24084
|
:host {
|
|
24085
|
+
${inheritedTextReset}
|
|
23972
24086
|
container-type: inline-size;
|
|
23973
24087
|
display: block;
|
|
23974
24088
|
}
|
|
@@ -24037,6 +24151,7 @@ const breadcrumbsItemStyles = css`
|
|
|
24037
24151
|
above the visual baseline). */
|
|
24038
24152
|
--_separator-vertical-offset: 0.05em;
|
|
24039
24153
|
|
|
24154
|
+
${inheritedTextReset}
|
|
24040
24155
|
display: inline-flex;
|
|
24041
24156
|
align-items: center;
|
|
24042
24157
|
}
|
|
@@ -24275,6 +24390,7 @@ const menuBarStyles = css`
|
|
|
24275
24390
|
/* # Host */
|
|
24276
24391
|
|
|
24277
24392
|
:host {
|
|
24393
|
+
${inheritedTextReset}
|
|
24278
24394
|
display: flex;
|
|
24279
24395
|
min-width: 0;
|
|
24280
24396
|
flex-grow: 1;
|
|
@@ -24386,6 +24502,7 @@ const menuBarItemStyles = css`
|
|
|
24386
24502
|
--_content-z-index: 1;
|
|
24387
24503
|
--_focus-z-index: 1;
|
|
24388
24504
|
|
|
24505
|
+
${inheritedTextReset}
|
|
24389
24506
|
display: inline-block;
|
|
24390
24507
|
position: relative;
|
|
24391
24508
|
flex-grow: 0;
|
|
@@ -25068,6 +25185,7 @@ const linkStyles = css`
|
|
|
25068
25185
|
icons baseline-aligned with explicit gap). */
|
|
25069
25186
|
|
|
25070
25187
|
:host {
|
|
25188
|
+
${inheritedTextReset}
|
|
25071
25189
|
-webkit-tap-highlight-color: transparent;
|
|
25072
25190
|
}
|
|
25073
25191
|
|
|
@@ -25306,6 +25424,7 @@ const skipLinkStyles = css`
|
|
|
25306
25424
|
--_focus-box-shadow: inset var(--semantics-focus-ring-box-shadow);
|
|
25307
25425
|
--_focus-outline-offset: -6px;
|
|
25308
25426
|
|
|
25427
|
+
${inheritedTextReset}
|
|
25309
25428
|
display: block;
|
|
25310
25429
|
position: relative;
|
|
25311
25430
|
}
|
|
@@ -25348,7 +25467,7 @@ const skipLinkStyles = css`
|
|
|
25348
25467
|
padding: var(--primitives-space-4) var(--primitives-space-16);
|
|
25349
25468
|
align-items: center;
|
|
25350
25469
|
color: var(--semantics-links-color);
|
|
25351
|
-
font: var(--primitives-font-body-md-
|
|
25470
|
+
font: var(--primitives-font-body-md-medium-flat);
|
|
25352
25471
|
text-decoration: underline;
|
|
25353
25472
|
white-space: nowrap;
|
|
25354
25473
|
appearance: none;
|
|
@@ -25445,6 +25564,7 @@ const topNavigationBarStyles = css`
|
|
|
25445
25564
|
--_logo-width: var(--primitives-space-40);
|
|
25446
25565
|
--_wordmark-content-color: light-dark(var(--primitives-color-reference-lintblauw), var(--primitives-color-neutral-1000));
|
|
25447
25566
|
|
|
25567
|
+
${inheritedTextReset}
|
|
25448
25568
|
container-type: inline-size;
|
|
25449
25569
|
display: block;
|
|
25450
25570
|
width: 100%;
|
|
@@ -25580,7 +25700,7 @@ const topNavigationBarStyles = css`
|
|
|
25580
25700
|
|
|
25581
25701
|
.top-navigation-bar__wordmark-title {
|
|
25582
25702
|
margin: 0;
|
|
25583
|
-
font: var(--primitives-font-body-sm-
|
|
25703
|
+
font: var(--primitives-font-body-sm-medium-flat);
|
|
25584
25704
|
text-wrap: pretty;
|
|
25585
25705
|
}
|
|
25586
25706
|
|
|
@@ -26214,6 +26334,7 @@ const topTitleBarStyles = css`
|
|
|
26214
26334
|
/* # Host */
|
|
26215
26335
|
|
|
26216
26336
|
:host {
|
|
26337
|
+
${inheritedTextReset}
|
|
26217
26338
|
display: block;
|
|
26218
26339
|
width: 100%;
|
|
26219
26340
|
}
|
|
@@ -26318,13 +26439,13 @@ const topTitleBarStyles = css`
|
|
|
26318
26439
|
margin: 0;
|
|
26319
26440
|
overflow: hidden;
|
|
26320
26441
|
color: var(--semantics-content-color);
|
|
26321
|
-
font: var(--primitives-font-body-lg-
|
|
26442
|
+
font: var(--primitives-font-body-lg-medium-flat);
|
|
26322
26443
|
text-overflow: ellipsis;
|
|
26323
26444
|
white-space: nowrap;
|
|
26324
26445
|
}
|
|
26325
26446
|
|
|
26326
26447
|
.top-title-bar__title:has(+ .top-title-bar__subtitle) {
|
|
26327
|
-
font: var(--primitives-font-body-md-
|
|
26448
|
+
font: var(--primitives-font-body-md-medium-flat);
|
|
26328
26449
|
}
|
|
26329
26450
|
|
|
26330
26451
|
@media (forced-colors: active) {
|
|
@@ -26546,6 +26667,7 @@ const tabBarStyles = css`
|
|
|
26546
26667
|
/* # Host */
|
|
26547
26668
|
|
|
26548
26669
|
:host {
|
|
26670
|
+
${inheritedTextReset}
|
|
26549
26671
|
display: inline-block;
|
|
26550
26672
|
position: relative;
|
|
26551
26673
|
isolation: isolate;
|
|
@@ -26603,6 +26725,7 @@ const tabBarItemStyles = css`
|
|
|
26603
26725
|
/* # Host */
|
|
26604
26726
|
|
|
26605
26727
|
:host {
|
|
26728
|
+
${inheritedTextReset}
|
|
26606
26729
|
display: inline-block;
|
|
26607
26730
|
position: relative;
|
|
26608
26731
|
-webkit-tap-highlight-color: transparent;
|
|
@@ -26733,7 +26856,7 @@ const tabBarItemStyles = css`
|
|
|
26733
26856
|
}
|
|
26734
26857
|
|
|
26735
26858
|
:host([variant="compact"]) .tab-bar__item-text {
|
|
26736
|
-
font: var(--primitives-font-body-xxs-
|
|
26859
|
+
font: var(--primitives-font-body-xxs-medium-flat);
|
|
26737
26860
|
}
|
|
26738
26861
|
|
|
26739
26862
|
:host([variant="icon"]) .tab-bar__item-text {
|
|
@@ -27043,6 +27166,7 @@ const documentTabBarStyles = css`
|
|
|
27043
27166
|
--_dismiss-button-is-selected-is-hovered-background-color: light-dark(var(--primitives-color-accent-650), var(--primitives-color-accent-600));
|
|
27044
27167
|
--_dismiss-button-is-selected-is-active-background-color: light-dark(var(--primitives-color-accent-600), var(--primitives-color-accent-550));
|
|
27045
27168
|
|
|
27169
|
+
${inheritedTextReset}
|
|
27046
27170
|
display: block;
|
|
27047
27171
|
position: relative;
|
|
27048
27172
|
isolation: isolate;
|
|
@@ -27234,6 +27358,7 @@ const documentTabBarItemStyles = css`
|
|
|
27234
27358
|
/* # Host */
|
|
27235
27359
|
|
|
27236
27360
|
:host {
|
|
27361
|
+
${inheritedTextReset}
|
|
27237
27362
|
container-type: inline-size;
|
|
27238
27363
|
display: block;
|
|
27239
27364
|
min-width: 0;
|
|
@@ -28223,6 +28348,7 @@ const paginationStyles = css`
|
|
|
28223
28348
|
/* # Host */
|
|
28224
28349
|
|
|
28225
28350
|
:host {
|
|
28351
|
+
${inheritedTextReset}
|
|
28226
28352
|
display: block;
|
|
28227
28353
|
container-type: inline-size;
|
|
28228
28354
|
isolation: isolate;
|
|
@@ -28717,6 +28843,7 @@ const modalDialogStyles = css`
|
|
|
28717
28843
|
--_animation-duration: 150ms;
|
|
28718
28844
|
--_animation-easing: ease;
|
|
28719
28845
|
|
|
28846
|
+
${inheritedTextReset}
|
|
28720
28847
|
display: contents;
|
|
28721
28848
|
}
|
|
28722
28849
|
|
|
@@ -28923,15 +29050,16 @@ const bannerStyles = css`
|
|
|
28923
29050
|
--_border-color: var(--components-banner-neutral-border-color);
|
|
28924
29051
|
--_border-width: var(--primitives-border-width-thin);
|
|
28925
29052
|
--_icon-color: var(--components-banner-neutral-icon-color);
|
|
28926
|
-
--_icon-size: var(--primitives-space-
|
|
29053
|
+
--_icon-size: var(--primitives-space-32);
|
|
28927
29054
|
--_content-color: var(--components-banner-content-color);
|
|
28928
29055
|
--_content-secondary-color: var(--components-banner-content-secondary-color);
|
|
28929
29056
|
--_text-icon-offset: calc((var(--_icon-size) - var(--primitives-font-size-100) * var(--primitives-line-height-tight)) / 2);
|
|
28930
|
-
--_column-gap: var(--primitives-space-
|
|
29057
|
+
--_column-gap: var(--primitives-space-8);
|
|
28931
29058
|
--_dismissible-padding-right: var(--primitives-space-44);
|
|
28932
29059
|
--_main-gap: var(--primitives-space-8);
|
|
28933
29060
|
--_actions-gap: var(--primitives-space-4);
|
|
28934
29061
|
|
|
29062
|
+
${inheritedTextReset}
|
|
28935
29063
|
box-sizing: border-box;
|
|
28936
29064
|
display: grid;
|
|
28937
29065
|
position: relative;
|
|
@@ -28957,6 +29085,12 @@ const bannerStyles = css`
|
|
|
28957
29085
|
display: none;
|
|
28958
29086
|
}
|
|
28959
29087
|
|
|
29088
|
+
:host([variant="accent"]) {
|
|
29089
|
+
--_background-color: var(--components-banner-accent-background-color);
|
|
29090
|
+
--_border-color: var(--components-banner-accent-border-color);
|
|
29091
|
+
--_icon-color: var(--components-banner-accent-icon-color);
|
|
29092
|
+
}
|
|
29093
|
+
|
|
28960
29094
|
:host([variant="success"]) {
|
|
28961
29095
|
--_background-color: var(--components-banner-success-background-color);
|
|
28962
29096
|
--_border-color: var(--components-banner-success-border-color);
|
|
@@ -28978,21 +29112,15 @@ const bannerStyles = css`
|
|
|
28978
29112
|
|
|
28979
29113
|
/* # Icon */
|
|
28980
29114
|
|
|
28981
|
-
.banner__icon
|
|
29115
|
+
.banner__icon {
|
|
28982
29116
|
display: flex;
|
|
28983
29117
|
grid-column: 1;
|
|
28984
29118
|
grid-row: 1;
|
|
29119
|
+
width: var(--_icon-size);
|
|
28985
29120
|
align-items: flex-start;
|
|
28986
|
-
justify-content: center;
|
|
28987
29121
|
color: var(--_icon-color);
|
|
28988
29122
|
}
|
|
28989
29123
|
|
|
28990
|
-
.banner__icon {
|
|
28991
|
-
width: var(--_icon-size);
|
|
28992
|
-
height: var(--_icon-size);
|
|
28993
|
-
flex-shrink: 0;
|
|
28994
|
-
}
|
|
28995
|
-
|
|
28996
29124
|
|
|
28997
29125
|
/* # Main */
|
|
28998
29126
|
|
|
@@ -29089,10 +29217,8 @@ function bannerTemplate(component) {
|
|
|
29089
29217
|
}
|
|
29090
29218
|
};
|
|
29091
29219
|
return html`
|
|
29092
|
-
<div class="banner__icon
|
|
29093
|
-
<nldd-icon
|
|
29094
|
-
name=${component._resolvedIcon}
|
|
29095
|
-
></nldd-icon>
|
|
29220
|
+
<div class="banner__icon" aria-hidden="true">
|
|
29221
|
+
<nldd-icon name=${component._resolvedIcon}></nldd-icon>
|
|
29096
29222
|
</div>
|
|
29097
29223
|
<div class="banner__main">
|
|
29098
29224
|
${component.text || component.supportingText ? html`
|
|
@@ -29140,6 +29266,7 @@ var __decorateClass$4 = (decorators, target, key, kind) => {
|
|
|
29140
29266
|
};
|
|
29141
29267
|
const DEFAULT_ICONS = {
|
|
29142
29268
|
neutral: "info-circle-filled",
|
|
29269
|
+
accent: "info-circle-filled",
|
|
29143
29270
|
success: "check-circle-filled",
|
|
29144
29271
|
warning: "exclamation-triangle-filled",
|
|
29145
29272
|
critical: "exclamation-circle-filled"
|
|
@@ -29283,11 +29410,12 @@ const badgeStyles = css`
|
|
|
29283
29410
|
--_inline-padding: var(--primitives-space-6);
|
|
29284
29411
|
--_gap: var(--primitives-space-3);
|
|
29285
29412
|
--_content-color: var(--components-badge-critical-content-color);
|
|
29286
|
-
--_font: var(--primitives-font-body-xs-
|
|
29413
|
+
--_font: var(--primitives-font-body-xs-medium-flat);
|
|
29287
29414
|
--_dot-size: var(--primitives-space-10);
|
|
29288
29415
|
--_icon-size: var(--primitives-space-14);
|
|
29289
29416
|
--_icon-offset-correction: var(--primitives-space-1);
|
|
29290
29417
|
|
|
29418
|
+
${inheritedTextReset}
|
|
29291
29419
|
display: inline-flex;
|
|
29292
29420
|
vertical-align: middle;
|
|
29293
29421
|
}
|
|
@@ -29296,7 +29424,7 @@ const badgeStyles = css`
|
|
|
29296
29424
|
--_height: var(--primitives-space-16);
|
|
29297
29425
|
--_inline-padding: var(--primitives-space-4);
|
|
29298
29426
|
--_gap: var(--primitives-space-2);
|
|
29299
|
-
--_font: var(--primitives-font-body-xxs-
|
|
29427
|
+
--_font: var(--primitives-font-body-xxs-medium-flat);
|
|
29300
29428
|
--_dot-size: var(--primitives-space-6);
|
|
29301
29429
|
--_icon-size: var(--primitives-space-12);
|
|
29302
29430
|
}
|
|
@@ -29617,25 +29745,26 @@ const progressBarStyles = css`
|
|
|
29617
29745
|
|
|
29618
29746
|
:host {
|
|
29619
29747
|
--_height: var(--components-progress-bar-md-height);
|
|
29620
|
-
--_track-color: var(--components-progress-bar-track-color);
|
|
29748
|
+
--_track-background-color: var(--components-progress-bar-track-background-color);
|
|
29621
29749
|
--_track-border-color: var(--components-progress-bar-track-border-color);
|
|
29622
29750
|
--_track-border-width: var(--components-progress-bar-track-border-width);
|
|
29623
29751
|
--_corner-radius: var(--components-progress-bar-corner-radius);
|
|
29624
29752
|
--_segment-gap: var(--components-progress-bar-progress-segment-gap);
|
|
29625
|
-
--
|
|
29626
|
-
--
|
|
29627
|
-
--
|
|
29628
|
-
--
|
|
29629
|
-
--
|
|
29630
|
-
--_indeterminate-
|
|
29753
|
+
--_caption-gap: var(--components-progress-bar-caption-gap);
|
|
29754
|
+
--_text-color: var(--components-progress-bar-text-color);
|
|
29755
|
+
--_supporting-text-color: var(--components-progress-bar-supporting-text-color);
|
|
29756
|
+
--_text-font: var(--components-progress-bar-text-font);
|
|
29757
|
+
--_supporting-text-font: var(--components-progress-bar-supporting-text-font);
|
|
29758
|
+
--_indeterminate-background-color: var(--components-progress-bar-accent-background-color);
|
|
29631
29759
|
--_indeterminate-bar-width: 20%;
|
|
29632
29760
|
--_indeterminate-duration: 800ms;
|
|
29633
29761
|
|
|
29762
|
+
${inheritedTextReset}
|
|
29634
29763
|
box-sizing: border-box;
|
|
29635
29764
|
display: flex;
|
|
29636
29765
|
width: 100%;
|
|
29637
29766
|
flex-direction: column;
|
|
29638
|
-
gap: var(--
|
|
29767
|
+
gap: var(--_caption-gap);
|
|
29639
29768
|
}
|
|
29640
29769
|
|
|
29641
29770
|
:host([hidden]) {
|
|
@@ -29654,50 +29783,50 @@ const progressBarStyles = css`
|
|
|
29654
29783
|
|
|
29655
29784
|
/* ## Indeterminate fill colour follows the variant; default is accent (blue) */
|
|
29656
29785
|
|
|
29657
|
-
:host([color="neutral"]) { --_indeterminate-
|
|
29658
|
-
:host([color="accent"]) { --_indeterminate-
|
|
29659
|
-
:host([color="success"]) { --_indeterminate-
|
|
29660
|
-
:host([color="warning"]) { --_indeterminate-
|
|
29661
|
-
:host([color="critical"]) { --_indeterminate-
|
|
29662
|
-
|
|
29663
|
-
:host([color="coolgray"]) { --_indeterminate-
|
|
29664
|
-
:host([color="lintblauw"]) { --_indeterminate-
|
|
29665
|
-
:host([color="donkerblauw"]) { --_indeterminate-
|
|
29666
|
-
:host([color="hemelblauw"]) { --_indeterminate-
|
|
29667
|
-
:host([color="lichtblauw"]) { --_indeterminate-
|
|
29668
|
-
:host([color="paars"]) { --_indeterminate-
|
|
29669
|
-
:host([color="violet"]) { --_indeterminate-
|
|
29670
|
-
:host([color="robijnrood"]) { --_indeterminate-
|
|
29671
|
-
:host([color="roze"]) { --_indeterminate-
|
|
29672
|
-
:host([color="rood"]) { --_indeterminate-
|
|
29673
|
-
:host([color="oranje"]) { --_indeterminate-
|
|
29674
|
-
:host([color="donkergeel"]) { --_indeterminate-
|
|
29675
|
-
:host([color="geel"]) { --_indeterminate-
|
|
29676
|
-
:host([color="donkerbruin"]) { --_indeterminate-
|
|
29677
|
-
:host([color="bruin"]) { --_indeterminate-
|
|
29678
|
-
:host([color="donkergroen"]) { --_indeterminate-
|
|
29679
|
-
:host([color="groen"]) { --_indeterminate-
|
|
29680
|
-
:host([color="mosgroen"]) { --_indeterminate-
|
|
29681
|
-
:host([color="mintgroen"]) { --_indeterminate-
|
|
29786
|
+
:host([color="neutral"]) { --_indeterminate-background-color: var(--components-progress-bar-neutral-background-color); }
|
|
29787
|
+
:host([color="accent"]) { --_indeterminate-background-color: var(--components-progress-bar-accent-background-color); }
|
|
29788
|
+
:host([color="success"]) { --_indeterminate-background-color: var(--components-progress-bar-success-background-color); }
|
|
29789
|
+
:host([color="warning"]) { --_indeterminate-background-color: var(--components-progress-bar-warning-background-color); }
|
|
29790
|
+
:host([color="critical"]) { --_indeterminate-background-color: var(--components-progress-bar-critical-background-color); }
|
|
29791
|
+
|
|
29792
|
+
:host([color="coolgray"]) { --_indeterminate-background-color: var(--components-progress-bar-coolgray-background-color); }
|
|
29793
|
+
:host([color="lintblauw"]) { --_indeterminate-background-color: var(--components-progress-bar-lintblauw-background-color); }
|
|
29794
|
+
:host([color="donkerblauw"]) { --_indeterminate-background-color: var(--components-progress-bar-donkerblauw-background-color); }
|
|
29795
|
+
:host([color="hemelblauw"]) { --_indeterminate-background-color: var(--components-progress-bar-hemelblauw-background-color); }
|
|
29796
|
+
:host([color="lichtblauw"]) { --_indeterminate-background-color: var(--components-progress-bar-lichtblauw-background-color); }
|
|
29797
|
+
:host([color="paars"]) { --_indeterminate-background-color: var(--components-progress-bar-paars-background-color); }
|
|
29798
|
+
:host([color="violet"]) { --_indeterminate-background-color: var(--components-progress-bar-violet-background-color); }
|
|
29799
|
+
:host([color="robijnrood"]) { --_indeterminate-background-color: var(--components-progress-bar-robijnrood-background-color); }
|
|
29800
|
+
:host([color="roze"]) { --_indeterminate-background-color: var(--components-progress-bar-roze-background-color); }
|
|
29801
|
+
:host([color="rood"]) { --_indeterminate-background-color: var(--components-progress-bar-rood-background-color); }
|
|
29802
|
+
:host([color="oranje"]) { --_indeterminate-background-color: var(--components-progress-bar-oranje-background-color); }
|
|
29803
|
+
:host([color="donkergeel"]) { --_indeterminate-background-color: var(--components-progress-bar-donkergeel-background-color); }
|
|
29804
|
+
:host([color="geel"]) { --_indeterminate-background-color: var(--components-progress-bar-geel-background-color); }
|
|
29805
|
+
:host([color="donkerbruin"]) { --_indeterminate-background-color: var(--components-progress-bar-donkerbruin-background-color); }
|
|
29806
|
+
:host([color="bruin"]) { --_indeterminate-background-color: var(--components-progress-bar-bruin-background-color); }
|
|
29807
|
+
:host([color="donkergroen"]) { --_indeterminate-background-color: var(--components-progress-bar-donkergroen-background-color); }
|
|
29808
|
+
:host([color="groen"]) { --_indeterminate-background-color: var(--components-progress-bar-groen-background-color); }
|
|
29809
|
+
:host([color="mosgroen"]) { --_indeterminate-background-color: var(--components-progress-bar-mosgroen-background-color); }
|
|
29810
|
+
:host([color="mintgroen"]) { --_indeterminate-background-color: var(--components-progress-bar-mintgroen-background-color); }
|
|
29682
29811
|
|
|
29683
29812
|
|
|
29684
|
-
/* #
|
|
29813
|
+
/* # Caption */
|
|
29685
29814
|
|
|
29686
|
-
.progress-
|
|
29815
|
+
.progress-bar__caption {
|
|
29687
29816
|
display: flex;
|
|
29688
|
-
gap: var(--
|
|
29817
|
+
gap: var(--_caption-gap);
|
|
29689
29818
|
justify-content: space-between;
|
|
29690
29819
|
align-items: baseline;
|
|
29691
|
-
color: var(--
|
|
29820
|
+
color: var(--_text-color);
|
|
29692
29821
|
}
|
|
29693
29822
|
|
|
29694
29823
|
.progress-bar__text {
|
|
29695
|
-
font: var(--
|
|
29824
|
+
font: var(--_text-font);
|
|
29696
29825
|
}
|
|
29697
29826
|
|
|
29698
|
-
.progress-
|
|
29699
|
-
color: var(--
|
|
29700
|
-
font: var(--
|
|
29827
|
+
.progress-bar__supporting-text {
|
|
29828
|
+
color: var(--_supporting-text-color);
|
|
29829
|
+
font: var(--_supporting-text-font);
|
|
29701
29830
|
font-variant-numeric: tabular-nums;
|
|
29702
29831
|
}
|
|
29703
29832
|
|
|
@@ -29710,7 +29839,7 @@ const progressBarStyles = css`
|
|
|
29710
29839
|
position: relative;
|
|
29711
29840
|
border-radius: var(--_corner-radius);
|
|
29712
29841
|
box-shadow: inset 0 0 0 var(--_track-border-width) var(--_track-border-color);
|
|
29713
|
-
background-color: var(--_track-color);
|
|
29842
|
+
background-color: var(--_track-background-color);
|
|
29714
29843
|
width: 100%;
|
|
29715
29844
|
height: var(--_height);
|
|
29716
29845
|
overflow: hidden;
|
|
@@ -29761,7 +29890,7 @@ const progressBarStyles = css`
|
|
|
29761
29890
|
inset-block: 0;
|
|
29762
29891
|
left: 0;
|
|
29763
29892
|
border-radius: var(--_corner-radius);
|
|
29764
|
-
background: var(--_indeterminate-
|
|
29893
|
+
background: var(--_indeterminate-background-color);
|
|
29765
29894
|
width: var(--_indeterminate-bar-width);
|
|
29766
29895
|
transform: translateX(0);
|
|
29767
29896
|
/* Duration scales with track width via the container queries below.
|
|
@@ -29801,8 +29930,8 @@ const progressBarStyles = css`
|
|
|
29801
29930
|
}
|
|
29802
29931
|
|
|
29803
29932
|
@keyframes progress-bar-indeterminate-pulse {
|
|
29804
|
-
0%, 100% { background-color: color-mix(in srgb, var(--_indeterminate-
|
|
29805
|
-
50% { background-color: color-mix(in srgb, var(--_indeterminate-
|
|
29933
|
+
0%, 100% { background-color: color-mix(in srgb, var(--_indeterminate-background-color) 20%, transparent); }
|
|
29934
|
+
50% { background-color: color-mix(in srgb, var(--_indeterminate-background-color) 50%, transparent); }
|
|
29806
29935
|
}
|
|
29807
29936
|
}
|
|
29808
29937
|
|
|
@@ -29820,7 +29949,7 @@ const progressBarSegmentStyles = css`
|
|
|
29820
29949
|
:host {
|
|
29821
29950
|
--_width: var(--context-progress-bar-segment-width, 0%);
|
|
29822
29951
|
--_min-width: var(--components-progress-bar-segment-min-width);
|
|
29823
|
-
--
|
|
29952
|
+
--_background-color: var(--components-progress-bar-accent-background-color);
|
|
29824
29953
|
--_border-color: var(--components-progress-bar-accent-border-color);
|
|
29825
29954
|
--_border-width: var(--components-progress-bar-segment-border-width);
|
|
29826
29955
|
|
|
@@ -29828,7 +29957,7 @@ const progressBarSegmentStyles = css`
|
|
|
29828
29957
|
display: block;
|
|
29829
29958
|
position: relative;
|
|
29830
29959
|
box-shadow: inset 0 0 0 var(--_border-width) var(--_border-color);
|
|
29831
|
-
background-color: var(--
|
|
29960
|
+
background-color: var(--_background-color);
|
|
29832
29961
|
width: var(--_width);
|
|
29833
29962
|
min-width: var(--_min-width);
|
|
29834
29963
|
height: 100%;
|
|
@@ -29882,23 +30011,23 @@ const progressBarSegmentStyles = css`
|
|
|
29882
30011
|
/* ## Variants — semantic */
|
|
29883
30012
|
|
|
29884
30013
|
:host([color="neutral"]) {
|
|
29885
|
-
--
|
|
30014
|
+
--_background-color: var(--components-progress-bar-neutral-background-color);
|
|
29886
30015
|
--_border-color: var(--components-progress-bar-neutral-border-color);
|
|
29887
30016
|
}
|
|
29888
30017
|
:host([color="accent"]) {
|
|
29889
|
-
--
|
|
30018
|
+
--_background-color: var(--components-progress-bar-accent-background-color);
|
|
29890
30019
|
--_border-color: var(--components-progress-bar-accent-border-color);
|
|
29891
30020
|
}
|
|
29892
30021
|
:host([color="success"]) {
|
|
29893
|
-
--
|
|
30022
|
+
--_background-color: var(--components-progress-bar-success-background-color);
|
|
29894
30023
|
--_border-color: var(--components-progress-bar-success-border-color);
|
|
29895
30024
|
}
|
|
29896
30025
|
:host([color="warning"]) {
|
|
29897
|
-
--
|
|
30026
|
+
--_background-color: var(--components-progress-bar-warning-background-color);
|
|
29898
30027
|
--_border-color: var(--components-progress-bar-warning-border-color);
|
|
29899
30028
|
}
|
|
29900
30029
|
:host([color="critical"]) {
|
|
29901
|
-
--
|
|
30030
|
+
--_background-color: var(--components-progress-bar-critical-background-color);
|
|
29902
30031
|
--_border-color: var(--components-progress-bar-critical-border-color);
|
|
29903
30032
|
}
|
|
29904
30033
|
|
|
@@ -29906,79 +30035,79 @@ const progressBarSegmentStyles = css`
|
|
|
29906
30035
|
/* ## Variants — Rijkskleuren */
|
|
29907
30036
|
|
|
29908
30037
|
:host([color="coolgray"]) {
|
|
29909
|
-
--
|
|
30038
|
+
--_background-color: var(--components-progress-bar-coolgray-background-color);
|
|
29910
30039
|
--_border-color: var(--components-progress-bar-coolgray-border-color);
|
|
29911
30040
|
}
|
|
29912
30041
|
:host([color="lintblauw"]) {
|
|
29913
|
-
--
|
|
30042
|
+
--_background-color: var(--components-progress-bar-lintblauw-background-color);
|
|
29914
30043
|
--_border-color: var(--components-progress-bar-lintblauw-border-color);
|
|
29915
30044
|
}
|
|
29916
30045
|
:host([color="donkerblauw"]) {
|
|
29917
|
-
--
|
|
30046
|
+
--_background-color: var(--components-progress-bar-donkerblauw-background-color);
|
|
29918
30047
|
--_border-color: var(--components-progress-bar-donkerblauw-border-color);
|
|
29919
30048
|
}
|
|
29920
30049
|
:host([color="hemelblauw"]) {
|
|
29921
|
-
--
|
|
30050
|
+
--_background-color: var(--components-progress-bar-hemelblauw-background-color);
|
|
29922
30051
|
--_border-color: var(--components-progress-bar-hemelblauw-border-color);
|
|
29923
30052
|
}
|
|
29924
30053
|
:host([color="lichtblauw"]) {
|
|
29925
|
-
--
|
|
30054
|
+
--_background-color: var(--components-progress-bar-lichtblauw-background-color);
|
|
29926
30055
|
--_border-color: var(--components-progress-bar-lichtblauw-border-color);
|
|
29927
30056
|
}
|
|
29928
30057
|
:host([color="paars"]) {
|
|
29929
|
-
--
|
|
30058
|
+
--_background-color: var(--components-progress-bar-paars-background-color);
|
|
29930
30059
|
--_border-color: var(--components-progress-bar-paars-border-color);
|
|
29931
30060
|
}
|
|
29932
30061
|
:host([color="violet"]) {
|
|
29933
|
-
--
|
|
30062
|
+
--_background-color: var(--components-progress-bar-violet-background-color);
|
|
29934
30063
|
--_border-color: var(--components-progress-bar-violet-border-color);
|
|
29935
30064
|
}
|
|
29936
30065
|
:host([color="robijnrood"]) {
|
|
29937
|
-
--
|
|
30066
|
+
--_background-color: var(--components-progress-bar-robijnrood-background-color);
|
|
29938
30067
|
--_border-color: var(--components-progress-bar-robijnrood-border-color);
|
|
29939
30068
|
}
|
|
29940
30069
|
:host([color="roze"]) {
|
|
29941
|
-
--
|
|
30070
|
+
--_background-color: var(--components-progress-bar-roze-background-color);
|
|
29942
30071
|
--_border-color: var(--components-progress-bar-roze-border-color);
|
|
29943
30072
|
}
|
|
29944
30073
|
:host([color="rood"]) {
|
|
29945
|
-
--
|
|
30074
|
+
--_background-color: var(--components-progress-bar-rood-background-color);
|
|
29946
30075
|
--_border-color: var(--components-progress-bar-rood-border-color);
|
|
29947
30076
|
}
|
|
29948
30077
|
:host([color="oranje"]) {
|
|
29949
|
-
--
|
|
30078
|
+
--_background-color: var(--components-progress-bar-oranje-background-color);
|
|
29950
30079
|
--_border-color: var(--components-progress-bar-oranje-border-color);
|
|
29951
30080
|
}
|
|
29952
30081
|
:host([color="donkergeel"]) {
|
|
29953
|
-
--
|
|
30082
|
+
--_background-color: var(--components-progress-bar-donkergeel-background-color);
|
|
29954
30083
|
--_border-color: var(--components-progress-bar-donkergeel-border-color);
|
|
29955
30084
|
}
|
|
29956
30085
|
:host([color="geel"]) {
|
|
29957
|
-
--
|
|
30086
|
+
--_background-color: var(--components-progress-bar-geel-background-color);
|
|
29958
30087
|
--_border-color: var(--components-progress-bar-geel-border-color);
|
|
29959
30088
|
}
|
|
29960
30089
|
:host([color="donkerbruin"]) {
|
|
29961
|
-
--
|
|
30090
|
+
--_background-color: var(--components-progress-bar-donkerbruin-background-color);
|
|
29962
30091
|
--_border-color: var(--components-progress-bar-donkerbruin-border-color);
|
|
29963
30092
|
}
|
|
29964
30093
|
:host([color="bruin"]) {
|
|
29965
|
-
--
|
|
30094
|
+
--_background-color: var(--components-progress-bar-bruin-background-color);
|
|
29966
30095
|
--_border-color: var(--components-progress-bar-bruin-border-color);
|
|
29967
30096
|
}
|
|
29968
30097
|
:host([color="donkergroen"]) {
|
|
29969
|
-
--
|
|
30098
|
+
--_background-color: var(--components-progress-bar-donkergroen-background-color);
|
|
29970
30099
|
--_border-color: var(--components-progress-bar-donkergroen-border-color);
|
|
29971
30100
|
}
|
|
29972
30101
|
:host([color="groen"]) {
|
|
29973
|
-
--
|
|
30102
|
+
--_background-color: var(--components-progress-bar-groen-background-color);
|
|
29974
30103
|
--_border-color: var(--components-progress-bar-groen-border-color);
|
|
29975
30104
|
}
|
|
29976
30105
|
:host([color="mosgroen"]) {
|
|
29977
|
-
--
|
|
30106
|
+
--_background-color: var(--components-progress-bar-mosgroen-background-color);
|
|
29978
30107
|
--_border-color: var(--components-progress-bar-mosgroen-border-color);
|
|
29979
30108
|
}
|
|
29980
30109
|
:host([color="mintgroen"]) {
|
|
29981
|
-
--
|
|
30110
|
+
--_background-color: var(--components-progress-bar-mintgroen-background-color);
|
|
29982
30111
|
--_border-color: var(--components-progress-bar-mintgroen-border-color);
|
|
29983
30112
|
}
|
|
29984
30113
|
|
|
@@ -29986,7 +30115,7 @@ const progressBarSegmentStyles = css`
|
|
|
29986
30115
|
/* # Hover area (tooltip trigger)
|
|
29987
30116
|
Fills the segment; captures hover/focus for the wrapping nldd-tooltip. */
|
|
29988
30117
|
|
|
29989
|
-
.progress-bar-
|
|
30118
|
+
.progress-bar-segment__tooltip-area {
|
|
29990
30119
|
display: block;
|
|
29991
30120
|
position: absolute;
|
|
29992
30121
|
inset: 0;
|
|
@@ -30009,7 +30138,7 @@ const progressBarSegmentStyles = css`
|
|
|
30009
30138
|
}
|
|
30010
30139
|
`;
|
|
30011
30140
|
function progressBarTemplate(component, onSlotChange) {
|
|
30012
|
-
const
|
|
30141
|
+
const hasCaption = component._hasCaption;
|
|
30013
30142
|
const isExiting = component._indeterminateExiting;
|
|
30014
30143
|
const isEntering = component._indeterminateEntering;
|
|
30015
30144
|
const showIndeterminateIndicator = (component.indeterminate || isExiting) && !component._hasSegments;
|
|
@@ -30017,10 +30146,10 @@ function progressBarTemplate(component, onSlotChange) {
|
|
|
30017
30146
|
const ariaValueNow = component.indeterminate ? void 0 : Math.round(component._totalValue);
|
|
30018
30147
|
const ariaLabel = component.text || component._t("components.progress-bar.label-text");
|
|
30019
30148
|
return html`
|
|
30020
|
-
${
|
|
30021
|
-
<div class="progress-
|
|
30149
|
+
${hasCaption ? html`
|
|
30150
|
+
<div class="progress-bar__caption">
|
|
30022
30151
|
<span class="progress-bar__text">${component.text}</span>
|
|
30023
|
-
|
|
30152
|
+
${component.valueDisplay === "inline" && component._displayValue ? html`<span class="progress-bar__supporting-text">${component._displayValue}</span>` : nothing}
|
|
30024
30153
|
</div>
|
|
30025
30154
|
` : nothing}
|
|
30026
30155
|
<div class="progress-bar__track"
|
|
@@ -30080,11 +30209,11 @@ let NLDDProgressBarSegment = class extends LitElement {
|
|
|
30080
30209
|
render() {
|
|
30081
30210
|
const text = this._effectiveTooltip;
|
|
30082
30211
|
if (!text) {
|
|
30083
|
-
return html`<span class="progress-bar-
|
|
30212
|
+
return html`<span class="progress-bar-segment__tooltip-area"></span>`;
|
|
30084
30213
|
}
|
|
30085
30214
|
return html`
|
|
30086
30215
|
<nldd-tooltip text=${text} timing="instant">
|
|
30087
|
-
<span class="progress-bar-
|
|
30216
|
+
<span class="progress-bar-segment__tooltip-area"
|
|
30088
30217
|
tabindex="0"
|
|
30089
30218
|
role="img"
|
|
30090
30219
|
aria-label=${text}
|
|
@@ -30123,6 +30252,7 @@ let NLDDProgressBar = class extends LitElement {
|
|
|
30123
30252
|
this.text = "";
|
|
30124
30253
|
this.valueFormat = "percentage";
|
|
30125
30254
|
this.valueText = "";
|
|
30255
|
+
this.valueDisplay = "inline";
|
|
30126
30256
|
this.accessibleLabel = "";
|
|
30127
30257
|
this.indeterminate = false;
|
|
30128
30258
|
this.translations = {};
|
|
@@ -30150,14 +30280,12 @@ let NLDDProgressBar = class extends LitElement {
|
|
|
30150
30280
|
if (this.max <= 0) return 0;
|
|
30151
30281
|
return Math.min(100, this._totalValue / this.max * 100);
|
|
30152
30282
|
}
|
|
30153
|
-
/** Formatted value string for the
|
|
30283
|
+
/** Formatted value string for the caption. */
|
|
30154
30284
|
get _displayValue() {
|
|
30155
30285
|
if (this.valueText) return this.valueText;
|
|
30156
30286
|
if (this.indeterminate) return "";
|
|
30157
30287
|
const total = this._totalValue;
|
|
30158
30288
|
switch (this.valueFormat) {
|
|
30159
|
-
case "none":
|
|
30160
|
-
return "";
|
|
30161
30289
|
case "absolute":
|
|
30162
30290
|
return `${total}`;
|
|
30163
30291
|
case "fraction":
|
|
@@ -30191,10 +30319,10 @@ let NLDDProgressBar = class extends LitElement {
|
|
|
30191
30319
|
}
|
|
30192
30320
|
return `${totalPct}% ${completedSuffix}`;
|
|
30193
30321
|
}
|
|
30194
|
-
/** True when the
|
|
30195
|
-
*
|
|
30196
|
-
get
|
|
30197
|
-
return !!this.text;
|
|
30322
|
+
/** True when the caption is rendered: a label is set, or there's an inline
|
|
30323
|
+
* value to show (value-display="inline"). */
|
|
30324
|
+
get _hasCaption() {
|
|
30325
|
+
return !!this.text || this.valueDisplay === "inline" && !!this._displayValue;
|
|
30198
30326
|
}
|
|
30199
30327
|
firstUpdated() {
|
|
30200
30328
|
this._syncSegments();
|
|
@@ -30247,7 +30375,7 @@ let NLDDProgressBar = class extends LitElement {
|
|
|
30247
30375
|
}
|
|
30248
30376
|
/** Auto-tooltip based on parent's value-format. Override via segment.tooltip. */
|
|
30249
30377
|
_formatSegmentTooltip(seg) {
|
|
30250
|
-
if (this.
|
|
30378
|
+
if (this.valueDisplay === "none") return seg.name ?? "";
|
|
30251
30379
|
const v = Math.max(0, seg.value);
|
|
30252
30380
|
const pct = this.max > 0 ? Math.round(v / this.max * 100) : 0;
|
|
30253
30381
|
let valuePart;
|
|
@@ -30294,7 +30422,7 @@ let NLDDProgressBar = class extends LitElement {
|
|
|
30294
30422
|
) ?? null;
|
|
30295
30423
|
const allSegments = internalSegment ? [internalSegment, ...this._segments] : [...this._segments];
|
|
30296
30424
|
const visibleCount = allSegments.filter((s) => Math.max(0, s.value) > 0).length;
|
|
30297
|
-
const suppressAutoTooltip = visibleCount <= 1 && this.
|
|
30425
|
+
const suppressAutoTooltip = visibleCount <= 1 && this.valueDisplay !== "tooltip";
|
|
30298
30426
|
const isExiting = this._indeterminateExiting;
|
|
30299
30427
|
const isEntering = this._indeterminateEntering;
|
|
30300
30428
|
for (const seg of allSegments) {
|
|
@@ -30343,6 +30471,9 @@ __decorateClass$2([
|
|
|
30343
30471
|
__decorateClass$2([
|
|
30344
30472
|
property({ type: String, reflect: true, attribute: "value-text" })
|
|
30345
30473
|
], NLDDProgressBar.prototype, "valueText", 2);
|
|
30474
|
+
__decorateClass$2([
|
|
30475
|
+
property({ type: String, reflect: true, attribute: "value-display" })
|
|
30476
|
+
], NLDDProgressBar.prototype, "valueDisplay", 2);
|
|
30346
30477
|
__decorateClass$2([
|
|
30347
30478
|
property({ type: String, reflect: true, attribute: "accessible-label" })
|
|
30348
30479
|
], NLDDProgressBar.prototype, "accessibleLabel", 2);
|
|
@@ -30377,17 +30508,20 @@ const progressCircleStyles = css`
|
|
|
30377
30508
|
grows with circle size — must match getStrokeWidthPx() in the
|
|
30378
30509
|
template file. */
|
|
30379
30510
|
--_stroke-width: calc(4px * 100 / 28);
|
|
30380
|
-
--_track-color: var(--components-progress-circle-track-color);
|
|
30511
|
+
--_track-background-color: var(--components-progress-circle-track-background-color);
|
|
30381
30512
|
--_track-border-color: var(--components-progress-circle-track-border-color);
|
|
30382
|
-
--
|
|
30383
|
-
--
|
|
30384
|
-
--
|
|
30513
|
+
--_caption-gap: var(--components-progress-circle-caption-gap);
|
|
30514
|
+
--_text-color: var(--components-progress-circle-text-color);
|
|
30515
|
+
--_text-font: var(--components-progress-circle-text-font);
|
|
30516
|
+
--_supporting-text-color: var(--components-progress-circle-supporting-text-color);
|
|
30517
|
+
--_supporting-text-font: var(--components-progress-circle-supporting-text-font);
|
|
30385
30518
|
|
|
30519
|
+
${inheritedTextReset}
|
|
30386
30520
|
box-sizing: border-box;
|
|
30387
30521
|
display: inline-flex;
|
|
30388
30522
|
flex-direction: column;
|
|
30389
30523
|
align-items: center;
|
|
30390
|
-
gap: var(--
|
|
30524
|
+
gap: var(--_caption-gap);
|
|
30391
30525
|
}
|
|
30392
30526
|
|
|
30393
30527
|
:host([hidden]) {
|
|
@@ -30395,17 +30529,17 @@ const progressCircleStyles = css`
|
|
|
30395
30529
|
}
|
|
30396
30530
|
|
|
30397
30531
|
:host([size="16"]) { --_size: var(--primitives-space-16); --_stroke-width: calc(3px * 100 / 16); }
|
|
30398
|
-
:host([size="20"]) { --_size: var(--primitives-space-20); --_stroke-width: calc(
|
|
30532
|
+
:host([size="20"]) { --_size: var(--primitives-space-20); --_stroke-width: calc(4px * 100 / 20); }
|
|
30399
30533
|
:host([size="24"]) { --_size: var(--primitives-space-24); --_stroke-width: calc(4px * 100 / 24); }
|
|
30400
30534
|
:host([size="28"]) { --_size: var(--primitives-space-28); --_stroke-width: calc(4px * 100 / 28); }
|
|
30401
|
-
:host([size="32"]) { --_size: var(--primitives-space-32); --_stroke-width: calc(
|
|
30402
|
-
:host([size="40"]) { --_size: var(--primitives-space-40); --_stroke-width: calc(
|
|
30403
|
-
:host([size="44"]) { --_size: var(--primitives-space-44); --_stroke-width: calc(
|
|
30404
|
-
:host([size="48"]) { --_size: var(--primitives-space-48); --_stroke-width: calc(
|
|
30405
|
-
:host([size="56"]) { --_size: var(--primitives-space-56); --_stroke-width: calc(
|
|
30406
|
-
:host([size="64"]) { --_size: var(--primitives-space-64); --_stroke-width: calc(
|
|
30407
|
-
:host([size="80"]) { --_size: var(--primitives-space-80); --_stroke-width: calc(
|
|
30408
|
-
:host([size="96"]) { --_size: var(--primitives-space-96); --_stroke-width: calc(
|
|
30535
|
+
:host([size="32"]) { --_size: var(--primitives-space-32); --_stroke-width: calc(5px * 100 / 32); }
|
|
30536
|
+
:host([size="40"]) { --_size: var(--primitives-space-40); --_stroke-width: calc(5px * 100 / 40); }
|
|
30537
|
+
:host([size="44"]) { --_size: var(--primitives-space-44); --_stroke-width: calc(6px * 100 / 44); }
|
|
30538
|
+
:host([size="48"]) { --_size: var(--primitives-space-48); --_stroke-width: calc(6px * 100 / 48); }
|
|
30539
|
+
:host([size="56"]) { --_size: var(--primitives-space-56); --_stroke-width: calc(7px * 100 / 56); }
|
|
30540
|
+
:host([size="64"]) { --_size: var(--primitives-space-64); --_stroke-width: calc(7px * 100 / 64); }
|
|
30541
|
+
:host([size="80"]) { --_size: var(--primitives-space-80); --_stroke-width: calc(8px * 100 / 80); }
|
|
30542
|
+
:host([size="96"]) { --_size: var(--primitives-space-96); --_stroke-width: calc(8px * 100 / 96); }
|
|
30409
30543
|
|
|
30410
30544
|
|
|
30411
30545
|
/* # SVG wrapper */
|
|
@@ -30432,7 +30566,7 @@ const progressCircleStyles = css`
|
|
|
30432
30566
|
so a 4px stroke is always 4 actual pixels at any circle size. */
|
|
30433
30567
|
|
|
30434
30568
|
.progress-circle__track {
|
|
30435
|
-
stroke: var(--_track-color);
|
|
30569
|
+
stroke: var(--_track-background-color);
|
|
30436
30570
|
stroke-width: var(--_stroke-width);
|
|
30437
30571
|
}
|
|
30438
30572
|
|
|
@@ -30467,30 +30601,30 @@ const progressCircleStyles = css`
|
|
|
30467
30601
|
|
|
30468
30602
|
/* ## Arc color per variant */
|
|
30469
30603
|
|
|
30470
|
-
.progress-circle__segment--neutral { stroke: var(--components-progress-circle-neutral-
|
|
30471
|
-
.progress-circle__segment--accent { stroke: var(--components-progress-circle-accent-
|
|
30472
|
-
.progress-circle__segment--success { stroke: var(--components-progress-circle-success-
|
|
30473
|
-
.progress-circle__segment--warning { stroke: var(--components-progress-circle-warning-
|
|
30474
|
-
.progress-circle__segment--critical { stroke: var(--components-progress-circle-critical-
|
|
30475
|
-
.progress-circle__segment--coolgray { stroke: var(--components-progress-circle-coolgray-
|
|
30476
|
-
.progress-circle__segment--lintblauw { stroke: var(--components-progress-circle-lintblauw-
|
|
30477
|
-
.progress-circle__segment--donkerblauw { stroke: var(--components-progress-circle-donkerblauw-
|
|
30478
|
-
.progress-circle__segment--hemelblauw { stroke: var(--components-progress-circle-hemelblauw-
|
|
30479
|
-
.progress-circle__segment--lichtblauw { stroke: var(--components-progress-circle-lichtblauw-
|
|
30480
|
-
.progress-circle__segment--paars { stroke: var(--components-progress-circle-paars-
|
|
30481
|
-
.progress-circle__segment--violet { stroke: var(--components-progress-circle-violet-
|
|
30482
|
-
.progress-circle__segment--robijnrood { stroke: var(--components-progress-circle-robijnrood-
|
|
30483
|
-
.progress-circle__segment--roze { stroke: var(--components-progress-circle-roze-
|
|
30484
|
-
.progress-circle__segment--rood { stroke: var(--components-progress-circle-rood-
|
|
30485
|
-
.progress-circle__segment--oranje { stroke: var(--components-progress-circle-oranje-
|
|
30486
|
-
.progress-circle__segment--donkergeel { stroke: var(--components-progress-circle-donkergeel-
|
|
30487
|
-
.progress-circle__segment--geel { stroke: var(--components-progress-circle-geel-
|
|
30488
|
-
.progress-circle__segment--donkerbruin { stroke: var(--components-progress-circle-donkerbruin-
|
|
30489
|
-
.progress-circle__segment--bruin { stroke: var(--components-progress-circle-bruin-
|
|
30490
|
-
.progress-circle__segment--donkergroen { stroke: var(--components-progress-circle-donkergroen-
|
|
30491
|
-
.progress-circle__segment--groen { stroke: var(--components-progress-circle-groen-
|
|
30492
|
-
.progress-circle__segment--mosgroen { stroke: var(--components-progress-circle-mosgroen-
|
|
30493
|
-
.progress-circle__segment--mintgroen { stroke: var(--components-progress-circle-mintgroen-
|
|
30604
|
+
.progress-circle__segment--neutral { stroke: var(--components-progress-circle-neutral-background-color); }
|
|
30605
|
+
.progress-circle__segment--accent { stroke: var(--components-progress-circle-accent-background-color); }
|
|
30606
|
+
.progress-circle__segment--success { stroke: var(--components-progress-circle-success-background-color); }
|
|
30607
|
+
.progress-circle__segment--warning { stroke: var(--components-progress-circle-warning-background-color); }
|
|
30608
|
+
.progress-circle__segment--critical { stroke: var(--components-progress-circle-critical-background-color); }
|
|
30609
|
+
.progress-circle__segment--coolgray { stroke: var(--components-progress-circle-coolgray-background-color); }
|
|
30610
|
+
.progress-circle__segment--lintblauw { stroke: var(--components-progress-circle-lintblauw-background-color); }
|
|
30611
|
+
.progress-circle__segment--donkerblauw { stroke: var(--components-progress-circle-donkerblauw-background-color); }
|
|
30612
|
+
.progress-circle__segment--hemelblauw { stroke: var(--components-progress-circle-hemelblauw-background-color); }
|
|
30613
|
+
.progress-circle__segment--lichtblauw { stroke: var(--components-progress-circle-lichtblauw-background-color); }
|
|
30614
|
+
.progress-circle__segment--paars { stroke: var(--components-progress-circle-paars-background-color); }
|
|
30615
|
+
.progress-circle__segment--violet { stroke: var(--components-progress-circle-violet-background-color); }
|
|
30616
|
+
.progress-circle__segment--robijnrood { stroke: var(--components-progress-circle-robijnrood-background-color); }
|
|
30617
|
+
.progress-circle__segment--roze { stroke: var(--components-progress-circle-roze-background-color); }
|
|
30618
|
+
.progress-circle__segment--rood { stroke: var(--components-progress-circle-rood-background-color); }
|
|
30619
|
+
.progress-circle__segment--oranje { stroke: var(--components-progress-circle-oranje-background-color); }
|
|
30620
|
+
.progress-circle__segment--donkergeel { stroke: var(--components-progress-circle-donkergeel-background-color); }
|
|
30621
|
+
.progress-circle__segment--geel { stroke: var(--components-progress-circle-geel-background-color); }
|
|
30622
|
+
.progress-circle__segment--donkerbruin { stroke: var(--components-progress-circle-donkerbruin-background-color); }
|
|
30623
|
+
.progress-circle__segment--bruin { stroke: var(--components-progress-circle-bruin-background-color); }
|
|
30624
|
+
.progress-circle__segment--donkergroen { stroke: var(--components-progress-circle-donkergroen-background-color); }
|
|
30625
|
+
.progress-circle__segment--groen { stroke: var(--components-progress-circle-groen-background-color); }
|
|
30626
|
+
.progress-circle__segment--mosgroen { stroke: var(--components-progress-circle-mosgroen-background-color); }
|
|
30627
|
+
.progress-circle__segment--mintgroen { stroke: var(--components-progress-circle-mintgroen-background-color); }
|
|
30494
30628
|
|
|
30495
30629
|
|
|
30496
30630
|
/* # Spinner (indeterminate)
|
|
@@ -30505,7 +30639,7 @@ const progressCircleStyles = css`
|
|
|
30505
30639
|
stroke-width: var(--_stroke-width);
|
|
30506
30640
|
stroke-dasharray: 25 100;
|
|
30507
30641
|
stroke-dashoffset: 0;
|
|
30508
|
-
stroke: var(--_indeterminate-
|
|
30642
|
+
stroke: var(--_indeterminate-background-color);
|
|
30509
30643
|
opacity: 1;
|
|
30510
30644
|
transform-origin: 50% 50%;
|
|
30511
30645
|
transition: opacity var(--primitives-transition-duration-slow) ease-out;
|
|
@@ -30524,40 +30658,52 @@ const progressCircleStyles = css`
|
|
|
30524
30658
|
/* # Indeterminate fill colour follows the color variant; default accent (blue) */
|
|
30525
30659
|
|
|
30526
30660
|
:host {
|
|
30527
|
-
--_indeterminate-
|
|
30528
|
-
}
|
|
30529
|
-
|
|
30530
|
-
:host([color="neutral"]) { --_indeterminate-
|
|
30531
|
-
:host([color="accent"]) { --_indeterminate-
|
|
30532
|
-
:host([color="success"]) { --_indeterminate-
|
|
30533
|
-
:host([color="warning"]) { --_indeterminate-
|
|
30534
|
-
:host([color="critical"]) { --_indeterminate-
|
|
30535
|
-
:host([color="coolgray"]) { --_indeterminate-
|
|
30536
|
-
:host([color="lintblauw"]) { --_indeterminate-
|
|
30537
|
-
:host([color="donkerblauw"]) { --_indeterminate-
|
|
30538
|
-
:host([color="hemelblauw"]) { --_indeterminate-
|
|
30539
|
-
:host([color="lichtblauw"]) { --_indeterminate-
|
|
30540
|
-
:host([color="paars"]) { --_indeterminate-
|
|
30541
|
-
:host([color="violet"]) { --_indeterminate-
|
|
30542
|
-
:host([color="robijnrood"]) { --_indeterminate-
|
|
30543
|
-
:host([color="roze"]) { --_indeterminate-
|
|
30544
|
-
:host([color="rood"]) { --_indeterminate-
|
|
30545
|
-
:host([color="oranje"]) { --_indeterminate-
|
|
30546
|
-
:host([color="donkergeel"]) { --_indeterminate-
|
|
30547
|
-
:host([color="geel"]) { --_indeterminate-
|
|
30548
|
-
:host([color="donkerbruin"]) { --_indeterminate-
|
|
30549
|
-
:host([color="bruin"]) { --_indeterminate-
|
|
30550
|
-
:host([color="donkergroen"]) { --_indeterminate-
|
|
30551
|
-
:host([color="groen"]) { --_indeterminate-
|
|
30552
|
-
:host([color="mosgroen"]) { --_indeterminate-
|
|
30553
|
-
:host([color="mintgroen"]) { --_indeterminate-
|
|
30554
|
-
|
|
30555
|
-
|
|
30556
|
-
/* #
|
|
30661
|
+
--_indeterminate-background-color: var(--components-progress-circle-accent-background-color);
|
|
30662
|
+
}
|
|
30663
|
+
|
|
30664
|
+
:host([color="neutral"]) { --_indeterminate-background-color: var(--components-progress-circle-neutral-background-color); }
|
|
30665
|
+
:host([color="accent"]) { --_indeterminate-background-color: var(--components-progress-circle-accent-background-color); }
|
|
30666
|
+
:host([color="success"]) { --_indeterminate-background-color: var(--components-progress-circle-success-background-color); }
|
|
30667
|
+
:host([color="warning"]) { --_indeterminate-background-color: var(--components-progress-circle-warning-background-color); }
|
|
30668
|
+
:host([color="critical"]) { --_indeterminate-background-color: var(--components-progress-circle-critical-background-color); }
|
|
30669
|
+
:host([color="coolgray"]) { --_indeterminate-background-color: var(--components-progress-circle-coolgray-background-color); }
|
|
30670
|
+
:host([color="lintblauw"]) { --_indeterminate-background-color: var(--components-progress-circle-lintblauw-background-color); }
|
|
30671
|
+
:host([color="donkerblauw"]) { --_indeterminate-background-color: var(--components-progress-circle-donkerblauw-background-color); }
|
|
30672
|
+
:host([color="hemelblauw"]) { --_indeterminate-background-color: var(--components-progress-circle-hemelblauw-background-color); }
|
|
30673
|
+
:host([color="lichtblauw"]) { --_indeterminate-background-color: var(--components-progress-circle-lichtblauw-background-color); }
|
|
30674
|
+
:host([color="paars"]) { --_indeterminate-background-color: var(--components-progress-circle-paars-background-color); }
|
|
30675
|
+
:host([color="violet"]) { --_indeterminate-background-color: var(--components-progress-circle-violet-background-color); }
|
|
30676
|
+
:host([color="robijnrood"]) { --_indeterminate-background-color: var(--components-progress-circle-robijnrood-background-color); }
|
|
30677
|
+
:host([color="roze"]) { --_indeterminate-background-color: var(--components-progress-circle-roze-background-color); }
|
|
30678
|
+
:host([color="rood"]) { --_indeterminate-background-color: var(--components-progress-circle-rood-background-color); }
|
|
30679
|
+
:host([color="oranje"]) { --_indeterminate-background-color: var(--components-progress-circle-oranje-background-color); }
|
|
30680
|
+
:host([color="donkergeel"]) { --_indeterminate-background-color: var(--components-progress-circle-donkergeel-background-color); }
|
|
30681
|
+
:host([color="geel"]) { --_indeterminate-background-color: var(--components-progress-circle-geel-background-color); }
|
|
30682
|
+
:host([color="donkerbruin"]) { --_indeterminate-background-color: var(--components-progress-circle-donkerbruin-background-color); }
|
|
30683
|
+
:host([color="bruin"]) { --_indeterminate-background-color: var(--components-progress-circle-bruin-background-color); }
|
|
30684
|
+
:host([color="donkergroen"]) { --_indeterminate-background-color: var(--components-progress-circle-donkergroen-background-color); }
|
|
30685
|
+
:host([color="groen"]) { --_indeterminate-background-color: var(--components-progress-circle-groen-background-color); }
|
|
30686
|
+
:host([color="mosgroen"]) { --_indeterminate-background-color: var(--components-progress-circle-mosgroen-background-color); }
|
|
30687
|
+
:host([color="mintgroen"]) { --_indeterminate-background-color: var(--components-progress-circle-mintgroen-background-color); }
|
|
30688
|
+
|
|
30689
|
+
|
|
30690
|
+
/* # Caption (label + value) */
|
|
30691
|
+
|
|
30692
|
+
.progress-circle__caption {
|
|
30693
|
+
display: flex;
|
|
30694
|
+
flex-direction: column;
|
|
30695
|
+
align-items: center;
|
|
30696
|
+
}
|
|
30557
30697
|
|
|
30558
30698
|
.progress-circle__text {
|
|
30559
|
-
color: var(--
|
|
30560
|
-
font: var(--
|
|
30699
|
+
color: var(--_text-color);
|
|
30700
|
+
font: var(--_text-font);
|
|
30701
|
+
text-align: center;
|
|
30702
|
+
}
|
|
30703
|
+
|
|
30704
|
+
.progress-circle__supporting-text {
|
|
30705
|
+
color: var(--_supporting-text-color);
|
|
30706
|
+
font: var(--_supporting-text-font);
|
|
30561
30707
|
text-align: center;
|
|
30562
30708
|
}
|
|
30563
30709
|
|
|
@@ -30608,10 +30754,12 @@ const progressCircleSegmentStyles = css`
|
|
|
30608
30754
|
}
|
|
30609
30755
|
`;
|
|
30610
30756
|
function getStrokeWidthPx(sizeInPixels) {
|
|
30611
|
-
if (sizeInPixels <=
|
|
30612
|
-
if (sizeInPixels <=
|
|
30613
|
-
if (sizeInPixels <=
|
|
30614
|
-
return 6;
|
|
30757
|
+
if (sizeInPixels <= 16) return 3;
|
|
30758
|
+
if (sizeInPixels <= 28) return 4;
|
|
30759
|
+
if (sizeInPixels <= 40) return 5;
|
|
30760
|
+
if (sizeInPixels <= 48) return 6;
|
|
30761
|
+
if (sizeInPixels <= 64) return 7;
|
|
30762
|
+
return 8;
|
|
30615
30763
|
}
|
|
30616
30764
|
function getRadius(sizeInPixels) {
|
|
30617
30765
|
const strokeWidthUserUnits = getStrokeWidthPx(sizeInPixels) * 100 / sizeInPixels;
|
|
@@ -30620,6 +30768,9 @@ function getRadius(sizeInPixels) {
|
|
|
30620
30768
|
function getCircumference(sizeInPixels) {
|
|
30621
30769
|
return 2 * Math.PI * getRadius(sizeInPixels);
|
|
30622
30770
|
}
|
|
30771
|
+
function getBorderErodeRadius(sizeInPixels) {
|
|
30772
|
+
return 100 / sizeInPixels;
|
|
30773
|
+
}
|
|
30623
30774
|
function progressCircleTemplate(component, onSlotChange) {
|
|
30624
30775
|
const tooltipText = component._tooltipText;
|
|
30625
30776
|
const ariaText = component._ariaValueText;
|
|
@@ -30631,6 +30782,9 @@ function progressCircleTemplate(component, onSlotChange) {
|
|
|
30631
30782
|
const sizeInPixels = Number(component.size) || 28;
|
|
30632
30783
|
const radius = getRadius(sizeInPixels);
|
|
30633
30784
|
const circumference = getCircumference(sizeInPixels);
|
|
30785
|
+
const borderErodeRadius = getBorderErodeRadius(sizeInPixels).toFixed(3);
|
|
30786
|
+
const arcColors = [...new Set(arcs.map((arc) => arc.color))];
|
|
30787
|
+
const uid = component._uid;
|
|
30634
30788
|
const ariaLabel = component.text || component._t("components.progress-circle.label-text");
|
|
30635
30789
|
const circle = html`
|
|
30636
30790
|
<div class="progress-circle__circle"
|
|
@@ -30645,24 +30799,42 @@ function progressCircleTemplate(component, onSlotChange) {
|
|
|
30645
30799
|
viewBox="0 0 100 100"
|
|
30646
30800
|
aria-hidden="true"
|
|
30647
30801
|
>
|
|
30802
|
+
<defs>
|
|
30803
|
+
<filter id="progress-circle-border-track-${uid}" filterUnits="userSpaceOnUse" x="-10" y="-10" width="120" height="120" color-interpolation-filters="sRGB">
|
|
30804
|
+
<feMorphology in="SourceGraphic" operator="erode" radius=${borderErodeRadius} result="eroded"></feMorphology>
|
|
30805
|
+
<feComposite operator="out" in="SourceGraphic" in2="eroded" result="edge"></feComposite>
|
|
30806
|
+
<feFlood style="flood-color: var(--_track-border-color)" result="flood"></feFlood>
|
|
30807
|
+
<feComposite operator="in" in="flood" in2="edge" result="colored"></feComposite>
|
|
30808
|
+
<feComposite operator="over" in="colored" in2="SourceGraphic"></feComposite>
|
|
30809
|
+
</filter>
|
|
30810
|
+
${arcColors.map((color) => svg`
|
|
30811
|
+
<filter id="progress-circle-border-${color}-${uid}" filterUnits="userSpaceOnUse" x="-10" y="-10" width="120" height="120" color-interpolation-filters="sRGB">
|
|
30812
|
+
<feMorphology in="SourceGraphic" operator="erode" radius=${borderErodeRadius} result="eroded"></feMorphology>
|
|
30813
|
+
<feComposite operator="out" in="SourceGraphic" in2="eroded" result="edge"></feComposite>
|
|
30814
|
+
<feFlood style="flood-color: var(--components-progress-circle-${color}-border-color)" result="flood"></feFlood>
|
|
30815
|
+
<feComposite operator="in" in="flood" in2="edge" result="colored"></feComposite>
|
|
30816
|
+
<feComposite operator="over" in="colored" in2="SourceGraphic"></feComposite>
|
|
30817
|
+
</filter>
|
|
30818
|
+
`)}
|
|
30819
|
+
</defs>
|
|
30648
30820
|
<circle class="progress-circle__track"
|
|
30649
30821
|
cx="50"
|
|
30650
30822
|
cy="50"
|
|
30651
30823
|
r=${radius}
|
|
30652
30824
|
fill="none"
|
|
30825
|
+
filter="url(#progress-circle-border-track-${uid})"
|
|
30653
30826
|
></circle>
|
|
30654
|
-
|
|
30655
|
-
|
|
30656
|
-
|
|
30657
|
-
|
|
30658
|
-
|
|
30659
|
-
|
|
30660
|
-
|
|
30661
|
-
|
|
30662
|
-
|
|
30663
|
-
|
|
30664
|
-
|
|
30665
|
-
</g>
|
|
30827
|
+
${arcs.map((arc) => svg`
|
|
30828
|
+
<circle class="progress-circle__segment progress-circle__segment--${arc.color}"
|
|
30829
|
+
cx="50"
|
|
30830
|
+
cy="50"
|
|
30831
|
+
r=${radius}
|
|
30832
|
+
fill="none"
|
|
30833
|
+
stroke-dasharray="${arc.length} ${circumference}"
|
|
30834
|
+
stroke-dashoffset=${-arc.offset}
|
|
30835
|
+
filter="url(#progress-circle-border-${arc.color}-${uid})"
|
|
30836
|
+
></circle>
|
|
30837
|
+
`)}
|
|
30666
30838
|
${isIndeterminate ? svg`
|
|
30667
30839
|
<circle class="progress-circle__indeterminate-indicator"
|
|
30668
30840
|
cx="50"
|
|
@@ -30686,7 +30858,12 @@ function progressCircleTemplate(component, onSlotChange) {
|
|
|
30686
30858
|
return html`
|
|
30687
30859
|
${wrappedCircle}
|
|
30688
30860
|
<slot @slotchange=${onSlotChange}></slot>
|
|
30689
|
-
${component.text
|
|
30861
|
+
${component.text || component.valueDisplay === "inline" && component._displayValue ? html`
|
|
30862
|
+
<div class="progress-circle__caption">
|
|
30863
|
+
${component.text ? html`<span class="progress-circle__text">${component.text}</span>` : nothing}
|
|
30864
|
+
${component.valueDisplay === "inline" && component._displayValue ? html`<span class="progress-circle__supporting-text">${component._displayValue}</span>` : nothing}
|
|
30865
|
+
</div>
|
|
30866
|
+
` : nothing}
|
|
30690
30867
|
`;
|
|
30691
30868
|
}
|
|
30692
30869
|
const nlddProgressCircleTranslations = {
|
|
@@ -30740,6 +30917,8 @@ let NLDDProgressCircle = class extends LitElement {
|
|
|
30740
30917
|
this.size = "28";
|
|
30741
30918
|
this.text = "";
|
|
30742
30919
|
this.valueFormat = "percentage";
|
|
30920
|
+
this.valueText = "";
|
|
30921
|
+
this.valueDisplay = "tooltip";
|
|
30743
30922
|
this.accessibleLabel = "";
|
|
30744
30923
|
this.indeterminate = false;
|
|
30745
30924
|
this.translations = {};
|
|
@@ -30747,6 +30926,7 @@ let NLDDProgressCircle = class extends LitElement {
|
|
|
30747
30926
|
this._indeterminateExiting = false;
|
|
30748
30927
|
this._indeterminateEntering = false;
|
|
30749
30928
|
this._arcsAtZero = false;
|
|
30929
|
+
this._uid = `pc-${NLDDProgressCircle._idCounter++}`;
|
|
30750
30930
|
this._onSlotChangeBound = this._onSlotChange.bind(this);
|
|
30751
30931
|
}
|
|
30752
30932
|
_t(key) {
|
|
@@ -30765,15 +30945,23 @@ let NLDDProgressCircle = class extends LitElement {
|
|
|
30765
30945
|
if (this.max <= 0) return 0;
|
|
30766
30946
|
return Math.min(100, this._totalValue / this.max * 100);
|
|
30767
30947
|
}
|
|
30768
|
-
/**
|
|
30769
|
-
*
|
|
30770
|
-
*
|
|
30771
|
-
|
|
30772
|
-
|
|
30948
|
+
/** Formatted value for inline display (value-display="inline"). Mirrors
|
|
30949
|
+
* nldd-progress-bar: valueText wins, empty while indeterminate, otherwise
|
|
30950
|
+
* the total formatted per value-format. */
|
|
30951
|
+
get _displayValue() {
|
|
30952
|
+
if (this.valueText) return this.valueText;
|
|
30953
|
+
if (this.indeterminate) return "";
|
|
30954
|
+
return this._formatValuePart(this._totalValue, Math.round(this._percentage));
|
|
30955
|
+
}
|
|
30956
|
+
/** Compact text shown in the tooltip — only in value-display="tooltip" mode
|
|
30957
|
+
* (returns '' otherwise, so the template skips the tooltip wrapper). Follows
|
|
30958
|
+
* value-format (matching nldd-progress-bar's per-segment tooltip style) and
|
|
30959
|
+
* omits the "voltooid" suffix that aria-valuetext uses for screen readers.
|
|
30960
|
+
* valueText overrides the whole thing; indeterminate shows the loading text. */
|
|
30773
30961
|
get _tooltipText() {
|
|
30774
|
-
if (this.
|
|
30962
|
+
if (this.valueDisplay !== "tooltip") return "";
|
|
30775
30963
|
if (this.indeterminate) return this._t("components.progress-circle.loading-text");
|
|
30776
|
-
if (this.
|
|
30964
|
+
if (this.valueText) return this.valueText;
|
|
30777
30965
|
if (!this._hasSegments) {
|
|
30778
30966
|
const v = Math.max(0, this.value ?? 0);
|
|
30779
30967
|
const pct = this.max > 0 ? Math.round(v / this.max * 100) : 0;
|
|
@@ -30830,12 +31018,6 @@ let NLDDProgressCircle = class extends LitElement {
|
|
|
30830
31018
|
case "fraction":
|
|
30831
31019
|
return `${value} / ${this.max}`;
|
|
30832
31020
|
case "percentage":
|
|
30833
|
-
case "none":
|
|
30834
|
-
// 'none' is listed only for exhaustiveness — the segment
|
|
30835
|
-
// template skips calling _formatValuePart when valueFormat
|
|
30836
|
-
// is 'none', so this branch is never reached with 'none'
|
|
30837
|
-
// under normal flow.
|
|
30838
|
-
// falls through
|
|
30839
31021
|
default:
|
|
30840
31022
|
return `${pct}%`;
|
|
30841
31023
|
}
|
|
@@ -30983,6 +31165,7 @@ let NLDDProgressCircle = class extends LitElement {
|
|
|
30983
31165
|
}
|
|
30984
31166
|
};
|
|
30985
31167
|
NLDDProgressCircle.styles = progressCircleStyles;
|
|
31168
|
+
NLDDProgressCircle._idCounter = 0;
|
|
30986
31169
|
__decorateClass$1([
|
|
30987
31170
|
property({ type: String, reflect: true })
|
|
30988
31171
|
], NLDDProgressCircle.prototype, "mode", 2);
|
|
@@ -31004,6 +31187,12 @@ __decorateClass$1([
|
|
|
31004
31187
|
__decorateClass$1([
|
|
31005
31188
|
property({ type: String, reflect: true, attribute: "value-format" })
|
|
31006
31189
|
], NLDDProgressCircle.prototype, "valueFormat", 2);
|
|
31190
|
+
__decorateClass$1([
|
|
31191
|
+
property({ type: String, reflect: true, attribute: "value-text" })
|
|
31192
|
+
], NLDDProgressCircle.prototype, "valueText", 2);
|
|
31193
|
+
__decorateClass$1([
|
|
31194
|
+
property({ type: String, reflect: true, attribute: "value-display" })
|
|
31195
|
+
], NLDDProgressCircle.prototype, "valueDisplay", 2);
|
|
31007
31196
|
__decorateClass$1([
|
|
31008
31197
|
property({ type: String, reflect: true, attribute: "accessible-label" })
|
|
31009
31198
|
], NLDDProgressCircle.prototype, "accessibleLabel", 2);
|
|
@@ -31037,6 +31226,7 @@ const progressStyles = css`
|
|
|
31037
31226
|
--_fade-duration: var(--primitives-transition-duration-slow);
|
|
31038
31227
|
--_indicator-max-width: var(--primitives-area-240);
|
|
31039
31228
|
|
|
31229
|
+
${inheritedTextReset}
|
|
31040
31230
|
box-sizing: border-box;
|
|
31041
31231
|
display: flex;
|
|
31042
31232
|
flex-grow: 1;
|