@streamscloud/kit 0.47.0 → 0.48.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 (31) hide show
  1. package/dist/styles/_semantic.scss +9 -3
  2. package/dist/ui/button/cmp.button.svelte +7 -2
  3. package/dist/ui/chip-group/cmp.chip-group.svelte +5 -2
  4. package/dist/ui/date-picker/cmp.date-picker.svelte +5 -1
  5. package/dist/ui/document-tabs/document-tab.svelte +4 -2
  6. package/dist/ui/emoji-picker/cmp.emoji-panel.svelte +1 -1
  7. package/dist/ui/grid-card/fields/cmp.grid-card-select-field.svelte +1 -0
  8. package/dist/ui/handle-input/cmp.handle-input.svelte +0 -1
  9. package/dist/ui/icon/cmp.icon.svelte +2 -2
  10. package/dist/ui/icon/cmp.icon.svelte.d.ts +3 -3
  11. package/dist/ui/icon-picker/cmp.icon-picker.svelte +1 -1
  12. package/dist/ui/icon-text/cmp.icon-text.svelte +4 -0
  13. package/dist/ui/icon-text/cmp.icon-text.svelte.d.ts +2 -2
  14. package/dist/ui/input/cmp.input.svelte +5 -1
  15. package/dist/ui/numeral-input/cmp.numeral-input.svelte +5 -1
  16. package/dist/ui/option-pill/cmp.option-pill.svelte +1 -1
  17. package/dist/ui/page-toolbar/cmp.toolbar-icon-button.svelte +1 -1
  18. package/dist/ui/page-toolbar/cmp.toolbar-option.svelte +4 -1
  19. package/dist/ui/page-toolbar/cmp.toolbar-sort-select.svelte.d.ts +1 -1
  20. package/dist/ui/page-toolbar/cmp.toolbar-value-stepper.svelte +4 -0
  21. package/dist/ui/page-toolbar/cmp.toolbar-view-controls.svelte.d.ts +1 -1
  22. package/dist/ui/segmented-control/cmp.segmented-control.svelte +5 -2
  23. package/dist/ui/select/_select-trigger.scss +5 -1
  24. package/dist/ui/select/cmp.input-suggest.svelte +5 -1
  25. package/dist/ui/select/cmp.singleselect-async.svelte +5 -1
  26. package/dist/ui/select/multiselect-base.svelte +5 -1
  27. package/dist/ui/slider/cmp.slider.svelte +1 -0
  28. package/dist/ui/tabs/tab.svelte +5 -2
  29. package/dist/ui/url-input/cmp.url-input.svelte +0 -1
  30. package/dist/ui/website-input/cmp.website-input.svelte +0 -1
  31. package/package.json +1 -1
@@ -119,7 +119,7 @@
119
119
  // FIELD SIZING — cross-cutting for input-shaped controls
120
120
  // (Input, Textarea, NumeralInput, DatePicker, Select triggers)
121
121
  // ============================================================
122
- --sc-kit--field--height--sm: 1.75rem; // 28px
122
+ --sc-kit--field--height--sm: 1.8125rem; // 29px
123
123
  --sc-kit--field--height--md: 2rem; // 32px
124
124
  --sc-kit--field--height--lg: 2.5rem; // 40px
125
125
 
@@ -127,8 +127,8 @@
127
127
  --sc-kit--field--padding-inline--md: 0.625rem; // 10px
128
128
  --sc-kit--field--padding-inline--lg: 0.75rem; // 12px
129
129
 
130
- --sc-kit--field--icon--size--xs: 0.8125rem; // 13px
131
- --sc-kit--field--icon--size--sm: 0.875rem; // 14px
130
+ --sc-kit--field--icon--size--xs: 0.875rem; // 14px
131
+ --sc-kit--field--icon--size--sm: 0.9375rem; // 15px
132
132
  --sc-kit--field--icon--size--md: 1rem; // 16px
133
133
  --sc-kit--field--icon--size--lg: 1.125rem; // 18px
134
134
  --sc-kit--field--icon--size--xl: 1.25rem; // 20px
@@ -168,6 +168,12 @@
168
168
  --sc-kit--line-height--3xl: 40px;
169
169
  --sc-kit--line-height--4xl: 48px;
170
170
 
171
+ // Each value keeps (control height − this) even, or the label's line box starts on a half pixel and the engines break that tie in opposite directions.
172
+ --sc-kit--line-height--control--xs: 14px;
173
+ --sc-kit--line-height--control--sm: 15px;
174
+ --sc-kit--line-height--control--md: 18px;
175
+ --sc-kit--line-height--control--lg: 22px;
176
+
171
177
  --sc-kit--font-weight--regular: 400;
172
178
  --sc-kit--font-weight--medium: 500;
173
179
  --sc-kit--font-weight--semibold: 600;
@@ -130,6 +130,7 @@ Pass `type="anchor"` to render as `<a>` with `href`, or `type="presentational"`
130
130
  --_btn--height: var(--sc-kit--button--height, var(--_btn--size-height));
131
131
  --_btn--padding-inline: var(--sc-kit--button--padding-inline, var(--_btn--size-padding-inline));
132
132
  --_btn--font-size: var(--sc-kit--button--font-size, var(--_btn--size-font-size));
133
+ --_btn--line-height: var(--_btn--size-line-height);
133
134
  --_btn--gap: var(--sc-kit--button--gap, var(--_btn--size-gap));
134
135
  --_btn--icon-size: var(--_btn--size-icon-size);
135
136
  --_btn--width: var(--sc-kit--button--width, fit-content);
@@ -152,7 +153,7 @@ Pass `type="anchor"` to render as `<a>` with `href`, or `type="presentational"`
152
153
  font-family: inherit;
153
154
  font-size: var(--_btn--font-size);
154
155
  font-weight: var(--_btn--font-weight);
155
- line-height: var(--sc-kit--leading--tight);
156
+ line-height: var(--_btn--line-height);
156
157
  color: var(--_btn--color);
157
158
  background: var(--_btn--background);
158
159
  border: var(--_btn--border);
@@ -207,14 +208,16 @@ Pass `type="anchor"` to render as `<a>` with `href`, or `type="presentational"`
207
208
  --_btn--size-height: 1.5rem;
208
209
  --_btn--size-padding-inline: var(--sc-kit--space--2);
209
210
  --_btn--size-font-size: var(--sc-kit--font-size--xs);
211
+ --_btn--size-line-height: var(--sc-kit--line-height--control--xs);
210
212
  --_btn--size-gap: var(--sc-kit--space--1);
211
213
  --_btn--size-icon-size: var(--sc-kit--field--icon--size--xs);
212
214
  --_btn--size-border-radius: var(--sc-kit--field--border-radius--sm);
213
215
  }
