@refrakt-md/skeleton 0.32.0 → 0.34.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 (69) hide show
  1. package/index.css +102 -102
  2. package/package.json +2 -2
  3. package/styles/dimensions/checklist.css +1 -1
  4. package/styles/dimensions/cover.css +12 -3
  5. package/styles/dimensions/guest-posture.css +2 -1
  6. package/styles/dimensions/metadata.css +12 -4
  7. package/styles/dimensions/sequence.css +1 -1
  8. package/styles/global.css +52 -12
  9. package/styles/layouts/blog.css +89 -25
  10. package/styles/layouts/default.css +63 -18
  11. package/styles/layouts/docs.css +111 -29
  12. package/styles/layouts/mobile.css +24 -8
  13. package/styles/layouts/on-this-page.css +6 -2
  14. package/styles/layouts/plan.css +108 -32
  15. package/styles/layouts/search.css +27 -9
  16. package/styles/layouts/split.css +45 -13
  17. package/styles/runes/accordion.css +25 -9
  18. package/styles/runes/annotate.css +9 -3
  19. package/styles/runes/audio.css +3 -1
  20. package/styles/runes/bento.css +151 -40
  21. package/styles/runes/bond.css +2 -2
  22. package/styles/runes/breadcrumb.css +6 -2
  23. package/styles/runes/budget.css +3 -1
  24. package/styles/runes/card.css +32 -10
  25. package/styles/runes/cast.css +12 -4
  26. package/styles/runes/changelog.css +12 -4
  27. package/styles/runes/character.css +3 -1
  28. package/styles/runes/chart.css +10 -3
  29. package/styles/runes/codegroup.css +6 -2
  30. package/styles/runes/collection.css +7 -7
  31. package/styles/runes/compare.css +3 -1
  32. package/styles/runes/comparison.css +33 -11
  33. package/styles/runes/conversation.css +6 -2
  34. package/styles/runes/cta.css +1 -1
  35. package/styles/runes/details.css +7 -2
  36. package/styles/runes/drawer.css +4 -20
  37. package/styles/runes/feature.css +1 -1
  38. package/styles/runes/figure.css +22 -7
  39. package/styles/runes/file-ref.css +3 -1
  40. package/styles/runes/form.css +3 -1
  41. package/styles/runes/gallery.css +3 -1
  42. package/styles/runes/grid.css +57 -19
  43. package/styles/runes/hero.css +20 -7
  44. package/styles/runes/hint.css +20 -6
  45. package/styles/runes/itinerary.css +25 -9
  46. package/styles/runes/juxtapose.css +15 -5
  47. package/styles/runes/lore.css +6 -2
  48. package/styles/runes/map.css +16 -5
  49. package/styles/runes/mediatext.css +28 -10
  50. package/styles/runes/milestone.css +1 -1
  51. package/styles/runes/mockup.css +5 -2
  52. package/styles/runes/nav.css +10 -4
  53. package/styles/runes/plan-history.css +13 -5
  54. package/styles/runes/plot.css +14 -5
  55. package/styles/runes/preview.css +18 -6
  56. package/styles/runes/pricing.css +7 -3
  57. package/styles/runes/pullquote.css +12 -4
  58. package/styles/runes/relationships.css +7 -7
  59. package/styles/runes/reveal.css +4 -2
  60. package/styles/runes/sandbox.css +6 -2
  61. package/styles/runes/section.css +1 -1
  62. package/styles/runes/showcase.css +6 -2
  63. package/styles/runes/steps.css +16 -6
  64. package/styles/runes/storyboard.css +15 -5
  65. package/styles/runes/symbol.css +9 -3
  66. package/styles/runes/tabs.css +1 -1
  67. package/styles/runes/testimonial.css +6 -2
  68. package/styles/runes/textblock.css +9 -3
  69. package/styles/runes/timeline.css +14 -6
@@ -20,15 +20,29 @@
20
20
  grid-template-columns: 1fr var(--media-share, 50%);
21
21
  }
22
22
  [data-media-position="end"] > [data-section="media"],
23
- [data-media-position="end"] > [data-name="media"] { grid-column: 2; }
24
- [data-media-position="end"] > [data-name="content"] { grid-column: 1; }
23
+ [data-media-position="end"] > [data-name="media"] {
24
+ grid-column: 2;
25
+ }
26
+ [data-media-position="end"] > [data-name="content"] {
27
+ grid-column: 1;
28
+ }
25
29
 
26
30
  /* `media-ratio` → media's share of the row width. */
