@teamofsilicons/silicon-ui 0.2.0 → 0.3.0

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 (112) hide show
  1. package/README.md +4 -3
  2. package/check.mjs +14 -5
  3. package/components/activity-heatmap/activity-heatmap.module.css +4 -4
  4. package/components/alert/alert.module.css +1 -1
  5. package/components/announcement-bar/announcement-bar.module.css +6 -6
  6. package/components/avatar/avatar.d.ts +2 -2
  7. package/components/avatar/avatar.js +1 -1
  8. package/components/avatar/avatar.module.css +5 -2
  9. package/components/avatar-group/avatar-group.module.css +4 -4
  10. package/components/badge/badge.module.css +4 -4
  11. package/components/bar-chart/bar-chart.module.css +4 -4
  12. package/components/billing-toggle/billing-toggle.module.css +10 -10
  13. package/components/bottom-sheet/bottom-sheet.module.css +4 -5
  14. package/components/breadcrumb/breadcrumb.d.ts +8 -2
  15. package/components/breadcrumb/breadcrumb.js +21 -9
  16. package/components/breadcrumb/breadcrumb.module.css +7 -3
  17. package/components/brush-chart/brush-chart.module.css +9 -9
  18. package/components/button/button.d.ts +7 -2
  19. package/components/button/button.js +3 -1
  20. package/components/button/button.module.css +10 -1
  21. package/components/button-group/button-group.module.css +6 -6
  22. package/components/calendar/calendar.module.css +7 -7
  23. package/components/card/card.module.css +2 -2
  24. package/components/card-stack/card-stack.module.css +2 -3
  25. package/components/carousel/carousel.module.css +2 -2
  26. package/components/chat-thread/chat-thread.module.css +41 -41
  27. package/components/checkbox/checkbox.module.css +1 -1
  28. package/components/chip-group/chip-group.module.css +2 -2
  29. package/components/code-block/code-block.module.css +7 -14
  30. package/components/color-picker/color-picker.module.css +20 -21
  31. package/components/combobox/combobox.module.css +2 -2
  32. package/components/command-palette/command-palette.module.css +18 -18
  33. package/components/comment-thread/comment-thread.module.css +35 -35
  34. package/components/confirm-morph/confirm-morph.module.css +9 -9
  35. package/components/context-menu/context-menu.module.css +3 -3
  36. package/components/countdown/countdown.module.css +4 -4
  37. package/components/date-picker/date-picker.module.css +6 -6
  38. package/components/date-range-picker/date-range-picker.module.css +21 -21
  39. package/components/dialog/dialog.module.css +2 -2
  40. package/components/donut-chart/donut-chart.module.css +4 -4
  41. package/components/drawer/drawer.module.css +5 -5
  42. package/components/dropdown-menu/dropdown-menu.d.ts +71 -1
  43. package/components/dropdown-menu/dropdown-menu.js +100 -6
  44. package/components/dropdown-menu/dropdown-menu.module.css +15 -5
  45. package/components/elastic-slider/elastic-slider.module.css +4 -4
  46. package/components/expandable-card/expandable-card.module.css +1 -1
  47. package/components/expanding-button-group/expanding-button-group.module.css +1 -1
  48. package/components/expanding-search/expanding-search.module.css +9 -9
  49. package/components/file-dropzone/file-dropzone.module.css +21 -21
  50. package/components/file-upload/file-upload.module.css +7 -7
  51. package/components/filter-toolbar/filter-toolbar.module.css +9 -9
  52. package/components/floating-button-group/floating-button-group.module.css +6 -6
  53. package/components/gauge/gauge.module.css +2 -2
  54. package/components/hover-card/hover-card.module.css +2 -2
  55. package/components/image-compare/image-compare.module.css +4 -4
  56. package/components/inline-edit/inline-edit.module.css +12 -12
  57. package/components/json-viewer/json-viewer.module.css +12 -12
  58. package/components/line-chart/line-chart.module.css +8 -8
  59. package/components/mention-input/mention-input.module.css +8 -8
  60. package/components/metric-card/metric-card.module.css +1 -1
  61. package/components/money-input/money-input.module.css +9 -9
  62. package/components/morph-select/morph-select.module.css +13 -13
  63. package/components/multi-select/multi-select.module.css +6 -6
  64. package/components/nav-list/nav-list.d.ts +64 -0
  65. package/components/nav-list/nav-list.js +103 -0
  66. package/components/nav-list/nav-list.module.css +25 -0
  67. package/components/notification-center/notification-center.module.css +27 -27
  68. package/components/number-field/number-field.module.css +2 -2
  69. package/components/otp-input/otp-input.module.css +4 -4
  70. package/components/password-field/password-field.module.css +1 -1
  71. package/components/password-strength/password-strength.module.css +7 -7
  72. package/components/phone-input/phone-input.module.css +19 -19
  73. package/components/popover/popover.module.css +2 -2
  74. package/components/progress/progress.module.css +1 -1
  75. package/components/radio-cards/radio-cards.module.css +8 -8
  76. package/components/radio-group/radio-group.module.css +1 -1
  77. package/components/resizable-panels/resizable-panels.module.css +5 -5
  78. package/components/rich-text-editor/rich-text-editor.module.css +12 -12
  79. package/components/ridgeline/ridgeline.module.css +7 -7
  80. package/components/scroll-area/scroll-area.module.css +8 -8
  81. package/components/segmented-control/segmented-control.d.ts +3 -1
  82. package/components/segmented-control/segmented-control.js +2 -2
  83. package/components/segmented-control/segmented-control.module.css +7 -4
  84. package/components/select/select.module.css +5 -5
  85. package/components/shortcut-recorder/shortcut-recorder.module.css +15 -15
  86. package/components/signature-pad/signature-pad.module.css +11 -11
  87. package/components/slider/slider.module.css +4 -4
  88. package/components/slope-chart/slope-chart.module.css +7 -7
  89. package/components/sortable-data-table/sortable-data-table.module.css +4 -4
  90. package/components/split-button/split-button.module.css +5 -5
  91. package/components/stepper/stepper.module.css +3 -3
  92. package/components/streamgraph/streamgraph.module.css +7 -7
  93. package/components/swipe-actions/swipe-actions.module.css +5 -5
  94. package/components/switch/switch.module.css +1 -1
  95. package/components/tabs/tabs.d.ts +9 -2
  96. package/components/tabs/tabs.js +4 -2
  97. package/components/tabs/tabs.module.css +7 -2
  98. package/components/tag-input/tag-input.module.css +4 -4
  99. package/components/time-picker/time-picker.module.css +3 -3
  100. package/components/timeline/timeline.module.css +3 -3
  101. package/components/toast/toast.module.css +5 -5
  102. package/components/toast-stack/toast-stack.module.css +5 -5
  103. package/components/tooltip/tooltip.module.css +1 -1
  104. package/components/tree-view/tree-view.module.css +7 -7
  105. package/components/treemap/treemap.module.css +13 -13
  106. package/components/usage-meter/usage-meter.module.css +5 -5
  107. package/components/user-menu/user-menu.module.css +22 -22
  108. package/components/waffle-chart/waffle-chart.module.css +7 -7
  109. package/components.json +416 -1
  110. package/eslint.js +35 -3
  111. package/package.json +1 -1
  112. package/styles.css +44 -4
package/components/floating-button-group/floating-button-group.module.css CHANGED
@@ -33,7 +33,7 @@
33
33
  /* Buttons are not positioned, so the highlight measures them against the tray and stacks above their background. */
34
34
  .item { display: inline-flex; min-width: var(--fbg-h); height: var(--fbg-h); flex: none; align-items: center; justify-content: center; margin: 0; padding: 0 var(--fbg-pad-x); border: 0; border-radius: var(--fbg-radius); background: transparent; color: inherit; font: inherit; font-size: var(--text-sm); font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); }
35
35
  .sm .item { font-size: var(--text-xs); }
