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

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 +274 -150
  11. package/html-data/en.json +91 -21
  12. package/package.json +1 -1
  13. package/scss/_maps.scss +3 -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(*))) {
@@ -6103,6 +6119,12 @@
6103
6119
  --tertiaryBackground: initial;
6104
6120
  --face: var(--background);
6105
6121
  }
6122
+ :where([foreground=black]) {
6123
+ color: var(--black);
6124
+ }
6125
+ :where([foreground=white]) {
6126
+ color: var(--white);
6127
+ }
6106
6128
  :where([foreground=primary]) {
6107
6129
  color: var(--primary);
6108
6130
  }
@@ -8316,207 +8338,309 @@
8316
8338
  justify-content: stretch ;
8317
8339
  }
8318
8340
  :where(v-stack[spacing="0"],
8319
- h-stack[spacing="0"]) {
8341
+ h-stack[spacing="0"],
8342
+ h-flex-stack[spacing="0"],
8343
+ v-flex-stack[spacing="0"]) {
8320
8344
  gap: 0rem;
8321
8345
  }
8322
8346
  :where(v-stack[spacing="1"],
8323
- h-stack[spacing="1"]) {
8347
+ h-stack[spacing="1"],
8348
+ h-flex-stack[spacing="1"],
8349
+ v-flex-stack[spacing="1"]) {
8324
8350
  gap: 0.1rem;
8325
8351
  }
8326
8352
  :where(v-stack[spacing="2"],
8327
- h-stack[spacing="2"]) {
8353
+ h-stack[spacing="2"],
8354
+ h-flex-stack[spacing="2"],
8355
+ v-flex-stack[spacing="2"]) {
8328
8356
  gap: 0.2rem;
8329
8357
  }
8330
8358
  :where(v-stack[spacing="3"],
8331
- h-stack[spacing="3"]) {
8359
+ h-stack[spacing="3"],
8360
+ h-flex-stack[spacing="3"],
8361
+ v-flex-stack[spacing="3"]) {
8332
8362
  gap: 0.3rem;
8333
8363
  }
8334
8364
  :where(v-stack[spacing="4"],
8335
- h-stack[spacing="4"]) {
8365
+ h-stack[spacing="4"],
8366
+ h-flex-stack[spacing="4"],
8367
+ v-flex-stack[spacing="4"]) {
8336
8368
  gap: 0.4rem;
8337
8369
  }
8338
8370
  :where(v-stack[spacing="5"],
8339
- h-stack[spacing="5"]) {
8371
+ h-stack[spacing="5"],
8372
+ h-flex-stack[spacing="5"],
8373
+ v-flex-stack[spacing="5"]) {
8340
8374
  gap: 0.5rem;
8341
8375
  }
8342
8376
  :where(v-stack[spacing="6"],
8343
- h-stack[spacing="6"]) {
8377
+ h-stack[spacing="6"],
8378
+ h-flex-stack[spacing="6"],
8379
+ v-flex-stack[spacing="6"]) {
8344
8380
  gap: 0.6rem;
8345
8381
  }
8346
8382
  :where(v-stack[spacing="7"],
8347
- h-stack[spacing="7"]) {
8383
+ h-stack[spacing="7"],
8384
+ h-flex-stack[spacing="7"],
8385
+ v-flex-stack[spacing="7"]) {
8348
8386
  gap: 0.7rem;
8349
8387
  }
8350
8388
  :where(v-stack[spacing="8"],
8351
- h-stack[spacing="8"]) {
8389
+ h-stack[spacing="8"],
8390
+ h-flex-stack[spacing="8"],
8391
+ v-flex-stack[spacing="8"]) {
8352
8392
  gap: 0.8rem;
8353
8393
  }
8354
8394
  :where(v-stack[spacing="9"],
8355
- h-stack[spacing="9"]) {
8395
+ h-stack[spacing="9"],
8396
+ h-flex-stack[spacing="9"],
8397
+ v-flex-stack[spacing="9"]) {
8356
8398
  gap: 0.9rem;
8357
8399
  }
8358
8400
  :where(v-stack[spacing="10"],
8359
- h-stack[spacing="10"]) {
8401
+ h-stack[spacing="10"],
8402
+ h-flex-stack[spacing="10"],
8403
+ v-flex-stack[spacing="10"]) {
8360
8404
  gap: 1rem;
8361
8405
  }
