@viasat/beam-styles 2.67.1 → 2.69.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/dateField.module.scss +37 -7
- package/package.json +1 -1
- package/styles.css +54 -6
- package/styles.css.map +1 -1
- package/styles.min.css +1 -1
- package/styles.min.css.map +1 -1
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
@use '../utils/mixins.scss' as mixins;
|
|
4
4
|
@use '../utils/tokens.scss' as tokens;
|
|
5
5
|
@use '../utils/cursors.scss' as cursors;
|
|
6
|
+
@use './input.vars.scss' as inputVars;
|
|
6
7
|
|
|
7
8
|
@import '@viasat/beam-tokens/components/Input';
|
|
8
9
|
|
|
@@ -42,6 +43,8 @@ $stateStyleTokens: (
|
|
|
42
43
|
#{$labelSpaceBottom}: #{tokens.$bm-comp-label-space-bottom};
|
|
43
44
|
#{$helperTextSpaceTop}: #{tokens.$bm-comp-helper-text-space-top};
|
|
44
45
|
|
|
46
|
+
@include inputVars.field-size-scale;
|
|
47
|
+
|
|
45
48
|
@each $state, $styleTokens in $stateStyleTokens {
|
|
46
49
|
&--#{$state} &__field {
|
|
47
50
|
border-color: map.get($styleTokens, borderColor);
|
|
@@ -64,12 +67,30 @@ $stateStyleTokens: (
|
|
|
64
67
|
color: map.get($styleTokens, placeholderColor);
|
|
65
68
|
}
|
|
66
69
|
}
|
|
70
|
+
|
|
71
|
+
// Separators sit outside the segments, so they need the state colour too —
|
|
72
|
+
// otherwise a disabled field shows full-contrast `/` marks between its
|
|
73
|
+
// greyed-out digits.
|
|
74
|
+
&--#{$state} &__field &__separator {
|
|
75
|
+
color: map.get($styleTokens, color);
|
|
76
|
+
|
|
77
|
+
&[data-placeholder='true'] {
|
|
78
|
+
color: map.get($styleTokens, placeholderColor);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
67
81
|
}
|
|
68
82
|
|
|
69
83
|
&--fluid {
|
|
70
84
|
max-width: 100%;
|
|
71
85
|
}
|
|
72
86
|
|
|
87
|
+
// The field is a `div`, so — unlike a natively disabled `<input>` — it keeps
|
|
88
|
+
// the text caret unless the interaction cursors are swapped here.
|
|
89
|
+
&--disabled {
|
|
90
|
+
#{$dateFieldCursor}: not-allowed;
|
|
91
|
+
#{$dateFieldInputCursor}: not-allowed;
|
|
92
|
+
}
|
|
93
|
+
|
|
73
94
|
&__field {
|
|
74
95
|
display: flex;
|
|
75
96
|
flex-wrap: nowrap;
|
|
@@ -85,11 +106,15 @@ $stateStyleTokens: (
|
|
|
85
106
|
gap: tokens.$bm-comp-input-space-field-gap;
|
|
86
107
|
box-shadow: tokens.$bm-comp-input-shadow-field;
|
|
87
108
|
background-color: tokens.$bm-comp-input-color-bg;
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
padding-
|
|
91
|
-
|
|
92
|
-
|
|
109
|
+
cursor: var(#{$dateFieldCursor}, default);
|
|
110
|
+
height: var(#{inputVars.$fieldHeight});
|
|
111
|
+
padding-block: var(#{inputVars.$fieldPaddingY});
|
|
112
|
+
padding-inline: var(#{inputVars.$fieldPaddingX});
|
|
113
|
+
|
|
114
|
+
// Gated on the field being enabled: the root carries `tabindex="-1"` when
|
|
115
|
+
// disabled, which only excludes it from Tab — a click still focuses it, so
|
|
116
|
+
// an ungated `:focus-within` rings a disabled field.
|
|
117
|
+
&:not([aria-disabled='true']):focus-within {
|
|
93
118
|
@include mixins.simulated-inset-outline(
|
|
94
119
|
tokens.$bm-sem-border-width-focus,
|
|
95
120
|
solid,
|
|
@@ -103,7 +128,7 @@ $stateStyleTokens: (
|
|
|
103
128
|
display: inline-flex;
|
|
104
129
|
align-items: baseline;
|
|
105
130
|
color: tokens.$bm-comp-input-color-text;
|
|
106
|
-
font:
|
|
131
|
+
font: var(#{inputVars.$fieldFont});
|
|
107
132
|
font-variant-numeric: tabular-nums;
|
|
108
133
|
gap: tokens.$bm-sem-space-12;
|
|
109
134
|
}
|
|
@@ -114,6 +139,7 @@ $stateStyleTokens: (
|
|
|
114
139
|
min-inline-size: 2ch;
|
|
115
140
|
text-align: center;
|
|
116
141
|
outline: none;
|
|
142
|
+
cursor: var(#{$dateFieldInputCursor}, text);
|
|
117
143
|
|
|
118
144
|
// RTL (DF-9): defensive bidi isolation. Today it's effectively a no-op —
|
|
119
145
|
// each segment is its own inline-block context holding strong-LTR content
|
|
@@ -151,12 +177,16 @@ $stateStyleTokens: (
|
|
|
151
177
|
|
|
152
178
|
&__field &__separator {
|
|
153
179
|
color: tokens.$bm-comp-input-color-text;
|
|
154
|
-
font:
|
|
180
|
+
font: var(#{inputVars.$fieldFont});
|
|
155
181
|
user-select: none;
|
|
156
182
|
// RTL (DF-9): defensive bidi isolation — a single neutral separator char
|
|
157
183
|
// doesn't reorder today; this keeps it stable if a locale ever uses a
|
|
158
184
|
// multi-char or directional separator.
|
|
159
185
|
unicode-bidi: plaintext;
|
|
186
|
+
|
|
187
|
+
&[data-placeholder='true'] {
|
|
188
|
+
color: tokens.$bm-comp-input-color-text-placeholder;
|
|
189
|
+
}
|
|
160
190
|
}
|
|
161
191
|
|
|
162
192
|
// Visually-hidden polite live region for the blur-clamp announcement.
|
package/package.json
CHANGED
package/styles.css
CHANGED
|
@@ -6931,6 +6931,27 @@ textarea:focus-visible,
|
|
|
6931
6931
|
--bm-text-field-cursor: not-allowed;
|
|
6932
6932
|
--bm-text-field-input-cursor: not-allowed;
|
|
6933
6933
|
}
|
|
6934
|
+
.bm-date-field--sm .bm-date-field__field {
|
|
6935
|
+
--bm-input-field-height: var(--bm-comp-input-size-field-height-sm);
|
|
6936
|
+
--bm-input-field-padding-y: var(--bm-comp-input-space-field-y-sm);
|
|
6937
|
+
--bm-input-field-padding-x: var(--bm-comp-input-space-field-x-sm);
|
|
6938
|
+
--bm-input-field-font: var(--bm-comp-input-typo-sm);
|
|
6939
|
+
--bm-input-field-icon-size: var(--bm-comp-input-size-field-icon-sm);
|
|
6940
|
+
}
|
|
6941
|
+
.bm-date-field--md .bm-date-field__field {
|
|
6942
|
+
--bm-input-field-height: var(--bm-comp-input-size-field-height-md);
|
|
6943
|
+
--bm-input-field-padding-y: var(--bm-comp-input-space-field-y-md);
|
|
6944
|
+
--bm-input-field-padding-x: var(--bm-comp-input-space-field-x-md);
|
|
6945
|
+
--bm-input-field-font: var(--bm-comp-input-typo-md);
|
|
6946
|
+
--bm-input-field-icon-size: var(--bm-comp-input-size-field-icon-md);
|
|
6947
|
+
}
|
|
6948
|
+
.bm-date-field--lg .bm-date-field__field {
|
|
6949
|
+
--bm-input-field-height: var(--bm-comp-input-size-field-height-lg);
|
|
6950
|
+
--bm-input-field-padding-y: var(--bm-comp-input-space-field-y-lg);
|
|
6951
|
+
--bm-input-field-padding-x: var(--bm-comp-input-space-field-x-lg);
|
|
6952
|
+
--bm-input-field-font: var(--bm-comp-input-typo-lg);
|
|
6953
|
+
--bm-input-field-icon-size: var(--bm-comp-input-size-field-icon-lg);
|
|
6954
|
+
}
|
|
6934
6955
|
.bm-date-field--error .bm-date-field__field {
|
|
6935
6956
|
border-color: var(--bm-comp-input-color-border-error);
|
|
6936
6957
|
background-color: var(--bm-comp-input-color-bg);
|
|
@@ -6943,6 +6964,12 @@ textarea:focus-visible,
|
|
|
6943
6964
|
.bm-date-field--error .bm-date-field__field .bm-date-field__segment[data-placeholder=true] {
|
|
6944
6965
|
color: var(--bm-comp-input-color-text-placeholder);
|
|
6945
6966
|
}
|
|
6967
|
+
.bm-date-field--error .bm-date-field__field .bm-date-field__separator {
|
|
6968
|
+
color: var(--bm-comp-input-color-text);
|
|
6969
|
+
}
|
|
6970
|
+
.bm-date-field--error .bm-date-field__field .bm-date-field__separator[data-placeholder=true] {
|
|
6971
|
+
color: var(--bm-comp-input-color-text-placeholder);
|
|
6972
|
+
}
|
|
6946
6973
|
.bm-date-field--read-only .bm-date-field__field {
|
|
6947
6974
|
border-color: var(--bm-comp-input-color-border-disabled);
|
|
6948
6975
|
background-color: var(--bm-comp-input-color-bg-disabled);
|
|
@@ -6953,6 +6980,12 @@ textarea:focus-visible,
|
|
|
6953
6980
|
.bm-date-field--read-only .bm-date-field__field .bm-date-field__segment[data-placeholder=true] {
|
|
6954
6981
|
color: var(--bm-comp-input-color-text-placeholder);
|
|
6955
6982
|
}
|
|
6983
|
+
.bm-date-field--read-only .bm-date-field__field .bm-date-field__separator {
|
|
6984
|
+
color: var(--bm-comp-input-color-text);
|
|
6985
|
+
}
|
|
6986
|
+
.bm-date-field--read-only .bm-date-field__field .bm-date-field__separator[data-placeholder=true] {
|
|
6987
|
+
color: var(--bm-comp-input-color-text-placeholder);
|
|
6988
|
+
}
|
|
6956
6989
|
.bm-date-field--disabled .bm-date-field__field {
|
|
6957
6990
|
border-color: var(--bm-comp-input-color-border-disabled);
|
|
6958
6991
|
background-color: var(--bm-comp-input-color-bg-disabled);
|
|
@@ -6963,9 +6996,19 @@ textarea:focus-visible,
|
|
|
6963
6996
|
.bm-date-field--disabled .bm-date-field__field .bm-date-field__segment[data-placeholder=true] {
|
|
6964
6997
|
color: var(--bm-comp-input-color-text-disabled);
|
|
6965
6998
|
}
|
|
6999
|
+
.bm-date-field--disabled .bm-date-field__field .bm-date-field__separator {
|
|
7000
|
+
color: var(--bm-comp-input-color-text-disabled);
|
|
7001
|
+
}
|
|
7002
|
+
.bm-date-field--disabled .bm-date-field__field .bm-date-field__separator[data-placeholder=true] {
|
|
7003
|
+
color: var(--bm-comp-input-color-text-disabled);
|
|
7004
|
+
}
|
|
6966
7005
|
.bm-date-field--fluid {
|
|
6967
7006
|
max-width: 100%;
|
|
6968
7007
|
}
|
|
7008
|
+
.bm-date-field--disabled {
|
|
7009
|
+
--bm-date-field-cursor: not-allowed;
|
|
7010
|
+
--bm-date-field-input-cursor: not-allowed;
|
|
7011
|
+
}
|
|
6969
7012
|
.bm-date-field__field {
|
|
6970
7013
|
display: flex;
|
|
6971
7014
|
flex-wrap: nowrap;
|
|
@@ -6979,11 +7022,12 @@ textarea:focus-visible,
|
|
|
6979
7022
|
gap: var(--bm-comp-input-space-field-gap);
|
|
6980
7023
|
box-shadow: var(--bm-comp-input-shadow-field);
|
|
6981
7024
|
background-color: var(--bm-comp-input-color-bg);
|
|
6982
|
-
|
|
6983
|
-
|
|
6984
|
-
padding-
|
|
7025
|
+
cursor: var(--bm-date-field-cursor, default);
|
|
7026
|
+
height: var(--bm-input-field-height);
|
|
7027
|
+
padding-block: var(--bm-input-field-padding-y);
|
|
7028
|
+
padding-inline: var(--bm-input-field-padding-x);
|
|
6985
7029
|
}
|
|
6986
|
-
.bm-date-field__field:focus-within {
|
|
7030
|
+
.bm-date-field__field:not([aria-disabled=true]):focus-within {
|
|
6987
7031
|
outline-offset: calc(0px - var(--bm-sem-size-focus-offset));
|
|
6988
7032
|
outline: var(--bm-sem-border-width-focus) solid var(--bm-sem-color-border-focus);
|
|
6989
7033
|
}
|
|
@@ -6991,7 +7035,7 @@ textarea:focus-visible,
|
|
|
6991
7035
|
display: inline-flex;
|
|
6992
7036
|
align-items: baseline;
|
|
6993
7037
|
color: var(--bm-comp-input-color-text);
|
|
6994
|
-
font: var(--bm-
|
|
7038
|
+
font: var(--bm-input-field-font);
|
|
6995
7039
|
font-variant-numeric: tabular-nums;
|
|
6996
7040
|
gap: var(--bm-sem-space-12);
|
|
6997
7041
|
}
|
|
@@ -7001,6 +7045,7 @@ textarea:focus-visible,
|
|
|
7001
7045
|
min-inline-size: 2ch;
|
|
7002
7046
|
text-align: center;
|
|
7003
7047
|
outline: none;
|
|
7048
|
+
cursor: var(--bm-date-field-input-cursor, text);
|
|
7004
7049
|
unicode-bidi: plaintext;
|
|
7005
7050
|
border-block: var(--bm-sem-border-width-focus) solid transparent;
|
|
7006
7051
|
}
|
|
@@ -7018,10 +7063,13 @@ textarea:focus-visible,
|
|
|
7018
7063
|
}
|
|
7019
7064
|
.bm-date-field__field .bm-date-field__separator {
|
|
7020
7065
|
color: var(--bm-comp-input-color-text);
|
|
7021
|
-
font: var(--bm-
|
|
7066
|
+
font: var(--bm-input-field-font);
|
|
7022
7067
|
user-select: none;
|
|
7023
7068
|
unicode-bidi: plaintext;
|
|
7024
7069
|
}
|
|
7070
|
+
.bm-date-field__field .bm-date-field__separator[data-placeholder=true] {
|
|
7071
|
+
color: var(--bm-comp-input-color-text-placeholder);
|
|
7072
|
+
}
|
|
7025
7073
|
.bm-date-field__sr-status {
|
|
7026
7074
|
position: absolute;
|
|
7027
7075
|
width: 1px;
|