36
- .item[data-icon]:not([data-icon-only]) { padding-left: calc(var(--fbg-pad-x) - 2px); }
36
+ .item[data-icon]:not([data-icon-only]) { padding-left: calc(var(--fbg-pad-x) - var(--space-hair)); }
37
37
  .item[data-icon-only] { width: var(--fbg-h); padding: 0; }
38
38
  .item[data-active], .item[aria-pressed="true"] { color: var(--foreground); }
39
39
  .item[aria-pressed="true"] { background: var(--fbg-on); }
@@ -45,21 +45,21 @@
45
45
  .slot { position: relative; z-index: 2; display: inline-grid; align-items: center; justify-items: center; }
46
46
  .slot > * { grid-area: 1 / 1; }
47
47
  .vertical .slot { justify-items: start; }
48
- .ghost { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; visibility: hidden; pointer-events: none; }
48
+ .ghost { display: inline-flex; align-items: center; gap: var(--space-related); white-space: nowrap; visibility: hidden; pointer-events: none; }
49
49
  .iconSpace { display: block; width: 16px; height: 16px; flex: none; }
50
- .phase { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
50
+ .phase { display: inline-flex; align-items: center; gap: var(--space-related); white-space: nowrap; }
51
51
  .icon { display: inline-flex; flex: none; }
52
52
  .icon svg { width: 16px; height: 16px; stroke-width: 1.75; }
53
53
  .text { display: block; }
54
54
 
55
- .separator { flex: none; align-self: center; width: 1px; height: calc(var(--fbg-h) * .5); margin-inline: 2px; border-radius: var(--radius-full); corner-shape: round; background: var(--fbg-rule); }
56
- .vertical .separator { width: calc(var(--fbg-h) * .5); height: 1px; margin: 2px 0; }
55
+ .separator { flex: none; align-self: center; width: 1px; height: calc(var(--fbg-h) * .5); margin-inline: var(--space-hair); border-radius: var(--radius-full); corner-shape: round; background: var(--fbg-rule); }
56
+ .vertical .separator { width: calc(var(--fbg-h) * .5); height: 1px; margin: var(--space-hair) 0; }
57
57
 
58
58
  .tip { display: inline-flex; align-items: baseline; gap: var(--space-group); white-space: nowrap; }
59
59
  .kbd { font: inherit; color: color-mix(in oklab, var(--background) 58%, var(--foreground)); font-variant-numeric: tabular-nums; }
60
60
 
61
61
  /* Side tooltips for a column match the library tooltip, rising a few pixels away from the rail instead of up. */
62
- .sideTip { --tip-x: -3px; z-index: 90; max-width: 15rem; padding: var(--space-group) var(--space-inset); border: 1px solid color-mix(in oklab, var(--background) 14%, var(--foreground)); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--foreground); color: var(--background); box-shadow: var(--shadow-raised); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; letter-spacing: var(--tracking-body); line-height: var(--leading-body); transform-origin: var(--radix-tooltip-content-transform-origin); transition: opacity var(--duration-fast) var(--ease-enter), transform var(--duration-fast) var(--ease-enter); }
62
+ .sideTip { --tip-x: -3px; z-index: var(--layer-tooltip); max-width: 15rem; padding: var(--space-group) var(--space-inset); border: 1px solid color-mix(in oklab, var(--background) 14%, var(--foreground)); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--foreground); color: var(--background); box-shadow: var(--shadow-raised); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; letter-spacing: var(--tracking-body); line-height: var(--leading-body); transform-origin: var(--radix-tooltip-content-transform-origin); transition: opacity var(--duration-fast) var(--ease-enter), transform var(--duration-fast) var(--ease-enter); }
63
63
  .sideTip[data-side="left"] { --tip-x: 3px; }
64
64
  @starting-style {
65
65
  .sideTip[data-state$="-open"] { opacity: 0; transform: translateX(var(--tip-x)) scale(.97); }
package/components/gauge/gauge.module.css CHANGED
@@ -1,4 +1,4 @@
1
- .figure { display: grid; justify-items: center; min-width: 0; gap: 10px; margin: 0; text-align: center; }.figure figcaption { display: grid; gap: 3px; min-width: 0; }.figure strong { font-size: var(--text-sm); font-weight: 500; }.detail { color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
1
+ .figure { display: grid; justify-items: center; min-width: 0; gap: var(--space-group); margin: 0; text-align: center; }.figure figcaption { display: grid; gap: var(--space-tight); min-width: 0; }.figure strong { font-size: var(--text-sm); font-weight: 500; }.detail { color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
2
2
  .accent { --gauge-color: var(--accent); --gauge-text: var(--accent-strong); }.success { --gauge-color: var(--success); --gauge-text: var(--success); }.warning { --gauge-color: var(--warning); --gauge-text: var(--warning); }.danger { --gauge-color: var(--danger); --gauge-text: var(--danger); }
3
3
 
4
4
  /* An activity style ring: a thick stroke with round caps over a faint tint of its own color. The stroke scales with the ring. */
@@ -9,7 +9,7 @@
9
9
  .arc { stroke: var(--gauge-color); }
10
10
 
11
11
  /* The readout sits on the ring's true centre, which is the middle of a square as wide as the ring. */
12
- .readout { position: absolute; top: 0; left: 0; display: grid; width: 100%; aspect-ratio: 1; place-content: center; justify-items: center; gap: 4px; pointer-events: none; }
12
+ .readout { position: absolute; top: 0; left: 0; display: grid; width: 100%; aspect-ratio: 1; place-content: center; justify-items: center; gap: var(--space-tight); pointer-events: none; }
13
13
  .number { position: relative; display: inline-flex; align-items: baseline; color: var(--foreground); font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 500; letter-spacing: var(--tracking-display); line-height: 1; font-variant-numeric: tabular-nums; }
14
14
  .digits { display: inline-flex; justify-content: flex-end; white-space: nowrap; }
15
15
  .unit { margin-left: 1px; color: var(--text-secondary); font-family: var(--font-body); font-size: .5em; letter-spacing: 0; }
package/components/hover-card/hover-card.module.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /* A floating layer, so it earns the floating shadow. Transforms pivot on the placed origin, the corner nearest the trigger. */
2
- .card { z-index: 60; box-sizing: border-box; width: 18.5rem; max-width: min(18.5rem, var(--radix-popover-content-available-width, calc(100vw - 24px))); padding: var(--space-inset); border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface-raised); color: var(--foreground); box-shadow: var(--shadow-floating); font-family: var(--font-body); letter-spacing: var(--tracking-body); transform-origin: var(--radix-popover-content-transform-origin); outline: none; }
2
+ .card { z-index: var(--layer-popover); box-sizing: border-box; width: 18.5rem; max-width: min(18.5rem, var(--radix-popover-content-available-width, calc(100vw - 24px))); padding: var(--space-inset); border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface-raised); color: var(--foreground); box-shadow: var(--shadow-floating); font-family: var(--font-body); letter-spacing: var(--tracking-body); transform-origin: var(--radix-popover-content-transform-origin); outline: none; }
3
3
  .profile { display: grid; gap: var(--space-group); }
4
4
  .head { display: flex; min-width: 0; align-items: center; gap: var(--space-group); }
5
5
  .avatar { position: relative; display: grid; width: 48px; height: 48px; flex: none; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface-muted); color: var(--foreground); font-size: var(--text-sm); font-weight: 500; }
@@ -15,6 +15,6 @@
15
15
  .stat { display: flex; flex-direction: column-reverse; }
