@swiftwc/ui 0.0.0-dev.111 → 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 (25) 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 +6 -9
  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 +317 -175
  11. package/html-data/en.json +97 -21
  12. package/package.json +1 -1
  13. package/scss/_maps.scss +1 -1
  14. package/scss/_utils.scss +1 -1
  15. package/scss/base/_reboot.scss +0 -27
  16. package/scss/base/_root.scss +2 -2
  17. package/scss/colors/_index.scss +47 -3
  18. package/scss/components/_h-flex-stack.scss +2 -0
  19. package/scss/components/_index.scss +1 -1
  20. package/scss/components/_picker-view.scss +157 -117
  21. package/scss/components/_scroll-view.scss +0 -12
  22. package/scss/components/_v-flex-stack.scss +2 -0
  23. package/scss/utils/_index.scss +44 -22
  24. package/scss/utils/_stacks.scss +3 -1
  25. /package/scss/utils/{_scroll-view.scss → _scroll-view.scss.txt} +0 -0
package/generated/css/index.css CHANGED
@@ -302,12 +302,8 @@
302
302
  --insetform-item-border-radius: 1rem;
303
303
  --list-item-padding-inline-start: 1rem;
304
304
  --list-item-padding-inline-end: 1rem;
305
- --insetgroupedlist-background-color: var(--background);
306
- --insetgroupedlist-item-background-color: var(--quaternaryGroupedBackground);
307
305
  --form-item-padding-inline-start: 1rem;
308
306
  --form-item-padding-inline-end: 1rem;
309
- --insetgroupedform-background-color: var(--background);
310
- --insetgroupedform-item-background-color: var(--quaternaryGroupedBackground);
311
307
  --toggle-inline-size: 3.4rem;
312
308
  --toggle-block-size: 1.3rem;
313
309
  --control-clear-glass-bg: var(--white);
@@ -1290,7 +1286,6 @@
1290
1286
  :where(menu-view)::part(menu-scrollable),
1291
1287
  :where(picker-view)::part(picker-stack),
1292
1288
  :where(picker-view)::part(picker-label-stack),
1293
- :where(picker-view)::part(picker-input-stack),
1294
1289
  :where(tool-bar)::part(top-bar),
1295
1290
  :where(tool-bar)::part(bottom-bar),
1296
1291
  :where(label-view)::part(label-image-stack),
@@ -2506,6 +2501,7 @@
2506
2501
  flex-flow: row nowrap;
2507
2502
  place-items: safe center;
2508
2503
  place-content: safe center;
2504
+ gap: 1rem;
2509
2505
  }
2510
2506
  :where(h-flex-stack > *) {
2511
2507
  max-block-size: 100%;
@@ -2520,6 +2516,7 @@
2520
2516
  flex-flow: column nowrap;
2521
2517
  place-items: center;
2522
2518
  place-content: center;
2519
+ gap: 1rem;
2523
2520
  }
2524
2521
  :where(v-flex-stack > *) {
2525
2522
  max-inline-size: 100%;
@@ -5252,21 +5249,24 @@
5252
5249
  :where(picker-view) {
5253
5250
  grid-template-columns: minmax(0, 1fr);
5254
5251
  grid-template-rows: minmax(0, 1fr);
5255
- padding-inline: var(--picker--stack-grid-padding-inline, );
5256
- padding-block: var(--picker--stack-grid-padding-block, );
5257
- background: var(--picker--stack-grid-background, );
5258
- border-radius: var(--picker--stack-grid-border-radius, );
5259
- border: var(--picker--stack-grid-border, );
5260
- 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, );
5261
5258
  }
5262
5259
  :where(picker-view)::part(picker-stack) {
5263
- grid-template-columns: var(--picker--stack-grid-template-columns, );
5264
- grid-template-rows: var(--picker--stack-grid-template-rows, );
5265
- row-gap: var(--picker--stack-row-gap, );
5266
- 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, );
5267
5264
  }
5268
5265
  :where(picker-view)::part(picker-input-stack) {
5269
- 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, );
5270
5270
  }
5271
5271
  :where(picker-view)::part(picker-label-stack) {
5272
5272
  display: var(--picker--labelstack-display, none);
@@ -5277,8 +5277,8 @@
5277
5277
  color: var(--secondary);
5278
5278
  }
5279
5279
  :where(picker-view) {
5280
- --picker--stack-grid-template-columns: minmax(30%, 1fr) auto;
5281
- --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);
5282
5282
  }
