@refrakt-md/lumina 0.18.0 → 0.20.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 (58) hide show
  1. package/base.css +4 -0
  2. package/contracts/structures.json +509 -223
  3. package/dist/config.js +5 -5
  4. package/dist/config.js.map +1 -1
  5. package/dist/presets/tideline.d.ts.map +1 -1
  6. package/dist/presets/tideline.js +0 -14
  7. package/dist/presets/tideline.js.map +1 -1
  8. package/dist/tokens.d.ts.map +1 -1
  9. package/dist/tokens.js +20 -23
  10. package/dist/tokens.js.map +1 -1
  11. package/index.css +5 -1
  12. package/package.json +4 -4
  13. package/styles/base/attributes.css +9 -0
  14. package/styles/dimensions/cover.css +140 -0
  15. package/styles/dimensions/frame.css +54 -0
  16. package/styles/dimensions/guest-posture.css +27 -0
  17. package/styles/dimensions/media.css +1 -1
  18. package/styles/dimensions/sections.css +4 -1
  19. package/styles/dimensions/sequence.css +1 -1
  20. package/styles/dimensions/state.css +1 -1
  21. package/styles/dimensions/substrate.css +101 -0
  22. package/styles/dimensions/surfaces.css +35 -2
  23. package/styles/global.css +68 -0
  24. package/styles/layouts/on-this-page.css +2 -2
  25. package/styles/layouts/search.css +2 -2
  26. package/styles/layouts/split.css +134 -183
  27. package/styles/layouts/version-switcher.css +1 -1
  28. package/styles/runes/audio.css +1 -1
  29. package/styles/runes/bento.css +193 -99
  30. package/styles/runes/bg.css +24 -0
  31. package/styles/runes/bond.css +1 -1
  32. package/styles/runes/budget.css +1 -1
  33. package/styles/runes/card.css +77 -9
  34. package/styles/runes/character.css +1 -1
  35. package/styles/runes/chart.css +69 -0
  36. package/styles/runes/design-context.css +7 -5
  37. package/styles/runes/event.css +1 -1
  38. package/styles/runes/faction.css +32 -6
  39. package/styles/runes/feature.css +21 -16
  40. package/styles/runes/figure.css +1 -2
  41. package/styles/runes/gallery.css +39 -8
  42. package/styles/runes/itinerary.css +2 -2
  43. package/styles/runes/lore.css +1 -1
  44. package/styles/runes/palette.css +3 -3
  45. package/styles/runes/plan-progress.css +15 -62
  46. package/styles/runes/playlist.css +32 -0
  47. package/styles/runes/plot.css +2 -2
  48. package/styles/runes/realm.css +32 -6
  49. package/styles/runes/recipe.css +38 -2
  50. package/styles/runes/sandbox.css +1 -1
  51. package/styles/runes/showcase.css +7 -63
  52. package/styles/runes/spacing.css +4 -4
  53. package/styles/runes/swatch.css +1 -1
  54. package/styles/runes/tint.css +7 -7
  55. package/styles/runes/typography.css +7 -7
  56. package/styles/runes/xref.css +1 -1
  57. package/tokens/base.css +14 -14
  58. package/tokens/dark.css +18 -14
@@ -267,14 +267,126 @@
267
267
  "root": ".rf-card",
268
268
  "dataRune": "card",
269
269
  "childOrder": [
270
+ "media",
271
+ "content",
270
272
  "{content}"
271
273
  ],
