@vectoriox/iox-ui 5.37.0 → 5.39.0

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 (45) hide show
  1. package/actions-core/index.d.ts +6 -1
  2. package/composite-core/index.d.ts +684 -28
  3. package/design-core/index.d.ts +452 -6
  4. package/fesm2022/vectoriox-iox-ui-actions-core.mjs +12 -4
  5. package/fesm2022/vectoriox-iox-ui-actions-core.mjs.map +1 -1
  6. package/fesm2022/vectoriox-iox-ui-composite-core.mjs +1761 -143
  7. package/fesm2022/vectoriox-iox-ui-composite-core.mjs.map +1 -1
  8. package/fesm2022/vectoriox-iox-ui-design-core.mjs +555 -6
  9. package/fesm2022/vectoriox-iox-ui-design-core.mjs.map +1 -1
  10. package/fesm2022/vectoriox-iox-ui-generation-core.mjs +534 -12
  11. package/fesm2022/vectoriox-iox-ui-generation-core.mjs.map +1 -1
  12. package/fesm2022/vectoriox-iox-ui-media-core.mjs +571 -0
  13. package/fesm2022/vectoriox-iox-ui-media-core.mjs.map +1 -0
  14. package/fesm2022/vectoriox-iox-ui.mjs +494 -127
  15. package/fesm2022/vectoriox-iox-ui.mjs.map +1 -1
  16. package/generation-core/index.d.ts +210 -4
  17. package/index.d.ts +217 -30
  18. package/media-core/index.d.ts +277 -0
  19. package/media-core/package.json +3 -0
  20. package/package.json +5 -1
  21. package/src/actions-core/element-actions.ts +12 -3
  22. package/src/composite-core/accordion-runtime.ts +3 -15
  23. package/src/composite-core/accordion.ts +4 -2
  24. package/src/composite-core/composite-kinds.ts +121 -7
  25. package/src/composite-core/composite-node.ts +4 -0
  26. package/src/composite-core/composite-runtime.ts +68 -0
  27. package/src/composite-core/exclusive-runtime.ts +358 -0
  28. package/src/composite-core/lightbox.ts +192 -0
  29. package/src/composite-core/public-api.ts +8 -2
  30. package/src/composite-core/slider-runtime.ts +180 -0
  31. package/src/composite-core/slider.ts +378 -0
  32. package/src/composite-core/structure.ts +38 -5
  33. package/src/composite-core/tabs.ts +628 -0
  34. package/src/design-core/contrast-audit.ts +5 -0
  35. package/src/design-core/element-styles.ts +34 -3
  36. package/src/design-core/flavor-spec.generated.ts +517 -2
  37. package/src/generation-core/baseline-roles.ts +2 -0
  38. package/src/generation-core/compose-site.ts +147 -4
  39. package/src/generation-core/node-baselines.generated.ts +156 -6
  40. package/src/generation-core/patterns.ts +20 -0
  41. package/src/generation-core/site-spec.generated.ts +210 -0
  42. package/src/media-core/public-api.ts +9 -0
  43. package/src/media-core/video-runtime.ts +239 -0
  44. package/src/media-core/video.ts +443 -0
  45. package/styles/iox-design.css +112 -0
@@ -1017,6 +1017,41 @@ const SPEC_TIERS = {
1017
1017
  "type": "spacing",
1018
1018
  "default": "0px 0px 20px 0px"
1019
1019
  },
1020
+ {
1021
+ "name": "tab-list-border",
1022
+ "type": "color",
1023
+ "default": "var(--iox-line)"
1024
+ },
1025
+ {
1026
+ "name": "tab-ink",
1027
+ "type": "color",
1028
+ "default": "var(--iox-text-muted)"
1029
+ },
1030
+ {
1031
+ "name": "tab-on-ink",
1032
+ "type": "color",
1033
+ "default": "var(--iox-text)"
1034
+ },
1035
+ {
1036
+ "name": "tab-on-mark",
1037
+ "type": "color",
1038
+ "default": "var(--iox-accent-text)"
1039
+ },
1040
+ {
1041
+ "name": "tab-pad",
1042
+ "type": "spacing",
1043
+ "default": "10px 16px"
1044
+ },
1045
+ {
1046
+ "name": "tab-list-border-width",
1047
+ "type": "size",
1048
+ "default": "0px 0px var(--iox-border-width) 0px"
1049
+ },
1050
+ {
1051
+ "name": "tab-mark-width",
1052
+ "type": "size",
1053
+ "default": "0px 0px 2px 0px"
1054
+ },
1020
1055
  {
1021
1056
  "name": "heading-color",
1022
1057
  "type": "color",
@@ -1106,6 +1141,21 @@ const SPEC_TIERS = {
1106
1141
  "name": "media-scrim-ink",
1107
1142
  "type": "color",
1108
1143
  "default": "#FFFFFF"
1144
+ },
1145
+ {
1146
+ "name": "video-play-bg",
1147
+ "type": "color",
1148
+ "default": "var(--iox-button-primary-bg)"
1149
+ },
1150
+ {
1151
+ "name": "video-play-ink",
1152
+ "type": "color",
1153
+ "default": "var(--iox-button-primary-ink)"
1154
+ },
1155
+ {
1156
+ "name": "video-play-size",
1157
+ "type": "size",
1158
+ "default": "64px"
1109
1159
  }
1110
1160
  ]
1111
1161
  };
