@nvidia-elements/themes 0.0.0 → 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/LICENSE +202 -0
  3. package/package.json +4 -1
  4. package/dist/bundles/index.css +0 -6
  5. package/dist/compact.css +0 -1
  6. package/dist/compact.js +0 -6
  7. package/dist/compact.json +0 -5
  8. package/dist/custom-elements-jsx.d.ts +0 -76
  9. package/dist/custom-elements-vue.d.ts +0 -15
  10. package/dist/custom-elements.json +0 -82
  11. package/dist/dark.css +0 -1
  12. package/dist/dark.js +0 -388
  13. package/dist/dark.json +0 -387
  14. package/dist/data.css-vars.json +0 -4017
  15. package/dist/data.snippets.json +0 -1
  16. package/dist/debug.css +0 -1
  17. package/dist/debug.js +0 -7
  18. package/dist/debug.json +0 -6
  19. package/dist/elements.css +0 -1
  20. package/dist/elements.json +0 -550
  21. package/dist/fonts/LICENSE.md +0 -92
  22. package/dist/fonts/inter.css +0 -20
  23. package/dist/fonts/inter.woff2 +0 -0
  24. package/dist/high-contrast.css +0 -1
  25. package/dist/high-contrast.js +0 -65
  26. package/dist/high-contrast.json +0 -64
  27. package/dist/index.css +0 -1
  28. package/dist/index.d.ts +0 -2
  29. package/dist/index.examples.js +0 -6
  30. package/dist/index.examples.js.map +0 -1
  31. package/dist/index.examples.json +0 -51
  32. package/dist/index.js +0 -551
  33. package/dist/index.js.map +0 -1
  34. package/dist/index.json +0 -550
  35. package/dist/index.metadata.json +0 -2966
  36. package/dist/reduced-motion.css +0 -1
  37. package/dist/reduced-motion.js +0 -10
  38. package/dist/reduced-motion.json +0 -9
  39. package/dist/schema.json +0 -586