272
274
  "modifiers": {
273
- "layout": {
275
+ "media-position": {
274
276
  "source": "meta",
275
- "default": "stacked",
276
- "classPattern": ".rf-card--{value}",
277
- "dataAttribute": "data-layout"
277
+ "default": "top",
278
+ "dataAttribute": "data-media-position"
279
+ },
280
+ "media-ratio": {
281
+ "source": "meta",
282
+ "dataAttribute": "data-media-ratio"
283
+ },
284
+ "valign": {
285
+ "source": "meta",
286
+ "dataAttribute": "data-valign"
287
+ },
288
+ "collapse": {
289
+ "source": "meta",
290
+ "dataAttribute": "data-collapse"
291
+ },
292
+ "content-place": {
293
+ "source": "meta",
294
+ "dataAttribute": "data-content-place"
295
+ },
296
+ "height": {
297
+ "source": "meta",
298
+ "dataAttribute": "data-height"
299
+ },
300
+ "aspect": {
301
+ "source": "meta",
302
+ "dataAttribute": "data-aspect"
303
+ }
304
+ },
305
+ "elements": {
306
+ "content": {
307
+ "tag": "div",
308
+ "selector": ".rf-card__content",
309
+ "source": "layout",
310
+ "children": [
311
+ "eyebrow",
312
+ "body",
313
+ "footer"
314
+ ]
315
+ }
316
+ },
317
+ "inlineStyles": {
318
+ "valign": {
319
+ "prop": "--split-valign"
320
+ },
321
+ "aspect": "aspect-ratio"
322
+ },
323
+ "variants": {
324
+ "media-position": {
325
+ "cover": {
326
+ "block": "card",
327
+ "root": ".rf-card",
328
+ "dataRune": "card",
329
+ "childOrder": [
330
+ "media",
331
+ "content",
332
+ "{content}"
333
+ ],
334
+ "modifiers": {
335
+ "media-position": {
336
+ "source": "meta",
337
+ "default": "top",
338
+ "dataAttribute": "data-media-position"
339
+ },
340
+ "media-ratio": {
341
+ "source": "meta",
342
+ "dataAttribute": "data-media-ratio"
343
+ },
344
+ "valign": {
345
+ "source": "meta",
346
+ "dataAttribute": "data-valign"
347
+ },
348
+ "collapse": {
349
+ "source": "meta",
350
+ "dataAttribute": "data-collapse"
351
+ },
352
+ "content-place": {
353
+ "source": "meta",
354
+ "dataAttribute": "data-content-place"
355
+ },
356
+ "height": {
357
+ "source": "meta",
358
+ "dataAttribute": "data-height"
359
+ },
360
+ "aspect": {
361
+ "source": "meta",
362
+ "dataAttribute": "data-aspect"
363
+ }
364
+ },
365
+ "staticModifiers": [
366
+ {
367
+ "name": "cover",
368
+ "selector": ".rf-card--cover"
369
+ }
370
+ ],
371
+ "elements": {
372
+ "content": {
373
+ "tag": "div",
374
+ "selector": ".rf-card__content",
375
+ "source": "layout",
376
+ "children": [
377
+ "eyebrow",
378
+ "body",
379
+ "footer"
380
+ ]
381
+ }
382
+ },
383
+ "inlineStyles": {
384
+ "valign": {
385
+ "prop": "--split-valign"
386
+ },
387
+ "aspect": "aspect-ratio"
388
+ }
389
+ }
278
390
  }
279
391
  }
280
392
  },
@@ -584,21 +696,13 @@
584
696
  "default": "true",
585
697
  "dataAttribute": "data-lightbox"
586
698
  },
587
- "gap": {
588
- "source": "meta",
589
- "default": "default",
590
- "dataAttribute": "data-gap"
591
- },
592
699
  "columns": {
593
700
  "source": "meta",
594
701
  "dataAttribute": "data-columns"
595
702
  }
596
703
  },
597
704
  "inlineStyles": {
598
- "columns": "--gallery-columns",
599
- "gap": {
600
- "prop": "--gallery-gap"
601
- }
705
+ "columns": "--gallery-columns"
602
706
  },
603
707
  "childDensity": "compact"
604
708
  },
@@ -854,44 +958,12 @@
854
958
  "childOrder": [
855
959
  "{content}"
856
960
  ],
857
- "modifiers": {
858
- "shadow": {
859
- "source": "meta",
860
- "default": "none",
861
- "classPattern": ".rf-showcase--{value}",
862
- "dataAttribute": "data-shadow"
863
- },
864
- "bleed": {
865
- "source": "meta",
866
- "default": "none",
867
- "classPattern": ".rf-showcase--{value}",
868
- "dataAttribute": "data-bleed"
869
- },
870
- "aspect": {
871
- "source": "meta",
872
- "dataAttribute": "data-aspect"
873
- },
874
- "offset": {
875
- "source": "meta",
876
- "dataAttribute": "data-offset"
877
- },
878
- "place": {
879
- "source": "meta",
880
- "dataAttribute": "data-place"
881
- }
882
- },
883
961
  "contextModifiers": {
884
962
  "bento-cell": {
885
963
  "suffix": "in-bento-cell",
886
964
  "selector": ".rf-showcase--in-bento-cell"
887
965
  }
888
966
  },
889
- "inlineStyles": {
890
- "offset": {
891
- "prop": "--showcase-offset"
892
- },
893
- "aspect": "--showcase-aspect"
894
- },
895
967
  "childDensity": "compact"
896
968
  },
897
969
  "TabGroup": {
@@ -1192,11 +1264,10 @@
1192
1264
  "{content}"
1193
1265
  ],