16
16
  .stat dt { color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
17
17
  .stat dd { margin: 0; color: var(--foreground); font-size: var(--text-base); font-variant-numeric: tabular-nums; font-weight: 500; line-height: var(--leading-body); }
18
- .meta { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
18
+ .meta { display: flex; align-items: center; gap: var(--space-related); color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
19
19
  .meta svg { flex: none; }
20
20
  @media (prefers-reduced-motion: reduce) { .avatar img { transition: none; } .avatar img[data-loading] { filter: none; } }
package/components/image-compare/image-compare.module.css CHANGED
@@ -6,20 +6,20 @@
6
6
  .layer { position: absolute; inset: 0; }
7
7
  .layer :where(img, picture, video) { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
8
8
  /* Captions sit on a frosted chip so they read over any photo, below the divider. */
9
- .chip { position: absolute; z-index: 1; top: var(--space-group); left: var(--space-group); padding: 3px 10px; border-radius: var(--radius-full); corner-shape: round; background: color-mix(in oklab, var(--background) 74%, transparent); color: var(--foreground); font-size: var(--text-xs); font-weight: 500; line-height: var(--leading-body); letter-spacing: var(--tracking-body); pointer-events: none; -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }
9
+ .chip { position: absolute; z-index: 1; top: var(--space-group); left: var(--space-group); padding: var(--space-tight) var(--space-group); border-radius: var(--radius-full); corner-shape: round; background: color-mix(in oklab, var(--background) 74%, transparent); color: var(--foreground); font-size: var(--text-xs); font-weight: 500; line-height: var(--leading-body); letter-spacing: var(--tracking-body); pointer-events: none; -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }
10
10
  .chip[data-place="end"] { right: var(--space-group); left: auto; }
11
11
  .chip[data-place="bottom"] { top: auto; bottom: var(--space-group); }
12
12
  /* The pivot is a frame-sized layer moved by a percentage of itself; its top-left corner is the divider's center. */
13
13
  .pivot { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
14
14
  .rotor { position: absolute; top: 0; left: 0; width: 0; height: 0; }
15
- .line { position: absolute; top: calc((100cqw + 100cqh) * -1); left: -1px; width: 2px; height: calc((100cqw + 100cqh) * 2); background: var(--surface-raised); box-shadow: 0 0 0 .5px oklch(0% 0 0 / .14); }
15
+ .line { position: absolute; top: calc((100cqw + 100cqh) * -1); left: -1px; width: 2px; height: calc((100cqw + 100cqh) * 2); background: var(--surface-raised); box-shadow: var(--shadow-hairline); }
16
16
  /* The line sits on photography, not on the theme, so it stays light in dark mode too. */
17
17
  :global(:root[data-theme="dark"]) .line { background: var(--foreground); }
18
18
  .handleSlot { position: absolute; top: 0; left: 0; }
19
19
  /* Centered with the translate property; Motion only animates its width and height, so the shape morphs without scaling the icons. */
20
20
  .handle { position: absolute; top: 0; left: 0; display: grid; box-sizing: border-box; width: 40px; height: 40px; place-items: center; translate: -50% -50%; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface-raised); box-shadow: var(--shadow-raised); color: var(--foreground); pointer-events: auto; outline: 0 solid transparent; transition: border-color var(--duration-fast) var(--ease-standard); }
21
- .handle::after { content: ""; position: absolute; inset: -8px; border-radius: inherit; corner-shape: inherit; }
21
+ .handle::after { content: ""; position: absolute; inset: calc(var(--space-related) * -1); border-radius: inherit; corner-shape: inherit; }
22
22
  @media (hover: hover) and (pointer: fine) { .root:hover .handle { border-color: var(--border-strong); } }
23
23
  .chevrons { display: flex; align-items: center; }
24
- .chevron { display: grid; margin-inline: -2.5px; place-items: center; }
24
+ .chevron { display: grid; margin-inline: calc(var(--space-hair) * -1); place-items: center; }
25
25
  @media (prefers-reduced-motion: reduce) { .handle { transition: none; } }
package/components/inline-edit/inline-edit.module.css CHANGED
@@ -4,9 +4,9 @@
4
4
  .root[data-variant="title"] { --size: var(--text-xl); --leading: round(var(--size) * 1.3, 2px); --weight: 500; --ink: var(--foreground); }
5
5
  .root[data-variant="body"] { --pad-y: 5px; --size: var(--text-sm); --leading: round(var(--size) * 1.5, 1px); --weight: 400; --ink: var(--text-secondary); }
6
6
  /* Room for the actions is reserved in every state, so the text never rewraps when editing starts. */
7
- /* Inter at every size here: a heading host keeps its semantics but not the display face. */
8
- .line { display: block; min-width: 0; margin: 0; padding-inline-end: 66px; color: var(--ink); font-family: var(--font-body); font-size: var(--size); font-weight: var(--weight); line-height: var(--leading); letter-spacing: var(--tracking-body); }
9
- .root[data-multiline] .line { padding-inline-end: 38px; }
7
+ /* The body face at every size here: a heading host keeps its semantics but not the display face. */
8
+ .line { display: block; min-width: 0; margin: 0; padding-inline-end: var(--space-stage); color: var(--ink); font-family: var(--font-body); font-size: var(--size); font-weight: var(--weight); line-height: var(--leading); letter-spacing: var(--tracking-body); }
9
+ .root[data-multiline] .line { padding-inline-end: var(--space-block); }
10
10
  .box { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
11
11
  .root[data-multiline] .box { display: block; }
12
12
 
@@ -16,7 +16,7 @@
16
16
  .root[data-multiline] .display { width: 100%; }
17
17
  .root[data-editing] .display { visibility: hidden; }
18
18
  /* While editing, a single line keeps a little extra room, so the next character never has to wait for the box. */
19
- .root[data-editing]:not([data-multiline]) .display { min-width: 5em; padding-inline-end: calc(var(--pad-x) + 16px); }
19
+ .root[data-editing]:not([data-multiline]) .display { min-width: 5em; padding-inline-end: calc(var(--pad-x) + var(--space-inset)); }
20
20
  .display[aria-disabled="true"] { cursor: progress; }
21
21
  .layer { position: relative; display: block; transition: opacity var(--duration-standard) var(--ease-standard); }
22
22
  .layer[data-empty] { color: var(--text-muted); }
@@ -45,28 +45,28 @@ textarea.control { white-space: pre-wrap; overflow-wrap: break-word; }
45
45
  .root[data-flash="off"] .frame { transition-duration: var(--duration-considered); }
46
46
 
47
47
  /* The slot rides on the frame's edge, so it follows the width morph instead of jumping to the new width. */
48
- .slot { position: absolute; top: 50%; left: calc(100% + 6px); display: grid; min-height: 28px; margin-top: -14px; pointer-events: auto; }
49
- .root[data-multiline] .slot { top: 0; left: calc(100% + 8px); margin-top: calc(var(--pad-y) + var(--leading) / 2 - 13px); }
48
+ .slot { position: absolute; top: 50%; left: calc(100% + var(--space-related)); display: grid; min-height: 28px; margin-top: calc(var(--space-inset) * -1); pointer-events: auto; }
49
+ .root[data-multiline] .slot { top: 0; left: calc(100% + var(--space-related)); margin-top: calc(var(--pad-y) + var(--leading) / 2 - var(--space-group)); }
50
50
  .slotItem { display: grid; grid-area: 1 / 1; min-height: 28px; place-items: center start; }
51
- .actions { display: flex; gap: 4px; }
51
+ .actions { display: flex; gap: var(--space-tight); }
52
52
  .root[data-multiline] .actions { flex-direction: column; }
53
53
  .save, .cancel { display: grid; width: 28px; height: 28px; flex: none; place-items: center; padding: 0; border: 1px solid transparent; border-radius: var(--radius-full); corner-shape: round; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); }
54
54
  .save { background: var(--foreground); color: var(--background); }
55
55
  .cancel { border-color: var(--border); background: var(--surface); color: var(--text-secondary); }
56
56
  .save:active, .cancel:active { transform: scale(.96); }
57
57
  @media (hover: hover) and (pointer: fine) { .save:hover { background: color-mix(in oklab, var(--foreground) 86%, var(--background)); } .cancel:hover { border-color: var(--border-strong); background: var(--surface-muted); color: var(--foreground); } }
58
- .pencil { margin-left: 2px; color: var(--text-muted); cursor: pointer; }
59
- .spinner { display: block; width: 14px; height: 14px; margin-left: 2px; border: 1.5px solid var(--text-muted); border-right-color: transparent; border-radius: var(--radius-full); corner-shape: round; animation: spin .7s linear infinite; }
58
+ .pencil { margin-left: var(--space-hair); color: var(--text-muted); cursor: pointer; }
59
+ .spinner { display: block; width: 14px; height: 14px; margin-left: var(--space-hair); border: 1.5px solid var(--text-muted); border-right-color: transparent; border-radius: var(--radius-full); corner-shape: round; animation: spin .7s linear infinite; }
60
60
  .saved { display: grid; margin-left: 1px; place-items: center; color: var(--success); }
61
61
  .failedIcon { margin-left: 1px; color: var(--danger); }
62
62
 
63
63
  /* The message row opens from a true zero; its spacing lives inside the clipped slot. */
64
64
  .reveal { display: block; overflow: hidden; }
65
65
  .revealInner { position: relative; display: block; }
66
- .message { display: flex; align-items: flex-start; gap: 6px; padding: 6px var(--pad-x) 4px calc(var(--pad-x) + 1px); color: var(--text-secondary); font-size: var(--text-xs); font-weight: 400; line-height: var(--leading-body); }
66
+ .message { display: flex; align-items: flex-start; gap: var(--space-related); padding: var(--space-related) var(--pad-x) var(--space-tight) calc(var(--pad-x) + 1px); color: var(--text-secondary); font-size: var(--text-xs); font-weight: 400; line-height: var(--leading-body); }
67
67
  .message[data-tone="error"] { color: var(--danger); }
68
- .messageIcon { flex: none; margin-top: 2px; color: var(--danger); }
69
- .retry { margin: 0 0 0 2px; padding: 0; border: 0; border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: none; color: var(--foreground); font: inherit; font-weight: 500; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; cursor: pointer; }
68
+ .messageIcon { flex: none; margin-top: var(--space-hair); color: var(--danger); }
69
+ .retry { margin: 0 0 0 var(--space-hair); padding: 0; border: 0; border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: none; color: var(--foreground); font: inherit; font-weight: 500; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; cursor: pointer; }
70
70
  @media (hover: hover) and (pointer: fine) { .retry:hover { text-decoration-color: currentColor; } }
71
71
  .srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
72
72
  @keyframes spin { to { transform: rotate(360deg); } }
package/components/json-viewer/json-viewer.module.css CHANGED
@@ -1,16 +1,16 @@
1
1
  .root { --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; --indent: 16px; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-container); background: var(--surface); color: var(--foreground); font-family: var(--font-body); letter-spacing: var(--tracking-body); }
2
2
 
3
3
  /* Toolbar: search with a match counter, then expand and collapse all. */
4
- .toolbar { display: flex; align-items: center; gap: 2px; padding: 6px; border-bottom: 1px solid var(--border-subtle); }
5
- .search { position: relative; display: flex; min-width: 0; flex: 1; align-items: center; gap: 4px; min-height: 34px; padding: 0 4px 0 10px; border-radius: var(--radius-control); background: var(--surface-muted); cursor: text; }
4
+ .toolbar { display: flex; align-items: center; gap: var(--space-hair); padding: var(--space-related); border-bottom: 1px solid var(--border-subtle); }
5
+ .search { position: relative; display: flex; min-width: 0; flex: 1; align-items: center; gap: var(--space-tight); min-height: 34px; padding: 0 var(--space-tight) 0 var(--space-group); border-radius: var(--radius-control); background: var(--surface-muted); cursor: text; }
6
6
  .searchIcon { flex: none; color: var(--text-muted); }
7
- .input { min-width: 0; flex: 1; height: 34px; padding: 0 4px; border: 0; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); outline: none; }
7
+ .input { min-width: 0; flex: 1; height: 34px; padding: 0 var(--space-tight); border: 0; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); outline: none; }
8
8
  .input::placeholder { color: var(--text-muted); }
9
9
  .input::-webkit-search-cancel-button { display: none; }
10
10
  .matches { display: inline-flex; flex: none; align-items: center; gap: 0; }
11
- .count { min-width: 3.5ch; padding-inline: 4px; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; text-align: right; }
11
+ .count { min-width: 3.5ch; padding-inline: var(--space-tight); color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; text-align: right; }
12
12
  .grow { flex: 1; }
13
- .divider { width: 1px; height: 18px; margin-inline: 4px; background: var(--border-subtle); }
13
+ .divider { width: 1px; height: 18px; margin-inline: var(--space-tight); background: var(--border-subtle); }
14
14
  .tool { display: inline-grid; width: 34px; height: 34px; flex: none; place-items: center; padding: 0; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); }