@@ -1775,7 +1825,8 @@ const SPEC_ELEMENT_STYLES = [
1775
1825
  "appliesTo": [
1776
1826
  "Container",
1777
1827
  "LinkedContainer",
1778
- "Card"
1828
+ "Card",
1829
+ "SliderSlide"
1779
1830
  ],
1780
1831
  "base": {
1781
1832
  "color": "inherit",
@@ -1923,6 +1974,48 @@ const SPEC_ELEMENT_STYLES = [
1923
1974
  "color": "var(--iox-text-muted)"
1924
1975
  }
1925
1976
  },
1977
+ {
1978
+ "id": "tab-list",
1979
+ "label": "Tab list",
1980
+ "group": "Layout",
1981
+ "appliesTo": [
1982
+ "Container",
1983
+ "Repeater"
1984
+ ],
1985
+ "base": {
1986
+ "color": "inherit",
1987
+ "borderStyle": "solid",
1988
+ "borderWidth": "var(--iox-tab-list-border-width)",
1989
+ "borderColor": "var(--iox-tab-list-border)"
1990
+ }
1991
+ },
1992
+ {
1993
+ "id": "tab",
1994
+ "label": "Tab",
1995
+ "group": "Buttons",
1996
+ "appliesTo": [
1997
+ "ButtonBlock"
1998
+ ],
1999
+ "base": {
2000
+ "color": "var(--iox-tab-ink)",
2001
+ "padding": "var(--iox-tab-pad)",
2002
+ "fontFamily": "var(--iox-button-font)",
2003
+ "fontWeight": "var(--iox-button-weight)",
2004
+ "backgroundColor": "transparent",
2005
+ "borderStyle": "solid",
2006
+ "borderWidth": "var(--iox-tab-mark-width)",
2007
+ "borderColor": "transparent",
2008
+ "transitionDuration": "var(--iox-dur-fast)",
2009
+ "transitionTimingFunction": "var(--iox-ease-standard)"
2010
+ },
2011
+ "on": {
2012
+ "color": "var(--iox-tab-on-ink)",
2013
+ "borderColor": "var(--iox-tab-on-mark)"
2014
+ },
2015
+ "focus": {
2016
+ "boxShadow": "var(--iox-focus-ring)"
2017
+ }
2018
+ },
1926
2019
  {
1927
2020
  "id": "media",
1928
2021
  "label": "Image",
@@ -1930,7 +2023,8 @@ const SPEC_ELEMENT_STYLES = [
1930
2023
  "appliesTo": [
1931
2024
  "Image",
1932
2025
  "SliderSlide",
1933
- "Gallery"
2026
+ "Gallery",
2027
+ "Video"
1934
2028
  ],
1935
2029
  "base": {
1936
2030
  "borderRadius": "var(--iox-image-radius)",
@@ -2175,6 +2269,7 @@ const SPEC_DEFAULT_ELEMENT_STYLE = {
2175
2269
  "Link": "link",
2176
2270
  "Image": "media",
2177
2271
  "SliderSlide": "media",
2272
+ "Video": "media",
2178
2273
  "Divider": "rule",
2179
2274
  "Icon": "icon",
2180
2275
  "Dialog": "dialog",
@@ -4145,6 +4240,55 @@ const SPEC_FLAVOR_PACKS = [
4145
4240
  "group": "components",
4146
4241
  "value": "0px 0px 20px 0px"
4147
4242
  },
4243
+ {
4244
+ "name": "tab-list-border",
4245
+ "tier": "component",
4246
+ "type": "color",
4247
+ "group": "components",
4248
+ "value": "var(--iox-line)"
4249
+ },
4250
+ {
4251
+ "name": "tab-ink",
4252
+ "tier": "component",
4253
+ "type": "color",
4254
+ "group": "components",
4255
+ "value": "var(--iox-text-muted)"
4256
+ },
4257
+ {
4258
+ "name": "tab-on-ink",
4259
+ "tier": "component",
4260
+ "type": "color",
4261
+ "group": "components",
4262
+ "value": "var(--iox-text)"
4263
+ },
4264
+ {
4265
+ "name": "tab-on-mark",
4266
+ "tier": "component",
4267
+ "type": "color",
4268
+ "group": "components",
4269
+ "value": "var(--iox-accent-text)"
4270
+ },
4271
+ {
4272
+ "name": "tab-pad",
4273
+ "tier": "component",
4274
+ "type": "spacing",
4275
+ "group": "components",
4276
+ "value": "10px 16px"
4277
+ },
4278
+ {
4279
+ "name": "tab-list-border-width",
4280
+ "tier": "component",
4281
+ "type": "size",
4282
+ "group": "components",
4283
+ "value": "0px 0px var(--iox-border-width) 0px"
4284
+ },
4285
+ {
4286
+ "name": "tab-mark-width",
4287
+ "tier": "component",
4288
+ "type": "size",
4289
+ "group": "components",
4290
+ "value": "0px 0px 2px 0px"
4291
+ },
4148
4292
  {
4149
4293
  "name": "heading-color",
4150
4294
  "tier": "component",
@@ -4270,6 +4414,27 @@ const SPEC_FLAVOR_PACKS = [
4270
4414
  "type": "color",
4271
4415
  "group": "components",
4272
4416
  "value": "#FFFFFF"
4417
+ },
4418
+ {
4419
+ "name": "video-play-bg",
4420
+ "tier": "component",
4421
+ "type": "color",
4422
+ "group": "components",
4423
+ "value": "var(--iox-button-primary-bg)"
4424
+ },
4425
+ {
4426
+ "name": "video-play-ink",
4427
+ "tier": "component",
4428
+ "type": "color",
4429
+ "group": "components",
4430
+ "value": "var(--iox-button-primary-ink)"
4431
+ },
4432
+ {
4433
+ "name": "video-play-size",
4434
+ "tier": "component",
4435
+ "type": "size",
4436
+ "group": "components",
4437
+ "value": "64px"
4273
4438
  }
4274
4439
  ]
4275
4440
  },
@@ -5766,6 +5931,55 @@ const SPEC_FLAVOR_PACKS = [
5766
5931
  "group": "components",
5767
5932
  "value": "0px 0px 20px 0px"
5768
5933
  },
5934
+ {
5935
+ "name": "tab-list-border",
5936
+ "tier": "component",
5937
+ "type": "color",
5938
+ "group": "components",
5939
+ "value": "var(--iox-line)"
5940
+ },
5941
+ {
5942
+ "name": "tab-ink",
5943
+ "tier": "component",
5944
+ "type": "color",
5945
+ "group": "components",
5946
+ "value": "var(--iox-text-muted)"
5947
+ },
5948
+ {
5949
+ "name": "tab-on-ink",
5950
+ "tier": "component",
5951
+ "type": "color",
5952
+ "group": "components",
5953
+ "value": "var(--iox-text)"
5954
+ },
5955
+ {
5956
+ "name": "tab-on-mark",
5957
+ "tier": "component",
5958
+ "type": "color",
5959
+ "group": "components",
5960
+ "value": "var(--iox-accent-text)"
5961
+ },
5962
+ {
5963
+ "name": "tab-pad",
5964
+ "tier": "component",
5965
+ "type": "spacing",
5966
+ "group": "components",
5967
+ "value": "10px 16px"
5968
+ },
5969
+ {
5970
+ "name": "tab-list-border-width",
5971
+ "tier": "component",
5972
+ "type": "size",
5973
+ "group": "components",
5974
+ "value": "0px 0px var(--iox-border-width) 0px"
5975
+ },
5976
+ {
5977
+ "name": "tab-mark-width",
5978
+ "tier": "component",
5979
+ "type": "size",
5980
+ "group": "components",
5981
+ "value": "0px 0px 2px 0px"
5982
+ },
5769
5983
  {
5770
5984
  "name": "heading-color",
5771
5985
  "tier": "component",
@@ -5892,6 +6106,27 @@ const SPEC_FLAVOR_PACKS = [
5892
6106
  "type": "color",
5893
6107
  "group": "components",
5894
6108
  "value": "#FFFFFF"
6109
+ },
6110
+ {
6111
+ "name": "video-play-bg",
6112
+ "tier": "component",
6113
+ "type": "color",
6114
+ "group": "components",
6115
+ "value": "var(--iox-button-primary-bg)"
6116
+ },
6117
+ {
6118
+ "name": "video-play-ink",
6119
+ "tier": "component",
6120
+ "type": "color",
6121
+ "group": "components",
6122
+ "value": "var(--iox-button-primary-ink)"
6123
+ },
6124
+ {
6125
+ "name": "video-play-size",
6126
+ "tier": "component",
6127
+ "type": "size",
6128
+ "group": "components",
6129
+ "value": "64px"
5895
6130
  }
5896
6131
  ]
5897
6132
  },
@@ -7381,6 +7616,55 @@ const SPEC_FLAVOR_PACKS = [
7381
7616
  "group": "components",
7382
7617
  "value": "0px 0px 20px 0px"
7383
7618
  },
7619
+ {
7620
+ "name": "tab-list-border",
7621
+ "tier": "component",
7622
+ "type": "color",
7623
+ "group": "components",
7624
+ "value": "var(--iox-line)"
7625
+ },
7626
+ {
7627
+ "name": "tab-ink",
7628
+ "tier": "component",
7629
+ "type": "color",
7630
+ "group": "components",
7631
+ "value": "var(--iox-text-muted)"
7632
+ },
7633
+ {
7634
+ "name": "tab-on-ink",
7635
+ "tier": "component",
7636
+ "type": "color",
7637
+ "group": "components",
7638
+ "value": "var(--iox-text)"
7639
+ },
7640
+ {
7641
+ "name": "tab-on-mark",
7642
+ "tier": "component",
7643
+ "type": "color",
7644
+ "group": "components",
7645
+ "value": "var(--iox-accent-text)"
7646
+ },
7647
+ {
7648
+ "name": "tab-pad",
7649
+ "tier": "component",
7650
+ "type": "spacing",
7651
+ "group": "components",
7652
+ "value": "10px 16px"
7653
+ },
7654
+ {
7655
+ "name": "tab-list-border-width",
7656
+ "tier": "component",
7657
+ "type": "size",
7658
+ "group": "components",
7659
+ "value": "0px 0px var(--iox-border-width) 0px"
7660
+ },
7661
+ {
7662
+ "name": "tab-mark-width",
7663
+ "tier": "component",
7664
+ "type": "size",
7665
+ "group": "components",
7666
+ "value": "0px 0px 2px 0px"
7667
+ },
7384
7668
  {
7385
7669
  "name": "heading-color",
7386
7670
  "tier": "component",
@@ -7506,6 +7790,27 @@ const SPEC_FLAVOR_PACKS = [
7506
7790
  "type": "color",
7507
7791
  "group": "components",
7508
7792
  "value": "#FFFFFF"
7793
+ },
7794
+ {
7795
+ "name": "video-play-bg",
7796
+ "tier": "component",
7797
+ "type": "color",
7798
+ "group": "components",
7799
+ "value": "var(--iox-button-primary-bg)"
7800
+ },
7801
+ {
7802
+ "name": "video-play-ink",
7803
+ "tier": "component",
7804
+ "type": "color",
7805
+ "group": "components",
7806
+ "value": "var(--iox-button-primary-ink)"
7807
+ },
7808
+ {
7809
+ "name": "video-play-size",
7810
+ "tier": "component",
7811
+ "type": "size",
7812
+ "group": "components",
7813
+ "value": "64px"
7509
7814
  }
7510
7815
  ]
7511
7816
  },
@@ -9037,6 +9342,55 @@ const SPEC_FLAVOR_PACKS = [
9037
9342
  "group": "components",
9038
9343
  "value": "0px 0px 20px 0px"
9039
9344
  },
9345
+ {
9346
+ "name": "tab-list-border",
9347
+ "tier": "component",
9348
+ "type": "color",
9349
+ "group": "components",
9350
+ "value": "var(--iox-line)"
9351
+ },
9352
+ {
9353
+ "name": "tab-ink",
9354
+ "tier": "component",
9355
+ "type": "color",
9356
+ "group": "components",
9357
+ "value": "var(--iox-text-muted)"
9358
+ },
9359
+ {
9360
+ "name": "tab-on-ink",
9361
+ "tier": "component",
9362
+ "type": "color",
9363
+ "group": "components",
9364
+ "value": "var(--iox-text)"
9365
+ },
9366
+ {
9367
+ "name": "tab-on-mark",
9368
+ "tier": "component",
9369
+ "type": "color",
9370
+ "group": "components",
9371
+ "value": "var(--iox-accent-text)"
9372
+ },
9373
+ {
9374
+ "name": "tab-pad",
9375
+ "tier": "component",
9376
+ "type": "spacing",
9377
+ "group": "components",
9378
+ "value": "10px 16px"
9379
+ },
9380
+ {
9381
+ "name": "tab-list-border-width",
9382
+ "tier": "component",
9383
+ "type": "size",
9384
+ "group": "components",
9385
+ "value": "0px 0px var(--iox-border-width) 0px"
9386
+ },
9387
+ {
9388
+ "name": "tab-mark-width",
9389
+ "tier": "component",
9390
+ "type": "size",
9391
+ "group": "components",
9392
+ "value": "0px 0px 2px 0px"
9393
+ },
9040
9394
  {
9041
9395
  "name": "heading-color",
9042
9396
  "tier": "component",
@@ -9162,6 +9516,27 @@ const SPEC_FLAVOR_PACKS = [
9162
9516
  "type": "color",
9163
9517
  "group": "components",
9164
9518
  "value": "#FFFFFF"
9519
+ },
9520
+ {
9521
+ "name": "video-play-bg",
9522
+ "tier": "component",
9523
+ "type": "color",
9524
+ "group": "components",
9525
+ "value": "var(--iox-button-primary-bg)"
9526
+ },
9527
+ {
9528
+ "name": "video-play-ink",
9529
+ "tier": "component",
9530
+ "type": "color",
9531
+ "group": "components",
9532
+ "value": "var(--iox-button-primary-ink)"
9533
+ },
9534
+ {
9535
+ "name": "video-play-size",
9536
+ "tier": "component",
9537
+ "type": "size",
9538
+ "group": "components",
9539
+ "value": "64px"
9165
9540
  }
9166
9541
  ]
9167
9542
  },
@@ -10655,6 +11030,55 @@ const SPEC_FLAVOR_PACKS = [
10655
11030
  "group": "components",
10656
11031
  "value": "0px 0px 20px 0px"
10657
11032
  },
11033
+ {
11034
+ "name": "tab-list-border",
11035
+ "tier": "component",
11036
+ "type": "color",
11037
+ "group": "components",
11038
+ "value": "var(--iox-line)"
11039
+ },
11040
+ {
11041
+ "name": "tab-ink",
11042
+ "tier": "component",
11043
+ "type": "color",
11044
+ "group": "components",
11045
+ "value": "var(--iox-text-muted)"
11046
+ },
11047
+ {
11048
+ "name": "tab-on-ink",
11049
+ "tier": "component",
11050
+ "type": "color",
11051
+ "group": "components",
11052
+ "value": "var(--iox-text)"
11053
+ },
11054
+ {
11055
+ "name": "tab-on-mark",
11056
+ "tier": "component",
11057
+ "type": "color",
11058
+ "group": "components",
11059
+ "value": "var(--iox-accent-text)"
11060
+ },
11061
+ {
11062
+ "name": "tab-pad",
11063
+ "tier": "component",
11064
+ "type": "spacing",
11065
+ "group": "components",
11066
+ "value": "10px 16px"
11067
+ },
11068
+ {
11069
+ "name": "tab-list-border-width",
11070
+ "tier": "component",
11071
+ "type": "size",
11072
+ "group": "components",
11073
+ "value": "0px 0px var(--iox-border-width) 0px"
11074
+ },
11075
+ {
11076
+ "name": "tab-mark-width",
11077
+ "tier": "component",
11078
+ "type": "size",
11079
+ "group": "components",
11080
+ "value": "0px 0px 2px 0px"
11081
+ },
10658
11082
  {
10659
11083
  "name": "heading-color",
10660
11084
  "tier": "component",
@@ -10780,6 +11204,27 @@ const SPEC_FLAVOR_PACKS = [
10780
11204
  "type": "color",
10781
11205
  "group": "components",
10782
11206
  "value": "#FFFFFF"
11207
+ },
11208
+ {
11209
+ "name": "video-play-bg",
11210
+ "tier": "component",
11211
+ "type": "color",
11212
+ "group": "components",
11213
+ "value": "var(--iox-button-primary-bg)"
11214
+ },
11215
+ {
11216
+ "name": "video-play-ink",
11217
+ "tier": "component",
11218
+ "type": "color",
11219
+ "group": "components",
11220
+ "value": "var(--iox-button-primary-ink)"
11221
+ },
11222
+ {
11223
+ "name": "video-play-size",
11224
+ "tier": "component",
11225
+ "type": "size",
11226
+ "group": "components",
11227
+ "value": "64px"
10783
11228
  }
10784
11229
  ]
10785
11230
  },