8362
8406
  :where(v-stack[spacing="11"],
8363
- h-stack[spacing="11"]) {
8407
+ h-stack[spacing="11"],
8408
+ h-flex-stack[spacing="11"],
8409
+ v-flex-stack[spacing="11"]) {
8364
8410
  gap: 1.1rem;
8365
8411
  }
8366
8412
  :where(v-stack[spacing="12"],
8367
- h-stack[spacing="12"]) {
8413
+ h-stack[spacing="12"],
8414
+ h-flex-stack[spacing="12"],
8415
+ v-flex-stack[spacing="12"]) {
8368
8416
  gap: 1.2rem;
8369
8417
  }
8370
8418
  :where(v-stack[spacing="13"],
8371
- h-stack[spacing="13"]) {
8419
+ h-stack[spacing="13"],
8420
+ h-flex-stack[spacing="13"],
8421
+ v-flex-stack[spacing="13"]) {
8372
8422
  gap: 1.3rem;
8373
8423
  }
8374
8424
  :where(v-stack[spacing="14"],
8375
- h-stack[spacing="14"]) {
8425
+ h-stack[spacing="14"],
8426
+ h-flex-stack[spacing="14"],
8427
+ v-flex-stack[spacing="14"]) {
8376
8428
  gap: 1.4rem;
8377
8429
  }
8378
8430
  :where(v-stack[spacing="15"],
8379
- h-stack[spacing="15"]) {
8431
+ h-stack[spacing="15"],
8432
+ h-flex-stack[spacing="15"],
8433
+ v-flex-stack[spacing="15"]) {
8380
8434
  gap: 1.5rem;
8381
8435
  }
8382
8436
  :where(v-stack[spacing="16"],
8383
- h-stack[spacing="16"]) {
8437
+ h-stack[spacing="16"],
8438
+ h-flex-stack[spacing="16"],
8439
+ v-flex-stack[spacing="16"]) {
8384
8440
  gap: 1.6rem;
8385
8441
  }
8386
8442
  :where(v-stack[spacing="17"],
8387
- h-stack[spacing="17"]) {
8443
+ h-stack[spacing="17"],
8444
+ h-flex-stack[spacing="17"],
8445
+ v-flex-stack[spacing="17"]) {
8388
8446
  gap: 1.7rem;
8389
8447
  }
8390
8448
  :where(v-stack[spacing="18"],
8391
- h-stack[spacing="18"]) {
8449
+ h-stack[spacing="18"],
8450
+ h-flex-stack[spacing="18"],
8451
+ v-flex-stack[spacing="18"]) {
8392
8452
  gap: 1.8rem;
8393
8453
  }
8394
8454
  :where(v-stack[spacing="19"],
8395
- h-stack[spacing="19"]) {
8455
+ h-stack[spacing="19"],
8456
+ h-flex-stack[spacing="19"],
8457
+ v-flex-stack[spacing="19"]) {
8396
8458
  gap: 1.9rem;
8397
8459
  }
8398
8460
  :where(v-stack[spacing="20"],
8399
- h-stack[spacing="20"]) {
8461
+ h-stack[spacing="20"],
8462
+ h-flex-stack[spacing="20"],
8463
+ v-flex-stack[spacing="20"]) {
8400
8464
  gap: 2rem;
8401
8465
  }
8402
8466
  :where(v-stack[spacing="21"],
8403
- h-stack[spacing="21"]) {
8467
+ h-stack[spacing="21"],
8468
+ h-flex-stack[spacing="21"],
8469
+ v-flex-stack[spacing="21"]) {
8404
8470
  gap: 2.1rem;
8405
8471
  }
8406
8472
  :where(v-stack[spacing="22"],
8407
- h-stack[spacing="22"]) {
8473
+ h-stack[spacing="22"],
8474
+ h-flex-stack[spacing="22"],
8475
+ v-flex-stack[spacing="22"]) {
8408
8476
  gap: 2.2rem;
8409
8477
  }
8410
8478
  :where(v-stack[spacing="23"],
8411
- h-stack[spacing="23"]) {
8479
+ h-stack[spacing="23"],
8480
+ h-flex-stack[spacing="23"],
8481
+ v-flex-stack[spacing="23"]) {
8412
8482
  gap: 2.3rem;
8413
8483
  }