15
15
  .tool:disabled { cursor: default; opacity: .4; }
16
16
  .tool:active:not(:disabled) { background: var(--surface-muted); color: var(--foreground); }
@@ -18,10 +18,10 @@
18
18
  .search .tool:active:not(:disabled) { background: var(--surface); }
19
19
 
20
20
  /* Tree. Rows are one fixed height, so scrolling can aim at where a row will settle. */
21
- .tree { position: relative; max-height: var(--json-max-height, 420px); padding: 6px; overflow: auto; overflow-anchor: none; overscroll-behavior: contain; font-family: var(--mono); font-size: 13px; font-variant-ligatures: none; letter-spacing: 0; scrollbar-width: thin; }
21
+ .tree { position: relative; max-height: var(--json-max-height, 420px); padding: var(--space-related); overflow: auto; overflow-anchor: none; overscroll-behavior: contain; font-family: var(--mono); font-size: var(--text-sm); font-variant-ligatures: none; letter-spacing: 0; scrollbar-width: thin; }
22
22
  .row { position: relative; border-radius: var(--radius-detail); cursor: default; outline: none; -webkit-tap-highlight-color: transparent; }
23
23
  .highlight { position: absolute; inset: 1px 0; border-radius: var(--radius-detail); background: var(--surface-muted); }
24
- .line { position: relative; display: flex; height: 30px; min-width: 0; align-items: center; gap: 6px; padding-right: 6px; padding-left: calc(4px + var(--level, 0) * var(--indent)); white-space: nowrap; }
24
+ .line { position: relative; display: flex; height: 30px; min-width: 0; align-items: center; gap: var(--space-related); padding-right: var(--space-related); padding-left: calc(var(--space-tight) + var(--level, 0) * var(--indent)); white-space: nowrap; }
25
25
  .row[data-kind="node"] .line { cursor: pointer; }
26
26
 
27
27
  .chevron { display: inline-grid; width: 14px; height: 14px; flex: none; place-items: center; color: var(--text-muted); transition: transform var(--duration-spring) var(--ease-spring), color var(--duration-fast) var(--ease-standard); }
@@ -30,8 +30,8 @@
30
30
 
31
31
  .key { flex: none; max-width: 45%; overflow: hidden; color: var(--foreground); text-overflow: ellipsis; }
32
32
  .index { flex: none; color: var(--text-muted); font-variant-numeric: tabular-nums; }
33
- .colon { flex: none; margin-left: -5px; color: var(--text-muted); }
34
- .summary { display: inline-flex; min-width: 0; align-items: baseline; gap: 8px; overflow: hidden; }
33
+ .colon { flex: none; margin-left: calc(var(--space-tight) * -1); color: var(--text-muted); }
34
+ .summary { display: inline-flex; min-width: 0; align-items: baseline; gap: var(--space-related); overflow: hidden; }
35
35
  .preview { min-width: 0; overflow: hidden; color: var(--text-muted); text-overflow: ellipsis; }
