@swiftwc/ui 0.0.0-dev.112 → 0.0.0-dev.113

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 (18) hide show
  1. package/generated/components/h-flex-stack.d.ts +16 -0
  2. package/generated/components/h-flex-stack.js +18 -0
  3. package/generated/components/index.d.ts +2 -0
  4. package/generated/components/index.js +2 -0
  5. package/generated/components/picker-view.d.ts +3 -20
  6. package/generated/components/picker-view.js +306 -257
  7. package/generated/components/tab-view.js +1 -5
  8. package/generated/components/v-flex-stack.d.ts +16 -0
  9. package/generated/components/v-flex-stack.js +18 -0
  10. package/generated/css/index.css +268 -150
  11. package/html-data/en.json +83 -21
  12. package/package.json +1 -1
  13. package/scss/_maps.scss +1 -1
  14. package/scss/components/_h-flex-stack.scss +2 -0
  15. package/scss/components/_index.scss +1 -1
  16. package/scss/components/_picker-view.scss +157 -117
  17. package/scss/components/_v-flex-stack.scss +2 -0
  18. package/scss/utils/_stacks.scss +3 -1
package/generated/css/index.css CHANGED
@@ -1286,7 +1286,6 @@
1286
1286
  :where(menu-view)::part(menu-scrollable),
1287
1287
  :where(picker-view)::part(picker-stack),
1288
1288
  :where(picker-view)::part(picker-label-stack),
1289
- :where(picker-view)::part(picker-input-stack),
1290
1289
  :where(tool-bar)::part(top-bar),
1291
1290
  :where(tool-bar)::part(bottom-bar),
1292
1291
  :where(label-view)::part(label-image-stack),
@@ -2502,6 +2501,7 @@
2502
2501
  flex-flow: row nowrap;
2503
2502
  place-items: safe center;
2504
2503
  place-content: safe center;
2504
+ gap: 1rem;
2505
2505
  }
2506
2506
  :where(h-flex-stack > *) {
2507
2507
  max-block-size: 100%;
@@ -2516,6 +2516,7 @@
2516
2516
  flex-flow: column nowrap;
2517
2517
  place-items: center;
2518
2518
  place-content: center;
2519
+ gap: 1rem;
2519
2520
  }