package/dist/fonts/LICENSE.md DELETED
@@ -1,92 +0,0 @@
1
- Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)
2
-
3
- This Font Software is licensed under the SIL Open Font License, Version 1.1.
4
- This license is copied below, and is also available with a FAQ at:
5
- https://openfontlicense.org
6
-
7
- ---
8
-
9
- ## SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
10
-
11
- PREAMBLE
12
- The goals of the Open Font License (OFL) are to stimulate worldwide
13
- development of collaborative font projects, to support the font creation
14
- efforts of academic and linguistic communities, and to provide a free and
15
- open framework in which fonts may be shared and improved in partnership
16
- with others.
17
-
18
- The OFL allows the licensed fonts to be used, studied, modified and
19
- redistributed freely as long as they are not sold by themselves. The
20
- fonts, including any derivative works, can be bundled, embedded,
21
- redistributed and/or sold with any software provided that any reserved
22
- names are not used by derivative works. The fonts and derivatives,
23
- however, cannot be released under any other type of license. The
24
- requirement for fonts to remain under this license does not apply
25
- to any document created using the fonts or their derivatives.
26
-
27
- DEFINITIONS
28
- "Font Software" refers to the set of files released by the Copyright
29
- Holder(s) under this license and clearly marked as such. This may
30
- include source files, build scripts and documentation.
31
-
32
- "Reserved Font Name" refers to any names specified as such after the
33
- copyright statement(s).
34
-
35
- "Original Version" refers to the collection of Font Software components as
36
- distributed by the Copyright Holder(s).
37
-
38
- "Modified Version" refers to any derivative made by adding to, deleting,
39
- or substituting -- in part or in whole -- any of the components of the
40
- Original Version, by changing formats or by porting the Font Software to a
41
- new environment.
42
-
43
- "Author" refers to any designer, engineer, programmer, technical
44
- writer or other person who contributed to the Font Software.
45
-
46
- PERMISSION & CONDITIONS
47
- Permission is hereby granted, free of charge, to any person obtaining
48
- a copy of the Font Software, to use, study, copy, merge, embed, modify,
49
- redistribute, and sell modified and unmodified copies of the Font
50
- Software, subject to the following conditions:
51
-
52
- 1. Neither the Font Software nor any of its individual components,
53
- in Original or Modified Versions, may be sold by itself.
54
-
55
- 2. Original or Modified Versions of the Font Software may be bundled,
56
- redistributed and/or sold with any software, provided that each copy
57
- contains the above copyright notice and this license. These can be
58
- included either as stand-alone text files, human-readable headers or
59
- in the appropriate machine-readable metadata fields within text or
60
- binary files as long as those fields can be easily viewed by the user.
61
-
62
- 3. No Modified Version of the Font Software may use the Reserved Font
63
- Name(s) unless explicit written permission is granted by the corresponding
64
- Copyright Holder. This restriction only applies to the primary font name as
65
- presented to the users.
66
-
67
- 4. The name(s) of the Copyright Holder(s) or the Author(s) of the Font
68
- Software shall not be used to promote, endorse or advertise any
69
- Modified Version, except to acknowledge the contribution(s) of the
70
- Copyright Holder(s) and the Author(s) or with their explicit written
71
- permission.
72
-
73
- 5. The Font Software, modified or unmodified, in part or in whole,
74
- must be distributed entirely under this license, and must not be
75
- distributed under any other license. The requirement for fonts to
76
- remain under this license does not apply to any document created
77
- using the Font Software.
78
-
79
- TERMINATION
80
- This license becomes null and void if any of the above conditions are
81
- not met.
82
-
83
- DISCLAIMER
84
- THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
85
- EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
86
- MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
87
- OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
88
- COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
89
- INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
90
- DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
91
- FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
92
- OTHER DEALINGS IN THE FONT SOFTWARE.
package/dist/fonts/inter.css DELETED
@@ -1,20 +0,0 @@
1
- /* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */
2
- /* SPDX-License-Identifier: Apache-2.0 */
3
-
4
- @font-face {
5
- src: url('./inter.woff2') format('woff2');
6
- font-family: Inter;
7
- font-display: swap;
8
- }
9
-
10
- /* fallback for safari font-synthesis */
11
- @font-face {
12
- src: url('./inter.woff2') format('woff2');
13
- font-family: Inter;
14
- font-display: swap;
15
- font-weight: 600;
16
- }
17
-
18
- [nve-theme~='inter'] {
19
- --nve-ref-font-family: 'Inter', Roboto, 'Open Sans', 'Helvetica Neue', sans-serif !important;
20
- }
package/dist/fonts/inter.woff2 DELETED
Binary file
package/dist/high-contrast.css DELETED
@@ -1 +0,0 @@
1
- :root{--nve-config-color-scheme-high-contrast:true}[nve-theme*=high-contrast]{--nve-config-color-scheme-high-contrast:true;--nve-ref-border-color:CanvasText;--nve-ref-border-color-emphasis:CanvasText;--nve-ref-border-color-muted:CanvasText;--nve-ref-shadow-100:0 0 0 2px CanvasText;--nve-ref-shadow-200:0 0 0 2px CanvasText;--nve-ref-shadow-300:0 0 0 2px CanvasText;--nve-ref-shadow-400:0 0 0 2px CanvasText;--nve-ref-shadow-500:0 0 0 2px CanvasText;--nve-sys-color-scheme:light;--nve-sys-text-color:CanvasText;--nve-sys-text-muted-color:GrayText;--nve-sys-text-emphasis-color:CanvasText;--nve-sys-text-placeholder-color:GrayText;--nve-sys-text-link-color:LinkText;--nve-sys-text-link-hover-color:ActiveText;--nve-sys-text-link-visited-color:VisitedText;--nve-sys-text-link-disabled-color:GrayText;--nve-sys-interaction-color:ButtonText;--nve-sys-interaction-background:ButtonFace;--nve-sys-interaction-background-100:ButtonFace;--nve-sys-interaction-background-200:ButtonFace;--nve-sys-interaction-background-300:ButtonFace;--nve-sys-interaction-field-color:FieldText;--nve-sys-interaction-field-background:ButtonFace;--nve-sys-interaction-field-background-100:ButtonFace;--nve-sys-interaction-field-background-200:ButtonFace;--nve-sys-interaction-field-background-300:ButtonFace;--nve-sys-interaction-destructive-color:ButtonText;--nve-sys-interaction-destructive-background:ButtonFace;--nve-sys-interaction-emphasize-color:ButtonText;--nve-sys-interaction-emphasize-background:ButtonFace;--nve-sys-layer-canvas-background:Canvas;--nve-sys-layer-canvas-color:CanvasText;--nve-sys-layer-container-background:Canvas;--nve-sys-layer-container-color:CanvasText;--nve-sys-layer-overlay-background:Canvas;--nve-sys-layer-overlay-color:CanvasText;--nve-sys-layer-popover-background:Canvas;--nve-sys-layer-popover-color:CanvasText;--nve-sys-accent-primary-background:var(--nve-ref-color-brand-green-900);--nve-sys-accent-secondary-background:var(--nve-ref-color-blue-cobalt-1000);--nve-sys-interaction-disabled-color:var(--nve-ref-color-gray-slate-800);--nve-sys-interaction-disabled-background:var(--nve-ref-color-gray-slate-600);--nve-sys-interaction-selected-color:var(--nve-sys-text-color);--nve-sys-interaction-selected-background:var(--nve-sys-interaction-background);--nve-sys-support-color:var(--nve-ref-color-gray-slate-1000);--nve-sys-support-muted-color:var(--nve-ref-color-gray-slate-600);--nve-sys-support-emphasis-color:var(--nve-ref-color-gray-slate-1100);--nve-sys-support-accent-color:var(--nve-ref-color-blue-cobalt-1100);--nve-sys-support-accent-muted-color:var(--nve-ref-color-blue-cobalt-400);--nve-sys-support-accent-emphasis-color:var(--nve-ref-color-blue-cobalt-1100);--nve-sys-support-success-color:var(--nve-ref-color-green-grass-1100);--nve-sys-support-success-muted-color:var(--nve-ref-color-green-grass-400);--nve-sys-support-success-emphasis-color:var(--nve-ref-color-green-grass-1100);--nve-sys-support-danger-color:var(--nve-ref-color-red-cardinal-1100);--nve-sys-support-danger-muted-color:var(--nve-ref-color-red-cardinal-400);--nve-sys-support-danger-emphasis-color:var(--nve-ref-color-red-cardinal-1100);--nve-sys-support-warning-color:var(--nve-ref-color-yellow-nova-800);--nve-sys-support-warning-muted-color:var(--nve-ref-color-yellow-nova-300);--nve-sys-support-warning-emphasis-color:var(--nve-ref-color-yellow-nova-1000);--nve-sys-accent-tertiary-background:var(--nve-ref-color-scheme-inverse)}
package/dist/high-contrast.js DELETED
@@ -1,65 +0,0 @@
1
- export const VERSION = '0.0.0';
2
- export const theme = {
3
- 'nve-config-color-scheme-high-contrast': "true",
4
- 'nve-ref-border-color': "CanvasText",
5
- 'nve-ref-border-color-emphasis': "CanvasText",
6
- 'nve-ref-border-color-muted': "CanvasText",
7
- 'nve-ref-shadow-100': "0 0 0 2px CanvasText",
8
- 'nve-ref-shadow-200': "0 0 0 2px CanvasText",
9
- 'nve-ref-shadow-300': "0 0 0 2px CanvasText",
10
- 'nve-ref-shadow-400': "0 0 0 2px CanvasText",
11
- 'nve-ref-shadow-500': "0 0 0 2px CanvasText",
12
- 'nve-sys-color-scheme': "light",
13
- 'nve-sys-text-color': "CanvasText",
14
- 'nve-sys-text-muted-color': "GrayText",
15
- 'nve-sys-text-emphasis-color': "CanvasText",
16
- 'nve-sys-text-placeholder-color': "GrayText",
17
- 'nve-sys-text-link-color': "LinkText",
18
- 'nve-sys-text-link-hover-color': "ActiveText",
19
- 'nve-sys-text-link-visited-color': "VisitedText",
20
- 'nve-sys-text-link-disabled-color': "GrayText",
21
- 'nve-sys-interaction-color': "ButtonText",
22
- 'nve-sys-interaction-background': "ButtonFace",
23
- 'nve-sys-interaction-background-100': "ButtonFace",
24
- 'nve-sys-interaction-background-200': "ButtonFace",
25
- 'nve-sys-interaction-background-300': "ButtonFace",
26
- 'nve-sys-interaction-field-color': "FieldText",
27
- 'nve-sys-interaction-field-background': "ButtonFace",
28
- 'nve-sys-interaction-field-background-100': "ButtonFace",
29
- 'nve-sys-interaction-field-background-200': "ButtonFace",
30
- 'nve-sys-interaction-field-background-300': "ButtonFace",
31
- 'nve-sys-interaction-destructive-color': "ButtonText",
32
- 'nve-sys-interaction-destructive-background': "ButtonFace",
33
- 'nve-sys-interaction-emphasize-color': "ButtonText",
34
- 'nve-sys-interaction-emphasize-background': "ButtonFace",
35
- 'nve-sys-layer-canvas-background': "Canvas",
36
- 'nve-sys-layer-canvas-color': "CanvasText",
37
- 'nve-sys-layer-container-background': "Canvas",
38
- 'nve-sys-layer-container-color': "CanvasText",
39
- 'nve-sys-layer-overlay-background': "Canvas",
40
- 'nve-sys-layer-overlay-color': "CanvasText",
41
- 'nve-sys-layer-popover-background': "Canvas",
42
- 'nve-sys-layer-popover-color': "CanvasText",
43
- 'nve-sys-accent-primary-background': "var(--nve-ref-color-brand-green-900)",
44
- 'nve-sys-accent-secondary-background': "var(--nve-ref-color-blue-cobalt-1000)",
45
- 'nve-sys-interaction-disabled-color': "var(--nve-ref-color-gray-slate-800)",
46
- 'nve-sys-interaction-disabled-background': "var(--nve-ref-color-gray-slate-600)",
47
- 'nve-sys-interaction-selected-color': "var(--nve-sys-text-color)",
48
- 'nve-sys-interaction-selected-background': "var(--nve-sys-interaction-background)",
49
- 'nve-sys-support-color': "var(--nve-ref-color-gray-slate-1000)",
50
- 'nve-sys-support-muted-color': "var(--nve-ref-color-gray-slate-600)",
51
- 'nve-sys-support-emphasis-color': "var(--nve-ref-color-gray-slate-1100)",
52
- 'nve-sys-support-accent-color': "var(--nve-ref-color-blue-cobalt-1100)",
53
- 'nve-sys-support-accent-muted-color': "var(--nve-ref-color-blue-cobalt-400)",
54
- 'nve-sys-support-accent-emphasis-color': "var(--nve-ref-color-blue-cobalt-1100)",
55
- 'nve-sys-support-success-color': "var(--nve-ref-color-green-grass-1100)",
56
- 'nve-sys-support-success-muted-color': "var(--nve-ref-color-green-grass-400)",
57
- 'nve-sys-support-success-emphasis-color': "var(--nve-ref-color-green-grass-1100)",
58
- 'nve-sys-support-danger-color': "var(--nve-ref-color-red-cardinal-1100)",
59
- 'nve-sys-support-danger-muted-color': "var(--nve-ref-color-red-cardinal-400)",
60
- 'nve-sys-support-danger-emphasis-color': "var(--nve-ref-color-red-cardinal-1100)",
61
- 'nve-sys-support-warning-color': "var(--nve-ref-color-yellow-nova-800)",
62
- 'nve-sys-support-warning-muted-color': "var(--nve-ref-color-yellow-nova-300)",
63
- 'nve-sys-support-warning-emphasis-color': "var(--nve-ref-color-yellow-nova-1000)",
64
- 'nve-sys-accent-tertiary-background': "var(--nve-ref-color-scheme-inverse)"
65
- }
package/dist/high-contrast.json DELETED
@@ -1,64 +0,0 @@
1
- {
2
- "nve-config-color-scheme-high-contrast": "true",
3
- "nve-ref-border-color": "CanvasText",
4
- "nve-ref-border-color-emphasis": "CanvasText",
5
- "nve-ref-border-color-muted": "CanvasText",
6
- "nve-ref-shadow-100": "0 0 0 2px CanvasText",
7
- "nve-ref-shadow-200": "0 0 0 2px CanvasText",
8
- "nve-ref-shadow-300": "0 0 0 2px CanvasText",
9
- "nve-ref-shadow-400": "0 0 0 2px CanvasText",
10
- "nve-ref-shadow-500": "0 0 0 2px CanvasText",
11
- "nve-sys-color-scheme": "light",
12
- "nve-sys-text-color": "CanvasText",
13
- "nve-sys-text-muted-color": "GrayText",
14
- "nve-sys-text-emphasis-color": "CanvasText",
15
- "nve-sys-text-placeholder-color": "GrayText",
16
- "nve-sys-text-link-color": "LinkText",
17
- "nve-sys-text-link-hover-color": "ActiveText",
18
- "nve-sys-text-link-visited-color": "VisitedText",
19
- "nve-sys-text-link-disabled-color": "GrayText",
20
- "nve-sys-interaction-color": "ButtonText",
21
- "nve-sys-interaction-background": "ButtonFace",
22
- "nve-sys-interaction-background-100": "ButtonFace",
23
- "nve-sys-interaction-background-200": "ButtonFace",
24
- "nve-sys-interaction-background-300": "ButtonFace",
25
- "nve-sys-interaction-field-color": "FieldText",
26
- "nve-sys-interaction-field-background": "ButtonFace",
27
- "nve-sys-interaction-field-background-100": "ButtonFace",
28
- "nve-sys-interaction-field-background-200": "ButtonFace",
29
- "nve-sys-interaction-field-background-300": "ButtonFace",
30
- "nve-sys-interaction-destructive-color": "ButtonText",
31
- "nve-sys-interaction-destructive-background": "ButtonFace",
32
- "nve-sys-interaction-emphasize-color": "ButtonText",
33
- "nve-sys-interaction-emphasize-background": "ButtonFace",
34
- "nve-sys-layer-canvas-background": "Canvas",
35
- "nve-sys-layer-canvas-color": "CanvasText",
36
- "nve-sys-layer-container-background": "Canvas",
37
- "nve-sys-layer-container-color": "CanvasText",
38
- "nve-sys-layer-overlay-background": "Canvas",
39
- "nve-sys-layer-overlay-color": "CanvasText",
40
- "nve-sys-layer-popover-background": "Canvas",
41
- "nve-sys-layer-popover-color": "CanvasText",
42
- "nve-sys-accent-primary-background": "nve-ref-color-brand-green-900",
43
- "nve-sys-accent-secondary-background": "nve-ref-color-blue-cobalt-1000",
44
- "nve-sys-interaction-disabled-color": "nve-ref-color-gray-slate-800",
45
- "nve-sys-interaction-disabled-background": "nve-ref-color-gray-slate-600",
46
- "nve-sys-interaction-selected-color": "nve-sys-text-color",
47
- "nve-sys-interaction-selected-background": "nve-sys-interaction-background",
48
- "nve-sys-support-color": "nve-ref-color-gray-slate-1000",
49
- "nve-sys-support-muted-color": "nve-ref-color-gray-slate-600",
50
- "nve-sys-support-emphasis-color": "nve-ref-color-gray-slate-1100",
51
- "nve-sys-support-accent-color": "nve-ref-color-blue-cobalt-1100",
52
- "nve-sys-support-accent-muted-color": "nve-ref-color-blue-cobalt-400",
53
- "nve-sys-support-accent-emphasis-color": "nve-ref-color-blue-cobalt-1100",
54
- "nve-sys-support-success-color": "nve-ref-color-green-grass-1100",
55
- "nve-sys-support-success-muted-color": "nve-ref-color-green-grass-400",
56
- "nve-sys-support-success-emphasis-color": "nve-ref-color-green-grass-1100",
57
- "nve-sys-support-danger-color": "nve-ref-color-red-cardinal-1100",
58
- "nve-sys-support-danger-muted-color": "nve-ref-color-red-cardinal-400",
59
- "nve-sys-support-danger-emphasis-color": "nve-ref-color-red-cardinal-1100",
60
- "nve-sys-support-warning-color": "nve-ref-color-yellow-nova-800",
61
- "nve-sys-support-warning-muted-color": "nve-ref-color-yellow-nova-300",
62
- "nve-sys-support-warning-emphasis-color": "nve-ref-color-yellow-nova-1000",
63
- "nve-sys-accent-tertiary-background": "nve-ref-color-scheme-inverse"
64
- }
package/dist/index.css DELETED
@@ -1 +0,0 @@
1
- html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}[nve-theme~=root],body[nve-theme],html[nve-theme]{background:var(--nve-sys-layer-canvas-background)!important;color:var(--nve-sys-layer-canvas-color)!important;color-scheme:var(--nve-sys-color-scheme)!important;font-family:var(--nve-ref-font-family)!important;text-rendering:optimizeSpeed}[nve-theme] body{margin:0}body:has([nve-popover]:popover-open){overflow-x:hidden}:has([nve-popover]){contain:none}:root,[nve-theme~=light]{--nve-config-color-scheme-light:true}:root,[nve-theme~=light]{--nve-ref-scale-text:1;--nve-ref-scale-size:1;--nve-ref-scale-space:1;--nve-ref-scale-border-radius:1;--nve-ref-scale-border-width:1;--nve-ref-scale-line-height:1;--nve-ref-color-white:oklch(100% 0 0);--nve-ref-color-black:oklch(0% 0 0);--nve-ref-color-alpha-white-100:oklch(100% 0 0/0);--nve-ref-color-alpha-white-200:oklch(100% 0 0/0.0118);--nve-ref-color-alpha-white-300:oklch(100% 0 0/0.0314);--nve-ref-color-alpha-white-400:oklch(100% 0 0/0.0588);--nve-ref-color-alpha-white-500:oklch(100% 0 0/0.0902);--nve-ref-color-alpha-white-600:oklch(100% 0 0/0.1216);--nve-ref-color-alpha-white-700:oklch(100% 0 0/0.1804);--nve-ref-color-alpha-white-800:oklch(100% 0 0/0.251);--nve-ref-color-alpha-white-900:oklch(100% 0 0/0.3882);--nve-ref-color-alpha-white-1000:oklch(100% 0 0/0.451);--nve-ref-color-alpha-white-1100:oklch(100% 0 0/0.5882);--nve-ref-color-alpha-white-1200:oklch(100% 0 0/0.9216);--nve-ref-color-alpha-black-100:oklch(0% 0 0/0);--nve-ref-color-alpha-black-200:oklch(0% 0 0/0.0118);--nve-ref-color-alpha-black-300:oklch(0% 0 0/0.0314);--nve-ref-color-alpha-black-400:oklch(0% 0 0/0.0588);--nve-ref-color-alpha-black-500:oklch(0% 0 0/0.0902);--nve-ref-color-alpha-black-600:oklch(0% 0 0/0.1216);--nve-ref-color-alpha-black-700:oklch(0% 0 0/0.1804);--nve-ref-color-alpha-black-800:oklch(0% 0 0/0.251);--nve-ref-color-alpha-black-900:oklch(0% 0 0/0.3882);--nve-ref-color-alpha-black-1000:oklch(0% 0 0/0.451);--nve-ref-color-alpha-black-1100:oklch(0% 0 0/0.5882);--nve-ref-color-alpha-black-1200:oklch(0% 0 0/0.9216);--nve-ref-color-brand-green-100:oklch(99.5% 0.004 121.6);--nve-ref-color-brand-green-200:oklch(98.4% 0.019 122.8);--nve-ref-color-brand-green-300:oklch(96.8% 0.043 124.5);--nve-ref-color-brand-green-400:oklch(94.9% 0.069 125.4);--nve-ref-color-brand-green-500:oklch(92.6% 0.09 125.6);--nve-ref-color-brand-green-600:oklch(86% 0.111 125);--nve-ref-color-brand-green-700:oklch(80.3% 0.143 126.3);--nve-ref-color-brand-green-800:oklch(71.1% 0.185 128.2);--nve-ref-color-brand-green-900:oklch(66.1% 0.184 132.1);--nve-ref-color-brand-green-1000:oklch(70.9% 0.194 131.1);--nve-ref-color-brand-green-1100:oklch(54.5% 0.148 130.5);--nve-ref-color-brand-green-1200:oklch(30.1% 0.068 127.8);--nve-ref-color-yellow-nova-100:oklch(99% 0.007 106.5);--nve-ref-color-yellow-nova-200:oklch(98.8% 0.029 100.6);--nve-ref-color-yellow-nova-300:oklch(98.1% 0.054 102.9);--nve-ref-color-yellow-nova-400:oklch(97% 0.082 102.5);--nve-ref-color-yellow-nova-500:oklch(95.3% 0.097 100.4);--nve-ref-color-yellow-nova-600:oklch(92.3% 0.114 98.5);--nve-ref-color-yellow-nova-700:oklch(86.8% 0.126 93.8);--nve-ref-color-yellow-nova-800:oklch(81.4% 0.166 90.5);--nve-ref-color-yellow-nova-900:oklch(88.2% 0.182 99.8);--nve-ref-color-yellow-nova-1000:oklch(72.8% 0.151 78.2);--nve-ref-color-yellow-nova-1100:oklch(54.9% 0.114 79.5);--nve-ref-color-yellow-nova-1200:oklch(28.3% 0.042 85.7);--nve-ref-color-lime-pear-100:oklch(98.9% 0.005 117.9);--nve-ref-color-lime-pear-200:oklch(98.4% 0.019 122.8);--nve-ref-color-lime-pear-300:oklch(96.9% 0.042 123.1);--nve-ref-color-lime-pear-400:oklch(95% 0.068 124.6);--nve-ref-color-lime-pear-500:oklch(92.8% 0.088 124.6);--nve-ref-color-lime-pear-600:oklch(88.6% 0.115 125);--nve-ref-color-lime-pear-700:oklch(80.5% 0.138 126);--nve-ref-color-lime-pear-800:oklch(72.3% 0.173 128.3);--nve-ref-color-lime-pear-900:oklch(80.3% 0.197 128.1);--nve-ref-color-lime-pear-1000:oklch(75.6% 0.187 128.6);--nve-ref-color-lime-pear-1100:oklch(50.8% 0.13 129.4);--nve-ref-color-lime-pear-1200:oklch(28.3% 0.062 127.4);--nve-ref-color-green-jade-100:oklch(99.4% 0.004 157.2);--nve-ref-color-green-jade-200:oklch(97.6% 0.018 155.8);--nve-ref-color-green-jade-300:oklch(96.4% 0.023 157.6);--nve-ref-color-green-jade-400:oklch(94.4% 0.031 156);--nve-ref-color-green-jade-500:oklch(91.2% 0.042 157.2);--nve-ref-color-green-jade-600:oklch(86.6% 0.058 157.4);--nve-ref-color-green-jade-700:oklch(80.1% 0.078 159.2);--nve-ref-color-green-jade-800:oklch(71.6% 0.113 160.3);--nve-ref-color-green-jade-900:oklch(63.2% 0.131 157.6);--nve-ref-color-green-jade-1000:oklch(59.4% 0.123 158.3);--nve-ref-color-green-jade-1100:oklch(50.5% 0.109 158);--nve-ref-color-green-jade-1200:oklch(27.6% 0.038 164.4);--nve-ref-color-pink-rose-100:oklch(99% 0.007 340.4);--nve-ref-color-pink-rose-200:oklch(98% 0.013 340.5);--nve-ref-color-pink-rose-300:oklch(96% 0.024 340.3);--nve-ref-color-pink-rose-400:oklch(94.3% 0.033 339.8);--nve-ref-color-pink-rose-500:oklch(91.3% 0.046 341.9);--nve-ref-color-pink-rose-600:oklch(87% 0.065 341);--nve-ref-color-pink-rose-700:oklch(81.6% 0.09 342.1);--nve-ref-color-pink-rose-800:oklch(74.7% 0.122 342.5);--nve-ref-color-pink-rose-900:oklch(61.4% 0.208 346.1);--nve-ref-color-pink-rose-1000:oklch(59% 0.218 347.4);--nve-ref-color-pink-rose-1100:oklch(56.2% 0.221 348.6);--nve-ref-color-pink-rose-1200:oklch(24.2% 0.082 345.8);--nve-ref-color-purple-lavender-100:oklch(99.1% 0.005 325.6);--nve-ref-color-purple-lavender-200:oklch(98.9% 0.007 312.3);--nve-ref-color-purple-lavender-300:oklch(96.8% 0.019 312.8);--nve-ref-color-purple-lavender-400:oklch(93.6% 0.034 310.7);--nve-ref-color-purple-lavender-500:oklch(90.7% 0.048 311.7);--nve-ref-color-purple-lavender-600:oklch(86.9% 0.063 310.7);--nve-ref-color-purple-lavender-700:oklch(80.9% 0.089 309.8);--nve-ref-color-purple-lavender-800:oklch(72.8% 0.124 308.2);--nve-ref-color-purple-lavender-900:oklch(55.6% 0.183 305.9);--nve-ref-color-purple-lavender-1000:oklch(52.2% 0.182 305.3);--nve-ref-color-purple-lavender-1100:oklch(48.3% 0.178 305.4);--nve-ref-color-purple-lavender-1200:oklch(24.3% 0.096 305.3);--nve-ref-color-purple-violet-100:oklch(99% 0.004 301.4);--nve-ref-color-purple-violet-200:oklch(98.7% 0.007 295.5);--nve-ref-color-purple-violet-300:oklch(96.2% 0.02 295.2);--nve-ref-color-purple-violet-400:oklch(93.8% 0.031 293.8);--nve-ref-color-purple-violet-500:oklch(90.4% 0.047 293.5);--nve-ref-color-purple-violet-600:oklch(86.9% 0.061 293.4);--nve-ref-color-purple-violet-700:oklch(80.4% 0.086 293.4);--nve-ref-color-purple-violet-800:oklch(72.7% 0.119 292.6);--nve-ref-color-purple-violet-900:oklch(53.8% 0.179 288);--nve-ref-color-purple-violet-1000:oklch(50.9% 0.168 287);--nve-ref-color-purple-violet-1100:oklch(47.3% 0.158 286.3);--nve-ref-color-purple-violet-1200:oklch(24.1% 0.095 287.2);--nve-ref-color-purple-plum-100:oklch(98.9% 0.007 312.3);--nve-ref-color-purple-plum-200:oklch(98.1% 0.017 325.7);--nve-ref-color-purple-plum-300:oklch(96.4% 0.024 325.8);--nve-ref-color-purple-plum-400:oklch(93.7% 0.038 325.9);--nve-ref-color-purple-plum-500:oklch(91.1% 0.049 324.9);--nve-ref-color-purple-plum-600:oklch(86.9% 0.065 324.5);--nve-ref-color-purple-plum-700:oklch(80.6% 0.092 323.3);--nve-ref-color-purple-plum-800:oklch(73.5% 0.12 322.2);--nve-ref-color-purple-plum-900:oklch(57.8% 0.185 322);--nve-ref-color-purple-plum-1000:oklch(55% 0.198 322.1);--nve-ref-color-purple-plum-1100:oklch(51.4% 0.206 322);--nve-ref-color-purple-plum-1200:oklch(23.7% 0.088 320.9);--nve-ref-color-pink-magenta-100:oklch(98.9% 0.006 350.8);--nve-ref-color-pink-magenta-200:oklch(97.9% 0.013 345.5);--nve-ref-color-pink-magenta-300:oklch(96% 0.022 348.7);--nve-ref-color-pink-magenta-400:oklch(94.1% 0.03 348.2);--nve-ref-color-pink-magenta-500:oklch(91.2% 0.042 349.5);--nve-ref-color-pink-magenta-600:oklch(86.6% 0.061 349.2);--nve-ref-color-pink-magenta-700:oklch(81.1% 0.085 352);--nve-ref-color-pink-magenta-800:oklch(74% 0.116 354.5);--nve-ref-color-pink-magenta-900:oklch(60.4% 0.214 2.6);--nve-ref-color-pink-magenta-1000:oklch(67.7% 0.229 1.4);--nve-ref-color-pink-magenta-1100:oklch(56.6% 0.213 4.7);--nve-ref-color-pink-magenta-1200:oklch(24.5% 0.073 4.4);--nve-ref-color-red-tomato-100:oklch(99% 0.01 0);--nve-ref-color-red-tomato-200:oklch(98% 0.01 25.1);--nve-ref-color-red-tomato-300:oklch(96% 0.02 25.2);--nve-ref-color-red-tomato-400:oklch(94% 0.03 27.8);--nve-ref-color-red-tomato-500:oklch(91.2% 0.042 27);--nve-ref-color-red-tomato-600:oklch(87% 0.061 29.7);--nve-ref-color-red-tomato-700:oklch(81.2% 0.084 31.8);--nve-ref-color-red-tomato-800:oklch(74.6% 0.11 31.6);--nve-ref-color-red-tomato-900:oklch(62% 0.195 33.3);--nve-ref-color-red-tomato-1000:oklch(59.7% 0.193 33.1);--nve-ref-color-red-tomato-1100:oklch(54.9% 0.191 32.8);--nve-ref-color-red-tomato-1200:oklch(24% 0.047 31.3);--nve-ref-color-orange-pumpkin-100:oklch(99.2% 0.003 48.7);--nve-ref-color-orange-pumpkin-200:oklch(97.8% 0.011 54.5);--nve-ref-color-orange-pumpkin-300:oklch(96.4% 0.021 56.1);--nve-ref-color-orange-pumpkin-400:oklch(94.3% 0.035 57.6);--nve-ref-color-orange-pumpkin-500:oklch(91.5% 0.052 56.8);--nve-ref-color-orange-pumpkin-600:oklch(87.5% 0.08 56.6);--nve-ref-color-orange-pumpkin-700:oklch(82.8% 0.111 54.4);--nve-ref-color-orange-pumpkin-800:oklch(75.7% 0.15 52.2);--nve-ref-color-orange-pumpkin-900:oklch(68.5% 0.194 45);--nve-ref-color-orange-pumpkin-1000:oklch(65.5% 0.192 43.7);--nve-ref-color-orange-pumpkin-1100:oklch(55.7% 0.162 44.1);--nve-ref-color-orange-pumpkin-1200:oklch(27.9% 0.06 40.2);--nve-ref-color-yellow-amber-100:oklch(99.4% 0.003 84.6);--nve-ref-color-yellow-amber-200:oklch(98.1% 0.019 83.1);--nve-ref-color-yellow-amber-300:oklch(96.5% 0.046 90.9);--nve-ref-color-yellow-amber-400:oklch(94.4% 0.069 89.1);--nve-ref-color-yellow-amber-500:oklch(92.1% 0.091 87.4);--nve-ref-color-yellow-amber-600:oklch(88.6% 0.108 80.1);--nve-ref-color-yellow-amber-700:oklch(82.1% 0.123 75.9);--nve-ref-color-yellow-amber-800:oklch(76% 0.152 69.5);--nve-ref-color-yellow-amber-900:oklch(81.7% 0.164 75.8);--nve-ref-color-yellow-amber-1000:oklch(78.3% 0.169 66.4);--nve-ref-color-yellow-amber-1100:oklch(53.9% 0.135 54.2);--nve-ref-color-yellow-amber-1200:oklch(30.7% 0.077 44.3);--nve-ref-color-green-grass-100:oklch(99.4% 0.005 145.5);--nve-ref-color-green-grass-200:oklch(98.2% 0.015 145.5);--nve-ref-color-green-grass-300:oklch(96.3% 0.027 145.4);--nve-ref-color-green-grass-400:oklch(94.1% 0.034 145.3);--nve-ref-color-green-grass-500:oklch(90.7% 0.05 146);--nve-ref-color-green-grass-600:oklch(86.1% 0.067 146.9);--nve-ref-color-green-grass-700:oklch(80% 0.09 147);--nve-ref-color-green-grass-800:oklch(71.4% 0.13 148.5);--nve-ref-color-green-grass-900:oklch(64.3% 0.143 147.6);--nve-ref-color-green-grass-1000:oklch(61% 0.14 147.5);--nve-ref-color-green-grass-1100:oklch(51.5% 0.125 147.4);--nve-ref-color-green-grass-1200:oklch(27.8% 0.042 146.7);--nve-ref-color-teal-seafoam-100:oklch(98.9% 0.006 185.3);--nve-ref-color-teal-seafoam-200:oklch(97.8% 0.014 186);--nve-ref-color-teal-seafoam-300:oklch(96.8% 0.02 181.1);--nve-ref-color-teal-seafoam-400:oklch(94.3% 0.029 180.8);--nve-ref-color-teal-seafoam-500:oklch(91.3% 0.038 184.3);--nve-ref-color-teal-seafoam-600:oklch(86.6% 0.05 185.1);--nve-ref-color-teal-seafoam-700:oklch(80.3% 0.066 183.7);--nve-ref-color-teal-seafoam-800:oklch(71.8% 0.098 183.3);--nve-ref-color-teal-seafoam-900:oklch(63.7% 0.112 181.7);--nve-ref-color-teal-seafoam-1000:oklch(60.2% 0.105 182.4);--nve-ref-color-teal-seafoam-1100:oklch(51.8% 0.091 183.8);--nve-ref-color-teal-seafoam-1200:oklch(27.6% 0.038 181.3);--nve-ref-color-green-mint-100:oklch(99% 0.009 179.6);--nve-ref-color-green-mint-200:oklch(98.2% 0.02 177.5);--nve-ref-color-green-mint-300:oklch(96.6% 0.03 176);--nve-ref-color-green-mint-400:oklch(94.3% 0.041 177.7);--nve-ref-color-green-mint-500:oklch(91.2% 0.052 178.1);--nve-ref-color-green-mint-600:oklch(87% 0.066 178);--nve-ref-color-green-mint-700:oklch(80.9% 0.09 176.6);--nve-ref-color-green-mint-800:oklch(74% 0.119 176.8);--nve-ref-color-green-mint-900:oklch(83.6% 0.11 177.1);--nve-ref-color-green-mint-1000:oklch(81% 0.108 177.3);--nve-ref-color-green-mint-1100:oklch(52.5% 0.09 180.8);--nve-ref-color-green-mint-1200:oklch(29.5% 0.047 181.6);--nve-ref-color-teal-cyan-100:oklch(98.8% 0.005 211);--nve-ref-color-teal-cyan-200:oklch(98.4% 0.011 204.1);--nve-ref-color-teal-cyan-300:oklch(96.6% 0.02 208.1);--nve-ref-color-teal-cyan-400:oklch(94.2% 0.03 204.5);--nve-ref-color-teal-cyan-500:oklch(90.9% 0.04 208.1);--nve-ref-color-teal-cyan-600:oklch(86.4% 0.055 207.9);--nve-ref-color-teal-cyan-700:oklch(80.1% 0.076 209.8);--nve-ref-color-teal-cyan-800:oklch(72.4% 0.111 211.9);--nve-ref-color-teal-cyan-900:oklch(65.8% 0.118 218.7);--nve-ref-color-teal-cyan-1000:oklch(60.8% 0.109 219.6);--nve-ref-color-teal-cyan-1100:oklch(52.8% 0.094 220.8);--nve-ref-color-teal-cyan-1200:oklch(28.3% 0.048 217.6);--nve-ref-color-blue-sky-100:oklch(98.9% 0.009 214.3);--nve-ref-color-blue-sky-200:oklch(98.3% 0.013 214.4);--nve-ref-color-blue-sky-300:oklch(96.4% 0.027 217.1);--nve-ref-color-blue-sky-400:oklch(94.6% 0.036 216);--nve-ref-color-blue-sky-500:oklch(91.3% 0.05 218.7);--nve-ref-color-blue-sky-600:oklch(86.6% 0.066 219.4);--nve-ref-color-blue-sky-700:oklch(80.6% 0.092 220.1);--nve-ref-color-blue-sky-800:oklch(73.7% 0.127 222.1);--nve-ref-color-blue-sky-900:oklch(84.2% 0.114 218.5);--nve-ref-color-blue-sky-1000:oklch(81.2% 0.115 219.3);--nve-ref-color-blue-sky-1100:oklch(53.3% 0.106 230);--nve-ref-color-blue-sky-1200:oklch(28% 0.054 225.9);--nve-ref-color-blue-cobalt-100:oklch(99% 0.005 258.3);--nve-ref-color-blue-cobalt-200:oklch(98.3% 0.009 247.9);--nve-ref-color-blue-cobalt-300:oklch(96.6% 0.017 248);--nve-ref-color-blue-cobalt-400:oklch(94.8% 0.026 246.3);--nve-ref-color-blue-cobalt-500:oklch(91.4% 0.042 247.2);--nve-ref-color-blue-cobalt-600:oklch(86.5% 0.059 247.7);--nve-ref-color-blue-cobalt-700:oklch(80.4% 0.083 245.7);--nve-ref-color-blue-cobalt-800:oklch(72.8% 0.122 243.8);--nve-ref-color-blue-cobalt-900:oklch(65.1% 0.192 251.5);--nve-ref-color-blue-cobalt-1000:oklch(54.8% 0.2 258.1);--nve-ref-color-blue-cobalt-1100:oklch(54.2% 0.191 256.9);--nve-ref-color-blue-cobalt-1200:oklch(26.6% 0.084 253.9);--nve-ref-color-blue-indigo-100:oklch(99.1% 0.001 286.4);--nve-ref-color-blue-indigo-200:oklch(97.9% 0.01 267.4);--nve-ref-color-blue-indigo-300:oklch(96.7% 0.015 270);--nve-ref-color-blue-indigo-400:oklch(93.7% 0.028 268.4);--nve-ref-color-blue-indigo-500:oklch(91.4% 0.037 270.5);--nve-ref-color-blue-indigo-600:oklch(86.3% 0.058 270);--nve-ref-color-blue-indigo-700:oklch(81% 0.079 270.3);--nve-ref-color-blue-indigo-800:oklch(72.5% 0.114 270.5);--nve-ref-color-blue-indigo-900:oklch(53.9% 0.194 267);--nve-ref-color-blue-indigo-1000:oklch(51.2% 0.178 267.3);--nve-ref-color-blue-indigo-1100:oklch(47.2% 0.155 267.4);--nve-ref-color-blue-indigo-1200:oklch(23.8% 0.075 268.3);--nve-ref-color-gray-denim-100:oklch(98.4% 0.003 247.9);--nve-ref-color-gray-denim-200:oklch(98.3% 0.003 286.4);--nve-ref-color-gray-denim-300:oklch(95.9% 0.005 275);--nve-ref-color-gray-denim-400:oklch(93.6% 0.006 255.5);--nve-ref-color-gray-denim-500:oklch(92.5% 0.008 271.3);--nve-ref-color-gray-denim-600:oklch(90.9% 0.01 267.4);--nve-ref-color-gray-denim-700:oklch(87.6% 0.013 271.3);--nve-ref-color-gray-denim-800:oklch(80.6% 0.022 274);--nve-ref-color-gray-denim-900:oklch(62.4% 0.028 268.7);--nve-ref-color-gray-denim-1000:oklch(59.4% 0.032 270.2);--nve-ref-color-gray-denim-1100:oklch(52.4% 0.032 274.2);--nve-ref-color-gray-denim-1200:oklch(25.8% 0.013 279);--nve-ref-color-gray-slate-100:oklch(98.4% 0.003 247.9);--nve-ref-color-gray-slate-200:oklch(97.6% 0.003 264.5);--nve-ref-color-gray-slate-300:oklch(95.1% 0.005 258.3);--nve-ref-color-gray-slate-400:oklch(93.4% 0.005 275);--nve-ref-color-gray-slate-500:oklch(93% 0.005 258.3);--nve-ref-color-gray-slate-600:oklch(90.8% 0.006 239.8);--nve-ref-color-gray-slate-700:oklch(88.3% 0.007 247.9);--nve-ref-color-gray-slate-800:oklch(82.9% 0.01 238.5);--nve-ref-color-gray-slate-900:oklch(64.9% 0.013 240);--nve-ref-color-gray-slate-1000:oklch(61.3% 0.012 243.8);--nve-ref-color-gray-slate-1100:oklch(52.7% 0.01 236.7);--nve-ref-color-gray-slate-1200:oklch(19.5% 0.011 229.6);--nve-ref-color-red-cardinal-100:oklch(99% 0.01 0);--nve-ref-color-red-cardinal-200:oklch(97.8% 0.011 17.3);--nve-ref-color-red-cardinal-300:oklch(95.6% 0.022 17.5);--nve-ref-color-red-cardinal-400:oklch(93.2% 0.034 17.8);--nve-ref-color-red-cardinal-500:oklch(91.3% 0.041 17.9);--nve-ref-color-red-cardinal-600:oklch(86.5% 0.062 18.4);--nve-ref-color-red-cardinal-700:oklch(80.9% 0.084 18.1);--nve-ref-color-red-cardinal-800:oklch(74.5% 0.111 19.3);--nve-ref-color-red-cardinal-900:oklch(62.6% 0.193 23);--nve-ref-color-red-cardinal-1000:oklch(59.6% 0.195 23.8);--nve-ref-color-red-cardinal-1100:oklch(54.9% 0.194 25.1);--nve-ref-color-red-cardinal-1200:oklch(23.9% 0.056 17.2);--nve-ref-font-family-inter:"Inter",Roboto,"Open Sans","Helvetica Neue",sans-serif;--nve-ref-font-family-roboto-mono:"Roboto Mono","Lucida Console",Monaco,monospace,sans-serif;--nve-ref-font-weight-light:200;--nve-ref-font-weight-regular:400;--nve-ref-font-weight-medium:500;--nve-ref-font-weight-semibold:600;--nve-ref-font-weight-bold:700;--nve-ref-font-weight-extra-bold:800;--nve-ref-font-line-height-tight:1.12;--nve-ref-font-line-height-snug:1.25;--nve-ref-font-line-height-moderate:1.375;--nve-ref-font-line-height-relaxed:1.5;--nve-ref-font-line-height-loose:1.625;--nve-ref-border-radius-full:999px;--nve-ref-opacity-0:0;--nve-ref-opacity-150:0.15;--nve-ref-opacity-200:0.2;--nve-ref-opacity-300:0.3;--nve-ref-opacity-400:0.4;--nve-ref-opacity-500:0.5;--nve-ref-opacity-600:0.6;--nve-ref-opacity-700:0.7;--nve-ref-opacity-800:0.8;--nve-ref-opacity-900:0.9;--nve-ref-shadow-100:0px 16px 32px 0px oklch(12.6% 0.022 276.4/0.02);--nve-ref-shadow-200:0px 16px 32px 0px oklch(12.6% 0.022 276.4/0.05);--nve-ref-shadow-300:0px 16px 32px 0px oklch(12.6% 0.022 276.4/0.08);--nve-ref-shadow-400:0px 16px 32px 0px oklch(12.6% 0.022 276.4/0.12);--nve-ref-shadow-500:0px 16px 32px 0px oklch(12.6% 0.022 276.4/0.17);--nve-ref-outline:Highlight solid 2px;--nve-ref-outline-webkit:5px auto -webkit-focus-ring-color;--nve-ref-animation-duration-100:0;--nve-ref-animation-duration-150:150ms;--nve-ref-animation-duration-200:200ms;--nve-ref-animation-duration-250:250ms;--nve-ref-animation-duration-300:400ms;--nve-ref-animation-duration-400:800ms;--nve-ref-animation-easing-100:ease-in-out;--nve-sys-color-scheme:auto;--nve-sys-contrast-emphasis-ratio:100%;--nve-sys-contrast-mute-ratio:18%;--nve-sys-interaction-state-ratio:initial;--nve-sys-interaction-state-ratio-hover:4%;--nve-sys-interaction-state-ratio-disabled:4%;--nve-sys-interaction-state-ratio-active:8%;--nve-sys-interaction-state-ratio-selected:8%;--nve-sys-visualization-sequential-diverging-virdis-100:oklch(91.8% 0.187 102.2);--nve-sys-visualization-sequential-diverging-virdis-200:oklch(85.9% 0.19 115);--nve-sys-visualization-sequential-diverging-virdis-300:oklch(82.1% 0.194 126.8);--nve-sys-visualization-sequential-diverging-virdis-400:oklch(77.5% 0.187 137.2);--nve-sys-visualization-sequential-diverging-virdis-500:oklch(73.4% 0.164 147.5);--nve-sys-visualization-sequential-diverging-virdis-600:oklch(69.1% 0.145 157.3);--nve-sys-visualization-sequential-diverging-virdis-700:oklch(64.6% 0.12 169.6);--nve-sys-visualization-sequential-diverging-virdis-800:oklch(60.2% 0.1 184.4);--nve-sys-visualization-sequential-diverging-virdis-900:oklch(56.8% 0.087 200.1);--nve-sys-visualization-sequential-diverging-virdis-1000:oklch(49.1% 0.083 242.3);--nve-sys-visualization-sequential-diverging-virdis-1100:oklch(45.3% 0.094 261.6);--nve-sys-visualization-sequential-diverging-virdis-1200:oklch(41.9% 0.108 278.7);--nve-sys-visualization-sequential-diverging-virdis-1300:oklch(37.1% 0.124 293.4);--nve-sys-visualization-sequential-diverging-virdis-1400:oklch(33.3% 0.134 306.3);--nve-sys-visualization-sequential-diverging-virdis-1500:oklch(27.6% 0.132 318.4);--nve-sys-visualization-sequential-diverging-red-green-100:oklch(49.9% 0.159 23.4);--nve-sys-visualization-sequential-diverging-red-green-200:oklch(59.6% 0.195 23.8);--nve-sys-visualization-sequential-diverging-red-green-300:oklch(68.4% 0.193 22);--nve-sys-visualization-sequential-diverging-red-green-400:oklch(83.3% 0.083 18.1);--nve-sys-visualization-sequential-diverging-red-green-600:oklch(86.4% 0.117 148.8);--nve-sys-visualization-sequential-diverging-red-green-700:oklch(72.5% 0.176 148.7);--nve-sys-visualization-sequential-diverging-red-green-800:oklch(62.7% 0.157 148.3);--nve-sys-visualization-sequential-diverging-red-green-900:oklch(47.5% 0.109 150.4);--nve-sys-scrollbar-width:thin;--nve-ref-size-50:calc(var(--nve-ref-scale-size)*2px);--nve-ref-size-100:calc(var(--nve-ref-scale-size)*4px);--nve-ref-size-150:calc(var(--nve-ref-scale-size)*6px);--nve-ref-size-200:calc(var(--nve-ref-scale-size)*8px);--nve-ref-size-250:calc(var(--nve-ref-scale-size)*10px);--nve-ref-size-300:calc(var(--nve-ref-scale-size)*12px);--nve-ref-size-400:calc(var(--nve-ref-scale-size)*16px);--nve-ref-size-500:calc(var(--nve-ref-scale-size)*20px);--nve-ref-size-600:calc(var(--nve-ref-scale-size)*24px);--nve-ref-size-700:calc(var(--nve-ref-scale-size)*28px);--nve-ref-size-800:calc(var(--nve-ref-scale-size)*32px);--nve-ref-size-900:calc(var(--nve-ref-scale-size)*36px);--nve-ref-size-1000:calc(var(--nve-ref-scale-size)*40px);--nve-ref-space-none:calc(var(--nve-ref-scale-space)*0px);--nve-ref-space-xxxs:calc(var(--nve-ref-scale-space)*2px);--nve-ref-space-xxs:calc(var(--nve-ref-scale-space)*4px);--nve-ref-space-xs:calc(var(--nve-ref-scale-space)*8px);--nve-ref-space-sm:calc(var(--nve-ref-scale-space)*12px);--nve-ref-space-md:calc(var(--nve-ref-scale-space)*16px);--nve-ref-space-lg:calc(var(--nve-ref-scale-space)*24px);--nve-ref-space-xl:calc(var(--nve-ref-scale-space)*32px);--nve-ref-space-xxl:calc(var(--nve-ref-scale-space)*48px);--nve-ref-space-xxxl:calc(var(--nve-ref-scale-space)*64px);--nve-ref-color-scheme-base:var(--nve-ref-color-white);--nve-ref-color-scheme-inverse:var(--nve-ref-color-black);--nve-ref-color-neutral-100:var(--nve-ref-color-gray-slate-100);--nve-ref-color-neutral-200:var(--nve-ref-color-gray-slate-200);--nve-ref-color-neutral-300:var(--nve-ref-color-gray-slate-300);--nve-ref-color-neutral-400:var(--nve-ref-color-gray-slate-400);--nve-ref-color-neutral-500:var(--nve-ref-color-gray-slate-500);--nve-ref-color-neutral-600:var(--nve-ref-color-gray-slate-600);--nve-ref-color-neutral-700:var(--nve-ref-color-gray-slate-700);--nve-ref-color-neutral-800:var(--nve-ref-color-gray-slate-800);--nve-ref-color-neutral-900:var(--nve-ref-color-gray-slate-900);--nve-ref-color-neutral-1000:var(--nve-ref-color-gray-slate-1000);--nve-ref-color-neutral-1100:var(--nve-ref-color-gray-slate-1100);--nve-ref-color-neutral-1200:var(--nve-ref-color-gray-slate-1200);--nve-ref-font-family:var(--nve-ref-font-family-inter);--nve-ref-font-size-50:calc(var(--nve-ref-scale-text)*0.625rem);--nve-ref-font-size-100:calc(var(--nve-ref-scale-text)*0.75rem);--nve-ref-font-size-200:calc(var(--nve-ref-scale-text)*0.875rem);--nve-ref-font-size-300:calc(var(--nve-ref-scale-text)*1rem);--nve-ref-font-size-400:calc(var(--nve-ref-scale-text)*1.125rem);--nve-ref-font-size-500:calc(var(--nve-ref-scale-text)*1.25rem);--nve-ref-font-size-600:calc(var(--nve-ref-scale-text)*1.5rem);--nve-ref-font-size-700:calc(var(--nve-ref-scale-text)*1.75rem);--nve-ref-font-size-800:calc(var(--nve-ref-scale-text)*2rem);--nve-ref-font-size-900:calc(var(--nve-ref-scale-text)*2.25rem);--nve-ref-font-size-1000:calc(var(--nve-ref-scale-text)*2.5rem);--nve-ref-font-size-1100:calc(var(--nve-ref-scale-text)*2.75rem);--nve-ref-font-size-1200:calc(var(--nve-ref-scale-text)*3.125rem);--nve-ref-font-line-height-300:calc(var(--nve-ref-scale-line-height)*0.75rem);--nve-ref-font-line-height-400:calc(var(--nve-ref-scale-line-height)*1rem);--nve-ref-font-line-height-500:calc(var(--nve-ref-scale-line-height)*1.25rem);--nve-ref-font-line-height-600:calc(var(--nve-ref-scale-line-height)*1.5rem);--nve-ref-font-line-height-700:calc(var(--nve-ref-scale-line-height)*1.75rem);--nve-ref-font-line-height-800:calc(var(--nve-ref-scale-line-height)*2rem);--nve-ref-font-line-height-900:calc(var(--nve-ref-scale-line-height)*2.25rem);--nve-ref-font-line-height-1000:calc(var(--nve-ref-scale-line-height)*2.5rem);--nve-ref-border-radius-none:calc(var(--nve-ref-scale-border-radius)*0px);--nve-ref-border-radius-xs:calc(var(--nve-ref-scale-border-radius)*4px);--nve-ref-border-radius-sm:calc(var(--nve-ref-scale-border-radius)*6px);--nve-ref-border-radius-md:calc(var(--nve-ref-scale-border-radius)*8px);--nve-ref-border-radius-lg:calc(var(--nve-ref-scale-border-radius)*14px);--nve-ref-border-radius-xl:calc(var(--nve-ref-scale-border-radius)*24px);--nve-ref-border-radius-xxl:calc(var(--nve-ref-scale-border-radius)*48px);--nve-ref-border-width-sm:calc(var(--nve-ref-scale-border-width)*1px);--nve-ref-border-width-md:calc(var(--nve-ref-scale-border-width)*2px);--nve-ref-border-width-lg:calc(var(--nve-ref-scale-border-width)*3px);--nve-ref-border-width-xl:calc(var(--nve-ref-scale-border-width)*4px);--nve-sys-text-white-color:var(--nve-ref-color-white);--nve-sys-text-black-color:var(--nve-ref-color-black);--nve-sys-text-link-hover-color:var(--nve-ref-color-blue-cobalt-1100);--nve-sys-text-link-visited-color:var(--nve-ref-color-purple-lavender-1000);--nve-sys-text-link-emphasis-color:var(--nve-ref-color-blue-cobalt-1000);--nve-sys-accent-primary-background:var(--nve-ref-color-brand-green-900);--nve-sys-accent-secondary-background:var(--nve-ref-color-blue-cobalt-1000);--nve-sys-contrast-emphasis-color:var(--nve-ref-color-white);--nve-sys-interaction-destructive-background:var(--nve-ref-color-red-cardinal-1100);--nve-sys-interaction-highlighted-background:var(--nve-ref-color-blue-cobalt-500);--nve-sys-interaction-highlighted-muted-background:var(--nve-ref-color-blue-cobalt-300);--nve-sys-layer-container-background:var(--nve-ref-color-white);--nve-sys-layer-overlay-background:var(--nve-ref-color-white);--nve-sys-layer-backdrop-background:var(--nve-ref-color-alpha-black-400);--nve-sys-status-scheduled-color:var(--nve-ref-color-purple-violet-1100);--nve-sys-status-queued-color:var(--nve-ref-color-blue-indigo-1100);--nve-sys-status-starting-color:var(--nve-ref-color-green-mint-1100);--nve-sys-status-running-color:var(--nve-ref-color-blue-cobalt-1100);--nve-sys-status-restarting-color:var(--nve-ref-color-yellow-amber-1100);--nve-sys-status-stopping-color:var(--nve-ref-color-pink-rose-1100);--nve-sys-status-finished-color:var(--nve-ref-color-green-grass-1100);--nve-sys-status-failed-color:var(--nve-ref-color-red-cardinal-1100);--nve-sys-support-accent-muted-color:var(--nve-ref-color-blue-cobalt-400);--nve-sys-support-accent-emphasis-color:var(--nve-ref-color-blue-cobalt-1100);--nve-sys-support-success-color:var(--nve-ref-color-green-grass-1100);--nve-sys-support-success-muted-color:var(--nve-ref-color-green-grass-400);--nve-sys-support-success-emphasis-color:var(--nve-ref-color-green-grass-1100);--nve-sys-support-danger-color:var(--nve-ref-color-red-cardinal-1100);--nve-sys-support-danger-muted-color:var(--nve-ref-color-red-cardinal-400);--nve-sys-support-danger-emphasis-color:var(--nve-ref-color-red-cardinal-1100);--nve-sys-support-warning-color:var(--nve-ref-color-yellow-nova-800);--nve-sys-support-warning-muted-color:var(--nve-ref-color-yellow-nova-300);--nve-sys-support-warning-emphasis-color:var(--nve-ref-color-yellow-nova-1000);--nve-sys-visualization-categorical-violet:var(--nve-ref-color-purple-violet-1000);--nve-sys-visualization-categorical-lavender:var(--nve-ref-color-purple-lavender-900);--nve-sys-visualization-categorical-rose:var(--nve-ref-color-pink-rose-900);--nve-sys-visualization-categorical-red:var(--nve-ref-color-red-cardinal-1000);--nve-sys-visualization-categorical-pumpkin:var(--nve-ref-color-orange-pumpkin-900);--nve-sys-visualization-categorical-amber:var(--nve-ref-color-yellow-amber-1000);--nve-sys-visualization-categorical-nova:var(--nve-ref-color-yellow-nova-800);--nve-sys-visualization-categorical-pear:var(--nve-ref-color-lime-pear-900);--nve-sys-visualization-categorical-grass:var(--nve-ref-color-green-grass-1000);--nve-sys-visualization-categorical-seafoam:var(--nve-ref-color-teal-seafoam-900);--nve-sys-visualization-categorical-cyan:var(--nve-ref-color-teal-cyan-800);--nve-sys-visualization-trend-negative-color:var(--nve-ref-color-red-cardinal-1000);--nve-sys-visualization-trend-negative-emphasis-color:var(--nve-ref-color-red-cardinal-1100);--nve-sys-visualization-trend-positive-color:var(--nve-ref-color-green-grass-1000);--nve-sys-visualization-trend-positive-emphasis-color:var(--nve-ref-color-green-grass-1100);--nve-sys-scrollbar-track-color:var(--nve-ref-color-alpha-black-200);--nve-ref-border-color:var(--nve-ref-color-neutral-800);--nve-ref-border-color-emphasis:var(--nve-ref-color-neutral-1000);--nve-ref-border-color-muted:var(--nve-ref-color-neutral-700);--nve-ref-border-color-inverse:var(--nve-ref-color-scheme-inverse);--nve-sys-text-color:var(--nve-ref-color-neutral-1200);--nve-sys-text-muted-color:var(--nve-ref-color-neutral-1100);--nve-sys-text-emphasis-color:var(--nve-ref-color-neutral-1200);--nve-sys-text-placeholder-color:var(--nve-ref-color-neutral-900);--nve-sys-text-link-color:var(--nve-ref-color-neutral-1200);--nve-sys-text-link-disabled-color:var(--nve-ref-color-neutral-400);--nve-sys-accent-tertiary-background:var(--nve-ref-color-scheme-inverse);--nve-sys-contrast-mute-color:var(--nve-ref-color-scheme-base);--nve-sys-interaction-color:var(--nve-ref-color-neutral-1200);--nve-sys-interaction-background:var(--nve-ref-color-neutral-600);--nve-sys-interaction-background-100:var(--nve-ref-color-neutral-600);--nve-sys-interaction-background-200:var(--nve-ref-color-neutral-500);--nve-sys-interaction-background-300:var(--nve-ref-color-neutral-500);--nve-sys-interaction-field-height:var(--nve-ref-size-800);--nve-sys-interaction-emphasis-color:var(--nve-sys-text-black-color);--nve-sys-interaction-emphasis-background:var(--nve-sys-accent-primary-background);--nve-sys-interaction-destructive-color:var(--nve-sys-text-white-color);--nve-sys-interaction-disabled-color:var(--nve-ref-color-neutral-800);--nve-sys-interaction-disabled-background:var(--nve-ref-color-neutral-600);--nve-sys-interaction-state-mix:var(--nve-ref-color-neutral-1200);--nve-sys-layer-canvas-background:var(--nve-ref-color-neutral-300);--nve-sys-layer-canvas-accent-background:var(--nve-ref-color-neutral-400);--nve-sys-layer-shell-background:var(--nve-ref-color-scheme-base);--nve-sys-layer-shell-accent-background:var(--nve-ref-color-neutral-100);--nve-sys-layer-container-accent-background:var(--nve-ref-color-neutral-100);--nve-sys-layer-overlay-accent-background:var(--nve-ref-color-neutral-100);--nve-sys-layer-popover-background:var(--nve-ref-color-neutral-1200);--nve-sys-layer-popover-color:var(--nve-sys-text-white-color);--nve-sys-layer-popover-accent-background:var(--nve-ref-color-neutral-1100);--nve-sys-layer-popover-offset:var(--nve-ref-size-50);--nve-sys-layer-popover-arrow-offset:var(--nve-ref-size-100);--nve-sys-layer-popover-arrow-padding:var(--nve-ref-size-150);--nve-sys-status-color:var(--nve-ref-color-neutral-1000);--nve-sys-status-pending-color:var(--nve-ref-color-neutral-1100);--nve-sys-status-unknown-color:var(--nve-sys-text-black-color);--nve-sys-status-ignored-color:var(--nve-ref-color-neutral-1100);--nve-sys-support-color:var(--nve-ref-color-neutral-1000);--nve-sys-support-muted-color:var(--nve-ref-color-neutral-600);--nve-sys-support-emphasis-color:var(--nve-ref-color-neutral-1000);--nve-sys-support-accent-color:var(--nve-sys-accent-secondary-background);--nve-sys-visualization-categorical-slate:var(--nve-ref-color-neutral-1000);--nve-sys-visualization-sequential-diverging-red-green-500:var(--nve-ref-color-neutral-400);--nve-sys-interaction-field-color:var(--nve-sys-interaction-color);--nve-sys-interaction-field-background:var(--nve-sys-interaction-background);--nve-sys-interaction-field-background-100:var(--nve-sys-interaction-background-100);--nve-sys-interaction-field-background-200:var(--nve-sys-interaction-background-200);--nve-sys-interaction-field-background-300:var(--nve-sys-interaction-background-300);--nve-sys-interaction-highlighted-color:var(--nve-sys-interaction-color);--nve-sys-interaction-hover-color:var(--nve-sys-text-emphasis-color);--nve-sys-interaction-hover-background:var(--nve-sys-interaction-background);--nve-sys-interaction-selected-color:var(--nve-sys-text-emphasis-color);--nve-sys-interaction-selected-background:var(--nve-sys-interaction-background);--nve-sys-interaction-state-base:var(--nve-sys-interaction-background);--nve-sys-layer-canvas-color:var(--nve-sys-text-color);--nve-sys-layer-shell-color:var(--nve-sys-text-color);--nve-sys-layer-container-color:var(--nve-sys-text-color);--nve-sys-layer-overlay-color:var(--nve-sys-text-color);--nve-sys-scrollbar-thumb-color:var(--nve-ref-border-color-muted)}
package/dist/index.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export declare const VERSION = "0.0.0";
2
- export declare const theme: Record<string, string>;
package/dist/index.examples.js DELETED
@@ -1,6 +0,0 @@
1
- //#region src/index.examples.ts
2
- var e = "";
3
- //#endregion
4
- export { e as default };
5
-
6
- //# sourceMappingURL=index.examples.js.map
package/dist/index.examples.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.examples.js","names":[],"sources":["../src/index.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\nimport '@nvidia-elements/core/dialog/define.js';\nimport '@nvidia-elements/core/tooltip/define.js';\nimport '@nvidia-elements/core/search/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\nimport '@nvidia-elements/core/tooltip/define.js';\n\nexport default {\n title: 'Themes/Examples',\n component: 'nve-internal-patterns'\n};\n\n/**\n * @summary Theme layer stacking (canvas, container, overlay, popover) in light and dark modes.\n */\nexport const Layers = {\n render: () => html`\n <style>\n body {\n padding: 0 !important;\n }\n </style>\n <div nve-theme=\"light root\" nve-layout=\"column gap:lg pad:lg\" style=\"height: 50vh;\">\n <nve-card style=\"width: 500px; height: 300px;\">\n <nve-card-header>\n <div slot=\"title\">Card</div>\n <div slot=\"subtitle\">Sub Title</div>\n </nve-card-header>\n <nve-card-content>\n <nve-input>\n <label>label</label>\n <input type=\"text\" value=\"input\" />\n <nve-control-message>message</nve-control-message>\n </nve-input>\n </nve-card-content>\n <nve-card-footer>\n <nve-button>button <nve-icon name=\"arrow\" direction=\"right\"></nve-icon></nve-button>\n </nve-card-footer>\n </nve-card>\n <div nve-layout=\"column gap:md\">\n <nve-input>\n <label>label</label>\n <input type=\"text\" value=\"input\" />\n <nve-control-message>message</nve-control-message>\n </nve-input>\n <nve-button>button <nve-icon name=\"arrow\" direction=\"right\"></nve-icon></nve-button>\n </div>\n <nve-dialog size=\"sm\" closable position=\"top\" alignment=\"end\" style=\"--min-width: 400px\">\n <h3 nve-text=\"heading\">Dialog</h3>\n <p nve-text=\"body\" style=\"margin-bottom: 48px\">hello there</p>\n <nve-button id=\"dropdown-btn\">button</nve-button>\n <nve-dropdown anchor=\"dropdown-btn\" closable position=\"bottom\" alignment=\"start\">\n <nve-search rounded>\n <label>dropdown content</label>\n <nve-icon-button id=\"tooltip-btn-1\" icon-name=\"information-circle-stroke\" container=\"flat\" aria-label=\"more details\" slot=\"label\"></nve-icon-button>\n <input type=\"search\" placeholder=\"search\" />\n </nve-search>\n <nve-tooltip anchor=\"tooltip-btn-1\" position=\"top\">tooltip</nve-tooltip>\n </nve-dropdown>\n </nve-dialog>\n </div>\n\n <div nve-theme=\"dark root\" nve-layout=\"column gap:lg pad:lg\" style=\"height: 50vh; position: relative;\">\n <nve-card style=\"width: 500px; height: 300px;\">\n <nve-card-header>\n <div slot=\"title\">Card</div>\n <div slot=\"subtitle\">Sub Title</div>\n </nve-card-header>\n <nve-card-content>\n <nve-input>\n <label>label</label>\n <input type=\"text\" value=\"input\" />\n <nve-control-message>message</nve-control-message>\n </nve-input>\n </nve-card-content>\n <nve-card-footer>\n <nve-button>button <nve-icon name=\"arrow\" direction=\"right\"></nve-icon></nve-button>\n </nve-card-footer>\n </nve-card>\n <div nve-layout=\"column gap:md\">\n <nve-input>\n <label>label</label>\n <input type=\"text\" value=\"input\" />\n <nve-control-message>message</nve-control-message>\n </nve-input>\n <nve-button>button <nve-icon name=\"arrow\" direction=\"right\"></nve-icon></nve-button>\n </div>\n <div id=\"dark\" style=\"position: absolute; right: 48px; top: 0;\"></div>\n <nve-dialog size=\"sm\" closable position=\"bottom\" alignment=\"end\" anchor=\"dark\" style=\"--min-width: 400px\">\n <h3 nve-text=\"heading\">Dialog</h3>\n <p nve-text=\"body\" style=\"margin-bottom: 48px\">hello there</p>\n <nve-button id=\"dropdown-btn\">button</nve-button>\n <nve-dropdown anchor=\"dropdown-btn\" closable position=\"bottom\" alignment=\"start\">\n <nve-search rounded>\n <label>dropdown content</label>\n <nve-icon-button id=\"tooltip-btn-2\" icon-name=\"information-circle-stroke\" container=\"flat\" aria-label=\"more details\" slot=\"label\"></nve-icon-button>\n <input type=\"search\" placeholder=\"search\" />\n </nve-search>\n <nve-tooltip anchor=\"tooltip-btn-2\" position=\"top\">tooltip</nve-tooltip>\n </nve-dropdown>\n </nve-dialog>\n </div>\n `\n}\n\n/**\n * @summary Theme layer object reference showing semantic backgrounds for canvas, container, overlay, and popover.\n */\nexport const Objects = {\n render: () => html`\n <style>\n .layer-demo {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 48px;\n padding: 24px;\n background: var(--nve-sys-layer-canvas-background);\n }\n\n .layer-demo h2,\n .layer-demo ul {\n margin: 0 0 12px 0;\n font-weight: normal;\n }\n\n .canvas {\n background: var(--nve-sys-layer-canvas-background);\n color: var(--nve-sys-layer-canvas-color);\n padding: var(--nve-ref-size-600);\n }\n\n .container {\n background: var(--nve-sys-layer-container-background);\n color: var(--nve-sys-layer-container-color);\n padding: var(--nve-ref-size-500);\n box-shadow: var(--nve-ref-shadow-100);\n border-radius: var(--nve-ref-border-radius-lg);\n width: 400px;\n height: 300px;\n }\n\n .overlay {\n background: var(--nve-sys-layer-overlay-background);\n color: var(--nve-sys-layer-overlay-color);\n padding: var(--nve-ref-size-600);\n box-shadow: var(--nve-ref-shadow-200);\n border-radius: var(--nve-ref-border-radius-lg);\n width: 400px;\n height: 300px;\n }\n\n .backdrop {\n background: var(--nve-sys-layer-backdrop-background);\n padding: 24px;\n width: 400px;\n height: 300px;\n display: flex;\n place-content: center;\n place-items: center;\n }\n\n .backdrop .overlay {\n width: 300px;\n height: 200px;\n }\n\n .popover {\n background: var(--nve-sys-layer-popover-background);\n color: var(--nve-sys-layer-popover-color);\n padding: var(--nve-ref-size-400);\n box-shadow: var(--nve-ref-shadow-300);\n border-radius: var(--nve-ref-border-radius-md);\n width: 400px;\n height: 130px;\n }\n </style>\n\n <section class=\"layer-demo\">\n <div class=\"canvas\">\n <h2>canvas</h2>\n <ul>\n <li>document</li>\n <li>body</li>\n </ul>\n </div>\n <div class=\"container\">\n <h2>container</h2>\n <ul>\n <li>cards</li>\n <li>steps</li>\n <li>tabs</li>\n </ul>\n </div>\n <div class=\"backdrop\">\n <div class=\"overlay\">\n <h2>overlay/backdrop</h2>\n <ul>\n <li>modals</li>\n <li>drawers</li>\n <li>dropdown menus</li>\n </ul>\n </div>\n </div>\n <div class=\"popover\">\n <h2>popover</h2>\n <ul>\n <li>tooltips</li>\n <li>toasts</li>\n <li>notifications</li>\n </ul>\n </div>\n </section>\n `\n}\n\n/**\n * @summary Reduced-motion theme setting that disables animations for accessibility.\n */\nexport const ReducedMotion = {\n render: () => html`\n<style>\n @keyframes slide-demo {\n 0% {\n left: 0;\n }\n\n 50% {\n left: calc(100% - 25px);\n }\n\n 100% {\n left: 0;\n }\n }\n\n .animation,\n .animation[nve-theme] {\n width: 150px;\n height: 50px;\n border: 1px solid #ccc;\n position: relative;\n padding: 0;\n }\n\n .animation div {\n width: 20px;\n height: 50px;\n background-color: #ccc;\n animation: slide-demo var(--nve-ref-animation-duration-400);\n animation-timing-function: var(--nve-ref-animation-easing-100);\n animation-iteration-count: infinite;\n animation-delay: 500ms;\n width: 25px;\n height: 50px;\n position: absolute;\n left: 0;\n }\n</style>\n<div nve-layout=\"row gap:md\">\n <section nve-layout=\"column gap:sm\">\n <code>nve-theme=\"\"</code>\n <div class=\"animation\" nve-theme=\"\">\n <div></div>\n </div>\n </section>\n <section nve-layout=\"column gap:sm\">\n <code>nve-theme=\"reduced-motion\"</code>\n <div class=\"animation\" nve-theme=\"reduced-motion\">\n <div></div>\n </div>\n </section>\n</div>`\n}\n\n\n/**\n * @summary Theme interaction state system for buttons showing hover, active, selected, and disabled states.\n */\nexport const ButtonInteractions = {\n render() {\n return html`\n<style>\n button {\n background: color-mix(in oklab, var(--nve-sys-interaction-state-base) 100%, var(--nve-sys-interaction-state-mix) var(--nve-sys-interaction-state-ratio, 0%));\n color: var(--nve-sys-interaction-color);\n border: 0;\n padding: 12px;\n cursor: pointer;\n margin-bottom: 6px;\n width: 100px;\n }\n\n button:hover,\n button[hover] {\n --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n }\n\n button:active,\n button[active] {\n --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-active);\n }\n\n button:disabled,\n button[disabled] {\n --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-disabled);\n }\n\n button[selected] {\n --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected);\n }\n</style>\n<section>\n <button>button</button>\n <button hover>hover</button>\n <button active>active</button>\n <button selected>selected</button>\n <button disabled>disabled</button>\n</section>\n<section style=\"--nve-sys-interaction-state-base: var(--nve-sys-interaction-emphasis-background)\">\n <button>button</button>\n <button hover>hover</button>\n <button active>active</button>\n <button selected>selected</button>\n <button disabled>disabled</button>\n</section>\n `;\n }\n}\n\n/**\n * @summary Theme interaction state system for menu items with all interactive states in both themes.\n */\nexport const Interactions = {\n render: () => html`\n <style>\n .menu {\n display: flex;\n flex-direction: column;\n max-width: 200px;\n width: 100%;\n margin: 0;\n padding: 0;\n }\n\n .menu-item {\n width: 100%;\n display: block;\n border: 0;\n cursor: pointer;\n text-align: left;\n padding: var(--nve-ref-size-200) var(--nve-ref-size-300);\n color: var(--nve-sys-interaction-color);\n font-size: var(--nve-ref-font-size-300);\n border-radius: var(--nve-ref-border-radius-xs);\n background-image: linear-gradient(color-mix(in oklab, var(--nve-sys-interaction-state-base) 100%, var(--nve-sys-interaction-state-mix) var(--nve-sys-interaction-state-ratio)) 0 0) !important;\n }\n\n .menu-item:hover,\n .menu-item[hover] {\n --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n }\n\n .menu-item:active,\n .menu-item[active] {\n --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-active);\n }\n\n .menu-item[selected] {\n --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected);\n }\n\n .menu-item[disabled] {\n --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-disabled);\n cursor: not-allowed;\n }\n\n .menu-item[readonly] {\n --nve-sys-interaction-state-ratio: 0;\n }\n\n .menu-item:focus,\n .menu-item[focused] {\n outline-offset: -3px;\n outline: 5px auto -webkit-focus-ring-color;\n outline: Highlight solid 2px;\n }\n </style>\n <div nve-layout=\"grid gap:md\">\n <section nve-theme=\"root light\" nve-layout=\"span:12 row gap:sm pad:md align:stretch\">\n <div class=\"menu\">\n <div class=\"menu-item\">item</div>\n <div class=\"menu-item\">default</div>\n <div class=\"menu-item\">item</div>\n </div>\n <div class=\"menu\">\n <div class=\"menu-item\">item</div>\n <div class=\"menu-item\" hover>hover</div>\n <div class=\"menu-item\">item</div>\n </div>\n <div class=\"menu\">\n <div class=\"menu-item\">item</div>\n <div class=\"menu-item\" active>active</div>\n <div class=\"menu-item\">item</div>\n </div>\n <div class=\"menu\">\n <div class=\"menu-item\">item</div>\n <div class=\"menu-item\" selected>selected</div>\n <div class=\"menu-item\">item</div>\n </div>\n <div class=\"menu\">\n <div class=\"menu-item\">item</div>\n <div class=\"menu-item\" disabled>disabled</div>\n <div class=\"menu-item\">item</div>\n </div>\n <div class=\"menu\">\n <div class=\"menu-item\">item</div>\n <div class=\"menu-item\" focused>focused</div>\n <div class=\"menu-item\">item</div>\n </div>\n </section>\n <section nve-theme=\"root dark\" nve-layout=\"span:12 row gap:sm pad:md align:stretch\">\n <div class=\"menu\">\n <div class=\"menu-item\">item</div>\n <div class=\"menu-item\">default</div>\n <div class=\"menu-item\">item</div>\n </div>\n <div class=\"menu\">\n <div class=\"menu-item\">item</div>\n <div class=\"menu-item\" hover>hover</div>\n <div class=\"menu-item\">item</div>\n </div>\n <div class=\"menu\">\n <div class=\"menu-item\">item</div>\n <div class=\"menu-item\" active>active</div>\n <div class=\"menu-item\">item</div>\n </div>\n <div class=\"menu\">\n <div class=\"menu-item\">item</div>\n <div class=\"menu-item\" selected>selected</div>\n <div class=\"menu-item\">item</div>\n </div>\n <div class=\"menu\">\n <div class=\"menu-item\">item</div>\n <div class=\"menu-item\" disabled>disabled</div>\n <div class=\"menu-item\">item</div>\n </div>\n <div class=\"menu\">\n <div class=\"menu-item\">item</div>\n <div class=\"menu-item\" focused>focused</div>\n <div class=\"menu-item\">item</div>\n </div>\n </section>\n <section nve-theme=\"root light\" nve-layout=\"span:6 pad:md align:stretch\">\n <nve-card>\n <nve-card-content nve-layout=\"grid gap:md\">\n <div nve-layout=\"span:5 column gap:xs\">\n <div class=\"menu-item\">default</div>\n <div class=\"menu-item\" hover>hover</div>\n <div class=\"menu-item\" active>active</div>\n <div class=\"menu-item\" selected>selected</div>\n <div class=\"menu-item\" disabled>disabled</div>\n <div class=\"menu-item\" focused>focused</div>\n </div>\n <div nve-layout=\"span:7\">container</div>\n </nve-card-content>\n </nve-card>\n </section>\n <section nve-theme=\"root dark\" nve-layout=\"span:6 pad:md align:stretch\">\n <nve-card>\n <nve-card-content nve-layout=\"grid gap:md\">\n <div nve-layout=\"span:5 column gap:xs\">\n <div class=\"menu-item\">default</div>\n <div class=\"menu-item\" hover>hover</div>\n <div class=\"menu-item\" active>active</div>\n <div class=\"menu-item\" selected>selected</div>\n <div class=\"menu-item\" disabled>disabled</div>\n <div class=\"menu-item\" focused>focused</div>\n </div>\n <div nve-layout=\"span:7\">container</div>\n </nve-card-content>\n </nve-card>\n </section>\n </div>`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
package/dist/index.examples.json DELETED
@@ -1,51 +0,0 @@
1
- {
2
- "element": "nve-internal-patterns",
3
- "entrypoint": "@nvidia-elements/themes/index.examples.json",
4
- "items": [
5
- {
6
- "id": "themes-index_layers",
7
- "name": "Layers",
8
- "template": "<style>\n body {\n padding: 0 !important;\n }\n</style>\n<div nve-theme=\"light root\" nve-layout=\"column gap:lg pad:lg\" style=\"height: 50vh\">\n <nve-card style=\"width: 500px; height: 300px\">\n <nve-card-header>\n <div slot=\"title\">Card</div>\n <div slot=\"subtitle\">Sub Title</div>\n </nve-card-header>\n <nve-card-content>\n <nve-input>\n <label>label</label>\n <input type=\"text\" value=\"input\" />\n <nve-control-message>message</nve-control-message>\n </nve-input>\n </nve-card-content>\n <nve-card-footer>\n <nve-button>button <nve-icon name=\"arrow\" direction=\"right\"></nve-icon></nve-button>\n </nve-card-footer>\n </nve-card>\n <div nve-layout=\"column gap:md\">\n <nve-input>\n <label>label</label>\n <input type=\"text\" value=\"input\" />\n <nve-control-message>message</nve-control-message>\n </nve-input>\n <nve-button>button <nve-icon name=\"arrow\" direction=\"right\"></nve-icon></nve-button>\n </div>\n <nve-dialog size=\"sm\" closable position=\"top\" alignment=\"end\" style=\"--min-width: 400px\">\n <h3 nve-text=\"heading\">Dialog</h3>\n <p nve-text=\"body\" style=\"margin-bottom: 48px\">hello there</p>\n <nve-button id=\"dropdown-btn\">button</nve-button>\n <nve-dropdown anchor=\"dropdown-btn\" closable position=\"bottom\" alignment=\"start\">\n <nve-search rounded>\n <label>dropdown content</label>\n <nve-icon-button\n id=\"tooltip-btn-1\"\n icon-name=\"information-circle-stroke\"\n container=\"flat\"\n aria-label=\"more details\"\n slot=\"label\"\n ></nve-icon-button>\n <input type=\"search\" placeholder=\"search\" />\n </nve-search>\n <nve-tooltip anchor=\"tooltip-btn-1\" position=\"top\">tooltip</nve-tooltip>\n </nve-dropdown>\n </nve-dialog>\n</div>\n<div nve-theme=\"dark root\" nve-layout=\"column gap:lg pad:lg\" style=\"height: 50vh; position: relative\">\n <nve-card style=\"width: 500px; height: 300px\">\n <nve-card-header>\n <div slot=\"title\">Card</div>\n <div slot=\"subtitle\">Sub Title</div>\n </nve-card-header>\n <nve-card-content>\n <nve-input>\n <label>label</label>\n <input type=\"text\" value=\"input\" />\n <nve-control-message>message</nve-control-message>\n </nve-input>\n </nve-card-content>\n <nve-card-footer>\n <nve-button>button <nve-icon name=\"arrow\" direction=\"right\"></nve-icon></nve-button>\n </nve-card-footer>\n </nve-card>\n <div nve-layout=\"column gap:md\">\n <nve-input>\n <label>label</label>\n <input type=\"text\" value=\"input\" />\n <nve-control-message>message</nve-control-message>\n </nve-input>\n <nve-button>button <nve-icon name=\"arrow\" direction=\"right\"></nve-icon></nve-button>\n </div>\n <div id=\"dark\" style=\"position: absolute; right: 48px; top: 0\"></div>\n <nve-dialog size=\"sm\" closable position=\"bottom\" alignment=\"end\" anchor=\"dark\" style=\"--min-width: 400px\">\n <h3 nve-text=\"heading\">Dialog</h3>\n <p nve-text=\"body\" style=\"margin-bottom: 48px\">hello there</p>\n <nve-button id=\"dropdown-btn\">button</nve-button>\n <nve-dropdown anchor=\"dropdown-btn\" closable position=\"bottom\" alignment=\"start\">\n <nve-search rounded>\n <label>dropdown content</label>\n <nve-icon-button\n id=\"tooltip-btn-2\"\n icon-name=\"information-circle-stroke\"\n container=\"flat\"\n aria-label=\"more details\"\n slot=\"label\"\n ></nve-icon-button>\n <input type=\"search\" placeholder=\"search\" />\n </nve-search>\n <nve-tooltip anchor=\"tooltip-btn-2\" position=\"top\">tooltip</nve-tooltip>\n </nve-dropdown>\n </nve-dialog>\n</div>\n",
9
- "summary": "Theme layer stacking (canvas, container, overlay, popover) in light and dark modes.",
10
- "description": "",
11
- "composition": true,
12
- "tags": []
13
- },
14
- {
15
- "id": "themes-index_objects",
16
- "name": "Objects",
17
- "template": "<style>\n .layer-demo {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 48px;\n padding: 24px;\n background: var(--nve-sys-layer-canvas-background);\n }\n .layer-demo h2,\n .layer-demo ul {\n margin: 0 0 12px 0;\n font-weight: normal;\n }\n .canvas {\n background: var(--nve-sys-layer-canvas-background);\n color: var(--nve-sys-layer-canvas-color);\n padding: var(--nve-ref-size-600);\n }\n .container {\n background: var(--nve-sys-layer-container-background);\n color: var(--nve-sys-layer-container-color);\n padding: var(--nve-ref-size-500);\n box-shadow: var(--nve-ref-shadow-100);\n border-radius: var(--nve-ref-border-radius-lg);\n width: 400px;\n height: 300px;\n }\n .overlay {\n background: var(--nve-sys-layer-overlay-background);\n color: var(--nve-sys-layer-overlay-color);\n padding: var(--nve-ref-size-600);\n box-shadow: var(--nve-ref-shadow-200);\n border-radius: var(--nve-ref-border-radius-lg);\n width: 400px;\n height: 300px;\n }\n .backdrop {\n background: var(--nve-sys-layer-backdrop-background);\n padding: 24px;\n width: 400px;\n height: 300px;\n display: flex;\n place-content: center;\n place-items: center;\n }\n .backdrop .overlay {\n width: 300px;\n height: 200px;\n }\n .popover {\n background: var(--nve-sys-layer-popover-background);\n color: var(--nve-sys-layer-popover-color);\n padding: var(--nve-ref-size-400);\n box-shadow: var(--nve-ref-shadow-300);\n border-radius: var(--nve-ref-border-radius-md);\n width: 400px;\n height: 130px;\n }\n</style>\n<section class=\"layer-demo\">\n <div class=\"canvas\">\n <h2>canvas</h2>\n <ul>\n <li>document</li>\n <li>body</li>\n </ul>\n </div>\n <div class=\"container\">\n <h2>container</h2>\n <ul>\n <li>cards</li>\n <li>steps</li>\n <li>tabs</li>\n </ul>\n </div>\n <div class=\"backdrop\">\n <div class=\"overlay\">\n <h2>overlay/backdrop</h2>\n <ul>\n <li>modals</li>\n <li>drawers</li>\n <li>dropdown menus</li>\n </ul>\n </div>\n </div>\n <div class=\"popover\">\n <h2>popover</h2>\n <ul>\n <li>tooltips</li>\n <li>toasts</li>\n <li>notifications</li>\n </ul>\n </div>\n</section>\n",
18
- "summary": "Theme layer object reference showing semantic backgrounds for canvas, container, overlay, and popover.",
19
- "description": "",
20
- "composition": false,
21
- "tags": []
22
- },
23
- {
24
- "id": "themes-index_reduced-motion",
25
- "name": "ReducedMotion",
26
- "template": "<style>\n @keyframes slide-demo {\n 0% {\n left: 0;\n }\n 50% {\n left: calc(100% - 25px);\n }\n 100% {\n left: 0;\n }\n }\n .animation,\n .animation[nve-theme] {\n width: 150px;\n height: 50px;\n border: 1px solid #ccc;\n position: relative;\n padding: 0;\n }\n .animation div {\n width: 20px;\n height: 50px;\n background-color: #ccc;\n animation: slide-demo var(--nve-ref-animation-duration-400);\n animation-timing-function: var(--nve-ref-animation-easing-100);\n animation-iteration-count: infinite;\n animation-delay: 500ms;\n width: 25px;\n height: 50px;\n position: absolute;\n left: 0;\n }\n</style>\n<div nve-layout=\"row gap:md\">\n <section nve-layout=\"column gap:sm\">\n <code>nve-theme</code>\n <div class=\"animation\" nve-theme>\n <div></div>\n </div>\n </section>\n <section nve-layout=\"column gap:sm\">\n <code>nve-theme=\"reduced-motion\"</code>\n <div class=\"animation\" nve-theme=\"reduced-motion\">\n <div></div>\n </div>\n </section>\n</div>\n",
27
- "summary": "Reduced-motion theme setting that disables animations for accessibility.",
28
- "description": "",
29
- "composition": false,
30
- "tags": []
31
- },
32
- {
33
- "id": "themes-index_button-interactions",
34
- "name": "ButtonInteractions",
35
- "template": "<style>\n button {\n background: color-mix(\n in oklab,\n var(--nve-sys-interaction-state-base) 100%,\n var(--nve-sys-interaction-state-mix) var(--nve-sys-interaction-state-ratio, 0%)\n );\n color: var(--nve-sys-interaction-color);\n border: 0;\n padding: 12px;\n cursor: pointer;\n margin-bottom: 6px;\n width: 100px;\n }\n button:hover,\n button[hover] {\n --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n }\n button:active,\n button[active] {\n --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-active);\n }\n button:disabled,\n button[disabled] {\n --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-disabled);\n }\n button[selected] {\n --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected);\n }\n</style>\n<section>\n <button>button</button>\n <button hover>hover</button>\n <button active>active</button>\n <button selected>selected</button>\n <button disabled>disabled</button>\n</section>\n<section style=\"--nve-sys-interaction-state-base: var(--nve-sys-interaction-emphasis-background)\">\n <button>button</button>\n <button hover>hover</button>\n <button active>active</button>\n <button selected>selected</button>\n <button disabled>disabled</button>\n</section>\n",
36
- "summary": "Theme interaction state system for buttons showing hover, active, selected, and disabled states.",
37
- "description": "",
38
- "composition": false,
39
- "tags": []
40
- },
41
- {
42
- "id": "themes-index_interactions",
43
- "name": "Interactions",
44
- "template": "<style>\n .menu {\n display: flex;\n flex-direction: column;\n max-width: 200px;\n width: 100%;\n margin: 0;\n padding: 0;\n }\n .menu-item {\n width: 100%;\n display: block;\n border: 0;\n cursor: pointer;\n text-align: left;\n padding: var(--nve-ref-size-200) var(--nve-ref-size-300);\n color: var(--nve-sys-interaction-color);\n font-size: var(--nve-ref-font-size-300);\n border-radius: var(--nve-ref-border-radius-xs);\n background-image: linear-gradient(\n color-mix(\n in oklab,\n var(--nve-sys-interaction-state-base) 100%,\n var(--nve-sys-interaction-state-mix) var(--nve-sys-interaction-state-ratio)\n )\n 0 0\n ) !important;\n }\n .menu-item:hover,\n .menu-item[hover] {\n --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n }\n .menu-item:active,\n .menu-item[active] {\n --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-active);\n }\n .menu-item[selected] {\n --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected);\n }\n .menu-item[disabled] {\n --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-disabled);\n cursor: not-allowed;\n }\n .menu-item[readonly] {\n --nve-sys-interaction-state-ratio: 0;\n }\n .menu-item:focus,\n .menu-item[focused] {\n outline-offset: -3px;\n outline: 5px auto -webkit-focus-ring-color;\n outline: Highlight solid 2px;\n }\n</style>\n<div nve-layout=\"grid gap:md\">\n <section nve-theme=\"root light\" nve-layout=\"span:12 row gap:sm pad:md align:stretch\">\n <div class=\"menu\">\n <div class=\"menu-item\">item</div>\n <div class=\"menu-item\">default</div>\n <div class=\"menu-item\">item</div>\n </div>\n <div class=\"menu\">\n <div class=\"menu-item\">item</div>\n <div class=\"menu-item\" hover>hover</div>\n <div class=\"menu-item\">item</div>\n </div>\n <div class=\"menu\">\n <div class=\"menu-item\">item</div>\n <div class=\"menu-item\" active>active</div>\n <div class=\"menu-item\">item</div>\n </div>\n <div class=\"menu\">\n <div class=\"menu-item\">item</div>\n <div class=\"menu-item\" selected>selected</div>\n <div class=\"menu-item\">item</div>\n </div>\n <div class=\"menu\">\n <div class=\"menu-item\">item</div>\n <div class=\"menu-item\" disabled>disabled</div>\n <div class=\"menu-item\">item</div>\n </div>\n <div class=\"menu\">\n <div class=\"menu-item\">item</div>\n <div class=\"menu-item\" focused>focused</div>\n <div class=\"menu-item\">item</div>\n </div>\n </section>\n <section nve-theme=\"root dark\" nve-layout=\"span:12 row gap:sm pad:md align:stretch\">\n <div class=\"menu\">\n <div class=\"menu-item\">item</div>\n <div class=\"menu-item\">default</div>\n <div class=\"menu-item\">item</div>\n </div>\n <div class=\"menu\">\n <div class=\"menu-item\">item</div>\n <div class=\"menu-item\" hover>hover</div>\n <div class=\"menu-item\">item</div>\n </div>\n <div class=\"menu\">\n <div class=\"menu-item\">item</div>\n <div class=\"menu-item\" active>active</div>\n <div class=\"menu-item\">item</div>\n </div>\n <div class=\"menu\">\n <div class=\"menu-item\">item</div>\n <div class=\"menu-item\" selected>selected</div>\n <div class=\"menu-item\">item</div>\n </div>\n <div class=\"menu\">\n <div class=\"menu-item\">item</div>\n <div class=\"menu-item\" disabled>disabled</div>\n <div class=\"menu-item\">item</div>\n </div>\n <div class=\"menu\">\n <div class=\"menu-item\">item</div>\n <div class=\"menu-item\" focused>focused</div>\n <div class=\"menu-item\">item</div>\n </div>\n </section>\n <section nve-theme=\"root light\" nve-layout=\"span:6 pad:md align:stretch\">\n <nve-card>\n <nve-card-content nve-layout=\"grid gap:md\">\n <div nve-layout=\"span:5 column gap:xs\">\n <div class=\"menu-item\">default</div>\n <div class=\"menu-item\" hover>hover</div>\n <div class=\"menu-item\" active>active</div>\n <div class=\"menu-item\" selected>selected</div>\n <div class=\"menu-item\" disabled>disabled</div>\n <div class=\"menu-item\" focused>focused</div>\n </div>\n <div nve-layout=\"span:7\">container</div>\n </nve-card-content>\n </nve-card>\n </section>\n <section nve-theme=\"root dark\" nve-layout=\"span:6 pad:md align:stretch\">\n <nve-card>\n <nve-card-content nve-layout=\"grid gap:md\">\n <div nve-layout=\"span:5 column gap:xs\">\n <div class=\"menu-item\">default</div>\n <div class=\"menu-item\" hover>hover</div>\n <div class=\"menu-item\" active>active</div>\n <div class=\"menu-item\" selected>selected</div>\n <div class=\"menu-item\" disabled>disabled</div>\n <div class=\"menu-item\" focused>focused</div>\n </div>\n <div nve-layout=\"span:7\">container</div>\n </nve-card-content>\n </nve-card>\n </section>\n</div>\n",
45
- "summary": "Theme interaction state system for menu items with all interactive states in both themes.",
46
- "description": "",
47
- "composition": false,
48
- "tags": []
49
- }
50
- ]
51
- }