36
36
  .countLabel { flex: none; color: var(--text-muted); font-family: var(--font-body); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
37
37
 
@@ -45,14 +45,14 @@
45
45
  .mark { border-radius: var(--radius-detail); background: color-mix(in oklab, var(--warning) 22%, transparent); color: inherit; box-shadow: 0 0 0 1px color-mix(in oklab, var(--warning) 22%, transparent); transition: background-color var(--duration-fast) var(--ease-standard); }
46
46
  .mark[data-current] { background: color-mix(in oklab, var(--warning) 48%, transparent); }
47
47
 
48
- .more { display: inline-flex; align-items: baseline; gap: 10px; padding-left: 20px; font-family: var(--font-body); font-size: var(--text-sm); }
48
+ .more { display: inline-flex; align-items: baseline; gap: var(--space-group); padding-left: var(--space-comfort); font-family: var(--font-body); font-size: var(--text-sm); }
49
49
  .moreLabel { color: var(--foreground); font-weight: 500; }
50
50
  .row[data-kind="more"] { cursor: pointer; }
51
51
  .muted { color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
52
52
 
53
53
  /* Copy actions appear at the row's end over a soft fade, on hover or on the current row. */
54
54
  /* Inset like the highlight, with its right corners, so the fade never shows a square edge past the row's rounded end. */
55
- .actions { position: absolute; top: 1px; right: 0; bottom: 1px; display: flex; align-items: center; gap: 0; padding-right: 1px; padding-left: 24px; border-radius: 0 var(--radius-detail) var(--radius-detail) 0; background: linear-gradient(to right, transparent, var(--surface) 22px); opacity: 0; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-standard); }
55
+ .actions { position: absolute; top: 1px; right: 0; bottom: 1px; display: flex; align-items: center; gap: 0; padding-right: 1px; padding-left: var(--space-section); border-radius: 0 var(--radius-detail) var(--radius-detail) 0; background: linear-gradient(to right, transparent, var(--surface) 22px); opacity: 0; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-standard); }
56
56
  .row[data-active] .actions { background: linear-gradient(to right, transparent, var(--surface-muted) 22px); }
57
57
  .action { position: relative; display: inline-grid; width: 26px; height: 26px; place-items: center; padding: 0; border: 0; border-radius: var(--radius-detail); background: transparent; color: var(--text-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
58
58
  .action[data-state="done"] { color: var(--success); }
@@ -62,7 +62,7 @@
62
62
  .row[data-active] .actions, .row:focus-within .actions { opacity: 1; pointer-events: auto; }
63
63
 
64
64
  /* The current path, always readable in full through its copy action. */
65
- .pathBar { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-top: 1px solid var(--border-subtle); }
65
+ .pathBar { display: flex; min-width: 0; align-items: center; gap: var(--space-group); padding: var(--space-related) var(--space-related) var(--space-related) var(--space-inset); border-top: 1px solid var(--border-subtle); }
66
66
  .path { min-width: 0; flex: 1; overflow: hidden; color: var(--text-secondary); font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
67
67
  .pathType { flex: none; color: var(--text-muted); font-size: var(--text-xs); }
68
68
  .pathCopy { width: 30px; height: 30px; border-radius: var(--radius-detail); }
package/components/line-chart/line-chart.module.css CHANGED
@@ -1,8 +1,8 @@
1
1
  .figure { display: grid; min-width: 0; gap: var(--space-inset); margin: 0; color: var(--foreground); font-family: var(--font-body); letter-spacing: var(--tracking-body); }
2
2
 
3
3
  /* Series toggles: a plain line swatch beside each name. A hidden series keeps its place, its swatch empties and its name steps back. */
4
- .legend { display: flex; flex-wrap: wrap; gap: 2px 4px; min-width: 0; margin-inline: -8px; }
5
- .toggle { display: inline-flex; min-height: 32px; align-items: center; gap: 8px; padding: 0 10px 0 8px; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-secondary); cursor: pointer; font: inherit; font-size: var(--text-sm); line-height: var(--leading-body); -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); }
4
+ .legend { display: flex; flex-wrap: wrap; gap: var(--space-hair) var(--space-tight); min-width: 0; margin-inline: calc(var(--space-related) * -1); }
5
+ .toggle { display: inline-flex; min-height: 32px; align-items: center; gap: var(--space-related); padding: 0 var(--space-group) 0 var(--space-related); border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-secondary); cursor: pointer; font: inherit; font-size: var(--text-sm); line-height: var(--leading-body); -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); }
6
6
  .toggle:active { transform: scale(.97); }
7
7
  .toggle[aria-pressed="false"] { color: var(--text-muted); }
8
8
  .toggleLabel { white-space: nowrap; transition: opacity var(--duration-fast) var(--ease-standard); }
@@ -31,25 +31,25 @@
31
31
  .chart[data-scrubbing] .dot:not([data-hidden]) { opacity: 1; }
32
32
 
33
33
  /* The tooltip floats over the plot, so it is the one layer here with a shadow. Springs carry its position; opacity and a small scale bring it in. */
34
- .tooltip { position: absolute; top: 0; left: 0; z-index: 1; display: grid; min-width: 140px; max-width: min(220px, 100%); gap: 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--surface-raised); box-shadow: var(--shadow-floating); opacity: 0; pointer-events: none; scale: .96; transition: opacity var(--duration-fast) var(--ease-standard), scale var(--duration-fast) var(--ease-standard); }
34
+ .tooltip { position: absolute; top: 0; left: 0; z-index: 1; display: grid; min-width: 140px; max-width: min(220px, 100%); gap: var(--space-tight); padding: var(--space-group) var(--space-group); border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--surface-raised); box-shadow: var(--shadow-floating); opacity: 0; pointer-events: none; scale: .96; transition: opacity var(--duration-fast) var(--ease-standard), scale var(--duration-fast) var(--ease-standard); }
35
35
  .chart[data-scrubbing] .tooltip { opacity: 1; scale: 1; }
36
- .tipTitle { margin: 0 0 2px; color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-body); white-space: nowrap; font-variant-numeric: tabular-nums; }
37
- .tipRow { display: flex; min-width: 0; align-items: center; gap: 8px; margin: 0; font-size: var(--text-sm); line-height: var(--leading-body); }
36
+ .tipTitle { margin: 0 0 var(--space-hair); color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-body); white-space: nowrap; font-variant-numeric: tabular-nums; }
37
+ .tipRow { display: flex; min-width: 0; align-items: center; gap: var(--space-related); margin: 0; font-size: var(--text-sm); line-height: var(--leading-body); }
38
38
  .tipSwatch { width: 10px; height: 2.5px; flex: none; border-radius: var(--radius-full); corner-shape: round; background: var(--series); }
39
39
  .tipSwatch[data-dashed] { background: repeating-linear-gradient(to right, var(--series) 0 3px, transparent 3px 5px); }
40
40
  .tipName { min-width: 0; flex: 1; overflow: hidden; color: var(--text-secondary); text-overflow: ellipsis; white-space: nowrap; }
41
- .tipValue { flex: none; margin-left: 8px; color: var(--foreground); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
41
+ .tipValue { flex: none; margin-left: var(--space-related); color: var(--foreground); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
42
42
 
43
43
  .message { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--text-muted); font-size: var(--text-sm); pointer-events: none; }
44
44
  /* First load with nothing to keep on screen: a calm band that breathes where the lines will be. */
45
45
  .skeleton { position: absolute; inset: 30% 0 25%; border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--foreground) 5%, transparent)); animation: breathe 1.4s var(--ease-in-out) infinite alternate; }
46
46
 
47
47
  .gutter { position: relative; grid-area: 1 / 2; min-width: 0; }
48
- .tick { position: absolute; top: 0; left: 10px; display: block; height: 0; white-space: nowrap; pointer-events: none; }
48
+ .tick { position: absolute; top: 0; left: var(--space-group); display: block; height: 0; white-space: nowrap; pointer-events: none; }
49
49
  .tickText { display: block; transform: translateY(-50%); color: var(--text-muted); font-size: var(--text-xs); line-height: 1; font-variant-numeric: tabular-nums; }