@@ -12279,6 +12724,55 @@ const SPEC_FLAVOR_PACKS = [
12279
12724
  "group": "components",
12280
12725
  "value": "0px 0px 20px 0px"
12281
12726
  },
12727
+ {
12728
+ "name": "tab-list-border",
12729
+ "tier": "component",
12730
+ "type": "color",
12731
+ "group": "components",
12732
+ "value": "var(--iox-line)"
12733
+ },
12734
+ {
12735
+ "name": "tab-ink",
12736
+ "tier": "component",
12737
+ "type": "color",
12738
+ "group": "components",
12739
+ "value": "var(--iox-text-muted)"
12740
+ },
12741
+ {
12742
+ "name": "tab-on-ink",
12743
+ "tier": "component",
12744
+ "type": "color",
12745
+ "group": "components",
12746
+ "value": "var(--iox-text)"
12747
+ },
12748
+ {
12749
+ "name": "tab-on-mark",
12750
+ "tier": "component",
12751
+ "type": "color",
12752
+ "group": "components",
12753
+ "value": "var(--iox-accent-text)"
12754
+ },
12755
+ {
12756
+ "name": "tab-pad",
12757
+ "tier": "component",
12758
+ "type": "spacing",
12759
+ "group": "components",
12760
+ "value": "10px 16px"
12761
+ },
12762
+ {
12763
+ "name": "tab-list-border-width",
12764
+ "tier": "component",
12765
+ "type": "size",
12766
+ "group": "components",
12767
+ "value": "0px 0px var(--iox-border-width) 0px"
12768
+ },
12769
+ {
12770
+ "name": "tab-mark-width",
12771
+ "tier": "component",
12772
+ "type": "size",
12773
+ "group": "components",
12774
+ "value": "0px 0px 2px 0px"
12775
+ },
12282
12776
  {
12283
12777
  "name": "heading-color",
12284
12778
  "tier": "component",
@@ -12405,6 +12899,27 @@ const SPEC_FLAVOR_PACKS = [
12405
12899
  "type": "color",
12406
12900
  "group": "components",
12407
12901
  "value": "#FFFFFF"
12902
+ },
12903
+ {
12904
+ "name": "video-play-bg",
12905
+ "tier": "component",
12906
+ "type": "color",
12907
+ "group": "components",
12908
+ "value": "var(--iox-button-primary-bg)"
12909
+ },
12910
+ {
12911
+ "name": "video-play-ink",
12912
+ "tier": "component",
12913
+ "type": "color",
12914
+ "group": "components",
12915
+ "value": "var(--iox-button-primary-ink)"
12916
+ },
12917
+ {
12918
+ "name": "video-play-size",
12919
+ "tier": "component",
12920
+ "type": "size",
12921
+ "group": "components",
12922
+ "value": "64px"
12408
12923
  }
12409
12924
  ]