27
- [data-media-ratio="1/3"] { --media-share: 33.333%; }
28
- [data-media-ratio="2/5"] { --media-share: 40%; }
29
- [data-media-ratio="1/2"] { --media-share: 50%; }
30
- [data-media-ratio="3/5"] { --media-share: 60%; }
31
- [data-media-ratio="2/3"] { --media-share: 66.667%; }
31
+ [data-media-ratio="1/3"] {
32
+ --media-share: 33.333%;
33
+ }
34
+ [data-media-ratio="2/5"] {
35
+ --media-share: 40%;
36
+ }
37
+ [data-media-ratio="1/2"] {
38
+ --media-share: 50%;
39
+ }
40
+ [data-media-ratio="3/5"] {
41
+ --media-share: 60%;
42
+ }
43
+ [data-media-ratio="2/3"] {
44
+ --media-share: 66.667%;
45
+ }
32
46
 
33
47
  /* Grid so children can use justify-self/align-self (default: stretch). */
34
48
  [data-media-position="start"] > [data-name="media"],
@@ -47,13 +61,31 @@
47
61
  }
48
62
 
49
63
  /* ─── 3-section grid placement (header + content + media) ─── */
50
- [data-media-position="start"]:has(> [data-section="header"]) > [data-section="header"] { grid-column: 1; grid-row: 1; }
51
- [data-media-position="start"]:has(> [data-section="header"]) > [data-name="content"] { grid-column: 1; grid-row: 2; }
52
- [data-media-position="start"]:has(> [data-section="header"]) > [data-section="media"] { grid-column: 2; grid-row: 1 / 3; }
64
+ [data-media-position="start"]:has(> [data-section="header"]) > [data-section="header"] {
65
+ grid-column: 1;
66
+ grid-row: 1;
67
+ }
68
+ [data-media-position="start"]:has(> [data-section="header"]) > [data-name="content"] {
69
+ grid-column: 1;
70
+ grid-row: 2;
71
+ }
72
+ [data-media-position="start"]:has(> [data-section="header"]) > [data-section="media"] {
73
+ grid-column: 2;
74
+ grid-row: 1 / 3;
75
+ }
53
76
 
54
- [data-media-position="end"]:has(> [data-section="header"]) > [data-section="header"] { grid-column: 2; grid-row: 1; }
55
- [data-media-position="end"]:has(> [data-section="header"]) > [data-name="content"] { grid-column: 2; grid-row: 2; }
56
- [data-media-position="end"]:has(> [data-section="header"]) > [data-section="media"] { grid-column: 1; grid-row: 1 / 3; }
77
+ [data-media-position="end"]:has(> [data-section="header"]) > [data-section="header"] {
78
+ grid-column: 2;
79
+ grid-row: 1;
80
+ }
81
+ [data-media-position="end"]:has(> [data-section="header"]) > [data-name="content"] {
82
+ grid-column: 2;
83
+ grid-row: 2;
84
+ }
85
+ [data-media-position="end"]:has(> [data-section="header"]) > [data-section="media"] {
86
+ grid-column: 1;
87
+ grid-row: 1 / 3;
88
+ }
57
89
 
58
90
  [data-media-position="start"]:has(> [data-section="header"]) > [data-section="media"],
59
91
  [data-media-position="end"]:has(> [data-section="header"]) > [data-section="media"] {
@@ -10,21 +10,28 @@
10
10
  position: relative;
11
11
  }
12
12
  .rf-accordion__eyebrow:has(a) a::before {
13
- content: '';
13
+ content: "";
14
14
  position: absolute;
15
15
  inset: 0;
16
16
  }
17
- .rf-accordion__items { display: contents; }
17
+ .rf-accordion__items {
18
+ display: contents;
19
+ }
18
20
 
19
21
  .rf-accordion-item__header {
20
22
  display: flex;
21
23
  align-items: center;
22
24
  list-style: none;
23
25
  }