50
50
 
51
51
  .axis { position: relative; grid-area: 2 / 1; min-width: 0; }
52
- .axisLabel { position: absolute; top: 8px; color: var(--text-muted); font-size: var(--text-xs); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
52
+ .axisLabel { position: absolute; top: var(--space-related); color: var(--text-muted); font-size: var(--text-xs); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
53
53
 
54
54
  .srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
55
55
 
package/components/mention-input/mention-input.module.css CHANGED
@@ -24,7 +24,7 @@
24
24
  box-sizing: border-box;
25
25
  width: 100%;
26
26
  margin: 0;
27
- padding: 11px 14px;
27
+ padding: var(--space-group) var(--space-inset);
28
28
  border: 0;
29
29
  font: inherit;
30
30
  font-size: var(--text-base);
@@ -66,8 +66,8 @@
66
66
 
67
67
  /* A token is tinted around its own glyphs; the negative margin keeps every character where the textarea put it. */
68
68
  .token {
69
- margin: 0 -3px;
70
- padding: 1px 3px;
69
+ margin: 0 calc(var(--space-tight) * -1);
70
+ padding: 1px var(--space-tight);
71
71
  border-radius: var(--radius-detail); corner-shape: var(--corner-shape);
72
72
  background: var(--accent-subtle);
73
73
  color: var(--accent-strong);
@@ -78,7 +78,7 @@
78
78
 
79
79
  .popover {
80
80
  position: absolute;
81
- z-index: 30;
81
+ z-index: var(--layer-dropdown);
82
82
  width: 272px;
83
83
  max-width: 100%;
84
84
  overflow: hidden;
@@ -88,7 +88,7 @@
88
88
  box-shadow: var(--shadow-floating);
89
89
  }
90
90
  .popover[data-above] { translate: 0 -100%; }
91
- .popoverBody { padding: 6px; }
91
+ .popoverBody { padding: var(--space-related); }
92
92
 
93
93
  .list { position: relative; display: grid; margin: 0; padding: 0; list-style: none; }
94
94
  .highlight { position: absolute; top: 0; right: 0; left: 0; border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: color-mix(in oklab, var(--foreground) 6.5%, transparent); pointer-events: none; }
@@ -98,8 +98,8 @@
98
98
  display: flex;
99
99
  min-width: 0;
100
100
  align-items: center;
101
- gap: 10px;
102
- padding: 7px 10px 7px 8px;
101
+ gap: var(--space-group);
102
+ padding: var(--space-related) var(--space-group) var(--space-related) var(--space-related);
103
103
  border-radius: var(--radius-control); corner-shape: var(--corner-shape);
104
104
  cursor: pointer;
105
105
  font-size: var(--text-sm);
@@ -129,6 +129,6 @@
129
129
  .optionMeta { overflow: hidden; color: var(--text-muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
130
130
  .count { flex: none; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
131
131
 
132
- .empty { margin: 0; padding: 10px 10px; color: var(--text-secondary); font-size: var(--text-sm); }
132
+ .empty { margin: 0; padding: var(--space-group) var(--space-group); color: var(--text-secondary); font-size: var(--text-sm); }
133
133
 
134
134
  .srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
package/components/metric-card/metric-card.module.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .card { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-overlay); corner-shape: var(--corner-shape); padding: var(--space-section); background: var(--surface); box-shadow: var(--shadow-resting); }
2
2
  .top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-group); margin-bottom: var(--space-block); }
3
3
  .top span { color: var(--text-secondary); font-size: var(--text-sm); }
4
- .top small { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; padding: 3px 8px; color: var(--text-secondary); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
4
+ .top small { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; padding: var(--space-tight) var(--space-related); color: var(--text-secondary); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
5
5
  .card p { margin: var(--space-inset) 0 0; color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-body); }
6
6
  @media (max-width: 380px) { .card { padding: var(--space-inset); } .top { align-items: flex-start; flex-wrap: wrap; margin-bottom: var(--space-section); } }
7
7
  /* Text swaps: the outgoing copy is popped out of flow so the wrapper never holds both widths. */
package/components/money-input/money-input.module.css CHANGED
@@ -3,7 +3,7 @@
3
3
  .label { justify-self: start; margin-bottom: var(--space-related); color: var(--foreground); font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }
4
4
 
5
5
  /* One tall shell: the amount on the left, the currency on the right. Set --money-input-height to resize it. */
6
- .control { position: relative; display: flex; min-width: 0; height: var(--money-input-height, 76px); box-sizing: border-box; align-items: center; gap: var(--space-related); padding: 0 8px 0 18px; border: 1px solid var(--border-strong); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface); transition: border-color var(--duration-fast) var(--ease-standard); }
6
+ .control { position: relative; display: flex; min-width: 0; height: var(--money-input-height, 76px); box-sizing: border-box; align-items: center; gap: var(--space-related); padding: 0 var(--space-related) 0 var(--space-comfort); border: 1px solid var(--border-strong); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface); transition: border-color var(--duration-fast) var(--ease-standard); }
7
7
  @media (hover: hover) and (pointer: fine) { .control:hover:not([data-invalid]) { border-color: var(--foreground); } }
8
8
  .control[data-focused] { border-color: var(--foreground); }
9
9
  .control[data-invalid] { border-color: var(--danger); }
@@ -35,19 +35,19 @@
35
35
 
36
36
  /* Currency switch: plain text on the shell, a quiet fill on hover and while open. It answers a press with color, since it anchors a menu. */
37
37
  .menuAnchor { position: relative; flex: none; }
38
- .currencyButton { display: inline-flex; height: 36px; align-items: center; gap: 4px; padding: 0 8px 0 12px; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--foreground); cursor: pointer; font: inherit; font-size: var(--text-sm); font-weight: 500; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard); }
38
+ .currencyButton { display: inline-flex; height: 36px; align-items: center; gap: var(--space-tight); padding: 0 var(--space-related) 0 var(--space-group); border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--foreground); cursor: pointer; font: inherit; font-size: var(--text-sm); font-weight: 500; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard); }
39
39
  @media (hover: hover) and (pointer: fine) { .currencyButton:hover:not(:disabled) { background: var(--surface-muted); } }
40
40
  .currencyButton:active:not(:disabled), .currencyButton[data-open] { background: var(--surface-muted); }
41
41
  .currencyButton:disabled { cursor: not-allowed; }
42
42
  .code { font-variant-numeric: tabular-nums; }
43
- .codeStatic { flex: none; padding: 0 10px; color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; }
43
+ .codeStatic { flex: none; padding: 0 var(--space-group); color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; }
44
44
  .chevron { display: grid; width: 16px; height: 16px; place-items: center; color: var(--text-muted); }
45
45
 
46
46
  /* The menu grows out of the currency button's corner and opens 8px below the shell, whatever its height. */
47
- .menu { --drop: calc((var(--money-input-height, 76px) - 36px) / 2 + var(--space-related)); position: absolute; z-index: 30; top: calc(100% + var(--drop)); right: -8px; width: min(256px, calc(100vw - 2rem)); box-sizing: border-box; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface-raised); box-shadow: var(--shadow-floating); transform-origin: calc(100% - 44px) calc(var(--drop) * -1 - 18px); }
48
- .list { position: relative; display: grid; max-height: 288px; gap: 2px; overflow-y: auto; overscroll-behavior: contain; outline: none; scrollbar-width: thin; }
47
+ .menu { --drop: calc((var(--money-input-height, 76px) - 36px) / 2 + var(--space-related)); position: absolute; z-index: var(--layer-dropdown); top: calc(100% + var(--drop)); right: calc(var(--space-related) * -1); width: min(256px, calc(100vw - 2rem)); box-sizing: border-box; padding: var(--space-related); border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface-raised); box-shadow: var(--shadow-floating); transform-origin: calc(100% - 44px) calc(var(--drop) * -1 - 18px); }
48
+ .list { position: relative; display: grid; max-height: 288px; gap: var(--space-hair); overflow-y: auto; overscroll-behavior: contain; outline: none; scrollbar-width: thin; }
49
49
  .highlight { position: absolute; top: 0; right: 0; left: 0; border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: color-mix(in oklab, var(--foreground) 6.5%, transparent); pointer-events: none; }
