@capillaryjs/capillary-ui 1.0.0-alpha.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 (178) hide show
  1. package/CHANGELOG.md +459 -0
  2. package/LICENSE +55 -0
  3. package/NOTICE +2 -0
  4. package/README.md +853 -0
  5. package/colors/README.md +63 -0
  6. package/colors/gray/colors.css +16 -0
  7. package/colors/green/colors.css +16 -0
  8. package/colors/iceblue/colors.css +19 -0
  9. package/colors/ocean/colors.css +16 -0
  10. package/colors/orange/colors.css +16 -0
  11. package/colors/purple/colors.css +16 -0
  12. package/colors/red/colors.css +16 -0
  13. package/colors/yellow/colors.css +16 -0
  14. package/dist/Components/Placeholder.d.ts +15 -0
  15. package/dist/Components/Placeholder.d.ts.map +1 -0
  16. package/dist/Components/app/app.d.ts +41 -0
  17. package/dist/Components/app/app.d.ts.map +1 -0
  18. package/dist/Components/component.d.ts +256 -0
  19. package/dist/Components/component.d.ts.map +1 -0
  20. package/dist/Components/controlUtils.d.ts +23 -0
  21. package/dist/Components/controlUtils.d.ts.map +1 -0
  22. package/dist/Components/data/descriptionList.d.ts +23 -0
  23. package/dist/Components/data/descriptionList.d.ts.map +1 -0
  24. package/dist/Components/data/filterState.d.ts +38 -0
  25. package/dist/Components/data/filterState.d.ts.map +1 -0
  26. package/dist/Components/data/infoPanel.d.ts +29 -0
  27. package/dist/Components/data/infoPanel.d.ts.map +1 -0
  28. package/dist/Components/data/listview/listview.d.ts +51 -0
  29. package/dist/Components/data/listview/listview.d.ts.map +1 -0
  30. package/dist/Components/data/selectionhandler.d.ts +87 -0
  31. package/dist/Components/data/selectionhandler.d.ts.map +1 -0
  32. package/dist/Components/data/table/DataTable.d.ts +79 -0
  33. package/dist/Components/data/table/DataTable.d.ts.map +1 -0
  34. package/dist/Components/data/table/FilterPanel.d.ts +41 -0
  35. package/dist/Components/data/table/FilterPanel.d.ts.map +1 -0
  36. package/dist/Components/data/table/TableHeader.d.ts +23 -0
  37. package/dist/Components/data/table/TableHeader.d.ts.map +1 -0
  38. package/dist/Components/data/table/TableHeaderCell.d.ts +41 -0
  39. package/dist/Components/data/table/TableHeaderCell.d.ts.map +1 -0
  40. package/dist/Components/data/table/tableDataSource.d.ts +49 -0
  41. package/dist/Components/data/table/tableDataSource.d.ts.map +1 -0
  42. package/dist/Components/data/table/tableQuery.d.ts +29 -0
  43. package/dist/Components/data/table/tableQuery.d.ts.map +1 -0
  44. package/dist/Components/data/treeview/treeModel.d.ts +23 -0
  45. package/dist/Components/data/treeview/treeModel.d.ts.map +1 -0
  46. package/dist/Components/data/treeview/treeitem.d.ts +21 -0
  47. package/dist/Components/data/treeview/treeitem.d.ts.map +1 -0
  48. package/dist/Components/data/treeview/treeview.d.ts +49 -0
  49. package/dist/Components/data/treeview/treeview.d.ts.map +1 -0
  50. package/dist/Components/dialog/dialog.d.ts +46 -0
  51. package/dist/Components/dialog/dialog.d.ts.map +1 -0
  52. package/dist/Components/layout/declarativeRegion.d.ts +30 -0
  53. package/dist/Components/layout/declarativeRegion.d.ts.map +1 -0
  54. package/dist/Components/layout/groupBox.d.ts +21 -0
  55. package/dist/Components/layout/groupBox.d.ts.map +1 -0
  56. package/dist/Components/layout/header.d.ts +20 -0
  57. package/dist/Components/layout/header.d.ts.map +1 -0
  58. package/dist/Components/layout/layout.d.ts +28 -0
  59. package/dist/Components/layout/layout.d.ts.map +1 -0
  60. package/dist/Components/layout/layoutTraits.d.ts +39 -0
  61. package/dist/Components/layout/layoutTraits.d.ts.map +1 -0
  62. package/dist/Components/layout/optionGroup.d.ts +35 -0
  63. package/dist/Components/layout/optionGroup.d.ts.map +1 -0
  64. package/dist/Components/layout/optionsBox.d.ts +12 -0
  65. package/dist/Components/layout/optionsBox.d.ts.map +1 -0
  66. package/dist/Components/layout/panel.d.ts +34 -0
  67. package/dist/Components/layout/panel.d.ts.map +1 -0
  68. package/dist/Components/layout/routedSelection.d.ts +10 -0
  69. package/dist/Components/layout/routedSelection.d.ts.map +1 -0
  70. package/dist/Components/layout/sidebar.d.ts +27 -0
  71. package/dist/Components/layout/sidebar.d.ts.map +1 -0
  72. package/dist/Components/layout/splitView.d.ts +82 -0
  73. package/dist/Components/layout/splitView.d.ts.map +1 -0
  74. package/dist/Components/layout/tabpanel/tab.d.ts +15 -0
  75. package/dist/Components/layout/tabpanel/tab.d.ts.map +1 -0
  76. package/dist/Components/layout/tabpanel/tabline.d.ts +31 -0
  77. package/dist/Components/layout/tabpanel/tabline.d.ts.map +1 -0
  78. package/dist/Components/layout/tabpanel/tabpanel.d.ts +44 -0
  79. package/dist/Components/layout/tabpanel/tabpanel.d.ts.map +1 -0
  80. package/dist/Components/lineinputs/CheckableControl.d.ts +7 -0
  81. package/dist/Components/lineinputs/CheckableControl.d.ts.map +1 -0
  82. package/dist/Components/lineinputs/LabeledInputControl.d.ts +7 -0
  83. package/dist/Components/lineinputs/LabeledInputControl.d.ts.map +1 -0
  84. package/dist/Components/lineinputs/SelectControl.d.ts +7 -0
  85. package/dist/Components/lineinputs/SelectControl.d.ts.map +1 -0
  86. package/dist/Components/lineinputs/checkbox/Checkbox.d.ts +46 -0
  87. package/dist/Components/lineinputs/checkbox/Checkbox.d.ts.map +1 -0
  88. package/dist/Components/lineinputs/checkbox/QuadCheckbox.d.ts +11 -0
  89. package/dist/Components/lineinputs/checkbox/QuadCheckbox.d.ts.map +1 -0
  90. package/dist/Components/lineinputs/checkbox/TriCheckbox.d.ts +11 -0
  91. package/dist/Components/lineinputs/checkbox/TriCheckbox.d.ts.map +1 -0
  92. package/dist/Components/lineinputs/datetime/Calendar.d.ts +23 -0
  93. package/dist/Components/lineinputs/datetime/Calendar.d.ts.map +1 -0
  94. package/dist/Components/lineinputs/datetime/DatePicker.d.ts +62 -0
  95. package/dist/Components/lineinputs/datetime/DatePicker.d.ts.map +1 -0
  96. package/dist/Components/lineinputs/datetime/DateTimePicker.d.ts +52 -0
  97. package/dist/Components/lineinputs/datetime/DateTimePicker.d.ts.map +1 -0
  98. package/dist/Components/lineinputs/datetime/TimePicker.d.ts +46 -0
  99. package/dist/Components/lineinputs/datetime/TimePicker.d.ts.map +1 -0
  100. package/dist/Components/lineinputs/datetime/civilDate.d.ts +37 -0
  101. package/dist/Components/lineinputs/datetime/civilDate.d.ts.map +1 -0
  102. package/dist/Components/lineinputs/datetime/timeString.d.ts +26 -0
  103. package/dist/Components/lineinputs/datetime/timeString.d.ts.map +1 -0
  104. package/dist/Components/lineinputs/dropdown.d.ts +49 -0
  105. package/dist/Components/lineinputs/dropdown.d.ts.map +1 -0
  106. package/dist/Components/lineinputs/label.d.ts +14 -0
  107. package/dist/Components/lineinputs/label.d.ts.map +1 -0
  108. package/dist/Components/lineinputs/radio.d.ts +69 -0
  109. package/dist/Components/lineinputs/radio.d.ts.map +1 -0
  110. package/dist/Components/lineinputs/textbox.d.ts +40 -0
  111. package/dist/Components/lineinputs/textbox.d.ts.map +1 -0
  112. package/dist/Components/lineinputs/toggle.d.ts +40 -0
  113. package/dist/Components/lineinputs/toggle.d.ts.map +1 -0
  114. package/dist/Components/menu/button.d.ts +31 -0
  115. package/dist/Components/menu/button.d.ts.map +1 -0
  116. package/dist/Components/menu/toolbar.d.ts +15 -0
  117. package/dist/Components/menu/toolbar.d.ts.map +1 -0
  118. package/dist/Components/navigation/breadcrumb.d.ts +31 -0
  119. package/dist/Components/navigation/breadcrumb.d.ts.map +1 -0
  120. package/dist/Components/navigation/navigationBar.d.ts +53 -0
  121. package/dist/Components/navigation/navigationBar.d.ts.map +1 -0
  122. package/dist/Components/status/progressBar.d.ts +23 -0
  123. package/dist/Components/status/progressBar.d.ts.map +1 -0
  124. package/dist/Components/status/statusPresentation.d.ts +21 -0
  125. package/dist/Components/status/statusPresentation.d.ts.map +1 -0
  126. package/dist/Components/theme/stylesheetPicker.d.ts +42 -0
  127. package/dist/Components/theme/stylesheetPicker.d.ts.map +1 -0
  128. package/dist/index.d.ts +68 -0
  129. package/dist/index.d.ts.map +1 -0
  130. package/dist/index.js +7736 -0
  131. package/dist/index.js.map +1 -0
  132. package/dist/jsx-dev-runtime-BAF7C1E1.js +1368 -0
  133. package/dist/jsx-dev-runtime-BAF7C1E1.js.map +1 -0
  134. package/dist/jsx-dev-runtime.d.ts +2 -0
  135. package/dist/jsx-dev-runtime.d.ts.map +1 -0
  136. package/dist/jsx-dev-runtime.js +6 -0
  137. package/dist/jsx-dev-runtime.js.map +1 -0
  138. package/dist/jsx-runtime.d.ts +26 -0
  139. package/dist/jsx-runtime.d.ts.map +1 -0
  140. package/dist/jsx-runtime.js +9 -0
  141. package/dist/jsx-runtime.js.map +1 -0
  142. package/dist/localization.d.ts +76 -0
  143. package/dist/localization.d.ts.map +1 -0
  144. package/dist/routing/RouteLink.d.ts +18 -0
  145. package/dist/routing/RouteLink.d.ts.map +1 -0
  146. package/dist/routing/RouteOutlet.d.ts +38 -0
  147. package/dist/routing/RouteOutlet.d.ts.map +1 -0
  148. package/dist/routing/RouteQuery.d.ts +19 -0
  149. package/dist/routing/RouteQuery.d.ts.map +1 -0
  150. package/dist/routing/RouteScope.d.ts +18 -0
  151. package/dist/routing/RouteScope.d.ts.map +1 -0
  152. package/dist/routing/RouteValue.d.ts +19 -0
  153. package/dist/routing/RouteValue.d.ts.map +1 -0
  154. package/dist/routing/navigationAdapter.d.ts +33 -0
  155. package/dist/routing/navigationAdapter.d.ts.map +1 -0
  156. package/dist/routing/route.d.ts +64 -0
  157. package/dist/routing/route.d.ts.map +1 -0
  158. package/dist/routing/router.d.ts +109 -0
  159. package/dist/routing/router.d.ts.map +1 -0
  160. package/dist/runtime.d.ts +34 -0
  161. package/dist/runtime.d.ts.map +1 -0
  162. package/dist/services.d.ts +45 -0
  163. package/dist/services.d.ts.map +1 -0
  164. package/dist/styling/styleRegistry.d.ts +15 -0
  165. package/dist/styling/styleRegistry.d.ts.map +1 -0
  166. package/dist/styling/theme.d.ts +39 -0
  167. package/dist/styling/theme.d.ts.map +1 -0
  168. package/dist/util/filterMode.d.ts +15 -0
  169. package/dist/util/filterMode.d.ts.map +1 -0
  170. package/docs/application-composition-guide.md +843 -0
  171. package/docs/application-layout-guide.md +553 -0
  172. package/package.json +90 -0
  173. package/styles/structural.css +2388 -0
  174. package/themes/README.md +99 -0
  175. package/themes/base.css +344 -0
  176. package/themes/java/theme.css +21 -0
  177. package/themes/minimal/theme.css +7 -0
  178. package/themes/shiny/theme.css +168 -0