214
216
  .btn--sm {
215
- --_btn--size-height: 1.75rem;
217
+ --_btn--size-height: 1.8125rem;
216
218
  --_btn--size-padding-inline: var(--sc-kit--space--3);
217
219
  --_btn--size-font-size: var(--sc-kit--font-size--sm);
220
+ --_btn--size-line-height: var(--sc-kit--line-height--control--sm);
218
221
  --_btn--size-gap: var(--sc-kit--space--1);
219
222
  --_btn--size-icon-size: var(--sc-kit--field--icon--size--sm);
220
223
  --_btn--size-border-radius: var(--sc-kit--field--border-radius--sm);
@@ -223,6 +226,7 @@ Pass `type="anchor"` to render as `<a>` with `href`, or `type="presentational"`
223
226
  --_btn--size-height: 2rem;
224
227
  --_btn--size-padding-inline: var(--sc-kit--space--4);
225
228
  --_btn--size-font-size: var(--sc-kit--font-size--md);
229
+ --_btn--size-line-height: var(--sc-kit--line-height--control--md);
226
230
  --_btn--size-gap: var(--sc-kit--space--2);
227
231
  --_btn--size-icon-size: var(--sc-kit--field--icon--size--md);
228
232
  --_btn--size-border-radius: var(--sc-kit--field--border-radius--md);
@@ -231,6 +235,7 @@ Pass `type="anchor"` to render as `<a>` with `href`, or `type="presentational"`
231
235
  --_btn--size-height: 2.5rem;
232
236
  --_btn--size-padding-inline: var(--sc-kit--space--6);
233
237
  --_btn--size-font-size: var(--sc-kit--font-size--lg);
238
+ --_btn--size-line-height: var(--sc-kit--line-height--control--lg);
234
239
  --_btn--size-gap: var(--sc-kit--space--2);
235
240
  --_btn--size-icon-size: var(--sc-kit--field--icon--size--lg);
236
241
  --_btn--size-border-radius: var(--sc-kit--field--border-radius--md);
@@ -74,6 +74,7 @@ checkmark on selected chips.
74
74
  --_cg--height: var(--sc-kit--chip-group--height, 2rem);
75
75
  --_cg--padding-inline: var(--sc-kit--chip-group--padding-inline, 0.875rem);
76
76
  --_cg--font-size: var(--sc-kit--chip-group--font-size, var(--sc-kit--font-size--md));
77
+ --_cg--line-height: var(--_cg--size-line-height, var(--sc-kit--line-height--control--md));
77
78
  --_cg--font-weight: var(--sc-kit--chip-group--font-weight, var(--sc-kit--font-weight--medium));
78
79
  --_cg--background: var(--sc-kit--chip-group--background, var(--sc-kit--color--bg--field));
79
80
  --_cg--background-hover: var(--sc-kit--chip-group--background--hover, var(--sc-kit--color--bg--hover));
@@ -92,14 +93,16 @@ checkmark on selected chips.
92
93
  max-width: 100%;
93
94
  }
94
95
  .chip-group--sm {
95
- --sc-kit--chip-group--height: 1.75rem;
96
+ --sc-kit--chip-group--height: 1.8125rem;
96
97
  --sc-kit--chip-group--padding-inline: 0.75rem;
97
98
  --sc-kit--chip-group--font-size: var(--sc-kit--font-size--sm);
99
+ --_cg--size-line-height: var(--sc-kit--line-height--control--sm);
98
100
  }
99
101
  .chip-group--md {
100
102
  --sc-kit--chip-group--height: 2rem;
101
103
  --sc-kit--chip-group--padding-inline: 0.875rem;
102
104
  --sc-kit--chip-group--font-size: var(--sc-kit--font-size--md);
105
+ --_cg--size-line-height: var(--sc-kit--line-height--control--md);
103
106
  }
104
107
  .chip-group--soft {
105
108
  --sc-kit--chip-group--background--selected: var(--sc-kit--color--accent--soft);
@@ -132,7 +135,7 @@ checkmark on selected chips.
132
135
  font-family: inherit;
133
136
  font-size: var(--_cg--font-size);
134
137
  font-weight: var(--_cg--font-weight);
135
- line-height: var(--sc-kit--leading--tight);
138
+ line-height: var(--_cg--line-height);
136
139
  white-space: nowrap;
137
140
  cursor: pointer;
138
141
  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
@@ -212,6 +212,7 @@ DatePicker — single-day calendar picker built on Floating UI for positioning.
212
212
  --_dp--border-radius: var(--sc-kit--date-picker--border-radius, var(--_dp--size-border-radius, var(--sc-kit--field--border-radius--md)));
213
213
  --_dp--underline-color: var(--sc-kit--date-picker--underline-color, transparent);
214
214
  --_dp--font-size: var(--sc-kit--date-picker--font-size, var(--_dp--size-font-size, var(--sc-kit--font-size--md)));
215
+ --_dp--line-height: var(--_dp--size-line-height, var(--sc-kit--line-height--control--md));
215
216
  --_dp--color: var(--sc-kit--date-picker--color, var(--sc-kit--color--text--primary));
216
217
  --_dp--placeholder-color: var(--sc-kit--date-picker--placeholder--color, var(--sc-kit--color--text--placeholder));
217
218
  --_dp--icon-color: var(--sc-kit--date-picker--icon--color, var(--sc-kit--color--text--muted));
@@ -237,6 +238,7 @@ DatePicker — single-day calendar picker built on Floating UI for positioning.
237
238
  --_dp--size-height: var(--sc-kit--field--height--sm);
238
239
  --_dp--size-padding-inline: var(--sc-kit--field--padding-inline--sm);
239
240
  --_dp--size-font-size: var(--sc-kit--font-size--sm);
241
+ --_dp--size-line-height: var(--sc-kit--line-height--control--sm);
240
242
  --_dp--size-icon-size: var(--sc-kit--field--icon--size--sm);
241
243
  --_dp--size-border-radius: var(--sc-kit--field--border-radius--sm);
242
244
  }
@@ -244,6 +246,7 @@ DatePicker — single-day calendar picker built on Floating UI for positioning.
244
246
  --_dp--size-height: var(--sc-kit--field--height--md);
245
247
  --_dp--size-padding-inline: var(--sc-kit--field--padding-inline--md);
246
248
  --_dp--size-font-size: var(--sc-kit--font-size--md);
249
+ --_dp--size-line-height: var(--sc-kit--line-height--control--md);
247
250
  --_dp--size-icon-size: var(--sc-kit--field--icon--size--md);
248
251
  --_dp--size-border-radius: var(--sc-kit--field--border-radius--md);
249
252
  }
@@ -251,6 +254,7 @@ DatePicker — single-day calendar picker built on Floating UI for positioning.
251
254
  --_dp--size-height: var(--sc-kit--field--height--lg);
252
255
  --_dp--size-padding-inline: var(--sc-kit--field--padding-inline--lg);
253
256
  --_dp--size-font-size: var(--sc-kit--font-size--lg);
257
+ --_dp--size-line-height: var(--sc-kit--line-height--control--lg);
254
258
  --_dp--size-icon-size: var(--sc-kit--field--icon--size--lg);