12410
12925
  }
@@ -12750,8 +13265,11 @@ var ElementStyleState;
12750
13265
  ElementStyleState["Focus"] = "focus";
12751
13266
  /** The page you're on (CC1 N2): compiles to `[aria-current="page"]`, never a pseudo-class. */
12752
13267
  ElementStyleState["Current"] = "current";
13268
+ /** A composite part that is ON — the active tab (CC4a "Active"): compiles to `[data-iox-on]`, the attribute every
13269
+ * composite runtime writes. */
13270
+ ElementStyleState["On"] = "on";
12753
13271
  })(ElementStyleState || (ElementStyleState = {}));
12754
- const ELEMENT_STYLE_STATES = [ElementStyleState.Hover, ElementStyleState.Active, ElementStyleState.Focus, ElementStyleState.Current];
13272
+ const ELEMENT_STYLE_STATES = [ElementStyleState.Hover, ElementStyleState.Active, ElementStyleState.Focus, ElementStyleState.Current, ElementStyleState.On];
12755
13273
  const ELEMENT_STYLES = SPEC_ELEMENT_STYLES;
12756
13274
  /** Legacy `Button.variant` → the element style it maps to (adopt, DS7). */
12757
13275
  const BUTTON_VARIANT_TO_STYLE = SPEC_BUTTON_VARIANT_TO_STYLE;
