@ebay/skin 19.13.0 → 19.14.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/README.md +1 -1
  2. package/dist/alert-dialog/alert-dialog.css +2 -2
  3. package/dist/breadcrumbs/breadcrumbs.css +0 -1
  4. package/dist/bundles/skin-default.css +103 -106
  5. package/dist/bundles/skin-full.css +103 -106
  6. package/dist/bundles/skin-headless.css +103 -106
  7. package/dist/button/button.css +29 -44
  8. package/dist/combobox/combobox.css +5 -22
  9. package/dist/confirm-dialog/confirm-dialog.css +2 -2
  10. package/dist/drawer-dialog/drawer-dialog.css +2 -2
  11. package/dist/file-input/file-input.css +0 -1
  12. package/dist/filter-button/filter-button.css +2 -12
  13. package/dist/filter-chip/filter-chip.css +6 -3
  14. package/dist/filter-menu-button/filter-menu-button.css +10 -20
  15. package/dist/global/global.css +4 -16
  16. package/dist/icon-button/icon-button.css +22 -68
  17. package/dist/lightbox-dialog/lightbox-dialog.css +2 -2
  18. package/dist/listbox/listbox.css +4 -13
  19. package/dist/listbox-button/listbox-button.css +5 -21
  20. package/dist/menu-button/menu-button.css +2 -9
  21. package/dist/number-input/number-input.css +0 -1
  22. package/dist/panel-dialog/panel-dialog.css +2 -2
  23. package/dist/progress-stepper/progress-stepper.css +1 -0
  24. package/dist/section-notice/section-notice.css +3 -10
  25. package/dist/select/select.css +0 -1
  26. package/dist/selection-chip/selection-chip.css +4 -2
  27. package/dist/svg/icon/icon-ai-camera-16.svg +5 -0
  28. package/dist/svg/icon/icon-ai-camera-20.svg +5 -0
  29. package/dist/svg/icon/icon-ai-camera-24.svg +5 -0
  30. package/dist/svg/icon/icon-attention-triangle-16.svg +5 -0
  31. package/dist/svg/icon/icon-attention-triangle-24.svg +5 -0
  32. package/dist/svg/icon/icon-attention-triangle-filled-16.svg +5 -0
  33. package/dist/svg/icon/icon-attention-triangle-filled-24.svg +5 -0
  34. package/dist/svg/icon/icon-clock-12.svg +9 -0
  35. package/dist/svg/icon/icon-closed-caption-16.svg +2 -7
  36. package/dist/svg/icon/icon-closed-caption-24.svg +5 -0
  37. package/dist/svg/icon/icon-closed-caption-filled-16.svg +2 -4
  38. package/dist/svg/icon/icon-closed-caption-filled-24.svg +5 -0
  39. package/dist/svg/icon/icon-fingerprint-16.svg +5 -0
  40. package/dist/svg/icons.svg +61 -9
  41. package/dist/textbox/textbox.css +0 -2
  42. package/package.json +8 -7
@@ -466,16 +466,16 @@ legend{
466
466
  }
467
467
 
468
468
  a{
469
- color:var(--link-foreground-color-default, var(--color-foreground-link-primary));
469
+ color:var(--color-foreground-link-primary);
470
470
  }
471
471
  a:visited{
472
- color:var(--link-foreground-color-visited, var(--color-foreground-link-visited));
472
+ color:var(--color-foreground-link-visited);
473
473
  }
474
474
  a:hover{
475
- color:var(--link-foreground-color-hover, var(--color-foreground-secondary));
475
+ color:var(--color-foreground-secondary);
476
476
  }
477
477
  a:not([href]),a[aria-disabled=true]{
478
- color:var(--link-forground-color-disabled, var(--color-foreground-disabled));
478
+ color:var(--color-foreground-disabled);
479
479
  }