255
259
  --_dp--size-border-radius: var(--sc-kit--field--border-radius--md);
256
260
  }
@@ -297,7 +301,7 @@ DatePicker — single-day calendar picker built on Floating UI for positioning.
297
301
  color: var(--_dp--color);
298
302
  font-family: inherit;
299
303
  font-size: var(--_dp--font-size);
300
- line-height: var(--sc-kit--leading--tight);
304
+ line-height: var(--_dp--line-height);
301
305
  box-shadow: inset 0 calc(-1 * max(2px, 0.125em)) var(--_dp--underline-color);
302
306
  cursor: pointer;
303
307
  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default), box-shadow var(--sc-kit--duration--base) var(--sc-kit--ease--default);
@@ -41,7 +41,7 @@ const handleClose = () => {
41
41
  onclick={handleClick}
42
42
  onkeydown={on?.keydown}>
43
43
  {#if tab.icon}
44
- <span class="document-tab__icon"><IconSlot icon={tab.icon} fallbacks={{ size: 'sm' }} /></span>
44
+ <span class="document-tab__icon"><IconSlot icon={tab.icon} fallbacks={{ size: 'control-sm' }} /></span>
45
45
  {/if}
46
46
  <span class="document-tab__label">{tab.label}</span>
47
47
  </button>
@@ -84,6 +84,7 @@ const handleClose = () => {
84
84
  max-inline-size: var(--_document-tab--max-width);
85
85
  flex-shrink: 0;
86
86
  padding-inline: var(--_document-tab--padding-inline);
87
+ padding-block-start: 1px;
87
88
  margin-block-end: var(--_document-tab--baseline-overlap);
88
89
  background: var(--_document-tab--background);
89
90
  border: var(--_document-tab--border-width) solid var(--_document-tab--border-color);
@@ -122,6 +123,7 @@ const handleClose = () => {
122
123
  --_document-tab--background: var(--_document-tab--tone-background, var(--sc-kit--document-tabs--background--active, var(--sc-kit--color--bg--panel)));
123
124
  --_document-tab--color: var(--sc-kit--document-tabs--color--active, var(--sc-kit--color--text--primary));
124
125
  margin-block-end: 0;
126
+ padding-block-start: 0;
125
127
  }
126
128
  .document-tab--hoverable:hover {
127
129
  --_document-tab--background: var(--_document-tab--background-hover);
@@ -149,7 +151,7 @@ const handleClose = () => {
149
151
  font-family: inherit;
150
152
  font-size: var(--_document-tab--font-size);
151
153
  font-weight: var(--_document-tab--font-weight);
152
- line-height: var(--sc-kit--leading--tight);
154
+ line-height: var(--sc-kit--line-height--control--sm);
153
155
  cursor: var(--_document-tab--cursor);
154
156
  }
155
157
  .document-tab__button:focus-visible {
@@ -115,7 +115,7 @@ can be embedded directly by input components.
115
115
  width: 100%;
116
116
  height: var(--sc-kit--field--height--sm);
117
117
  font-size: var(--sc-kit--font-size--sm);
118
- line-height: var(--sc-kit--leading--tight);
118
+ line-height: var(--sc-kit--line-height--control--sm);
119
119
  padding: 0 var(--sc-kit--field--padding-inline--md);
120
120
  border: 1px solid var(--_emoji-panel--border-color);
121
121
  border-radius: var(--sc-kit--radius--pill);
@@ -60,6 +60,7 @@ trigger down to the row's own typography and drops its border, so a plain row li
60
60
  --_gcsf--chevron-size: var(--sc-kit--grid-card-select-field--chevron--size, 0.75rem);
61
61
  --sc-kit--select--trigger--height: var(--_gcsf--height);
62
62
  --sc-kit--select--trigger--font-size: var(--_gcsf--font-size);
63
+ --sc-kit--select--trigger--line-height: var(--_gcsf--line-height);
63
64
  --sc-kit--select--trigger--padding-inline: 0;
64
65
  --sc-kit--select--trigger--gap: var(--_gcsf--gap);
65
66
  --sc-kit--select--trigger--icon--size: var(--_gcsf--chevron-size);
@@ -76,7 +76,6 @@ Plus every public CSS variable exposed by `<Input>`.
76
76
  background: var(--_hi--prefix-background);
77
77
  color: var(--_hi--prefix-color);
78
78
  border-inline-end: 1px solid var(--_hi--prefix-border-color);
79
- line-height: var(--sc-kit--leading--tight);
80
79
  user-select: none;
81
80
  white-space: nowrap;
82
81
  }
@@ -60,8 +60,8 @@ Renders an inline SVG icon with configurable size, color presets, and optional s
60
60
  | `icon--md` | `1.25rem` (20px) |
61
61
  | `icon--lg` | `2rem` (32px) |
62
62
  | `icon--xlg` | `3rem` (48px) |
63
- | `icon--control-xs` | `var(--sc-kit--field--icon--size--xs)` (13px) |
64
- | `icon--control-sm` | `var(--sc-kit--field--icon--size--sm)` (14px) |
63
+ | `icon--control-xs` | `var(--sc-kit--field--icon--size--xs)` (14px) |
64
+ | `icon--control-sm` | `var(--sc-kit--field--icon--size--sm)` (15px) |
65
65
  | `icon--control-md` | `var(--sc-kit--field--icon--size--md)` (16px) |
66
66
  | `icon--control-lg` | `var(--sc-kit--field--icon--size--lg)` (18px) |
67
67
  | `icon--control-xl` | `var(--sc-kit--field--icon--size--xl)` (20px) |
@@ -6,7 +6,7 @@ interface Props {
6
6
  color?: IconColor | null;
7
7
  /**
8
8
  * Size preset. Standalone visual weight `sm | md | lg | xlg` = 14 / 20 / 32 / 48 px;
9
- * control-paired `control-xs | control-sm | control-md | control-lg | control-xl` = 13 / 14 / 16 / 18 / 20 px.
9
+ * control-paired `control-xs | control-sm | control-md | control-lg | control-xl` = 14 / 15 / 16 / 18 / 20 px.
10
10
  * Omit to fall through to the CSS cascade (default 1.25rem = 20px).
11
11
  */
12
12
  size?: IconSize | null;
@@ -36,8 +36,8 @@ interface Props {
36
36
  * | `icon--md` | `1.25rem` (20px) |
37
37
  * | `icon--lg` | `2rem` (32px) |
38
38
  * | `icon--xlg` | `3rem` (48px) |
39
- * | `icon--control-xs` | `var(--sc-kit--field--icon--size--xs)` (13px) |
40
- * | `icon--control-sm` | `var(--sc-kit--field--icon--size--sm)` (14px) |
39
+ * | `icon--control-xs` | `var(--sc-kit--field--icon--size--xs)` (14px) |
40
+ * | `icon--control-sm` | `var(--sc-kit--field--icon--size--sm)` (15px) |
41
41
  * | `icon--control-md` | `var(--sc-kit--field--icon--size--md)` (16px) |
42
42
  * | `icon--control-lg` | `var(--sc-kit--field--icon--size--lg)` (18px) |
43
43
  * | `icon--control-xl` | `var(--sc-kit--field--icon--size--xl)` (20px) |
@@ -68,7 +68,7 @@ styling all come from Singleselect.
68
68
  | `--sc-kit--icon-picker--selection--icon--size` | Leading icon size in the trigger selection | `1.125rem` |
69
69
  -->
70
70
  <style>.icon-picker__selection {
71
- display: inline-flex;
71
+ display: flex;
72
72
  align-items: center;
73
73
  gap: var(--sc-kit--space--2);
74
74
  min-width: 0;
@@ -71,16 +71,20 @@ status" dropdown-trigger patterns. Each icon prop accepts a string SVG source, a
71
71
  }
72
72
  .icon-text--sm {
73
73
  --sc-kit--icon-text--text--font-size: var(--sc-kit--font-size--sm);
74
+ --_icon-text--text--line-height: var(--sc-kit--line-height--control--sm);
74
75
  }
75
76
  .icon-text--md {
76
77
  --sc-kit--icon-text--text--font-size: var(--sc-kit--font-size--md);
78
+ --_icon-text--text--line-height: var(--sc-kit--line-height--control--md);
77
79
  }
78
80
  .icon-text--lg {
79
81
  --sc-kit--icon-text--text--font-size: var(--sc-kit--font-size--lg);
82
+ --_icon-text--text--line-height: var(--sc-kit--line-height--control--lg);
80
83
  }
81
84
  .icon-text__text {
82
85
  font-size: var(--_icon-text--text--font-size);
83
86
  display: var(--_icon-text--text--display);
87
+ line-height: var(--_icon-text--text--line-height);
84
88
  }
85
89
  .icon-text__text--trim {
86
90
  display: block;
@@ -11,9 +11,9 @@ type Props = {
11
11
  trimText?: boolean;
12
12
  /** Hide text, showing only the icon(s) */
13
13
  hideText?: boolean;
14
- /** Size preset matching `Button` of the same size — text/icon px: sm 12/14, md 14/16, lg 16/18. Unset: text + icon follow the inherited font size (`1em`). */
14
+ /** Size preset matching `Button` of the same size — text/icon px: sm 12/15, md 14/16, lg 16/18. Unset: text + icon follow the inherited font size (`1em`). */
15
15
  size?: 'sm' | 'md' | 'lg';
16
- /** Bump the icon(s) one step up the scale relative to `size`, text unchanged (sm 14→16, md 16→18, lg 18→20). @default 'default' */
16
+ /** Bump the icon(s) one step up the scale relative to `size`, text unchanged (sm 15→16, md 16→18, lg 18→20). @default 'default' */
17
17
  iconScale?: 'default' | 'large';
18
18
  children?: Snippet;
19
19
  };
@@ -212,6 +212,7 @@ or the clear button (see `HandleInput`'s availability pill).
212
212
  --_in--border-radius: var(--sc-kit--input--border-radius, var(--_in--size-border-radius, var(--sc-kit--field--border-radius--md)));
213
213
  --_in--underline-color: var(--sc-kit--input--underline-color, transparent);
214
214
  --_in--font-size: var(--sc-kit--input--font-size, var(--_in--size-font-size, var(--sc-kit--font-size--md)));
215
+ --_in--line-height: var(--_in--size-line-height, var(--sc-kit--line-height--control--md));
215
216
  --_in--color: var(--sc-kit--input--color, var(--sc-kit--color--text--primary));
216
217
  --_in--placeholder-color: var(--sc-kit--input--placeholder--color, var(--sc-kit--color--text--placeholder));
217
218
  --_in--icon-color: var(--sc-kit--input--icon--color, var(--sc-kit--color--text--muted));
@@ -236,7 +237,7 @@ or the clear button (see `HandleInput`'s availability pill).
236
237
  border-radius: var(--_in--border-radius);
237
238
  color: var(--_in--color);
238
239
  font-size: var(--_in--font-size);
239
- line-height: var(--sc-kit--leading--tight);
240
+ line-height: var(--_in--line-height);
240
241
  cursor: text;
241
242
  position: relative;
242
243
  overflow: hidden;
@@ -256,6 +257,7 @@ or the clear button (see `HandleInput`'s availability pill).
256
257
  --_in--size-height: var(--sc-kit--field--height--sm);
257
258
  --_in--size-padding-inline: var(--sc-kit--field--padding-inline--sm);
258
259
  --_in--size-font-size: var(--sc-kit--font-size--sm);
260
+ --_in--size-line-height: var(--sc-kit--line-height--control--sm);
259
261
  --_in--size-icon-size: var(--sc-kit--field--icon--size--sm);
260
262
  --_in--size-border-radius: var(--sc-kit--field--border-radius--sm);
261
263
  }
@@ -263,6 +265,7 @@ or the clear button (see `HandleInput`'s availability pill).
263
265
  --_in--size-height: var(--sc-kit--field--height--md);
264
266
  --_in--size-padding-inline: var(--sc-kit--field--padding-inline--md);
265
267
  --_in--size-font-size: var(--sc-kit--font-size--md);
268
+ --_in--size-line-height: var(--sc-kit--line-height--control--md);
266
269
  --_in--size-icon-size: var(--sc-kit--field--icon--size--md);
267
270
  --_in--size-border-radius: var(--sc-kit--field--border-radius--md);
268
271
  }
@@ -270,6 +273,7 @@ or the clear button (see `HandleInput`'s availability pill).
270
273
  --_in--size-height: var(--sc-kit--field--height--lg);
271
274
  --_in--size-padding-inline: var(--sc-kit--field--padding-inline--lg);
272
275
  --_in--size-font-size: var(--sc-kit--font-size--lg);
276
+ --_in--size-line-height: var(--sc-kit--line-height--control--lg);
273
277
  --_in--size-icon-size: var(--sc-kit--field--icon--size--lg);
274
278
  --_in--size-border-radius: var(--sc-kit--field--border-radius--md);
275
279
  }
@@ -219,6 +219,7 @@ requires a non-null value. CSS API mirrors `Input` for visual-language compatibi
219
219
  --_ni--border-radius: var(--sc-kit--numeral-input--border-radius, var(--_ni--size-border-radius, var(--sc-kit--field--border-radius--md)));
220
220
  --_ni--underline-color: var(--sc-kit--numeral-input--underline-color, transparent);
221
221
  --_ni--font-size: var(--sc-kit--numeral-input--font-size, var(--_ni--size-font-size, var(--sc-kit--font-size--md)));
222
+ --_ni--line-height: var(--_ni--size-line-height, var(--sc-kit--line-height--control--md));
222
223
  --_ni--color: var(--sc-kit--numeral-input--color, var(--sc-kit--color--text--primary));
223
224
  --_ni--placeholder-color: var(--sc-kit--numeral-input--placeholder--color, var(--sc-kit--color--text--placeholder));
224
225
  --_ni--icon-color: var(--sc-kit--numeral-input--icon--color, var(--sc-kit--color--text--muted));
@@ -243,7 +244,7 @@ requires a non-null value. CSS API mirrors `Input` for visual-language compatibi
243
244
  border-radius: var(--_ni--border-radius);
244
245
  color: var(--_ni--color);
245
246
  font-size: var(--_ni--font-size);
246
- line-height: var(--sc-kit--leading--tight);
247
+ line-height: var(--_ni--line-height);
247
248
  cursor: text;
248
249
  box-shadow: inset 0 calc(-1 * max(2px, 0.125em)) var(--_ni--underline-color);
249
250
  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default), box-shadow var(--sc-kit--duration--base) var(--sc-kit--ease--default);
@@ -252,6 +253,7 @@ requires a non-null value. CSS API mirrors `Input` for visual-language compatibi
252
253
  --_ni--size-height: var(--sc-kit--field--height--sm);
253
254
  --_ni--size-padding-inline: var(--sc-kit--field--padding-inline--sm);
254
255
  --_ni--size-font-size: var(--sc-kit--font-size--sm);
256
+ --_ni--size-line-height: var(--sc-kit--line-height--control--sm);
255
257
  --_ni--size-icon-size: var(--sc-kit--field--icon--size--sm);
256
258
  --_ni--size-border-radius: var(--sc-kit--field--border-radius--sm);
257
259
  }
@@ -259,6 +261,7 @@ requires a non-null value. CSS API mirrors `Input` for visual-language compatibi
259
261
  --_ni--size-height: var(--sc-kit--field--height--md);
260
262
  --_ni--size-padding-inline: var(--sc-kit--field--padding-inline--md);
261
263
  --_ni--size-font-size: var(--sc-kit--font-size--md);
264
+ --_ni--size-line-height: var(--sc-kit--line-height--control--md);
262
265
  --_ni--size-icon-size: var(--sc-kit--field--icon--size--md);
263
266
  --_ni--size-border-radius: var(--sc-kit--field--border-radius--md);
264
267
  }
@@ -266,6 +269,7 @@ requires a non-null value. CSS API mirrors `Input` for visual-language compatibi
266
269
  --_ni--size-height: var(--sc-kit--field--height--lg);
267
270
  --_ni--size-padding-inline: var(--sc-kit--field--padding-inline--lg);
268
271
  --_ni--size-font-size: var(--sc-kit--font-size--lg);
272
+ --_ni--size-line-height: var(--sc-kit--line-height--control--lg);
269
273
  --_ni--size-icon-size: var(--sc-kit--field--icon--size--lg);
270
274
  --_ni--size-border-radius: var(--sc-kit--field--border-radius--md);
271
275
  }
@@ -95,7 +95,7 @@ or `type="multi"` with `value: T[]`. Provide `compare` for non-primitive values.
95
95
  border: 1px solid var(--_op--border-color);
96
96
  border-radius: var(--sc-kit--radius--pill);
97
97
  font-family: inherit;
98
- line-height: var(--sc-kit--leading--tight);
98
+ line-height: var(--sc-kit--line-height--control--md);
99
99
  white-space: nowrap;
100
100
  overflow: hidden;
101
101
  cursor: pointer;
@@ -55,7 +55,7 @@ so they stay visually identical.
55
55
  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
56
56
  }
57
57
  .toolbar-icon-button--sm {
58
- --_tib--size-height: var(--sc-kit--field--height--sm);
58
+ --_tib--size-height: 1.75rem;
59
59
  }
60
60
  .toolbar-icon-button--md {
61
61
  --_tib--size-height: var(--sc-kit--field--height--md);
@@ -77,6 +77,7 @@ these — plus `ToolbarSectionTitle` — inside one panel to build column / fiel
77
77
  --_opt--height: var(--sc-kit--toolbar-option--height, var(--_opt--size-height));
78
78
  --_opt--padding-inline: var(--sc-kit--toolbar-option--padding-inline, var(--_opt--size-padding-inline));
79
79
  --_opt--font-size: var(--sc-kit--toolbar-option--font-size, var(--_opt--size-font-size));
80
+ --_opt--line-height: var(--_opt--size-line-height);
80
81
  --_opt--gap: var(--sc-kit--toolbar-option--gap, var(--sc-kit--space--2));
81
82
  --_opt--border-radius: var(--sc-kit--toolbar-option--border-radius, var(--sc-kit--radius--sm));
82
83
  --_opt--color: var(--sc-kit--toolbar-option--color, var(--sc-kit--color--text--primary));
@@ -102,19 +103,21 @@ these — plus `ToolbarSectionTitle` — inside one panel to build column / fiel
102
103
  border-radius: var(--_opt--border-radius);
103
104
  color: var(--_opt--color);
104
105
  font-size: var(--_opt--font-size);
105
- line-height: var(--sc-kit--leading--tight);
106
+ line-height: var(--_opt--line-height);
106
107
  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
107
108
  }
108
109
  .toolbar-option--sm {
109
110
  --_opt--size-height: var(--sc-kit--field--height--sm);
110
111
  --_opt--size-padding-inline: var(--sc-kit--space--2);
111
112
  --_opt--size-font-size: var(--sc-kit--font-size--sm);
113
+ --_opt--size-line-height: var(--sc-kit--line-height--control--sm);
112
114
  --_opt--size-glyph-size: var(--sc-kit--field--icon--size--sm);
113
115
  }
114
116
  .toolbar-option--md {
115
117
  --_opt--size-height: var(--sc-kit--field--height--md);
116
118
  --_opt--size-padding-inline: var(--sc-kit--space--3);
117
119
  --_opt--size-font-size: var(--sc-kit--font-size--md);
120
+ --_opt--size-line-height: var(--sc-kit--line-height--control--md);
118
121
  --_opt--size-glyph-size: var(--sc-kit--field--icon--size--md);
119
122
  }
120
123
  .toolbar-option:hover {
@@ -6,7 +6,7 @@ declare function $$render<S>(): {
6
6
  value: S;
7
7
  /** Title shown above the options. @default localized `Order by` */
8
8
  label?: string;
9
- /** Button size preset — sm = 28px, md = 32px. @default 'sm' */
9
+ /** Button size preset — sm = 29px, md = 32px. @default 'sm' */
10
10
  size?: "sm" | "md";
11
11
  /** Presentational trigger — `'icon'` (flat icon button), `'button'` (labelled secondary button), or a custom snippet. The popover owns the click and is named by `label`. @default 'icon' */
12
12
  trigger?: "icon" | "button" | Snippet;
@@ -54,16 +54,19 @@ Shares the field-height preset so it lines up with other toolbar controls.
54
54
  .toolbar-value-stepper--sm {
55
55
  --_toolbar-value-stepper--height: var(--sc-kit--field--height--sm);
56
56
  --_toolbar-value-stepper--font-size: var(--sc-kit--font-size--sm);
57
+ --_toolbar-value-stepper--line-height: var(--sc-kit--line-height--control--sm);
57
58
  --_toolbar-value-stepper--border-radius: var(--sc-kit--field--border-radius--sm);
58
59
  }
59
60
  .toolbar-value-stepper--md {
60
61
  --_toolbar-value-stepper--height: var(--sc-kit--field--height--md);
61
62
  --_toolbar-value-stepper--font-size: var(--sc-kit--font-size--md);
63
+ --_toolbar-value-stepper--line-height: var(--sc-kit--line-height--control--md);
62
64
  --_toolbar-value-stepper--border-radius: var(--sc-kit--field--border-radius--md);
63
65
  }
64
66
  .toolbar-value-stepper--lg {
65
67
  --_toolbar-value-stepper--height: var(--sc-kit--field--height--lg);
66
68
  --_toolbar-value-stepper--font-size: var(--sc-kit--font-size--lg);
69
+ --_toolbar-value-stepper--line-height: var(--sc-kit--line-height--control--lg);
67
70
  --_toolbar-value-stepper--border-radius: var(--sc-kit--field--border-radius--md);
68
71
  }
69
72
  .toolbar-value-stepper__btn {
@@ -83,6 +86,7 @@ Shares the field-height preset so it lines up with other toolbar controls.
83
86
  min-inline-size: var(--_toolbar-value-stepper--value--min-inline-size);
84
87
  text-align: center;
85
88
  font-size: var(--_toolbar-value-stepper--font-size);
89
+ line-height: var(--_toolbar-value-stepper--line-height);
86
90
  color: var(--sc-kit--color--text--primary);
87
91
  font-variant-numeric: tabular-nums;
88
92
  }</style>
@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
2
2
  type ViewMode = 'list' | 'grid' | 'card';
3
3
  type Props = {
4
4
  view: ViewMode;
5
- /** Button size preset — sm = 28px, md = 32px. @default 'sm' */
5
+ /** Button size preset — sm = 29px, md = 32px. @default 'sm' */
6
6
  size?: 'sm' | 'md';
7
7
  /** Reveal the `card` view button alongside list / grid. @default false */
8
8
  showCard?: boolean;
@@ -61,6 +61,7 @@ Each segment carries an optional `disabled` flag (non-interactive) and an option
61
61
  <style>.segmented-control {
62
62
  --_sc--height: var(--sc-kit--segmented-control--height, var(--_sc--size-height));
63
63
  --_sc--font-size: var(--sc-kit--segmented-control--font-size, var(--_sc--size-font-size));
64
+ --_sc--line-height: var(--_sc--size-line-height);
64
65
  --_sc--padding-inline: var(--sc-kit--segmented-control--padding-inline, var(--_sc--size-padding-inline));
65
66
  --_sc--radius: var(--sc-kit--segmented-control--border-radius, var(--_sc--size-radius, var(--sc-kit--field--border-radius--md)));
66
67
  --_sc--color: var(--sc-kit--segmented-control--color, var(--sc-kit--color--text--muted));
@@ -83,14 +84,16 @@ Each segment carries an optional `disabled` flag (non-interactive) and an option
83
84
  width: 100%;
84
85
  }
85
86
  .segmented-control--sm {
86
- --_sc--size-height: 1.75rem;
87
+ --_sc--size-height: 1.8125rem;
87
88
  --_sc--size-font-size: var(--sc-kit--font-size--sm);
89
+ --_sc--size-line-height: var(--sc-kit--line-height--control--sm);
88
90
  --_sc--size-padding-inline: 0.625rem;
89
91
  --_sc--size-radius: var(--sc-kit--field--border-radius--sm);
90
92
  }
91
93
  .segmented-control--md {
92
94
  --_sc--size-height: 2rem;
93
95
  --_sc--size-font-size: var(--sc-kit--font-size--md);
96
+ --_sc--size-line-height: var(--sc-kit--line-height--control--md);
94
97
  --_sc--size-padding-inline: 0.75rem;
95
98
  --_sc--size-radius: var(--sc-kit--field--border-radius--md);
96
99
  }
@@ -146,7 +149,7 @@ Each segment carries an optional `disabled` flag (non-interactive) and an option
146
149
  font-family: inherit;
147
150
  font-size: var(--_sc--font-size);
148
151
  font-weight: var(--sc-kit--font-weight--regular);
149
- line-height: var(--sc-kit--leading--tight);
152
+ line-height: var(--_sc--line-height);
150
153
  cursor: pointer;
151
154
  white-space: nowrap;
152
155
  min-width: 0;
@@ -18,6 +18,7 @@
18
18
  --_sel--border-radius: var(--sc-kit--select--trigger--border-radius, var(--_sel--size-border-radius, var(--sc-kit--field--border-radius--md)));
19
19
  --_sel--underline-color: var(--sc-kit--select--trigger--underline-color, transparent);
20
20
  --_sel--font-size: var(--sc-kit--select--trigger--font-size, var(--_sel--size-font-size, var(--sc-kit--font-size--md)));
21
+ --_sel--line-height: var(--sc-kit--select--trigger--line-height, var(--_sel--size-line-height, var(--sc-kit--line-height--control--md)));
21
22
  --_sel--color: var(--sc-kit--select--trigger--color, var(--sc-kit--color--text--primary));
22
23
  --_sel--placeholder-color: var(--sc-kit--select--trigger--placeholder--color, var(--sc-kit--color--text--placeholder));
23
24
  --_sel--icon-color: var(--sc-kit--select--trigger--icon--color, var(--sc-kit--color--text--muted));
@@ -38,7 +39,7 @@
38
39
  border-radius: var(--_sel--border-radius);
39
40
  color: var(--_sel--color);
40
41
  font-size: var(--_sel--font-size);
41
- line-height: var(--sc-kit--leading--tight);
42
+ line-height: var(--_sel--line-height);
42
43
  cursor: pointer;
43
44
  // prevents hairline anti-aliasing
44
45
  box-shadow: inset 0 calc(-1 * max(2px, 0.125em)) var(--_sel--underline-color);
@@ -48,6 +49,7 @@
48
49
  --_sel--size-height: var(--sc-kit--field--height--sm);
49
50
  --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--sm);
50
51
  --_sel--size-font-size: var(--sc-kit--font-size--sm);
52
+ --_sel--size-line-height: var(--sc-kit--line-height--control--sm);
51
53
  --_sel--size-icon-size: var(--sc-kit--field--icon--size--sm);
52
54
  --_sel--size-border-radius: var(--sc-kit--field--border-radius--sm);
53
55
  }
@@ -55,6 +57,7 @@
55
57
  --_sel--size-height: var(--sc-kit--field--height--md);
56
58
  --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--md);
57
59
  --_sel--size-font-size: var(--sc-kit--font-size--md);
60
+ --_sel--size-line-height: var(--sc-kit--line-height--control--md);
58
61
  --_sel--size-icon-size: var(--sc-kit--field--icon--size--md);
59
62
  --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
60
63
  }
@@ -62,6 +65,7 @@
62
65
  --_sel--size-height: var(--sc-kit--field--height--lg);
63
66
  --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--lg);
64
67
  --_sel--size-font-size: var(--sc-kit--font-size--lg);
68
+ --_sel--size-line-height: var(--sc-kit--line-height--control--lg);
65
69
  --_sel--size-icon-size: var(--sc-kit--field--icon--size--lg);
66
70
  --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
67
71
  }
@@ -322,6 +322,7 @@ background--hover}`.
322
322
  --_sel--border-radius: var(--sc-kit--select--trigger--border-radius, var(--_sel--size-border-radius, var(--sc-kit--field--border-radius--md)));
323
323
  --_sel--underline-color: var(--sc-kit--select--trigger--underline-color, transparent);
324
324
  --_sel--font-size: var(--sc-kit--select--trigger--font-size, var(--_sel--size-font-size, var(--sc-kit--font-size--md)));
325
+ --_sel--line-height: var(--sc-kit--select--trigger--line-height, var(--_sel--size-line-height, var(--sc-kit--line-height--control--md)));
325
326
  --_sel--color: var(--sc-kit--select--trigger--color, var(--sc-kit--color--text--primary));
326
327
  --_sel--placeholder-color: var(--sc-kit--select--trigger--placeholder--color, var(--sc-kit--color--text--placeholder));
327
328
  --_sel--icon-color: var(--sc-kit--select--trigger--icon--color, var(--sc-kit--color--text--muted));
@@ -347,7 +348,7 @@ background--hover}`.
347
348
  border-radius: var(--_sel--border-radius);