5283
5283
  @container not style(--picker-style) {
5284
5284
  :where(picker-view > list-view > section-view > :not(button):first-child) {
@@ -5288,119 +5288,131 @@
5288
5288
  }
5289
5289
  @supports (x: if(else:red)) {
5290
5290
  :where(form picker-view) {
5291
- --picker--labelstack-display: if(style(--picker-style: sheet): grid ; style(--picker-style: navigation-link): grid ; style(--picker-style: menu): grid ; else: none ;);
5292
- --picker--stack-display: if(style(--picker-style: sheet): flex ; style(--picker-style: navigation-link): flex ; style(--picker-style: menu): flex ;);
5293
- --picker--stack-justify-content: if(style(--picker-style: sheet): space-between ; style(--picker-style: navigation-link): space-between ; style(--picker-style: menu): space-between ;);
5294
- --picker--stack-row-gap: if(
5295
- style(--picker-style: sheet): var(--labeled-content-row-gap) ; style(--picker-style: navigation-link): var(--labeled-content-row-gap) ;
5296
- style(--picker-style: menu): var(--labeled-content-row-gap) ;
5297
- );
5298
- --picker--stack-column-gap: if(
5299
- style(--picker-style: sheet): var(--labeled-content-column-gap) ; style(--picker-style: navigation-link): var(--labeled-content-column-gap) ;
5300
- style(--picker-style: menu): var(--labeled-content-column-gap) ;
5301
- );
5302
- --picker--stack-grid-padding-inline: if(
5303
- style(--picker-style: sheet): var(--itempadistart,) var(--itempadiend,) ; style(--picker-style: navigation-link): var(--itempadistart,) var(--itempadiend,) ;
5304
- style(--picker-style: menu): var(--itempadistart,) var(--itempadiend,) ;
5305
- );
5306
- --picker--stack-grid-padding-block: if(
5307
- style(--picker-style: sheet): var(--itempadbstart,) var(--itempadbend,) ; style(--picker-style: navigation-link): var(--itempadbstart,) var(--itempadbend,) ;
5308
- style(--picker-style: menu): var(--itempadbstart,) var(--itempadbend,) ;
5309
- );
5310
- --picker--stack-grid-border-radius: if(
5311
- style(--picker-style: sheet): var(--itemradiustl,) var(--itemradiustr,) var(--itemradiusbr,) var(--itemradiusbl,) ; style(--picker-style: navigation-link): var(--itemradiustl,)
5312
- var(--itemradiustr,) var(--itemradiusbr,) var(--itemradiusbl,) ; style(--picker-style: menu): var(--itemradiustl,) var(--itemradiustr,) var(--itemradiusbr,) var(--itemradiusbl,) ;
5313
- );
5314
- --picker--stack-grid-background: if(
5315
- style(--picker-style: sheet): var(--itemface,) ; style(--picker-style: navigation-link): var(--itemface,) ; style(--picker-style: menu): var(--itemface,) ;
5316
- );
5317
- --picker--stack-grid-color: if(style(--picker-style: sheet): var(--itemtext,) ; style(--picker-style: navigation-link): var(--itemtext,) ; style(--picker-style: menu): var(--itemtext,) ;);
5318
- --picker--stack-grid-border: if(
5319
- style(--picker-style: sheet): var(--itemborder,) ; style(--picker-style: navigation-link): var(--itemborder,) ; style(--picker-style: menu): var(--itemborder,) ;
5320
- );
5321
- --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, ); );
5322
5302
  }
5323
5303
  }
5324
5304
  @supports not (x: if(else:red)) {
5325
5305
  @container style(--picker-style: menu) {
5326
5306
  :where(picker-view:not([picker-style])) {
5327
5307
  --picker--labelstack-display: grid;
5328
- --picker--input-stack-text-align: start;
5329
- --picker--stack-row-gap: var(--labeled-content-row-gap);
5330
- --picker--stack-column-gap: var(--labeled-content-column-gap);
5331
- --picker--stack-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5332
- --picker--stack-grid-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5333
- --picker--stack-grid-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5334
- --picker--stack-grid-background: var(--itemface, );
5335
- --picker--stack-grid-color: var(--itemtext, );
5336
- --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, );
5337
5317
  }
5338
5318
  }
