@threadlabs/looma 0.12.6 → 0.12.7
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/ui-checkbox/ui-checkbox.html +1 -1
- package/components/ui-combobox/ui-combobox.html +2 -2
- package/components/ui-disclosure/ui-disclosure.html +1 -1
- package/components/ui-editable/ui-editable.html +1 -1
- package/components/ui-input/ui-input.html +1 -1
- package/components/ui-radio/ui-radio.html +1 -1
- package/components/ui-select/ui-select.html +1 -1
- package/components/ui-switch/ui-switch.html +1 -1
- package/components/ui-textarea/ui-textarea.html +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/styles/ui-checkbox.css +1 -1
- package/styles/ui-combobox.css +2 -2
- package/styles/ui-disclosure.css +1 -1
- package/styles/ui-editable.css +1 -1
- package/styles/ui-input.css +1 -1
- package/styles/ui-radio.css +1 -1
- package/styles/ui-select.css +1 -1
- package/styles/ui-switch.css +1 -1
- package/styles/ui-textarea.css +1 -1
- package/theme-dark.css +1 -1
- package/theme-light.css +1 -1
- package/tokens.css +8 -6
- package/vue/UiCheckbox.vue +1 -1
- package/vue/UiCombobox.vue +2 -2
- package/vue/UiDisclosure.vue +1 -1
- package/vue/UiEditable.vue +1 -1
- package/vue/UiInput.vue +1 -1
- package/vue/UiRadio.vue +1 -1
- package/vue/UiSelect.vue +1 -1
- package/vue/UiSwitch.vue +1 -1
- package/vue/UiTextarea.vue +1 -1
- package/vue/chunks/UiCheckbox.js +1 -1
- package/vue/chunks/UiCombobox.js +1 -1
- package/vue/chunks/UiDisclosure.js +1 -1
- package/vue/chunks/UiEditable.js +1 -1
- package/vue/chunks/UiInput.js +1 -1
- package/vue/chunks/UiRadio.js +1 -1
- package/vue/chunks/UiSelect.js +1 -1
- package/vue/chunks/UiSwitch.js +1 -1
- package/vue/chunks/UiTextarea.js +1 -1
- package/vue/components.css +159 -159
package/vue/components.css
CHANGED
|
@@ -752,7 +752,7 @@ html[data-ui-input-modality="touch"]
|
|
|
752
752
|
display: none;
|
|
753
753
|
}
|
|
754
754
|
|
|
755
|
-
[data-component~="ui-checkbox"][data-v-
|
|
755
|
+
[data-component~="ui-checkbox"][data-v-cc7306ec] {
|
|
756
756
|
display: inline-flex;
|
|
757
757
|
align-items: flex-start;
|
|
758
758
|
gap: var(--ui-checkbox-gap, var(--ui-space-2));
|
|
@@ -762,25 +762,25 @@ html[data-ui-input-modality="touch"]
|
|
|
762
762
|
}
|
|
763
763
|
|
|
764
764
|
/* The label, and under it an optional line saying what the choice means. */
|
|
765
|
-
.text[data-v-
|
|
765
|
+
.text[data-v-cc7306ec] {
|
|
766
766
|
display: flex;
|
|
767
767
|
flex-direction: column;
|
|
768
768
|
gap: var(--ui-space-1);
|
|
769
769
|
min-inline-size: 0;
|
|
770
770
|
}
|
|
771
|
-
.label[data-v-
|
|
771
|
+
.label[data-v-cc7306ec] {
|
|
772
772
|
min-inline-size: 0;
|
|
773
773
|
line-height: var(--ui-line-height-md);
|
|
774
774
|
}
|
|
775
|
-
.description[data-v-
|
|
775
|
+
.description[data-v-cc7306ec] {
|
|
776
776
|
color: var(--ui-text-secondary);
|
|
777
777
|
font-size: var(--ui-font-size-sm);
|
|
778
778
|
line-height: var(--ui-line-height);
|
|
779
779
|
}
|
|
780
|
-
.description[data-v-
|
|
780
|
+
.description[data-v-cc7306ec]:empty {
|
|
781
781
|
display: none;
|
|
782
782
|
}
|
|
783
|
-
input[data-v-
|
|
783
|
+
input[data-v-cc7306ec] {
|
|
784
784
|
appearance: none;
|
|
785
785
|
-webkit-appearance: none;
|
|
786
786
|
position: relative;
|
|
@@ -798,20 +798,20 @@ input[data-v-4d65c3b0] {
|
|
|
798
798
|
border-color var(--ui-motion-fast) var(--ui-motion-ease),
|
|
799
799
|
box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
|
|
800
800
|
}
|
|
801
|
-
input[data-v-
|
|
801
|
+
input[data-v-cc7306ec]::after {
|
|
802
802
|
content: "";
|
|
803
803
|
position: absolute;
|
|
804
804
|
opacity: 0;
|
|
805
805
|
}
|
|
806
|
-
input[data-v-
|
|
807
|
-
input[data-v-
|
|
806
|
+
input[data-v-cc7306ec]:checked,
|
|
807
|
+
input[data-v-cc7306ec]:indeterminate {
|
|
808
808
|
border-color: var(--ui-accent-solid);
|
|
809
809
|
background: var(--ui-accent-solid);
|
|
810
810
|
box-shadow: inset 0 1px 2px color-mix(in srgb, #000 16%, transparent);
|
|
811
811
|
}
|
|
812
812
|
|
|
813
813
|
/* Centre the tick's box, then lift it: a rotated L's ink sits ~0.11rem below its box centre. */
|
|
814
|
-
input[data-v-
|
|
814
|
+
input[data-v-cc7306ec]:checked::after {
|
|
815
815
|
inset: 0;
|
|
816
816
|
margin: auto;
|
|
817
817
|
inline-size: 0.32rem;
|
|
@@ -824,7 +824,7 @@ input[data-v-4d65c3b0]:checked::after {
|
|
|
824
824
|
opacity: 1;
|
|
825
825
|
transform: translateY(-0.11rem) rotate(45deg);
|
|
826
826
|
}
|
|
827
|
-
input[data-v-
|
|
827
|
+
input[data-v-cc7306ec]:indeterminate::after {
|
|
828
828
|
inset: 50% 0.23rem auto;
|
|
829
829
|
block-size: 0.125rem;
|
|
830
830
|
border-radius: var(--ui-radius-round);
|
|
@@ -832,25 +832,25 @@ input[data-v-4d65c3b0]:indeterminate::after {
|
|
|
832
832
|
opacity: 1;
|
|
833
833
|
transform: translateY(-50%);
|
|
834
834
|
}
|
|
835
|
-
input[data-v-
|
|
835
|
+
input[data-v-cc7306ec]:hover:enabled {
|
|
836
836
|
border-color: var(--ui-accent-solid);
|
|
837
837
|
}
|
|
838
|
-
input[data-v-
|
|
838
|
+
input[data-v-cc7306ec]:focus-visible {
|
|
839
839
|
outline: 2px solid var(--ui-focus-ring, var(--ui-accent-solid));
|
|
840
840
|
outline-offset: 2px;
|
|
841
841
|
}
|
|
842
|
-
[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"][data-v-
|
|
843
|
-
color: var(--ui-text
|
|
842
|
+
[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"][data-v-cc7306ec] {
|
|
843
|
+
color: var(--ui-disabled-text);
|
|
844
844
|
cursor: not-allowed;
|
|
845
845
|
}
|
|
846
|
-
[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"] input[data-v-
|
|
846
|
+
[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"] input[data-v-cc7306ec] {
|
|
847
847
|
border-color: var(--ui-border-default);
|
|
848
848
|
background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
|
|
849
849
|
cursor: not-allowed;
|
|
850
850
|
}
|
|
851
851
|
|
|
852
852
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
853
|
-
[data-component~="ui-checkbox"][hidden][data-v-
|
|
853
|
+
[data-component~="ui-checkbox"][hidden][data-v-cc7306ec] {
|
|
854
854
|
display: none;
|
|
855
855
|
}
|
|
856
856
|
|
|
@@ -989,27 +989,27 @@ input[data-v-4d65c3b0]:focus-visible {
|
|
|
989
989
|
}
|
|
990
990
|
}
|
|
991
991
|
|
|
992
|
-
[data-component~="ui-combobox"][data-v-
|
|
992
|
+
[data-component~="ui-combobox"][data-v-b3cdd263] {
|
|
993
993
|
display: grid;
|
|
994
994
|
gap: var(--ui-space-1);
|
|
995
995
|
min-inline-size: 0;
|
|
996
996
|
color: var(--ui-text-primary);
|
|
997
997
|
font: inherit;
|
|
998
998
|
}
|
|
999
|
-
label[data-v-
|
|
999
|
+
label[data-v-b3cdd263] {
|
|
1000
1000
|
color: var(--ui-combobox-label-text, var(--ui-text-primary));
|
|
1001
1001
|
font-size: var(--ui-combobox-label-font-size, var(--ui-font-size-sm));
|
|
1002
1002
|
font-weight: 500;
|
|
1003
1003
|
}
|
|
1004
1004
|
/* The field and anything that annotates it sit on one row; the help button is beside the box,
|
|
1005
1005
|
not inside it, because a control's box holds its value. */
|
|
1006
|
-
.control[data-v-
|
|
1006
|
+
.control[data-v-b3cdd263] {
|
|
1007
1007
|
display: flex;
|
|
1008
1008
|
align-items: center;
|
|
1009
1009
|
gap: var(--ui-space-2);
|
|
1010
1010
|
min-inline-size: 0;
|
|
1011
1011
|
}
|
|
1012
|
-
.field[data-v-
|
|
1012
|
+
.field[data-v-b3cdd263] {
|
|
1013
1013
|
flex: 1 1 auto;
|
|
1014
1014
|
display: flex;
|
|
1015
1015
|
min-inline-size: 0;
|
|
@@ -1021,14 +1021,14 @@ label[data-v-0bd7ecc4] {
|
|
|
1021
1021
|
border-color var(--ui-motion-fast) var(--ui-motion-ease),
|
|
1022
1022
|
box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
|
|
1023
1023
|
}
|
|
1024
|
-
.field[data-v-
|
|
1024
|
+
.field[data-v-b3cdd263]:focus-within {
|
|
1025
1025
|
border-color: var(--ui-control-focus, var(--ui-accent-solid));
|
|
1026
1026
|
box-shadow:
|
|
1027
1027
|
var(--ui-control-inset),
|
|
1028
1028
|
var(--ui-control-focus-halo-shadow);
|
|
1029
1029
|
}
|
|
1030
1030
|
/* A ghost icon button: the affordance is the mark, not a box around it. */
|
|
1031
|
-
.help[data-v-
|
|
1031
|
+
.help[data-v-b3cdd263] {
|
|
1032
1032
|
flex: none;
|
|
1033
1033
|
display: inline-flex;
|
|
1034
1034
|
align-items: center;
|
|
@@ -1045,28 +1045,28 @@ label[data-v-0bd7ecc4] {
|
|
|
1045
1045
|
background-color var(--ui-motion-fast) var(--ui-motion-ease),
|
|
1046
1046
|
color var(--ui-motion-fast) var(--ui-motion-ease);
|
|
1047
1047
|
}
|
|
1048
|
-
.help[data-v-
|
|
1049
|
-
.help[aria-expanded="true"][data-v-
|
|
1048
|
+
.help[data-v-b3cdd263]:hover:enabled,
|
|
1049
|
+
.help[aria-expanded="true"][data-v-b3cdd263] {
|
|
1050
1050
|
background: color-mix(in srgb, currentColor 8%, transparent);
|
|
1051
1051
|
color: var(--ui-text-primary);
|
|
1052
1052
|
}
|
|
1053
|
-
.help[data-v-
|
|
1053
|
+
.help[data-v-b3cdd263]:focus-visible {
|
|
1054
1054
|
outline: none;
|
|
1055
1055
|
box-shadow: var(--ui-focus-halo);
|
|
1056
1056
|
}
|
|
1057
|
-
.help[data-v-
|
|
1057
|
+
.help[data-v-b3cdd263]:disabled {
|
|
1058
1058
|
color: var(--ui-disabled-text);
|
|
1059
1059
|
cursor: not-allowed;
|
|
1060
1060
|
}
|
|
1061
|
-
.help-icon[data-v-
|
|
1061
|
+
.help-icon[data-v-b3cdd263] {
|
|
1062
1062
|
inline-size: var(--ui-icon-size-sm);
|
|
1063
1063
|
block-size: var(--ui-icon-size-sm);
|
|
1064
1064
|
}
|
|
1065
|
-
input[data-v-
|
|
1065
|
+
input[data-v-b3cdd263]::selection {
|
|
1066
1066
|
background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
|
|
1067
1067
|
color: inherit;
|
|
1068
1068
|
}
|
|
1069
|
-
input[data-v-
|
|
1069
|
+
input[data-v-b3cdd263] {
|
|
1070
1070
|
appearance: none;
|
|
1071
1071
|
width: 100%;
|
|
1072
1072
|
min-inline-size: 0;
|
|
@@ -1082,11 +1082,11 @@ input[data-v-0bd7ecc4] {
|
|
|
1082
1082
|
margin: 0;
|
|
1083
1083
|
outline: none;
|
|
1084
1084
|
}
|
|
1085
|
-
[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-
|
|
1085
|
+
[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-b3cdd263] {
|
|
1086
1086
|
min-block-size: calc(var(--ui-control-size-sm) - 2px);
|
|
1087
1087
|
padding: var(--ui-space-1) var(--ui-space-2);
|
|
1088
1088
|
}
|
|
1089
|
-
button[data-v-
|
|
1089
|
+
button[data-v-b3cdd263] {
|
|
1090
1090
|
appearance: none;
|
|
1091
1091
|
display: inline-grid;
|
|
1092
1092
|
place-items: center;
|
|
@@ -1101,31 +1101,31 @@ button[data-v-0bd7ecc4] {
|
|
|
1101
1101
|
padding: 0 var(--ui-space-1);
|
|
1102
1102
|
cursor: pointer;
|
|
1103
1103
|
}
|
|
1104
|
-
.affordance-icon[data-v-
|
|
1104
|
+
.affordance-icon[data-v-b3cdd263] {
|
|
1105
1105
|
display: block;
|
|
1106
1106
|
inline-size: var(--ui-icon-size-sm);
|
|
1107
1107
|
block-size: var(--ui-icon-size-sm);
|
|
1108
1108
|
}
|
|
1109
|
-
button[data-v-
|
|
1109
|
+
button[data-v-b3cdd263]:hover:enabled {
|
|
1110
1110
|
background: var(--ui-surface-muted);
|
|
1111
1111
|
color: var(--ui-text-primary);
|
|
1112
1112
|
}
|
|
1113
|
-
button[data-v-
|
|
1113
|
+
button[data-v-b3cdd263]:focus-visible {
|
|
1114
1114
|
outline: none;
|
|
1115
1115
|
background: var(--ui-surface-muted);
|
|
1116
1116
|
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
|
|
1117
1117
|
}
|
|
1118
|
-
input[data-v-
|
|
1119
|
-
color: var(--ui-text
|
|
1118
|
+
input[data-v-b3cdd263]:disabled, button[data-v-b3cdd263]:disabled {
|
|
1119
|
+
color: var(--ui-disabled-text);
|
|
1120
1120
|
cursor: not-allowed;
|
|
1121
1121
|
}
|
|
1122
|
-
.field[data-v-
|
|
1122
|
+
.field[data-v-b3cdd263]:has(input:disabled) {
|
|
1123
1123
|
background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
|
|
1124
1124
|
}
|
|
1125
|
-
[data-component~="ui-combobox"][data-ui-combobox-state~="validationStatus=error"] .field[data-v-
|
|
1125
|
+
[data-component~="ui-combobox"][data-ui-combobox-state~="validationStatus=error"] .field[data-v-b3cdd263] {
|
|
1126
1126
|
border-color: var(--ui-danger-solid, var(--ui-accent-active));
|
|
1127
1127
|
}
|
|
1128
|
-
.popup[data-v-
|
|
1128
|
+
.popup[data-v-b3cdd263] {
|
|
1129
1129
|
box-sizing: border-box;
|
|
1130
1130
|
min-inline-size: 12rem;
|
|
1131
1131
|
max-inline-size: calc(100vw - 1rem);
|
|
@@ -1139,40 +1139,40 @@ input[data-v-0bd7ecc4]:disabled, button[data-v-0bd7ecc4]:disabled {
|
|
|
1139
1139
|
color: var(--ui-text-primary);
|
|
1140
1140
|
box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
|
|
1141
1141
|
}
|
|
1142
|
-
[hidden][data-v-
|
|
1142
|
+
[hidden][data-v-b3cdd263] {
|
|
1143
1143
|
display: none;
|
|
1144
1144
|
}
|
|
1145
|
-
.option[data-v-
|
|
1145
|
+
.option[data-v-b3cdd263] {
|
|
1146
1146
|
padding: var(--ui-space-2) var(--ui-space-3);
|
|
1147
1147
|
border-radius: var(--ui-radius-sm);
|
|
1148
1148
|
cursor: pointer;
|
|
1149
1149
|
overflow-wrap: anywhere;
|
|
1150
1150
|
}
|
|
1151
|
-
.option[data-v-
|
|
1151
|
+
.option[data-v-b3cdd263]:hover, .option.active[data-v-b3cdd263] {
|
|
1152
1152
|
background: var(--ui-surface-muted);
|
|
1153
1153
|
outline: 1px solid var(--ui-focus-ring);
|
|
1154
1154
|
outline-offset: -1px;
|
|
1155
1155
|
}
|
|
1156
|
-
.option[aria-disabled="true"][data-v-
|
|
1157
|
-
color: var(--ui-text
|
|
1156
|
+
.option[aria-disabled="true"][data-v-b3cdd263] {
|
|
1157
|
+
color: var(--ui-disabled-text);
|
|
1158
1158
|
cursor: not-allowed;
|
|
1159
1159
|
}
|
|
1160
|
-
.primary[data-v-
|
|
1160
|
+
.primary[data-v-b3cdd263] {
|
|
1161
1161
|
display: block;
|
|
1162
1162
|
color: var(--ui-combobox-option-text, var(--ui-text-primary));
|
|
1163
1163
|
font-weight: 500;
|
|
1164
1164
|
}
|
|
1165
|
-
.message[data-v-
|
|
1165
|
+
.message[data-v-b3cdd263], .group[data-v-b3cdd263] {
|
|
1166
1166
|
color: var(--ui-combobox-message-text, var(--ui-text-secondary));
|
|
1167
1167
|
font-weight: 400;
|
|
1168
1168
|
font-size: var(--ui-font-size-sm);
|
|
1169
1169
|
line-height: var(--ui-line-height-md);
|
|
1170
1170
|
overflow-wrap: anywhere;
|
|
1171
1171
|
}
|
|
1172
|
-
.group[data-v-
|
|
1172
|
+
.group[data-v-b3cdd263], .popup .message[data-v-b3cdd263] {
|
|
1173
1173
|
padding: var(--ui-space-2) var(--ui-space-3);
|
|
1174
1174
|
}
|
|
1175
|
-
.sr-only[data-v-
|
|
1175
|
+
.sr-only[data-v-b3cdd263] {
|
|
1176
1176
|
position: absolute;
|
|
1177
1177
|
inline-size: 1px;
|
|
1178
1178
|
block-size: 1px;
|
|
@@ -1181,16 +1181,16 @@ input[data-v-0bd7ecc4]:disabled, button[data-v-0bd7ecc4]:disabled {
|
|
|
1181
1181
|
white-space: nowrap;
|
|
1182
1182
|
}
|
|
1183
1183
|
@media (pointer: coarse) {
|
|
1184
|
-
button[data-v-
|
|
1184
|
+
button[data-v-b3cdd263] {
|
|
1185
1185
|
min-inline-size: 2.75rem;
|
|
1186
1186
|
min-block-size: 2.75rem;
|
|
1187
1187
|
}
|
|
1188
1188
|
}
|
|
1189
1189
|
@media (forced-colors: active) {
|
|
1190
|
-
.field[data-v-
|
|
1190
|
+
.field[data-v-b3cdd263], .popup[data-v-b3cdd263] {
|
|
1191
1191
|
border-color: CanvasText;
|
|
1192
1192
|
}
|
|
1193
|
-
.option.active[data-v-
|
|
1193
|
+
.option.active[data-v-b3cdd263] {
|
|
1194
1194
|
outline-color: Highlight;
|
|
1195
1195
|
}
|
|
1196
1196
|
}
|
|
@@ -1198,12 +1198,12 @@ button[data-v-0bd7ecc4] {
|
|
|
1198
1198
|
/* Multiple mode: every option carries a checkbox, so a list that takes several answers says so
|
|
1199
1199
|
before anything is picked. aria-selected is the state; this draws it.
|
|
1200
1200
|
Longhands, not shorthands: lowering drops a shorthand that omits a component. */
|
|
1201
|
-
[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-
|
|
1201
|
+
[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-b3cdd263] {
|
|
1202
1202
|
display: flex;
|
|
1203
1203
|
gap: var(--ui-space-2);
|
|
1204
1204
|
align-items: center;
|
|
1205
1205
|
}
|
|
1206
|
-
[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-
|
|
1206
|
+
[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-b3cdd263]::before {
|
|
1207
1207
|
content: "";
|
|
1208
1208
|
flex: none;
|
|
1209
1209
|
inline-size: 1.125rem;
|
|
@@ -1218,7 +1218,7 @@ button[data-v-0bd7ecc4] {
|
|
|
1218
1218
|
background-size: 0.7rem;
|
|
1219
1219
|
}
|
|
1220
1220
|
[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"]
|
|
1221
|
-
.option[aria-selected="true"][data-v-
|
|
1221
|
+
.option[aria-selected="true"][data-v-b3cdd263]::before {
|
|
1222
1222
|
border-color: var(--ui-accent-solid);
|
|
1223
1223
|
background-color: var(--ui-accent-solid);
|
|
1224
1224
|
background-image: var(
|
|
@@ -1228,20 +1228,20 @@ button[data-v-0bd7ecc4] {
|
|
|
1228
1228
|
}
|
|
1229
1229
|
|
|
1230
1230
|
/* Multiple mode: chips wrap before the cursor on one flexible field line. */
|
|
1231
|
-
[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field[data-v-
|
|
1231
|
+
[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field[data-v-b3cdd263] {
|
|
1232
1232
|
flex-wrap: wrap;
|
|
1233
1233
|
align-items: center;
|
|
1234
1234
|
gap: var(--ui-space-1);
|
|
1235
1235
|
min-block-size: var(--ui-combobox-item-min-block-size, 2.5rem);
|
|
1236
1236
|
padding: var(--ui-space-1);
|
|
1237
1237
|
}
|
|
1238
|
-
[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] input[data-v-
|
|
1238
|
+
[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] input[data-v-b3cdd263] {
|
|
1239
1239
|
flex: 1 0 var(--ui-combobox-item-input-min-inline-size, 5rem);
|
|
1240
1240
|
width: auto;
|
|
1241
1241
|
min-block-size: 1.75rem;
|
|
1242
1242
|
padding: var(--ui-space-0-5) var(--ui-space-1);
|
|
1243
1243
|
}
|
|
1244
|
-
.item[data-v-
|
|
1244
|
+
.item[data-v-b3cdd263] {
|
|
1245
1245
|
appearance: none;
|
|
1246
1246
|
display: inline-flex;
|
|
1247
1247
|
min-inline-size: 0;
|
|
@@ -1255,16 +1255,16 @@ button[data-v-0bd7ecc4] {
|
|
|
1255
1255
|
font: inherit;
|
|
1256
1256
|
cursor: default;
|
|
1257
1257
|
}
|
|
1258
|
-
.item[data-v-
|
|
1258
|
+
.item[data-v-b3cdd263]:focus-visible {
|
|
1259
1259
|
outline: 2px solid var(--ui-focus-ring);
|
|
1260
1260
|
outline-offset: 1px;
|
|
1261
1261
|
}
|
|
1262
|
-
.item[data-v-
|
|
1262
|
+
.item[data-v-b3cdd263]:disabled {
|
|
1263
1263
|
opacity: 0.6;
|
|
1264
1264
|
}
|
|
1265
1265
|
|
|
1266
1266
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
1267
|
-
[data-component~="ui-combobox"][hidden][data-v-
|
|
1267
|
+
[data-component~="ui-combobox"][hidden][data-v-b3cdd263] {
|
|
1268
1268
|
display: none;
|
|
1269
1269
|
}
|
|
1270
1270
|
|
|
@@ -1615,12 +1615,12 @@ from {
|
|
|
1615
1615
|
}
|
|
1616
1616
|
|
|
1617
1617
|
/* Density resolves into the summary row's own values; the public tokens still override them. */
|
|
1618
|
-
[data-component~="ui-disclosure"][data-v-
|
|
1618
|
+
[data-component~="ui-disclosure"][data-v-af289043] {
|
|
1619
1619
|
--_trigger-min-block-size: var(--ui-control-size);
|
|
1620
1620
|
--_trigger-padding-block: var(--ui-space-2);
|
|
1621
1621
|
--_trigger-padding-inline: var(--ui-space-3);
|
|
1622
1622
|
}
|
|
1623
|
-
[data-component~="ui-disclosure"][data-ui-disclosure-state~="density=compact"][data-v-
|
|
1623
|
+
[data-component~="ui-disclosure"][data-ui-disclosure-state~="density=compact"][data-v-af289043] {
|
|
1624
1624
|
--_trigger-min-block-size: var(--ui-control-size-sm);
|
|
1625
1625
|
--_trigger-padding-block: var(--ui-space-1);
|
|
1626
1626
|
--_trigger-padding-inline: var(--ui-space-2);
|
|
@@ -1628,14 +1628,14 @@ from {
|
|
|
1628
1628
|
|
|
1629
1629
|
/* An accordion row, not a field: no enclosing box, just a divider, so it never reads as a
|
|
1630
1630
|
* select or combobox. Stacked disclosures share their dividers. */
|
|
1631
|
-
[data-component~="ui-disclosure"][data-v-
|
|
1631
|
+
[data-component~="ui-disclosure"][data-v-af289043] {
|
|
1632
1632
|
display: block;
|
|
1633
1633
|
inline-size: 100%;
|
|
1634
1634
|
overflow: clip;
|
|
1635
1635
|
border-block-end: 1px solid var(--ui-border-default);
|
|
1636
1636
|
color: var(--ui-text-primary);
|
|
1637
1637
|
}
|
|
1638
|
-
.trigger[data-v-
|
|
1638
|
+
.trigger[data-v-af289043] {
|
|
1639
1639
|
display: grid;
|
|
1640
1640
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
1641
1641
|
gap: var(--ui-space-3);
|
|
@@ -1654,18 +1654,18 @@ from {
|
|
|
1654
1654
|
border-radius: var(--ui-radius-sm);
|
|
1655
1655
|
transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
|
|
1656
1656
|
}
|
|
1657
|
-
.trigger[data-v-
|
|
1657
|
+
.trigger[data-v-af289043]:hover:not(:disabled) {
|
|
1658
1658
|
background: var(--ui-surface-muted);
|
|
1659
1659
|
}
|
|
1660
|
-
.trigger[data-v-
|
|
1660
|
+
.trigger[data-v-af289043]:focus-visible {
|
|
1661
1661
|
outline: none;
|
|
1662
1662
|
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
|
|
1663
1663
|
}
|
|
1664
|
-
.trigger[data-v-
|
|
1665
|
-
color: var(--ui-text
|
|
1664
|
+
.trigger[data-v-af289043]:disabled {
|
|
1665
|
+
color: var(--ui-disabled-text);
|
|
1666
1666
|
cursor: not-allowed;
|
|
1667
1667
|
}
|
|
1668
|
-
.chevron[data-v-
|
|
1668
|
+
.chevron[data-v-af289043] {
|
|
1669
1669
|
inline-size: 0.5rem;
|
|
1670
1670
|
block-size: 0.5rem;
|
|
1671
1671
|
border-inline-end: 2px solid currentColor;
|
|
@@ -1673,39 +1673,39 @@ from {
|
|
|
1673
1673
|
transform: rotate(45deg) translate(-1px, -1px);
|
|
1674
1674
|
transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
|
|
1675
1675
|
}
|
|
1676
|
-
.panel[data-v-
|
|
1676
|
+
.panel[data-v-af289043] {
|
|
1677
1677
|
display: grid;
|
|
1678
1678
|
grid-template-rows: 0fr;
|
|
1679
1679
|
transition: grid-template-rows var(--ui-motion-fast)
|
|
1680
1680
|
var(--ui-motion-ease-out, var(--ui-motion-ease));
|
|
1681
1681
|
}
|
|
1682
|
-
.panel-inner[data-v-
|
|
1682
|
+
.panel-inner[data-v-af289043] {
|
|
1683
1683
|
min-block-size: 0;
|
|
1684
1684
|
overflow: hidden;
|
|
1685
1685
|
padding-inline: var(--ui-space-3);
|
|
1686
1686
|
}
|
|
1687
|
-
[data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .panel[data-v-
|
|
1687
|
+
[data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .panel[data-v-af289043] {
|
|
1688
1688
|
grid-template-rows: 1fr;
|
|
1689
1689
|
}
|
|
1690
|
-
[data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .panel-inner[data-v-
|
|
1690
|
+
[data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .panel-inner[data-v-af289043] {
|
|
1691
1691
|
padding-block: 0 var(--ui-space-3);
|
|
1692
1692
|
}
|
|
1693
|
-
[data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .chevron[data-v-
|
|
1693
|
+
[data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .chevron[data-v-af289043] {
|
|
1694
1694
|
transform: rotate(225deg) translate(-1px, -1px);
|
|
1695
1695
|
}
|
|
1696
1696
|
@media (prefers-reduced-motion: reduce) {
|
|
1697
|
-
.panel[data-v-
|
|
1698
|
-
.chevron[data-v-
|
|
1697
|
+
.panel[data-v-af289043],
|
|
1698
|
+
.chevron[data-v-af289043] {
|
|
1699
1699
|
transition: none;
|
|
1700
1700
|
}
|
|
1701
1701
|
}
|
|
1702
1702
|
|
|
1703
1703
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
1704
|
-
[data-component~="ui-disclosure"][hidden][data-v-
|
|
1704
|
+
[data-component~="ui-disclosure"][hidden][data-v-af289043] {
|
|
1705
1705
|
display: none;
|
|
1706
1706
|
}
|
|
1707
1707
|
|
|
1708
|
-
[data-component~="ui-editable"][data-v-
|
|
1708
|
+
[data-component~="ui-editable"][data-v-3b785d66] {
|
|
1709
1709
|
display: flex;
|
|
1710
1710
|
flex-wrap: wrap;
|
|
1711
1711
|
align-items: center;
|
|
@@ -1716,13 +1716,13 @@ from {
|
|
|
1716
1716
|
|
|
1717
1717
|
/* The value and the input share one grid cell with identical box metrics, so switching between
|
|
1718
1718
|
* display and edit never changes the control's size or moves the text. */
|
|
1719
|
-
.field[data-v-
|
|
1719
|
+
.field[data-v-3b785d66] {
|
|
1720
1720
|
display: inline-grid;
|
|
1721
1721
|
min-inline-size: 8rem;
|
|
1722
1722
|
max-inline-size: 100%;
|
|
1723
1723
|
}
|
|
1724
|
-
.preview[data-v-
|
|
1725
|
-
.input[data-v-
|
|
1724
|
+
.preview[data-v-3b785d66],
|
|
1725
|
+
.input[data-v-3b785d66] {
|
|
1726
1726
|
grid-area: 1 / 1;
|
|
1727
1727
|
box-sizing: border-box;
|
|
1728
1728
|
min-block-size: var(--ui-control-size-sm);
|
|
@@ -1738,7 +1738,7 @@ from {
|
|
|
1738
1738
|
border-color var(--ui-motion-fast) var(--ui-motion-ease),
|
|
1739
1739
|
box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
|
|
1740
1740
|
}
|
|
1741
|
-
.preview[data-v-
|
|
1741
|
+
.preview[data-v-3b785d66] {
|
|
1742
1742
|
display: inline-flex;
|
|
1743
1743
|
gap: var(--ui-space-2);
|
|
1744
1744
|
align-items: center;
|
|
@@ -1746,50 +1746,50 @@ from {
|
|
|
1746
1746
|
text-align: start;
|
|
1747
1747
|
cursor: pointer;
|
|
1748
1748
|
}
|
|
1749
|
-
.preview[data-v-
|
|
1749
|
+
.preview[data-v-3b785d66]:hover:not(:disabled) {
|
|
1750
1750
|
background: var(--ui-surface-muted);
|
|
1751
1751
|
}
|
|
1752
|
-
.preview[data-v-
|
|
1752
|
+
.preview[data-v-3b785d66]:focus-visible {
|
|
1753
1753
|
outline: none;
|
|
1754
1754
|
box-shadow: var(--ui-focus-halo);
|
|
1755
1755
|
}
|
|
1756
|
-
.hint[data-v-
|
|
1756
|
+
.hint[data-v-3b785d66] {
|
|
1757
1757
|
color: var(--ui-text-secondary);
|
|
1758
1758
|
font-size: var(--ui-font-size-sm);
|
|
1759
1759
|
}
|
|
1760
1760
|
|
|
1761
1761
|
/* Contained so it takes the value's width instead of its own default input width. */
|
|
1762
|
-
.input[data-v-
|
|
1762
|
+
.input[data-v-3b785d66] {
|
|
1763
1763
|
contain: inline-size;
|
|
1764
1764
|
inline-size: 100%;
|
|
1765
1765
|
min-inline-size: 0;
|
|
1766
1766
|
visibility: hidden;
|
|
1767
1767
|
background: var(--ui-control-surface, var(--ui-surface-elevated));
|
|
1768
1768
|
}
|
|
1769
|
-
.input[data-v-
|
|
1769
|
+
.input[data-v-3b785d66]:focus {
|
|
1770
1770
|
outline: none;
|
|
1771
1771
|
border-color: var(--ui-control-focus, var(--ui-accent-solid));
|
|
1772
1772
|
box-shadow:
|
|
1773
1773
|
var(--ui-control-inset),
|
|
1774
1774
|
var(--ui-control-focus-halo-shadow);
|
|
1775
1775
|
}
|
|
1776
|
-
.input[data-v-
|
|
1776
|
+
.input[data-v-3b785d66]::selection {
|
|
1777
1777
|
background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
|
|
1778
1778
|
}
|
|
1779
|
-
[data-component~="ui-editable"][data-ui-editable-state~="internalEdit"] .preview[data-v-
|
|
1779
|
+
[data-component~="ui-editable"][data-ui-editable-state~="internalEdit"] .preview[data-v-3b785d66] {
|
|
1780
1780
|
visibility: hidden;
|
|
1781
1781
|
}
|
|
1782
|
-
[data-component~="ui-editable"][data-ui-editable-state~="internalEdit"] .input[data-v-
|
|
1782
|
+
[data-component~="ui-editable"][data-ui-editable-state~="internalEdit"] .input[data-v-3b785d66] {
|
|
1783
1783
|
visibility: visible;
|
|
1784
1784
|
}
|
|
1785
|
-
.actions[data-v-
|
|
1785
|
+
.actions[data-v-3b785d66] {
|
|
1786
1786
|
display: none;
|
|
1787
1787
|
gap: var(--ui-space-1);
|
|
1788
1788
|
}
|
|
1789
|
-
[data-component~="ui-editable"][data-ui-editable-state~="internalEdit"] .actions[data-v-
|
|
1789
|
+
[data-component~="ui-editable"][data-ui-editable-state~="internalEdit"] .actions[data-v-3b785d66] {
|
|
1790
1790
|
display: inline-flex;
|
|
1791
1791
|
}
|
|
1792
|
-
.actions button[data-v-
|
|
1792
|
+
.actions button[data-v-3b785d66] {
|
|
1793
1793
|
min-block-size: var(--ui-control-size-sm);
|
|
1794
1794
|
padding: 0 var(--ui-space-3);
|
|
1795
1795
|
border: 1px solid var(--ui-border-strong);
|
|
@@ -1802,22 +1802,22 @@ from {
|
|
|
1802
1802
|
font-size: var(--ui-font-size-sm);
|
|
1803
1803
|
cursor: pointer;
|
|
1804
1804
|
}
|
|
1805
|
-
.actions .save[data-v-
|
|
1805
|
+
.actions .save[data-v-3b785d66] {
|
|
1806
1806
|
border-color: var(--ui-accent-solid);
|
|
1807
1807
|
background: var(--ui-accent-solid);
|
|
1808
1808
|
color: var(--ui-text-on-accent);
|
|
1809
1809
|
}
|
|
1810
|
-
.actions button[data-v-
|
|
1810
|
+
.actions button[data-v-3b785d66]:focus-visible {
|
|
1811
1811
|
outline: none;
|
|
1812
1812
|
box-shadow: var(--ui-focus-halo);
|
|
1813
1813
|
}
|
|
1814
|
-
[data-component~="ui-editable"][data-ui-editable-state~="disabled"] .preview[data-v-
|
|
1815
|
-
color: var(--ui-text
|
|
1814
|
+
[data-component~="ui-editable"][data-ui-editable-state~="disabled"] .preview[data-v-3b785d66] {
|
|
1815
|
+
color: var(--ui-disabled-text);
|
|
1816
1816
|
cursor: not-allowed;
|
|
1817
1817
|
}
|
|
1818
1818
|
|
|
1819
1819
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
1820
|
-
[data-component~="ui-editable"][hidden][data-v-
|
|
1820
|
+
[data-component~="ui-editable"][hidden][data-v-3b785d66] {
|
|
1821
1821
|
display: none;
|
|
1822
1822
|
}
|
|
1823
1823
|
|
|
@@ -3159,7 +3159,7 @@ svg[data-v-c322b7ed-s] {
|
|
|
3159
3159
|
display: none;
|
|
3160
3160
|
}
|
|
3161
3161
|
|
|
3162
|
-
[data-component~="ui-input"][data-v-
|
|
3162
|
+
[data-component~="ui-input"][data-v-08811f22] {
|
|
3163
3163
|
box-sizing: border-box;
|
|
3164
3164
|
display: inline-block;
|
|
3165
3165
|
inline-size: 100%;
|
|
@@ -3183,21 +3183,21 @@ svg[data-v-c322b7ed-s] {
|
|
|
3183
3183
|
}
|
|
3184
3184
|
|
|
3185
3185
|
/* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
|
|
3186
|
-
[data-component~="ui-input"][data-v-
|
|
3186
|
+
[data-component~="ui-input"][data-v-08811f22]::selection {
|
|
3187
3187
|
background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
|
|
3188
3188
|
color: inherit;
|
|
3189
3189
|
}
|
|
3190
|
-
[data-component~="ui-input"][data-v-
|
|
3190
|
+
[data-component~="ui-input"][data-v-08811f22]::placeholder {
|
|
3191
3191
|
color: var(--ui-control-placeholder, var(--ui-text-secondary));
|
|
3192
3192
|
opacity: 1;
|
|
3193
3193
|
}
|
|
3194
|
-
[data-component~="ui-input"][data-v-
|
|
3194
|
+
[data-component~="ui-input"][data-v-08811f22]:hover:not(:focus):not(:disabled) {
|
|
3195
3195
|
border-color: var(
|
|
3196
3196
|
--ui-input-border-hover,
|
|
3197
3197
|
var(--ui-control-border-hover, var(--ui-text-secondary))
|
|
3198
3198
|
);
|
|
3199
3199
|
}
|
|
3200
|
-
[data-component~="ui-input"][data-v-
|
|
3200
|
+
[data-component~="ui-input"][data-v-08811f22]:focus-visible {
|
|
3201
3201
|
border-color: var(--ui-input-focus-border, var(--ui-control-focus, var(--ui-accent-solid)));
|
|
3202
3202
|
outline: none;
|
|
3203
3203
|
box-shadow: var(
|
|
@@ -3208,27 +3208,27 @@ svg[data-v-c322b7ed-s] {
|
|
|
3208
3208
|
}
|
|
3209
3209
|
|
|
3210
3210
|
/* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
|
|
3211
|
-
[data-component~="ui-input"][aria-invalid="true"][data-v-
|
|
3212
|
-
[data-component~="ui-input"][data-v-
|
|
3211
|
+
[data-component~="ui-input"][aria-invalid="true"][data-v-08811f22],
|
|
3212
|
+
[data-component~="ui-input"][data-v-08811f22]:is(:user-invalid, [data-user-invalid]) {
|
|
3213
3213
|
border-color: var(--ui-input-invalid-border, var(--ui-danger-solid));
|
|
3214
3214
|
}
|
|
3215
|
-
[data-component~="ui-input"][data-v-
|
|
3215
|
+
[data-component~="ui-input"][data-v-08811f22]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
|
|
3216
3216
|
box-shadow: var(
|
|
3217
3217
|
--ui-input-invalid-focus-shadow,
|
|
3218
3218
|
var(--ui-control-inset),
|
|
3219
3219
|
0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent)
|
|
3220
3220
|
);
|
|
3221
3221
|
}
|
|
3222
|
-
[data-component~="ui-input"][data-v-
|
|
3222
|
+
[data-component~="ui-input"][data-v-08811f22]:disabled {
|
|
3223
3223
|
background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
|
|
3224
|
-
color: var(--ui-text
|
|
3224
|
+
color: var(--ui-disabled-text);
|
|
3225
3225
|
box-shadow: none;
|
|
3226
3226
|
cursor: not-allowed;
|
|
3227
3227
|
}
|
|
3228
3228
|
|
|
3229
3229
|
/* Forced colors drop box shadows, so the focus ring becomes an outline. */
|
|
3230
3230
|
@media (forced-colors: active) {
|
|
3231
|
-
[data-component~="ui-input"][data-v-
|
|
3231
|
+
[data-component~="ui-input"][data-v-08811f22]:focus-visible {
|
|
3232
3232
|
outline: var(--ui-input-focus-outline, 2px solid Highlight);
|
|
3233
3233
|
outline-offset: 1px;
|
|
3234
3234
|
}
|
|
@@ -3238,7 +3238,7 @@ svg[data-v-c322b7ed-s] {
|
|
|
3238
3238
|
* scroll vertically inside the field. Native inputs already center their single line. */
|
|
3239
3239
|
|
|
3240
3240
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
3241
|
-
[data-component~="ui-input"][hidden][data-v-
|
|
3241
|
+
[data-component~="ui-input"][hidden][data-v-08811f22] {
|
|
3242
3242
|
display: none;
|
|
3243
3243
|
}
|
|
3244
3244
|
|
|
@@ -3865,7 +3865,7 @@ svg[data-v-c322b7ed-s] {
|
|
|
3865
3865
|
}
|
|
3866
3866
|
}
|
|
3867
3867
|
|
|
3868
|
-
[data-component~="ui-radio"][data-v-
|
|
3868
|
+
[data-component~="ui-radio"][data-v-c4f88d99] {
|
|
3869
3869
|
display: inline-flex;
|
|
3870
3870
|
align-items: flex-start;
|
|
3871
3871
|
gap: var(--ui-radio-gap, var(--ui-space-2));
|
|
@@ -3875,25 +3875,25 @@ svg[data-v-c322b7ed-s] {
|
|
|
3875
3875
|
}
|
|
3876
3876
|
|
|
3877
3877
|
/* The label, and under it an optional line saying what the choice means. */
|
|
3878
|
-
.text[data-v-
|
|
3878
|
+
.text[data-v-c4f88d99] {
|
|
3879
3879
|
display: flex;
|
|
3880
3880
|
flex-direction: column;
|
|
3881
3881
|
gap: var(--ui-space-1);
|
|
3882
3882
|
min-inline-size: 0;
|
|
3883
3883
|
}
|
|
3884
|
-
.label[data-v-
|
|
3884
|
+
.label[data-v-c4f88d99] {
|
|
3885
3885
|
min-inline-size: 0;
|
|
3886
3886
|
line-height: var(--ui-line-height-md);
|
|
3887
3887
|
}
|
|
3888
|
-
.description[data-v-
|
|
3888
|
+
.description[data-v-c4f88d99] {
|
|
3889
3889
|
color: var(--ui-text-secondary);
|
|
3890
3890
|
font-size: var(--ui-font-size-sm);
|
|
3891
3891
|
line-height: var(--ui-line-height);
|
|
3892
3892
|
}
|
|
3893
|
-
.description[data-v-
|
|
3893
|
+
.description[data-v-c4f88d99]:empty {
|
|
3894
3894
|
display: none;
|
|
3895
3895
|
}
|
|
3896
|
-
input[data-v-
|
|
3896
|
+
input[data-v-c4f88d99] {
|
|
3897
3897
|
flex: 0 0 auto;
|
|
3898
3898
|
inline-size: var(--ui-radio-size, 1.125rem);
|
|
3899
3899
|
block-size: var(--ui-radio-size, 1.125rem);
|
|
@@ -3901,20 +3901,20 @@ input[data-v-f9c61d50] {
|
|
|
3901
3901
|
accent-color: var(--ui-accent-solid);
|
|
3902
3902
|
cursor: pointer;
|
|
3903
3903
|
}
|
|
3904
|
-
input[data-v-
|
|
3904
|
+
input[data-v-c4f88d99]:focus-visible {
|
|
3905
3905
|
outline: 2px solid var(--ui-focus-ring, var(--ui-accent-solid));
|
|
3906
3906
|
outline-offset: 2px;
|
|
3907
3907
|
}
|
|
3908
|
-
[data-component~="ui-radio"][data-ui-radio-state~="disabled"][data-v-
|
|
3909
|
-
color: var(--ui-text
|
|
3908
|
+
[data-component~="ui-radio"][data-ui-radio-state~="disabled"][data-v-c4f88d99] {
|
|
3909
|
+
color: var(--ui-disabled-text);
|
|
3910
3910
|
cursor: not-allowed;
|
|
3911
3911
|
}
|
|
3912
|
-
[data-component~="ui-radio"][data-ui-radio-state~="disabled"] input[data-v-
|
|
3912
|
+
[data-component~="ui-radio"][data-ui-radio-state~="disabled"] input[data-v-c4f88d99] {
|
|
3913
3913
|
cursor: not-allowed;
|
|
3914
3914
|
}
|
|
3915
3915
|
|
|
3916
3916
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
3917
|
-
[data-component~="ui-radio"][hidden][data-v-
|
|
3917
|
+
[data-component~="ui-radio"][hidden][data-v-c4f88d99] {
|
|
3918
3918
|
display: none;
|
|
3919
3919
|
}
|
|
3920
3920
|
|
|
@@ -4368,7 +4368,7 @@ dialog[data-v-2ba71171] {
|
|
|
4368
4368
|
display: none;
|
|
4369
4369
|
}
|
|
4370
4370
|
|
|
4371
|
-
[data-component~="ui-select"][data-v-
|
|
4371
|
+
[data-component~="ui-select"][data-v-e15c964d] {
|
|
4372
4372
|
box-sizing: border-box;
|
|
4373
4373
|
display: inline-block;
|
|
4374
4374
|
inline-size: 100%;
|
|
@@ -4392,7 +4392,7 @@ dialog[data-v-2ba71171] {
|
|
|
4392
4392
|
|
|
4393
4393
|
/* The select draws its own chevron: the native caret cannot be inset or sized consistently.
|
|
4394
4394
|
* The root stays a native <s-lect>, so the icon is a background image rather than an element. */
|
|
4395
|
-
[data-component~="ui-select"][data-v-
|
|
4395
|
+
[data-component~="ui-select"][data-v-e15c964d] {
|
|
4396
4396
|
appearance: none;
|
|
4397
4397
|
padding-inline-end: calc(var(--ui-space-3) + 1.5rem);
|
|
4398
4398
|
background-image: var(
|
|
@@ -4403,10 +4403,10 @@ dialog[data-v-2ba71171] {
|
|
|
4403
4403
|
background-position: right var(--ui-space-3) center;
|
|
4404
4404
|
background-size: 1.125rem 1.125rem;
|
|
4405
4405
|
}
|
|
4406
|
-
[data-component~="ui-select"][data-v-
|
|
4406
|
+
[data-component~="ui-select"][data-v-e15c964d]:hover:not(:focus):not(:disabled) {
|
|
4407
4407
|
border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
|
|
4408
4408
|
}
|
|
4409
|
-
[data-component~="ui-select"][data-v-
|
|
4409
|
+
[data-component~="ui-select"][data-v-e15c964d]:focus-visible {
|
|
4410
4410
|
border-color: var(--ui-control-focus, var(--ui-accent-solid));
|
|
4411
4411
|
outline: none;
|
|
4412
4412
|
box-shadow: var(
|
|
@@ -4417,28 +4417,28 @@ dialog[data-v-2ba71171] {
|
|
|
4417
4417
|
}
|
|
4418
4418
|
|
|
4419
4419
|
/* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
|
|
4420
|
-
[data-component~="ui-select"][aria-invalid="true"][data-v-
|
|
4421
|
-
[data-component~="ui-select"][data-v-
|
|
4420
|
+
[data-component~="ui-select"][aria-invalid="true"][data-v-e15c964d],
|
|
4421
|
+
[data-component~="ui-select"][data-v-e15c964d]:is(:user-invalid, [data-user-invalid]) {
|
|
4422
4422
|
border-color: var(--ui-danger-solid);
|
|
4423
4423
|
}
|
|
4424
|
-
[data-component~="ui-select"][data-v-
|
|
4424
|
+
[data-component~="ui-select"][data-v-e15c964d]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
|
|
4425
4425
|
box-shadow:
|
|
4426
4426
|
var(--ui-control-inset),
|
|
4427
4427
|
0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
|
|
4428
4428
|
}
|
|
4429
|
-
[data-component~="ui-select"][data-v-
|
|
4429
|
+
[data-component~="ui-select"][data-v-e15c964d]:disabled {
|
|
4430
4430
|
background-color: var(--ui-control-surface-disabled, var(--ui-surface-muted));
|
|
4431
|
-
color: var(--ui-text
|
|
4431
|
+
color: var(--ui-disabled-text);
|
|
4432
4432
|
box-shadow: none;
|
|
4433
4433
|
cursor: not-allowed;
|
|
4434
4434
|
}
|
|
4435
|
-
[data-component~="ui-select"][size][data-v-
|
|
4435
|
+
[data-component~="ui-select"][size][data-v-e15c964d]:not([size="1"]) {
|
|
4436
4436
|
min-block-size: 7rem;
|
|
4437
4437
|
padding: var(--ui-space-2);
|
|
4438
4438
|
}
|
|
4439
4439
|
|
|
4440
4440
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
4441
|
-
[data-component~="ui-select"][hidden][data-v-
|
|
4441
|
+
[data-component~="ui-select"][hidden][data-v-e15c964d] {
|
|
4442
4442
|
display: none;
|
|
4443
4443
|
}
|
|
4444
4444
|
|
|
@@ -4751,7 +4751,7 @@ to {
|
|
|
4751
4751
|
display: none;
|
|
4752
4752
|
}
|
|
4753
4753
|
|
|
4754
|
-
[data-component~="ui-switch"][data-v-
|
|
4754
|
+
[data-component~="ui-switch"][data-v-afb9ea1d] {
|
|
4755
4755
|
display: inline-flex;
|
|
4756
4756
|
align-items: flex-start;
|
|
4757
4757
|
gap: var(--ui-switch-gap, var(--ui-space-2));
|
|
@@ -4761,25 +4761,25 @@ to {
|
|
|
4761
4761
|
}
|
|
4762
4762
|
|
|
4763
4763
|
/* The label, and under it an optional line saying what the choice means. */
|
|
4764
|
-
.text[data-v-
|
|
4764
|
+
.text[data-v-afb9ea1d] {
|
|
4765
4765
|
display: flex;
|
|
4766
4766
|
flex-direction: column;
|
|
4767
4767
|
gap: var(--ui-space-1);
|
|
4768
4768
|
min-inline-size: 0;
|
|
4769
4769
|
}
|
|
4770
|
-
.label[data-v-
|
|
4770
|
+
.label[data-v-afb9ea1d] {
|
|
4771
4771
|
min-inline-size: 0;
|
|
4772
4772
|
line-height: var(--ui-line-height-md);
|
|
4773
4773
|
}
|
|
4774
|
-
.description[data-v-
|
|
4774
|
+
.description[data-v-afb9ea1d] {
|
|
4775
4775
|
color: var(--ui-text-secondary);
|
|
4776
4776
|
font-size: var(--ui-font-size-sm);
|
|
4777
4777
|
line-height: var(--ui-line-height);
|
|
4778
4778
|
}
|
|
4779
|
-
.description[data-v-
|
|
4779
|
+
.description[data-v-afb9ea1d]:empty {
|
|
4780
4780
|
display: none;
|
|
4781
4781
|
}
|
|
4782
|
-
input[data-v-
|
|
4782
|
+
input[data-v-afb9ea1d] {
|
|
4783
4783
|
appearance: none;
|
|
4784
4784
|
-webkit-appearance: none;
|
|
4785
4785
|
position: relative;
|
|
@@ -4797,7 +4797,7 @@ input[data-v-85cb3260] {
|
|
|
4797
4797
|
border-color var(--ui-motion-fast) var(--ui-motion-ease);
|
|
4798
4798
|
margin: 0;
|
|
4799
4799
|
}
|
|
4800
|
-
input[data-v-
|
|
4800
|
+
input[data-v-afb9ea1d]::after {
|
|
4801
4801
|
content: "";
|
|
4802
4802
|
position: absolute;
|
|
4803
4803
|
top: 3px;
|
|
@@ -4809,35 +4809,35 @@ input[data-v-85cb3260]::after {
|
|
|
4809
4809
|
box-shadow: var(--ui-shadow-xs);
|
|
4810
4810
|
transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
|
|
4811
4811
|
}
|
|
4812
|
-
input[data-v-
|
|
4812
|
+
input[data-v-afb9ea1d]:checked {
|
|
4813
4813
|
background: var(--ui-accent-solid);
|
|
4814
4814
|
border-color: var(--ui-accent-solid);
|
|
4815
4815
|
}
|
|
4816
|
-
input[data-v-
|
|
4816
|
+
input[data-v-afb9ea1d]:checked::after {
|
|
4817
4817
|
transform: translateX(1rem);
|
|
4818
4818
|
background: var(--ui-text-on-accent);
|
|
4819
4819
|
}
|
|
4820
|
-
input[data-v-
|
|
4820
|
+
input[data-v-afb9ea1d]:focus-visible {
|
|
4821
4821
|
outline: 2px solid var(--ui-focus-ring, var(--ui-accent-solid));
|
|
4822
4822
|
outline-offset: 2px;
|
|
4823
4823
|
}
|
|
4824
|
-
[data-component~="ui-switch"][data-ui-switch-state~="disabled"][data-v-
|
|
4825
|
-
color: var(--ui-text
|
|
4824
|
+
[data-component~="ui-switch"][data-ui-switch-state~="disabled"][data-v-afb9ea1d] {
|
|
4825
|
+
color: var(--ui-disabled-text);
|
|
4826
4826
|
cursor: not-allowed;
|
|
4827
4827
|
}
|
|
4828
|
-
[data-component~="ui-switch"][data-ui-switch-state~="disabled"] input[data-v-
|
|
4828
|
+
[data-component~="ui-switch"][data-ui-switch-state~="disabled"] input[data-v-afb9ea1d] {
|
|
4829
4829
|
border-color: var(--ui-border-default);
|
|
4830
4830
|
background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
|
|
4831
4831
|
cursor: not-allowed;
|
|
4832
4832
|
}
|
|
4833
4833
|
@media (prefers-reduced-motion: reduce) {
|
|
4834
|
-
input[data-v-
|
|
4834
|
+
input[data-v-afb9ea1d], input[data-v-afb9ea1d]::after {
|
|
4835
4835
|
transition: none;
|
|
4836
4836
|
}
|
|
4837
4837
|
}
|
|
4838
4838
|
|
|
4839
4839
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
4840
|
-
[data-component~="ui-switch"][hidden][data-v-
|
|
4840
|
+
[data-component~="ui-switch"][hidden][data-v-afb9ea1d] {
|
|
4841
4841
|
display: none;
|
|
4842
4842
|
}
|
|
4843
4843
|
|
|
@@ -5096,7 +5096,7 @@ input[data-v-85cb3260], input[data-v-85cb3260]::after {
|
|
|
5096
5096
|
display: none;
|
|
5097
5097
|
}
|
|
5098
5098
|
|
|
5099
|
-
[data-component~="ui-textarea"][data-v-
|
|
5099
|
+
[data-component~="ui-textarea"][data-v-860b69d7] {
|
|
5100
5100
|
box-sizing: border-box;
|
|
5101
5101
|
display: inline-block;
|
|
5102
5102
|
inline-size: 100%;
|
|
@@ -5120,18 +5120,18 @@ input[data-v-85cb3260], input[data-v-85cb3260]::after {
|
|
|
5120
5120
|
}
|
|
5121
5121
|
|
|
5122
5122
|
/* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
|
|
5123
|
-
[data-component~="ui-textarea"][data-v-
|
|
5123
|
+
[data-component~="ui-textarea"][data-v-860b69d7]::selection {
|
|
5124
5124
|
background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
|
|
5125
5125
|
color: inherit;
|
|
5126
5126
|
}
|
|
5127
|
-
[data-component~="ui-textarea"][data-v-
|
|
5127
|
+
[data-component~="ui-textarea"][data-v-860b69d7]::placeholder {
|
|
5128
5128
|
color: var(--ui-control-placeholder, var(--ui-text-secondary));
|
|
5129
5129
|
opacity: 1;
|
|
5130
5130
|
}
|
|
5131
|
-
[data-component~="ui-textarea"][data-v-
|
|
5131
|
+
[data-component~="ui-textarea"][data-v-860b69d7]:hover:not(:focus):not(:disabled) {
|
|
5132
5132
|
border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
|
|
5133
5133
|
}
|
|
5134
|
-
[data-component~="ui-textarea"][data-v-
|
|
5134
|
+
[data-component~="ui-textarea"][data-v-860b69d7]:focus-visible {
|
|
5135
5135
|
border-color: var(--ui-control-focus, var(--ui-accent-solid));
|
|
5136
5136
|
outline: none;
|
|
5137
5137
|
box-shadow: var(
|
|
@@ -5142,24 +5142,24 @@ input[data-v-85cb3260], input[data-v-85cb3260]::after {
|
|
|
5142
5142
|
}
|
|
5143
5143
|
|
|
5144
5144
|
/* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
|
|
5145
|
-
[data-component~="ui-textarea"][aria-invalid="true"][data-v-
|
|
5146
|
-
[data-component~="ui-textarea"][data-v-
|
|
5145
|
+
[data-component~="ui-textarea"][aria-invalid="true"][data-v-860b69d7],
|
|
5146
|
+
[data-component~="ui-textarea"][data-v-860b69d7]:is(:user-invalid, [data-user-invalid]) {
|
|
5147
5147
|
border-color: var(--ui-danger-solid);
|
|
5148
5148
|
}
|
|
5149
|
-
[data-component~="ui-textarea"][data-v-
|
|
5149
|
+
[data-component~="ui-textarea"][data-v-860b69d7]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
|
|
5150
5150
|
box-shadow:
|
|
5151
5151
|
var(--ui-control-inset),
|
|
5152
5152
|
0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
|
|
5153
5153
|
}
|
|
5154
|
-
[data-component~="ui-textarea"][data-v-
|
|
5154
|
+
[data-component~="ui-textarea"][data-v-860b69d7]:disabled {
|
|
5155
5155
|
background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
|
|
5156
|
-
color: var(--ui-text
|
|
5156
|
+
color: var(--ui-disabled-text);
|
|
5157
5157
|
box-shadow: none;
|
|
5158
5158
|
cursor: not-allowed;
|
|
5159
5159
|
}
|
|
5160
5160
|
|
|
5161
5161
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
5162
|
-
[data-component~="ui-textarea"][hidden][data-v-
|
|
5162
|
+
[data-component~="ui-textarea"][hidden][data-v-860b69d7] {
|
|
5163
5163
|
display: none;
|
|
5164
5164
|
}
|
|
5165
5165
|
|