348
349
  color: var(--_sel--color);
349
350
  font-size: var(--_sel--font-size);
350
- line-height: var(--sc-kit--leading--tight);
351
+ line-height: var(--_sel--line-height);
351
352
  cursor: pointer;
352
353
  box-shadow: inset 0 calc(-1 * max(2px, 0.125em)) var(--_sel--underline-color);
353
354
  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default), box-shadow var(--sc-kit--duration--base) var(--sc-kit--ease--default);
@@ -356,6 +357,7 @@ background--hover}`.
356
357
  --_sel--size-height: var(--sc-kit--field--height--sm);
357
358
  --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--sm);
358
359
  --_sel--size-font-size: var(--sc-kit--font-size--sm);
360
+ --_sel--size-line-height: var(--sc-kit--line-height--control--sm);
359
361
  --_sel--size-icon-size: var(--sc-kit--field--icon--size--sm);
360
362
  --_sel--size-border-radius: var(--sc-kit--field--border-radius--sm);
361
363
  }
@@ -363,6 +365,7 @@ background--hover}`.
363
365
  --_sel--size-height: var(--sc-kit--field--height--md);
364
366
  --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--md);
365
367
  --_sel--size-font-size: var(--sc-kit--font-size--md);
368
+ --_sel--size-line-height: var(--sc-kit--line-height--control--md);
366
369
  --_sel--size-icon-size: var(--sc-kit--field--icon--size--md);