2520
2521
  :where(v-flex-stack > *) {
2521
2522
  max-inline-size: 100%;
@@ -5248,21 +5249,24 @@
5248
5249
  :where(picker-view) {
5249
5250
  grid-template-columns: minmax(0, 1fr);
5250
5251
  grid-template-rows: minmax(0, 1fr);
5251
- padding-inline: var(--picker--stack-grid-padding-inline, );
5252
- padding-block: var(--picker--stack-grid-padding-block, );
5253
- background: var(--picker--stack-grid-background, );
5254
- border-radius: var(--picker--stack-grid-border-radius, );
5255
- border: var(--picker--stack-grid-border, );
5256
- color: var(--picker--stack-grid-color, );
5252
+ padding-inline: var(--picker--host-grid-padding-inline, );
5253
+ padding-block: var(--picker--host-grid-padding-block, );
5254
+ background: var(--picker--host-grid-background, );
5255
+ border-radius: var(--picker--host-grid-border-radius, );
5256
+ border: var(--picker--host-grid-border, );
5257
+ color: var(--picker--host-grid-color, );
5257
5258
  }
5258
5259
  :where(picker-view)::part(picker-stack) {
5259
- grid-template-columns: var(--picker--stack-grid-template-columns, );
5260
- grid-template-rows: var(--picker--stack-grid-template-rows, );
5261
- row-gap: var(--picker--stack-row-gap, );
5262
- column-gap: var(--picker--stack-column-gap, );
5260
+ grid-template-columns: var(--picker--host-grid-template-columns, );
5261
+ grid-template-rows: var(--picker--host-grid-template-rows, );
5262
+ row-gap: var(--picker--host-row-gap, );
5263
+ column-gap: var(--picker--host-column-gap, );
5263
5264
  }
5264
5265
  :where(picker-view)::part(picker-input-stack) {
5265
- text-align: var(--picker--input-stack-text-align, );
5266
+ display: var(--picker--inputstack-display, grid);
5267
+ text-align: var(--picker--inputstack-text-align, );
5268
+ gap: var(--picker--inputstack-gap, );
5269
+ flex-flow: var(--picker--inputstack-flex-flow, );
5266
5270
  }
5267
5271
  :where(picker-view)::part(picker-label-stack) {
5268
5272
  display: var(--picker--labelstack-display, none);
@@ -5273,8 +5277,8 @@
5273
5277
  color: var(--secondary);
5274
5278
  }
5275
5279
  :where(picker-view) {
5276
- --picker--stack-grid-template-columns: minmax(30%, 1fr) auto;
5277
- --picker--stack-grid-template-rows: minmax(0, 1fr);
5280
+ --picker--host-grid-template-columns: minmax(30%, 1fr) auto;
5281
+ --picker--host-grid-template-rows: minmax(0, 1fr);
5278
5282
  }
5279
5283
  @container not style(--picker-style) {
5280
5284
  :where(picker-view > list-view > section-view > :not(button):first-child) {
@@ -5284,119 +5288,131 @@
5284
5288
  }
5285
5289
  @supports (x: if(else:red)) {
5286
5290
  :where(form picker-view) {
5287
- --picker--labelstack-display: if(style(--picker-style: sheet): grid ; style(--picker-style: navigation-link): grid ; style(--picker-style: menu): grid ; else: none ;);
5288
- --picker--stack-display: if(style(--picker-style: sheet): flex ; style(--picker-style: navigation-link): flex ; style(--picker-style: menu): flex ;);
5289
- --picker--stack-justify-content: if(style(--picker-style: sheet): space-between ; style(--picker-style: navigation-link): space-between ; style(--picker-style: menu): space-between ;);
5290
- --picker--stack-row-gap: if(
5291
- style(--picker-style: sheet): var(--labeled-content-row-gap) ; style(--picker-style: navigation-link): var(--labeled-content-row-gap) ;
5292
- style(--picker-style: menu): var(--labeled-content-row-gap) ;
5293
- );
5294
- --picker--stack-column-gap: if(
5295
- style(--picker-style: sheet): var(--labeled-content-column-gap) ; style(--picker-style: navigation-link): var(--labeled-content-column-gap) ;
5296
- style(--picker-style: menu): var(--labeled-content-column-gap) ;
5297
- );
5298
- --picker--stack-grid-padding-inline: if(
5299
- style(--picker-style: sheet): var(--itempadistart,) var(--itempadiend,) ; style(--picker-style: navigation-link): var(--itempadistart,) var(--itempadiend,) ;
5300
- style(--picker-style: menu): var(--itempadistart,) var(--itempadiend,) ;
5301
- );
5302
- --picker--stack-grid-padding-block: if(
5303
- style(--picker-style: sheet): var(--itempadbstart,) var(--itempadbend,) ; style(--picker-style: navigation-link): var(--itempadbstart,) var(--itempadbend,) ;
5304
- style(--picker-style: menu): var(--itempadbstart,) var(--itempadbend,) ;
5305
- );
5306
- --picker--stack-grid-border-radius: if(
5307
- style(--picker-style: sheet): var(--itemradiustl,) var(--itemradiustr,) var(--itemradiusbr,) var(--itemradiusbl,) ; style(--picker-style: navigation-link): var(--itemradiustl,)
5308
- var(--itemradiustr,) var(--itemradiusbr,) var(--itemradiusbl,) ; style(--picker-style: menu): var(--itemradiustl,) var(--itemradiustr,) var(--itemradiusbr,) var(--itemradiusbl,) ;
5309
- );
5310
- --picker--stack-grid-background: if(
5311
- style(--picker-style: sheet): var(--itemface,) ; style(--picker-style: navigation-link): var(--itemface,) ; style(--picker-style: menu): var(--itemface,) ;
5312
- );
5313
- --picker--stack-grid-color: if(style(--picker-style: sheet): var(--itemtext,) ; style(--picker-style: navigation-link): var(--itemtext,) ; style(--picker-style: menu): var(--itemtext,) ;);
5314
- --picker--stack-grid-border: if(
5315
- style(--picker-style: sheet): var(--itemborder,) ; style(--picker-style: navigation-link): var(--itemborder,) ; style(--picker-style: menu): var(--itemborder,) ;
5316
- );
5317
- --picker--input-stack-text-align: if(style(--picker-style: sheet): end ; style(--picker-style: navigation-link): end ; style(--picker-style: menu): start ;);
5291
+ --picker--labelstack-display: if(style(--picker-style: radio-group): grid; style(--picker-style: menu): grid; style(--picker-style: navigation-link): grid; style(--picker-style: sheet): grid; else: none ;);
5292
+ --picker--inputstack-text-align: if(style(--picker-style: radio-group): start; style(--picker-style: menu): start; style(--picker-style: navigation-link): end; style(--picker-style: sheet): end; );
5293
+ --picker--inputstack-gap: if(style(--picker-style: radio-group): 1rem; );
5294
+ --picker--host-row-gap: if(style(--picker-style: radio-group): var(--labeled-content-row-gap); style(--picker-style: menu): var(--labeled-content-row-gap); style(--picker-style: navigation-link): var(--labeled-content-row-gap); style(--picker-style: sheet): var(--labeled-content-row-gap); );
5295
+ --picker--host-column-gap: if(style(--picker-style: radio-group): var(--labeled-content-column-gap); style(--picker-style: menu): var(--labeled-content-column-gap); style(--picker-style: navigation-link): var(--labeled-content-column-gap); style(--picker-style: sheet): var(--labeled-content-column-gap); );
5296
+ --picker--host-grid-padding-inline: if(style(--picker-style: radio-group): var(--itempadistart, ) var(--itempadiend, ); style(--picker-style: menu): var(--itempadistart, ) var(--itempadiend, ); style(--picker-style: navigation-link): var(--itempadistart, ) var(--itempadiend, ); style(--picker-style: sheet): var(--itempadistart, ) var(--itempadiend, ); );
5297
+ --picker--host-grid-padding-block: if(style(--picker-style: radio-group): var(--itempadbstart, ) var(--itempadbend, ); style(--picker-style: menu): var(--itempadbstart, ) var(--itempadbend, ); style(--picker-style: navigation-link): var(--itempadbstart, ) var(--itempadbend, ); style(--picker-style: sheet): var(--itempadbstart, ) var(--itempadbend, ); );
5298
+ --picker--host-grid-border-radius: if(style(--picker-style: radio-group): var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, ); style(--picker-style: menu): var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, ); style(--picker-style: navigation-link): var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, ); style(--picker-style: sheet): var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, ); );
5299
+ --picker--host-grid-background: if(style(--picker-style: radio-group): var(--itemface, ); style(--picker-style: menu): var(--itemface, ); style(--picker-style: navigation-link): var(--itemface, ); style(--picker-style: sheet): var(--itemface, ); );
5300
+ --picker--host-grid-color: if(style(--picker-style: radio-group): var(--itemtext, ); style(--picker-style: menu): var(--itemtext, ); style(--picker-style: navigation-link): var(--itemtext, ); style(--picker-style: sheet): var(--itemtext, ); );
5301
+ --picker--host-grid-border: if(style(--picker-style: radio-group): var(--itemborder, ); style(--picker-style: menu): var(--itemborder, ); style(--picker-style: navigation-link): var(--itemborder, ); style(--picker-style: sheet): var(--itemborder, ); );
5318
5302
  }
