@simplybusiness/theme-simplybusiness 0.4.0 → 0.5.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/CHANGELOG.md CHANGED
@@ -1,5 +1,45 @@
1
1
  # @simplybusiness/theme-simplybusiness
2
2
 
3
+ ## 0.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 12a7443: Add `CoverageSummary` component
8
+
9
+ ### Patch Changes
10
+
11
+ - 3f02903: Upgrade dependencies
12
+ - af09896: Update CSS imports to not import from outside their own package directory
13
+ - Updated dependencies [3f02903]
14
+ - Updated dependencies [00fe4f6]
15
+ - Updated dependencies [e166ef7]
16
+ - Updated dependencies [2973f98]
17
+ - Updated dependencies [7c79f01]
18
+ - Updated dependencies [61d44d8]
19
+ - Updated dependencies [77ff096]
20
+ - Updated dependencies [63a5682]
21
+ - Updated dependencies [0249d06]
22
+ - Updated dependencies [af09896]
23
+ - Updated dependencies [3d1f7b8]
24
+ - Updated dependencies [9c886ca]
25
+ - Updated dependencies [12a7443]
26
+ - Updated dependencies [ffb1bbe]
27
+ - @simplybusiness/mobius-datepicker@6.0.5
28
+ - @simplybusiness/mobius-journey@6.5.0
29
+ - @simplybusiness/theme-core@7.1.3
30
+ - @simplybusiness/mobius@5.2.0
31
+
32
+ ## 0.4.1
33
+
34
+ ### Patch Changes
35
+
36
+ - Updated dependencies [3af939c]
37
+ - Updated dependencies [05b1b77]
38
+ - @simplybusiness/mobius@5.1.2
39
+ - @simplybusiness/mobius-journey@6.4.1
40
+ - @simplybusiness/mobius-datepicker@6.0.4
41
+ - @simplybusiness/theme-core@7.1.2
42
+
3
43
  ## 0.4.0
4
44
 
5
45
  ### Minor Changes
package/dist/index.css CHANGED
@@ -40,17 +40,25 @@
40
40
  text-decoration:underline;
41
41
  text-underline-offset:6px;
42
42
  }