367
370
  --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
368
371
  }
@@ -370,6 +373,7 @@ background--hover}`.
370
373
  --_sel--size-height: var(--sc-kit--field--height--lg);
371
374
  --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--lg);
372
375
  --_sel--size-font-size: var(--sc-kit--font-size--lg);
376
+ --_sel--size-line-height: var(--sc-kit--line-height--control--lg);
373
377
  --_sel--size-icon-size: var(--sc-kit--field--icon--size--lg);
374
378
  --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
375
379
  }
@@ -191,6 +191,7 @@ background--hover}`.
191
191
  --_sel--border-radius: var(--sc-kit--select--trigger--border-radius, var(--_sel--size-border-radius, var(--sc-kit--field--border-radius--md)));
192
192
  --_sel--underline-color: var(--sc-kit--select--trigger--underline-color, transparent);
193
193
  --_sel--font-size: var(--sc-kit--select--trigger--font-size, var(--_sel--size-font-size, var(--sc-kit--font-size--md)));
194
+ --_sel--line-height: var(--sc-kit--select--trigger--line-height, var(--_sel--size-line-height, var(--sc-kit--line-height--control--md)));
194
195
  --_sel--color: var(--sc-kit--select--trigger--color, var(--sc-kit--color--text--primary));
195
196
  --_sel--placeholder-color: var(--sc-kit--select--trigger--placeholder--color, var(--sc-kit--color--text--placeholder));