24
- .rf-accordion-item__header::-webkit-details-marker { display: none; }
25
- .rf-accordion-item__header::marker { display: none; content: ''; }
26
+ .rf-accordion-item__header::-webkit-details-marker {
27
+ display: none;
28
+ }
29
+ .rf-accordion-item__header::marker {
30
+ display: none;
31
+ content: "";
32
+ }
26
33
  .rf-accordion-item__header::before {
27
- content: '';
34
+ content: "";
28
35
  flex-shrink: 0;
29
36
  width: 0.75rem;
30
37
  height: 0.75rem;
@@ -37,16 +44,25 @@
37
44
  .rf-accordion-item[open] .rf-accordion-item__header::before {
38
45
  transform: rotate(90deg);
39
46
  }
40
- .rf-accordion-item__title { flex: 1; min-width: 0; }
41
- .rf-accordion-item__count { flex-shrink: 0; }
47
+ .rf-accordion-item__title {
48
+ flex: 1;
49
+ min-width: 0;
50
+ }
51
+ .rf-accordion-item__count {
52
+ flex-shrink: 0;
53
+ }
42
54
 
43
55
  /* Collapse / expand mechanism. */
44
- .rf-accordion-item { interpolate-size: allow-keywords; }
56
+ .rf-accordion-item {
57
+ interpolate-size: allow-keywords;
58
+ }
45
59
  .rf-accordion-item::details-content {
46
60
  block-size: 0;
47
61
  overflow: hidden;
48
62
  }
49
- .rf-accordion-item[open]::details-content { block-size: auto; }
63
+ .rf-accordion-item[open]::details-content {
64
+ block-size: auto;
65
+ }
50
66
 
51
67
  /* Block-content panels switch to a flex column (gap is skin). */
52
68
  .rf-accordion-item__body:has([data-block]) {
@@ -3,7 +3,9 @@
3
3
  * hide. Type, colour, borders, spacing, and the `?` glyph stay skin (Lumina's
4
4
  * styles/runes/annotate.css). */
5
5
 
6
- .rf-annotate__body { display: contents; }
6
+ .rf-annotate__body {
7
+ display: contents;
8
+ }
7
9
 
8
10
  /* Margin style — float the note into the margin. */
9
11
  .rf-annotate--margin .rf-annotate-note {
@@ -13,7 +15,9 @@
13
15
  }
14
16
 
15
17
  /* Inline style */
16
- .rf-annotate--inline p { display: inline; }
18
+ .rf-annotate--inline p {
19
+ display: inline;
20
+ }
17
21
  .rf-annotate--inline .rf-annotate-note {
18
22
  display: inline-block;
19
23
  vertical-align: baseline;
@@ -45,7 +49,9 @@
45
49
  display: block;
46
50
  }
47
51
  .rf-annotate-note__body > span[property],
48
- .rf-annotate-note__body > meta { display: none; }
52
+ .rf-annotate-note__body > meta {
53
+ display: none;
54
+ }
49
55
 
50
56
  @media (max-width: 768px) {
51
57
  .rf-annotate--margin .rf-annotate-note {
@@ -4,7 +4,9 @@
4
4
  * waveform box, the waveform-mode progress hide, the chapters list reset, and the
5
5
  * chapter row flex. Surface, colours, radii, borders, type, and focus chrome are
6
6
  * skin. */
7
- .rf-audio rf-audio { display: block; }
7
+ .rf-audio rf-audio {
8
+ display: block;
9
+ }
8
10
  .rf-audio-player {
9
11
  display: flex;
10
12
  flex-direction: column;
@@ -14,26 +14,68 @@
14
14
  --bento-cols-effective: var(--bento-columns, 6);
15
15
  display: grid;
16
16
  grid-template-columns: repeat(var(--bento-cols-effective), 1fr);
17
- grid-auto-rows: var(--bento-row-track, var(--bento-row-height, var(--rf-bento-row-height, 24rem)));
17
+ grid-auto-rows: var(
18
+ --bento-row-track,
19
+ var(--bento-row-height, var(--rf-bento-row-height, 24rem))
20
+ );
18
21
  }
19
22
 
20
23
  /* Author row-height presets — the uniform grid row track height (grid mode). */
21
- .rf-bento[data-row-height="sm"] { --bento-row-height: 16rem; }
22
- .rf-bento[data-row-height="md"] { --bento-row-height: 24rem; }
23
- .rf-bento[data-row-height="lg"] { --bento-row-height: 32rem; }
24
- .rf-bento[data-row-height="xl"] { --bento-row-height: 40rem; }
24
+ .rf-bento[data-row-height="sm"] {
25
+ --bento-row-height: 16rem;
26
+ }
27
+ .rf-bento[data-row-height="md"] {
28
+ --bento-row-height: 24rem;
29
+ }
30
+ .rf-bento[data-row-height="lg"] {
31
+ --bento-row-height: 32rem;
32
+ }
33
+ .rf-bento[data-row-height="xl"] {
34
+ --bento-row-height: 40rem;
35
+ }
25
36
 
26
37
  /* content-height / media-ratio — perpendicular text-zone sizing knobs. */
27
- .rf-bento[data-content-height="sm"], .rf-bento-cell[data-content-height="sm"] { --cell-content-height: 6rem; --cell-content-overflow: hidden; }
28
- .rf-bento[data-content-height="md"], .rf-bento-cell[data-content-height="md"] { --cell-content-height: 10rem; --cell-content-overflow: hidden; }
29
- .rf-bento[data-content-height="lg"], .rf-bento-cell[data-content-height="lg"] { --cell-content-height: 14rem; --cell-content-overflow: hidden; }
30
- .rf-bento[data-content-height="xl"], .rf-bento-cell[data-content-height="xl"] { --cell-content-height: 18rem; --cell-content-overflow: hidden; }
38
+ .rf-bento[data-content-height="sm"],
39
+ .rf-bento-cell[data-content-height="sm"] {
40
+ --cell-content-height: 6rem;
41
+ --cell-content-overflow: hidden;
42
+ }
43
+ .rf-bento[data-content-height="md"],
44
+ .rf-bento-cell[data-content-height="md"] {
45
+ --cell-content-height: 10rem;
46
+ --cell-content-overflow: hidden;
47
+ }
48
+ .rf-bento[data-content-height="lg"],
49
+ .rf-bento-cell[data-content-height="lg"] {
50
+ --cell-content-height: 14rem;
51
+ --cell-content-overflow: hidden;
52
+ }
53
+ .rf-bento[data-content-height="xl"],
54
+ .rf-bento-cell[data-content-height="xl"] {
55
+ --cell-content-height: 18rem;
56
+ --cell-content-overflow: hidden;
57
+ }
31
58
 
32
- .rf-bento[data-media-ratio="1/3"], .rf-bento-cell[data-media-ratio="1/3"] { --cell-media-ratio: 33.333%; }
33
- .rf-bento[data-media-ratio="2/5"], .rf-bento-cell[data-media-ratio="2/5"] { --cell-media-ratio: 40%; }
34
- .rf-bento[data-media-ratio="1/2"], .rf-bento-cell[data-media-ratio="1/2"] { --cell-media-ratio: 50%; }
35
- .rf-bento[data-media-ratio="3/5"], .rf-bento-cell[data-media-ratio="3/5"] { --cell-media-ratio: 60%; }
36
- .rf-bento[data-media-ratio="2/3"], .rf-bento-cell[data-media-ratio="2/3"] { --cell-media-ratio: 66.667%; }
59
+ .rf-bento[data-media-ratio="1/3"],
60
+ .rf-bento-cell[data-media-ratio="1/3"] {
61
+ --cell-media-ratio: 33.333%;
62
+ }
63
+ .rf-bento[data-media-ratio="2/5"],
64
+ .rf-bento-cell[data-media-ratio="2/5"] {
65
+ --cell-media-ratio: 40%;
66
+ }
67
+ .rf-bento[data-media-ratio="1/2"],
68
+ .rf-bento-cell[data-media-ratio="1/2"] {
69
+ --cell-media-ratio: 50%;
70
+ }
71
+ .rf-bento[data-media-ratio="3/5"],
72
+ .rf-bento-cell[data-media-ratio="3/5"] {
73
+ --cell-media-ratio: 60%;
74
+ }
75
+ .rf-bento[data-media-ratio="2/3"],
76
+ .rf-bento-cell[data-media-ratio="2/3"] {
77
+ --cell-media-ratio: 66.667%;
78
+ }
37
79
 
38
80
  .rf-bento-cell[data-media-position="top"] > .rf-bento-cell__content,
39
81
  .rf-bento-cell[data-media-position="bottom"] > .rf-bento-cell__content {
@@ -58,16 +100,27 @@
58
100
  }
59
101
 
60
102
  /* Media placement (data-media-position). */
61
- .rf-bento-cell[data-media-position="bottom"] { flex-direction: column-reverse; }
62
- .rf-bento-cell[data-media-position="start"] { flex-direction: row; align-items: stretch; }
63
- .rf-bento-cell[data-media-position="end"] { flex-direction: row-reverse; align-items: stretch; }
103
+ .rf-bento-cell[data-media-position="bottom"] {
104
+ flex-direction: column-reverse;
105
+ }
106
+ .rf-bento-cell[data-media-position="start"] {
107
+ flex-direction: row;
108
+ align-items: stretch;
109
+ }
110
+ .rf-bento-cell[data-media-position="end"] {
111
+ flex-direction: row-reverse;
112
+ align-items: stretch;
113
+ }
64
114
  .rf-bento-cell[data-media-position="start"] > .rf-bento-cell__media,
65
115
  .rf-bento-cell[data-media-position="end"] > .rf-bento-cell__media {
66
116
  flex: 0 0 var(--cell-media-ratio, 42%);
67
117
  align-self: stretch;
68
118
  }
69
119
  .rf-bento-cell[data-media-position="start"] > .rf-bento-cell__content,
70
- .rf-bento-cell[data-media-position="end"] > .rf-bento-cell__content { flex: 1; min-width: 0; }
120
+ .rf-bento-cell[data-media-position="end"] > .rf-bento-cell__content {
121
+ flex: 1;
122
+ min-width: 0;
123
+ }
71
124
 
72
125
  .rf-bento-cell__content {
73
126
  display: flex;
@@ -81,38 +134,96 @@
81
134
  min-height: 0;
82
135
  aspect-ratio: var(--bento-media-aspect, 16 / 9);
83
136
  }
84
- .rf-bento-cell__media > :is(img, video) { object-position: var(--bento-media-anchor, center); }
85
- .rf-bento-cell__media[style*="--frame-aspect"] { --bento-media-aspect: var(--frame-aspect); }
86
- .rf-bento-cell__media[style*="--frame-anchor"] { --bento-media-anchor: var(--frame-anchor); }
87
- .rf-bento-cell__body { min-height: 0; }
137
+ .rf-bento-cell__media > :is(img, video) {
138
+ object-position: var(--bento-media-anchor, center);
139
+ }
140
+ .rf-bento-cell__media[style*="--frame-aspect"] {
141
+ --bento-media-aspect: var(--frame-aspect);
142
+ }
143
+ .rf-bento-cell__media[style*="--frame-anchor"] {
144
+ --bento-media-anchor: var(--frame-anchor);
145
+ }
146
+ .rf-bento-cell__body {
147
+ min-height: 0;
148
+ }
88
149
  .rf-bento-cell__body > span[property],
89
- .rf-bento-cell__body > meta { display: none; }
90
- .rf-bento-cell__footer { margin-top: auto; }
91
- .rf-bento-cell__body img { width: 100%; height: auto; }
150
+ .rf-bento-cell__body > meta {
151
+ display: none;
152
+ }
153
+ .rf-bento-cell__footer {
154
+ margin-top: auto;
155
+ }
156
+ .rf-bento-cell__body img {
157
+ width: 100%;
158
+ height: auto;
159
+ }
92
160
 
93
161
  /* Whole-cell link — stretched overlay; nested links stay clickable. */
94
- .rf-bento-cell__link { position: absolute; inset: 0; z-index: 0; }
95
- .rf-bento-cell a:not(.rf-bento-cell__link) { position: relative; z-index: 1; }
162
+ .rf-bento-cell__link {
163
+ position: absolute;
164
+ inset: 0;
165
+ z-index: 0;
166
+ }
167
+ .rf-bento-cell a:not(.rf-bento-cell__link) {
168
+ position: relative;
169
+ z-index: 1;
170
+ }
96
171
 
97
172
  /* ─── Binary collapse — single stacked column with auto rows below breakpoint. ─── */
98
173
  @container rf-bento (max-width: 640px) {
99
- :is(.rf-bento[data-collapse="sm"], .rf-bento[data-collapse=""]) .rf-bento__grid { --bento-cols-effective: 1; --bento-row-track: auto; }
100
- :is(.rf-bento[data-collapse="sm"], .rf-bento[data-collapse=""]) .rf-bento-cell[data-media-position="start"],
101
- :is(.rf-bento[data-collapse="sm"], .rf-bento[data-collapse=""]) .rf-bento-cell[data-media-position="end"] { flex-direction: column; }
102
- :is(.rf-bento[data-collapse="sm"], .rf-bento[data-collapse=""]) .rf-bento-cell[data-media-position] > .rf-bento-cell__media { flex: 0 0 auto; aspect-ratio: var(--bento-media-aspect, 16 / 9); }
103
- :is(.rf-bento[data-collapse="sm"], .rf-bento[data-collapse=""]) .rf-bento-cell[data-media-position] > .rf-bento-cell__content { flex: 0 0 auto; }
174
+ :is(.rf-bento[data-collapse="sm"], .rf-bento[data-collapse=""]) .rf-bento__grid {
175
+ --bento-cols-effective: 1;
176
+ --bento-row-track: auto;
177
+ }
178
+ :is(.rf-bento[data-collapse="sm"], .rf-bento[data-collapse=""])
179
+ .rf-bento-cell[data-media-position="start"],
180
+ :is(.rf-bento[data-collapse="sm"], .rf-bento[data-collapse=""])
181
+ .rf-bento-cell[data-media-position="end"] {
182
+ flex-direction: column;
183
+ }
184
+ :is(.rf-bento[data-collapse="sm"], .rf-bento[data-collapse=""])
185
+ .rf-bento-cell[data-media-position]
186
+ > .rf-bento-cell__media {
187
+ flex: 0 0 auto;
188
+ aspect-ratio: var(--bento-media-aspect, 16 / 9);
189
+ }
190
+ :is(.rf-bento[data-collapse="sm"], .rf-bento[data-collapse=""])
191
+ .rf-bento-cell[data-media-position]
192
+ > .rf-bento-cell__content {
193
+ flex: 0 0 auto;
194
+ }
104
195
  }
105
196
  @container rf-bento (max-width: 768px) {
106
- .rf-bento[data-collapse="md"] .rf-bento__grid { --bento-cols-effective: 1; --bento-row-track: auto; }
197
+ .rf-bento[data-collapse="md"] .rf-bento__grid {
198
+ --bento-cols-effective: 1;
199
+ --bento-row-track: auto;
200
+ }
107
201
  .rf-bento[data-collapse="md"] .rf-bento-cell[data-media-position="start"],
108
- .rf-bento[data-collapse="md"] .rf-bento-cell[data-media-position="end"] { flex-direction: column; }
109
- .rf-bento[data-collapse="md"] .rf-bento-cell[data-media-position] > .rf-bento-cell__media { flex: 0 0 auto; aspect-ratio: var(--bento-media-aspect, 16 / 9); }
110
- .rf-bento[data-collapse="md"] .rf-bento-cell[data-media-position] > .rf-bento-cell__content { flex: 0 0 auto; }
202
+ .rf-bento[data-collapse="md"] .rf-bento-cell[data-media-position="end"] {
203
+ flex-direction: column;
204
+ }
205
+ .rf-bento[data-collapse="md"] .rf-bento-cell[data-media-position] > .rf-bento-cell__media {
206
+ flex: 0 0 auto;
207
+ aspect-ratio: var(--bento-media-aspect, 16 / 9);
208
+ }
209
+ .rf-bento[data-collapse="md"] .rf-bento-cell[data-media-position] > .rf-bento-cell__content {
210
+ flex: 0 0 auto;
211
+ }
111
212
  }
112
213
  @container rf-bento (max-width: 1024px) {
113
- .rf-bento[data-collapse="lg"] .rf-bento__grid { --bento-cols-effective: 1; --bento-row-track: auto; }
214
+ .rf-bento[data-collapse="lg"] .rf-bento__grid {
215
+ --bento-cols-effective: 1;
216
+ --bento-row-track: auto;
217
+ }
114
218
  .rf-bento[data-collapse="lg"] .rf-bento-cell[data-media-position="start"],
115
- .rf-bento[data-collapse="lg"] .rf-bento-cell[data-media-position="end"] { flex-direction: column; }
116
- .rf-bento[data-collapse="lg"] .rf-bento-cell[data-media-position] > .rf-bento-cell__media { flex: 0 0 auto; aspect-ratio: var(--bento-media-aspect, 16 / 9); }
117
- .rf-bento[data-collapse="lg"] .rf-bento-cell[data-media-position] > .rf-bento-cell__content { flex: 0 0 auto; }
219
+ .rf-bento[data-collapse="lg"] .rf-bento-cell[data-media-position="end"] {
220
+ flex-direction: column;
221
+ }
222
+ .rf-bento[data-collapse="lg"] .rf-bento-cell[data-media-position] > .rf-bento-cell__media {
223
+ flex: 0 0 auto;
224
+ aspect-ratio: var(--bento-media-aspect, 16 / 9);
225
+ }
226
+ .rf-bento[data-collapse="lg"] .rf-bento-cell[data-media-position] > .rf-bento-cell__content {
227
+ flex: 0 0 auto;
228
+ }
118
229
  }
@@ -18,14 +18,14 @@
18
18
  position: relative;
19
19
  }
20
20
  .rf-bond__arrow::after {
21
- content: '';
21
+ content: "";
22
22
  position: absolute;
23
23
  right: -1px;
24
24
  top: 50%;
25
25
  transform: translateY(-50%);
26
26
  }
27
27
  .rf-bond[data-bidirectional="true"] .rf-bond__arrow::before {
28
- content: '';
28
+ content: "";
29
29
  position: absolute;
30
30
  left: -1px;
31
31
  top: 50%;
@@ -2,8 +2,12 @@
2
2
  * flex trail (the ol row + each li). Type, colour, gaps, and the separator glyph
3
3
  * are skin (Lumina's styles/runes/breadcrumb.css). */
4
4
 
5
- .rf-breadcrumb__items { display: contents; }
6
- .rf-breadcrumb-item { display: contents; }
5
+ .rf-breadcrumb__items {
6
+ display: contents;
7
+ }
8
+ .rf-breadcrumb-item {
9
+ display: contents;
10
+ }
7
11
  .rf-breadcrumb ol {
8
12
  display: flex;
9
13
  align-items: center;
@@ -10,7 +10,9 @@
10
10
  justify-content: space-between;
11
11
  align-items: center;
12
12
  }
13
- .rf-budget-category__line-items { list-style: none; }
13
+ .rf-budget-category__line-items {
14
+ list-style: none;
15
+ }
14
16
  .rf-budget-line-item {
15
17
  display: flex;
16
18
  justify-content: space-between;
@@ -17,21 +17,43 @@
17
17
 
18
18
  /* Collection grid: a stacked card becomes a column and its body grows so footers
19
19
  * drop to a common baseline across the row. */
20
- .rf-collection[data-layout='grid'] .rf-card[data-layout='stacked'] {
20
+ .rf-collection[data-layout="grid"] .rf-card[data-layout="stacked"] {
21
21
  display: flex;
22
22
  flex-direction: column;
23
23
  height: 100%;
24
24
  }
25
- .rf-collection[data-layout='grid'] .rf-card[data-layout='stacked'] > .rf-card__content { flex: 1; }
26
- .rf-collection[data-layout='grid'] .rf-card[data-layout='stacked'] .rf-card__content { display: flex; flex-direction: column; }
27
- .rf-collection[data-layout='grid'] .rf-card[data-layout='stacked'] .rf-card__body { flex: 1; }
25
+ .rf-collection[data-layout="grid"] .rf-card[data-layout="stacked"] > .rf-card__content {
26
+ flex: 1;
27
+ }
28
+ .rf-collection[data-layout="grid"] .rf-card[data-layout="stacked"] .rf-card__content {
29
+ display: flex;
30
+ flex-direction: column;
31
+ }
32
+ .rf-collection[data-layout="grid"] .rf-card[data-layout="stacked"] .rf-card__body {
33
+ flex: 1;
34
+ }
28
35
 
29
36
  /* Intrinsic-height scale (SPEC-089) — poster shape for cover / bg-only cards. */
30
- .rf-card[data-height="sm"] { min-height: 12rem; }
31
- .rf-card[data-height="md"] { min-height: 18rem; }
32
- .rf-card[data-height="lg"] { min-height: 26rem; }
33
- .rf-card[data-height="xl"] { min-height: 34rem; }
37
+ .rf-card[data-height="sm"] {
38
+ min-height: 12rem;
39
+ }
40
+ .rf-card[data-height="md"] {
41
+ min-height: 18rem;
42
+ }
43
+ .rf-card[data-height="lg"] {
44
+ min-height: 26rem;
45
+ }
46
+ .rf-card[data-height="xl"] {
47
+ min-height: 34rem;
48
+ }
34
49
 
35
50
  /* Whole-card stretched link; real links in body/footer sit above it. */
36
- .rf-card__link { position: absolute; inset: 0; z-index: 0; }
37
- .rf-card a:not(.rf-card__link) { position: relative; z-index: 1; }
51
+ .rf-card__link {
52
+ position: absolute;
53
+ inset: 0;
54
+ z-index: 0;
55
+ }
56
+ .rf-card a:not(.rf-card__link) {
57
+ position: relative;
58
+ z-index: 1;
59
+ }
@@ -1,7 +1,9 @@
1
1
  /* cast — structure. The members list reset, grid/list arrangements, name/role
2
2
  * block display, empty-body hide, the avatar box (size/crop/display), and the list
3
3
  * variant flex. Surface chrome, type, radii, and margins are skin. */
4
- .rf-cast__items { list-style: none; }
4
+ .rf-cast__items {
5
+ list-style: none;
6
+ }
5
7
  .rf-cast--grid .rf-cast__items {
6
8
  display: grid;
7
9
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
@@ -16,9 +18,15 @@
16
18
  .rf-cast--carousel {
17
19
  --rf-carousel-slide: clamp(200px, 40%, 280px);
18
20
  }
19
- .rf-cast-member__name { display: block; }
20
- .rf-cast-member__role { display: block; }
21
- .rf-cast-member__body:empty { display: none; }
21
+ .rf-cast-member__name {
22
+ display: block;
23
+ }
24
+ .rf-cast-member__role {
25
+ display: block;
26
+ }
27
+ .rf-cast-member__body:empty {
28
+ display: none;
29
+ }
22
30
  .rf-cast-member img {
23
31
  width: 80px;
24
32
  height: 80px;
@@ -3,7 +3,15 @@
3
3
  * inline-block badge displays. Spacing, borders, type, and colour are skin
4
4
  * (Lumina's styles/runes/changelog.css). */
5
5
 
6
- .rf-changelog__releases { display: contents; }
7
- .rf-changelog-release__body { display: contents; }
8
- .rf-changelog-release time { display: block; }
9
- .rf-changelog-release strong { display: inline-block; }
6
+ .rf-changelog__releases {
7
+ display: contents;
8
+ }
9
+ .rf-changelog-release__body {
10
+ display: contents;
11
+ }
12
+ .rf-changelog-release time {
13
+ display: block;
14
+ }
15
+ .rf-changelog-release strong {
16
+ display: inline-block;
17
+ }
@@ -1,7 +1,9 @@
1
1
  /* character — structure. The float-containment, the floated portrait box (float +
2
2
  * size + clip), the avatar fill, the sections flex column, and the section-name
3
3
  * block. Portrait margins/radius, type, borders, and list indents are skin. */
4
- .rf-character { display: flow-root; }
4
+ .rf-character {
5
+ display: flow-root;
6
+ }
5
7
  .rf-character__portrait {
6
8
  float: right;
7
9
  width: 120px;
@@ -3,9 +3,16 @@
3
3
  * --rf-chart-* theming contract (palette + geometry values), all SVG paint, the
4
4
  * data-table chrome, and type stay skin (Lumina's styles/runes/chart.css). */
5
5
 
6
- .rf-chart { display: block; }
7
- .rf-chart__container { width: 100%; }
8
- .rf-chart__svg { width: 100%; height: auto; }
6
+ .rf-chart {
7
+ display: block;
8
+ }
9
+ .rf-chart__container {
10
+ width: 100%;
11
+ }
12
+ .rf-chart__svg {
13
+ width: 100%;
14
+ height: auto;
15
+ }
9
16
  .rf-chart__legend {
10
17
  display: flex;
11
18
  justify-content: center;
@@ -5,14 +5,18 @@
5
5
  * (Lumina's styles/runes/codegroup.css) — the pre/code rules deliberately override
6
6
  * elements/code.css by source order, so they must stay skin. */
7
7
 
8
- .rf-codegroup { overflow: hidden; }
8
+ .rf-codegroup {
9
+ overflow: hidden;
10
+ }
9
11
 
10
12
  .rf-codegroup__topbar {
11
13
  display: flex;
12
14
  align-items: center;
13
15
  }
14
16
 
15
- .rf-codegroup ul { list-style: none; }
17
+ .rf-codegroup ul {
18
+ list-style: none;
19
+ }
16
20
 
17
21
  .rf-codegroup__tabs {
18
22
  display: flex;
@@ -10,29 +10,29 @@
10
10
  display: flex;
11
11
  flex-direction: column;
12
12
  }
13
- .rf-collection[data-layout='grid'] .rf-collection__items {
13
+ .rf-collection[data-layout="grid"] .rf-collection__items {
14
14
  display: grid;
15
15
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
16
16
  align-items: stretch;
17
17
  }
18
- .rf-collection[data-layout='grid'] .rf-collection__item {
18
+ .rf-collection[data-layout="grid"] .rf-collection__item {
19
19
  display: flex;
20
20
  }
21
- .rf-collection[data-layout='grid'] .rf-collection__item > * {
21
+ .rf-collection[data-layout="grid"] .rf-collection__item > * {
22
22
  flex: 1;
23
23
  min-width: 0;
24
24
  }
25
- .rf-collection[data-layout='grid'] .rf-collection__items:has(.rf-collection__group),
26
- .rf-collection[data-layout='grid'] .rf-collection__items:has(.rf-accordion) {
25
+ .rf-collection[data-layout="grid"] .rf-collection__items:has(.rf-collection__group),
26
+ .rf-collection[data-layout="grid"] .rf-collection__items:has(.rf-accordion) {
27
27
  display: flex;
28
28
  flex-direction: column;
29
29
  }
30
- .rf-collection[data-layout='grid'] .rf-collection__group {
30
+ .rf-collection[data-layout="grid"] .rf-collection__group {
31
31
  display: grid;
32
32
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
33
33
  align-items: stretch;
34
34
  }
35
- .rf-collection[data-layout='grid'] .rf-collection__group-title {
35
+ .rf-collection[data-layout="grid"] .rf-collection__group-title {
36
36
  grid-column: 1 / -1;
37
37
  }
38
38
  .rf-collection__item {