5339
5319
  @container style(--picker-style: navigation-link) {
5340
5320
  :where(picker-view:not([picker-style])) {
5341
5321
  --picker--labelstack-display: grid;
5342
- --picker--input-stack-text-align: end;
5343
- --picker--stack-row-gap: var(--labeled-content-row-gap);
5344
- --picker--stack-column-gap: var(--labeled-content-column-gap);
5345
- --picker--stack-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5346
- --picker--stack-grid-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5347
- --picker--stack-grid-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5348
- --picker--stack-grid-background: var(--itemface, );
5349
- --picker--stack-grid-color: var(--itemtext, );
5350
- --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, );
5351
5331
  }
5352
5332
  }
5353
5333
  @container style(--picker-style: sheet) {
5354
5334
  :where(picker-view:not([picker-style])) {
5355
5335
  --picker--labelstack-display: grid;
5356
- --picker--input-stack-text-align: end;
5357
- --picker--stack-row-gap: var(--labeled-content-row-gap);
5358
- --picker--stack-column-gap: var(--labeled-content-column-gap);
5359
- --picker--stack-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5360
- --picker--stack-grid-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5361
- --picker--stack-grid-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5362
- --picker--stack-grid-background: var(--itemface, );
5363
- --picker--stack-grid-color: var(--itemtext, );
5364
- --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, );
5365
5360
  }
5366
5361
  }
5367
5362
  :where(form picker-view[picker-style=menu]) {
5368
5363
  --picker--labelstack-display: grid;
5369
- --picker--input-stack-text-align: start;
5370
- --picker--stack-row-gap: var(--labeled-content-row-gap);
5371
- --picker--stack-column-gap: var(--labeled-content-column-gap);
5372
- --picker--stack-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5373
- --picker--stack-grid-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5374
- --picker--stack-grid-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5375
- --picker--stack-grid-background: var(--itemface, );
5376
- --picker--stack-grid-color: var(--itemtext, );
5377
- --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, );
5378
5373
  }
5379
5374
  :where(form picker-view[picker-style=navigation-link]) {
5380
5375
  --picker--labelstack-display: grid;
5381
- --picker--input-stack-text-align: end;
5382
- --picker--stack-row-gap: var(--labeled-content-row-gap);
5383
- --picker--stack-column-gap: var(--labeled-content-column-gap);
5384
- --picker--stack-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5385
- --picker--stack-grid-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5386
- --picker--stack-grid-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5387
- --picker--stack-grid-background: var(--itemface, );
5388
- --picker--stack-grid-color: var(--itemtext, );
5389
- --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, );
5390
5385
  }
5391
5386
  :where(form picker-view[picker-style=sheet]) {
5392
5387
  --picker--labelstack-display: grid;
5393
- --picker--input-stack-text-align: end;
5394
- --picker--stack-row-gap: var(--labeled-content-row-gap);
5395
- --picker--stack-column-gap: var(--labeled-content-column-gap);
5396
- --picker--stack-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5397
- --picker--stack-grid-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5398
- --picker--stack-grid-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5399
- --picker--stack-grid-background: var(--itemface, );
5400
- --picker--stack-grid-color: var(--itemtext, );
5401
- --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, );
5402
5410
  }
5403
5411
  }
5412
+ :where(picker-view[horizontal-radio-group-layout]) {
5413
+ --picker--inputstack-display: flex;
5414
+ --picker--inputstack-flex-flow: row wrap;
5415
+ }
5404
5416
  }
5405
5417
  @layer sw-final {
5406
5418
  @supports not (x: attr(x type(*))) {
@@ -6101,13 +6113,11 @@
6101
6113
  }
6102
6114
  }
