@swiftwc/ui 1.0.0-canary.2 → 1.0.0-canary.4

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 (15) hide show
  1. package/generated/components/form-view.js +40 -37
  2. package/generated/components/picker-view.d.ts +2 -10
  3. package/generated/components/picker-view.js +158 -271
  4. package/generated/css/index.css +282 -78
  5. package/generated/internal/class/dict-entry.d.ts +42 -0
  6. package/generated/internal/class/dict-entry.js +81 -0
  7. package/generated/internal/privateNamespace.js +1 -1
  8. package/generated/snapshot/index.d.ts +1 -0
  9. package/generated/snapshot/index.js +16 -0
  10. package/html-data/en.json +1 -1
  11. package/package.json +6 -6
  12. package/scss/_maps.scss +1 -1
  13. package/scss/base/_root.scss +7 -0
  14. package/scss/components/_labeled-content.scss +12 -8
  15. package/scss/components/_picker-view.scss +282 -92
package/generated/css/index.css CHANGED
@@ -129,6 +129,12 @@
129
129
  --toggle-dot-active-bg: var(--control-clear-glass-active-bg);
130
130
  --toggle-dot-active-bg-dark: var(--control-clear-glass-active-bg-dark);
131
131
  --toggle-dot-box-shadow: var(--control-clear-glass-box-shadow);
132
+ --segented-picker-track-bg: red;
133
+ --segented-picker-track-border-radius: var(--pill-border-radius);
134
+ --segented-picker-track-block-size: 3rem;
135
+ --segented-picker-track-padding-inline: 0.1rem;
136
+ --segented-picker-track-padding-block: 0.1rem;
137
+ --segented-picker-button-min-inline-size: 3rem;
132
138
  --label-footnote-font-size: 1rem;
133
139
  --label-footnote-line-height: 1.1875;
134
140
  --label-footnote-font-weight: 400;
