@viasat/beam-styles 2.30.0 → 2.36.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.
- package/components/actionList.module.scss +4 -0
- package/components/dateField.module.scss +146 -0
- package/components/floatingui.module.scss +11 -0
- package/components/index.scss +1 -0
- package/components/panel.module.scss +45 -27
- package/components/slider.module.scss +1 -1
- package/package.json +1 -1
- package/styles.css +828 -397
- package/styles.css.map +1 -1
- package/styles.min.css +9 -9
- package/styles.min.css.map +1 -1
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
@use 'sass:map';
|
|
2
|
+
@use '../utils/constants.scss';
|
|
3
|
+
@use '../utils/mixins.scss' as mixins;
|
|
4
|
+
@use '../utils/tokens.scss' as tokens;
|
|
5
|
+
@use '../utils/cursors.scss' as cursors;
|
|
6
|
+
|
|
7
|
+
@import '@viasat/beam-tokens/components/Input';
|
|
8
|
+
|
|
9
|
+
$dateFieldBaseClass: '#{constants.$prefix}date-field';
|
|
10
|
+
|
|
11
|
+
$dateFieldCursor: '--#{constants.$prefix}date-field-cursor';
|
|
12
|
+
$dateFieldInputCursor: '--#{constants.$prefix}date-field-input-cursor';
|
|
13
|
+
|
|
14
|
+
$labelSpaceBottom: '--#{constants.$prefix}label-space-bottom';
|
|
15
|
+
$helperTextSpaceTop: '--#{constants.$prefix}helper-text-space-top';
|
|
16
|
+
|
|
17
|
+
$stateStyleTokens: (
|
|
18
|
+
error: (
|
|
19
|
+
color: tokens.$bm-comp-input-color-text,
|
|
20
|
+
backgroundColor: tokens.$bm-comp-input-color-bg,
|
|
21
|
+
borderColor: tokens.$bm-comp-input-color-border-error,
|
|
22
|
+
placeholderColor: tokens.$bm-comp-input-color-text-placeholder,
|
|
23
|
+
),
|
|
24
|
+
read-only: (
|
|
25
|
+
color: tokens.$bm-comp-input-color-text,
|
|
26
|
+
backgroundColor: tokens.$bm-comp-input-color-bg-disabled,
|
|
27
|
+
borderColor: tokens.$bm-comp-input-color-border-disabled,
|
|
28
|
+
placeholderColor: tokens.$bm-comp-input-color-text-placeholder,
|
|
29
|
+
),
|
|
30
|
+
disabled: (
|
|
31
|
+
color: tokens.$bm-comp-input-color-text-disabled,
|
|
32
|
+
backgroundColor: tokens.$bm-comp-input-color-bg-disabled,
|
|
33
|
+
borderColor: tokens.$bm-comp-input-color-border-disabled,
|
|
34
|
+
placeholderColor: tokens.$bm-comp-input-color-text-disabled,
|
|
35
|
+
),
|
|
36
|
+
);
|
|
37
|
+
|
|
38
|
+
.#{$dateFieldBaseClass} {
|
|
39
|
+
@include cursors.applyTextCursors();
|
|
40
|
+
max-width: tokens.$bm-comp-input-size-field-width;
|
|
41
|
+
|
|
42
|
+
#{$labelSpaceBottom}: #{tokens.$bm-comp-label-space-bottom};
|
|
43
|
+
#{$helperTextSpaceTop}: #{tokens.$bm-comp-helper-text-space-top};
|
|
44
|
+
|
|
45
|
+
@each $state, $styleTokens in $stateStyleTokens {
|
|
46
|
+
&--#{$state} &__field {
|
|
47
|
+
border-color: map.get($styleTokens, borderColor);
|
|
48
|
+
background-color: map.get($styleTokens, backgroundColor);
|
|
49
|
+
|
|
50
|
+
@if ($state == error) {
|
|
51
|
+
@include mixins.simulated-inset-outline(
|
|
52
|
+
tokens.$bm-comp-input-border-width-field-error,
|
|
53
|
+
solid,
|
|
54
|
+
map.get($styleTokens, borderColor),
|
|
55
|
+
calc(0px - #{tokens.$bm-comp-input-border-width-field-error})
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
&--#{$state} &__field &__segment {
|
|
61
|
+
color: map.get($styleTokens, color);
|
|
62
|
+
|
|
63
|
+
&[data-placeholder='true'] {
|
|
64
|
+
color: map.get($styleTokens, placeholderColor);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
&--fluid {
|
|
70
|
+
max-width: 100%;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
&__field {
|
|
74
|
+
display: flex;
|
|
75
|
+
flex-wrap: nowrap;
|
|
76
|
+
align-items: center;
|
|
77
|
+
box-sizing: border-box;
|
|
78
|
+
position: relative;
|
|
79
|
+
|
|
80
|
+
border-style: solid;
|
|
81
|
+
border-color: tokens.$bm-comp-input-color-border;
|
|
82
|
+
border-radius: tokens.$bm-comp-input-radius-field;
|
|
83
|
+
border-width: tokens.$bm-comp-input-border-width-field-default;
|
|
84
|
+
|
|
85
|
+
gap: tokens.$bm-comp-input-space-field-gap;
|
|
86
|
+
box-shadow: tokens.$bm-comp-input-shadow-field;
|
|
87
|
+
background-color: tokens.$bm-comp-input-color-bg;
|
|
88
|
+
height: tokens.$bm-comp-input-size-field-md-height;
|
|
89
|
+
padding-block: tokens.$bm-comp-input-space-field-y;
|
|
90
|
+
padding-inline: tokens.$bm-comp-input-space-field-x;
|
|
91
|
+
|
|
92
|
+
&:focus-within {
|
|
93
|
+
@include mixins.simulated-inset-outline(
|
|
94
|
+
tokens.$bm-sem-border-width-focus,
|
|
95
|
+
solid,
|
|
96
|
+
tokens.$bm-sem-color-border-focus,
|
|
97
|
+
calc(0px - #{tokens.$bm-sem-size-focus-offset})
|
|
98
|
+
);
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
&__field &__segments {
|
|
103
|
+
display: inline-flex;
|
|
104
|
+
align-items: baseline;
|
|
105
|
+
color: tokens.$bm-comp-input-color-text;
|
|
106
|
+
font: tokens.$bm-comp-input-typo-default;
|
|
107
|
+
font-variant-numeric: tabular-nums;
|
|
108
|
+
gap: tokens.$bm-sem-space-12;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
&__field &__segment {
|
|
112
|
+
display: inline-block;
|
|
113
|
+
box-sizing: border-box;
|
|
114
|
+
min-inline-size: 2ch;
|
|
115
|
+
text-align: center;
|
|
116
|
+
outline: none;
|
|
117
|
+
|
|
118
|
+
border-bottom: tokens.$bm-sem-border-width-focus solid transparent;
|
|
119
|
+
|
|
120
|
+
&[data-segment='year'] {
|
|
121
|
+
min-inline-size: 4ch;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
&[data-placeholder='true'] {
|
|
125
|
+
color: tokens.$bm-comp-input-color-text-placeholder;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
// Both `[data-active]` and `:focus-visible` paint the indicator so the
|
|
129
|
+
// focus signal stays visible even when AT virtual-cursor navigation
|
|
130
|
+
// triggers focus outside the state-machine path (per tamaral feedback).
|
|
131
|
+
&[data-active='true'],
|
|
132
|
+
&:focus-visible {
|
|
133
|
+
border-bottom-color: tokens.$bm-sem-color-border-focus;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
&::selection {
|
|
137
|
+
background-color: tokens.$bm-sem-color-surface-info-primary;
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
&__field &__separator {
|
|
142
|
+
color: tokens.$bm-comp-input-color-text;
|
|
143
|
+
font: tokens.$bm-comp-input-typo-default;
|
|
144
|
+
user-select: none;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
@@ -39,5 +39,16 @@ $floatingBaseClass: '#{constants.$prefix}floatingui';
|
|
|
39
39
|
&--transparent {
|
|
40
40
|
background: transparent;
|
|
41
41
|
}
|
|
42
|
+
|
|
43
|
+
// FloatingUI applies position:fixed as an inline style; !important is required to
|
|
44
|
+
// override it when the backdrop is scoped inside a container (contained Panel).
|
|
45
|
+
// Targets the Panel `--contained` modifier. If that modifier is renamed in
|
|
46
|
+
// panel.module.scss, update this selector to match.
|
|
47
|
+
&:has(.#{constants.$prefix}panel--contained) {
|
|
48
|
+
position: absolute !important;
|
|
49
|
+
inset: 0;
|
|
50
|
+
// Clip slide transforms without creating a scroll container.
|
|
51
|
+
overflow: clip !important;
|
|
52
|
+
}
|
|
42
53
|
}
|
|
43
54
|
}
|
package/components/index.scss
CHANGED
|
@@ -8,15 +8,14 @@
|
|
|
8
8
|
$panelBaseClass: '#{constants.$prefix}panel';
|
|
9
9
|
$panelOffsetXVar: '--#{constants.$prefix}comp-panel-offset-x';
|
|
10
10
|
$panelOffsetYVar: '--#{constants.$prefix}comp-panel-offset-y';
|
|
11
|
+
$panelSizeVar: '--#{constants.$prefix}comp-panel-size';
|
|
11
12
|
$panel-transition-duration: 0.4s;
|
|
12
13
|
$panel-max-height: 90dvh;
|
|
13
|
-
$panel-full-height: 100dvh;
|
|
14
14
|
|
|
15
15
|
$panel-sizes: (
|
|
16
16
|
'sm': tokens.$bm-comp-panel-size-sm,
|
|
17
17
|
'md': tokens.$bm-comp-panel-size-md,
|
|
18
18
|
'lg': tokens.$bm-comp-panel-size-lg,
|
|
19
|
-
'full': 100%,
|
|
20
19
|
);
|
|
21
20
|
|
|
22
21
|
.#{$panelBaseClass} {
|
|
@@ -42,29 +41,28 @@ $panel-sizes: (
|
|
|
42
41
|
left: 0;
|
|
43
42
|
top: 0;
|
|
44
43
|
bottom: 0;
|
|
44
|
+
// Cap to the viewport so the panel never bleeds off a screen narrower than its size.
|
|
45
|
+
width: min(var(#{$panelSizeVar}, #{tokens.$bm-comp-panel-size-md}), 100dvw);
|
|
45
46
|
}
|
|
46
47
|
|
|
47
48
|
&.#{$panelBaseClass}--position-end {
|
|
48
49
|
right: 0;
|
|
49
50
|
top: 0;
|
|
50
51
|
bottom: 0;
|
|
52
|
+
// Cap to the viewport so the panel never bleeds off a screen narrower than its size.
|
|
53
|
+
width: min(var(#{$panelSizeVar}, #{tokens.$bm-comp-panel-size-md}), 100dvw);
|
|
51
54
|
}
|
|
52
55
|
|
|
53
56
|
&.#{$panelBaseClass}--position-bottom {
|
|
54
57
|
bottom: 0;
|
|
55
58
|
left: 0;
|
|
56
59
|
right: 0;
|
|
57
|
-
height: auto;
|
|
58
|
-
max-height: $panel-max-height;
|
|
59
|
-
|
|
60
|
-
&.#{$panelBaseClass}--size-full {
|
|
61
|
-
max-height: none;
|
|
62
|
-
height: $panel-full-height;
|
|
63
|
-
}
|
|
60
|
+
height: var(#{$panelSizeVar}, auto);
|
|
61
|
+
max-height: var(#{$panelSizeVar}, #{$panel-max-height});
|
|
64
62
|
}
|
|
65
63
|
|
|
66
|
-
&.#{$panelBaseClass}--
|
|
67
|
-
|
|
64
|
+
&.#{$panelBaseClass}--contained {
|
|
65
|
+
position: absolute;
|
|
68
66
|
}
|
|
69
67
|
|
|
70
68
|
&.#{$panelBaseClass}--floating {
|
|
@@ -97,20 +95,22 @@ $panel-sizes: (
|
|
|
97
95
|
|
|
98
96
|
@if $position == 'bottom' {
|
|
99
97
|
width: auto;
|
|
98
|
+
} @else {
|
|
99
|
+
// Floating start/end sit inset by the offset; cap to the viewport minus both
|
|
100
|
+
// offsets so the panel still fits (with its gap) on screens narrower than its size.
|
|
101
|
+
width: min(
|
|
102
|
+
var(#{$panelSizeVar}, #{tokens.$bm-comp-panel-size-md}),
|
|
103
|
+
100dvw - 2 * var(#{$panelOffsetXVar}, 1rem)
|
|
104
|
+
);
|
|
100
105
|
}
|
|
101
106
|
}
|
|
102
107
|
}
|
|
103
|
-
|
|
104
|
-
&.#{$panelBaseClass}--position-full {
|
|
105
|
-
inset: var(#{$panelOffsetYVar}, 1rem) var(#{$panelOffsetXVar}, 1rem);
|
|
106
|
-
width: auto;
|
|
107
|
-
}
|
|
108
108
|
}
|
|
109
109
|
}
|
|
110
110
|
|
|
111
111
|
@each $size, $width in $panel-sizes {
|
|
112
112
|
&--size-#{$size} {
|
|
113
|
-
|
|
113
|
+
#{$panelSizeVar}: $width;
|
|
114
114
|
}
|
|
115
115
|
}
|
|
116
116
|
|
|
@@ -291,6 +291,18 @@ $panel-sizes: (
|
|
|
291
291
|
&--inline#{&}--resizable {
|
|
292
292
|
width: 100%;
|
|
293
293
|
}
|
|
294
|
+
|
|
295
|
+
// Inline bottom: let --bm-comp-panel-size drive height (overrides shared height: auto).
|
|
296
|
+
// No max-height cap here — inline panels are bounded by their flex container, not the viewport
|
|
297
|
+
// (unlike overlay bottom which applies a 90dvh soft cap via $panel-max-height).
|
|
298
|
+
&--inline#{&}--position-bottom {
|
|
299
|
+
height: var(#{$panelSizeVar}, auto);
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
// Pin start/end inline content while the wrapper animates width.
|
|
303
|
+
&--inline:not(#{&}--resizable):not(#{&}--position-bottom) {
|
|
304
|
+
width: var(#{$panelSizeVar}, #{tokens.$bm-comp-panel-size-md});
|
|
305
|
+
}
|
|
294
306
|
}
|
|
295
307
|
|
|
296
308
|
$panelResizeHandleSize: 0.75rem;
|
|
@@ -325,9 +337,11 @@ $resize-handle-positions: (
|
|
|
325
337
|
&[data-status='open'] {
|
|
326
338
|
transition: $prop $duration ease-out;
|
|
327
339
|
#{$prop}: $visible;
|
|
340
|
+
@media (prefers-reduced-motion: reduce) { transition: none; }
|
|
328
341
|
}
|
|
329
342
|
&[data-status='close'] {
|
|
330
343
|
transition: $prop $duration ease-in;
|
|
344
|
+
@media (prefers-reduced-motion: reduce) { transition: none; }
|
|
331
345
|
}
|
|
332
346
|
}
|
|
333
347
|
|
|
@@ -343,42 +357,46 @@ $resize-handle-positions: (
|
|
|
343
357
|
@include panel-slide(transform, translateY(100%), translateY(0));
|
|
344
358
|
}
|
|
345
359
|
|
|
346
|
-
.#{$panelBaseClass}--overlay[data-position='full'] {
|
|
347
|
-
@include panel-slide(opacity, 0, 1, $panel-transition-duration);
|
|
348
|
-
}
|
|
349
|
-
|
|
350
360
|
.#{$panelBaseClass}__inline-wrapper {
|
|
351
361
|
overflow: hidden;
|
|
352
362
|
flex-shrink: 0;
|
|
353
363
|
|
|
364
|
+
@each $size, $token in $panel-sizes {
|
|
365
|
+
&--size-#{$size} {
|
|
366
|
+
#{$panelSizeVar}: $token;
|
|
367
|
+
}
|
|
368
|
+
}
|
|
369
|
+
|
|
354
370
|
&[data-status] {
|
|
355
371
|
width: 0;
|
|
356
372
|
transition: width $panel-transition-duration ease-in;
|
|
373
|
+
@media (prefers-reduced-motion: reduce) { transition: none; }
|
|
357
374
|
}
|
|
358
375
|
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
}
|
|
376
|
+
&[data-status='open'] {
|
|
377
|
+
width: var(#{$panelSizeVar}, #{tokens.$bm-comp-panel-size-md});
|
|
378
|
+
transition: width $panel-transition-duration ease-out;
|
|
379
|
+
@media (prefers-reduced-motion: reduce) { transition: none; }
|
|
364
380
|
}
|
|
365
381
|
|
|
366
382
|
&[data-position='bottom'][data-status] {
|
|
367
383
|
width: 100%;
|
|
384
|
+
transition: none; // bottom animates via translateY on the content, not width
|
|
368
385
|
}
|
|
369
386
|
|
|
370
387
|
&[data-position='bottom'][data-status]
|
|
371
388
|
.#{$panelBaseClass}__inline-wrapper-content {
|
|
372
389
|
transform: translateY(100%);
|
|
373
390
|
transition: transform $panel-transition-duration ease-in;
|
|
391
|
+
@media (prefers-reduced-motion: reduce) { transition: none; }
|
|
374
392
|
}
|
|
375
393
|
|
|
376
394
|
&[data-position='bottom'][data-status='open']
|
|
377
395
|
.#{$panelBaseClass}__inline-wrapper-content {
|
|
378
396
|
transform: translateY(0);
|
|
379
397
|
transition: transform $panel-transition-duration ease-out;
|
|
398
|
+
@media (prefers-reduced-motion: reduce) { transition: none; }
|
|
380
399
|
}
|
|
381
|
-
|
|
382
400
|
}
|
|
383
401
|
|
|
384
402
|
.#{$panelBaseClass}__inline-wrapper-content {
|
|
@@ -168,7 +168,7 @@ $sliderTransitionDuration: 0.05s;
|
|
|
168
168
|
}
|
|
169
169
|
|
|
170
170
|
&__thumb:focus-visible {
|
|
171
|
-
outline-color: tokens.$bm-
|
|
171
|
+
outline-color: tokens.$bm-alias-color-ramp-accent-base;
|
|
172
172
|
box-shadow: 0 0 0 tokens.$bm-sem-border-width-focus
|
|
173
173
|
tokens.$bm-sem-color-surface-01,
|
|
174
174
|
0 0 0
|