1194
1266
  "modifiers": {
1195
- "layout": {
1267
+ "media-position": {
1196
1268
  "source": "meta",
1197
- "default": "stacked",
1198
- "classPattern": ".rf-hero--{value}",
1199
- "dataAttribute": "data-layout"
1269
+ "default": "top",
1270
+ "dataAttribute": "data-media-position"
1200
1271
  },
1201
1272
  "align": {
1202
1273
  "source": "meta",
@@ -1204,32 +1275,19 @@
1204
1275
  "classPattern": ".rf-hero--{value}",
1205
1276
  "dataAttribute": "data-align"
1206
1277
  },
1207
- "ratio": {
1278
+ "media-ratio": {
1208
1279
  "source": "meta",
1209
- "default": "1 1",
1210
- "dataAttribute": "data-ratio"
1280
+ "dataAttribute": "data-media-ratio"
1211
1281
  },
1212
1282
  "valign": {
1213
1283
  "source": "meta",
1214
- "default": "top",
1215
1284
  "dataAttribute": "data-valign"
1216
1285
  },
1217
- "gap": {
1218
- "source": "meta",
1219
- "default": "default",
1220
- "dataAttribute": "data-gap"
1221
- },
1222
1286
  "collapse": {
1223
1287
  "source": "meta",
1224
1288
  "dataAttribute": "data-collapse"
1225
1289
  }
1226
1290
  },
1227
- "contextModifiers": {
1228
- "feature": {
1229
- "suffix": "in-feature",
1230
- "selector": ".rf-hero--in-feature"
1231
- }
1232
- },
1233
1291
  "elements": {
1234
1292
  "preamble": {
1235
1293
  "tag": "header",
@@ -1263,14 +1321,8 @@
1263
1321
  }
1264
1322
  },
1265
1323
  "inlineStyles": {
1266
- "ratio": {
1267
- "prop": "--split-ratio"
1268
- },
1269
1324
  "valign": {
1270
1325
  "prop": "--split-valign"
1271
- },
1272
- "gap": {
1273
- "prop": "--split-gap"
1274
1326
  }
1275
1327
  }
1276
1328
  },
@@ -1329,48 +1381,29 @@
1329
1381
  "modifiers": {
1330
1382
  "columns": {
1331
1383
  "source": "meta",
1332
- "default": "4",
1333
- "classPattern": ".rf-bento--{value}",
1384
+ "default": "6",
1334
1385
  "dataAttribute": "data-columns"
1335
1386
  },
1336
1387
  "gap": {
1337
1388
  "source": "meta",
1338
1389
  "default": "1rem",
1339
- "classPattern": ".rf-bento--{value}",
1340
1390
  "dataAttribute": "data-gap"
1341
1391
  },
1342
- "sizing": {
1392
+ "row-height": {
1343
1393
  "source": "meta",
1344
- "default": "tiered",
1345
- "classPattern": ".rf-bento--{value}",
1346
- "dataAttribute": "data-sizing"
1347
- }
1348
- },
1349
- "elements": {
1350
- "preamble": {
1351
- "tag": "header",
1352
- "selector": ".rf-bento__preamble",
1353
- "source": "autoLabel"
1394
+ "dataAttribute": "data-row-height"
1354
1395
  },
1355
- "eyebrow": {
1356
- "tag": "eyebrow",
1357
- "selector": ".rf-bento__eyebrow",
1358
- "source": "autoLabel"
1359
- },
1360
- "headline": {
1361
- "tag": "headline",
1362
- "selector": ".rf-bento__headline",
1363
- "source": "autoLabel"
1396
+ "content-height": {
1397
+ "source": "meta",
1398
+ "dataAttribute": "data-content-height"
1364
1399
  },
1365
- "blurb": {
1366
- "tag": "blurb",
1367
- "selector": ".rf-bento__blurb",
1368
- "source": "autoLabel"
1400
+ "media-ratio": {
1401
+ "source": "meta",
1402
+ "dataAttribute": "data-media-ratio"
1369
1403
  },
1370
- "image": {
1371
- "tag": "image",
1372
- "selector": ".rf-bento__image",
1373
- "source": "autoLabel"
1404
+ "collapse": {
1405
+ "source": "meta",
1406
+ "dataAttribute": "data-collapse"
1374
1407
  }
1375
1408
  },
1376
1409
  "inlineStyles": {
@@ -1385,29 +1418,48 @@
1385
1418
  "dataRune": "bento-cell",
1386
1419
  "parent": "Bento",
1387
1420
  "childOrder": [
1421
+ "media",
1422
+ "content",
1388
1423
  "{content}"
1389
1424
  ],
1390
1425
  "modifiers": {
1391
1426
  "size": {
1392
1427
  "source": "meta",
1393
1428
  "default": "medium",
1394
- "classPattern": ".rf-bento-cell--{value}",
1395
1429
  "dataAttribute": "data-size"
1396
1430
  },
1397
- "span": {
1431
+ "cols": {
1432
+ "source": "meta",
1433
+ "dataAttribute": "data-cols"
1434
+ },
1435
+ "rows": {
1436
+ "source": "meta",
1437
+ "dataAttribute": "data-rows"
1438
+ },
1439
+ "content-height": {
1398
1440
  "source": "meta",
1399
- "dataAttribute": "data-span"
1441
+ "dataAttribute": "data-content-height"
1442
+ },
1443
+ "media-ratio": {
1444
+ "source": "meta",
1445
+ "dataAttribute": "data-media-ratio"
1400
1446
  }
1401
1447
  },
1402
1448
  "elements": {
1403
- "title": {
1404
- "tag": "name",
1405
- "selector": ".rf-bento-cell__title",
1406
- "source": "autoLabel"
1449
+ "content": {
1450
+ "tag": "div",
1451
+ "selector": ".rf-bento-cell__content",
1452
+ "source": "layout",
1453
+ "children": [
1454
+ "title",
1455
+ "body",
1456
+ "footer"
1457
+ ]
1407
1458
  }
1408
1459
  },
1409
1460
  "inlineStyles": {
1410
- "span": "--cell-span"
1461
+ "cols": "--cell-cols",
1462
+ "rows": "--cell-rows"
1411
1463
  }
1412
1464
  },
1413
1465
  "Feature": {
@@ -1418,11 +1470,10 @@
1418
1470
  "{content}"
1419
1471
  ],
1420
1472
  "modifiers": {
1421
- "layout": {
1473
+ "media-position": {
1422
1474
  "source": "meta",
1423
- "default": "stacked",
1424
- "classPattern": ".rf-feature--{value}",
1425
- "dataAttribute": "data-layout"
1475
+ "default": "top",
1476
+ "dataAttribute": "data-media-position"
1426
1477
  },
1427
1478
  "align": {
1428
1479
  "source": "meta",
@@ -1430,21 +1481,14 @@
1430
1481
  "classPattern": ".rf-feature--{value}",
1431
1482
  "dataAttribute": "data-align"
1432
1483
  },
1433
- "ratio": {
1484
+ "media-ratio": {
1434
1485
  "source": "meta",
1435
- "default": "1 1",
1436
- "dataAttribute": "data-ratio"
1486
+ "dataAttribute": "data-media-ratio"
1437
1487
  },
1438
1488
  "valign": {
1439
1489
  "source": "meta",
1440
- "default": "top",
1441
1490
  "dataAttribute": "data-valign"
1442
1491
  },
1443
- "gap": {
1444
- "source": "meta",
1445
- "default": "default",
1446
- "dataAttribute": "data-gap"
1447
- },
1448
1492
  "collapse": {
1449
1493
  "source": "meta",
1450
1494
  "dataAttribute": "data-collapse"
@@ -1493,14 +1537,184 @@
1493
1537
  }
1494
1538
  },
1495
1539
  "inlineStyles": {
1496
- "ratio": {
1497
- "prop": "--split-ratio"
1498
- },
1499
1540
  "valign": {
1500
1541
  "prop": "--split-valign"
1501
- },
1502
- "gap": {
1503
- "prop": "--split-gap"
1542
+ }
1543
+ },
1544
+ "variants": {
1545
+ "media-position": {
1546
+ "top": {
1547
+ "block": "feature",
1548
+ "root": ".rf-feature",
1549
+ "dataRune": "feature",
1550
+ "childOrder": [
1551
+ "{content}"
1552
+ ],
1553
+ "modifiers": {
1554
+ "media-position": {
1555
+ "source": "meta",
1556
+ "default": "top",
1557
+ "dataAttribute": "data-media-position"
1558
+ },
1559
+ "align": {
1560
+ "source": "meta",
1561
+ "default": "center",
1562
+ "classPattern": ".rf-feature--{value}",
1563
+ "dataAttribute": "data-align"
1564
+ },
1565
+ "media-ratio": {
1566
+ "source": "meta",
1567
+ "dataAttribute": "data-media-ratio"
1568
+ },
1569
+ "valign": {
1570
+ "source": "meta",
1571
+ "dataAttribute": "data-valign"
1572
+ },
1573
+ "collapse": {
1574
+ "source": "meta",
1575
+ "dataAttribute": "data-collapse"
1576
+ }
1577
+ },
1578
+ "contextModifiers": {
1579
+ "hero": {
1580
+ "suffix": "in-hero",
1581
+ "selector": ".rf-feature--in-hero"
1582
+ },
1583
+ "grid": {
1584
+ "suffix": "in-grid",
1585
+ "selector": ".rf-feature--in-grid"
1586
+ }
1587
+ },
1588
+ "staticModifiers": [
1589
+ {
1590
+ "name": "definitions-grid",
1591
+ "selector": ".rf-feature--definitions-grid"
1592
+ }
1593
+ ],
1594
+ "elements": {
1595
+ "preamble": {
1596
+ "tag": "header",
1597
+ "selector": ".rf-feature__preamble",
1598
+ "source": "autoLabel"
1599
+ },
1600
+ "eyebrow": {
1601
+ "tag": "eyebrow",
1602
+ "selector": ".rf-feature__eyebrow",
1603
+ "source": "autoLabel"
1604
+ },
1605
+ "headline": {
1606
+ "tag": "headline",
1607
+ "selector": ".rf-feature__headline",
1608
+ "source": "autoLabel"
1609
+ },
1610
+ "blurb": {
1611
+ "tag": "blurb",
1612
+ "selector": ".rf-feature__blurb",
1613
+ "source": "autoLabel"
1614
+ },
1615
+ "image": {
1616
+ "tag": "image",
1617
+ "selector": ".rf-feature__image",
1618
+ "source": "autoLabel"
1619
+ },
1620
+ "definitions": {
1621
+ "tag": "dl",
1622
+ "selector": ".rf-feature__definitions",
1623
+ "source": "autoLabel"
1624
+ }
1625
+ },
1626
+ "inlineStyles": {
1627
+ "valign": {
1628
+ "prop": "--split-valign"
1629
+ }
1630
+ }
1631
+ },
1632
+ "bottom": {
1633
+ "block": "feature",
1634
+ "root": ".rf-feature",
1635
+ "dataRune": "feature",
1636
+ "childOrder": [
1637
+ "{content}"
1638
+ ],
1639
+ "modifiers": {
1640
+ "media-position": {
1641
+ "source": "meta",
1642
+ "default": "top",
1643
+ "dataAttribute": "data-media-position"
1644
+ },
1645
+ "align": {
1646
+ "source": "meta",
1647
+ "default": "center",
1648
+ "classPattern": ".rf-feature--{value}",
1649
+ "dataAttribute": "data-align"
1650
+ },
1651
+ "media-ratio": {
1652
+ "source": "meta",
1653
+ "dataAttribute": "data-media-ratio"
1654
+ },
1655
+ "valign": {
1656
+ "source": "meta",
1657
+ "dataAttribute": "data-valign"
1658
+ },
1659
+ "collapse": {
1660
+ "source": "meta",
1661
+ "dataAttribute": "data-collapse"
1662
+ }
1663
+ },
1664
+ "contextModifiers": {
1665
+ "hero": {
1666
+ "suffix": "in-hero",
1667
+ "selector": ".rf-feature--in-hero"
1668
+ },
1669
+ "grid": {
1670
+ "suffix": "in-grid",
1671
+ "selector": ".rf-feature--in-grid"
1672
+ }
1673
+ },
1674
+ "staticModifiers": [
1675
+ {
1676
+ "name": "definitions-grid",
1677
+ "selector": ".rf-feature--definitions-grid"
1678
+ }
1679
+ ],
1680
+ "elements": {
1681
+ "preamble": {
1682
+ "tag": "header",
1683
+ "selector": ".rf-feature__preamble",
1684
+ "source": "autoLabel"
1685
+ },
1686
+ "eyebrow": {
1687
+ "tag": "eyebrow",
1688
+ "selector": ".rf-feature__eyebrow",
1689
+ "source": "autoLabel"
1690
+ },
1691
+ "headline": {
1692
+ "tag": "headline",
1693
+ "selector": ".rf-feature__headline",
1694
+ "source": "autoLabel"
1695
+ },
1696
+ "blurb": {
1697
+ "tag": "blurb",
1698
+ "selector": ".rf-feature__blurb",
1699
+ "source": "autoLabel"
1700
+ },
1701
+ "image": {
1702
+ "tag": "image",
1703
+ "selector": ".rf-feature__image",
1704
+ "source": "autoLabel"
1705
+ },
1706
+ "definitions": {
1707
+ "tag": "dl",
1708
+ "selector": ".rf-feature__definitions",
1709
+ "source": "autoLabel"
1710
+ }
1711
+ },
1712
+ "inlineStyles": {
1713
+ "valign": {
1714
+ "prop": "--split-valign"
1715
+ }
1716
+ }
1717
+ }
1504
1718
  }
1505
1719
  }
1506
1720
  },
@@ -1557,41 +1771,27 @@
1557
1771
  "{content}"
1558
1772
  ],
1559
1773
  "modifiers": {
1560
- "layout": {
1774
+ "media-position": {
1561
1775
  "source": "meta",
1562
- "default": "stacked",
1563
- "classPattern": ".rf-step--{value}",
1564
- "dataAttribute": "data-layout"
1776
+ "default": "top",
1777
+ "dataAttribute": "data-media-position"
1565
1778
  },
1566
- "ratio": {
1779
+ "media-ratio": {
1567
1780
  "source": "meta",
1568
- "default": "1 1",
1569
- "dataAttribute": "data-ratio"
1781
+ "dataAttribute": "data-media-ratio"
1570
1782
  },
1571
1783
  "valign": {
1572
1784
  "source": "meta",
1573
- "default": "top",
1574
1785
  "dataAttribute": "data-valign"
1575
1786
  },
1576
- "gap": {
1577
- "source": "meta",
1578
- "default": "default",
1579
- "dataAttribute": "data-gap"
1580
- },
1581
1787
  "collapse": {
1582
1788
  "source": "meta",
1583
1789
  "dataAttribute": "data-collapse"
1584
1790
  }
1585
1791
  },
1586
1792
  "inlineStyles": {
1587
- "ratio": {
1588
- "prop": "--split-ratio"
1589
- },
1590
1793
  "valign": {
1591
1794
  "prop": "--split-valign"
1592
- },
1593
- "gap": {
1594
- "prop": "--split-gap"
1595
1795
  }
1596
1796
  }
1597
1797
  },
@@ -2045,27 +2245,19 @@
2045
2245
  "classPattern": ".rf-realm--{value}",
2046
2246
  "dataAttribute": "data-parent"
2047
2247
  },
2048
- "layout": {
2248
+ "media-position": {
2049
2249
  "source": "meta",
2050
- "default": "stacked",
2051
- "classPattern": ".rf-realm--{value}",
2052
- "dataAttribute": "data-layout"
2250
+ "default": "top",
2251
+ "dataAttribute": "data-media-position"
2053
2252
  },
2054
- "ratio": {
2253
+ "media-ratio": {
2055
2254
  "source": "meta",
2056
- "default": "1 1",
2057
- "dataAttribute": "data-ratio"
2255
+ "dataAttribute": "data-media-ratio"
2058
2256
  },
2059
2257
  "valign": {
2060
2258
  "source": "meta",
2061
- "default": "top",
2062
2259
  "dataAttribute": "data-valign"
2063
2260
  },
2064
- "gap": {
2065
- "source": "meta",
2066
- "default": "default",
2067
- "dataAttribute": "data-gap"
2068
- },
2069
2261
  "collapse": {
2070
2262
  "source": "meta",
2071
2263
  "dataAttribute": "data-collapse"
@@ -2108,14 +2300,8 @@
2108
2300
  }
2109
2301
  },
2110
2302
  "inlineStyles": {
2111
- "ratio": {
2112
- "prop": "--split-ratio"
2113
- },
2114
2303
  "valign": {
2115
2304
  "prop": "--split-valign"
2116
- },
2117
- "gap": {
2118
- "prop": "--split-gap"
2119
2305
  }
2120
2306
  }
2121
2307
  },
@@ -2205,27 +2391,19 @@
2205
2391
  "classPattern": ".rf-faction--{value}",
2206
2392
  "dataAttribute": "data-tags"
2207
2393
  },
2208
- "layout": {
2394
+ "media-position": {
2209
2395
  "source": "meta",
2210
- "default": "stacked",
2211
- "classPattern": ".rf-faction--{value}",
2212
- "dataAttribute": "data-layout"
2396
+ "default": "top",
2397
+ "dataAttribute": "data-media-position"
2213
2398
  },
2214
- "ratio": {
2399
+ "media-ratio": {
2215
2400
  "source": "meta",
2216
- "default": "1 1",
2217
- "dataAttribute": "data-ratio"
2401
+ "dataAttribute": "data-media-ratio"
2218
2402
  },
2219
2403
  "valign": {
2220
2404
  "source": "meta",
2221
- "default": "top",
2222
2405
  "dataAttribute": "data-valign"
2223
2406
  },
2224
- "gap": {
2225
- "source": "meta",
2226
- "default": "default",
2227
- "dataAttribute": "data-gap"
2228
- },
2229
2407
  "collapse": {
2230
2408
  "source": "meta",
2231
2409
  "dataAttribute": "data-collapse"
@@ -2269,14 +2447,8 @@
2269
2447
  }
2270
2448
  },
2271
2449
  "inlineStyles": {
2272
- "ratio": {
2273
- "prop": "--split-ratio"
2274
- },
2275
2450
  "valign": {
2276
2451
  "prop": "--split-valign"
2277
- },
2278
- "gap": {
2279
- "prop": "--split-gap"
2280
2452
  }
2281
2453
  }
2282
2454
  },
@@ -3110,11 +3282,10 @@
3110
3282
  "{content}"
3111
3283
  ],
3112
3284
  "modifiers": {
3113
- "layout": {
3285
+ "media-position": {
3114
3286
  "source": "meta",
3115
- "default": "stacked",
3116
- "classPattern": ".rf-recipe--{value}",
3117
- "dataAttribute": "data-layout"
3287
+ "default": "top",
3288
+ "dataAttribute": "data-media-position"
3118
3289
  },
3119
3290
  "prepTime": {
3120
3291
  "source": "meta",
@@ -3134,24 +3305,21 @@
3134
3305
  "classPattern": ".rf-recipe--{value}",
3135
3306
  "dataAttribute": "data-difficulty"
3136
3307
  },
3137
- "ratio": {
3308
+ "media-ratio": {
3138
3309
  "source": "meta",
3139
- "default": "1 1",
3140
- "dataAttribute": "data-ratio"
3310
+ "dataAttribute": "data-media-ratio"
3141
3311
  },
3142
3312
  "valign": {
3143
3313
  "source": "meta",
3144
- "default": "top",
3145
3314
  "dataAttribute": "data-valign"
3146
3315
  },
3147
- "gap": {
3148
- "source": "meta",
3149
- "default": "default",
3150
- "dataAttribute": "data-gap"
3151
- },
3152
3316
  "collapse": {
3153
3317
  "source": "meta",
3154
3318
  "dataAttribute": "data-collapse"
3319
+ },
3320
+ "content-place": {
3321
+ "source": "meta",
3322
+ "dataAttribute": "data-content-place"
3155
3323
  }
3156
3324
  },
3157
3325
  "elements": {
@@ -3216,14 +3384,146 @@
3216
3384
  }
3217
3385
  },
3218
3386
  "inlineStyles": {
3219
- "ratio": {
3220
- "prop": "--split-ratio"
3221
- },
3222
3387
  "valign": {
3223
3388
  "prop": "--split-valign"
3224
- },
3225
- "gap": {
3226
- "prop": "--split-gap"
3389
+ }
3390
+ },
3391
+ "variants": {
3392
+ "media-position": {
3393
+ "cover": {
3394
+ "block": "recipe",
3395
+ "root": ".rf-recipe",
3396
+ "dataRune": "recipe",
3397
+ "childOrder": [
3398
+ "cover-band",
3399
+ "content",
3400
+ "{content}"
3401
+ ],
3402
+ "modifiers": {
3403
+ "media-position": {
3404
+ "source": "meta",
3405
+ "default": "top",
3406
+ "dataAttribute": "data-media-position"
3407
+ },
3408
+ "prepTime": {
3409
+ "source": "meta",
3410
+ "dataAttribute": "data-prep-time"
3411
+ },
3412
+ "cookTime": {
3413
+ "source": "meta",
3414
+ "dataAttribute": "data-cook-time"
3415
+ },
3416
+ "servings": {
3417
+ "source": "meta",
3418
+ "dataAttribute": "data-servings"
3419
+ },
3420
+ "difficulty": {
3421
+ "source": "meta",
3422
+ "default": "medium",
3423
+ "classPattern": ".rf-recipe--{value}",
3424
+ "dataAttribute": "data-difficulty"
3425
+ },
3426
+ "media-ratio": {
3427
+ "source": "meta",
3428
+ "dataAttribute": "data-media-ratio"
3429
+ },
3430
+ "valign": {
3431
+ "source": "meta",
3432
+ "dataAttribute": "data-valign"
3433
+ },
3434
+ "collapse": {
3435
+ "source": "meta",
3436
+ "dataAttribute": "data-collapse"
3437
+ },
3438
+ "content-place": {
3439
+ "source": "meta",
3440
+ "dataAttribute": "data-content-place"
3441
+ }
3442
+ },
3443
+ "staticModifiers": [
3444
+ {
3445
+ "name": "cover",
3446
+ "selector": ".rf-recipe--cover"
3447
+ }
3448
+ ],
3449
+ "elements": {
3450
+ "metadata": {
3451
+ "tag": "dl",
3452
+ "selector": ".rf-recipe__metadata",
3453
+ "source": "block",
3454
+ "layout": "definition-list",
3455
+ "fields": [
3456
+ "prepTime",
3457
+ "cookTime",
3458
+ "servings",
3459
+ "difficulty"
3460
+ ]
3461
+ },
3462
+ "preamble": {
3463
+ "tag": "header",
3464
+ "selector": ".rf-recipe__preamble",
3465
+ "source": "layout",
3466
+ "children": [
3467
+ "eyebrow",
3468
+ "headline",
3469
+ "blurb"
3470
+ ]
3471
+ },
3472
+ "eyebrow": {
3473
+ "tag": "eyebrow",
3474
+ "selector": ".rf-recipe__eyebrow",
3475
+ "source": "autoLabel"
3476
+ },
3477
+ "headline": {
3478
+ "tag": "headline",
3479
+ "selector": ".rf-recipe__headline",
3480
+ "source": "autoLabel"
3481
+ },
3482
+ "blurb": {
3483
+ "tag": "blurb",
3484
+ "selector": ".rf-recipe__blurb",
3485
+ "source": "autoLabel"
3486
+ },
3487
+ "image": {
3488
+ "tag": "image",
3489
+ "selector": ".rf-recipe__image",
3490
+ "source": "autoLabel"
3491
+ },
3492
+ "media": {
3493
+ "tag": "media",
3494
+ "selector": ".rf-recipe__media",
3495
+ "source": "autoLabel"
3496
+ },
3497
+ "content": {
3498
+ "tag": "div",
3499
+ "selector": ".rf-recipe__content",
3500
+ "source": "layout",
3501
+ "children": [
3502
+ "metadata",
3503
+ "ingredients",
3504
+ "steps",
3505
+ "tips"
3506
+ ]
3507
+ },
3508
+ "cover-band": {
3509
+ "tag": "div",
3510
+ "selector": ".rf-recipe__cover-band",
3511
+ "source": "layout",
3512
+ "children": [
3513
+ "media",
3514
+ "preamble"
3515
+ ],
3516
+ "attrs": {
3517
+ "data-color-scheme": "dark"
3518
+ }
3519
+ }
3520
+ },
3521
+ "inlineStyles": {
3522
+ "valign": {
3523
+ "prop": "--split-valign"
3524
+ }
3525
+ }
3526
+ }
3227
3527
  }
3228
3528
  }
3229
3529
  },
@@ -3252,27 +3552,19 @@
3252
3552
  "classPattern": ".rf-playlist--{value}",
3253
3553
  "dataAttribute": "data-type"
3254
3554
  },
3255
- "layout": {
3555
+ "media-position": {
3256
3556
  "source": "meta",
3257
- "default": "stacked",
3258
- "classPattern": ".rf-playlist--{value}",
3259
- "dataAttribute": "data-layout"
3557
+ "default": "top",
3558
+ "dataAttribute": "data-media-position"
3260
3559
  },
3261
- "ratio": {
3560
+ "media-ratio": {
3262
3561
  "source": "meta",
3263
- "default": "1 1",
3264
- "dataAttribute": "data-ratio"
3562
+ "dataAttribute": "data-media-ratio"
3265
3563
  },
3266
3564
  "valign": {
3267
3565
  "source": "meta",
3268
- "default": "top",
3269
3566
  "dataAttribute": "data-valign"
3270
3567
  },
3271
- "gap": {
3272
- "source": "meta",
3273
- "default": "default",
3274
- "dataAttribute": "data-gap"
3275
- },
3276
3568
  "collapse": {
3277
3569
  "source": "meta",
3278
3570
  "dataAttribute": "data-collapse"
@@ -3340,14 +3632,8 @@
3340
3632
  }
3341
3633
  },
3342
3634
  "inlineStyles": {
3343
- "ratio": {
3344
- "prop": "--split-ratio"
3345
- },
3346
3635
  "valign": {
3347
3636
  "prop": "--split-valign"
3348
- },
3349
- "gap": {
3350
- "prop": "--split-gap"
3351
3637
  }
3352
3638
  }
3353
3639
  },