@@ -12828,7 +13346,7 @@ function ownedEntries(style) {
12828
13346
  }
12829
13347
  return out;
12830
13348
  }
12831
- /** Every trait the style owns with the value it writes — base first, then hover/active/focus/current. */
13349
+ /** Every trait the style owns with the value it writes — base first, then hover/active/focus/current/on. */
12832
13350
  function ownedTraitsOf(style) {
12833
13351
  return ownedEntries(style);
12834
13352
  }
@@ -12857,7 +13375,7 @@ function writeEntries(target, style, skip = []) {
12857
13375
  target.elementStyle = style.id;
12858
13376
  return unknown;
12859
13377
  }
12860
- /** Write the style's exact base map and its hover/active/focus/current maps into the target. */
13378
+ /** Write the style's exact base map and its hover/active/focus/current/on maps into the target. */
12861
13379
  function applyElementStyle(target, id) {
12862
13380
  const style = elementStyleById(id);
12863
13381
  if (!style)
@@ -12943,6 +13461,31 @@ function switchElementStyle(target, fromId, toId, baseline = {}) {
12943
13461
  writeEntries(target, to, kept);
12944
13462
  return { applied: true, kept };
12945
13463
  }
13464
+ /**
13465
+ * Take a node OUT of its element style (a part a recipe wants unstyled — a migrated slider's bare chevrons, CC3):
13466
+ * every owned trait still holding the style's value goes back to `baseline` (a state trait is removed); a trait the
13467
+ * author changed is kept. The node then wears no style (no `iox-es` marker). Returns the kept traits.
13468
+ */
13469
+ function releaseElementStyle(target, fromId, baseline = {}) {
13470
+ const kept = [];
13471
+ const from = elementStyleById(fromId);
13472
+ if (from) {
13473
+ for (const status of ownedTraitStatus(target, from.id)) {
13474
+ const ref = status.state ? { trait: status.trait, state: status.state } : { trait: status.trait };
13475
+ if (status.status === OwnedTraitLink.Changed) {
13476
+ if (status.actual !== undefined)
13477
+ kept.push(ref);
13478
+ continue;
13479
+ }
13480
+ if (ref.state)
13481
+ deleteState(target, ref.state, ref.trait);
13482
+ else
13483
+ writeBase(target, ref.trait, baseline[ref.trait]);
13484
+ }
13485
+ }
13486
+ delete target.elementStyle;
13487
+ return kept;
13488
+ }
12946
13489
  /**
12947
13490
  * The element-style MARKER (design-system §3b-bis, spec `elementStyleMarker`). A node that wears an
12948
13491
  * element style renders `iox-es iox-es-<id>` in BOTH renderers, through the one node-class helper
@@ -14488,6 +15031,8 @@ function auditDesignContrast(rows, mode) {
14488
15031
  ['base', ownStyle(e)],
14489
15032
  ...(e.hover ? [['hover', { ...ownStyle(e), ...e.hover }]] : []),
14490
15033
  ...(e.current ? [['current', { ...ownStyle(e), ...e.current }]] : []),
15034
+ // `on` (CC4a): the active tab, on every ground it can sit on.
15035
+ ...(e.on ? [['on', { ...ownStyle(e), ...e.on }]] : []),
14491
15036
  ];
14492
15037
  const glyph = e.group === GLYPH_GROUP;
14493
15038
  for (const [state, s] of states) {
@@ -14495,6 +15040,10 @@ function auditDesignContrast(rows, mode) {
14495
15040
  const under = fill.length && opaque(fill) ? overAll(fill, bgs) : bgs;
14496
15041
  const ink = s['color'] ? parseCssColour(resolveIn(values, s['color']), boxInk) : boxInk;
14497
15042
  check(e.id, state === 'base' ? (glyph ? 'glyph' : 'text') : `${state} text`, ink, under, glyph ? WCAG_AA_UI : WCAG_AA_TEXT);
15043
+ // The active tab's mark is the selected state's indicator (WCAG 1.4.11) — the contract's audit, 1:1.
15044
+ const mark = state === 'on' ? e.on?.['borderColor'] : undefined;
15045
+ if (mark)
15046
+ check(e.id, 'on mark', parseCssColour(resolveIn(values, mark), ink), bgs, WCAG_AA_UI);
14498
15047
  // What a filled element HOLDS (inkScopes): a button's or a badge's icon reads its ink.
14499
15048
  if (state === 'base' && INK_SCOPES.some(sc => sc.styles.includes(e.id))) {
14500
15049
  check(e.id, 'icon', parseCssColour(resolveIn(inkScoped(values, e.id), iconColour), ink), under, WCAG_AA_UI);
@@ -15870,5 +16419,5 @@ function planFontFamilyRemoval(existing, previous, family) {
15870
16419
  * Generated bundle index. Do not edit.
15871
16420
  */
15872
16421
 
15873
- export { ACCENT_TOKEN_NAMES, AdoptOutcome, AdoptSkipReason, BAR_RESERVE_BREAKPOINTS, BAR_RESERVE_CLASS, BOTTOM_BAR_STYLE, BUTTON_VARIANT_TO_STYLE, CANVAS_LINK_ATTRIBUTE, CARD_LINK_CLASS, COLOR_SCHEMES, COLOR_SCHEME_TRAIT, COLOR_SCHEME_TYPES, ColorScheme, ColourCheckId, DEFAULT_FLAVOR_ID, DESIGN_TOKEN_GROUPS, DESIGN_TOKEN_TIERS, DESIGN_TOKEN_TYPES, DesignConfigKey, ELEMENT_STYLES, ELEMENT_STYLE_MARKER_CLASS, ELEMENT_STYLE_STATES, EMPTY_IMAGE_ATTRIBUTE, EMPTY_IMAGE_SRC, ElementStyleState, FLAVOR_SPEC_VERSION, FONT_CATALOG, FONT_FAMILY_TOKENS, FONT_FILE_ACCEPT, FONT_FILE_EXTENSIONS, FONT_FILE_FORMATS, FONT_STYLES, FONT_WEIGHTS, FontUploadError, GOOGLE_FONTS_CSS_ORIGIN, GOOGLE_FONTS_FILE_ORIGIN, HELD_CONTRAST, INHERITED_TEXT, LinkType, MAX_FONT_FILE_BYTES, NEW_NODE_STYLE_DEFAULTS, OwnedTraitLink, PALETTE_PRESETS, PRE_DS2_FLAVOR_DEFAULTS, PRE_TINT_DEFAULT, REDUCED_MOTION_OVERRIDES, REDUCED_TRANSPARENCY_OVERRIDES, REVERT_WINDOW_MS, SCHEME_INK, SPEC_A11Y, SPEC_AXES, SPEC_BUTTON_VARIANT_TO_STYLE, SPEC_CONTRAST, SPEC_CONTRAST_AUDIT, SPEC_DEFAULT_ELEMENT_STYLE, SPEC_ELEMENT_STYLES, SPEC_FIELD_CLASS_BASELINE, SPEC_FLAVORS, SPEC_FLAVOR_PACKS, SPEC_FONTS, SPEC_FONT_ROLES, SPEC_INK_SCOPES, SPEC_LEGACY_ALIASES, SPEC_PALETTE_PRESETS, SPEC_SCHEMES, SPEC_SCHEME_INK, SPEC_SPRINGS, SPEC_TIERS, SPEC_TIER_IDS, SPEC_TOKEN_TYPES, SUPERSEDED_STYLE_VALUES, SWISS_FLAVOR, TINT_FULL_CHROMA, TINT_IDS, TINT_LEVELS, TINT_OWN_HUE_CHROMA, TINT_TURN_CHROMA, USER_TOKEN_SOURCE, WCAG_AA_TEXT, WCAG_AA_UI, adoptElementStyles, adoptionStyleFor, apcaLc, applyElementStyle, applyHeadingLevelRule, atLightness, atLightnessMaxChroma, auditDesignContrast, barReserveClass, buildFlavorTokens, buildFontFaceCss, buttonBlockHref, catalogFontId, checkFontWeight, choicesForPack, colorSchemeClass, colorSchemeOf, colourTabChecks, compareFontWeights, compileSchemeCss, compileTokenCss, compileTokenCssBlocks, compositeOver, cssString, defaultDesignChoices, defaultElementStyleFor, deriveAccentTokens, deriveBrandTokens, designBaseline, designConfigEntries, designModeOf, designTokenRepairs, designTokenRows, elementStyleById, elementStyleClass, elementStylesFor, emptyImageLabelSrc, emptyImagePlaceholder, emptyImageSrc, ensureAlpha, ensureContrast, flavorColours, flavorPackById, flavorSeedWrites, flavorSourceStamp, fontFamilyKey, fontFileName, fontFileStem, fontFormatOf, fontPreloads, fontRoleReferences, fontStackWithout, fontWeightCovers, fontWeightRange, fontWeightValue, fontsForTokens, formatFontFamilies, formatFontFamily, formatFontWeight, googleFontHref, groupFontFamilies, hasElementStyleMarker, headingHref, inSrgbGamut, isDesignTokenGroup, isDesignTokenTier, isDesignTokenType, isFontWeightRange, isRetiredFlavorId, legacyDesignTokenRows, legacyFlavorTokens, legacyRuleTokenReferences, matchFontWeight, missingDesignRows, missingFontRoles, nodeDesignClasses, normalizeFontStyle, normalizeFontWeight, normalizeFontWeightValue, oklabToRgb, ownedTraitStatus, ownedTraitsOf, packDesignChoices, paintColours, parseCssColour, parseFontFamilies, parseFontWeight, parseHexColor, planDesignApply, planDesignRevert, planFlavorRevert, planFlavorSeed, planFontFamilyRemoval, planSwissMigration, preTintAccentGrounds, previewElementStyleAdoption, previewFontWeight, quantizeRgb, readDesignConfig, readOwnedTrait, relativeLuminance, resolveDesignChoices, resolveSchemeTokenValues, resolveTokenReferences, resolveTokenValues, revertAvailable, rgbToOklab, ringColour, roleClass, sameDesignChoices, setColorScheme, specTokenNames, splitTopLevel, springToLinear, stackNamesFamily, styleKeyToKebab, switchElementStyle, syncNodeDesignClasses, toHexColor, tokenReferences, tokensToDarkVarMap, tokensToVarMap, unknownTokenReferences, untouchedSeedRow, userFontStack, validateFlavorPack, wcagContrastRatio, withSchemeInk, writeOwnedTrait };
16422
+ export { ACCENT_TOKEN_NAMES, AdoptOutcome, AdoptSkipReason, BAR_RESERVE_BREAKPOINTS, BAR_RESERVE_CLASS, BOTTOM_BAR_STYLE, BUTTON_VARIANT_TO_STYLE, CANVAS_LINK_ATTRIBUTE, CARD_LINK_CLASS, COLOR_SCHEMES, COLOR_SCHEME_TRAIT, COLOR_SCHEME_TYPES, ColorScheme, ColourCheckId, DEFAULT_FLAVOR_ID, DESIGN_TOKEN_GROUPS, DESIGN_TOKEN_TIERS, DESIGN_TOKEN_TYPES, DesignConfigKey, ELEMENT_STYLES, ELEMENT_STYLE_MARKER_CLASS, ELEMENT_STYLE_STATES, EMPTY_IMAGE_ATTRIBUTE, EMPTY_IMAGE_SRC, ElementStyleState, FLAVOR_SPEC_VERSION, FONT_CATALOG, FONT_FAMILY_TOKENS, FONT_FILE_ACCEPT, FONT_FILE_EXTENSIONS, FONT_FILE_FORMATS, FONT_STYLES, FONT_WEIGHTS, FontUploadError, GOOGLE_FONTS_CSS_ORIGIN, GOOGLE_FONTS_FILE_ORIGIN, HELD_CONTRAST, INHERITED_TEXT, LinkType, MAX_FONT_FILE_BYTES, NEW_NODE_STYLE_DEFAULTS, OwnedTraitLink, PALETTE_PRESETS, PRE_DS2_FLAVOR_DEFAULTS, PRE_TINT_DEFAULT, REDUCED_MOTION_OVERRIDES, REDUCED_TRANSPARENCY_OVERRIDES, REVERT_WINDOW_MS, SCHEME_INK, SPEC_A11Y, SPEC_AXES, SPEC_BUTTON_VARIANT_TO_STYLE, SPEC_CONTRAST, SPEC_CONTRAST_AUDIT, SPEC_DEFAULT_ELEMENT_STYLE, SPEC_ELEMENT_STYLES, SPEC_FIELD_CLASS_BASELINE, SPEC_FLAVORS, SPEC_FLAVOR_PACKS, SPEC_FONTS, SPEC_FONT_ROLES, SPEC_INK_SCOPES, SPEC_LEGACY_ALIASES, SPEC_PALETTE_PRESETS, SPEC_SCHEMES, SPEC_SCHEME_INK, SPEC_SPRINGS, SPEC_TIERS, SPEC_TIER_IDS, SPEC_TOKEN_TYPES, SUPERSEDED_STYLE_VALUES, SWISS_FLAVOR, TINT_FULL_CHROMA, TINT_IDS, TINT_LEVELS, TINT_OWN_HUE_CHROMA, TINT_TURN_CHROMA, USER_TOKEN_SOURCE, WCAG_AA_TEXT, WCAG_AA_UI, adoptElementStyles, adoptionStyleFor, apcaLc, applyElementStyle, applyHeadingLevelRule, atLightness, atLightnessMaxChroma, auditDesignContrast, barReserveClass, buildFlavorTokens, buildFontFaceCss, buttonBlockHref, catalogFontId, checkFontWeight, choicesForPack, colorSchemeClass, colorSchemeOf, colourTabChecks, compareFontWeights, compileSchemeCss, compileTokenCss, compileTokenCssBlocks, compositeOver, cssString, defaultDesignChoices, defaultElementStyleFor, deriveAccentTokens, deriveBrandTokens, designBaseline, designConfigEntries, designModeOf, designTokenRepairs, designTokenRows, elementStyleById, elementStyleClass, elementStylesFor, emptyImageLabelSrc, emptyImagePlaceholder, emptyImageSrc, ensureAlpha, ensureContrast, flavorColours, flavorPackById, flavorSeedWrites, flavorSourceStamp, fontFamilyKey, fontFileName, fontFileStem, fontFormatOf, fontPreloads, fontRoleReferences, fontStackWithout, fontWeightCovers, fontWeightRange, fontWeightValue, fontsForTokens, formatFontFamilies, formatFontFamily, formatFontWeight, googleFontHref, groupFontFamilies, hasElementStyleMarker, headingHref, inSrgbGamut, isDesignTokenGroup, isDesignTokenTier, isDesignTokenType, isFontWeightRange, isRetiredFlavorId, legacyDesignTokenRows, legacyFlavorTokens, legacyRuleTokenReferences, matchFontWeight, missingDesignRows, missingFontRoles, nodeDesignClasses, normalizeFontStyle, normalizeFontWeight, normalizeFontWeightValue, oklabToRgb, ownedTraitStatus, ownedTraitsOf, packDesignChoices, paintColours, parseCssColour, parseFontFamilies, parseFontWeight, parseHexColor, planDesignApply, planDesignRevert, planFlavorRevert, planFlavorSeed, planFontFamilyRemoval, planSwissMigration, preTintAccentGrounds, previewElementStyleAdoption, previewFontWeight, quantizeRgb, readDesignConfig, readOwnedTrait, relativeLuminance, releaseElementStyle, resolveDesignChoices, resolveSchemeTokenValues, resolveTokenReferences, resolveTokenValues, revertAvailable, rgbToOklab, ringColour, roleClass, sameDesignChoices, setColorScheme, specTokenNames, splitTopLevel, springToLinear, stackNamesFamily, styleKeyToKebab, switchElementStyle, syncNodeDesignClasses, toHexColor, tokenReferences, tokensToDarkVarMap, tokensToVarMap, unknownTokenReferences, untouchedSeedRow, userFontStack, validateFlavorPack, wcagContrastRatio, withSchemeInk, writeOwnedTrait };
15874
16423
  //# sourceMappingURL=vectoriox-iox-ui-design-core.mjs.map