8414
8484
  :where(v-stack[spacing="24"],
8415
- h-stack[spacing="24"]) {
8485
+ h-stack[spacing="24"],
8486
+ h-flex-stack[spacing="24"],
8487
+ v-flex-stack[spacing="24"]) {
8416
8488
  gap: 2.4rem;
8417
8489
  }
8418
8490
  :where(v-stack[spacing="25"],
8419
- h-stack[spacing="25"]) {
8491
+ h-stack[spacing="25"],
8492
+ h-flex-stack[spacing="25"],
8493
+ v-flex-stack[spacing="25"]) {
8420
8494
  gap: 2.5rem;
8421
8495
  }
8422
8496
  :where(v-stack[spacing="26"],
8423
- h-stack[spacing="26"]) {
8497
+ h-stack[spacing="26"],
8498
+ h-flex-stack[spacing="26"],
8499
+ v-flex-stack[spacing="26"]) {
8424
8500
  gap: 2.6rem;
8425
8501
  }
8426
8502
  :where(v-stack[spacing="27"],
8427
- h-stack[spacing="27"]) {
8503
+ h-stack[spacing="27"],
8504
+ h-flex-stack[spacing="27"],
8505
+ v-flex-stack[spacing="27"]) {
8428
8506
  gap: 2.7rem;
8429
8507
  }
8430
8508
  :where(v-stack[spacing="28"],
8431
- h-stack[spacing="28"]) {
8509
+ h-stack[spacing="28"],
8510
+ h-flex-stack[spacing="28"],
8511
+ v-flex-stack[spacing="28"]) {
8432
8512
  gap: 2.8rem;
8433
8513
  }
8434
8514
  :where(v-stack[spacing="29"],
8435
- h-stack[spacing="29"]) {
8515
+ h-stack[spacing="29"],
8516
+ h-flex-stack[spacing="29"],
8517
+ v-flex-stack[spacing="29"]) {
8436
8518
  gap: 2.9rem;
8437
8519
  }
8438
8520
  :where(v-stack[spacing="30"],
8439
- h-stack[spacing="30"]) {
8521
+ h-stack[spacing="30"],
8522
+ h-flex-stack[spacing="30"],
8523
+ v-flex-stack[spacing="30"]) {
8440
8524
  gap: 3rem;
8441
8525
  }
8442
8526
  :where(v-stack[spacing="31"],
8443
- h-stack[spacing="31"]) {
8527
+ h-stack[spacing="31"],
8528
+ h-flex-stack[spacing="31"],
8529
+ v-flex-stack[spacing="31"]) {
8444
8530
  gap: 3.1rem;
8445
8531
  }
8446
8532
  :where(v-stack[spacing="32"],
8447
- h-stack[spacing="32"]) {
8533
+ h-stack[spacing="32"],
8534
+ h-flex-stack[spacing="32"],
8535
+ v-flex-stack[spacing="32"]) {
8448
8536
  gap: 3.2rem;
8449
8537
  }
8450
8538
  :where(v-stack[spacing="33"],
8451
- h-stack[spacing="33"]) {
8539
+ h-stack[spacing="33"],
8540
+ h-flex-stack[spacing="33"],
8541
+ v-flex-stack[spacing="33"]) {
8452
8542
  gap: 3.3rem;
8453
8543
  }
8454
8544
  :where(v-stack[spacing="34"],
8455
- h-stack[spacing="34"]) {
8545
+ h-stack[spacing="34"],
8546
+ h-flex-stack[spacing="34"],
8547
+ v-flex-stack[spacing="34"]) {
8456
8548
  gap: 3.4rem;
8457
8549
  }
8458
8550
  :where(v-stack[spacing="35"],
8459
- h-stack[spacing="35"]) {
8551
+ h-stack[spacing="35"],
8552
+ h-flex-stack[spacing="35"],
8553
+ v-flex-stack[spacing="35"]) {
8460
8554
  gap: 3.5rem;
8461
8555
  }
8462
8556
  :where(v-stack[spacing="36"],
8463
- h-stack[spacing="36"]) {
8557
+ h-stack[spacing="36"],
8558
+ h-flex-stack[spacing="36"],
8559
+ v-flex-stack[spacing="36"]) {
8464
8560
  gap: 3.6rem;
8465
8561
  }
8466
8562
  :where(v-stack[spacing="37"],
8467
- h-stack[spacing="37"]) {
8563
+ h-stack[spacing="37"],
8564
+ h-flex-stack[spacing="37"],
8565
+ v-flex-stack[spacing="37"]) {
8468
8566
  gap: 3.7rem;
8469
8567
  }
