@neuravision/construct 2.0.2 → 2.1.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 (115) hide show
  1. package/CHANGELOG.md +272 -0
  2. package/README.md +148 -152
  3. package/behaviors/combobox.js +447 -0
  4. package/behaviors/drawer.js +18 -0
  5. package/behaviors/dropdown.js +296 -0
  6. package/behaviors/index.d.ts +333 -0
  7. package/behaviors/index.js +9 -0
  8. package/behaviors/internal/dialog-controller.js +351 -0
  9. package/behaviors/internal/dom.js +377 -0
  10. package/behaviors/internal/overlay.js +241 -0
  11. package/behaviors/internal/popup-layer.js +188 -0
  12. package/behaviors/modal.js +17 -0
  13. package/behaviors/popover.js +269 -0
  14. package/behaviors/select-menu.js +326 -0
  15. package/behaviors/tabs.js +230 -0
  16. package/behaviors/toggle-group.js +234 -0
  17. package/behaviors/tooltip.js +233 -0
  18. package/components/README.md +279 -83
  19. package/components/_shared.css +11 -10
  20. package/components/_shell-shared.css +20 -4
  21. package/components/app-shell-v2.css +21 -14
  22. package/components/app-shell.css +23 -14
  23. package/components/badge.css +15 -0
  24. package/components/button.css +103 -15
  25. package/components/card.css +53 -8
  26. package/components/checkbox.css +3 -2
  27. package/components/chip.css +1 -1
  28. package/components/datepicker.css +3 -1
  29. package/components/datum.css +204 -0
  30. package/components/index.css +5 -0
  31. package/components/meter.css +182 -0
  32. package/components/navbar.css +88 -3
  33. package/components/slider.css +2 -1
  34. package/components/status.css +107 -0
  35. package/components/switch.css +4 -3
  36. package/components/tooltip.css +4 -0
  37. package/docs/architecture.md +79 -0
  38. package/docs/behaviors.md +101 -0
  39. package/docs/fonts.md +70 -0
  40. package/docs/governance.md +85 -0
  41. package/docs/guidelines.md +42 -23
  42. package/examples/react/README.md +20 -0
  43. package/examples/react/SettingsModal.jsx +66 -0
  44. package/examples/react/construct.css +5 -0
  45. package/fonts.css +10 -0
  46. package/foundations.css +8 -1
  47. package/package.json +72 -21
  48. package/schemas/components.schema.json +107 -0
  49. package/schemas/examples/theme.example.json +27 -0
  50. package/schemas/primitives.schema.json +135 -0
  51. package/schemas/semantic.schema.json +223 -0
  52. package/schemas/theme.schema.json +63 -0
  53. package/scripts/build-tokens.mjs +1417 -0
  54. package/scripts/construct-theme.mjs +43 -0
  55. package/scripts/validate-tokens.mjs +25 -0
  56. package/standalone/accordion.css +3 -0
  57. package/standalone/alert.css +3 -0
  58. package/standalone/app-shell-v2.css +4 -0
  59. package/standalone/app-shell.css +4 -0
  60. package/standalone/avatar.css +3 -0
  61. package/standalone/badge.css +3 -0
  62. package/standalone/banner.css +3 -0
  63. package/standalone/breadcrumbs.css +3 -0
  64. package/standalone/button.css +3 -0
  65. package/standalone/card.css +3 -0
  66. package/standalone/chart.css +3 -0
  67. package/standalone/checkbox.css +3 -0
  68. package/standalone/chip.css +3 -0
  69. package/standalone/combobox.css +3 -0
  70. package/standalone/core.css +4 -0
  71. package/standalone/data-table.css +3 -0
  72. package/standalone/datepicker.css +3 -0
  73. package/standalone/datum.css +3 -0
  74. package/standalone/divider.css +3 -0
  75. package/standalone/drawer.css +3 -0
  76. package/standalone/dropdown.css +3 -0
  77. package/standalone/empty-state.css +3 -0
  78. package/standalone/field.css +3 -0
  79. package/standalone/file-upload.css +3 -0
  80. package/standalone/icon.css +3 -0
  81. package/standalone/input.css +3 -0
  82. package/standalone/list.css +3 -0
  83. package/standalone/meter.css +3 -0
  84. package/standalone/modal.css +3 -0
  85. package/standalone/navbar.css +3 -0
  86. package/standalone/pagination.css +3 -0
  87. package/standalone/popover.css +3 -0
  88. package/standalone/progress-bar.css +3 -0
  89. package/standalone/select-menu.css +3 -0
  90. package/standalone/select.css +3 -0
  91. package/standalone/sidebar.css +3 -0
  92. package/standalone/skeleton.css +3 -0
  93. package/standalone/skip-link.css +3 -0
  94. package/standalone/slider.css +3 -0
  95. package/standalone/spinner.css +3 -0
  96. package/standalone/status.css +3 -0
  97. package/standalone/switch.css +3 -0
  98. package/standalone/table.css +3 -0
  99. package/standalone/tabs.css +3 -0
  100. package/standalone/textarea.css +3 -0
  101. package/standalone/toast.css +3 -0
  102. package/standalone/toggle-group.css +3 -0
  103. package/standalone/toolbar.css +3 -0
  104. package/standalone/tooltip.css +3 -0
  105. package/standalone/tree.css +3 -0
  106. package/tokens/README.md +130 -126
  107. package/tokens/components.json +54 -0
  108. package/tokens/primitives.json +268 -0
  109. package/tokens/semantic.dark.json +93 -0
  110. package/tokens/semantic.high-contrast.json +93 -0
  111. package/tokens/semantic.light.json +178 -0
  112. package/tokens/tokens.css +532 -28
  113. package/tokens/tokens.js +335 -25
  114. package/tokens/tokens.json +764 -21
  115. package/tokens/tokens.ts +335 -25