@@ -3647,6 +3653,7 @@
3647
3653
  @layer sw.sw-components {
3648
3654
  :where(labeled-content) {
3649
3655
  container: labeled-content/inline-size;
3656
+ --labeled-content--labelstack-place-items: start;
3650
3657
  }
3651
3658
  :where(labeled-content)::part(labeled-content-container) {
3652
3659
  grid-template-columns: subgrid;
@@ -3654,7 +3661,7 @@
3654
3661
  }
3655
3662
  :where(labeled-content)::part(labeled-content-stack) {
3656
3663
  display: flex;
3657
- flex-flow: var(--labeled-content--value-stack-flex-flow, row wrap);
3664
+ flex-flow: var(--labeled-content--valuestack-flex-flow, row wrap);
3658
3665
  justify-content: space-between;
3659
3666
  row-gap: var(--labeled-content-row-gap);
3660
3667
  column-gap: var(--labeled-content-column-gap);
@@ -3662,25 +3669,26 @@
3662
3669
  :where(labeled-content)::part(labeled-content-label-stack) {
3663
3670
  --label-truncation-mode: tail;
3664
3671
  --label-line-limit: 1;
3672
+ place-items: var(--labeled-content--labelstack-place-items, center);
3665
3673
  }
3666
3674
  :where(labeled-content)::part(labeled-content-value-stack) {
3667
3675
  color: var(--secondary);
3668
- justify-items: var(--labeled-content--value-stack-justify-items, flex-end);
3676
+ justify-items: var(--labeled-content--valuestack-justify-items, flex-end);
3669
3677
  word-break: break-word;
3670
3678
  }
3671
3679
  @media (pointer: fine) {
3672
3680
  :where(labeled-content) {
3673
- --labeled-content--value-stack-flex-flow: column;
3674
- --labeled-content--value-stack-justify-items: flex-start;
3681
+ --labeled-content--valuestack-flex-flow: column;
3682
+ --labeled-content--valuestack-justify-items: flex-start;
3675
3683
  }
3676
3684
  }
3677
3685
  :where(labeled-content)[labeled-content-style=vertical] {
3678
- --labeled-content--value-stack-flex-flow: column;
3679
- --labeled-content--value-stack-justify-items: flex-start;
3686
+ --labeled-content--valuestack-flex-flow: column;
3687
+ --labeled-content--valuestack-justify-items: flex-start;
3680
3688
  }
3681
3689
  :where(labeled-content)[labeled-content-style=horizontal] {
3682
- --labeled-content--value-stack-flex-flow: row wrap;
3683
- --labeled-content--value-stack-justify-items: flex-end;
3690
+ --labeled-content--valuestack-flex-flow: row wrap;
3691
+ --labeled-content--valuestack-justify-items: flex-end;
3684
3692
  }
3685
3693
  :where(labeled-content > :nth-child(n+2 of [slot=label]),
3686
3694
  labeled-content > [slot=header],
@@ -5251,12 +5259,12 @@
5251
5259
  :where(picker-view) {
5252
5260
  grid-template-columns: minmax(0, 1fr);
5253
5261
  grid-template-rows: minmax(0, 1fr);
5254
- padding-inline: var(--picker--host-grid-padding-inline, );
5255
- padding-block: var(--picker--host-grid-padding-block, );
5256
- background: var(--picker--host-grid-background, );
5257
- border-radius: var(--picker--host-grid-border-radius, );
5258
- border: var(--picker--host-grid-border, );
5259
- color: var(--picker--host-grid-color, );
5262
+ padding-inline: var(--picker--host-padding-inline, );
5263
+ padding-block: var(--picker--host-padding-block, );
5264
+ background: var(--picker--host-background, );
5265
+ border-radius: var(--picker--host-border-radius, );
5266
+ border: var(--picker--host-border, );
5267
+ color: var(--picker--host-color, );
5260
5268
  }
5261
5269
  :where(picker-view)::part(picker-stack) {
5262
5270
  grid-template-columns: var(--picker--host-grid-template-columns, );
@@ -5269,6 +5277,15 @@
5269
5277
  text-align: var(--picker--inputstack-text-align, );
5270
5278
  gap: var(--picker--inputstack-gap, );
5271
5279
  flex-flow: var(--picker--inputstack-flex-flow, );
5280
+ grid-auto-flow: var(--picker--inputstack-grid-auto-flow, );
5281
+ background: var(--picker--inputstack-background, );
5282
+ border-radius: var(--picker--inputstack-border-radius, );
5283
+ position: var(--picker--inputstack-position, );
5284
+ min-inline-size: var(--picker--inputstack-min-inline-size, );
5285
+ block-size: var(--picker--inputstack-block-size, );
5286
+ padding-inline: var(--picker--inputstack-padding-inline, );
5287
+ padding-block: var(--picker--inputstack-padding-block, );
5288
+ overflow: var(--picker--inputstack-overflow, );
5272
5289
  }
5273
5290
  :where(picker-view)::part(picker-label-stack) {
5274
5291
  display: var(--picker--labelstack-display, none);
@@ -5289,132 +5306,319 @@
5289
5306
  }
5290
5307
  }
5291
5308
  @supports (x: if(else:red)) {
5309
+ :where(picker-view) {
5310
+ --picker--inputstack-grid-auto-flow: if(style(--picker-style: segmented): column; );
5311
+ --picker--inputstack-gap: if(style(--picker-style: segmented): 1rem; style(--picker-style: palette): 1rem; style(--picker-style: radio-group): 1rem; );
5312
+ --picker--inputstack-display: if(style(--picker-style: palette): flex; );
5313
+ --picker--inputstack-flex-flow: if(style(--picker-style: palette): row wrap; );
5314
+ }
5292
5315
  :where(form picker-view) {
5293
- --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 ;);
5294
- --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; );
5295
- --picker--inputstack-gap: if(style(--picker-style: radio-group): 1rem; );
5296
- --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); );
5297
- --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); );
5298
- --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, ); );
5299
- --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, ); );
5300
- --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, ); );
5301
- --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, ); );
5302
- --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, ); );
5303
- --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, ); );
5316
+ --picker--labelstack-display: if(style(--picker-style: segmented): grid; style(--picker-style: palette): grid; style(--picker-style: radio-group): grid; style(--picker-style: menu): grid; style(--picker-style: navigation-link): grid; style(--picker-style: sheet): grid; else: none ;);
5317
+ --picker--inputstack-text-align: if(style(--picker-style: segmented): start; style(--picker-style: palette): start; style(--picker-style: radio-group): start; style(--picker-style: menu): start; style(--picker-style: navigation-link): end; style(--picker-style: sheet): end; );
5318
+ --picker--inputstack-background: if(style(--picker-style: segmented): var(--segented-picker-track-bg); );
5319
+ --picker--inputstack-border-radius: if(style(--picker-style: segmented): var(--segented-picker-track-border-radius); );
5320
+ --picker--inputstack-position: if(style(--picker-style: segmented): relative; );
5321
+ --picker--inputstack-min-inline-size: if(style(--picker-style: segmented): calc(var(--segented-picker-button-min-inline-size) + 1rem); );
5322
+ --picker--inputstack-block-size: if(style(--picker-style: segmented): var(--segented-picker-track-block-size); );
5323
+ --picker--inputstack-padding-inline: if(style(--picker-style: segmented): var(--segented-picker-track-padding-inline); );
5324
+ --picker--inputstack-padding-block: if(style(--picker-style: segmented): var(--segented-picker-track-padding-block); );
5325
+ --picker--inputstack-overflow: if(style(--picker-style: segmented): auto clip; );
5326
+ --picker--host-row-gap: if(style(--picker-style: segmented): var(--labeled-content-row-gap); style(--picker-style: palette): var(--labeled-content-row-gap); 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); );
5327
+ --picker--host-column-gap: if(style(--picker-style: segmented): var(--labeled-content-column-gap); style(--picker-style: palette): var(--labeled-content-column-gap); 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); );
5328
+ --picker--host-padding-inline: if(style(--picker-style: segmented): var(--itempadistart, ) var(--itempadiend, ); style(--picker-style: palette): var(--itempadistart, ) var(--itempadiend, ); 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, ); );
5329
+ --picker--host-padding-block: if(style(--picker-style: segmented): var(--itempadbstart, ) var(--itempadbend, ); style(--picker-style: palette): var(--itempadbstart, ) var(--itempadbend, ); 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, ); );
5330
+ --picker--host-border-radius: if(style(--picker-style: segmented): var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, ); style(--picker-style: palette): var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, ); 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, ); );
5331
+ --picker--host-background: if(style(--picker-style: segmented): var(--itemface, ); style(--picker-style: palette): var(--itemface, ); 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, ); );
5332
+ --picker--host-color: if(style(--picker-style: segmented): var(--itemtext, ); style(--picker-style: palette): var(--itemtext, ); 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, ); );
5333
+ --picker--host-border: if(style(--picker-style: segmented): var(--itemborder, ); style(--picker-style: palette): var(--itemborder, ); 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, ); );
5304
5334
  }