8470
8568
  :where(v-stack[spacing="38"],
8471
- h-stack[spacing="38"]) {
8569
+ h-stack[spacing="38"],
8570
+ h-flex-stack[spacing="38"],
8571
+ v-flex-stack[spacing="38"]) {
8472
8572
  gap: 3.8rem;
8473
8573
  }
8474
8574
  :where(v-stack[spacing="39"],
8475
- h-stack[spacing="39"]) {
8575
+ h-stack[spacing="39"],
8576
+ h-flex-stack[spacing="39"],
8577
+ v-flex-stack[spacing="39"]) {
8476
8578
  gap: 3.9rem;
8477
8579
  }
8478
8580
  :where(v-stack[spacing="40"],
8479
- h-stack[spacing="40"]) {
8581
+ h-stack[spacing="40"],
8582
+ h-flex-stack[spacing="40"],
8583
+ v-flex-stack[spacing="40"]) {
8480
8584
  gap: 4rem;
8481
8585
  }
8482
8586
  :where(v-stack[spacing="41"],
8483
- h-stack[spacing="41"]) {
8587
+ h-stack[spacing="41"],
8588
+ h-flex-stack[spacing="41"],
8589
+ v-flex-stack[spacing="41"]) {
8484
8590
  gap: 4.1rem;
8485
8591
  }
8486
8592
  :where(v-stack[spacing="42"],
8487
- h-stack[spacing="42"]) {
8593
+ h-stack[spacing="42"],
8594
+ h-flex-stack[spacing="42"],
8595
+ v-flex-stack[spacing="42"]) {
8488
8596
  gap: 4.2rem;
8489
8597
  }
8490
8598
  :where(v-stack[spacing="43"],
8491
- h-stack[spacing="43"]) {
8599
+ h-stack[spacing="43"],
8600
+ h-flex-stack[spacing="43"],
8601
+ v-flex-stack[spacing="43"]) {
8492
8602
  gap: 4.3rem;
8493
8603
  }
8494
8604
  :where(v-stack[spacing="44"],
8495
- h-stack[spacing="44"]) {
8605
+ h-stack[spacing="44"],
8606
+ h-flex-stack[spacing="44"],
8607
+ v-flex-stack[spacing="44"]) {
8496
8608
  gap: 4.4rem;
8497
8609
  }
8498
8610
  :where(v-stack[spacing="45"],
8499
- h-stack[spacing="45"]) {
8611
+ h-stack[spacing="45"],
8612
+ h-flex-stack[spacing="45"],
8613
+ v-flex-stack[spacing="45"]) {
8500
8614
  gap: 4.5rem;
8501
8615
  }
8502
8616
  :where(v-stack[spacing="46"],
8503
- h-stack[spacing="46"]) {
8617
+ h-stack[spacing="46"],
8618
+ h-flex-stack[spacing="46"],
8619
+ v-flex-stack[spacing="46"]) {
8504
8620
  gap: 4.6rem;
8505
8621
  }
8506
8622
  :where(v-stack[spacing="47"],
8507
- h-stack[spacing="47"]) {
8623
+ h-stack[spacing="47"],
8624
+ h-flex-stack[spacing="47"],
8625
+ v-flex-stack[spacing="47"]) {
8508
8626
  gap: 4.7rem;
8509
8627
  }
8510
8628
  :where(v-stack[spacing="48"],
8511
- h-stack[spacing="48"]) {
8629
+ h-stack[spacing="48"],
8630
+ h-flex-stack[spacing="48"],
8631
+ v-flex-stack[spacing="48"]) {
8512
8632
  gap: 4.8rem;
8513
8633
  }
8514
8634
  :where(v-stack[spacing="49"],
8515
- h-stack[spacing="49"]) {
8635
+ h-stack[spacing="49"],
8636
+ h-flex-stack[spacing="49"],
8637
+ v-flex-stack[spacing="49"]) {
8516
8638
  gap: 4.9rem;
8517
8639
  }
8518
8640
  :where(v-stack[spacing="50"],
8519
- h-stack[spacing="50"]) {
8641
+ h-stack[spacing="50"],
8642
+ h-flex-stack[spacing="50"],
8643
+ v-flex-stack[spacing="50"]) {
8520
8644
  gap: 5rem;
8521
8645
  }
8522
8646
  :where(v-stack[padding],