50
- .option { position: relative; display: flex; min-height: 36px; box-sizing: border-box; align-items: center; gap: 10px; padding: 0 10px; border-radius: var(--radius-control); corner-shape: var(--corner-shape); color: var(--text-secondary); cursor: pointer; font-size: var(--text-sm); user-select: none; -webkit-user-select: none; transition: color var(--duration-fast) var(--ease-standard); }
50
+ .option { position: relative; display: flex; min-height: 36px; box-sizing: border-box; align-items: center; gap: var(--space-group); padding: 0 var(--space-group); border-radius: var(--radius-control); corner-shape: var(--corner-shape); color: var(--text-secondary); cursor: pointer; font-size: var(--text-sm); user-select: none; -webkit-user-select: none; transition: color var(--duration-fast) var(--ease-standard); }
51
51
  .option[data-active], .option[aria-selected="true"] { color: var(--foreground); }
52
52
  .optionSymbol { width: 22px; flex: none; color: var(--text-muted); text-align: center; }
53
53
  .optionCode { flex: none; font-weight: 500; font-variant-numeric: tabular-nums; }
@@ -57,8 +57,8 @@
57
57
 
58
58
  /* Quick add chips and the allowed range share one row under the shell. */
59
59
  .toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-related) var(--space-group); padding-top: var(--space-group); }
60
- .chips { display: flex; flex-wrap: wrap; gap: 6px; }
61
- .chip { height: 30px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface); color: var(--text-secondary); cursor: pointer; font: inherit; font-size: var(--text-xs); font-weight: 500; font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
60
+ .chips { display: flex; flex-wrap: wrap; gap: var(--space-related); }
61
+ .chip { height: 30px; padding: 0 var(--space-group); border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface); color: var(--text-secondary); cursor: pointer; font: inherit; font-size: var(--text-xs); font-weight: 500; font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
62
62
  @media (hover: hover) and (pointer: fine) { .chip:hover:not(:disabled) { background: var(--surface-muted); color: var(--foreground); } }
63
63
  .chip:active:not(:disabled) { transform: scale(.96); transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-fast), 100ms; }
64
64
  .chip[aria-disabled="true"] { opacity: .45; }
@@ -73,5 +73,5 @@
73
73
 
74
74
  .srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
75
75
 
76
- @media (max-width: 420px) { .control { padding-left: 14px; } .group { font-size: var(--text-2xl); } }
76
+ @media (max-width: 420px) { .control { padding-left: var(--space-inset); } .group { font-size: var(--text-2xl); } }
77
77
  @media (prefers-reduced-motion: reduce) { .control, .column, .check, .chip, .range { transition-duration: 0ms; } .chip:active:not(:disabled) { transform: none; } }
package/components/morph-select/morph-select.module.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /* The root lays out the label and the anchor. The anchor holds the closed trigger's place; the shape floats over it and grows past it when open. */
2
2
  .root { --ms-h: var(--control-height-md); --ms-trigger-w: 0px; position: relative; display: inline-grid; justify-items: start; gap: var(--space-related); min-width: 0; color: var(--foreground); font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: var(--tracking-body); line-height: var(--leading-body); }
3
3
  .root[data-align="end"] { justify-items: end; }
4
- .root[data-open] { z-index: 30; }
4
+ .root[data-open] { z-index: var(--layer-dropdown); }
5
5
  .label { color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; }
6
6
 
7
7
  .anchor { position: relative; height: var(--ms-h); max-width: 100%; }
@@ -22,7 +22,7 @@
22
22
  /* The lid is the trigger row. It stays at the top of the surface in both states and sits above the list, so a lifted label passes over it. */
23
23
  .lid { position: absolute; z-index: 1; top: 0; right: 0; left: 0; height: var(--ms-h); }
24
24
 