5305
5335
  }
5306
5336
  @supports not (x: if(else:red)) {
5307
- @container style(--picker-style: menu) {
5337
+ @container style(--picker-style: menu) {}
5338
+ @container style(--picker-style: navigation-link) {}
5339
+ @container style(--picker-style: sheet) {}
5340
+ @container style(--picker-style: radio-group) {
5341
+ :where(picker-view:not([picker-style])) {
5342
+ --picker--inputstack-gap: 1rem;
5343
+ }
5344
+ }
5345
+ @container style(--picker-style: palette) {
5308
5346
  :where(picker-view:not([picker-style])) {
5347
+ --picker--inputstack-display: flex;
5348
+ --picker--inputstack-flex-flow: row wrap;
5349
+ --picker--inputstack-gap: 1rem;
5350
+ }
5351
+ }
5352
+ @container style(--picker-style: segmented) {
5353
+ :where(picker-view:not([picker-style])) {
5354
+ --picker--inputstack-grid-auto-flow: column;
5355
+ --picker--inputstack-gap: 1rem;
5356
+ }
5357
+ }
5358
+ @container style(--picker-style: menu) {
5359
+ :where(form picker-view:not([picker-style])) {
5309
5360
  --picker--labelstack-display: grid;
5310
5361
  --picker--inputstack-text-align: start;
5311
5362
  --picker--host-row-gap: var(--labeled-content-row-gap);
5312
5363
  --picker--host-column-gap: var(--labeled-content-column-gap);
5313
- --picker--host-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5314
- --picker--host-grid-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5315
- --picker--host-grid-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5316
- --picker--host-grid-background: var(--itemface, );
5317
- --picker--host-grid-color: var(--itemtext, );
5318
- --picker--host-grid-border: var(--itemborder, );
5364
+ --picker--host-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5365
+ --picker--host-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5366
+ --picker--host-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5367
+ --picker--host-background: var(--itemface, );
5368
+ --picker--host-color: var(--itemtext, );
5369
+ --picker--host-border: var(--itemborder, );
5319
5370
  }
5320
5371
  }
5321
5372
  @container style(--picker-style: navigation-link) {
5322
- :where(picker-view:not([picker-style])) {
5373
+ :where(form picker-view:not([picker-style])) {
5323
5374
  --picker--labelstack-display: grid;
5324
5375
  --picker--inputstack-text-align: end;
5325
5376
  --picker--host-row-gap: var(--labeled-content-row-gap);
5326
5377
  --picker--host-column-gap: var(--labeled-content-column-gap);
5327
- --picker--host-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5328
- --picker--host-grid-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5329
- --picker--host-grid-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5330
- --picker--host-grid-background: var(--itemface, );
5331
- --picker--host-grid-color: var(--itemtext, );
5332
- --picker--host-grid-border: var(--itemborder, );
5378
+ --picker--host-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5379
+ --picker--host-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5380
+ --picker--host-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5381
+ --picker--host-background: var(--itemface, );
5382
+ --picker--host-color: var(--itemtext, );
5383
+ --picker--host-border: var(--itemborder, );
5333
5384
  }
5334
5385
  }
5335
5386
  @container style(--picker-style: sheet) {
5336
- :where(picker-view:not([picker-style])) {
5387
+ :where(form picker-view:not([picker-style])) {
5337
5388
  --picker--labelstack-display: grid;
5338
5389
  --picker--inputstack-text-align: end;
5339
5390
  --picker--host-row-gap: var(--labeled-content-row-gap);
5340
5391
  --picker--host-column-gap: var(--labeled-content-column-gap);
5341
- --picker--host-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5342
- --picker--host-grid-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5343
- --picker--host-grid-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5344
- --picker--host-grid-background: var(--itemface, );
5345
- --picker--host-grid-color: var(--itemtext, );
5346
- --picker--host-grid-border: var(--itemborder, );
5392
+ --picker--host-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5393
+ --picker--host-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5394
+ --picker--host-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5395
+ --picker--host-background: var(--itemface, );
5396
+ --picker--host-color: var(--itemtext, );
5397
+ --picker--host-border: var(--itemborder, );
5347
5398
  }
5348
5399
  }
5349
5400
  @container style(--picker-style: radio-group) {
5350
- :where(picker-view:not([picker-style])) {
5401
+ :where(form picker-view:not([picker-style])) {
5351
5402
  --picker--labelstack-display: grid;
5352
5403
  --picker--inputstack-text-align: start;
5353
- --picker--inputstack-gap: 1rem;
5354
5404
  --picker--host-row-gap: var(--labeled-content-row-gap);
5355
5405
  --picker--host-column-gap: var(--labeled-content-column-gap);
5356
- --picker--host-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5357
- --picker--host-grid-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5358
- --picker--host-grid-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5359
- --picker--host-grid-background: var(--itemface, );
5360
- --picker--host-grid-color: var(--itemtext, );
5361
- --picker--host-grid-border: var(--itemborder, );
5406
+ --picker--host-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5407
+ --picker--host-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5408
+ --picker--host-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5409
+ --picker--host-background: var(--itemface, );
5410
+ --picker--host-color: var(--itemtext, );
5411
+ --picker--host-border: var(--itemborder, );
5412
+ }
5413
+ }
5414
+ @container style(--picker-style: palette) {
5415
+ :where(form picker-view:not([picker-style])) {
5416
+ --picker--labelstack-display: grid;
5417
+ --picker--inputstack-text-align: start;
5418
+ --picker--host-row-gap: var(--labeled-content-row-gap);
5419
+ --picker--host-column-gap: var(--labeled-content-column-gap);
5420
+ --picker--host-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5421
+ --picker--host-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5422
+ --picker--host-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5423
+ --picker--host-background: var(--itemface, );
5424
+ --picker--host-color: var(--itemtext, );
5425
+ --picker--host-border: var(--itemborder, );
5426
+ }
5427
+ }
5428
+ @container style(--picker-style: segmented) {
5429
+ :where(form picker-view:not([picker-style])) {
5430
+ --picker--labelstack-display: grid;
5431
+ --picker--inputstack-text-align: start;
5432
+ --picker--inputstack-background: var(--segented-picker-track-bg);
5433
+ --picker--inputstack-border-radius: var(--segented-picker-track-border-radius);
5434
+ --picker--inputstack-position: relative;
5435
+ --picker--inputstack-min-inline-size: calc(var(--segented-picker-button-min-inline-size) + 1rem);
5436
+ --picker--inputstack-block-size: var(--segented-picker-track-block-size);
5437
+ --picker--inputstack-padding-inline: var(--segented-picker-track-padding-inline);
5438
+ --picker--inputstack-padding-block: var(--segented-picker-track-padding-block);
5439
+ --picker--inputstack-overflow: auto clip;
5440
+ --picker--host-row-gap: var(--labeled-content-row-gap);
5441
+ --picker--host-column-gap: var(--labeled-content-column-gap);
5442
+ --picker--host-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5443
+ --picker--host-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5444
+ --picker--host-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5445
+ --picker--host-background: var(--itemface, );
5446
+ --picker--host-color: var(--itemtext, );
5447
+ --picker--host-border: var(--itemborder, );
5362
5448
  }
5363
5449
  }
5450
+ :where(picker-view[picker-style=menu]) {
5451
+ --picker-style: menu;
5452
+ }
5364
5453
  :where(form picker-view[picker-style=menu]) {
5365
5454
  --picker--labelstack-display: grid;
5366
5455
  --picker--inputstack-text-align: start;
5367
5456
  --picker--host-row-gap: var(--labeled-content-row-gap);
5368
5457
  --picker--host-column-gap: var(--labeled-content-column-gap);
5369
- --picker--host-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5370
- --picker--host-grid-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5371
- --picker--host-grid-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5372
- --picker--host-grid-background: var(--itemface, );
5373
- --picker--host-grid-color: var(--itemtext, );
5374
- --picker--host-grid-border: var(--itemborder, );
5458
+ --picker--host-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5459
+ --picker--host-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5460
+ --picker--host-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5461
+ --picker--host-background: var(--itemface, );
5462
+ --picker--host-color: var(--itemtext, );
5463
+ --picker--host-border: var(--itemborder, );
5464
+ }
5465
+ :where(picker-view[picker-style=navigation-link]) {
5466
+ --picker-style: navigation-link;
5375
5467
  }
5376
5468
  :where(form picker-view[picker-style=navigation-link]) {
5377
5469
  --picker--labelstack-display: grid;
5378
5470
  --picker--inputstack-text-align: end;
5379
5471
  --picker--host-row-gap: var(--labeled-content-row-gap);
5380
5472
  --picker--host-column-gap: var(--labeled-content-column-gap);
5381
- --picker--host-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5382
- --picker--host-grid-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5383
- --picker--host-grid-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5384
- --picker--host-grid-background: var(--itemface, );
5385
- --picker--host-grid-color: var(--itemtext, );
5386
- --picker--host-grid-border: var(--itemborder, );
5473
+ --picker--host-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5474
+ --picker--host-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5475
+ --picker--host-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5476
+ --picker--host-background: var(--itemface, );
5477
+ --picker--host-color: var(--itemtext, );
5478
+ --picker--host-border: var(--itemborder, );
5479
+ }
5480
+ :where(picker-view[picker-style=sheet]) {
5481
+ --picker-style: sheet;
5387
5482
  }
5388
5483
  :where(form picker-view[picker-style=sheet]) {
5389
5484
  --picker--labelstack-display: grid;
5390
5485
  --picker--inputstack-text-align: end;
5391
5486
  --picker--host-row-gap: var(--labeled-content-row-gap);
5392
5487
  --picker--host-column-gap: var(--labeled-content-column-gap);
5393
- --picker--host-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5394
- --picker--host-grid-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5395
- --picker--host-grid-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5396
- --picker--host-grid-background: var(--itemface, );
5397
- --picker--host-grid-color: var(--itemtext, );
5398
- --picker--host-grid-border: var(--itemborder, );
5488
+ --picker--host-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5489
+ --picker--host-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5490
+ --picker--host-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5491
+ --picker--host-background: var(--itemface, );
5492
+ --picker--host-color: var(--itemtext, );
5493
+ --picker--host-border: var(--itemborder, );
5494
+ }
5495
+ :where(picker-view[picker-style=radio-group]) {
5496
+ --picker-style: radio-group;
5497
+ --picker--inputstack-gap: 1rem;
5399
5498
  }
5400
5499
  :where(form picker-view[picker-style=radio-group]) {
5401
5500
  --picker--labelstack-display: grid;
5402
5501
  --picker--inputstack-text-align: start;
5502
+ --picker--host-row-gap: var(--labeled-content-row-gap);
5503
+ --picker--host-column-gap: var(--labeled-content-column-gap);
5504
+ --picker--host-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5505
+ --picker--host-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5506
+ --picker--host-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5507
+ --picker--host-background: var(--itemface, );
5508
+ --picker--host-color: var(--itemtext, );
5509
+ --picker--host-border: var(--itemborder, );
5510
+ }
5511
+ :where(picker-view[picker-style=palette]) {
5512
+ --picker-style: palette;
5513
+ --picker--inputstack-display: flex;
5514
+ --picker--inputstack-flex-flow: row wrap;
5515
+ --picker--inputstack-gap: 1rem;
5516
+ }
5517
+ :where(form picker-view[picker-style=palette]) {
5518
+ --picker--labelstack-display: grid;
5519
+ --picker--inputstack-text-align: start;
5520
+ --picker--host-row-gap: var(--labeled-content-row-gap);
5521
+ --picker--host-column-gap: var(--labeled-content-column-gap);
5522
+ --picker--host-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5523
+ --picker--host-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5524
+ --picker--host-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5525
+ --picker--host-background: var(--itemface, );
5526
+ --picker--host-color: var(--itemtext, );
5527
+ --picker--host-border: var(--itemborder, );
5528
+ }
5529
+ :where(picker-view[picker-style=segmented]) {
5530
+ --picker-style: segmented;
5531
+ --picker--inputstack-grid-auto-flow: column;
5403
5532
  --picker--inputstack-gap: 1rem;
5533
+ }
5534
+ :where(form picker-view[picker-style=segmented]) {
5535
+ --picker--labelstack-display: grid;
5536
+ --picker--inputstack-text-align: start;
5537
+ --picker--inputstack-background: var(--segented-picker-track-bg);
5538
+ --picker--inputstack-border-radius: var(--segented-picker-track-border-radius);
5539
+ --picker--inputstack-position: relative;
5540
+ --picker--inputstack-min-inline-size: calc(var(--segented-picker-button-min-inline-size) + 1rem);
5541
+ --picker--inputstack-block-size: var(--segented-picker-track-block-size);
5542
+ --picker--inputstack-padding-inline: var(--segented-picker-track-padding-inline);
5543
+ --picker--inputstack-padding-block: var(--segented-picker-track-padding-block);
5544
+ --picker--inputstack-overflow: auto clip;
5404
5545
  --picker--host-row-gap: var(--labeled-content-row-gap);
5405
5546
  --picker--host-column-gap: var(--labeled-content-column-gap);
5406
- --picker--host-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5407
- --picker--host-grid-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5408
- --picker--host-grid-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5409
- --picker--host-grid-background: var(--itemface, );
5410
- --picker--host-grid-color: var(--itemtext, );
5411
- --picker--host-grid-border: var(--itemborder, );
5547
+ --picker--host-padding-inline: var(--itempadistart, ) var(--itempadiend, );
5548
+ --picker--host-padding-block: var(--itempadbstart, ) var(--itempadbend, );
5549
+ --picker--host-border-radius: var(--itemradiustl, ) var(--itemradiustr, ) var(--itemradiusbr, ) var(--itemradiusbl, );
5550
+ --picker--host-background: var(--itemface, );
5551
+ --picker--host-color: var(--itemtext, );
5552
+ --picker--host-border: var(--itemborder, );
5412
5553
  }
5413
5554
  }
5414
5555
  :where(picker-view[horizontal-radio-group-layout]) {
5415
5556
  --picker--inputstack-display: flex;
5416
5557
  --picker--inputstack-flex-flow: row wrap;
5417
5558
  }
5559
+ @container style(--picker-style: radio-group) {
5560
+ picker-view > label:not([slot]) input[type=radio] {
5561
+ min-inline-size: 20px;
5562
+ margin: 0;
5563
+ }
5564
+ }
5565
+ @container style(--picker-style: palette) {
5566
+ :where(picker-view > label:not([slot])) {
5567
+ --label-font: callout;
5568
+ color: var(--secondary);
5569
+ }
5570
+ :where(picker-view > label:not([slot]):has(input[type=radio]:not(:disabled))) {
5571
+ cursor: pointer;
5572
+ }
5573
+ :where(picker-view > label:not([slot]):has(input[type=radio]:checked)) {
5574
+ color: var(--primary);
5575
+ font-weight: 600;
5576
+ }
5577
+ :where(picker-view > label:not([slot]) input[type=radio]) {
5578
+ appearance: none;
5579
+ margin: 0;
5580
+ inline-size: 2rem;
5581
+ block-size: 2rem;
5582
+ border-radius: 0.4rem;
5583
+ pointer-events: none;
5584
+ transition: outline 100ms ease-out;
5585
+ }
5586
+ :where(picker-view > label:not([slot]) input[type=radio]):checked {
5587
+ outline: var(--accentColor) solid 0.3rem;
5588
+ outline-offset: 0.1rem;
5589
+ }
5590
+ }
5591
+ @container style(--picker-style: segmented) {
5592
+ :where(picker-view > label:not([slot])) {
5593
+ --label-font: callout;
5594
+ color: var(--secondary);
5595
+ min-inline-size: var(--segented-picker-button-min-inline-size);
5596
+ background-color: blue;
5597
+ border-radius: inherit;
5598
+ inline-size: fit-content;
5599
+ block-size: calc(var(--segented-picker-track-block-size) - var(--segented-picker-track-padding-block) * 2);
5600
+ }
5601
+ :where(picker-view > label:not([slot]):has(input[type=radio]:not(:disabled))) {
5602
+ cursor: pointer;
5603
+ }
5604
+ :where(picker-view > label:not([slot]):has(input[type=radio]:checked)) {
5605
+ color: var(--primary);
5606
+ font-weight: 600;
5607
+ }
5608
+ :where(picker-view > label:not([slot]) input[type=radio]) {
5609
+ appearance: none;
5610
+ margin: 0;
5611
+ inline-size: 2rem;
5612
+ block-size: 2rem;
5613
+ border-radius: 0.4rem;
5614
+ pointer-events: none;
5615
+ transition: outline 100ms ease-out;
5616
+ }
5617
+ :where(picker-view > label:not([slot]) input[type=radio]):checked {
5618
+ outline: var(--accentColor) solid 0.3rem;
5619
+ outline-offset: 0.1rem;
5620
+ }
5621
+ }
5418
5622
  }
5419
5623
  @layer sw.sw-final {
5420
5624
  @supports not (x: attr(x type(*))) {
package/generated/internal/class/dict-entry.d.ts ADDED
@@ -0,0 +1,42 @@
1
+ export type DictEntry = {
2
+ value: string;
3
+ title?: string;
4
+ subtitle?: string;
5
+ systemImage?: string;
6
+ src?: string;
7
+ /**
8
+ * 'group' → inline disclosure (<optgroup>)
9
+ * 'submenu' → nested menu / pushed page (<datalist>)
10
+ * unset → inferred: group if it only contains leaves, submenu otherwise
11
+ */
12
+ kind?: 'group' | 'submenu';
13
+ children: DictEntry[];
14
+ };
15
+ export type Dictionary = DictEntry[];
16
+ type DictEntryInput = Omit<Partial<DictEntry>, 'children'> & {
17
+ children?: DictEntryInput[];
18
+ };
19
+ export declare const DictEntry: {
20
+ /** Normalizes a DOM node or untrusted plain object into a complete DictEntry */
21
+ from(node: Element | DictEntryInput): DictEntry;
22
+ fromPlain(n: DictEntryInput): DictEntry;
23
+ fromElement(el: Element): DictEntry;
24
+ /** A selectable option. An empty <optgroup>/<datalist> has a kind, so it is NOT a leaf */
25
+ isLeaf: (n: DictEntry) => boolean;
26
+ hasOnlyLeaves: (n: DictEntry) => boolean;
27
+ /** Only meaningful for non-leaves. Explicit kind wins, else infer from children */
28
+ isGroup: (n: DictEntry) => boolean;
29
+ leafValues: (n: DictEntry) => string[];
30
+ };
31
+ export declare const Dictionary: {
32
+ parse(json: string | null): Dictionary;
33
+ fromElements: (els: Iterable<Element>) => Dictionary;
34
+ /** path-id ("0.2.1") → entry */
35
+ index(nodes: Dictionary, parent?: string, map?: Map<string, DictEntry>): Map<string, DictEntry>;
36
+ /** Leaves only. Groups from elements have value '' and would clobber the label of `<option value="">` */
37
+ flatten(tree: Dictionary): {
38
+ labels: Record<string, string | undefined>;
39
+ icons: Record<string, string | undefined>;
40
+ };
41
+ };
42
+ export {};
package/generated/internal/class/dict-entry.js ADDED
@@ -0,0 +1,81 @@
1
+ const attr = (el, name) => el.getAttribute(name) ?? undefined;
2
+ export const DictEntry = {
3
+ /** Normalizes a DOM node or untrusted plain object into a complete DictEntry */
4
+ from(node) {
5
+ return node instanceof Element ? DictEntry.fromElement(node) : DictEntry.fromPlain(node);
6
+ },
7
+ fromPlain(n) {
8
+ const value = n.value ?? '';
9
+ return {
10
+ ...n,
11
+ value,
12
+ title: n.title ?? (value || undefined),
13
+ children: (n.children ?? []).map(DictEntry.fromPlain),
14
+ };
15
+ },
16
+ fromElement(el) {
17
+ if (el instanceof HTMLOptionElement) {
18
+ const label = attr(el, 'label'), raw = attr(el, 'value') ?? el.textContent?.trim();
19
+ return {
20
+ value: raw || label || '',
21
+ title: (label ?? attr(el, 'value') ?? el.textContent?.trim()) || undefined,
22
+ subtitle: attr(el, 'data-subtitle'),
23
+ systemImage: attr(el, 'data-system-image'),
24
+ src: attr(el, 'data-src'),
25
+ children: [],
26
+ };
27
+ }
28
+ return {
29
+ value: '',
30
+ title: attr(el, 'DATALIST' === el.tagName ? 'data-label' : 'label'),
31
+ subtitle: attr(el, 'data-subtitle'),
32
+ systemImage: attr(el, 'data-system-image'),
33
+ src: attr(el, 'data-src'),
34
+ kind: 'OPTGROUP' === el.tagName ? 'group' : 'submenu',
35
+ children: Array.from(el.children, DictEntry.fromElement),
36
+ };
37
+ },
38
+ /** A selectable option. An empty <optgroup>/<datalist> has a kind, so it is NOT a leaf */
39
+ isLeaf: (n) => !n.kind && 0 === n.children.length,
40
+ hasOnlyLeaves: (n) => n.children.every(DictEntry.isLeaf),
41
+ /** Only meaningful for non-leaves. Explicit kind wins, else infer from children */
42
+ isGroup: (n) => (n.kind ? 'group' === n.kind : DictEntry.hasOnlyLeaves(n)),
43
+ leafValues: (n) => (n.children.length ? n.children.flatMap(DictEntry.leafValues) : DictEntry.isLeaf(n) ? [n.value] : []),
44
+ };
45
+ export const Dictionary = {
46
+ parse(json) {
47
+ try {
48
+ const raw = JSON.parse(json ?? '[]');
49
+ return Array.isArray(raw) ? raw.map(DictEntry.fromPlain) : [];
50
+ }
51
+ catch {
52
+ console.error('invalid-dictionary');
53
+ return [];
54
+ }
55
+ },
56
+ fromElements: (els) => Array.from(els, DictEntry.fromElement),
57
+ /** path-id ("0.2.1") → entry */
58
+ index(nodes, parent = '', map = new Map()) {
59
+ nodes.forEach((n, i) => {
60
+ const id = parent ? `${parent}.${i}` : `${i}`;
61
+ map.set(id, n);
62
+ Dictionary.index(n.children, id, map);
63
+ });
64
+ return map;
65
+ },
66
+ /** Leaves only. Groups from elements have value '' and would clobber the label of `<option value="">` */
67
+ flatten(tree) {
68
+ const labels = {}, icons = {};
69
+ const walk = (list) => {
70
+ for (const n of list)
71
+ if (DictEntry.isLeaf(n)) {
72
+ labels[n.value] = n.title;
73
+ icons[n.value] = n.systemImage;
74
+ }
75
+ else
76
+ walk(n.children);
77
+ };
78
+ walk(tree);
79
+ return { labels, icons };
80
+ },
81
+ };
package/generated/internal/privateNamespace.js CHANGED
@@ -83,7 +83,7 @@ export const startViewTransition = async (target, type = 'forwards', updateCallb
83
83
  for await (const el of modalViews)
84
84
  el.showModal();
85
85
  debug(`⚡️ view-dialog-transition-start (${type})`);
86
- await Promise.allSettled(modalViews?.[0].getAnimations().map(({ finished }) => finished));
86
+ await Promise.allSettled((modalViews?.[0].getAnimations?.() ?? []).map(({ finished }) => finished)); // vitest is missing some parts, more safe-guards
87
87
  debug(`⚡️ view-dialog-transition-end (${type})`);
88
88
  }
89
89
  else {
package/generated/snapshot/index.d.ts CHANGED
@@ -5,5 +5,6 @@ export declare class Snapshot {
5
5
  static readonly waitReady: Promise<[void, void]>;
6
6
  static waitReadyFor<T extends HTMLElement>(element: T): Promise<T | null>;
7
7
  static get config(): Record<string, string> | undefined;
8
+ static mock(): Promise<void>;
8
9
  static setOwnConfig(): Promise<void>;
9
10
  }