5319
5303
  }
5320
5304
  @supports not (x: if(else:red)) {
5321
5305
  @container style(--picker-style: menu) {
5322
5306
  :where(picker-view:not([picker-style])) {
5323
5307
  --picker--labelstack-display: grid;
5324
- --picker--input-stack-text-align: start;
5325
- --picker--stack-row-gap: var(--labeled-content-row-gap);
5326
- --picker--stack-column-gap: var(--labeled-content-column-gap);
5327
- --picker--stack-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5328
- --picker--stack-grid-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5329
- --picker--stack-grid-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5330
- --picker--stack-grid-background: var(--itemface, );
5331
- --picker--stack-grid-color: var(--itemtext, );
5332
- --picker--stack-grid-border: var(--itemborder, );
5308
+ --picker--inputstack-text-align: start;
5309
+ --picker--host-row-gap: var(--labeled-content-row-gap);
5310
+ --picker--host-column-gap: var(--labeled-content-column-gap);
5311
+ --picker--host-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5312
+ --picker--host-grid-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5313
+ --picker--host-grid-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5314
+ --picker--host-grid-background: var(--itemface, );
5315
+ --picker--host-grid-color: var(--itemtext, );
5316
+ --picker--host-grid-border: var(--itemborder, );
5333
5317
  }
5334
5318
  }
5335
5319
  @container style(--picker-style: navigation-link) {
5336
5320
  :where(picker-view:not([picker-style])) {
5337
5321
  --picker--labelstack-display: grid;
5338
- --picker--input-stack-text-align: end;
5339
- --picker--stack-row-gap: var(--labeled-content-row-gap);
5340
- --picker--stack-column-gap: var(--labeled-content-column-gap);
5341
- --picker--stack-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5342
- --picker--stack-grid-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5343
- --picker--stack-grid-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5344
- --picker--stack-grid-background: var(--itemface, );
5345
- --picker--stack-grid-color: var(--itemtext, );
5346
- --picker--stack-grid-border: var(--itemborder, );
5322
+ --picker--inputstack-text-align: end;
5323
+ --picker--host-row-gap: var(--labeled-content-row-gap);
5324
+ --picker--host-column-gap: var(--labeled-content-column-gap);
5325
+ --picker--host-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5326
+ --picker--host-grid-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5327
+ --picker--host-grid-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5328
+ --picker--host-grid-background: var(--itemface, );
5329
+ --picker--host-grid-color: var(--itemtext, );
5330
+ --picker--host-grid-border: var(--itemborder, );
5347
5331
  }
5348
5332
  }
5349
5333
  @container style(--picker-style: sheet) {
5350
5334
  :where(picker-view:not([picker-style])) {
5351
5335
  --picker--labelstack-display: grid;
5352
- --picker--input-stack-text-align: end;
5353
- --picker--stack-row-gap: var(--labeled-content-row-gap);
5354
- --picker--stack-column-gap: var(--labeled-content-column-gap);
5355
- --picker--stack-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5356
- --picker--stack-grid-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5357
- --picker--stack-grid-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5358
- --picker--stack-grid-background: var(--itemface, );
5359
- --picker--stack-grid-color: var(--itemtext, );
5360
- --picker--stack-grid-border: var(--itemborder, );
5336
+ --picker--inputstack-text-align: end;
5337
+ --picker--host-row-gap: var(--labeled-content-row-gap);
5338
+ --picker--host-column-gap: var(--labeled-content-column-gap);
5339
+ --picker--host-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5340
+ --picker--host-grid-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5341
+ --picker--host-grid-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5342
+ --picker--host-grid-background: var(--itemface, );
5343
+ --picker--host-grid-color: var(--itemtext, );
5344
+ --picker--host-grid-border: var(--itemborder, );
5345
+ }
5346
+ }
5347
+ @container style(--picker-style: radio-group) {
5348
+ :where(picker-view:not([picker-style])) {
5349
+ --picker--labelstack-display: grid;
5350
+ --picker--inputstack-text-align: start;
5351
+ --picker--inputstack-gap: 1rem;
5352
+ --picker--host-row-gap: var(--labeled-content-row-gap);
5353
+ --picker--host-column-gap: var(--labeled-content-column-gap);
5354
+ --picker--host-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5355
+ --picker--host-grid-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5356
+ --picker--host-grid-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5357
+ --picker--host-grid-background: var(--itemface, );
5358
+ --picker--host-grid-color: var(--itemtext, );
5359
+ --picker--host-grid-border: var(--itemborder, );
5361
5360
  }
5362
5361
  }
5363
5362
  :where(form picker-view[picker-style=menu]) {
5364
5363
  --picker--labelstack-display: grid;
5365
- --picker--input-stack-text-align: start;
5366
- --picker--stack-row-gap: var(--labeled-content-row-gap);
5367
- --picker--stack-column-gap: var(--labeled-content-column-gap);
5368
- --picker--stack-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5369
- --picker--stack-grid-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5370
- --picker--stack-grid-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5371
- --picker--stack-grid-background: var(--itemface, );
5372
- --picker--stack-grid-color: var(--itemtext, );
5373
- --picker--stack-grid-border: var(--itemborder, );
5364
+ --picker--inputstack-text-align: start;
5365
+ --picker--host-row-gap: var(--labeled-content-row-gap);
5366
+ --picker--host-column-gap: var(--labeled-content-column-gap);
5367
+ --picker--host-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5368
+ --picker--host-grid-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5369
+ --picker--host-grid-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5370
+ --picker--host-grid-background: var(--itemface, );
5371
+ --picker--host-grid-color: var(--itemtext, );
5372
+ --picker--host-grid-border: var(--itemborder, );
5374
5373
  }
5375
5374
  :where(form picker-view[picker-style=navigation-link]) {
5376
5375
  --picker--labelstack-display: grid;
5377
- --picker--input-stack-text-align: end;
5378
- --picker--stack-row-gap: var(--labeled-content-row-gap);
5379
- --picker--stack-column-gap: var(--labeled-content-column-gap);
5380
- --picker--stack-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5381
- --picker--stack-grid-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5382
- --picker--stack-grid-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5383
- --picker--stack-grid-background: var(--itemface, );
5384
- --picker--stack-grid-color: var(--itemtext, );
5385
- --picker--stack-grid-border: var(--itemborder, );
5376
+ --picker--inputstack-text-align: end;
5377
+ --picker--host-row-gap: var(--labeled-content-row-gap);
5378
+ --picker--host-column-gap: var(--labeled-content-column-gap);
5379
+ --picker--host-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5380
+ --picker--host-grid-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5381
+ --picker--host-grid-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5382
+ --picker--host-grid-background: var(--itemface, );
5383
+ --picker--host-grid-color: var(--itemtext, );
5384
+ --picker--host-grid-border: var(--itemborder, );
5386
5385
  }
5387
5386
  :where(form picker-view[picker-style=sheet]) {
5388
5387
  --picker--labelstack-display: grid;
5389
- --picker--input-stack-text-align: end;
5390
- --picker--stack-row-gap: var(--labeled-content-row-gap);
5391
- --picker--stack-column-gap: var(--labeled-content-column-gap);
5392
- --picker--stack-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5393
- --picker--stack-grid-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5394
- --picker--stack-grid-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5395
- --picker--stack-grid-background: var(--itemface, );
5396
- --picker--stack-grid-color: var(--itemtext, );
5397
- --picker--stack-grid-border: var(--itemborder, );
5388
+ --picker--inputstack-text-align: end;
5389
+ --picker--host-row-gap: var(--labeled-content-row-gap);
5390
+ --picker--host-column-gap: var(--labeled-content-column-gap);
5391
+ --picker--host-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5392
+ --picker--host-grid-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5393
+ --picker--host-grid-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5394
+ --picker--host-grid-background: var(--itemface, );
5395
+ --picker--host-grid-color: var(--itemtext, );
5396
+ --picker--host-grid-border: var(--itemborder, );
5397
+ }
5398
+ :where(form picker-view[picker-style=radio-group]) {
5399
+ --picker--labelstack-display: grid;
5400
+ --picker--inputstack-text-align: start;
5401
+ --picker--inputstack-gap: 1rem;
5402
+ --picker--host-row-gap: var(--labeled-content-row-gap);
5403
+ --picker--host-column-gap: var(--labeled-content-column-gap);
5404
+ --picker--host-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5405
+ --picker--host-grid-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5406
+ --picker--host-grid-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5407
+ --picker--host-grid-background: var(--itemface, );
5408
+ --picker--host-grid-color: var(--itemtext, );
5409
+ --picker--host-grid-border: var(--itemborder, );
5398
5410
  }
5399
5411
  }