25
- .trigger { box-sizing: border-box; display: flex; height: var(--ms-h); align-items: center; gap: var(--space-related); padding: 0 36px 0 14px; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
25
+ .trigger { box-sizing: border-box; display: flex; height: var(--ms-h); align-items: center; gap: var(--space-related); padding: 0 var(--space-block) 0 var(--space-inset); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
26
26
  .lid .trigger { position: absolute; inset: 0; width: 100%; margin: 0; border: 0; background: transparent; color: inherit; cursor: pointer; font-family: inherit; letter-spacing: inherit; text-align: left; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
27
27
  .lid .trigger:disabled { cursor: not-allowed; }
28
28
  /* An invisible copy that says how wide the closed trigger wants to be. It sits in flow until the first measurement lands, so the server render already has the right size. */
@@ -39,10 +39,10 @@
39
39
  .icon > svg { width: 16px; height: 16px; }
40
40
  .icon > img { width: 20px; height: 20px; border-radius: 50%; corner-shape: round; object-fit: cover; }
41
41
 
42
- .chevron { position: absolute; top: 50%; right: 12px; display: grid; width: 16px; height: 16px; margin-top: -8px; place-items: center; color: var(--text-muted); pointer-events: none; }
42
+ .chevron { position: absolute; top: 50%; right: var(--space-group); display: grid; width: 16px; height: 16px; margin-top: calc(var(--space-related) * -1); place-items: center; color: var(--text-muted); pointer-events: none; }
43
43
 
44
44
  /* Search takes the lid's place when the list is long. */
45
- .searchRow { position: absolute; inset: 0; display: flex; align-items: center; gap: var(--space-related); padding: 0 2px 0 14px; }
45
+ .searchRow { position: absolute; inset: 0; display: flex; align-items: center; gap: var(--space-related); padding: 0 var(--space-hair) 0 var(--space-inset); }
46
46
  .searchRow[inert] { pointer-events: none; }
47
47
  .searchIcon { flex: none; color: var(--text-muted); }
48
48
  .input { min-width: 0; height: 100%; flex: 1; padding: 0; border: 0; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); letter-spacing: var(--tracking-body); outline: none; }
@@ -56,19 +56,19 @@
56
56
  }
57
57
 
58
58
  /* The list hangs under the lid at its own width, so it measures the same whatever size the surface is mid spring. */
59
- .listFace { position: absolute; top: var(--ms-h); left: 0; box-sizing: border-box; width: max(var(--ms-trigger-w), min(var(--ms-panel-w), calc(100vw - 2rem))); padding: 0 6px 6px; }
59
+ .listFace { position: absolute; top: var(--ms-h); left: 0; box-sizing: border-box; width: max(var(--ms-trigger-w), min(var(--ms-panel-w), calc(100vw - 2rem))); padding: 0 var(--space-related) var(--space-related); }
60
60
  .root[data-align="end"] .listFace { right: 0; left: auto; }
61
- .listFace::before { content: ""; position: absolute; top: 0; right: 14px; left: 14px; height: 1px; background: var(--border-subtle); }
61
+ .listFace::before { content: ""; position: absolute; top: 0; right: var(--space-inset); left: var(--space-inset); height: 1px; background: var(--border-subtle); }
62
62
  .listFace[inert] { pointer-events: none; }
63
- .scroll { max-height: var(--ms-list-max); overflow-y: auto; overscroll-behavior: contain; padding-top: 6px; scrollbar-width: thin; }
64
- .options { position: relative; display: grid; gap: 2px; }
63
+ .scroll { max-height: var(--ms-list-max); overflow-y: auto; overscroll-behavior: contain; padding-top: var(--space-related); scrollbar-width: thin; }
64
+ .options { position: relative; display: grid; gap: var(--space-hair); }
65
65
  .highlight { position: absolute; top: 0; right: 0; left: 0; border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: color-mix(in oklab, var(--foreground) 6.5%, transparent); pointer-events: none; }
66
66
 
67
- .group { display: grid; gap: 2px; }
68
- .group + .group { margin-top: 4px; }
69
- .groupLabel { padding: 8px 10px 4px; color: var(--text-muted); font-size: var(--text-xs); font-weight: 400; }
67
+ .group { display: grid; gap: var(--space-hair); }
68
+ .group + .group { margin-top: var(--space-tight); }
69
+ .groupLabel { padding: var(--space-related) var(--space-group) var(--space-tight); color: var(--text-muted); font-size: var(--text-xs); font-weight: 400; }
70
70
 
71
- .option { position: relative; display: flex; min-height: 36px; box-sizing: border-box; align-items: center; gap: var(--space-related); padding: 0 10px 0 8px; border-radius: var(--radius-control); corner-shape: var(--corner-shape); color: var(--text-secondary); cursor: pointer; user-select: none; -webkit-user-select: none; transition: color var(--duration-fast) var(--ease-standard); }
71
+ .option { position: relative; display: flex; min-height: 36px; box-sizing: border-box; align-items: center; gap: var(--space-related); padding: 0 var(--space-group) 0 var(--space-related); border-radius: var(--radius-control); corner-shape: var(--corner-shape); color: var(--text-secondary); cursor: pointer; user-select: none; -webkit-user-select: none; transition: color var(--duration-fast) var(--ease-standard); }
72
72
  .option[data-active], .option[aria-selected="true"] { color: var(--foreground); }
73
73
  .option[aria-disabled="true"] { color: var(--text-muted); cursor: not-allowed; opacity: .6; }
74
74
  /* Lid padding minus list inset, so a lifted label starts exactly level with where it lands. */
@@ -76,7 +76,7 @@
76
76
  .meta { flex: none; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
77
77
  .check { display: grid; width: 16px; height: 16px; flex: none; place-items: center; color: var(--foreground); opacity: 0; transform: scale(.6); transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
78
78
  .check[data-on] { opacity: 1; transform: none; }
79
- .empty { margin: 0; padding: 12px 10px 14px; color: var(--text-muted); font-size: var(--text-sm); }
79
+ .empty { margin: 0; padding: var(--space-group) var(--space-group) var(--space-inset); color: var(--text-muted); font-size: var(--text-sm); }
80
80
 
81
81
  .srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
82
82
 
package/components/multi-select/multi-select.module.css CHANGED
@@ -2,12 +2,12 @@
2
2
  .control { position: relative; min-width: 0; }
3
3
  .label { font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }
4
4
  /* The trigger anchors the menu, so press feedback stays in color; it never scales. */
5
- .trigger { position: relative; display: flex; width: 100%; min-height: var(--control-height-md); align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); padding: 5px 11px 5px 12px; background: var(--surface); color: var(--foreground); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
5
+ .trigger { position: relative; display: flex; width: 100%; min-height: var(--control-height-md); align-items: center; gap: var(--space-related); border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); padding: var(--space-tight) var(--space-group) var(--space-tight) var(--space-group); background: var(--surface); color: var(--foreground); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
6
6
  @media (hover: hover) and (pointer: fine) { .trigger:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-muted); } }
7
7
  .trigger:active:not(:disabled), .trigger[aria-expanded="true"] { border-color: var(--border-strong); background: var(--surface-muted); }
8
8
  .trigger:disabled { opacity: .5; cursor: not-allowed; }
9
9
  /* The chevron stays pinned to the trailing edge; a selection only reserves room for the clear button beside it, so nothing jumps. */
10
- .hasClear .chevron { margin-left: 26px; }
10
+ .hasClear .chevron { margin-left: var(--space-section); }
11
11
  .value { position: relative; display: flex; min-width: 0; min-height: 26px; flex: 1; align-items: center; overflow: hidden; }
12
12
  .placeholder, .description { color: var(--text-muted); }
13
13
  /* The placeholder sits outside the flow so the first chip can open its slot from the leading edge. */
@@ -15,21 +15,21 @@
15
15
  /* The slot clips while its width springs open or closed; the chip keeps its natural width so the label never re-truncates mid-flight. */
16
16
  .slot { display: flex; flex: 0 1 auto; min-width: 0; overflow: hidden; }
17
17
  .slot:has(.more) { flex-shrink: 0; }
18
- .chip, .more { box-sizing: border-box; flex: 0 0 auto; max-width: 9rem; overflow: hidden; margin-right: 5px; border-radius: var(--radius-full); corner-shape: round; padding: 4px 8px; background: var(--surface-muted); box-shadow: inset 0 0 0 1px var(--border-subtle); color: var(--foreground); text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); transition: background-color var(--duration-fast) var(--ease-standard); }
18
+ .chip, .more { box-sizing: border-box; flex: 0 0 auto; max-width: 9rem; overflow: hidden; margin-right: var(--space-tight); border-radius: var(--radius-full); corner-shape: round; padding: var(--space-tight) var(--space-related); background: var(--surface-muted); box-shadow: inset 0 0 0 1px var(--border-subtle); color: var(--foreground); text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); transition: background-color var(--duration-fast) var(--ease-standard); }
19
19
  .trigger[aria-expanded="true"] .chip, .trigger[aria-expanded="true"] .more { background: var(--surface); }
20
20
  @media (hover: hover) and (pointer: fine) { .trigger:hover:not(:disabled) .chip, .trigger:hover:not(:disabled) .more { background: var(--surface); } }
21
21
  .more { display: inline-flex; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
22
22
  .count { display: inline-grid; }
23
23
  .count > span { grid-area: 1 / 1; }
24
24
  .srOnly { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
25
- .clear { position: absolute; top: 0; bottom: 0; right: 36px; display: grid; width: 22px; height: 22px; margin: auto 0; place-items: center; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-muted); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
25
+ .clear { position: absolute; top: 0; bottom: 0; right: var(--space-block); display: grid; width: 22px; height: 22px; margin: auto 0; place-items: center; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-muted); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
26
26
  @media (hover: hover) and (pointer: fine) { .clear:hover { background: var(--surface); color: var(--foreground); } }
27
27
  .chevron { flex: 0 0 auto; color: var(--text-muted); transition: transform var(--duration-spring) var(--ease-spring); }
28
28
  .trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); }
29
29
  .description { font-size: var(--text-xs); }
30
- .menu { position: absolute; z-index: 80; top: calc(100% + 8px); right: 0; left: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); padding: 5px; background: var(--surface-raised); box-shadow: var(--shadow-floating); transform-origin: top center; will-change: transform, opacity; }
30
+ .menu { position: absolute; z-index: var(--layer-dropdown); top: calc(100% + var(--space-related)); right: 0; left: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); padding: var(--space-tight); background: var(--surface-raised); box-shadow: var(--shadow-floating); transform-origin: top center; will-change: transform, opacity; }
31
31
  /* Arrow keys move the highlight often, so it changes almost instantly. Selection is shown by the check, not by weight, so labels never reflow. */
32
- .option { display: flex; width: 100%; min-height: 38px; align-items: center; justify-content: space-between; gap: 12px; border: 0; border-radius: calc(var(--radius-container) - 5px); corner-shape: var(--corner-shape); padding: 0 11px; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; transition: background-color 80ms var(--ease-standard), color 80ms var(--ease-standard); }
32
+ .option { display: flex; width: 100%; min-height: 38px; align-items: center; justify-content: space-between; gap: var(--space-group); border: 0; border-radius: calc(var(--radius-container) - var(--space-tight)); corner-shape: var(--corner-shape); padding: 0 var(--space-group); background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; transition: background-color 80ms var(--ease-standard), color 80ms var(--ease-standard); }
33
33
  .option > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
34
34
  .option[data-active="true"] { background: var(--surface-muted); }
35
35
  .option:disabled { opacity: .42; cursor: not-allowed; }