package/themes/README.md ADDED
@@ -0,0 +1,99 @@
1
+ # Capillary UI base and themes
2
+
3
+ Capillary UI presentation is assembled from independently owned files in this order:
4
+
5
+ 1. `themes/base.css` — defaults and palette derivation.
6
+ 2. Collected component CSS or `styles/structural.css` — selectors and layout.
7
+ 3. One `colors/<name>/colors.css` — palette anchors and endpoints.
8
+ 4. One `themes/<name>/theme.css` — intentional semantic-role overrides.
9
+
10
+ Application layout CSS is separate from these inputs.
11
+
12
+ ## Base file
13
+
14
+ `base.css` provides usable default palette anchors, derives primary, secondary,
15
+ and neutral ramps, and declares the semantic variable fallback hierarchy. It
16
+ contains no component selectors and no declarations that consume those
17
+ variables.
18
+
19
+ Applications import the base explicitly. Named themes and palettes never
20
+ import it, so the cascade and ownership order remain visible.
21
+
22
+ ## Theme files
23
+
24
+ Published themes are:
25
+
26
+ | Theme | Appearance capability | Intent |
27
+ | --- | --- | --- |
28
+ | `minimal` | Adaptive (`light`, `dark`, or system) | Restrained platform-oriented treatment |
29
+ | `java` | Light | Desktop control treatment inspired by classic Java interfaces |
30
+ | `shiny` | Light | Gloss, depth, and chromed graphical surfaces |
31
+
32
+ Custom properties are the primary instrument. A theme declares them on `:root`
33
+ inside `@layer theme`, and `color-scheme` is the only ordinary property that
34
+ belongs in that block. Start a new theme with no overrides and add a variable
35
+ only when it creates an intentional difference from `base.css`:
36
+
37
+ ```css
38
+ @layer theme {
39
+ :root {
40
+ color-scheme: only light;
41
+ --button-background: linear-gradient(white, #ddd);
42
+ --button-shadow: -1px 1px 2px rgb(0 0 0 / 0.4);
43
+ }
44
+ }
45
+ ```
46
+
47
+ ### Ordinary rules and cascade ordering
48
+
49
+ A theme may also write ordinary CSS rules, including component-host, trait,
50
+ part, ARIA-state, and pseudo-element selectors, when no variable can express
51
+ the intended difference. Those rules must sit **outside** `@layer theme`, after
52
+ the closing brace:
53
+
54
+ ```css
55
+ @layer theme {
56
+ :root { --navigation-link-radius: 0; }
57
+ }
58
+
59
+ cap-navigationbar nav > ul > li > a {
60
+ line-height: 1.7em;
61
+ }
62
+ ```
63
+
64
+ The placement is a cascade requirement, not a style preference. Component CSS
65
+ is injected as an unlayered `<style>` element prepended to `<head>`, and the
66
+ theme link is loaded after it. Unlayered rules always outrank layered ones, so
67
+ a rule written inside `@layer theme` loses to component CSS no matter how
68
+ specific it is, while an unlayered theme rule wins at equal specificity through
69
+ document order.
70
+
71
+ Variables remain preferable because they compose with the fallback hierarchy
72
+ and survive component markup changes. Reach for a rule when the difference is
73
+ structural — layout, stacking, clipping, disclosure treatment — and keep it
74
+ scoped to a trait class the application opts into rather than retargeting every
75
+ instance of a component.
76
+
77
+ Themes still must not `@import`, must not declare `--palette-*` anchors, which
78
+ belong to `colors/<name>/colors.css`, and must not restate a value already set
79
+ by `base.css`.
80
+
81
+ `capillaryUiThemeVariableCatalog` is the machine-readable public contract. Its
82
+ fallback chain runs from palette roles through global UI roles and shared
83
+ families, then to optional component-specific roles. A small theme can
84
+ therefore override a family without naming every component.
85
+
86
+ ## Runtime selection and appearance
87
+
88
+ `capillaryUiThemeOptions` lists built-in theme links and their light/dark capability.
89
+ `ThemePicker` or `replaceCapillaryUiStylesheet('theme', option)` replaces the marked
90
+ theme link. `setCapillaryUiAppearance('light' | 'dark' | 'system')` controls adaptive
91
+ themes; `system` removes the explicit root attribute so browser preference
92
+ applies.
93
+
94
+ Theme availability, default selection, persistence, and whether users can
95
+ switch at runtime are application policy.
96
+
97
+ When changing a theme, verify all supported palettes, native control states,
98
+ keyboard focus, disabled/error/selection contrast, forced colors, reduced
99
+ motion, and 200% text.
package/themes/base.css ADDED
@@ -0,0 +1,344 @@
1
+ @charset "utf-8";
2
+
3
+ /* Variables only. Structural and presentation declarations belong to components. */
4
+ @layer palette {
5
+ :root {
6
+ /* Usable defaults; colors.css replaces these anchors and endpoints. */
7
+ --palette-light: #ffffff;
8
+ --palette-dark: #111827;
9
+ --palette-contrast-light: var(--palette-light);
10
+ --palette-contrast-dark: var(--palette-dark);
11
+ --palette-light-clear: color-mix(in srgb, var(--palette-light) 0%, transparent);
12
+ --palette-light-faint: color-mix(in srgb, var(--palette-light) 8%, transparent);
13
+ --palette-red: #b3261e;
14
+ --palette-green: #287a3c;
15
+ --palette-primary-500: #2989d8;
16
+ --palette-secondary-500: #7137a8;
17
+ --palette-neutral-500: #7892aa;
18
+
19
+ /* Each ramp may vary hue; ordinary palettes retain its contrast endpoints. */
20
+ --palette-primary-light-mix: var(--palette-light);
21
+ --palette-primary-dark-mix: var(--palette-dark);
22
+ --palette-secondary-light-mix: var(--palette-light);
23
+ --palette-secondary-dark-mix: var(--palette-dark);
24
+ --palette-neutral-light-mix: var(--palette-light);
25
+ --palette-neutral-dark-mix: var(--palette-dark);
26
+
27
+ --palette-primary-50: color-mix(in oklch, var(--palette-primary-500) 8%, var(--palette-primary-light-mix));
28
+ --palette-primary-100: color-mix(in oklch, var(--palette-primary-500) 16%, var(--palette-primary-light-mix));
29
+ --palette-primary-200: color-mix(in oklch, var(--palette-primary-500) 32%, var(--palette-primary-light-mix));
30
+ --palette-primary-300: color-mix(in oklch, var(--palette-primary-500) 50%, var(--palette-primary-light-mix));
31
+ --palette-primary-400: color-mix(in oklch, var(--palette-primary-500) 72%, var(--palette-primary-light-mix));
32
+ --palette-primary-600: color-mix(in oklch, var(--palette-primary-500) 85%, var(--palette-primary-dark-mix));
33
+ --palette-primary-700: color-mix(in oklch, var(--palette-primary-500) 72%, var(--palette-primary-dark-mix));
34
+ --palette-primary-800: color-mix(in oklch, var(--palette-primary-500) 58%, var(--palette-primary-dark-mix));
35
+ --palette-primary-900: color-mix(in oklch, var(--palette-primary-500) 42%, var(--palette-primary-dark-mix));
36
+ --palette-primary-950: color-mix(in oklch, var(--palette-primary-500) 28%, var(--palette-primary-dark-mix));
37
+ --palette-primary: var(--palette-primary-500);
38
+ --palette-primary-light: var(--palette-primary-200);
39
+ --palette-primary-dark: var(--palette-primary-800);
40
+
41
+ --palette-secondary-50: color-mix(in oklch, var(--palette-secondary-500) 8%, var(--palette-secondary-light-mix));
42
+ --palette-secondary-100: color-mix(in oklch, var(--palette-secondary-500) 16%, var(--palette-secondary-light-mix));
43
+ --palette-secondary-200: color-mix(in oklch, var(--palette-secondary-500) 32%, var(--palette-secondary-light-mix));
44
+ --palette-secondary-300: color-mix(in oklch, var(--palette-secondary-500) 50%, var(--palette-secondary-light-mix));
45
+ --palette-secondary-400: color-mix(in oklch, var(--palette-secondary-500) 72%, var(--palette-secondary-light-mix));
46
+ --palette-secondary-600: color-mix(in oklch, var(--palette-secondary-500) 85%, var(--palette-secondary-dark-mix));
47
+ --palette-secondary-700: color-mix(in oklch, var(--palette-secondary-500) 72%, var(--palette-secondary-dark-mix));
48
+ --palette-secondary-800: color-mix(in oklch, var(--palette-secondary-500) 58%, var(--palette-secondary-dark-mix));
49
+ --palette-secondary-900: color-mix(in oklch, var(--palette-secondary-500) 42%, var(--palette-secondary-dark-mix));
50
+ --palette-secondary-950: color-mix(in oklch, var(--palette-secondary-500) 28%, var(--palette-secondary-dark-mix));
51
+ --palette-secondary: var(--palette-secondary-500);
52
+ --palette-secondary-light: var(--palette-secondary-200);
53
+ --palette-secondary-dark: var(--palette-secondary-800);
54
+
55
+ --palette-neutral-50: color-mix(in oklch, var(--palette-neutral-500) 6%, var(--palette-neutral-light-mix));
56
+ --palette-neutral-100: color-mix(in oklch, var(--palette-neutral-500) 13%, var(--palette-neutral-light-mix));
57
+ --palette-neutral-200: color-mix(in oklch, var(--palette-neutral-500) 26%, var(--palette-neutral-light-mix));
58
+ --palette-neutral-300: color-mix(in oklch, var(--palette-neutral-500) 43%, var(--palette-neutral-light-mix));
59
+ --palette-neutral-400: color-mix(in oklch, var(--palette-neutral-500) 68%, var(--palette-neutral-light-mix));
60
+ --palette-neutral-600: color-mix(in oklch, var(--palette-neutral-500) 84%, var(--palette-neutral-dark-mix));
61
+ --palette-neutral-700: color-mix(in oklch, var(--palette-neutral-500) 67%, var(--palette-neutral-dark-mix));
62
+ --palette-neutral-800: color-mix(in oklch, var(--palette-neutral-500) 50%, var(--palette-neutral-dark-mix));
63
+ --palette-neutral-900: color-mix(in oklch, var(--palette-neutral-500) 32%, var(--palette-neutral-dark-mix));
64
+ --palette-neutral-950: color-mix(in oklch, var(--palette-neutral-500) 18%, var(--palette-neutral-dark-mix));
65
+ --palette-neutral: var(--palette-neutral-500);
66
+ --palette-neutral-light: var(--palette-neutral-200);
67
+ --palette-neutral-dark: var(--palette-neutral-800);
68
+ }
69
+ }
70
+ @layer theme {
71
+ :root {
72
+ /* Foundation */
73
+ --font-family: Helvetica, sans-serif;
74
+ --font-size: 12px;
75
+ --line-height: normal;
76
+ --control-min-height: calc(var(--ui-font-size) + var(--ui-padding) + var(--ui-padding));
77
+ --space-xs: 0px;
78
+ --space-sm: 6px;
79
+ --space-md: 1rem;
80
+ --space-lg: 1.5rem;
81
+ --radius-sm: 3px;
82
+ --radius-md: 3px;
83
+ --radius-lg: 0.5rem;
84
+ --motion-fast: 120ms;
85
+
86
+ /* Shared UI and feedback */
87
+ --application-background: var(--palette-light);
88
+ --ui-background: var(--palette-neutral-50);
89
+ --ui-color: var(--palette-neutral-950);
90
+ --ui-border: 1px solid var(--palette-neutral-300);
91
+ --ui-shadow: none;
92
+ --focus-ring: 0 0 0 1px var(--ui-accent-color-highlight);
93
+ --focus-color: var(--ui-accent-color);
94
+ --error-color: var(--palette-red, #b3261e);
95
+ --error-contrast: var(--palette-contrast-light, #fff);
96
+ --success-color: #080;
97
+
98
+ /* Layout components */
99
+ --panel-background: var(--palette-neutral-50);
100
+ --panel-color: var(--palette-neutral-950);
101
+ --panel-border: 1px solid var(--palette-neutral-300);
102
+ --panel-shadow: none;
103
+ --panel-radius: var(--radius-md);
104
+
105
+ /* Explicit island modifier; non-island themes keep its layout neutral. */
106
+ --island-margin: 0;
107
+ --island-padding: 0;
108
+ --island-background: var(--panel-background);
109
+ --island-border: var(--panel-border);
110
+ --island-radius: var(--panel-radius);
111
+ --island-shadow: var(--panel-shadow);
112
+
113
+ --sidebar-background: var(--panel-background);
114
+ --sidebar-color: var(--panel-color);
115
+ --sidebar-border: var(--panel-border);
116
+ --sidebar-shadow: var(--panel-shadow);
117
+ --sidebar-radius: var(--panel-radius);
118
+ --sidebar-header-background: var(--section-header-background);
119
+ --sidebar-header-color: var(--section-header-color);
120
+ --sidebar-header-border: var(--section-header-border);
121
+ --sidebar-header-shadow: var(--section-header-shadow);
122
+ --sidebar-toolbar-background: var(--toolbar-background);
123
+ --sidebar-toolbar-color: var(--toolbar-color);
124
+ --sidebar-toolbar-border: var(--toolbar-border);
125
+ --sidebar-toolbar-shadow: var(--toolbar-shadow);
126
+
127
+ --dialog-shadow: 0 1.25rem 4rem color-mix(in oklch, var(--palette-dark) 35%, transparent);
128
+ --dialog-backdrop-background: color-mix(in oklch, var(--palette-dark) 55%, transparent);
129
+ --dialog-header-background: var(--section-header-background);
130
+ --dialog-header-color: var(--section-header-color);
131
+
132
+ --header-background: var(--palette-neutral-100);
133
+ --header-color: var(--palette-neutral-950);
134
+ --header-border: 0 solid transparent;
135
+ --header-shadow: none;
136
+ --section-header-background: var(--header-background);
137
+ --section-header-color: var(--header-color);
138
+ --section-header-border: var(--header-border);
139
+ --section-header-shadow: var(--header-shadow);
140
+
141
+ --toolbar-background: var(--palette-neutral-100);
142
+ --toolbar-color: var(--palette-neutral-950);
143
+ --toolbar-border: 0 solid transparent;
144
+ --toolbar-shadow: none;
145
+ --toolbar-spacing: 1.5em;
146
+
147
+ /* Input components */
148
+ --input-background: #fff;
149
+ --input-color: var(--text-color);
150
+ --input-border: 1px solid #aaa;
151
+ --input-shadow: none;
152
+ --input-background-disabled: var(--ui-medium-bg-color);
153
+ --input-color-disabled: #777;
154
+ --dropdown-appearance: none;
155
+ --dropdown-padding-inline-end: 1.75em;
156
+ --dropdown-select-background: transparent;
157
+ --dropdown-select-border: 1px solid transparent;
158
+ --dropdown-select-shadow: none;
159
+ --dropdown-underlay-content: "";
160
+ --dropdown-underlay-background: var(--input-background);
161
+ --dropdown-underlay-background-disabled: var(--input-background-disabled);
162
+ --dropdown-underlay-border: var(--input-border);
163
+ --dropdown-underlay-border-disabled: var(--ui-input-border-disabled);
164
+ --dropdown-underlay-shadow: var(--input-shadow);
165
+ --dropdown-underlay-start-radius: var(--ui-border-radius);
166
+ --dropdown-trigger-content: '\25BE';
167
+ --dropdown-trigger-width: calc(var(--dd-btn-width) - 1px);
168
+ --dropdown-trigger-color: var(--button-color);
169
+ --dropdown-trigger-background: var(--button-background);
170
+ --dropdown-trigger-background-hover: var(--button-background-hover);
171
+ --dropdown-trigger-background-disabled: var(--button-background-disabled);
172
+ --dropdown-trigger-border: var(--button-border);
173
+ --dropdown-trigger-border-disabled: var(--button-border-disabled);
174
+ --dropdown-trigger-end-radius: var(--ui-border-radius);
175
+ --dropdown-trigger-shadow: var(--button-shadow);
176
+ --dropdown-trigger-shadow-hover: var(--button-shadow);
177
+
178
+ /* Action components */
179
+ --button-background: var(--palette-neutral-100);
180
+ --button-background-hover: var(--palette-primary-100);
181
+ --button-background-active: var(--palette-primary);
182
+ --button-background-disabled: #ccc;
183
+ --button-color: var(--ui-text-color);
184
+ --button-border: 1px solid #fff0;
185
+ --button-shadow: none;
186
+ --button-shadow-active: none;
187
+ --button-border-style-active: solid;
188
+ --menu-button-background: var(--button-background);
189
+
190
+ /* Choice components */
191
+ --selection-background: var(--palette-primary);
192
+ --selection-color: var(--palette-contrast-light);
193
+ --checkbox-box-background: var(--input-background);
194
+ --checkbox-box-background-checked: var(--selection-background);
195
+ --checkbox-box-border: var(--input-border);
196
+ --checkbox-box-shadow: none;
197
+ --checkbox-box-shadow-checked: var(--checkbox-box-shadow);
198
+ --checkbox-symbol-color: var(--selection-color);
199
+ --checkable-label-color-disabled: #aaa;
200
+ --toggle-button-background: var(--button-background);
201
+ --toggle-button-background-checked: var(--palette-primary-700);
202
+ --toggle-button-border-checked: var(--button-border);
203
+ --toggle-button-selected-inline-overlap: 0;
204
+ --toggle-button-selected-z-index: 0;
205
+ --toggle-button-shadow: none;
206
+ --toggle-button-shadow-checked: none;
207
+ --toggle-group-shadow: none;
208
+ --toggle-inactive-shared-border-color: var(--palette-neutral-500);
209
+ --toggle-inactive-separator-background: transparent;
210
+ --toggle-inactive-separator-block-inset: 0;
211
+
212
+ /* Navigation components */
213
+ --navigation-bar-background: transparent;
214
+ --navigation-bar-color: var(--ui-color);
215
+ --navigation-bar-border: 0 solid transparent;
216
+ --navigation-bar-shadow: none;
217
+ --navigation-bar-padding: var(--space-sm);
218
+ --navigation-bar-gap: var(--space-md);
219
+ --navigation-link-color: var(--palette-primary-700);
220
+ --navigation-link-color-hover: var(--palette-primary-900);
221
+ --navigation-link-color-active: var(--palette-primary-900);
222
+ --navigation-link-color-current: var(--ui-color);
223
+ --navigation-link-color-disabled: var(--input-color-disabled);
224
+ --navigation-link-background: transparent;
225
+ --navigation-link-background-hover: var(--palette-primary-100);
226
+ --navigation-link-background-active: var(--palette-primary-100);
227
+ --navigation-link-background-current: transparent;
228
+ --navigation-link-background-disabled: transparent;
229
+ --navigation-link-border: 0 solid transparent;
230
+ --navigation-link-border-current: 2px solid var(--palette-primary);
231
+ --navigation-link-shadow: none;
232
+ --navigation-link-shadow-current: none;
233
+ --navigation-link-padding: var(--space-xs) var(--space-sm);
234
+ --navigation-link-radius: var(--radius-sm);
235
+ --navigation-link-font-weight-current: 700;
236
+ --tabline-background: var(--palette-neutral-100);
237
+ --tabline-padding-inline-start: 0px;
238
+ --tab-active-background: var(--palette-neutral-50);
239
+ --tab-button-background: var(--button-background);
240
+ --tab-button-background-active: var(--tab-active-background);
241
+ --tab-button-shadow: var(--button-shadow);
242
+ --tab-button-shadow-active: var(--button-shadow-active);
243
+ --tab-button-inactive-bottom-shadow: none;
244
+
245
+ /* Data components */
246
+ --row-hover-background: var(--palette-primary-100);
247
+ --table-header-background: var(--palette-neutral-100);
248
+ --table-header-color: var(--header-color);
249
+ --table-header-button-background: var(--button-background);
250
+ --table-row-background: var(--palette-neutral-50);
251
+ --table-row-alt-background: var(--palette-neutral-100);
252
+
253
+ /* Info panel */
254
+ --info-panel-label-color: var(--ui-muted-text-color);
255
+
256
+ /* Status and graphical components */
257
+ --progress-track-background: var(--palette-neutral-200);
258
+ --progress-track-color: var(--ui-text-color);
259
+ --progress-track-shadow: inset 0.15em 0.15em 0.35em -0.12em rgb(0 0 0 / 0.5);
260
+ --progress-value-background: var(--palette-primary);
261
+ --progress-value-color: var(--palette-contrast-light);
262
+ --progress-value-shadow: none;
263
+ --working-background-image: linear-gradient(-45deg, #0001 25%, #fff1 25%, #fff1 50%, #0001 50%, #0001 75%, #fff1 75%, #fff1);
264
+ --colored-base: var(--palette-primary);
265
+ --colored-light: var(--palette-primary-light);
266
+ --colored-dark: var(--palette-primary-dark);
267
+ --colored-contrast: var(--palette-contrast-light);
268
+ --colored-shadow: none;
269
+ --c1: unset;
270
+ --c2: unset;
271
+ --c3: unset;
272
+ --colored-base-bg: linear-gradient(15deg, var(--c1) 0%, var(--c2) 65%, var(--c2) 65%, var(--c3) 100%);
273
+ --block-graph-block-radius: 0.25em;
274
+ --block-graph-block-shadow: var(--colored-shadow);
275
+
276
+ /* Structural compatibility aliases */
277
+ --base-font-size: var(--base-font-size);
278
+ --ui-font-size: var(--font-size);
279
+ --ui-padding: 8px;
280
+ --ui-padding-h: 8px;
281
+ --ui-padding-v: 0px;
282
+ --ui-margin: 1px;
283
+ --ui-border-radius: 3px;
284
+ --ui-text-color: var(--ui-color);
285
+ --ui-muted-text-color: var(--palette-neutral-700);
286
+ --ui-border-color: var(--palette-neutral-300);
287
+ --ui-input-text-color: var(--text-color);
288
+ --ui-input-bg: #fff;
289
+ --ui-input-border: 1px solid #aaa;
290
+ --ui-input-bg-disabled: var(--ui-medium-bg-color);
291
+ --ui-input-border-disabled: 1px solid var(--ui-dark2-bg-color);
292
+ --ui-select-bg-disabled: var(--ui-dark2-bg-color);
293
+ --ui-input-text-color-disabled: #777;
294
+ --ui-accent-color: var(--ui-select-bg-dark);
295
+ --ui-accent-color-highlight: var(--primary-color-l90);
296
+ --ui-primary-bg-color: #f5f7f8;
297
+ --ui-medium-bg-color: #ebeff3;
298
+ --ui-dark-bg-color: #d7dee3;
299
+ --ui-dark2-bg-color: var(--palette-neutral-400);
300
+ --text-color: var(--palette-neutral-950);
301
+ --primary-color-l90: var(--palette-primary-200);
302
+ --ui-select-bg: var(--palette-primary-600);
303
+ --ui-select-bg-dark: var(--palette-primary-700);
304
+ --ui-select-text-color: var(--palette-contrast-light);
305
+ --ui-table-bg-color: var(--ui-primary-bg-color);
306
+ --ui-table-bg-color2: var(--ui-medium-bg-color);
307
+ --input-width: 15em;
308
+ --button-border-disabled: #777;
309
+ --error-text-color-light: #fcc;
310
+ --error-text-color-dark: #800;
311
+ --error-border-color: #f00;
312
+ --error-bg: #faa;
313
+ --error-bg-translucent: #f002;
314
+ --error-bg-neutral: #fff;
315
+ --success-text-color-light: #bfb;
316
+ --success-text-color-dark: #b00;
317
+ --success-border-color: #0b0;
318
+ --success-bg: #beb;
319
+ --success-bg-translucent: #0f02;
320
+ --success-bg-neutral: #fff;
321
+ --icon-filter-hue: 205deg;
322
+ --icon-filter: brightness(1) opacity(.7) hue-rotate(var(--icon-filter-hue)) saturate(.75);
323
+ --icon-filter-active: var(--icon-filter);
324
+ --icon-filter-overlay: brightness(1) opacity(.25) hue-rotate(var(--icon-filter-hue)) saturate(.7);
325
+ --tooltip-background: #ffa;
326
+ --dd-btn-width: 1.5em;
327
+ --panel-bg: var(--panel-background);
328
+ --panel-padding: var(--space-md);
329
+ --toolbar-bg: var(--toolbar-background);
330
+ --toolbar-radius: var(--radius-md);
331
+ --sectionheader-bg: var(--section-header-background);
332
+ --sectionheader-shadow: var(--section-header-shadow);
333
+ --sectionheader-color: var(--section-header-color);
334
+ --tabline-bg: var(--tabline-background);
335
+ --tab-bg-active: var(--tab-active-background);
336
+ --cbx-o-border: var(--checkbox-box-border);
337
+ --cbx-border-radius: var(--ui-border-radius);
338
+ --spacing-small: var(--space-sm);
339
+ --spacing-medium: var(--space-md);
340
+ --noselect-user-select: none;
341
+ --noselect-cursor: default;
342
+
343
+ }
344
+ }
package/themes/java/theme.css ADDED
@@ -0,0 +1,21 @@
1
+ @charset "utf-8";
2
+ @layer theme {
3
+ :root {
4
+ color-scheme: only light;
5
+ --font-family: Arial, Helvetica, sans-serif;
6
+ --control-min-height: 1.75rem;
7
+ --radius-sm: 0;
8
+ --radius-md: 0;
9
+ --radius-lg: 3px;
10
+ --motion-fast: 0ms;
11
+ --panel-border: 2px groove var(--palette-light);
12
+ --button-border: 2px outset var(--palette-light);
13
+ --input-shadow: inset 1px 1px 1px color-mix(in oklch, var(--palette-dark) 30%, transparent);
14
+ --toolbar-border: 2px outset var(--palette-light);
15
+ --navigation-bar-border: 2px outset var(--palette-light);
16
+ --navigation-link-border: 1px outset var(--palette-light);
17
+ --navigation-link-border-current: 1px inset var(--palette-dark);
18
+ --working-background-image: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in oklch, var(--palette-dark) 12%, transparent) 4px 8px);
19
+ --button-border-style-active: inset;
20
+ }
21
+ }
package/themes/minimal/theme.css ADDED
@@ -0,0 +1,7 @@
1
+ @charset "utf-8";
2
+ /* Minimal deliberately keeps base.css's no-gutter, flat island treatment. */
3
+ @layer theme {
4
+ :root {
5
+ color-scheme: light dark;
6
+ }
7
+ }
package/themes/shiny/theme.css ADDED
@@ -0,0 +1,168 @@
1
+ @charset "utf-8";
2
+ /* Tokens live in @layer theme; the few rules tokens cannot express follow it. */
3
+ @layer theme {
4
+ :root {
5
+ --base-font-size: 14px;
6
+
7
+ /* Foundation and shared chrome */
8
+ color-scheme: only light;
9
+ --box-shadow: -1px 1px 2px 1px rgba(0,0,0,0.3);
10
+ --button-shadow: -1px 1px 2px 1px rgba(0,0,0,0.5);
11
+ --button-shadow-pressed: -1px 1px 2px 0px #0008;
12
+ --ui-gradient: linear-gradient( to top, var(--ui-primary-bg-color) 9px, var(--ui-primary-bg-color) 13px, var(--ui-dark-bg-color) 100% );
13
+ --ui-gradient-2: linear-gradient( to bottom, var(--ui-primary-bg-color) 9px, var(--ui-primary-bg-color) 13px, var(--ui-dark-bg-color) 100% );
14
+ --shiny-ui-gradient: var(--ui-gradient);
15
+ --shiny-ui-gradient-2: var(--ui-gradient-2);
16
+ --shiny-background: radial-gradient(140% 75% at 30% 10%, #fff2, #fff3 47%, #fff0 55%, #fff0), linear-gradient(to bottom, var(--palette-primary-900) 0%, var(--palette-primary) 65%, var(--palette-primary) 66%, var(--palette-primary-400) 100%);
17
+ --text-color: var(--palette-primary-900);
18
+ --ui-color: var(--text-color);
19
+
20
+ /* Layout components; the island canvas stays base white. */
21
+ --panel-background: var(--ui-primary-bg-color);
22
+ --panel-color: var(--text-color);
23
+ --panel-border: none;
24
+ --panel-radius: 0px;
25
+ --island-margin: 1rem;
26
+ --island-border: 0px solid rgb(255 255 255 / 0.45);
27
+ --island-shadow: 0px 1px 2.5px 0px #666;
28
+ --section-header-background: var(--shiny-background);
29
+ --section-header-color: var(--palette-contrast-light);
30
+ --section-header-shadow:
31
+ inset -1px 1px 2px 0px #0003,
32
+ inset 1px -1px 2px 0px #fff5,
33
+ inset -1px 1px 1px 0px #0006,
34
+ inset 1px -1px 1px 0px #fff5,
35
+ 0px 1px 2px 0px #000a;
36
+ --section-header-with-toolbar-shadow:
37
+ inset -1px 1px 2px 0px #0003,
38
+ inset 1px -1px 2px 0px #fff5,
39
+ inset -1px 1px 1px 0px #0006,
40
+ inset 1px -1px 1px 0px #fff5;
41
+ --mini-shadow: 0px 1px 1px 0px #000a;
42
+
43
+ --sidebar-background:
44
+ linear-gradient(135deg, rgb(255 255 255 / 0.4), transparent 55%),
45
+ var(--panel-background);
46
+ --sidebar-radius: 0;
47
+ --sidebar-toolbar-background: color-mix(in oklch, var(--palette-primary-100) 72%, var(--palette-light));
48
+ --sidebar-toolbar-border: 1px solid color-mix(in oklch, var(--palette-primary) 24%, var(--palette-neutral-300));
49
+ --toolbar-background: var(--ui-gradient-2);
50
+ --toolbar-shadow: var(--mini-shadow);
51
+
52
+ /* Input components */
53
+ --input-shadow: inset -1px 1px 3px -2px rgba(0,0,0,0.45);
54
+
55
+ /* Action components */
56
+ --button-background: var(--ui-gradient-2);
57
+ --button-background-hover: var(--ui-gradient);
58
+ --button-background-active: var(--ui-gradient);
59
+ --button-border: 1px solid #fff;
60
+ --button-shadow-active: var(--button-shadow-pressed);
61
+
62
+ --cbx-x-bg: radial-gradient(140% 75% at 30% 10%, #fff5, #fff4 47%, #fff0 55%, #fff0), linear-gradient(to bottom, #400 0%, #c00 65%, #e00 100%);
63
+ --cbx-x-color: #fff;
64
+ --cbx-x-border: 0px solid rgba(0,0,0,0);
65
+ --cbx-x-shadow: inset 1px -1px 1px 0px #fffa, inset -1px 2px 3px -1px #0002, -1px 1px 2px 0px #0005;
66
+ --cbx-o-bg: linear-gradient(to bottom, #ffffffd5 0%, #ffffffe5 100%), linear-gradient(to bottom, var(--palette-primary) 0%, var(--palette-primary) 100%);
67
+ --cbx-o-color: var(--ui-input-text-color);
68
+ --cbx-o-border: 0px solid rgba(0,0,0,0);
69
+ --cbx-o-shadow: inset 1px -1px 1px 0px #ffff, inset -1px 2px 3px -1px #0002, -1px 1px 2px 0px #0005;
70
+ --cbx-c-bg: var(--checkbox-box-background-checked);
71
+ --cbx-c-color: #fff;
72
+ --cbx-c-border: 0px solid rgba(0,0,0,0);
73
+ --cbx-c-shadow: inset 1px -1px 1px 0px #fff9, inset -1px 2px 3px -1px #0002, -1px 1px 2px 0px #0005;
74
+ --cbx-r-bg: radial-gradient(140% 75% at 30% 10%, #fff5, #fff4 47%, #fff0 55%, #fff0), linear-gradient(to bottom, #030 0%, #0a0 65%, #0d0 100%);
75
+ --cbx-r-color: #fff;
76
+ --cbx-r-border: 0px solid rgba(0,0,0,0);
77
+ --cbx-r-shadow: inset 1px -1px 1px 0px #fff8, inset -1px 2px 3px -1px #0002, -1px 1px 2px 0px #0005;
78
+
79
+ /* Choice components */
80
+ --checkbox-box-background:
81
+ linear-gradient(to bottom, rgb(255 255 255 / 0.84), rgb(255 255 255 / 0.9)),
82
+ var(--palette-primary);
83
+ --checkbox-box-background-checked:
84
+ radial-gradient(140% 75% at 30% 10%, #fff5, #fff4 47%, #fff0 55%, #fff0),
85
+ linear-gradient(to bottom, var(--palette-primary-900), var(--palette-primary) 65%, var(--palette-primary-400));
86
+ --checkbox-box-border: 0 solid transparent;
87
+ --checkbox-box-shadow:
88
+ inset 1px -1px 1px rgb(255 255 255 / 1),
89
+ inset -1px 2px 3px rgb(0 0 0 / 0.13),
90
+ -1px 1px 2px rgb(0 0 0 / 0.33);
91
+ --checkbox-symbol-color: var(--palette-contrast-light);
92
+
93
+ --toggle-button-background-checked:
94
+ radial-gradient(140% 75% at 30% 10%, #fff4, #fff5 47%, #fff0 55%, #fff0),
95
+ linear-gradient(to bottom, var(--palette-primary-900) 0%, var(--palette-primary) 65%, var(--palette-primary) 66%, var(--palette-primary-400) 100%);
96
+ --toggle-button-border-checked: 0 solid transparent;
97
+ --toggle-button-selected-inline-overlap: -1px;
98
+ --toggle-button-selected-z-index: 1;
99
+ --toggle-button-shadow-checked: -1px 1px 2px rgb(0 0 0 / 0.53);
100
+ --toggle-group-shadow: var(--button-shadow);
101
+ --toggle-inactive-shared-border-color: transparent;
102
+ --toggle-inactive-separator-background: linear-gradient(
103
+ to bottom,
104
+ rgb(255 255 255 / 0.58),
105
+ rgb(0 0 0 / 0.18)
106
+ );
107
+ --toggle-inactive-separator-block-inset: 0.35rem;
108
+
109
+ /* Navigation components */
110
+ --navigation-bar-background: var(--ui-gradient-2);
111
+ --navigation-bar-color: var(--text-color);
112
+ --navigation-bar-shadow: var(--panel-shadow);
113
+ --navigation-link-color-current: white;
114
+ --navigation-link-background-hover: var(--section-header-background);
115
+ --navigation-link-color-hover: white;
116
+ --navigation-link-background-current: var(--section-header-background);
117
+ --navigation-link-shadow-current: var(--mini-shadow);
118
+ --tabline-background: var(--shiny-ui-gradient-2);
119
+ --tabline-padding-inline-start: 5px;
120
+ --tab-button-background: var(--shiny-ui-gradient);
121
+ --tab-button-background-active: var(--shiny-ui-gradient);
122
+ --tab-button-shadow: inset 0px -3px 2px -2px #0005, 0px 0px 3px 0px rgba(0,0,0,0.6);
123
+ --tab-button-shadow-active: 0px 0px 3px 0px rgba(0,0,0,0.6);
124
+ --tab-button-inactive-bottom-shadow: 0px 1px 3px 0px #000a;
125
+
126
+ /* Status and graphical components */
127
+ --progress-track-background: linear-gradient(0deg, var(--ui-dark-bg-color) 0%, #f0f0f0 100%);
128
+ --progress-value-background:
129
+ radial-gradient(100% 50% at 40% 10%, #fff0, #fff0 30%, #ffffff15 110%, #fff0 120%, #fff0 calc(120% + 1%)),
130
+ linear-gradient(15deg, #1e5799 0%, var(--palette-primary) 65%, var(--palette-primary) 65%, #7db9e8 100%);
131
+ --progress-value-shadow:
132
+ inset -1px 1px 3px 0 #0003,
133
+ inset 1px -1px 3px 0 #fff5,
134
+ inset -1px 1px 1px 1px #0006,
135
+ inset 1px -1px 1px 1px #fff5,
136
+ -1px 1px 3px 0 #0006;
137
+
138
+ --colored-shadow: inset -2px 2px 2px 0px #0006, inset 2px -2px 2px 0px #fff5, -3px 3px 4px 0px #0006;
139
+ --block-graph-block-border: none;
140
+ }
141
+ }
142
+
143
+ .colored {
144
+ background: radial-gradient(140% 75% at 30% 10%, #fff0, #fff1 47%, #fff0 55%, #fff0), var(--colored-base-bg);
145
+ }
146
+
147
+ nav > ul > li {
148
+ border-radius: var(--ui-border-radius);
149
+ }
150
+
151
+ cap-navigationbar nav > ul > li > a {
152
+ line-height: 1.7em;
153
+ }
154
+
155
+ cap-header:has(+ cap-toolbar) {
156
+ box-shadow: var(--section-header-with-toolbar-shadow);
157
+ }
158
+
159
+ cap-label,
160
+ cap-dropdown > label {
161
+ margin-top: 3px;
162
+ }
163
+
164
+ cap-dropdown > cap-selectshell > select {
165
+ padding-top: 3px;
166
+ }
167
+
168
+