5412
+ :where(picker-view[horizontal-radio-group-layout]) {
5413
+ --picker--inputstack-display: flex;
5414
+ --picker--inputstack-flex-flow: row wrap;
5415
+ }
5400
5416
  }
5401
5417
  @layer sw-final {
5402
5418
  @supports not (x: attr(x type(*))) {
@@ -8316,207 +8332,309 @@
8316
8332
  justify-content: stretch ;
8317
8333
  }
8318
8334
  :where(v-stack[spacing="0"],
8319
- h-stack[spacing="0"]) {
8335
+ h-stack[spacing="0"],
8336
+ h-flex-stack[spacing="0"],
8337
+ v-flex-stack[spacing="0"]) {
8320
8338
  gap: 0rem;
8321
8339
  }
8322
8340
  :where(v-stack[spacing="1"],
8323
- h-stack[spacing="1"]) {
8341
+ h-stack[spacing="1"],
8342
+ h-flex-stack[spacing="1"],
8343
+ v-flex-stack[spacing="1"]) {
8324
8344
  gap: 0.1rem;
8325
8345
  }
8326
8346
  :where(v-stack[spacing="2"],
8327
- h-stack[spacing="2"]) {
8347
+ h-stack[spacing="2"],
8348
+ h-flex-stack[spacing="2"],
8349
+ v-flex-stack[spacing="2"]) {
8328
8350
  gap: 0.2rem;
8329
8351
  }
8330
8352
  :where(v-stack[spacing="3"],
8331
- h-stack[spacing="3"]) {
8353
+ h-stack[spacing="3"],
8354
+ h-flex-stack[spacing="3"],
8355
+ v-flex-stack[spacing="3"]) {
8332
8356
  gap: 0.3rem;
8333
8357
  }
8334
8358
  :where(v-stack[spacing="4"],
8335
- h-stack[spacing="4"]) {
8359
+ h-stack[spacing="4"],
8360
+ h-flex-stack[spacing="4"],
8361
+ v-flex-stack[spacing="4"]) {
8336
8362
  gap: 0.4rem;
8337
8363
  }
8338
8364
  :where(v-stack[spacing="5"],
8339
- h-stack[spacing="5"]) {
8365
+ h-stack[spacing="5"],
8366
+ h-flex-stack[spacing="5"],
8367
+ v-flex-stack[spacing="5"]) {
8340
8368
  gap: 0.5rem;
8341
8369
  }
8342
8370
  :where(v-stack[spacing="6"],
8343
- h-stack[spacing="6"]) {
8371
+ h-stack[spacing="6"],
8372
+ h-flex-stack[spacing="6"],
8373
+ v-flex-stack[spacing="6"]) {
8344
8374
  gap: 0.6rem;
8345
8375
  }
8346
8376
  :where(v-stack[spacing="7"],
8347
- h-stack[spacing="7"]) {
8377
+ h-stack[spacing="7"],
8378
+ h-flex-stack[spacing="7"],
8379
+ v-flex-stack[spacing="7"]) {
8348
8380
  gap: 0.7rem;
8349
8381
  }
8350
8382
  :where(v-stack[spacing="8"],
8351
- h-stack[spacing="8"]) {
8383
+ h-stack[spacing="8"],
8384
+ h-flex-stack[spacing="8"],
8385
+ v-flex-stack[spacing="8"]) {
8352
8386
  gap: 0.8rem;
8353
8387
  }
8354
8388
  :where(v-stack[spacing="9"],
8355
- h-stack[spacing="9"]) {
8389
+ h-stack[spacing="9"],
8390
+ h-flex-stack[spacing="9"],
8391
+ v-flex-stack[spacing="9"]) {
8356
8392
  gap: 0.9rem;
8357
8393
  }
8358
8394
  :where(v-stack[spacing="10"],
8359
- h-stack[spacing="10"]) {
8395
+ h-stack[spacing="10"],
8396
+ h-flex-stack[spacing="10"],
8397
+ v-flex-stack[spacing="10"]) {
8360
8398
  gap: 1rem;
8361
8399
  }
8362
8400
  :where(v-stack[spacing="11"],
8363
- h-stack[spacing="11"]) {
8401
+ h-stack[spacing="11"],
8402
+ h-flex-stack[spacing="11"],
8403
+ v-flex-stack[spacing="11"]) {
8364
8404
  gap: 1.1rem;
8365
8405
  }
8366
8406
  :where(v-stack[spacing="12"],
8367
- h-stack[spacing="12"]) {
8407
+ h-stack[spacing="12"],
8408
+ h-flex-stack[spacing="12"],
8409
+ v-flex-stack[spacing="12"]) {
8368
8410
  gap: 1.2rem;
8369
8411
  }
8370
8412
  :where(v-stack[spacing="13"],
8371
- h-stack[spacing="13"]) {
8413
+ h-stack[spacing="13"],
8414
+ h-flex-stack[spacing="13"],
8415
+ v-flex-stack[spacing="13"]) {
8372
8416
  gap: 1.3rem;
8373
8417
  }
8374
8418
  :where(v-stack[spacing="14"],
8375
- h-stack[spacing="14"]) {
8419
+ h-stack[spacing="14"],
8420
+ h-flex-stack[spacing="14"],
8421
+ v-flex-stack[spacing="14"]) {
8376
8422
  gap: 1.4rem;
8377
8423
  }
8378
8424
  :where(v-stack[spacing="15"],
8379
- h-stack[spacing="15"]) {
8425
+ h-stack[spacing="15"],
8426
+ h-flex-stack[spacing="15"],
8427
+ v-flex-stack[spacing="15"]) {
8380
8428
  gap: 1.5rem;
8381
8429
  }
8382
8430
  :where(v-stack[spacing="16"],
8383
- h-stack[spacing="16"]) {
8431
+ h-stack[spacing="16"],
8432
+ h-flex-stack[spacing="16"],
8433
+ v-flex-stack[spacing="16"]) {
8384
8434
  gap: 1.6rem;
8385
8435
  }
8386
8436
  :where(v-stack[spacing="17"],
8387
- h-stack[spacing="17"]) {
8437
+ h-stack[spacing="17"],
8438
+ h-flex-stack[spacing="17"],
8439
+ v-flex-stack[spacing="17"]) {
8388
8440
  gap: 1.7rem;
8389
8441
  }
8390
8442
  :where(v-stack[spacing="18"],
8391
- h-stack[spacing="18"]) {
8443
+ h-stack[spacing="18"],
8444
+ h-flex-stack[spacing="18"],
8445
+ v-flex-stack[spacing="18"]) {
8392
8446
  gap: 1.8rem;
8393
8447
  }
8394
8448
  :where(v-stack[spacing="19"],
8395
- h-stack[spacing="19"]) {
8449
+ h-stack[spacing="19"],
8450
+ h-flex-stack[spacing="19"],
8451
+ v-flex-stack[spacing="19"]) {
8396
8452
  gap: 1.9rem;
8397
8453
  }
8398
8454
  :where(v-stack[spacing="20"],
8399
- h-stack[spacing="20"]) {
8455
+ h-stack[spacing="20"],
8456
+ h-flex-stack[spacing="20"],
8457
+ v-flex-stack[spacing="20"]) {
8400
8458
  gap: 2rem;
8401
8459
  }
8402
8460
  :where(v-stack[spacing="21"],
8403
- h-stack[spacing="21"]) {
8461
+ h-stack[spacing="21"],
8462
+ h-flex-stack[spacing="21"],
8463
+ v-flex-stack[spacing="21"]) {
8404
8464
  gap: 2.1rem;
8405
8465
  }
8406
8466
  :where(v-stack[spacing="22"],
8407
- h-stack[spacing="22"]) {
8467
+ h-stack[spacing="22"],
8468
+ h-flex-stack[spacing="22"],
8469
+ v-flex-stack[spacing="22"]) {
8408
8470
  gap: 2.2rem;
8409
8471
  }
8410
8472
  :where(v-stack[spacing="23"],
8411
- h-stack[spacing="23"]) {
8473
+ h-stack[spacing="23"],
8474
+ h-flex-stack[spacing="23"],
8475
+ v-flex-stack[spacing="23"]) {
8412
8476
  gap: 2.3rem;
8413
8477
  }
8414
8478
  :where(v-stack[spacing="24"],
8415
- h-stack[spacing="24"]) {
8479
+ h-stack[spacing="24"],
8480
+ h-flex-stack[spacing="24"],
8481
+ v-flex-stack[spacing="24"]) {
8416
8482
  gap: 2.4rem;
8417
8483
  }
8418
8484
  :where(v-stack[spacing="25"],
8419
- h-stack[spacing="25"]) {
8485
+ h-stack[spacing="25"],
8486
+ h-flex-stack[spacing="25"],
8487
+ v-flex-stack[spacing="25"]) {
8420
8488
  gap: 2.5rem;
8421
8489
  }
8422
8490
  :where(v-stack[spacing="26"],
8423
- h-stack[spacing="26"]) {
8491
+ h-stack[spacing="26"],
8492
+ h-flex-stack[spacing="26"],
8493
+ v-flex-stack[spacing="26"]) {
8424
8494
  gap: 2.6rem;
8425
8495
  }
8426
8496
  :where(v-stack[spacing="27"],
8427
- h-stack[spacing="27"]) {
8497
+ h-stack[spacing="27"],
8498
+ h-flex-stack[spacing="27"],
8499
+ v-flex-stack[spacing="27"]) {
8428
8500
  gap: 2.7rem;
8429
8501
  }
8430
8502
  :where(v-stack[spacing="28"],
8431
- h-stack[spacing="28"]) {
8503
+ h-stack[spacing="28"],
8504
+ h-flex-stack[spacing="28"],
8505
+ v-flex-stack[spacing="28"]) {
8432
8506
  gap: 2.8rem;
8433
8507
  }
8434
8508
  :where(v-stack[spacing="29"],
8435
- h-stack[spacing="29"]) {
8509
+ h-stack[spacing="29"],
8510
+ h-flex-stack[spacing="29"],
8511
+ v-flex-stack[spacing="29"]) {
8436
8512
  gap: 2.9rem;
8437
8513
  }
8438
8514
  :where(v-stack[spacing="30"],
8439
- h-stack[spacing="30"]) {
8515
+ h-stack[spacing="30"],
8516
+ h-flex-stack[spacing="30"],
8517
+ v-flex-stack[spacing="30"]) {
8440
8518
  gap: 3rem;
8441
8519
  }
8442
8520
  :where(v-stack[spacing="31"],
8443
- h-stack[spacing="31"]) {
8521
+ h-stack[spacing="31"],
8522
+ h-flex-stack[spacing="31"],
8523
+ v-flex-stack[spacing="31"]) {
8444
8524
  gap: 3.1rem;
8445
8525
  }
8446
8526
  :where(v-stack[spacing="32"],
8447
- h-stack[spacing="32"]) {
8527
+ h-stack[spacing="32"],
8528
+ h-flex-stack[spacing="32"],
8529
+ v-flex-stack[spacing="32"]) {
8448
8530
  gap: 3.2rem;
8449
8531
  }
8450
8532
  :where(v-stack[spacing="33"],
8451
- h-stack[spacing="33"]) {
8533
+ h-stack[spacing="33"],
8534
+ h-flex-stack[spacing="33"],
8535
+ v-flex-stack[spacing="33"]) {
8452
8536
  gap: 3.3rem;
8453
8537
  }
8454
8538
  :where(v-stack[spacing="34"],
8455
- h-stack[spacing="34"]) {
8539
+ h-stack[spacing="34"],
8540
+ h-flex-stack[spacing="34"],
8541
+ v-flex-stack[spacing="34"]) {
8456
8542
  gap: 3.4rem;
8457
8543
  }
8458
8544
  :where(v-stack[spacing="35"],
8459
- h-stack[spacing="35"]) {
8545
+ h-stack[spacing="35"],
8546
+ h-flex-stack[spacing="35"],
8547
+ v-flex-stack[spacing="35"]) {
8460
8548
  gap: 3.5rem;
8461
8549
  }
8462
8550
  :where(v-stack[spacing="36"],
8463
- h-stack[spacing="36"]) {
8551
+ h-stack[spacing="36"],
8552
+ h-flex-stack[spacing="36"],
8553
+ v-flex-stack[spacing="36"]) {
8464
8554
  gap: 3.6rem;
8465
8555
  }
8466
8556
  :where(v-stack[spacing="37"],
8467
- h-stack[spacing="37"]) {
8557
+ h-stack[spacing="37"],
8558
+ h-flex-stack[spacing="37"],
8559
+ v-flex-stack[spacing="37"]) {
8468
8560
  gap: 3.7rem;
8469
8561
  }
8470
8562
  :where(v-stack[spacing="38"],
8471
- h-stack[spacing="38"]) {
8563
+ h-stack[spacing="38"],
8564
+ h-flex-stack[spacing="38"],
8565
+ v-flex-stack[spacing="38"]) {
8472
8566
  gap: 3.8rem;
8473
8567
  }
8474
8568
  :where(v-stack[spacing="39"],
8475
- h-stack[spacing="39"]) {
8569
+ h-stack[spacing="39"],
8570
+ h-flex-stack[spacing="39"],
8571
+ v-flex-stack[spacing="39"]) {
8476
8572
  gap: 3.9rem;
8477
8573
  }
8478
8574
  :where(v-stack[spacing="40"],
8479
- h-stack[spacing="40"]) {
8575
+ h-stack[spacing="40"],
8576
+ h-flex-stack[spacing="40"],
8577
+ v-flex-stack[spacing="40"]) {
8480
8578
  gap: 4rem;
8481
8579
  }
8482
8580
  :where(v-stack[spacing="41"],
8483
- h-stack[spacing="41"]) {
8581
+ h-stack[spacing="41"],
8582
+ h-flex-stack[spacing="41"],
8583
+ v-flex-stack[spacing="41"]) {
8484
8584
  gap: 4.1rem;
8485
8585
  }
8486
8586
  :where(v-stack[spacing="42"],
8487
- h-stack[spacing="42"]) {
8587
+ h-stack[spacing="42"],
8588
+ h-flex-stack[spacing="42"],
8589
+ v-flex-stack[spacing="42"]) {
8488
8590
  gap: 4.2rem;
8489
8591
  }
8490
8592
  :where(v-stack[spacing="43"],
8491
- h-stack[spacing="43"]) {
8593
+ h-stack[spacing="43"],
8594
+ h-flex-stack[spacing="43"],
8595
+ v-flex-stack[spacing="43"]) {
8492
8596
  gap: 4.3rem;
8493
8597
  }
8494
8598
  :where(v-stack[spacing="44"],
8495
- h-stack[spacing="44"]) {
8599
+ h-stack[spacing="44"],
8600
+ h-flex-stack[spacing="44"],
8601
+ v-flex-stack[spacing="44"]) {
8496
8602
  gap: 4.4rem;
8497
8603
  }
8498
8604
  :where(v-stack[spacing="45"],
8499
- h-stack[spacing="45"]) {
8605
+ h-stack[spacing="45"],
8606
+ h-flex-stack[spacing="45"],
8607
+ v-flex-stack[spacing="45"]) {
8500
8608
  gap: 4.5rem;
8501
8609
  }
8502
8610
  :where(v-stack[spacing="46"],
8503
- h-stack[spacing="46"]) {
8611
+ h-stack[spacing="46"],
8612
+ h-flex-stack[spacing="46"],
8613
+ v-flex-stack[spacing="46"]) {
8504
8614
  gap: 4.6rem;
8505
8615
  }
8506
8616
  :where(v-stack[spacing="47"],
8507
- h-stack[spacing="47"]) {
8617
+ h-stack[spacing="47"],
8618
+ h-flex-stack[spacing="47"],
8619
+ v-flex-stack[spacing="47"]) {
8508
8620
  gap: 4.7rem;
8509
8621
  }
8510
8622
  :where(v-stack[spacing="48"],
8511
- h-stack[spacing="48"]) {
8623
+ h-stack[spacing="48"],
8624
+ h-flex-stack[spacing="48"],
8625
+ v-flex-stack[spacing="48"]) {
8512
8626
  gap: 4.8rem;
8513
8627
  }
8514
8628
  :where(v-stack[spacing="49"],
8515
- h-stack[spacing="49"]) {
8629
+ h-stack[spacing="49"],
8630
+ h-flex-stack[spacing="49"],
8631
+ v-flex-stack[spacing="49"]) {
8516
8632
  gap: 4.9rem;
8517
8633
  }
8518
8634
  :where(v-stack[spacing="50"],
8519
- h-stack[spacing="50"]) {
8635
+ h-stack[spacing="50"],
8636
+ h-flex-stack[spacing="50"],
8637
+ v-flex-stack[spacing="50"]) {
8520
8638
  gap: 5rem;
8521
8639
  }
8522
8640
  :where(v-stack[padding],