196
197
  --_sel--icon-color: var(--sc-kit--select--trigger--icon--color, var(--sc-kit--color--text--muted));
@@ -216,7 +217,7 @@ background--hover}`.
216
217
  border-radius: var(--_sel--border-radius);
217
218
  color: var(--_sel--color);
218
219
  font-size: var(--_sel--font-size);
219
- line-height: var(--sc-kit--leading--tight);
220
+ line-height: var(--_sel--line-height);
220
221
  cursor: pointer;
221
222
  box-shadow: inset 0 calc(-1 * max(2px, 0.125em)) var(--_sel--underline-color);
222
223
  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default), box-shadow var(--sc-kit--duration--base) var(--sc-kit--ease--default);
@@ -225,6 +226,7 @@ background--hover}`.
225
226
  --_sel--size-height: var(--sc-kit--field--height--sm);
226
227
  --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--sm);
227
228
  --_sel--size-font-size: var(--sc-kit--font-size--sm);
229
+ --_sel--size-line-height: var(--sc-kit--line-height--control--sm);
228
230
  --_sel--size-icon-size: var(--sc-kit--field--icon--size--sm);
229
231
  --_sel--size-border-radius: var(--sc-kit--field--border-radius--sm);
230
232
  }
@@ -232,6 +234,7 @@ background--hover}`.
232
234
  --_sel--size-height: var(--sc-kit--field--height--md);
233
235
  --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--md);
234
236
  --_sel--size-font-size: var(--sc-kit--font-size--md);
237
+ --_sel--size-line-height: var(--sc-kit--line-height--control--md);
235
238
  --_sel--size-icon-size: var(--sc-kit--field--icon--size--md);
236
239
  --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
237
240
  }
@@ -239,6 +242,7 @@ background--hover}`.
239
242
  --_sel--size-height: var(--sc-kit--field--height--lg);