480
480
  .clearfix:after,.clearfix:before{
481
481
  content:" ";
@@ -680,12 +680,12 @@ ul.accordion--large summary.details__summary{
680
680
  --dialog-lightbox-max-width:616px;
681
681
  }
682
682
  .alert-dialog[role=alertdialog]{
683
+ align-items:flex-start;
683
684
  background-color:var(--dialog-scrim-color-show);
684
685
  bottom:0;
686
+ justify-content:center;
685
687
  left:0;
686
688
  -webkit-overflow-scrolling:touch;
687
- align-items:flex-start;
688
- justify-content:center;
689
689
  position:fixed;
690
690
  right:0;
691
691
  top:0;
@@ -985,7 +985,6 @@ ul.accordion--large summary.details__summary{
985
985
  nav.breadcrumbs{
986
986
  color:var(--breadcrumbs-item-foreground-color, var(--color-foreground-secondary));
987
987
  font-size:var(--font-size-small);
988
- height:-moz-fit-content;
989
988
  height:fit-content;
990
989
  margin:8px 0;
991
990
  min-height:16px;
@@ -1154,7 +1153,7 @@ a.fake-btn--slim,button.btn--slim{
1154
1153
  padding-right:var(--spacing-100);
1155
1154
  }
1156
1155
 
1157
- a.fake-btn:visited{
1156
+ a.fake-btn:hover,a.fake-btn:visited{
1158
1157
  color:inherit;
1159
1158
  }
1160
1159
 
@@ -1208,17 +1207,19 @@ a.fake-btn__cell--fixed-height svg.icon,button.btn__cell--fixed-height svg.icon{
1208
1207
  }
1209
1208
 
1210
1209
  a.fake-btn--primary,button.btn--primary{
1211
- background-color:var(--btn-primary-background-color, var(--color-background-accent));
1212
- border-color:var(--btn-primary-border-color, var(--color-stroke-accent));
1213
- color:var(--btn-primary-foreground-color, var(--color-foreground-on-accent));
1210
+ background-color:var(--color-background-accent);
1211
+ border-color:var(--color-stroke-accent);
1212
+ color:var(--color-foreground-on-accent);
1214
1213
  font-weight:700;
1215
- overflow:hidden;
1216
- position:relative;
1217
1214
  transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
1218
1215
  }
1219
1216
  a.fake-btn--primary:active,button.btn--primary:active{
1220
1217
  transform:scale(.97);
1221
1218
  }
1219
+ a.fake-btn--primary,button.btn--primary{
1220
+ overflow:hidden;
1221
+ position:relative;
1222
+ }
1222
1223
  a.fake-btn--primary:after,button.btn--primary:after{
1223
1224
  background-color:var(--state-layer-neutral);
1224
1225
  content:"";
@@ -1240,14 +1241,14 @@ a.fake-btn--primary{
1240
1241
  outline-color:var(--color-foreground-primary);
1241
1242
  }
1242
1243
 
1243
- a.fake-btn--primary:visited{
1244
- color:var(--btn-primary-foreground-color, var(--color-foreground-on-accent));
1244
+ a.fake-btn--primary:hover,a.fake-btn--primary:visited{
1245
+ color:var(--color-foreground-on-accent);
1245
1246
  }
1246
1247
 
1247
1248
  a.fake-btn--primary.fake-btn--destructive,button.btn--primary.btn--destructive{
1248
- background-color:var(--btn-primary-destructive-background-color, var(--color-background-attention));
1249
- border-color:var(--btn-primary-destructive-border-color, var(--color-stroke-attention));
1250
- color:var(--btn-primary-destructive-foreground-color, var(--color-foreground-on-attention));
1249
+ background-color:var(--color-background-attention);
1250
+ border-color:var(--color-stroke-attention);
1251
+ color:var(--color-foreground-on-attention);
1251
1252
  font-weight:700;
1252
1253
  overflow:hidden;
1253
1254
  position:relative;
@@ -1270,8 +1271,8 @@ a.fake-btn--primary.fake-btn--destructive:not([disabled],[aria-disabled=true]):a
1270
1271
  }
1271
1272
 
1272
1273
  button.btn--primary.btn--destructive[aria-disabled=true],button.btn--primary.btn--destructive[disabled]{
1273
- background-color:var(--btn-primary-destructive-disabled-background, var(--color-background-disabled));
1274
- border-color:var(--btn-primary-destructive-disabled-border, var(--color-stroke-disabled));
1274
+ background-color:var(--color-background-disabled);
1275
+ border-color:var(--color-stroke-disabled);
1275
1276
  }
1276
1277
 
1277
1278
  button.btn .progress-spinner{
@@ -1324,15 +1325,17 @@ a.fake-btn--primary:not([href]),a.fake-btn--primary[aria-disabled=true]{
1324
1325
 
1325
1326
  a.fake-btn--secondary,button.btn--secondary{
1326
1327
  background-color:var(--btn-secondary-background-color, transparent);
1327
- border-color:var(--btn-secondary-border-color, var(--color-stroke-accent));
1328
- color:var(--btn-secondary-foreground-color, var(--color-foreground-accent));
1329
- overflow:hidden;
1330
- position:relative;
1328
+ border-color:var(--color-stroke-accent);
1329
+ color:var(--color-foreground-accent);
1331
1330
  transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
1332
1331
  }
1333
1332
  a.fake-btn--secondary:active,button.btn--secondary:active{
1334
1333
  transform:scale(.97);
1335
1334
  }
1335
+ a.fake-btn--secondary,button.btn--secondary{
1336
+ overflow:hidden;
1337
+ position:relative;
1338
+ }
1336
1339
  a.fake-btn--secondary:after,button.btn--secondary:after{
1337
1340
  background-color:var(--state-layer-neutral);
1338
1341
  content:"";
@@ -1350,7 +1353,7 @@ a.fake-btn--secondary:not([disabled],[aria-disabled=true]):active:after,a.fake-b
1350
1353
  background-color:var(--state-layer-pressed);
1351
1354
  }
1352
1355
 
1353
- a.fake-btn--secondary:visited{
1356
+ a.fake-btn--secondary:hover,a.fake-btn--secondary:visited{
1354
1357
  color:var(--btn-secondary-foreground-color, var(--color-foreground-accent));
1355
1358
  }
1356
1359
 
@@ -1381,13 +1384,15 @@ a.fake-btn--secondary:not([href]),a.fake-btn--secondary[aria-disabled=true]{
1381
1384
 
1382
1385
  a.fake-btn--tertiary,button.btn--tertiary{
1383
1386
  border-color:var(--btn-tertiary-border-color, var(--color-stroke-default));
1384
- overflow:hidden;
1385
- position:relative;
1386
1387
  transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
1387
1388
  }
1388
1389
  a.fake-btn--tertiary:active,button.btn--tertiary:active{
1389
1390
  transform:scale(.97);
1390
1391
  }
1392
+ a.fake-btn--tertiary,button.btn--tertiary{
1393
+ overflow:hidden;
1394
+ position:relative;
1395
+ }
1391
1396
  a.fake-btn--tertiary:after,button.btn--tertiary:after{
1392
1397
  background-color:var(--state-layer-neutral);
1393
1398
  content:"";
@@ -2518,8 +2523,8 @@ span.combobox{
2518
2523
  }
2519
2524
 
2520
2525
  .combobox__listbox{
2521
- background-color:var(--combobox-listbox-background-color, var(--color-background-elevated));
2522
- border-radius:var(--combobox-listbox-border-radius, var(--border-radius-50));
2526
+ background-color:var(--color-background-elevated);
2527
+ border-radius:var(--border-radius-50);
2523
2528
  box-shadow:var(--bubble-shadow);
2524
2529
  box-sizing:border-box;
2525
2530
  display:none;
@@ -2528,7 +2533,6 @@ span.combobox{
2528
2533
  overflow-y:auto;
2529
2534
  position:absolute;
2530
2535
  top:0;
2531
- width:-moz-fit-content;
2532
2536
  width:fit-content;
2533
2537
  z-index:2;
2534
2538
  }
@@ -2556,11 +2560,11 @@ span.combobox{
2556
2560
 
2557
2561
  .combobox__option[role^=option]{
2558
2562
  background-color:initial;
2559
- border-color:var(--listbox-option-border-color, var(--color-background-primary));
2563
+ border-color:var(--color-background-primary);
2560
2564
  border-style:solid;
2561
2565
  border-width:1px;
2562
2566
  box-sizing:border-box;
2563
- color:var(--listbox-option-foreground-color, var(--color-foreground-primary));
2567
+ color:var(--color-foreground-primary);
2564
2568
  cursor:default;
2565
2569
  display:inline-grid;
2566
2570
  font-family:inherit;
@@ -2577,7 +2581,7 @@ span.combobox{
2577
2581
  display:none;
2578
2582
  }
2579
2583
  .combobox__option[role^=option]:hover{
2580
- color:var(--listbox-option-hover-foreground-color, var(--color-foreground-primary));
2584
+ color:var(--color-foreground-primary);
2581
2585
  }
2582
2586
  .combobox__option[role^=option]:active{
2583
2587
  font-weight:700;
@@ -2650,7 +2654,6 @@ span.combobox{
2650
2654
 
2651
2655
  .combobox__control>input{
2652
2656
  -webkit-appearance:none;
2653
- -moz-appearance:none;
2654
2657
  appearance:none;
2655
2658
  background-color:var(--combobox-textbox-background-color, var(--color-background-secondary));
2656
2659
  border-color:var(--combobox-textbox-border-color, var(--color-stroke-default));
@@ -2749,12 +2752,12 @@ span.combobox{
2749
2752
  }
2750
2753
 
2751
2754
  .confirm-dialog[role=dialog]{
2755
+ align-items:flex-start;
2752
2756
  background-color:var(--dialog-scrim-color-show);
2753
2757
  bottom:0;
2758
+ justify-content:center;
2754
2759
  left:0;
2755
2760
  -webkit-overflow-scrolling:touch;
2756
- align-items:flex-start;
2757
- justify-content:center;
2758
2761
  position:fixed;
2759
2762
  right:0;
2760
2763
  top:0;
@@ -3179,12 +3182,12 @@ details.details summary:focus:not(:focus-visible){
3179
3182
  }
3180
3183
  /*! DEPRECATED COMPONENT. Will be removed next major version */
3181
3184
  .drawer-dialog[role=dialog]{
3185
+ align-items:flex-end;
3182
3186
  background-color:var(--dialog-scrim-color-show);
3183
3187
  bottom:0;
3184
3188
  left:0;
3185
- -webkit-overflow-scrolling:touch;
3186
- align-items:flex-end;
3187
3189
  overflow:hidden;
3190
+ -webkit-overflow-scrolling:touch;
3188
3191
  position:fixed;
3189
3192
  right:0;
3190
3193
  top:0;
@@ -3962,7 +3965,6 @@ div.file-input__container{
3962
3965
  display:flex;
3963
3966
  flex-direction:row;
3964
3967
  gap:var(--spacing-100);
3965
- min-width:-moz-fit-content;
3966
3968
  min-width:fit-content;
3967
3969
  padding:var(--spacing-200);
3968
3970
  pointer-events:none;
@@ -4033,12 +4035,11 @@ span.file-input__content-cta{
4033
4035
 
4034
4036
  a.filter-link,button.filter-button{
4035
4037
  align-items:center;
4036
- background-color:var(--filter-button-background-color, var(--color-background-secondary));
4038
+ background-color:var(--color-background-secondary);
4037
4039
  border:1px solid transparent;
4038
- border-color:var(--filter-button-selected-border-color, var(--color-stroke-default));
4039
4040
  border-radius:16px;
4040
4041
  box-sizing:border-box;
4041
- color:var(--filter-button-foreground-color, var(--color-foreground-primary));
4042
+ color:var(--color-foreground-primary);
4042
4043
  display:inline-flex;
4043
4044
  flex:0 1 auto;
4044
4045
  flex-direction:column;
@@ -4137,9 +4138,7 @@ a.filter-chip,button.filter-chip{
4137
4138
  justify-content:space-between;
4138
4139
  max-width:296px;
4139
4140
  min-width:32px;
4140
- overflow:hidden;
4141
4141
  padding:0 var(--spacing-150);
4142
- position:relative;
4143
4142
  text-decoration:none;
4144
4143
  transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
4145
4144
  vertical-align:bottom;
@@ -4147,6 +4146,10 @@ a.filter-chip,button.filter-chip{
4147
4146
  a.filter-chip:active,button.filter-chip:active{
4148
4147
  transform:scale(.97);
4149
4148
  }
4149
+ a.filter-chip,button.filter-chip{
4150
+ overflow:hidden;
4151
+ position:relative;
4152
+ }
4150
4153
  a.filter-chip:after,button.filter-chip:after{
4151
4154
  background-color:var(--state-layer-neutral);
4152
4155
  content:"";
@@ -4171,8 +4174,8 @@ a.filter-chip--expressive,button.filter-chip--expressive{
4171
4174
 
4172
4175
  .filter-chip__media{
4173
4176
  align-items:center;
4174
- border-radius:8px;
4175
4177
  border-radius:var(--spacing-400);
4178
+ border-radius:8px;
4176
4179
  display:flex;
4177
4180
  justify-content:center;
4178
4181
  margin-inline-start:-8px;
@@ -4486,12 +4489,11 @@ span.filter-menu-button+span.filter-menu-button{
4486
4489
 
4487
4490
  button.filter-menu-button__button{
4488
4491
  align-items:center;
4489
- background-color:var(--filter-button-background-color, var(--color-background-secondary));
4492
+ background-color:var(--color-background-secondary);
4490
4493
  border:1px solid transparent;
4491
- border-color:var(--filter-button-selected-border-color, var(--color-stroke-default));
4492
4494
  border-radius:16px;
4493
4495
  box-sizing:border-box;
4494
- color:var(--filter-button-foreground-color, var(--color-foreground-primary));
4496
+ color:var(--color-foreground-primary);
4495
4497
  display:inline-flex;
4496
4498
  flex:0 1 auto;
4497
4499
  flex-direction:column;
@@ -4511,7 +4513,7 @@ button.filter-menu-button__button+button.filter-menu-button__button{
4511
4513
  margin-left:8px;
4512
4514
  }
4513
4515
  button.filter-menu-button__button:active,button.filter-menu-button__button:focus,button.filter-menu-button__button:hover{
4514
- background-color:var(--filter-button-background-color, var(--color-state-secondary-hover));
4516
+ background-color:var(--color-state-secondary-hover);
4515
4517
  }
4516
4518
 
4517
4519
  .filter-menu-button__button-cell{
@@ -4633,8 +4635,6 @@ span.filter-menu-button__radio svg.icon--checked{
4633
4635
  justify-content:space-between;
4634
4636
  line-height:1.4em;
4635
4637
  margin:0;
4636
- outline-offset:-4px;
4637
- padding:8px 16px;
4638
4638
  width:100%;
4639
4639
  }
4640
4640
  .filter-menu-button__item:hover{
@@ -4649,6 +4649,10 @@ span.filter-menu-button__radio svg.icon--checked{
4649
4649
  .filter-menu-button__item:disabled:hover,.filter-menu-button__item[aria-disabled=true]:hover{
4650
4650
  background-color:inherit;
4651
4651
  }
4652
+ .filter-menu-button__item{
4653
+ outline-offset:-4px;
4654
+ padding:8px 16px;
4655
+ }
4652
4656
  .filter-menu-button__item:hover{
4653
4657
  background-color:var(--color-state-primary-hover);
4654
4658
  }
@@ -4681,8 +4685,9 @@ span.filter-menu-button__item{
4681
4685
  button.filter-menu-button__footer{
4682
4686
  background-color:var(--filter-menu-item-background-color, var(--color-background-elevated));
4683
4687
  border:none;
4684
- border-top:1px solid;
4685
- border-color:var(--filter-menu-border-color, var(--color-stroke-subtle));
4688
+ border-color:var(--color-stroke-subtle);
4689
+ border-top-style:solid;
4690
+ border-top-width:1px;
4686
4691
  bottom:0;
4687
4692
  box-sizing:border-box;
4688
4693
  color:var(--filter-menu-item-foreground-color, var(--color-foreground-primary));
@@ -6137,10 +6142,12 @@ a.icon-link>svg{
6137
6142
  }
6138
6143
 
6139
6144
  a.icon-link,button.icon-btn{
6140
- background-color:var(--icon-button-background-color, var(--color-background-secondary));
6145
+ align-items:center;
6146
+ background-color:var(--color-background-secondary);
6141
6147
  border:2px solid transparent;
6142
6148
  border-radius:50px;
6143
6149
  box-sizing:border-box;
6150
+ display:inline-flex;
6144
6151
  font-family:inherit;
6145
6152
  height:40px;
6146
6153
  justify-content:center;
@@ -6150,7 +6157,7 @@ a.icon-link,button.icon-btn{
6150
6157
  width:40px;
6151
6158
  }
6152
6159
  a.icon-link>svg,button.icon-btn>svg{
6153
- fill:var(--icon-button-icon-foreground-color, var(--color-foreground-primary));
6160
+ fill:var(--color-foreground-primary);
6154
6161
  max-width:75%;
6155
6162
  position:relative;
6156
6163
  }
@@ -6165,17 +6172,17 @@ a.icon-link:not(:focus-visible),button.icon-btn:not(:focus-visible){
6165
6172
  }
6166
6173
 
6167
6174
  a.icon-link.icon-link--primary,button.icon-btn.icon-btn--primary{
6168
- background-color:var(--btn-primary-background-color, var(--color-background-accent));
6169
- border-color:var(--btn-primary-border-color, var(--color-stroke-accent));
6170
- color:var(--btn-primary-foreground-color, var(--color-foreground-on-accent));
6175
+ background-color:var(--color-background-accent);
6176
+ border-color:var(--color-stroke-accent);
6177
+ color:var(--color-foreground-on-accent);
6171
6178
  }
6172
6179
 
6173
6180
  a.icon-link.icon-link--primary>svg,button.icon-btn.icon-btn--primary>svg{
6174
- fill:var(--icon-button-icon-foreground-color, var(--color-foreground-on-accent));
6181
+ fill:var(--color-foreground-on-accent);
6175
6182
  }
6176
6183
 
6177
6184
  a.icon-link.icon-link--secondary>svg,button.icon-btn.icon-btn--secondary>svg{
6178
- fill:var(--icon-button-icon-foreground-color, var(--color-foreground-accent));
6185
+ fill:var(--color-foreground-accent);
6179
6186
  }
6180
6187
 
6181
6188
  a.icon-link.icon-link--small .progress-spinner,button.icon-btn.icon-btn--small .progress-spinner{
@@ -6201,7 +6208,7 @@ a.icon-link--transparent,a.icon-link--transparent:active,a.icon-link--transparen
6201
6208
  }
6202
6209
 
6203
6210
  a.icon-link:visited>svg{
6204
- fill:var(--icon-button-icon-foreground-color, var(--color-foreground-primary));
6211
+ fill:var(--color-foreground-primary);
6205
6212
  }
6206
6213
 
6207
6214
  a:not([href]).icon-link>svg,a[aria-disabled=true].icon-link>svg,button[aria-disabled=true].icon-btn>svg,button[disabled].icon-btn>svg{
@@ -6213,11 +6220,11 @@ a:not([href]).icon-link:focus>svg,a:not([href]).icon-link:hover>svg,a[aria-disab
6213
6220
  }
6214
6221
 
6215
6222
  a.icon-link:visited:focus>svg,a.icon-link:visited:hover>svg{
6216
- fill:var(--icon-button-icon-hover-foreground-color, var(--color-foreground-primary));
6223
+ fill:var(--color-foreground-primary);
6217
6224
  }
6218
6225
 
6219
6226
  a.icon-link.icon-link--primary:visited>svg{
6220
- fill:var(--icon-button-icon-foreground-color, var(--color-foreground-on-accent));
6227
+ fill:var(--color-foreground-on-accent);
6221
6228
  }
6222
6229
 
6223
6230
  a.icon-link--badged,button.icon-btn--badged{
@@ -6246,12 +6253,12 @@ a.icon-link.icon-link--primary,a.icon-link.icon-link--secondary,a.icon-link.icon
6246
6253
  }
6247
6254
 
6248
6255
  a:not([href]).icon-link.icon-link--primary,a[aria-disabled=true].icon-link.icon-link--primary,button[aria-disabled=true].icon-btn.icon-btn--primary,button[disabled].icon-btn.icon-btn--primary{
6249
- background-color:var(--icon-button-disabled-background-color, var(--color-background-disabled));
6250
- border-color:var(--btn-primary-disabled-border-color, var(--color-stroke-disabled));
6256
+ background-color:var(--color-background-disabled);
6257
+ border-color:var(--color-stroke-disabled);
6251
6258
  }
6252
6259
 
6253
6260
  a:not([href]).icon-link.icon-link--primary>svg,a[aria-disabled=true].icon-link.icon-link--primary>svg,button[aria-disabled=true].icon-btn.icon-btn--primary>svg,button[disabled].icon-btn.icon-btn--primary>svg{
6254
- fill:var(--icon-button-icon-foreground-color, var(--color-foreground-on-accent));
6261
+ fill:var(--color-foreground-on-accent);
6255
6262
  }
6256
6263
 
6257
6264
  a.icon-link.icon-link--primary .progress-spinner,button.icon-btn.icon-btn--primary .progress-spinner{
@@ -6261,8 +6268,8 @@ a.icon-link.icon-link--primary .progress-spinner,button.icon-btn.icon-btn--prima
6261
6268
 
6262
6269
  a.icon-link.icon-link--secondary,button.icon-btn.icon-btn--secondary{
6263
6270
  background-color:initial;
6264
- border-color:var(--btn-secondary-border-color, var(--color-stroke-accent));
6265
- color:var(--btn-secondary-foreground-color, var(--color-foreground-accent));
6271
+ border-color:var(--color-stroke-accent);
6272
+ color:var(--color-foreground-accent);
6266
6273
  }
6267
6274
 
6268
6275
  a.icon-link.icon-link--primary:not([disabled],[aria-disabled=true]):focus,a.icon-link.icon-link--primary:not([disabled],[aria-disabled=true]):hover,button.icon-btn.icon-btn--primary:not([disabled],[aria-disabled=true]):focus,button.icon-btn.icon-btn--primary:not([disabled],[aria-disabled=true]):hover{
@@ -6278,11 +6285,11 @@ a.icon-link.icon-link--secondary .progress-spinner,a.icon-link.icon-link--tertia
6278
6285
  }
6279
6286
 
6280
6287
  a:not([href]).icon-link.icon-link--secondary,a[aria-disabled=true].icon-link.icon-link--secondary,button[aria-disabled=true].icon-btn.icon-btn--secondary,button[disabled].icon-btn.icon-btn--secondary{
6281
- border-color:var(--btn-secondary-disabled-border-color, var(--color-stroke-disabled));
6288
+ border-color:var(--color-stroke-disabled);
6282
6289
  }
6283
6290
 
6284
6291
  a:not([href]).icon-link.icon-blinktn--secondary>svg,a[aria-disabled=true].icon-link.icon-link--secondary>svg,button[aria-disabled=true].icon-btn.icon-btn--secondary>svg,button[disabled].icon-btn.icon-btn--secondary>svg{
6285
- fill:var(--icon-button-icon-foreground-color, var(--color-foreground-disabled));
6292
+ fill:var(--color-foreground-disabled);
6286
6293
  }
6287
6294
 
6288
6295
  a.icon-link.icon-link--secondary:not([disabled],[aria-disabled=true]):focus,a.icon-link.icon-link--secondary:not([disabled],[aria-disabled=true]):hover,button.icon-btn.icon-btn--secondary:not([disabled],[aria-disabled=true]):focus,button.icon-btn.icon-btn--secondary:not([disabled],[aria-disabled=true]):hover{
@@ -6294,12 +6301,12 @@ a.icon-link.icon-link--secondary:not([disabled],[aria-disabled=true]):active,but
6294
6301
 
6295
6302
  a.icon-link.icon-link--tertiary,button.icon-btn.icon-btn--tertiary{
6296
6303
  background-color:initial;
6297
- border-color:var(--btn-primary-border-color, var(--color-stroke-default));
6298
- color:var(--btn-primary-foreground-color, var(--color-foreground-accent));
6304
+ border-color:var(--color-stroke-default);
6305
+ color:var(--color-foreground-accent);
6299
6306
  }
6300
6307
 
6301
6308
  a:not([href]).icon-link.icon-link--tertiary,a[aria-disabled=true].icon-link.icon-link--tertiary,button[aria-disabled=true].icon-btn.icon-btn--tertiary,button[disabled].icon-btn.icon-btn--tertiary{
6302
- border-color:var(--btn-tertiary-disabled-border-color, var(--color-stroke-disabled));
6309
+ border-color:var(--color-stroke-disabled);
6303
6310
  }
6304
6311
 
6305
6312
  a.icon-link.icon-link--tertiary:not([disabled],[aria-disabled=true]):focus,a.icon-link.icon-link--tertiary:not([disabled],[aria-disabled=true]):hover,button.icon-btn.icon-btn--tertiary:not([disabled],[aria-disabled=true]):focus,button.icon-btn.icon-btn--tertiary:not([disabled],[aria-disabled=true]):hover{
@@ -7555,12 +7562,12 @@ span.inline-notice{
7555
7562
  }
7556
7563
 
7557
7564
  .lightbox-dialog[role=dialog]{
7565
+ align-items:flex-start;
7558
7566
  background-color:var(--dialog-scrim-color-show);
7559
7567
  bottom:0;
7568
+ justify-content:center;
7560
7569
  left:0;
7561
7570
  -webkit-overflow-scrolling:touch;
7562
- align-items:flex-start;
7563
- justify-content:center;
7564
7571
  position:fixed;
7565
7572
  right:0;
7566
7573
  top:0;
@@ -7988,11 +7995,11 @@ div.listbox__options--reverse[role=listbox]{
7988
7995
 
7989
7996
  div.listbox__option[role=option]{
7990
7997
  background-color:initial;
7991
- border-color:var(--listbox-option-border-color, var(--color-background-primary));
7998
+ border-color:var(--color-background-primary);
7992
7999
  border-style:solid;
7993
8000
  border-width:1px;
7994
8001
  box-sizing:border-box;
7995
- color:var(--listbox-option-foreground-color, var(--color-foreground-primary));
8002
+ color:var(--color-foreground-primary);
7996
8003
  display:inline-grid;
7997
8004
  font-family:inherit;
7998
8005
  grid-template-columns:auto auto;
@@ -8011,7 +8018,7 @@ div.listbox__option[role=option][hidden]{
8011
8018
  }
8012
8019
  div.listbox__option[role=option]:hover{
8013
8020
  background-color:var(--color-state-primary-hover);
8014
- color:var(--listbox-option-hover-foreground-color, var(--color-foreground-primary));
8021
+ color:var(--color-foreground-primary);
8015
8022
  }
8016
8023
  div.listbox__option[role=option]:active{
8017
8024
  font-weight:700;
@@ -8029,12 +8036,12 @@ span.listbox__value{
8029
8036
 
8030
8037
  div.listbox__option svg.icon{
8031
8038
  align-self:center;
8039
+ margin-inline-start:var(--spacing-100);
8032
8040
  fill:currentColor;
8033
8041
  margin:0 auto;
8034
8042
  opacity:0;
8035
8043
  stroke:currentColor;
8036
8044
  stroke-width:0;
8037
- margin-inline-start:var(--spacing-100);
8038
8045
  }
8039
8046
 
8040
8047
  div.listbox__options[role=listbox]:focus .listbox__option--active[role=option]{
@@ -8068,8 +8075,8 @@ span.listbox-button--fluid,span.listbox-button--fluid .btn,span.listbox-button--
8068
8075
  }
8069
8076
 
8070
8077
  div.listbox-button__listbox{
8071
- background-color:var(--listbox-button-listbox-background-color, var(--color-background-elevated));
8072
- border-radius:var(--listbox-button-listbox-border-radius, var(--border-radius-50));
8078
+ background-color:var(--color-background-elevated);
8079
+ border-radius:var(--border-radius-50);
8073
8080
  box-shadow:var(--bubble-shadow);
8074
8081
  box-sizing:border-box;
8075
8082
  display:none;
@@ -8078,7 +8085,6 @@ div.listbox-button__listbox{
8078
8085
  overflow-y:auto;
8079
8086
  position:absolute;
8080
8087
  top:0;
8081
- width:-moz-fit-content;
8082
8088
  width:fit-content;
8083
8089
  z-index:2;
8084
8090
  }
@@ -8198,11 +8204,11 @@ div.listbox-button__option[role=option][aria-selected=true] svg.icon{
8198
8204
 
8199
8205
  div.listbox-button__option[role=option]{
8200
8206
  background-color:initial;
8201
- border-color:var(--listbox-option-border-color, var(--color-background-primary));
8207
+ border-color:var(--color-background-primary);
8202
8208
  border-style:solid;
8203
8209
  border-width:1px;
8204
8210
  box-sizing:border-box;
8205
- color:var(--listbox-option-foreground-color, var(--color-foreground-primary));
8211
+ color:var(--color-foreground-primary);
8206
8212
  cursor:default;
8207
8213
  display:inline-grid;
8208
8214
  font-family:inherit;
@@ -8222,7 +8228,7 @@ div.listbox-button__option[role=option][hidden]{
8222
8228
  }
8223
8229
  div.listbox-button__option[role=option]:hover{
8224
8230
  background-color:var(--color-state-primary-hover);
8225
- color:var(--listbox-option-hover-foreground-color, var(--color-foreground-primary));
8231
+ color:var(--color-foreground-primary);
8226
8232
  }
8227
8233
  div.listbox-button__option[role=option]:active{
8228
8234
  font-weight:700;
@@ -8392,7 +8398,6 @@ span.listbox-button__value{
8392
8398
  margin:0;
8393
8399
  }
8394
8400
  .number-input .textbox .textbox__control[type=number]{
8395
- -moz-appearance:textfield;
8396
8401
  -webkit-appearance:textfield;
8397
8402
  appearance:textfield;
8398
8403
  }
@@ -8610,8 +8615,8 @@ div.menu__item[role^=menuitem]:focus:not(:focus-visible){
8610
8615
  }
8611
8616
 
8612
8617
  .fake-menu-button__menu,.menu-button__menu{
8613
- background-color:var(--menu-button-menu-background-color, var(--color-background-elevated));
8614
- border-radius:var(--menu-button-menu-border-radius, var(--border-radius-50));
8618
+ background-color:var(--color-background-elevated);
8619
+ border-radius:var(--border-radius-50);
8615
8620
  box-shadow:var(--bubble-shadow);
8616
8621
  box-sizing:border-box;
8617
8622
  display:none;
@@ -8621,7 +8626,6 @@ div.menu__item[role^=menuitem]:focus:not(:focus-visible){
8621
8626
  overflow-y:auto;
8622
8627
  position:absolute;
8623
8628
  top:0;
8624
- width:-moz-fit-content;
8625
8629
  width:fit-content;
8626
8630
  z-index:2;
8627
8631
  }
@@ -9212,10 +9216,10 @@ nav.pagination--fluid ol.pagination__items li{
9212
9216
  .panel-dialog[role=dialog]{
9213
9217
  background-color:var(--dialog-scrim-color-show);
9214
9218
  bottom:0;
9215
- left:0;
9216
- -webkit-overflow-scrolling:touch;
9217
9219
  flex-direction:column;
9220
+ left:0;
9218
9221
  overflow:hidden;
9222
+ -webkit-overflow-scrolling:touch;
9219
9223
  position:fixed;
9220
9224
  right:0;
9221
9225
  top:0;
@@ -9961,6 +9965,7 @@ hr.progress-stepper__separator{
9961
9965
  min-width:inherit;
9962
9966
  width:4px;
9963
9967
  }
9968
+
9964
9969
  [dir=rtl] .progress-stepper__item:first-child .progress-stepper__text{
9965
9970
  text-align:right;
9966
9971
  }
@@ -10095,7 +10100,7 @@ input.radio__control[type=radio]:focus:not(:focus-visible)+span.radio__icon{
10095
10100
 
10096
10101
  div[role=region].section-notice,section.section-notice{
10097
10102
  display:grid;
10098
- grid-template-columns:32px auto auto auto;
10103
+ grid-template-columns:32px auto min-content min-content;
10099
10104
  }
10100
10105
  .section-notice--education{
10101
10106
  background-color:var(--section-notice-education-background-color, var(--color-background-education));
@@ -10187,15 +10192,13 @@ p.section-notice__cta{
10187
10192
  grid-column:4;
10188
10193
  grid-row:1;
10189
10194
  justify-self:flex-end;
10190
- margin-right:var(--spacing-200);
10191
10195
  margin-top:0;
10192
- padding-right:var(--spacing-200);
10193
10196
  }
10194
10197
  .section-notice__header~.section-notice__cta{
10195
- grid-column:4;
10198
+ grid-column:3;
10196
10199
  }
10197
10200
  .section-notice__footer{
10198
- padding-left:var(--spacing-200);
10201
+ padding-inline-start:var(--spacing-200);
10199
10202
  }
10200
10203
  }
10201
10204
  [dir=rtl] .section-notice__footer{
@@ -10203,15 +10206,10 @@ p.section-notice__cta{
10203
10206
  margin-left:0;
10204
10207
  margin-right:auto;
10205
10208
  padding-left:0;
10206
- padding-right:0;
10207
10209
  }
10208
10210
  [dir=rtl] .section-notice__main{
10209
10211
  padding-right:0;
10210
10212
  }
10211
- [dir=rtl] p.section-notice__cta{
10212
- margin-left:16px;
10213
- padding-left:16px;
10214
- }
10215
10213
  .section-notice__header:has(svg[class*="24"]){
10216
10214
  height:var(--spacing-300);
10217
10215
  }
@@ -10392,7 +10390,6 @@ span.select{
10392
10390
 
10393
10391
  .select select{
10394
10392
  -webkit-appearance:none;
10395
- -moz-appearance:none;
10396
10393
  appearance:none;
10397
10394
  background-color:var(--select-background-color, var(--color-background-secondary));
10398
10395
  border-color:var(--select-border-color, var(--color-stroke-default));
@@ -10515,9 +10512,7 @@ span.select{
10515
10512
  justify-content:space-between;
10516
10513
  max-width:296px;
10517
10514
  min-width:32px;
10518
- overflow:hidden;
10519
10515
  padding:0 var(--spacing-150);
10520
- position:relative;
10521
10516
  text-decoration:none;
10522
10517
  transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
10523
10518
  vertical-align:bottom;
@@ -10525,6 +10520,10 @@ span.select{
10525
10520
  .selection-chip:active{
10526
10521
  transform:scale(.97);
10527
10522
  }
10523
+ .selection-chip{
10524
+ overflow:hidden;
10525
+ position:relative;
10526
+ }
10528
10527
  .selection-chip:after{
10529
10528
  background-color:var(--state-layer-neutral);
10530
10529
  content:"";
@@ -11455,7 +11454,6 @@ div.tabs__item[role=tab]:not([aria-selected=true]):focus>span:after,div.tabs__it
11455
11454
  gap:var(--spacing-100);
11456
11455
  overflow:hidden;
11457
11456
  position:relative;
11458
- width:-moz-fit-content;
11459
11457
  width:fit-content;
11460
11458
  }
11461
11459
  .textbox button.icon-btn{
@@ -11511,7 +11509,6 @@ input.textbox__control:last-child:not([readonly]){
11511
11509
 
11512
11510
  input.textbox__control,textarea.textbox__control{
11513
11511
  -webkit-appearance:none;
11514
- -moz-appearance:none;
11515
11512
  appearance:none;
11516
11513
  flex-grow:1;
11517
11514
  font-size:1em;