6103
6115
  @layer sw-utils {
6104
- @media (pointer: coarse) {
6105
- :where([background-style=grouped]) {
6106
- --background: var(--groupedBackground);
6107
- --secondaryBackground: var(--secondaryGroupedBackground);
6108
- --tertiaryBackground: var(--tertiaryGroupedBackground);
6109
- --face: var(--background);
6110
- }
6116
+ :where([background-style=initial]) {
6117
+ --background: initial;
6118
+ --secondaryBackground: initial;
6119
+ --tertiaryBackground: initial;
6120
+ --face: var(--background);
6111
6121
  }
6112
6122
  :where([foreground=primary]) {
6113
6123
  color: var(--primary);
@@ -8322,207 +8332,309 @@
8322
8332
  justify-content: stretch ;
8323
8333
  }
8324
8334
  :where(v-stack[spacing="0"],
8325
- h-stack[spacing="0"]) {
8335
+ h-stack[spacing="0"],
8336
+ h-flex-stack[spacing="0"],
8337
+ v-flex-stack[spacing="0"]) {
8326
8338
  gap: 0rem;
8327
8339
  }
8328
8340
  :where(v-stack[spacing="1"],
8329
- h-stack[spacing="1"]) {
8341
+ h-stack[spacing="1"],
8342
+ h-flex-stack[spacing="1"],
8343
+ v-flex-stack[spacing="1"]) {
8330
8344
  gap: 0.1rem;
8331
8345
  }
8332
8346
  :where(v-stack[spacing="2"],
8333
- h-stack[spacing="2"]) {
8347
+ h-stack[spacing="2"],
8348
+ h-flex-stack[spacing="2"],
8349
+ v-flex-stack[spacing="2"]) {
8334
8350
  gap: 0.2rem;
8335
8351
  }
8336
8352
  :where(v-stack[spacing="3"],
8337
- h-stack[spacing="3"]) {
8353
+ h-stack[spacing="3"],
8354
+ h-flex-stack[spacing="3"],
8355
+ v-flex-stack[spacing="3"]) {
8338
8356
  gap: 0.3rem;
8339
8357
  }
8340
8358
  :where(v-stack[spacing="4"],
8341
- h-stack[spacing="4"]) {
8359
+ h-stack[spacing="4"],
8360
+ h-flex-stack[spacing="4"],
8361
+ v-flex-stack[spacing="4"]) {
8342
8362
  gap: 0.4rem;
8343
8363
  }
8344
8364
  :where(v-stack[spacing="5"],
8345
- h-stack[spacing="5"]) {
8365
+ h-stack[spacing="5"],
8366
+ h-flex-stack[spacing="5"],
8367
+ v-flex-stack[spacing="5"]) {
8346
8368
  gap: 0.5rem;
8347
8369
  }
8348
8370
  :where(v-stack[spacing="6"],
8349
- h-stack[spacing="6"]) {
8371
+ h-stack[spacing="6"],
8372
+ h-flex-stack[spacing="6"],
8373
+ v-flex-stack[spacing="6"]) {
8350
8374
  gap: 0.6rem;
8351
8375
  }
8352
8376
  :where(v-stack[spacing="7"],
8353
- h-stack[spacing="7"]) {
8377
+ h-stack[spacing="7"],
8378
+ h-flex-stack[spacing="7"],
8379
+ v-flex-stack[spacing="7"]) {
8354
8380
  gap: 0.7rem;
8355
8381
  }
8356
8382
  :where(v-stack[spacing="8"],
8357
- h-stack[spacing="8"]) {
8383
+ h-stack[spacing="8"],
8384
+ h-flex-stack[spacing="8"],
8385
+ v-flex-stack[spacing="8"]) {
8358
8386
  gap: 0.8rem;
8359
8387
  }
8360
8388
  :where(v-stack[spacing="9"],
8361
- h-stack[spacing="9"]) {
8389
+ h-stack[spacing="9"],
8390
+ h-flex-stack[spacing="9"],
8391
+ v-flex-stack[spacing="9"]) {
8362
8392
  gap: 0.9rem;
8363
8393
  }
8364
8394
  :where(v-stack[spacing="10"],
8365
- h-stack[spacing="10"]) {
8395
+ h-stack[spacing="10"],
8396
+ h-flex-stack[spacing="10"],
8397
+ v-flex-stack[spacing="10"]) {
8366
8398
  gap: 1rem;
8367
8399
  }
8368
8400
  :where(v-stack[spacing="11"],
8369
- h-stack[spacing="11"]) {
8401
+ h-stack[spacing="11"],
8402
+ h-flex-stack[spacing="11"],
8403
+ v-flex-stack[spacing="11"]) {
8370
8404
  gap: 1.1rem;
8371
8405
  }
8372
8406
  :where(v-stack[spacing="12"],
8373
- h-stack[spacing="12"]) {
8407
+ h-stack[spacing="12"],
8408
+ h-flex-stack[spacing="12"],
8409
+ v-flex-stack[spacing="12"]) {
8374
8410
  gap: 1.2rem;
8375
8411
  }
8376
8412
  :where(v-stack[spacing="13"],
8377
- h-stack[spacing="13"]) {
8413
+ h-stack[spacing="13"],
8414
+ h-flex-stack[spacing="13"],
8415
+ v-flex-stack[spacing="13"]) {
8378
8416
  gap: 1.3rem;
8379
8417
  }
8380
8418
  :where(v-stack[spacing="14"],
8381
- h-stack[spacing="14"]) {
8419
+ h-stack[spacing="14"],
8420
+ h-flex-stack[spacing="14"],
8421
+ v-flex-stack[spacing="14"]) {
8382
8422
  gap: 1.4rem;
8383
8423
  }
8384
8424
  :where(v-stack[spacing="15"],
8385
- h-stack[spacing="15"]) {
8425
+ h-stack[spacing="15"],
8426
+ h-flex-stack[spacing="15"],
8427
+ v-flex-stack[spacing="15"]) {
8386
8428
  gap: 1.5rem;
8387
8429
  }
8388
8430
  :where(v-stack[spacing="16"],
8389
- h-stack[spacing="16"]) {
8431
+ h-stack[spacing="16"],
8432
+ h-flex-stack[spacing="16"],
8433
+ v-flex-stack[spacing="16"]) {
8390
8434
  gap: 1.6rem;
8391
8435
  }
8392
8436
  :where(v-stack[spacing="17"],
8393
- h-stack[spacing="17"]) {
8437
+ h-stack[spacing="17"],
8438
+ h-flex-stack[spacing="17"],
8439
+ v-flex-stack[spacing="17"]) {
8394
8440
  gap: 1.7rem;
8395
8441
  }
8396
8442
  :where(v-stack[spacing="18"],
8397
- h-stack[spacing="18"]) {
8443
+ h-stack[spacing="18"],
8444
+ h-flex-stack[spacing="18"],
8445
+ v-flex-stack[spacing="18"]) {
8398
8446
  gap: 1.8rem;
8399
8447
  }
8400
8448
  :where(v-stack[spacing="19"],
8401
- h-stack[spacing="19"]) {
8449
+ h-stack[spacing="19"],
8450
+ h-flex-stack[spacing="19"],
8451
+ v-flex-stack[spacing="19"]) {
8402
8452
  gap: 1.9rem;
8403
8453
  }
8404
8454
  :where(v-stack[spacing="20"],
8405
- h-stack[spacing="20"]) {
8455
+ h-stack[spacing="20"],
8456
+ h-flex-stack[spacing="20"],
8457
+ v-flex-stack[spacing="20"]) {
8406
8458
  gap: 2rem;
8407
8459
  }
8408
8460
  :where(v-stack[spacing="21"],
8409
- h-stack[spacing="21"]) {
8461
+ h-stack[spacing="21"],
8462
+ h-flex-stack[spacing="21"],
8463
+ v-flex-stack[spacing="21"]) {
8410
8464
  gap: 2.1rem;
8411
8465
  }
8412
8466
  :where(v-stack[spacing="22"],
8413
- h-stack[spacing="22"]) {
8467
+ h-stack[spacing="22"],
8468
+ h-flex-stack[spacing="22"],
8469
+ v-flex-stack[spacing="22"]) {
8414
8470
  gap: 2.2rem;
8415
8471
  }
8416
8472
  :where(v-stack[spacing="23"],
8417
- h-stack[spacing="23"]) {
8473
+ h-stack[spacing="23"],
8474
+ h-flex-stack[spacing="23"],
8475
+ v-flex-stack[spacing="23"]) {
8418
8476
  gap: 2.3rem;
8419
8477
  }
8420
8478
  :where(v-stack[spacing="24"],
8421
- h-stack[spacing="24"]) {
8479
+ h-stack[spacing="24"],
8480
+ h-flex-stack[spacing="24"],
8481
+ v-flex-stack[spacing="24"]) {
8422
8482
  gap: 2.4rem;
8423
8483
  }
8424
8484
  :where(v-stack[spacing="25"],
8425
- h-stack[spacing="25"]) {
8485
+ h-stack[spacing="25"],
8486
+ h-flex-stack[spacing="25"],
8487
+ v-flex-stack[spacing="25"]) {
8426
8488
  gap: 2.5rem;
8427
8489
  }
8428
8490
  :where(v-stack[spacing="26"],
8429
- h-stack[spacing="26"]) {
8491
+ h-stack[spacing="26"],
8492
+ h-flex-stack[spacing="26"],
8493
+ v-flex-stack[spacing="26"]) {
8430
8494
  gap: 2.6rem;
8431
8495
  }
8432
8496
  :where(v-stack[spacing="27"],
8433
- h-stack[spacing="27"]) {
8497
+ h-stack[spacing="27"],
8498
+ h-flex-stack[spacing="27"],
8499
+ v-flex-stack[spacing="27"]) {
8434
8500
  gap: 2.7rem;
8435
8501
  }
8436
8502
  :where(v-stack[spacing="28"],
8437
- h-stack[spacing="28"]) {
8503
+ h-stack[spacing="28"],
8504
+ h-flex-stack[spacing="28"],
8505
+ v-flex-stack[spacing="28"]) {
8438
8506
  gap: 2.8rem;
8439
8507
  }
8440
8508
  :where(v-stack[spacing="29"],
8441
- h-stack[spacing="29"]) {
8509
+ h-stack[spacing="29"],
8510
+ h-flex-stack[spacing="29"],
8511
+ v-flex-stack[spacing="29"]) {
8442
8512
  gap: 2.9rem;
8443
8513
  }
8444
8514
  :where(v-stack[spacing="30"],
8445
- h-stack[spacing="30"]) {
8515
+ h-stack[spacing="30"],
8516
+ h-flex-stack[spacing="30"],
8517
+ v-flex-stack[spacing="30"]) {
8446
8518
  gap: 3rem;
8447
8519
  }
8448
8520
  :where(v-stack[spacing="31"],
8449
- h-stack[spacing="31"]) {
8521
+ h-stack[spacing="31"],
8522
+ h-flex-stack[spacing="31"],
8523
+ v-flex-stack[spacing="31"]) {
8450
8524
  gap: 3.1rem;
8451
8525
  }
8452
8526
  :where(v-stack[spacing="32"],
8453
- h-stack[spacing="32"]) {
8527
+ h-stack[spacing="32"],
8528
+ h-flex-stack[spacing="32"],
8529
+ v-flex-stack[spacing="32"]) {
8454
8530
  gap: 3.2rem;
8455
8531
  }
8456
8532
  :where(v-stack[spacing="33"],
8457
- h-stack[spacing="33"]) {
8533
+ h-stack[spacing="33"],
8534
+ h-flex-stack[spacing="33"],
8535
+ v-flex-stack[spacing="33"]) {
8458
8536
  gap: 3.3rem;
8459
8537
  }
8460
8538
  :where(v-stack[spacing="34"],
8461
- h-stack[spacing="34"]) {
8539
+ h-stack[spacing="34"],
8540
+ h-flex-stack[spacing="34"],
8541
+ v-flex-stack[spacing="34"]) {
8462
8542
  gap: 3.4rem;
8463
8543
  }
8464
8544
  :where(v-stack[spacing="35"],
8465
- h-stack[spacing="35"]) {
8545
+ h-stack[spacing="35"],
8546
+ h-flex-stack[spacing="35"],
8547
+ v-flex-stack[spacing="35"]) {
8466
8548
  gap: 3.5rem;
8467
8549
  }
8468
8550
  :where(v-stack[spacing="36"],
8469
- h-stack[spacing="36"]) {
8551
+ h-stack[spacing="36"],
8552
+ h-flex-stack[spacing="36"],
8553
+ v-flex-stack[spacing="36"]) {
8470
8554
  gap: 3.6rem;
8471
8555
  }
8472
8556
  :where(v-stack[spacing="37"],
8473
- h-stack[spacing="37"]) {
8557
+ h-stack[spacing="37"],
8558
+ h-flex-stack[spacing="37"],
8559
+ v-flex-stack[spacing="37"]) {
8474
8560
  gap: 3.7rem;
8475
8561
  }
8476
8562
  :where(v-stack[spacing="38"],
8477
- h-stack[spacing="38"]) {
8563
+ h-stack[spacing="38"],
8564
+ h-flex-stack[spacing="38"],
8565
+ v-flex-stack[spacing="38"]) {
8478
8566
  gap: 3.8rem;
8479
8567
  }
8480
8568
  :where(v-stack[spacing="39"],
8481
- h-stack[spacing="39"]) {
8569
+ h-stack[spacing="39"],
8570
+ h-flex-stack[spacing="39"],
8571
+ v-flex-stack[spacing="39"]) {
8482
8572
  gap: 3.9rem;
8483
8573
  }
8484
8574
  :where(v-stack[spacing="40"],
8485
- h-stack[spacing="40"]) {
8575
+ h-stack[spacing="40"],
8576
+ h-flex-stack[spacing="40"],
8577
+ v-flex-stack[spacing="40"]) {
8486
8578
  gap: 4rem;
8487
8579
  }
8488
8580
  :where(v-stack[spacing="41"],
8489
- h-stack[spacing="41"]) {
8581
+ h-stack[spacing="41"],
8582
+ h-flex-stack[spacing="41"],
8583
+ v-flex-stack[spacing="41"]) {
8490
8584
  gap: 4.1rem;
8491
8585
  }
8492
8586
  :where(v-stack[spacing="42"],
8493
- h-stack[spacing="42"]) {
8587
+ h-stack[spacing="42"],
8588
+ h-flex-stack[spacing="42"],
8589
+ v-flex-stack[spacing="42"]) {
8494
8590
  gap: 4.2rem;
8495
8591
  }
8496
8592
  :where(v-stack[spacing="43"],
8497
- h-stack[spacing="43"]) {
8593
+ h-stack[spacing="43"],
8594
+ h-flex-stack[spacing="43"],
8595
+ v-flex-stack[spacing="43"]) {
8498
8596
  gap: 4.3rem;
8499
8597
  }
8500
8598
  :where(v-stack[spacing="44"],
8501
- h-stack[spacing="44"]) {
8599
+ h-stack[spacing="44"],
8600
+ h-flex-stack[spacing="44"],
8601
+ v-flex-stack[spacing="44"]) {
8502
8602
  gap: 4.4rem;
8503
8603
  }
8504
8604
  :where(v-stack[spacing="45"],
8505
- h-stack[spacing="45"]) {
8605
+ h-stack[spacing="45"],
8606
+ h-flex-stack[spacing="45"],
8607
+ v-flex-stack[spacing="45"]) {
8506
8608
  gap: 4.5rem;
8507
8609
  }
8508
8610
  :where(v-stack[spacing="46"],
8509
- h-stack[spacing="46"]) {
8611
+ h-stack[spacing="46"],
8612
+ h-flex-stack[spacing="46"],
8613
+ v-flex-stack[spacing="46"]) {
8510
8614
  gap: 4.6rem;
8511
8615
  }
8512
8616
  :where(v-stack[spacing="47"],
8513
- h-stack[spacing="47"]) {
8617
+ h-stack[spacing="47"],
8618
+ h-flex-stack[spacing="47"],
8619
+ v-flex-stack[spacing="47"]) {
8514
8620
  gap: 4.7rem;
8515
8621
  }
8516
8622
  :where(v-stack[spacing="48"],
8517
- h-stack[spacing="48"]) {
8623
+ h-stack[spacing="48"],
8624
+ h-flex-stack[spacing="48"],
8625
+ v-flex-stack[spacing="48"]) {
8518
8626
  gap: 4.8rem;
8519
8627
  }
8520
8628
  :where(v-stack[spacing="49"],
8521
- h-stack[spacing="49"]) {
8629
+ h-stack[spacing="49"],
8630
+ h-flex-stack[spacing="49"],
8631
+ v-flex-stack[spacing="49"]) {
8522
8632
  gap: 4.9rem;
8523
8633
  }
8524
8634
  :where(v-stack[spacing="50"],
8525
- h-stack[spacing="50"]) {
8635
+ h-stack[spacing="50"],
8636
+ h-flex-stack[spacing="50"],
8637
+ v-flex-stack[spacing="50"]) {
8526
8638
  gap: 5rem;
8527
8639
  }
8528
8640
  :where(v-stack[padding],
@@ -9185,7 +9297,6 @@
9185
9297
  margin-block: 5rem;
9186
9298
  }
9187
9299
  }
9188
- @layer sw-utils {}
9189
9300
  @layer sw-utils {
9190
9301
  :where(list-view[background=system-background],
9191
9302
  [is=form-view][background=system-background]) {
@@ -10568,19 +10679,50 @@
10568
10679
  --face: var(--background);
10569
10680
  --text: var(--primary);
10570
10681
  }
10571
- /* :where([is='sheet-view'], [is='full-screen'], [is='confirmation-dialog'], [is='alert-dialog']) {
10572
- // modify background/secondarybg/tertiarybg etc for ELEVATED STYLES!!
10573
- // ANCHOR: level 1
10574
- --face: var(--background); // IMPORTANT: redeclare references scope or it WONT pick up!
10575
- // --face2: var(--secondaryBackground); // IMPORTANT: redeclare references scope or it WONT pick up!
10576
- // --face3: var(--tertiaryBackground); // IMPORTANT: redeclare references scope or it WONT pick up!
10577
-
10578
- // FIXME: feat-sheet 1/3
10579
- --background: var(--secondaryBackground); //light-dark(var(--secondary-bg), var(--secondary-bg-dark));
10580
- // --face: light-dark(var(--secondary-bg), var(--secondary-bg-dark));
10581
-
10582
- // --text: light-dark(var(--secondary-text), var(--secondary-text-dark));
10583
- } */
10682
+ :where([is=sheet-view], [is=full-screen], [is=confirmation-dialog], [is=alert-dialog]) {
10683
+ --face: var(--background);
10684
+ --background: var(--secondaryBackground);
10685
+ }
10686
+ :where([is=sheet-view]:has(> scroll-view list-view[list-style=inset-grouped]:not([slot], [background]),
10687
+ > scroll-view [is=form-view][form-style=inset-grouped]:not([slot], [background]),
10688
+ > scroll-view table-view[table-style=inset]:not([slot], [background])),
10689
+ [is=full-screen]:has(> scroll-view list-view[list-style=inset-grouped]:not([slot], [background]),
10690
+ > scroll-view [is=form-view][form-style=inset-grouped]:not([slot], [background]),
10691
+ > scroll-view table-view[table-style=inset]:not([slot], [background])),
10692
+ [is=confirmation-dialog]:has(> scroll-view list-view[list-style=inset-grouped]:not([slot], [background]),
10693
+ > scroll-view [is=form-view][form-style=inset-grouped]:not([slot], [background]),
10694
+ > scroll-view table-view[table-style=inset]:not([slot], [background])),
10695
+ [is=alert-dialog]:has(> scroll-view list-view[list-style=inset-grouped]:not([slot], [background]),
10696
+ > scroll-view [is=form-view][form-style=inset-grouped]:not([slot], [background]),
10697
+ > scroll-view table-view[table-style=inset]:not([slot], [background])),
10698
+ body-view:has(> scroll-view list-view[list-style=inset-grouped]:not([slot], [background]),
10699
+ > scroll-view [is=form-view][form-style=inset-grouped]:not([slot], [background]),
10700
+ > scroll-view table-view[table-style=inset]:not([slot], [background])),
10701
+ navigation-split-view:has(> scroll-view list-view[list-style=inset-grouped]:not([slot], [background]),
10702
+ > scroll-view [is=form-view][form-style=inset-grouped]:not([slot], [background]),
10703
+ > scroll-view table-view[table-style=inset]:not([slot], [background])),
10704
+ navigation-split-view > [is=sidebar-view]:has(> scroll-view list-view[list-style=inset-grouped]:not([slot], [background]),
10705
+ > scroll-view [is=form-view][form-style=inset-grouped]:not([slot], [background]),
10706
+ > scroll-view table-view[table-style=inset]:not([slot], [background])),
10707
+ navigation-stack:has(> scroll-view list-view[list-style=inset-grouped]:not([slot], [background]),
10708
+ > scroll-view [is=form-view][form-style=inset-grouped]:not([slot], [background]),
10709
+ > scroll-view table-view[table-style=inset]:not([slot], [background]))) {
10710
+ --background: var(--groupedBackground);
10711
+ --secondaryBackground: var(--secondaryGroupedBackground);
10712
+ --tertiaryBackground: var(--tertiaryGroupedBackground);
10713
+ --face: var(--background);
10714
+ }
10715
+ :where(navigation-stack > navigation-stack:not(:has(> scroll-view list-view[list-style=inset-grouped]:not([slot], [background]),
10716
+ > scroll-view [is=form-view][form-style=inset-grouped]:not([slot], [background]),
10717
+ > scroll-view table-view[table-style=inset]:not([slot], [background]))),
10718
+ navigation-stack > navigation-split-view:not(:has(> scroll-view list-view[list-style=inset-grouped]:not([slot], [background]),
10719
+ > scroll-view [is=form-view][form-style=inset-grouped]:not([slot], [background]),
10720
+ > scroll-view table-view[table-style=inset]:not([slot], [background])))) {
10721
+ --background: initial;
10722
+ --secondaryBackground: initial;
10723
+ --tertiaryBackground: initial;
10724
+ --face: var(--background);
10725
+ }
10584
10726
  @media (min-width: 43rem) {
10585
10727
  :where(navigation-split-view > [is=sidebar-view]) {
10586
10728
  --face: light-dark(var(--liquid-glass-bg), var(--liquid-glass-bg-dark));