240
243
  --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--lg);
241
244
  --_sel--size-font-size: var(--sc-kit--font-size--lg);
245
+ --_sel--size-line-height: var(--sc-kit--line-height--control--lg);
242
246
  --_sel--size-icon-size: var(--sc-kit--field--icon--size--lg);
243
247
  --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
244
248
  }
@@ -405,6 +405,7 @@ padding-inline, font-size, gap, max-width, remove-color, remove-color--hover}`.
405
405
  --_sel--border-radius: var(--sc-kit--select--trigger--border-radius, var(--_sel--size-border-radius, var(--sc-kit--field--border-radius--md)));
406
406
  --_sel--underline-color: var(--sc-kit--select--trigger--underline-color, transparent);
407
407
  --_sel--font-size: var(--sc-kit--select--trigger--font-size, var(--_sel--size-font-size, var(--sc-kit--font-size--md)));
408
+ --_sel--line-height: var(--sc-kit--select--trigger--line-height, var(--_sel--size-line-height, var(--sc-kit--line-height--control--md)));
408
409
  --_sel--color: var(--sc-kit--select--trigger--color, var(--sc-kit--color--text--primary));
409
410
  --_sel--placeholder-color: var(--sc-kit--select--trigger--placeholder--color, var(--sc-kit--color--text--placeholder));
410
411
  --_sel--icon-color: var(--sc-kit--select--trigger--icon--color, var(--sc-kit--color--text--muted));
@@ -430,7 +431,7 @@ padding-inline, font-size, gap, max-width, remove-color, remove-color--hover}`.
430
431
  border-radius: var(--_sel--border-radius);