package/scripts/construct-theme.mjs ADDED
@@ -0,0 +1,43 @@
1
+ #!/usr/bin/env node
2
+
3
+ import path from 'node:path';
4
+ import process from 'node:process';
5
+
6
+ import { buildTokens, parseArgs } from './build-tokens.mjs';
7
+
8
+ const help = [
9
+ 'Usage: construct-theme --theme <file> [options]',
10
+ '',
11
+ 'Builds Construct token outputs with one or more validated product themes.',
12
+ '',
13
+ 'Options:',
14
+ ' --theme <file> custom theme input; repeat to include more themes',
15
+ ' --out-dir <directory> output directory (default: ./construct-theme)',
16
+ ' --check fail when the output directory is not up to date',
17
+ ' --validate-only validate without writing output',
18
+ ' --report-contrast print every measured contrast ratio',
19
+ ' -h, --help show this help',
20
+ ].join('\n');
21
+
22
+ const hasOption = (args, name) =>
23
+ args.includes(name) || args.some((argument) => argument.startsWith(`${name}=`));
24
+
25
+ try {
26
+ const args = process.argv.slice(2);
27
+ const options = parseArgs(args);
28
+
29
+ if (options.help) {
30
+ console.log(help);
31
+ } else {
32
+ if (!options.themes.length) {
33
+ throw new Error('construct-theme requires at least one --theme <file> input.');
34
+ }
35
+ if (!hasOption(args, '--out-dir')) {
36
+ options.outDir = path.resolve(process.cwd(), 'construct-theme');
37
+ }
38
+ buildTokens(options);
39
+ }
40
+ } catch (error) {
41
+ console.error(error.message);
42
+ process.exitCode = 1;
43
+ }
package/scripts/validate-tokens.mjs ADDED
@@ -0,0 +1,25 @@
1
+ import process from 'node:process';
2
+ import { buildTokens, parseArgs } from './build-tokens.mjs';
3
+
4
+ try {
5
+ const forwardedArgs = process.argv.slice(2);
6
+ if (forwardedArgs.includes('--check')) {
7
+ throw new Error('validate-tokens.mjs does not accept --check; use build-tokens.mjs --check.');
8
+ }
9
+ const options = parseArgs(['--validate-only', ...forwardedArgs]);
10
+ if (options.help) {
11
+ console.log(
12
+ [
13
+ 'Usage: node scripts/validate-tokens.mjs [--theme <file>] [--report-contrast]',
14
+ '',
15
+ 'Validates token schemas, layer references, theme completeness, unknown',
16
+ 'overrides, and WCAG contrast pairs without writing generated files.',
17
+ ].join('\n')
18
+ );
19
+ } else {
20
+ buildTokens(options);
21
+ }
22
+ } catch (error) {
23
+ console.error(error.message);
24
+ process.exitCode = 1;
25
+ }
package/standalone/accordion.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/accordion.css';
package/standalone/alert.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/alert.css';
package/standalone/app-shell-v2.css ADDED
@@ -0,0 +1,4 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/app-shell-v2.css';
4
+ @import '../components/_shell-shared.css';
package/standalone/app-shell.css ADDED
@@ -0,0 +1,4 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/app-shell.css';
4
+ @import '../components/_shell-shared.css';
package/standalone/avatar.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/avatar.css';
package/standalone/badge.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/badge.css';
package/standalone/banner.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/banner.css';
package/standalone/breadcrumbs.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/breadcrumbs.css';
package/standalone/button.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/button.css';
package/standalone/card.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/card.css';
package/standalone/chart.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/chart.css';
package/standalone/checkbox.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/checkbox.css';
package/standalone/chip.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/chip.css';
package/standalone/combobox.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/combobox.css';
package/standalone/core.css ADDED
@@ -0,0 +1,4 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import '../tokens/tokens.css';
3
+ @import '../components/_shared.css';
4
+ @import '../components/_keyframes.css';
package/standalone/data-table.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/data-table.css';
package/standalone/datepicker.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/datepicker.css';
package/standalone/datum.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/datum.css';
package/standalone/divider.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/divider.css';
package/standalone/drawer.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/drawer.css';
package/standalone/dropdown.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/dropdown.css';
package/standalone/empty-state.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/empty-state.css';
package/standalone/field.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/field.css';
package/standalone/file-upload.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/file-upload.css';
package/standalone/icon.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/icon.css';
package/standalone/input.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/input.css';
package/standalone/list.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/list.css';
package/standalone/meter.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/meter.css';
package/standalone/modal.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/modal.css';
package/standalone/navbar.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/navbar.css';
package/standalone/pagination.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/pagination.css';
package/standalone/popover.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/popover.css';
package/standalone/progress-bar.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/progress-bar.css';
package/standalone/select-menu.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/select-menu.css';
package/standalone/select.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/select.css';
package/standalone/sidebar.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/sidebar.css';
package/standalone/skeleton.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/skeleton.css';
package/standalone/skip-link.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/skip-link.css';
package/standalone/slider.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/slider.css';
package/standalone/spinner.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/spinner.css';
package/standalone/status.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/status.css';
package/standalone/switch.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/switch.css';
package/standalone/table.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/table.css';
package/standalone/tabs.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/tabs.css';
package/standalone/textarea.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/textarea.css';
package/standalone/toast.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/toast.css';
package/standalone/toggle-group.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/toggle-group.css';
package/standalone/toolbar.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/toolbar.css';
package/standalone/tooltip.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/tooltip.css';
package/standalone/tree.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
2
+ @import './core.css';
3
+ @import '../components/tree.css';