43
- .mobius-accordion__link:hover,
44
- .mobius-accordion__link:active{
43
+ .mobius-accordion__link:hover,.mobius-accordion__link:active{
45
44
  color:var(--color-secondary-hover);
46
45
  }
47
46
  .mobius-accordion__link:focus-visible{
48
47
  outline:none;
49
48
  box-shadow:var(--box-shadow-default);
50
49
  }
50
+ h1.mobius-accordion__link-text,
51
+ h2.mobius-accordion__link-text,
52
+ h3.mobius-accordion__link-text,
53
+ h4.mobius-accordion__link-text,
54
+ h5.mobius-accordion__link-text,
55
+ h6.mobius-accordion__link-text,
51
56
  .mobius-accordion__link-text{
57
+ margin:0;
52
58
  margin-right:var(--size-xs);
53
59
  line-height:var(--line-height-normal);
60
+ font-size:var(--font-size-regular);
61
+ font-weight:var(--font-weight-normal);
54
62
  }
55
63
  .mobius-accordion__link-icon{
56
64
  transition:transform var(--transition-duration);
@@ -119,8 +127,7 @@
119
127
  padding:0;
120
128
  flex-wrap:wrap;
121
129
  }
122
- .mobius-breadcrumb ul,
123
- .mobius-breadcrumb ol{
130
+ .mobius-breadcrumb ul,.mobius-breadcrumb ol{
124
131
  box-sizing:border-box;
125
132
  display:flex;
126
133
  align-items:center;
@@ -188,8 +195,7 @@
188
195
  --button-variant-primary-font-variation-settings
189
196
  );
190
197
  }
191
- .mobius-button:where(.--variant-primary):where(:active),
192
- .mobius-button:where(.--variant-primary):where(:hover){
198
+ .mobius-button:where(.--variant-primary):where(:active),.mobius-button:where(.--variant-primary):where(:hover){
193
199
  background-color:var(--button-variant-primary-hover-color);
194
200
  }
195
201
  .mobius-button:where(.--variant-primary):where(:focus-visible){
@@ -205,8 +211,7 @@
205
211
  background-color:transparent;
206
212
  border-color:var(--color-secondary);
207
213
  }
208
- .mobius-button:where(.--variant-secondary):where(:active),
209
- .mobius-button:where(.--variant-secondary):where(:hover){
214
+ .mobius-button:where(.--variant-secondary):where(:active),.mobius-button:where(.--variant-secondary):where(:hover){
210
215
  --button-content-color:var(--color-text-inverted);
211
216
  background-color:var(--color-secondary-hover);
212
217
  border-color:var(--color-secondary-hover);
@@ -264,7 +269,7 @@
264
269
  border-color:var(--color-valid);
265
270
  color:transparent;
266
271
  }
267
- .mobius-button:where(.--is-success) > :not(.mobius-button__icon-wrapper){
272
+ .mobius-button:where(.--is-success) > :not(.mobius-button__icon-wrapper){
268
273
  opacity:0;
269
274
  visibility:hidden;
270
275
  }
@@ -290,7 +295,7 @@
290
295
  .mobius-button:where(.--is-loading){
291
296
  color:transparent;
292
297
  }
293
- .mobius-button:where(.--is-loading) > :not(.mobius-button__icon-wrapper){
298
+ .mobius-button:where(.--is-loading) > :not(.mobius-button__icon-wrapper){
294
299
  opacity:0;
295
300
  visibility:hidden;
296
301
  }
@@ -310,8 +315,7 @@
310
315
  -webkit-text-decoration:underline;
311
316
  text-decoration:underline;
312
317
  }
313
- .mobius-button:where(.--variant-link):hover,
314
- .mobius-button:where(.--variant-link):active{
318
+ .mobius-button:where(.--variant-link):hover,.mobius-button:where(.--variant-link):active{
315
319
  --button-content-color:var(--color-secondary-hover);
316
320
  cursor:pointer;
317
321
  }
@@ -400,8 +404,7 @@ a.mobius-button:focus-visible,
400
404
  border-color:var(--color-error);
401
405
  color:var(--color-error);
402
406
  }
403
- .mobius-checkbox__label.--is-invalid:not(.--is-disabled):hover,
404
- .mobius-checkbox__label.--is-invalid:not(.--is-disabled):focus-within{
407
+ .mobius-checkbox__label.--is-invalid:not(.--is-disabled):hover,.mobius-checkbox__label.--is-invalid:not(.--is-disabled):focus-within{
405
408
  background-color:var(--color-error-background);
406
409
  }
407
410
  .mobius-checkbox__label.--is-invalid:not(.--is-disabled) .mobius-checkbox__icon{
@@ -429,8 +432,7 @@ a.mobius-button:focus-visible,
429
432
  display:grid;
430
433
  margin-bottom:var(--size-sm);
431
434
  }
432
- .mobius-checkbox-group .mobius-checkbox,
433
- .mobius-checkbox-group .mobius-checkbox-group__wrapper{
435
+ .mobius-checkbox-group .mobius-checkbox,.mobius-checkbox-group .mobius-checkbox-group__wrapper{
434
436
  margin-bottom:0;
435
437
  }
436
438
  .mobius-checkbox-group.--is-horizontal .mobius-checkbox-group__wrapper{
@@ -505,7 +507,7 @@ a.mobius-button:focus-visible,
505
507
  opacity:0;
506
508
  transition:opacity var(--drawer-transition-duration) ease-in-out;
507
509
  }
508
- .mobius-drawer + .backdrop{
510
+ .mobius-drawer + .backdrop{
509
511
  position:fixed;
510
512
  top:0;
511
513
  right:0;
@@ -514,23 +516,21 @@ a.mobius-button:focus-visible,
514
516
  background-color:var(--color-neutral-700);
515
517
  opacity:0.3;
516
518
  }
517
- :is(.mobius-drawer + .backdrop) + ._dialog_overlay{
519
+ :is(.mobius-drawer + .backdrop) + ._dialog_overlay{
518
520
  position:fixed;
519
521
  top:0;
520
522
  right:0;
521
523
  bottom:0;
522
524
  left:0;
523
525
  }
524
- .mobius-drawer.--top,
525
- .mobius-drawer.--bottom{
526
+ .mobius-drawer.--top,.mobius-drawer.--bottom{
526
527
  width:100vw;
527
528
  max-width:100vw;
528
529
  height:var(--drawer-height);
529
530
  max-height:var(--drawer-height);
530
531
  transition:transform var(--drawer-transition-duration) ease-in-out;
531
532
  }
532
- .mobius-drawer.--left,
533
- .mobius-drawer.--right{
533
+ .mobius-drawer.--left,.mobius-drawer.--right{
534
534
  bottom:0;
535
535
  width:100%;
536
536
  max-width:var(--drawer-width);
@@ -758,8 +758,7 @@ a.mobius-button:focus-visible,
758
758
  outline:none;
759
759
  border-radius:var(--radius-1);
760
760
  }
761
- .mobius-link:hover,
762
- .mobius-link:active{
761
+ .mobius-link:hover,.mobius-link:active{
763
762
  -webkit-text-decoration:underline;
764
763
  -webkit-text-decoration:underline;
765
764
  text-decoration:underline;
@@ -841,8 +840,8 @@ a.mobius-button:focus-visible,
841
840
  position:fixed;
842
841
  display:flex;
843
842
  flex-direction:column;
844
- width:50%;
845
- max-height:80%;
843
+ width:min(90%, 600px);
844
+ max-height:90%;
846
845
  padding:0;
847
846
  margin:auto;
848
847
  background-color:var(--color-background);
@@ -850,6 +849,12 @@ a.mobius-button:focus-visible,
850
849
  border-radius:var(--radius-1);
851
850
  overflow:hidden;
852
851
  }
852
+ @media (min-width: 768px){
853
+
854
+ .mobius-modal{
855
+ max-height:80%;
856
+ }
857
+ }
853
858
  .mobius-modal:not([open]){
854
859
  display:none;
855
860
  }
@@ -861,7 +866,7 @@ a.mobius-button:focus-visible,
861
866
  opacity:0;
862
867
  transition:opacity var(--modal-transition-duration) ease-in-out;
863
868
  }
864
- .mobius-modal + .backdrop{
869
+ .mobius-modal + .backdrop{
865
870
  position:fixed;
866
871
  top:0;
867
872
  right:0;
@@ -870,7 +875,7 @@ a.mobius-button:focus-visible,
870
875
  background-color:var(--color-neutral-700);
871
876
  opacity:0.3;
872
877
  }
873
- :is(.mobius-modal + .backdrop) + ._dialog_overlay{
878
+ :is(.mobius-modal + .backdrop) + ._dialog_overlay{
874
879
  position:fixed;
875
880
  top:0;
876
881
  right:0;
@@ -924,14 +929,29 @@ a.mobius-button:focus-visible,
924
929
  display:grid;
925
930
  grid-template-columns:1fr auto;
926
931
  justify-content:space-between;
927
- gap:var(--size-sm);
928
- align-items:center;
932
+ gap:var(--size-md);
933
+ align-items:start;
929
934
  padding:var(--size-xs);
930
935
  padding-left:var(--size-sm);
936
+ padding-right:var(--size-sm);
931
937
  font-family:var(--font-family);
932
- font-size:var(--font-size-small-title);
938
+ font-size:var(--font-size-4);
933
939
  margin:0;
934
940
  }
941
+ @media (min-width: 768px){
942
+
943
+ .mobius-modal__header{
944
+ padding:var(--size-sm);
945
+ padding-left:var(--size-md);
946
+ padding-right:var(--size-md);
947
+ font-size:var(--font-size-5);
948
+ }
949
+ }
950
+ .mobius-modal__close{
951
+ padding:calc(var(--size-sm) * -1);
952
+ font-size:var(--font-size-4);
953
+ flex-shrink:0;
954
+ }
935
955
  .mobius-modal__content{
936
956
  flex-grow:1;
937
957
  padding:0 var(--size-sm);
@@ -939,6 +959,13 @@ a.mobius-button:focus-visible,
939
959
  font-family:var(--font-family);
940
960
  overflow-y:auto;
941
961
  }
962
+ @media (min-width: 768px){
963
+
964
+ .mobius-modal__content{
965
+ padding:0 var(--size-md);
966
+ margin:var(--size-md) 0;
967
+ }
968
+ }
942
969
  :root,
943
970
  :host{
944
971
  --number-input-max-width:none;
@@ -1009,11 +1036,11 @@ a.mobius-button:focus-visible,
1009
1036
  transition:var(--transition-standard);
1010
1037
  user-select:none;
1011
1038
  }
1012
- .mobius-password-field :where(.mobius-password-field__show-button):focus-visible{
1039
+ :is(.mobius-password-field :where(.mobius-password-field__show-button)):focus-visible{
1013
1040
  box-shadow:var(--box-shadow-default);
1014
1041
  outline:none;
1015
1042
  }
1016
- .mobius-password-field :where(.mobius-password-field__show-button):hover{
1043
+ :is(.mobius-password-field :where(.mobius-password-field__show-button)):hover{
1017
1044
  background-color:var(--color-background-highlight);
1018
1045
  }
1019
1046
  .mobius-popover__container{
@@ -1158,7 +1185,7 @@ a.mobius-button:focus-visible,
1158
1185
  .mobius-radio__label.--is-selected:not(.--is-invalid .mobius-radio__label):not(.--is-disabled) .mobius-radio__input{
1159
1186
  outline-color:var(--color-primary-light);
1160
1187
  }
1161
- .mobius-radio__label.--is-selected:not(.--is-invalid .mobius-radio__label):not(.--is-disabled) .mobius-radio__input:checked::after{
1188
+ :is(.mobius-radio__label.--is-selected:not(.--is-invalid .mobius-radio__label):not(.--is-disabled) .mobius-radio__input):checked::after{
1162
1189
  background-color:var(--color-primary-light);
1163
1190
  }
1164
1191
  .mobius-radio__label:hover:not(.--is-disabled):not(.--is-invalid .mobius-radio__label){
@@ -1168,7 +1195,7 @@ a.mobius-button:focus-visible,
1168
1195
  .mobius-radio__label:hover:not(.--is-disabled):not(.--is-invalid .mobius-radio__label) .mobius-radio__input{
1169
1196
  outline-color:var(--color-primary);
1170
1197
  }
1171
- .mobius-radio__label:hover:not(.--is-disabled):not(.--is-invalid .mobius-radio__label) .mobius-radio__input:checked::after{
1198
+ :is(.mobius-radio__label:hover:not(.--is-disabled):not(.--is-invalid .mobius-radio__label) .mobius-radio__input):checked::after{
1172
1199
  background-color:var(--color-primary);
1173
1200
  }
1174
1201
  .mobius-radio__label:focus-within:not(.--is-disabled){
@@ -1181,7 +1208,7 @@ a.mobius-button:focus-visible,
1181
1208
  .mobius-radio__label:focus-within:not(.--is-disabled):not(.--is-invalid .mobius-radio__label:focus-within:not(.--is-disabled)) .mobius-radio__input{
1182
1209
  outline-color:var(--color-primary);
1183
1210
  }
1184
- .mobius-radio__label:focus-within:not(.--is-disabled):not(.--is-invalid .mobius-radio__label:focus-within:not(.--is-disabled)) .mobius-radio__input:checked::after{
1211
+ :is(.mobius-radio__label:focus-within:not(.--is-disabled):not(.--is-invalid .mobius-radio__label:focus-within:not(.--is-disabled)) .mobius-radio__input):checked::after{
1185
1212
  background-color:var(--color-primary);
1186
1213
  }
1187
1214
  .mobius-radio__label.--is-multiline{
@@ -1191,15 +1218,14 @@ a.mobius-button:focus-visible,
1191
1218
  border-color:var(--color-error);
1192
1219
  color:var(--color-error);
1193
1220
  }
1194
- .--is-invalid .mobius-radio__label:not(.--is-disabled):hover,
1195
- .--is-invalid .mobius-radio__label:not(.--is-disabled):focus-within{
1221
+ :is(.--is-invalid .mobius-radio__label:not(.--is-disabled)):hover,:is(.--is-invalid .mobius-radio__label:not(.--is-disabled)):focus-within{
1196
1222
  border-color:var(--color-error);
1197
1223
  background-color:var(--color-error-background);
1198
1224
  }
1199
- .--is-invalid .mobius-radio__label:not(.--is-disabled) .mobius-radio__input{
1225
+ :is(.--is-invalid .mobius-radio__label:not(.--is-disabled)) .mobius-radio__input{
1200
1226
  outline-color:var(--color-error);
1201
1227
  }
1202
- .--is-invalid .mobius-radio__label:not(.--is-disabled) .mobius-radio__input:checked::after{
1228
+ :is(:is(.--is-invalid .mobius-radio__label:not(.--is-disabled)) .mobius-radio__input):checked::after{
1203
1229
  background-color:var(--color-error);
1204
1230
  }
1205
1231
  .mobius-radio__content{
@@ -1229,54 +1255,46 @@ a.mobius-button:focus-visible,
1229
1255
  .mobius-segment-group.--is-horizontal{
1230
1256
  flex-direction:row;
1231
1257
  }
1232
- .mobius-segment-group .mobius-segment-group.gap-size-xs,
1233
- .mobius-segment-group.gap-size-xs{
1258
+ .mobius-segment-group .mobius-segment-group.gap-size-xs,.mobius-segment-group.gap-size-xs{
1234
1259
  margin:var(--size-xs);
1235
1260
  }
1236
- .mobius-segment-group .mobius-segment-group.gap-size-s,
1237
- .mobius-segment-group.gap-size-s{
1261
+ .mobius-segment-group .mobius-segment-group.gap-size-s,.mobius-segment-group.gap-size-s{
1238
1262
  margin:var(--size-sm);
1239
1263
  }
1240
- .mobius-segment-group .mobius-segment-group.gap-size-m,
1241
- .mobius-segment-group.gap-size-m{
1264
+ .mobius-segment-group .mobius-segment-group.gap-size-m,.mobius-segment-group.gap-size-m{
1242
1265
  margin:var(--size-md);
1243
1266
  }
1244
- .mobius-segment-group .mobius-segment-group.gap-size-l,
1245
- .mobius-segment-group.gap-size-l{
1267
+ .mobius-segment-group .mobius-segment-group.gap-size-l,.mobius-segment-group.gap-size-l{
1246
1268
  margin:var(--size-lm);
1247
1269
  }
1248
- .mobius-segment-group .mobius-segment-group.gap-size-xl,
1249
- .mobius-segment-group.gap-size-xl{
1270
+ .mobius-segment-group .mobius-segment-group.gap-size-xl,.mobius-segment-group.gap-size-xl{
1250
1271
  margin:var(--size-xl);
1251
1272
  }
1252
- .mobius-segment-group .mobius-segment-group.gap-size-xxl,
1253
- .mobius-segment-group.gap-size-xxl{
1273
+ .mobius-segment-group .mobius-segment-group.gap-size-xxl,.mobius-segment-group.gap-size-xxl{
1254
1274
  margin:var(--size-xxl);
1255
1275
  }
1256
1276
  .mobius-segment-group > .mobius-segment{
1257
1277
  border:none;
1258
1278
  border-top:var(--segment-border);
1259
1279
  }
1260
- .mobius-segment-group:not(.--is-horizontal) > .mobius-segment:first-child{
1280
+ :is(.mobius-segment-group:not(.--is-horizontal) > .mobius-segment):first-child{
1261
1281
  border-top:none;
1262
1282
  border-radius:var(--radius-2);
1263
1283
  }
1264
- .mobius-segment-group:not(.--is-horizontal) > .mobius-segment:not(:first-child):not(:last-child){
1284
+ :is(.mobius-segment-group:not(.--is-horizontal) > .mobius-segment):not(:first-child):not(:last-child){
1265
1285
  border-radius:0;
1266
1286
  border-bottom:0;
1267
1287
  }
1268
- .mobius-segment-group:not(.--is-horizontal) > .mobius-segment:last-child{
1288
+ :is(.mobius-segment-group:not(.--is-horizontal) > .mobius-segment):last-child{
1269
1289
  border-top-left-radius:0;
1270
1290
  border-top-right-radius:0;
1271
1291
  }
1272
- .mobius-segment-group.--is-horizontal > .mobius-segment,
1273
- .mobius-segment-group.--is-horizontal > .mobius-segment-group{
1292
+ .mobius-segment-group.--is-horizontal > .mobius-segment,.mobius-segment-group.--is-horizontal > .mobius-segment-group{
1274
1293
  border:none;
1275
1294
  border-radius:0;
1276
1295
  border-left:var(--segment-border);
1277
1296
  }
1278
- .mobius-segment-group.--is-horizontal > .mobius-segment:first-child,
1279
- .mobius-segment-group.--is-horizontal > .mobius-segment-group:first-child{
1297
+ .mobius-segment-group.--is-horizontal > .mobius-segment:first-child,.mobius-segment-group.--is-horizontal > .mobius-segment-group:first-child{
1280
1298
  border-left:0;
1281
1299
  border-top-right-radius:0;
1282
1300
  border-bottom-right-radius:0;
@@ -1295,15 +1313,13 @@ a.mobius-button:focus-visible,
1295
1313
  margin-bottom:0;
1296
1314
  flex:1;
1297
1315
  }
1298
- .mobius-segment-group .mobius-segment-group > .mobius-segment-group.--is-horizontal{
1316
+ :is(.mobius-segment-group .mobius-segment-group) > .mobius-segment-group.--is-horizontal{
1299
1317
  border-radius:0;
1300
1318
  border:0;
1301
1319
  border-top:var(--segment-border);
1302
1320
  margin:0;
1303
1321
  }
1304
- .mobius-segment-group .mobius-segment-group:not(.--is-horizontal)
1305
- > .mobius-segment-group:not(.--is-horizontal)
1306
- .mobius-segment:first-child{
1322
+ :is(.mobius-segment-group .mobius-segment-group):not(.--is-horizontal) > .mobius-segment-group:not(.--is-horizontal) .mobius-segment:first-child{
1307
1323
  border-top:var(--segment-border);
1308
1324
  }
1309
1325
  .mobius-segment{
@@ -1316,25 +1332,17 @@ a.mobius-button:focus-visible,
1316
1332
  border-radius:var(--radius-2);
1317
1333
  padding:var(--size-sm);
1318
1334
  }
1319
- .mobius-segment .mobius-text,
1320
- .mobius-segment .mobius-text.--is-h1,
1321
- .mobius-segment .mobius-text.--is-h2,
1322
- .mobius-segment .mobius-text.--is-h3,
1323
- .mobius-segment .mobius-text.--is-h4{
1335
+ .mobius-segment .mobius-text,.mobius-segment .mobius-text.--is-h1,.mobius-segment .mobius-text.--is-h2,.mobius-segment .mobius-text.--is-h3,.mobius-segment .mobius-text.--is-h4{
1324
1336
  margin:0;
1325
1337
  }
1326
- .mobius-segment h1,
1327
- .mobius-segment h2,
1328
- .mobius-segment h3,
1329
- .mobius-segment h4,
1330
- .mobius-segment p{
1338
+ .mobius-segment h1,.mobius-segment h2,.mobius-segment h3,.mobius-segment h4,.mobius-segment p{
1331
1339
  margin:0;
1332
1340
  }
1333
1341
  .mobius-segment .mobius-text.--is-p{
1334
1342
  line-height:var(--font-size-lead);
1335
1343
  }
1336
1344
  .mobius-segment.subtle{
1337
- background-color:var(--color-background-highlight);
1345
+ background-color:var(--color-border-light);
1338
1346
  }
1339
1347
  .mobius-segment.grey{
1340
1348
  background-color:var(--color-background-light);
@@ -1348,11 +1356,7 @@ a.mobius-button:focus-visible,
1348
1356
  .mobius-segment.inverted{
1349
1357
  color:var(--color-text-inverted);
1350
1358
  }
1351
- .mobius-segment .mobius-text-field:last-child,
1352
- .mobius-segment .mobius-checkbox:last-child,
1353
- .mobius-segment .mobius-radio-group:last-child,
1354
- .mobius-segment .mobius-text-area:last-child,
1355
- .mobius-segment .mobius-select__outer:last-child{
1359
+ .mobius-segment .mobius-text-field:last-child,.mobius-segment .mobius-checkbox:last-child,.mobius-segment .mobius-radio-group:last-child,.mobius-segment .mobius-text-area:last-child,.mobius-segment .mobius-select__outer:last-child{
1356
1360
  margin-bottom:0 !important;
1357
1361
  }
1358
1362
  .mobius-segment .mobius-segment-group{
@@ -1373,7 +1377,7 @@ a.mobius-button:focus-visible,
1373
1377
  box-sizing:border-box;
1374
1378
  width:100%;
1375
1379
  }
1376
- .mobius-select__outer > :where(.mobius-label.--is-optional)::after{
1380
+ .mobius-select__outer > :where(.mobius-label.--is-optional)::after{
1377
1381
  content:" (optional)";
1378
1382
  }
1379
1383
  .mobius-select__wrapper{
@@ -1629,6 +1633,7 @@ a.mobius-button:focus-visible,
1629
1633
  font-size:var(--font-size-regular);
1630
1634
  font-weight:var(--font-weight-normal);
1631
1635
  line-height:var(--line-height-normal);
1636
+ text-wrap:pretty;
1632
1637
  }
1633
1638
  .mobius-text:where(.--is-h1){
1634
1639
  box-sizing:border-box;
@@ -1637,6 +1642,7 @@ a.mobius-button:focus-visible,
1637
1642
  font-weight:var(--font-weight-bold);
1638
1643
  line-height:1.25;
1639
1644
  margin:0.35em 0;
1645
+ text-wrap:balance;
1640
1646
  }
1641
1647
  .mobius-text:where(.--is-h2){
1642
1648
  box-sizing:border-box;
@@ -1645,6 +1651,7 @@ a.mobius-button:focus-visible,
1645
1651
  font-weight:var(--font-weight-bold);
1646
1652
  line-height:var(--line-height-tight);
1647
1653
  margin:0.45em 0;
1654
+ text-wrap:balance;
1648
1655
  }
1649
1656
  .mobius-text:where(.--is-h3){
1650
1657
  box-sizing:border-box;
@@ -1653,6 +1660,7 @@ a.mobius-button:focus-visible,
1653
1660
  font-weight:var(--font-weight-bold);
1654
1661
  line-height:1.2;
1655
1662
  margin:0.5em 0;
1663
+ text-wrap:balance;
1656
1664
  }
1657
1665
  .mobius-text:where(.--is-h4){
1658
1666
  box-sizing:border-box;
@@ -1661,6 +1669,7 @@ a.mobius-button:focus-visible,
1661
1669
  font-weight:var(--font-weight-bold);
1662
1670
  line-height:var(--line-height-normal);
1663
1671
  margin:0.55em 0;
1672
+ text-wrap:balance;
1664
1673
  }
1665
1674
  .mobius-text:where(.--is-span){
1666
1675
  box-sizing:border-box;
@@ -1754,7 +1763,7 @@ a.mobius-button:focus-visible,
1754
1763
  flex-wrap:wrap;
1755
1764
  align-items:stretch;
1756
1765
  }
1757
- .mobius-text-field__prefix-outside.mobius-text, .mobius-text-field__suffix-outside.mobius-text{
1766
+ .mobius-text:is(.mobius-text-field__prefix-outside,.mobius-text-field__suffix-outside){
1758
1767
  margin-top:0;
1759
1768
  margin-bottom:0;
1760
1769
  align-self:center;
@@ -1763,7 +1772,7 @@ a.mobius-button:focus-visible,
1763
1772
  border-top-right-radius:0;
1764
1773
  border-bottom-right-radius:0;
1765
1774
  }
1766
- .mobius-text-field__prefix-outside.mobius-button + .mobius-text-field__input-wrapper{
1775
+ .mobius-text-field__prefix-outside.mobius-button + .mobius-text-field__input-wrapper{
1767
1776
  border-top-left-radius:0;
1768
1777
  border-bottom-left-radius:0;
1769
1778
  }
@@ -1782,12 +1791,12 @@ a.mobius-button:focus-visible,
1782
1791
  display:flex;
1783
1792
  color:var(--color-primary-light);
1784
1793
  }
1785
- .mobius-text-field__prefix-inside.mobius-button, .mobius-text-field__suffix-inside.mobius-button{
1794
+ .mobius-button:is(.mobius-text-field__prefix-inside,.mobius-text-field__suffix-inside){
1786
1795
  min-height:100%;
1787
1796
  border-radius:0;
1788
1797
  align-self:stretch;
1789
1798
  }
1790
- .mobius-text-field__prefix-inside.mobius-text, .mobius-text-field__suffix-inside.mobius-text{
1799
+ .mobius-text:is(.mobius-text-field__prefix-inside,.mobius-text-field__suffix-inside){
1791
1800
  margin-top:0;
1792
1801
  margin-bottom:0;
1793
1802
  }
@@ -1809,7 +1818,7 @@ a.mobius-button:focus-visible,
1809
1818
  .mobius-text-field__input-wrapper:not(.--is-hidden){
1810
1819
  border:var(--border-default);
1811
1820
  }
1812
- .mobius-text-field__input-wrapper:has(+ .mobius-button){
1821
+ .mobius-text-field__input-wrapper:has( + .mobius-button){
1813
1822
  border-top-right-radius:0;
1814
1823
  border-bottom-right-radius:0;
1815
1824
  }
@@ -1818,16 +1827,14 @@ a.mobius-button:focus-visible,
1818
1827
  background-color:var(--color-background-input-active);
1819
1828
  box-shadow:var(--box-shadow-default);
1820
1829
  }
1821
- .mobius-text-field__input-wrapper:focus-within .mobius-text-field__prefix-inside,
1822
- .mobius-text-field__input-wrapper:focus-within .mobius-text-field__suffix-inside{
1830
+ .mobius-text-field__input-wrapper:focus-within .mobius-text-field__prefix-inside,.mobius-text-field__input-wrapper:focus-within .mobius-text-field__suffix-inside{
1823
1831
  color:var(--color-primary);
1824
1832
  }
1825
1833
  .mobius-text-field__input-wrapper:hover:not(.--is-disabled):not(.mobius-text-field__input-wrapper.--is-invalid){
1826
1834
  border-color:var(--color-primary);
1827
1835
  background-color:var(--color-background-input-active);
1828
1836
  }
1829
- .mobius-text-field__input-wrapper:hover:not(.--is-disabled):not(.mobius-text-field__input-wrapper.--is-invalid) .mobius-text-field__prefix-inside,
1830
- .mobius-text-field__input-wrapper:hover:not(.--is-disabled):not(.mobius-text-field__input-wrapper.--is-invalid) .mobius-text-field__suffix-inside{
1837
+ .mobius-text-field__input-wrapper:hover:not(.--is-disabled):not(.mobius-text-field__input-wrapper.--is-invalid) .mobius-text-field__prefix-inside,.mobius-text-field__input-wrapper:hover:not(.--is-disabled):not(.mobius-text-field__input-wrapper.--is-invalid) .mobius-text-field__suffix-inside{
1831
1838
  color:var(--color-primary);
1832
1839
  }
1833
1840
  .mobius-text-field__input-wrapper.--is-disabled{
@@ -2345,15 +2352,13 @@ svg:not(:host).svg-inline--mobius-icon{
2345
2352
  --box-shadow-default:0 0 0 var(--size-focus-ring) var(--color-focus);
2346
2353
  --popover-max-width:260px;
2347
2354
  --popover-z-index:2147483647;
2348
- --color-background-popover:var(--color-neutral-700);
2355
+ --color-background-popover:var(--color-azure-700);
2349
2356
  --color-text-popover:#fff;
2350
2357
  }
2351
2358
  .mobius{
2352
2359
  font-family:var(--font-family);
2353
2360
  }
2354
- .mobius *,
2355
- .mobius *::before,
2356
- .mobius *::after{
2361
+ .mobius *,.mobius *::before,.mobius *::after{
2357
2362
  box-sizing:border-box;
2358
2363
  }
2359
2364
  .mobius-actions{
@@ -2403,7 +2408,7 @@ svg:not(:host).svg-inline--mobius-icon{
2403
2408
  max-width:var(--percentage-max-width);
2404
2409
  margin-bottom:0;
2405
2410
  }
2406
- .mobius-percentage-totals-question__items .mobius-number-field input{
2411
+ :is(.mobius-percentage-totals-question__items .mobius-number-field) input{
2407
2412
  max-width:var(--percentage-max-width);
2408
2413
  }
2409
2414
  .mobius-percentage-totals-question__items .mobius-number-field__input{
@@ -2474,13 +2479,13 @@ svg:not(:host).svg-inline--mobius-icon{
2474
2479
  background-color:var(--color-background-light);
2475
2480
  padding:var(--size-sm) var(--size-sm) var(--size-xxs) var(--size-lg);
2476
2481
  }
2477
- .mobius-question-group .mobius-question:hover{
2482
+ :is(.mobius-question-group .mobius-question):hover{
2478
2483
  background-color:var(--color-background-highlight);
2479
2484
  }
2480
- .mobius-question-group .mobius-question .mobius-radio-group{
2485
+ :is(.mobius-question-group .mobius-question) .mobius-radio-group{
2481
2486
  width:50%;
2482
2487
  }
2483
- .mobius-question-group .mobius-question .mobius-question__label{
2488
+ :is(.mobius-question-group .mobius-question) .mobius-question__label{
2484
2489
  padding-right:var(--size-lg);
2485
2490
  }
2486
2491
  .mobius-question-group__header{
@@ -2518,8 +2523,7 @@ svg:not(:host).svg-inline--mobius-icon{
2518
2523
  border-radius:50%;
2519
2524
  color:var(--color-text-inverted);
2520
2525
  }
2521
- .mobius-question-help__trigger:hover,
2522
- .mobius-question-help__trigger:focus-visible{
2526
+ .mobius-question-help__trigger:hover,.mobius-question-help__trigger:focus-visible{
2523
2527
  background-color:var(--color-primary-hover);
2524
2528
  }
2525
2529
  .mobius-question-help__trigger > span{
@@ -2631,6 +2635,36 @@ svg:not(:host).svg-inline--mobius-icon{
2631
2635
  .mobius-agent-resources .mobius-link-button{
2632
2636
  text-align:center;
2633
2637
  }
2638
+ .mobius-coverage-summary__list{
2639
+ margin-bottom:var(--size-md);
2640
+ }
2641
+ .mobius-payment-summary{
2642
+ border:1px solid var(--color-border);
2643
+ }
2644
+ .mobius-payment-summary .mobius-segment{
2645
+ border-top:1px solid var(--color-border);
2646
+ }
2647
+ .mobius-payment-summary .mobius-flex{
2648
+ width:100%;
2649
+ }
2650
+ .mobius-payment-summary__total strong{
2651
+ font-size:var(--font-size-lead);
2652
+ }
2653
+ :is(.mobius-quote-summary .mobius-payment-info__multi-product-text) strong{
2654
+ font-size:var(--font-size-lead);
2655
+ }
2656
+ .mobius-quote-summary .mobius-quote-card__coverage{
2657
+ border-right:none;
2658
+ border-top:1px solid var(--color-border-light);
2659
+ margin:var(--size-md) 0 var(--size-sm);
2660
+ padding-right:0;
2661
+ padding-top:var(--size-sm);
2662
+ }
2663
+ .mobius-quote-summary .mobius-quote-card__modal-trigger{
2664
+ background:transparent;
2665
+ font-weight:var(--font-weight-normal);
2666
+ padding:0;
2667
+ }
2634
2668
  .mobius-footer{
2635
2669
  background-color:var(--color-background-light);
2636
2670
  padding:64px var(--size-sm) var(--size-lg);
@@ -2719,7 +2753,7 @@ svg:not(:host).svg-inline--mobius-icon{
2719
2753
  color:var(--color-primary);
2720
2754
  transition:var(--transition-standard);
2721
2755
  }
2722
- .mobius-footer__opening-hours-toggle:hover .mobius-footer__opening-hours-toggle-icon, .mobius-footer__opening-hours-toggle:active .mobius-footer__opening-hours-toggle-icon, .mobius-footer__opening-hours-toggle:focus-visible .mobius-footer__opening-hours-toggle-icon{
2756
+ :is(.mobius-footer__opening-hours-toggle:hover,.mobius-footer__opening-hours-toggle:active,.mobius-footer__opening-hours-toggle:focus-visible) .mobius-footer__opening-hours-toggle-icon{
2723
2757
  color:var(--color-primary-hover);
2724
2758
  }
2725
2759
  .mobius-footer__opening-hours-list{
@@ -2794,7 +2828,7 @@ svg:not(:host).svg-inline--mobius-icon{
2794
2828
  .mobius-header{
2795
2829
  border-bottom:var(--size-border-width) solid var(--header-border-color);
2796
2830
  background-color:var(--header-background-color);
2797
- padding:15px 0;
2831
+ padding:var(--size-sm);
2798
2832
  }
2799
2833
  .mobius-header__content{
2800
2834
  display:flex;
@@ -2810,7 +2844,6 @@ svg:not(:host).svg-inline--mobius-icon{
2810
2844
  background-position:left center;
2811
2845
  width:115px;
2812
2846
  height:32px;
2813
- margin-left:10px;
2814
2847
  text-indent:-999px;
2815
2848
  }
2816
2849
  @media screen and (min-width: 641px){
@@ -2935,17 +2968,12 @@ svg:not(:host).svg-inline--mobius-icon{
2935
2968
  .mobius-next-coverage{
2936
2969
  border:1px solid var(--color-border);
2937
2970
  border-radius:var(--radius-2);
2971
+ height:max-content;
2938
2972
  padding:var(--size-lg) var(--size-sm);
2939
2973
  }
2940
2974
  .mobius-next-coverage__text{
2941
2975
  margin-bottom:var(--size-lg);
2942
2976
  }
2943
- .mobius-payment-summary .mobius-flex{
2944
- width:100%;
2945
- }
2946
- .mobius-payment-summary__total strong{
2947
- font-size:var(--font-size-lead);
2948
- }
2949
2977
  .mobius-insurance-benefits{
2950
2978
  padding:var(--size-lg) var(--size-sm);
2951
2979
  background-color:var(--color-background-highlight);
@@ -3050,7 +3078,7 @@ svg:not(:host).svg-inline--mobius-icon{
3050
3078
  background-color:var(--progress-steps-tertiary-color);
3051
3079
  border-color:var(--progress-steps-tertiary-color);
3052
3080
  }
3053
- .mobius-progress-steps__item.--is-active .mobius-progress-steps__item-shape::after{
3081
+ :is(.mobius-progress-steps__item.--is-active .mobius-progress-steps__item-shape)::after{
3054
3082
  background-color:var(--progress-steps-secondary-color);
3055
3083
  }
3056
3084
  .mobius-progress-steps__item.--is-active .mobius-progress-steps__item-number{
@@ -3059,17 +3087,17 @@ svg:not(:host).svg-inline--mobius-icon{
3059
3087
  .mobius-progress-steps__item.--is-complete::after{
3060
3088
  background-color:var(--progress-steps-primary-color);
3061
3089
  }
3062
- .mobius-progress-steps__item.--is-complete .mobius-progress-steps__item-link:hover .mobius-progress-steps__item-shape, .mobius-progress-steps__item.--is-complete .mobius-progress-steps__item-link:focus-visible .mobius-progress-steps__item-shape{
3090
+ :is(:is(.mobius-progress-steps__item.--is-complete .mobius-progress-steps__item-link):hover,:is(.mobius-progress-steps__item.--is-complete .mobius-progress-steps__item-link):focus-visible) .mobius-progress-steps__item-shape{
3063
3091
  background-color:var(--progress-steps-primary-color);
3064
3092
  }
3065
- .mobius-progress-steps__item.--is-complete .mobius-progress-steps__item-link:hover .mobius-progress-steps__item-icon, .mobius-progress-steps__item.--is-complete .mobius-progress-steps__item-link:focus-visible .mobius-progress-steps__item-icon{
3093
+ :is(:is(.mobius-progress-steps__item.--is-complete .mobius-progress-steps__item-link):hover,:is(.mobius-progress-steps__item.--is-complete .mobius-progress-steps__item-link):focus-visible) .mobius-progress-steps__item-icon{
3066
3094
  color:var(--color-text-inverted);
3067
3095
  }
3068
3096
  .mobius-progress-steps__item.--is-complete .mobius-progress-steps__item-shape{
3069
3097
  border-color:var(--progress-steps-primary-color);
3070
3098
  background-color:var(--color-background);
3071
3099
  }
3072
- .mobius-progress-steps__item.--is-complete .mobius-progress-steps__item-shape::after{
3100
+ :is(.mobius-progress-steps__item.--is-complete .mobius-progress-steps__item-shape)::after{
3073
3101
  background-color:var(--progress-steps-primary-color);
3074
3102
  }
3075
3103
  .mobius-progress-steps__item.--is-complete .mobius-progress-steps__item-number{
@@ -3084,7 +3112,7 @@ svg:not(:host).svg-inline--mobius-icon{
3084
3112
  .mobius-progress-steps__item.--is-incomplete .mobius-progress-steps__item-shape{
3085
3113
  border-color:var(--progress-steps-secondary-color);
3086
3114
  }
3087
- .mobius-progress-steps__item.--is-incomplete .mobius-progress-steps__item-shape::after{
3115
+ :is(.mobius-progress-steps__item.--is-incomplete .mobius-progress-steps__item-shape)::after{
3088
3116
  background-color:var(--progress-steps-secondary-color);
3089
3117
  }
3090
3118
  .mobius-progress-steps__item.--is-incomplete .mobius-progress-steps__item-number{
@@ -3193,7 +3221,7 @@ svg:not(:host).svg-inline--mobius-icon{
3193
3221
  padding:var(--size-lg) var(--size-lg) 0;
3194
3222
  }
3195
3223
  }
3196
- .mobius-edit-limits__modal.mobius-modal .mobius-modal__header button{
3224
+ :is(.mobius-edit-limits__modal.mobius-modal .mobius-modal__header) button{
3197
3225
  padding:4px;
3198
3226
  scale:150%;
3199
3227
  translate:4px -4px;
@@ -3330,6 +3358,7 @@ svg:not(:host).svg-inline--mobius-icon{
3330
3358
  .mobius-payment-toggle{
3331
3359
  position:relative;
3332
3360
  display:grid;
3361
+ flex-shrink:0;
3333
3362
  grid-template-columns:repeat(2, 1fr);
3334
3363
  justify-items:center;
3335
3364
  margin-left:auto;
@@ -3353,18 +3382,16 @@ svg:not(:host).svg-inline--mobius-icon{
3353
3382
  transform:translateX(2px);
3354
3383
  transition:all var(--duration) ease-in-out;
3355
3384
  }
3356
- .mobius-payment-toggle:active,
3357
- .mobius-payment-toggle:hover,
3358
- .mobius-payment-toggle:focus-visible{
3385
+ .mobius-payment-toggle:active,.mobius-payment-toggle:hover,.mobius-payment-toggle:focus-visible{
3359
3386
  border-color:var(--color-primary-hover);
3360
3387
  }
3361
- .mobius-payment-toggle:active .mobius-payment-toggle__text.--yearly, .mobius-payment-toggle:hover .mobius-payment-toggle__text.--yearly, .mobius-payment-toggle:focus-visible .mobius-payment-toggle__text.--yearly{
3388
+ .--yearly:is(:is(.mobius-payment-toggle:active,.mobius-payment-toggle:hover,.mobius-payment-toggle:focus-visible) .mobius-payment-toggle__text){
3362
3389
  color:var(--color-primary-hover);
3363
3390
  }
3364
- .mobius-payment-toggle:active::before, .mobius-payment-toggle:hover::before, .mobius-payment-toggle:focus-visible::before{
3391
+ :is(.mobius-payment-toggle:active,.mobius-payment-toggle:hover,.mobius-payment-toggle:focus-visible)::before{
3365
3392
  background-color:var(--color-primary-hover);
3366
3393
  }
3367
- .mobius-payment-toggle.--is-toggled:active .mobius-payment-toggle__text.--monthly, .mobius-payment-toggle.--is-toggled:hover .mobius-payment-toggle__text.--monthly, .mobius-payment-toggle.--is-toggled:focus-visible .mobius-payment-toggle__text.--monthly{
3394
+ .--monthly:is(.--is-toggled:is(.mobius-payment-toggle:active,.mobius-payment-toggle:hover,.mobius-payment-toggle:focus-visible) .mobius-payment-toggle__text){
3368
3395
  color:var(--color-primary-hover);
3369
3396
  }
3370
3397
  .mobius-payment-toggle:focus-visible{
@@ -3374,10 +3401,10 @@ svg:not(:host).svg-inline--mobius-icon{
3374
3401
  .mobius-payment-toggle.--is-toggled::before{
3375
3402
  transform:translate(100%);
3376
3403
  }
3377
- .mobius-payment-toggle.--is-toggled .mobius-payment-toggle__text.--monthly{
3404
+ .--monthly:is(.mobius-payment-toggle.--is-toggled .mobius-payment-toggle__text){
3378
3405
  color:var(--color-primary);
3379
3406
  }
3380
- .mobius-payment-toggle.--is-toggled .mobius-payment-toggle__text.--yearly{
3407
+ .--yearly:is(.mobius-payment-toggle.--is-toggled .mobius-payment-toggle__text){
3381
3408
  color:var(--color-text-inverted);
3382
3409
  }
3383
3410
  .mobius-payment-toggle__text{
@@ -3408,7 +3435,7 @@ svg:not(:host).svg-inline--mobius-icon{
3408
3435
  padding:0 0 0 var(--size-md);
3409
3436
  list-style:outside;
3410
3437
  }
3411
- .mobius-additional-coverage-info ul li{
3438
+ :is(.mobius-additional-coverage-info ul) li{
3412
3439
  margin:0 0 var(--size-sm);
3413
3440
  }
3414
3441
  .mobius-additional-coverage-info__title.mobius-text{
@@ -3525,10 +3552,10 @@ svg:not(:host).svg-inline--mobius-icon{
3525
3552
  padding:1rem;
3526
3553
  margin-top:1rem;
3527
3554
  }
3528
- .mobius-payment-info__multi-product .mobius-payment-info__multi-product-text.--general-liability{
3555
+ .--general-liability:is(.mobius-payment-info__multi-product .mobius-payment-info__multi-product-text){
3529
3556
  padding-bottom:var(--size-xs);
3530
3557
  }
3531
- .mobius-payment-info__multi-product .mobius-payment-info__multi-product-text.--professional-liability{
3558
+ .--professional-liability:is(.mobius-payment-info__multi-product .mobius-payment-info__multi-product-text){
3532
3559
  position:relative;
3533
3560
  border:1px solid var(--color-border-light);
3534
3561
  padding-top:var(--size-xs);
@@ -3564,10 +3591,10 @@ svg:not(:host).svg-inline--mobius-icon{
3564
3591
  .mobius-payment-info__multi-product-iterated .mobius-payment-info__multi-product-text{
3565
3592
  margin:0;
3566
3593
  }
3567
- .mobius-payment-info__multi-product-iterated .mobius-payment-info__multi-product-text.--general-liability{
3594
+ .--general-liability:is(.mobius-payment-info__multi-product-iterated .mobius-payment-info__multi-product-text){
3568
3595
  padding-bottom:var(--size-xs);
3569
3596
  }
3570
- .mobius-payment-info__multi-product-iterated .mobius-payment-info__multi-product-text.--professional-liability{
3597
+ .--professional-liability:is(.mobius-payment-info__multi-product-iterated .mobius-payment-info__multi-product-text){
3571
3598
  position:relative;
3572
3599
  border-top:1px solid var(--color-border-light);
3573
3600
  padding-top:var(--size-xs);
@@ -3578,12 +3605,7 @@ svg:not(:host).svg-inline--mobius-icon{
3578
3605
  margin-top:var(--size-sm);
3579
3606
  margin-bottom:var(--size-sm);
3580
3607
  }
3581
- .mobius-payment-info__total-outer-container span,
3582
- .mobius-payment-info__multi-product span,
3583
- .mobius-payment-info__total-outer-container strong,
3584
- .mobius-payment-info__multi-product strong,
3585
- .mobius-payment-info__total-outer-container p,
3586
- .mobius-payment-info__multi-product p{
3608
+ :is(.mobius-payment-info__total-outer-container,.mobius-payment-info__multi-product) span,:is(.mobius-payment-info__total-outer-container,.mobius-payment-info__multi-product) strong,:is(.mobius-payment-info__total-outer-container,.mobius-payment-info__multi-product) p{
3587
3609
  font-size:var(--font-size-2);
3588
3610
  }
3589
3611
  .mobius-payment-info__total-container{
@@ -3612,7 +3634,7 @@ svg:not(:host).svg-inline--mobius-icon{
3612
3634
  padding-left:var(--size-md);
3613
3635
  margin:6px 0;
3614
3636
  }
3615
- .price-details .card-modal__explainer-title .card-modal__info-icon{
3637
+ :is(.price-details .card-modal__explainer-title) .card-modal__info-icon{
3616
3638
  color:var(--color-primary);
3617
3639
  }
3618
3640
  .price-details .info__popover .phone{
@@ -3623,7 +3645,7 @@ svg:not(:host).svg-inline--mobius-icon{
3623
3645
  vertical-align:middle;
3624
3646
  margin-right:4px;
3625
3647
  }
3626
- .price-details .phone span{
3648
+ :is(.price-details .phone) span{
3627
3649
  -webkit-text-decoration:underline;
3628
3650
  text-decoration:underline;
3629
3651
  text-underline-offset:6px;
@@ -3666,7 +3688,7 @@ svg:not(:host).svg-inline--mobius-icon{
3666
3688
  }
3667
3689
  }
3668
3690
  @supports (-webkit-touch-callout: none) and (not (translate: none)){
3669
- .mobius-quote-card__body > *:not(:last-child){
3691
+ .mobius-quote-card__body > *:not(:last-child){
3670
3692
  margin-bottom:33px;
3671
3693
  }
3672
3694
  }
@@ -3720,8 +3742,8 @@ svg:not(:host).svg-inline--mobius-icon{
3720
3742
  }
3721
3743
  .mobius-quote-card__cover{
3722
3744
  color:var(--color-text-medium);
3723
- margin-top:var(--size-xxs);
3724
- margin-bottom:var(--size-xxs);
3745
+ margin-top:var(--size-xs);
3746
+ margin-bottom:var(--size-xs);
3725
3747
  padding-left:var(--size-md);
3726
3748
  align-items:center;
3727
3749
  }
@@ -3772,7 +3794,7 @@ svg:not(:host).svg-inline--mobius-icon{
3772
3794
  .mobius-quote-card__extra-coverage-item .mobius-quote-card__explainer-title{
3773
3795
  color:var(--color-text);
3774
3796
  }
3775
- .mobius-quote-card__extra-coverage-item .mobius-quote-card__explainer-title .mobius-quote-card__explainer-icon{
3797
+ :is(.mobius-quote-card__extra-coverage-item .mobius-quote-card__explainer-title) .mobius-quote-card__explainer-icon{
3776
3798
  color:var(--color-text);
3777
3799
  }
3778
3800
  .mobius-quote-card__extra-coverage-item .mobius-quote-card__cover{
@@ -3807,7 +3829,7 @@ svg:not(:host).svg-inline--mobius-icon{
3807
3829
  margin-top:var(--size-xs);
3808
3830
  margin-bottom:var(--size-xxs);
3809
3831
  }
3810
- .mobius-quote-card__coverage-item .mobius-accordion div[aria-hidden]{
3832
+ :is(.mobius-quote-card__coverage-item .mobius-accordion) div[aria-hidden]{
3811
3833
  width:100%;
3812
3834
  }
3813
3835
  .mobius-quote-card__coverage-item .mobius-accordion__link{
@@ -3836,7 +3858,7 @@ svg:not(:host).svg-inline--mobius-icon{
3836
3858
  margin-top:var(--size-xxs);
3837
3859
  margin-bottom:0;
3838
3860
  }
3839
- .mobius-quote-card__coverage-item .mobius-accordion__content .mobius-quote-card__cover:last-child{
3861
+ :is(.mobius-quote-card__coverage-item .mobius-accordion__content) .mobius-quote-card__cover:last-child{
3840
3862
  margin-bottom:0;
3841
3863
  }
3842
3864
  .mobius-quote-card__deductibles-title.--is-p{
@@ -3900,8 +3922,7 @@ svg:not(:host).svg-inline--mobius-icon{
3900
3922
  width:12px;
3901
3923
  margin-left:var(--size-xxs);
3902
3924
  }
3903
- :is(.mobius-quote-card,.mobius-quote-card__modal-container.mobius-drawer) .mobius-quote-card__modal-trigger,
3904
- :is(.mobius-quote-card,.mobius-quote-card__modal-container.mobius-drawer) .mobius-popover__toggle{
3925
+ :is(.mobius-quote-card,.mobius-quote-card__modal-container.mobius-drawer) .mobius-quote-card__modal-trigger,:is(.mobius-quote-card,.mobius-quote-card__modal-container.mobius-drawer) .mobius-popover__toggle{
3905
3926
  border:none;
3906
3927
  padding:0;
3907
3928
  font-weight:var(--font-weight-normal);
@@ -3923,7 +3944,7 @@ svg:not(:host).svg-inline--mobius-icon{
3923
3944
  padding:var(--size-sm) var(--size-sm) var(--size-xs) var(--size-sm);
3924
3945
  font-size:var(--font-size-lead);
3925
3946
  }
3926
- .mobius-quote-card__modal-container.mobius-drawer .mobius-modal__header button{
3947
+ :is(.mobius-quote-card__modal-container.mobius-drawer .mobius-modal__header) button{
3927
3948
  font-size:var(--font-size-regular);
3928
3949
  padding:var(--size-xxs);
3929
3950
  scale:150%;
@@ -3946,7 +3967,7 @@ svg:not(:host).svg-inline--mobius-icon{
3946
3967
  padding-left:var(--size-md);
3947
3968
  margin:6px 0;
3948
3969
  }
3949
- .mobius-quote-card__price-details .mobius-quote-card__explainer-title .mobius-quote-card__explainer-icon{
3970
+ :is(.mobius-quote-card__price-details .mobius-quote-card__explainer-title) .mobius-quote-card__explainer-icon{
3950
3971
  color:var(--color-primary);
3951
3972
  }
3952
3973
  .mobius-quote-card__price-details .mobius-quote-card__info-popover .mobius-quote-card__price-details-phone{
@@ -3961,7 +3982,7 @@ svg:not(:host).svg-inline--mobius-icon{
3961
3982
  -webkit-text-decoration:none;
3962
3983
  text-decoration:none;
3963
3984
  }
3964
- .mobius-quote-card__price-details .mobius-quote-card__price-details-phone span{
3985
+ :is(.mobius-quote-card__price-details .mobius-quote-card__price-details-phone) span{
3965
3986
  -webkit-text-decoration:underline;
3966
3987
  text-decoration:underline;
3967
3988
  text-underline-offset:6px;
@@ -3982,7 +4003,7 @@ svg:not(:host).svg-inline--mobius-icon{
3982
4003
  font-weight:var(--font-weight-bold);
3983
4004
  text-align:right;
3984
4005
  }
3985
- .mobius-quote-card__pricing-amount-due.mobius-text, .mobius-quote-card__pricing-unavailable-installment.mobius-text{
4006
+ .mobius-text:is(.mobius-quote-card__pricing-amount-due,.mobius-quote-card__pricing-unavailable-installment){
3986
4007
  color:var(--color-text);
3987
4008
  margin-top:0;
3988
4009
  margin-bottom:var(--size-xxs);
@@ -4026,14 +4047,17 @@ svg:not(:host).svg-inline--mobius-icon{
4026
4047
  color:var(--color-text);
4027
4048
  }
4028
4049
  .mobius-quote-card__ratings{
4050
+ display:flex;
4051
+ flex-direction:column;
4052
+ justify-content:flex-end;
4029
4053
  margin-top:0;
4030
4054
  margin-bottom:var(--size-sm);
4055
+ min-height:86px;
4031
4056
  }
4032
4057
  .mobius-quote-card__ratings.--has-reinsurer-text{
4033
4058
  padding-top:var(--size-sm);
4034
4059
  }
4035
- .mobius-quote-card__ratings .mobius-quote-card__explainer-title,
4036
- .mobius-quote-card__ratings .mobius-quote-card__explainer-icon{
4060
+ .mobius-quote-card__ratings .mobius-quote-card__explainer-title,.mobius-quote-card__ratings .mobius-quote-card__explainer-icon{
4037
4061
  color:var(--color-text);
4038
4062
  }
4039
4063
  .mobius-quote-card__ratings-text.--is-p{
@@ -4072,7 +4096,7 @@ svg:not(:host).svg-inline--mobius-icon{
4072
4096
  --column-count:2;
4073
4097
  }
4074
4098
 
4075
- .mobius-quote-cards__grid:has(> *:nth-child(3)){
4099
+ .mobius-quote-cards__grid:has( > *:nth-child(3)){
4076
4100
  --column-count:3;
4077
4101
  }
4078
4102
  }
@@ -4120,15 +4144,11 @@ svg:not(:host).svg-inline--mobius-icon{
4120
4144
  margin-right:0;
4121
4145
  }
4122
4146
  }
4123
- .mobius-quote-details__drawer.mobius-drawer .mobius-drawer__content,
4124
- .mobius-quote-details__drawer.mobius-drawer .mobius-drawer__header,
4125
- .mobius-quote-details__drawer.mobius-drawer .mobius-quote-details-drawer__footer{
4147
+ .mobius-quote-details__drawer.mobius-drawer .mobius-drawer__content,.mobius-quote-details__drawer.mobius-drawer .mobius-drawer__header,.mobius-quote-details__drawer.mobius-drawer .mobius-quote-details-drawer__footer{
4126
4148
  padding:var(--size-sm);
4127
4149
  }
4128
4150
  @media (min-width: 850px){
4129
- .mobius-quote-details__drawer.mobius-drawer .mobius-drawer__content,
4130
- .mobius-quote-details__drawer.mobius-drawer .mobius-drawer__header,
4131
- .mobius-quote-details__drawer.mobius-drawer .mobius-quote-details-drawer__footer{
4151
+ .mobius-quote-details__drawer.mobius-drawer .mobius-drawer__content,.mobius-quote-details__drawer.mobius-drawer .mobius-drawer__header,.mobius-quote-details__drawer.mobius-drawer .mobius-quote-details-drawer__footer{
4132
4152
  padding:var(--size-lg);
4133
4153
  }
4134
4154
  }
@@ -4223,7 +4243,6 @@ svg:not(:host).svg-inline--mobius-icon{
4223
4243
  .mobius-quote-help__contact-container{
4224
4244
  flex-direction:column;
4225
4245
  gap:var(--size-sm);
4226
- border-bottom:1px solid var(--color-background);
4227
4246
  padding-bottom:var(--size-xs);
4228
4247
  }
4229
4248
  @media (min-width: 640px){
@@ -4233,7 +4252,6 @@ svg:not(:host).svg-inline--mobius-icon{
4233
4252
  }
4234
4253
 
4235
4254
  .mobius-quote-help__contact-container .mobius-quote-help__chat-link{
4236
- border-left:1px solid var(--color-background);
4237
4255
  border-radius:0;
4238
4256
  padding-left:var(--size-xs);
4239
4257
  }
@@ -4247,7 +4265,7 @@ svg:not(:host).svg-inline--mobius-icon{
4247
4265
  column-gap:var(--size-xl);
4248
4266
  row-gap:var(--size-sm);
4249
4267
  margin-bottom:var(--size-lg);
4250
- grid-template-areas:"referralText" "nextCoverage" "trustSection";
4268
+ grid-template-areas:"referralText" "coverageSummary" "nextCoverage" "trustSection";
4251
4269
  }
4252
4270
  @media (min-width: 960px){
4253
4271
  .mobius-referral{
@@ -4256,6 +4274,12 @@ svg:not(:host).svg-inline--mobius-icon{
4256
4274
  row-gap:0;
4257
4275
  }
4258
4276
  }
4277
+ @media (min-width: 960px){
4278
+ .mobius-cross-sell{
4279
+ grid-template-columns:2fr 1.25fr;
4280
+ grid-template-areas:"referralText coverageSummary" "nextCoverage coverageSummary" "nextCoverage trustSection";
4281
+ }
4282
+ }
4259
4283
  .mobius-trust-section{
4260
4284
  grid-area:trustSection;
4261
4285
  }
@@ -4265,6 +4289,9 @@ svg:not(:host).svg-inline--mobius-icon{
4265
4289
  .mobius-referral__text{
4266
4290
  grid-area:referralText;
4267
4291
  }
4292
+ .mobius-coverage-summary{
4293
+ grid-area:coverageSummary;
4294
+ }
4268
4295
  .mobius-trade-selector{
4269
4296
  display:inline-flex;
4270
4297
  flex-direction:column;
@@ -4340,8 +4367,7 @@ svg:not(:host).svg-inline--mobius-icon{
4340
4367
  border-color:var(--color-primary);
4341
4368
  background-color:var(--color-background-highlight);
4342
4369
  }
4343
- .mobius-trade-selector__option:focus-visible,
4344
- .mobius-trade-selector__option.--is-selected{
4370
+ .mobius-trade-selector__option:focus-visible,.mobius-trade-selector__option.--is-selected{
4345
4371
  color:var(--color-primary);
4346
4372
  background-color:var(--color-background-highlight);
4347
4373
  }
@@ -4377,6 +4403,8 @@ svg:not(:host).svg-inline--mobius-icon{
4377
4403
  .mobius-main{
4378
4404
  padding-top:var(--size-lg);
4379
4405
  padding-bottom:calc(var(--size-lg) + var(--size-xxl));
4406
+ padding-left:var(--size-sm);
4407
+ padding-right:var(--size-sm);
4380
4408
  }
4381
4409
  :root,
4382
4410
  :host{
@@ -4399,8 +4427,7 @@ svg:not(:host).svg-inline--mobius-icon{
4399
4427
  border-bottom-left-radius:0;
4400
4428
  border-bottom-right-radius:var(--radius-1);
4401
4429
  }
4402
- .mobius-date-picker__field-button:hover:not(.--is-disabled):not(.mobius-date-picker__field-button.--is-valid):not(.mobius-date-picker__field-button.--is-invalid),
4403
- .mobius-date-picker__field-button:focus-visible:not(.--is-disabled):not(.mobius-date-picker__field-button.--is-valid):not(.mobius-date-picker__field-button.--is-invalid){
4430
+ .mobius-date-picker__field-button:hover:not(.--is-disabled):not(.mobius-date-picker__field-button.--is-valid):not(.mobius-date-picker__field-button.--is-invalid),.mobius-date-picker__field-button:focus-visible:not(.--is-disabled):not(.mobius-date-picker__field-button.--is-valid):not(.mobius-date-picker__field-button.--is-invalid){
4404
4431
  background-color:var(--color-primary-hover);
4405
4432
  }
4406
4433
  .mobius-date-picker__field-button.--is-invalid:not(.--is-disabled){
@@ -4496,7 +4523,7 @@ svg:not(:host).svg-inline--mobius-icon{
4496
4523
  color:var(--color-text-inverted);
4497
4524
  border-radius:var(--radius-1);
4498
4525
  }
4499
- .mobius-date-picker__day.--is-outside .mobius-date-picker__day-button, .mobius-date-picker__day.--is-disabled .mobius-date-picker__day-button{
4526
+ :is(.mobius-date-picker__day.--is-outside,.mobius-date-picker__day.--is-disabled) .mobius-date-picker__day-button{
4500
4527
  opacity:0.3;
4501
4528
  cursor:not-allowed;
4502
4529
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@simplybusiness/theme-simplybusiness",
3
- "version": "0.4.0",
3
+ "version": "0.5.0",
4
4
  "main": "dist/index.css",
5
5
  "simplyBusiness": {
6
6
  "publishToPublicNpm": true
@@ -26,24 +26,24 @@
26
26
  "./fonts": "./dist/fonts.css"
27
27
  },
28
28
  "dependencies": {
29
- "@simplybusiness/mobius": "^5.1.1",
30
- "@simplybusiness/mobius-datepicker": "^6.0.3",
31
- "@simplybusiness/mobius-journey": "^6.4.0",
32
- "@simplybusiness/theme-core": "^7.1.1"
29
+ "@simplybusiness/mobius": "^5.2.0",
30
+ "@simplybusiness/mobius-datepicker": "^6.0.5",
31
+ "@simplybusiness/mobius-journey": "^6.5.0",
32
+ "@simplybusiness/theme-core": "^7.1.3"
33
33
  },
34
34
  "devDependencies": {
35
35
  "css-loader": "^7.1.2",
36
- "mini-css-extract-plugin": "^2.9.0",
37
- "postcss": "^8.4.40",
38
- "postcss-discard-comments": "^7.0.2",
36
+ "mini-css-extract-plugin": "^2.9.1",
37
+ "postcss": "^8.4.47",
38
+ "postcss-discard-comments": "^7.0.3",
39
39
  "postcss-import": "^16.1.0",
40
40
  "postcss-loader": "^8.1.1",
41
41
  "postcss-nested": "^6.2.0",
42
- "postcss-preset-env": "^9.6.0",
42
+ "postcss-preset-env": "^10.0.5",
43
43
  "postcss-url": "^10.1.3",
44
44
  "resolve-url-loader": "^5.0.0",
45
45
  "ts-loader": "^9.5.1",
46
- "typescript": "^5.5.4",
46
+ "typescript": "^5.6.2",
47
47
  "webpack": "^5.94.0",
48
48
  "webpack-cli": "^5.1.4"
49
49
  }
package/src/index.css CHANGED
@@ -2,40 +2,42 @@
2
2
  @import "@simplybusiness/theme-core";
3
3
 
4
4
  /* @simplybusiness/mobius-journey */
5
- @import "../../mobius-journey/src/archived/Actions/Actions.css";
6
- @import "../../mobius-journey/src/archived/PaymentConfirmation/PaymentConfirmation.css";
7
- @import "../../mobius-journey/src/archived/PercentageTotalsQuestion/PercentageTotalsQuestion.css";
8
- @import "../../mobius-journey/src/archived/Question/Question.css";
9
- @import "../../mobius-journey/src/archived/QuestionGroup/QuestionGroup.css";
10
- @import "../../mobius-journey/src/archived/QuestionHelp/QuestionHelp.css";
11
- @import "../../mobius-journey/src/archived/Section/Section.css";
12
- @import "../../mobius-journey/src/archived/Testimonial/Testimonial.css";
13
- @import "../../mobius-journey/src/components/AgentResources/AgentResources.css";
14
- @import "../../mobius-journey/src/components/Footer/Footer.css";
15
- @import "../../mobius-journey/src/components/ErrorBoundary/ErrorBoundary.css";
16
- @import "../../mobius-journey/src/components/Header/Header.css";
17
- @import "../../mobius-journey/src/components/InfoCard/InfoCard.css";
18
- @import "../../mobius-journey/src/components/NextCoverage/NextCoverage.css";
19
- @import "../../mobius-journey/src/components/PaymentSummary/PaymentSummary.css";
20
- @import "../../mobius-journey/src/components/PreFooter/InsuranceBenefits.css";
21
- @import "../../mobius-journey/src/components/PreFooter/PreFooter.css";
22
- @import "../../mobius-journey/src/components/ProgressSteps/ProgressSteps.css";
23
- @import "../../mobius-journey/src/components/QuoteComparison/CoverSummary/CoverSummary.css";
24
- @import "../../mobius-journey/src/components/QuoteComparison/CoverTogglesContainer/CoverTogglesContainer.css";
25
- @import "../../mobius-journey/src/components/QuoteComparison/Headline/ExperimentIteratedQCP/EditLimitsExperimentIteratedQCP.css";
26
- @import "../../mobius-journey/src/components/QuoteComparison/Headline/ExperimentIteratedQCP/QuoteHeadlineExperimentIteratedQCP.css";
27
- @import "../../mobius-journey/src/components/QuoteComparison/Headline/QuoteHeadline.css";
28
- @import "../../mobius-journey/src/components/QuoteComparison/PaymentToggle/PaymentToggle.css";
29
- @import "../../mobius-journey/src/components/QuoteComparison/QuoteCards/QuoteCards.css";
30
- @import "../../mobius-journey/src/components/QuoteHelp/QuoteHelp.css";
31
- @import "../../mobius-journey/src/components/Referral/Referral.css";
32
- @import "../../mobius-journey/src/components/TradeSelector/TradeSelector.css";
33
- @import "../../mobius-journey/src/components/TrustSection/TrustSection.css";
34
- @import "../../mobius-journey/src/pages/AgentReferralPage/AgentReferralContainer.css";
35
- @import "../../mobius-journey/src/pages/Main.css";
5
+ @import "@simplybusiness/mobius-journey/src/archived/Actions/Actions.css";
6
+ @import "@simplybusiness/mobius-journey/src/archived/PaymentConfirmation/PaymentConfirmation.css";
7
+ @import "@simplybusiness/mobius-journey/src/archived/PercentageTotalsQuestion/PercentageTotalsQuestion.css";
8
+ @import "@simplybusiness/mobius-journey/src/archived/Question/Question.css";
9
+ @import "@simplybusiness/mobius-journey/src/archived/QuestionGroup/QuestionGroup.css";
10
+ @import "@simplybusiness/mobius-journey/src/archived/QuestionHelp/QuestionHelp.css";
11
+ @import "@simplybusiness/mobius-journey/src/archived/Section/Section.css";
12
+ @import "@simplybusiness/mobius-journey/src/archived/Testimonial/Testimonial.css";
13
+ @import "@simplybusiness/mobius-journey/src/components/AgentResources/AgentResources.css";
14
+ @import "@simplybusiness/mobius-journey/src/components/CoverageSummary/CoverageSummary.css";
15
+ @import "@simplybusiness/mobius-journey/src/components/CoverageSummary/PaymentSummary/PaymentSummary.css";
16
+ @import "@simplybusiness/mobius-journey/src/components/CoverageSummary/QuoteSummary/QuoteSummary.css";
17
+ @import "@simplybusiness/mobius-journey/src/components/Footer/Footer.css";
18
+ @import "@simplybusiness/mobius-journey/src/components/ErrorBoundary/ErrorBoundary.css";
19
+ @import "@simplybusiness/mobius-journey/src/components/Header/Header.css";
20
+ @import "@simplybusiness/mobius-journey/src/components/InfoCard/InfoCard.css";
21
+ @import "@simplybusiness/mobius-journey/src/components/NextCoverage/NextCoverage.css";
22
+ @import "@simplybusiness/mobius-journey/src/components/PreFooter/InsuranceBenefits.css";
23
+ @import "@simplybusiness/mobius-journey/src/components/PreFooter/PreFooter.css";
24
+ @import "@simplybusiness/mobius-journey/src/components/ProgressSteps/ProgressSteps.css";
25
+ @import "@simplybusiness/mobius-journey/src/components/QuoteComparison/CoverSummary/CoverSummary.css";
26
+ @import "@simplybusiness/mobius-journey/src/components/QuoteComparison/CoverTogglesContainer/CoverTogglesContainer.css";
27
+ @import "@simplybusiness/mobius-journey/src/components/QuoteComparison/Headline/ExperimentIteratedQCP/EditLimitsExperimentIteratedQCP.css";
28
+ @import "@simplybusiness/mobius-journey/src/components/QuoteComparison/Headline/ExperimentIteratedQCP/QuoteHeadlineExperimentIteratedQCP.css";
29
+ @import "@simplybusiness/mobius-journey/src/components/QuoteComparison/Headline/QuoteHeadline.css";
30
+ @import "@simplybusiness/mobius-journey/src/components/QuoteComparison/PaymentToggle/PaymentToggle.css";
31
+ @import "@simplybusiness/mobius-journey/src/components/QuoteComparison/QuoteCards/QuoteCards.css";
32
+ @import "@simplybusiness/mobius-journey/src/components/QuoteHelp/QuoteHelp.css";
33
+ @import "@simplybusiness/mobius-journey/src/components/Referral/Referral.css";
34
+ @import "@simplybusiness/mobius-journey/src/components/TradeSelector/TradeSelector.css";
35
+ @import "@simplybusiness/mobius-journey/src/components/TrustSection/TrustSection.css";
36
+ @import "@simplybusiness/mobius-journey/src/pages/AgentReferralPage/AgentReferralContainer.css";
37
+ @import "@simplybusiness/mobius-journey/src/pages/Main.css";
36
38
 
37
39
  /* @simplybusiness/mobius-datepicker */
38
- @import "../../mobius-datepicker/src/components/DatePicker/DatePicker.css";
40
+ @import "@simplybusiness/mobius-datepicker/src/components/DatePicker/DatePicker.css";
39
41
 
40
42
  /* Base customisation */
41
43
  @import "./fonts.css";