431
432
  color: var(--_sel--color);
432
433
  font-size: var(--_sel--font-size);
433
- line-height: var(--sc-kit--leading--tight);
434
+ line-height: var(--_sel--line-height);
434
435
  cursor: pointer;
435
436
  box-shadow: inset 0 calc(-1 * max(2px, 0.125em)) var(--_sel--underline-color);
436
437
  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default), box-shadow var(--sc-kit--duration--base) var(--sc-kit--ease--default);
@@ -439,6 +440,7 @@ padding-inline, font-size, gap, max-width, remove-color, remove-color--hover}`.
439
440
  --_sel--size-height: var(--sc-kit--field--height--sm);
440
441
  --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--sm);
441
442
  --_sel--size-font-size: var(--sc-kit--font-size--sm);
443
+ --_sel--size-line-height: var(--sc-kit--line-height--control--sm);
442
444
  --_sel--size-icon-size: var(--sc-kit--field--icon--size--sm);
443
445
  --_sel--size-border-radius: var(--sc-kit--field--border-radius--sm);
444
446
  }
@@ -446,6 +448,7 @@ padding-inline, font-size, gap, max-width, remove-color, remove-color--hover}`.
446
448
  --_sel--size-height: var(--sc-kit--field--height--md);
447
449
  --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--md);
448
450
  --_sel--size-font-size: var(--sc-kit--font-size--md);
451
+ --_sel--size-line-height: var(--sc-kit--line-height--control--md);
449
452
  --_sel--size-icon-size: var(--sc-kit--field--icon--size--md);
450
453
  --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
451
454
  }
@@ -453,6 +456,7 @@ padding-inline, font-size, gap, max-width, remove-color, remove-color--hover}`.
453
456
  --_sel--size-height: var(--sc-kit--field--height--lg);
454
457
  --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--lg);
455
458
  --_sel--size-font-size: var(--sc-kit--font-size--lg);
459
+ --_sel--size-line-height: var(--sc-kit--line-height--control--lg);
456
460
  --_sel--size-icon-size: var(--sc-kit--field--icon--size--lg);
457
461
  --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
458
462
  }
@@ -138,6 +138,7 @@ Optionally renders the current value, a numeric input alongside the track, and t
138
138
  padding: 0 var(--sc-kit--space--2);
139
139
  text-align: center;
140
140
  font-size: var(--sc-kit--font-size--sm);
141
+ line-height: var(--sc-kit--line-height--control--sm);
141
142
  font-variant-numeric: tabular-nums;
142
143
  background: var(--sc-kit--color--bg--field);
143
144
  border: 1px solid var(--sc-kit--color--border--field);
@@ -25,6 +25,7 @@ export {};
25
25
  <style>.tab {
26
26
  --_tab--height: var(--sc-kit--tabs--height, var(--_tab--size-height));
27
27
  --_tab--font-size: var(--sc-kit--tabs--font-size, var(--_tab--size-font-size));
28
+ --_tab--line-height: var(--_tab--size-line-height, var(--sc-kit--line-height--control--md));
28
29
  --_tab--font-weight: var(--sc-kit--tabs--font-weight, var(--_tab--size-font-weight));
29
30
  --_tab--padding-inline: var(--sc-kit--tabs--padding-inline, var(--_tab--size-padding-inline));
30
31
  --_tab--radius: var(--sc-kit--tabs--radius, var(--sc-kit--radius--sm));
@@ -48,21 +49,23 @@ export {};
48
49
  font-family: inherit;
49
50
  font-size: var(--_tab--font-size);
50
51
  font-weight: var(--_tab--font-weight);
51
- line-height: var(--sc-kit--leading--tight);
52
+ line-height: var(--_tab--line-height);
52
53
  cursor: pointer;
53
54
  white-space: nowrap;
54
55
  min-width: 0;
55
56
  transition: color var(--sc-kit--duration--base) var(--sc-kit--ease--default), background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
56
57
  }
57
58
  .tab--sm {
58
- --_tab--size-height: 1.75rem;
59
+ --_tab--size-height: 1.8125rem;
59
60
  --_tab--size-font-size: var(--sc-kit--font-size--sm);
61
+ --_tab--size-line-height: var(--sc-kit--line-height--control--sm);
60
62
  --_tab--size-font-weight: var(--sc-kit--font-weight--regular);
61
63
  --_tab--size-padding-inline: 0.625rem;
62
64
  }
63
65
  .tab--md {
64
66
  --_tab--size-height: 2.25rem;
65
67
  --_tab--size-font-size: var(--sc-kit--font-size--md);
68
+ --_tab--size-line-height: var(--sc-kit--line-height--control--md);
66
69
  --_tab--size-font-weight: var(--sc-kit--font-weight--medium);
67
70
  --_tab--size-padding-inline: 0.875rem;
68
71
  }
@@ -118,7 +118,6 @@ Plus every public CSS variable exposed by `<Input>`.
118
118
  background: var(--_ui--scheme-background);
119
119
  color: var(--_ui--scheme-color);
120
120
  border-inline-end: 1px solid var(--_ui--scheme-border-color);
121
- line-height: var(--sc-kit--leading--tight);
122
121
  user-select: none;
123
122
  white-space: nowrap;
124
123
  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
@@ -64,7 +64,6 @@ Plus every public CSS variable exposed by `<Input>`.
64
64
  background: var(--_wi--prefix-background);
65
65
  color: var(--_wi--prefix-color);
66
66
  border-inline-end: 1px solid var(--_wi--prefix-border-color);
67
- line-height: var(--sc-kit--leading--tight);
68
67
  user-select: none;
69
68
  white-space: nowrap;
70
69
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@streamscloud/kit",
3
- "version": "0.47.0",
3
+ "version": "0.48.0",
4
4
  "author": "StreamsCloud",
5
5
  "repository": {
6
6
  "type": "git",