@prosefly/astro-components 0.3.0 → 0.4.1

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 (22) hide show
  1. package/README.md +22 -22
  2. package/dist/client/accordions.js +7 -7
  3. package/dist/client/image-gallery.js +12 -12
  4. package/dist/client/tabs.js +17 -17
  5. package/dist/markdown/image-gallery-plugin.js +9 -9
  6. package/dist/markdown/image-gallery.css +31 -29
  7. package/dist/markdown/package-manager-tabs.js +1 -1
  8. package/dist/mdx/AccordionItem.astro +7 -7
  9. package/dist/mdx/Accordions.astro +30 -28
  10. package/dist/mdx/Badge.astro +70 -68
  11. package/dist/mdx/Callout.astro +48 -47
  12. package/dist/mdx/Card.astro +43 -42
  13. package/dist/mdx/CardGrid.astro +9 -5
  14. package/dist/mdx/FileTree.astro +70 -69
  15. package/dist/mdx/FileTreeItem.astro +25 -25
  16. package/dist/mdx/Icon.astro +2 -2
  17. package/dist/mdx/Steps.astro +36 -35
  18. package/dist/mdx/Tabs.astro +64 -63
  19. package/dist/mdx/rehype-steps.js +2 -2
  20. package/dist/mdx/rehype-tabs.js +1 -1
  21. package/dist/theme-tokens.css +96 -0
  22. package/package.json +1 -1
package/dist/mdx/FileTree.astro CHANGED
@@ -1,4 +1,5 @@
1
1
  ---
2
+ import '../theme-tokens.css';
2
3
  import FileTreeItem from './FileTreeItem.astro';
3
4
  import { normalizeFileTreeIconSet, type FileTreeIconSet } from '../icon/file-tree-icons.js';
4
5
  import { parseFileTree } from './rehype-file-tree';
@@ -13,29 +14,29 @@ const fileTreeHtml = await Astro.slots.render('default');
13
14
  const entries = parseFileTree(fileTreeHtml);
14
15
  ---
15
16
 
16
- <ul class="pl-file-tree" data-icon-set={iconSet} role="list">
17
+ <ul class="pf-file-tree" data-icon-set={iconSet} role="list">
17
18
  {entries.map((entry) => <FileTreeItem entry={entry} iconSet={iconSet} />)}
18
19
  </ul>
19
20
 
20
21
  <style is:global>
21
- .pl-file-tree {
22
- --pl-file-tree-border: color-mix(
22
+ .pf-file-tree {
23
+ --pf-file-tree-border: color-mix(
23
24
  in oklab,
24
- var(--pl-text-muted, #667085) 18%,
25
+ var(--pf-text-muted, #667085) 18%,
25
26
  transparent
26
27
  );
27
- --pl-file-tree-line: color-mix(
28
+ --pf-file-tree-line: color-mix(
28
29
  in oklab,
29
- var(--pl-text-muted, #667085) 16%,
30
+ var(--pf-text-muted, #667085) 16%,
30
31
  transparent
31
32
  );
32
33
 
33
- background: var(--pl-background, #ffffff);
34
- border: 1px solid var(--pl-file-tree-border);
35
- border-radius: min(var(--pl-radius-lg, 0.75rem), 1rem);
36
- color: var(--pl-text, #344054);
34
+ background: var(--pf-background, #ffffff);
35
+ border: 1px solid var(--pf-file-tree-border);
36
+ border-radius: min(var(--pf-radius-lg, 0.75rem), 1rem);
37
+ color: var(--pf-text, #344054);
37
38
  font-family:
38
- var(--pl-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
39
+ var(--pf-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
39
40
  font-size: 0.875rem;
40
41
  line-height: 1.5rem;
41
42
  list-style: none;
@@ -44,27 +45,27 @@ const entries = parseFileTree(fileTreeHtml);
44
45
  padding: 0.75rem;
45
46
  }
46
47
 
47
- .pl-file-tree,
48
- .pl-file-tree ul {
48
+ .pf-file-tree,
49
+ .pf-file-tree ul {
49
50
  list-style: none;
50
51
  }
51
52
 
52
- .pl-file-tree :where(ul, li, p) {
53
+ .pf-file-tree :where(ul, li, p) {
53
54
  margin: 0;
54
55
  }
55
56
 
56
- .pl-file-tree :where(ul) {
57
+ .pf-file-tree :where(ul) {
57
58
  padding: 0;
58
59
  }
59
60
 
60
- .pl-file-tree__list {
61
+ .pf-file-tree__list {
61
62
  margin-block-start: 0.125rem;
62
63
  padding-inline-start: 1.5rem;
63
64
  position: relative;
64
65
  }
65
66
 
66
- .pl-file-tree__list::before {
67
- background: var(--pl-file-tree-line);
67
+ .pf-file-tree__list::before {
68
+ background: var(--pf-file-tree-line);
68
69
  bottom: 0.75rem;
69
70
  content: "";
70
71
  inset-inline-start: 0.625rem;
@@ -73,24 +74,24 @@ const entries = parseFileTree(fileTreeHtml);
73
74
  width: 1px;
74
75
  }
75
76
 
76
- .pl-file-tree__item {
77
+ .pf-file-tree__item {
77
78
  margin: 0;
78
79
  min-width: max-content;
79
80
  padding: 0;
80
81
  }
81
82
 
82
- .pl-file-tree__entry {
83
+ .pf-file-tree__entry {
83
84
  align-items: center;
84
- border-radius: var(--pl-radius-md, 0.5rem);
85
+ border-radius: var(--pf-radius-md, 0.5rem);
85
86
  display: inline-flex;
86
87
  gap: 0.375rem;
87
88
  min-height: 1.75rem;
88
89
  white-space: nowrap;
89
90
  }
90
91
 
91
- .pl-file-tree__target {
92
+ .pf-file-tree__target {
92
93
  align-items: center;
93
- border-radius: var(--pl-radius-md, 0.5rem);
94
+ border-radius: var(--pf-radius-md, 0.5rem);
94
95
  box-sizing: border-box;
95
96
  display: inline-flex;
96
97
  gap: 0.375rem;
@@ -98,32 +99,32 @@ const entries = parseFileTree(fileTreeHtml);
98
99
  padding: 0.125rem 0.5rem;
99
100
  }
100
101
 
101
- .pl-file-tree__target--highlighted {
102
+ .pf-file-tree__target--highlighted {
102
103
  background: var(
103
- --pl-accent-soft,
104
- color-mix(in oklab, var(--pl-accent, #4f46e5) 12%, var(--pl-background, #ffffff))
104
+ --pf-accent-soft,
105
+ color-mix(in oklab, var(--pf-accent, #3e7e55) 12%, var(--pf-background, #ffffff))
105
106
  );
106
- color: var(--pl-text-strong, var(--pl-text, #182230));
107
+ color: var(--pf-text-strong, var(--pf-text, #182230));
107
108
  font-weight: 600;
108
109
  }
109
110
 
110
- .pl-file-tree__summary {
111
+ .pf-file-tree__summary {
111
112
  cursor: pointer;
112
113
  display: block;
113
114
  list-style: none;
114
115
  }
115
116
 
116
- .pl-file-tree__summary::-webkit-details-marker {
117
+ .pf-file-tree__summary::-webkit-details-marker {
117
118
  display: none;
118
119
  }
119
120
 
120
- .pl-file-tree__summary:hover .pl-file-tree__target:not(.pl-file-tree__target--highlighted) {
121
- background: var(--pl-surface, #f4f6f8);
121
+ .pf-file-tree__summary:hover .pf-file-tree__target:not(.pf-file-tree__target--highlighted) {
122
+ background: var(--pf-surface, #f4f6f8);
122
123
  }
123
124
 
124
- .pl-file-tree__chevron {
125
+ .pf-file-tree__chevron {
125
126
  align-items: center;
126
- color: var(--pl-text-muted, #667085);
127
+ color: var(--pf-text-muted, #667085);
127
128
  display: inline-flex;
128
129
  flex: 0 0 auto;
129
130
  justify-content: center;
@@ -131,89 +132,89 @@ const entries = parseFileTree(fileTreeHtml);
131
132
  transition: transform 160ms ease;
132
133
  }
133
134
 
134
- .pl-file-tree__details[open] > .pl-file-tree__summary .pl-file-tree__chevron {
135
+ .pf-file-tree__details[open] > .pf-file-tree__summary .pf-file-tree__chevron {
135
136
  transform: rotate(90deg);
136
137
  }
137
138
 
138
- .pl-file-tree__icon {
139
+ .pf-file-tree__icon {
139
140
  align-items: center;
140
- color: var(--pl-text-muted, #667085);
141
+ color: var(--pf-text-muted, #667085);
141
142
  display: inline-flex;
142
143
  flex: 0 0 auto;
143
144
  justify-content: center;
144
145
  line-height: 0;
145
146
  }
146
147
 
147
- .pl-file-tree__icon .pl-icon,
148
- .pl-file-tree__icon-closed .pl-icon,
149
- .pl-file-tree__icon-open .pl-icon,
150
- .pl-file-tree__icon-theme .pl-icon,
151
- .pl-file-tree__chevron .pl-icon {
148
+ .pf-file-tree__icon .pf-icon,
149
+ .pf-file-tree__icon-closed .pf-icon,
150
+ .pf-file-tree__icon-open .pf-icon,
151
+ .pf-file-tree__icon-theme .pf-icon,
152
+ .pf-file-tree__chevron .pf-icon {
152
153
  display: block;
153
154
  height: 1rem;
154
155
  width: 1rem;
155
156
  }
156
157
 
157
- .pl-file-tree__icon-open,
158
- .pl-file-tree__details[open] > .pl-file-tree__summary .pl-file-tree__icon-closed {
158
+ .pf-file-tree__icon-open,
159
+ .pf-file-tree__details[open] > .pf-file-tree__summary .pf-file-tree__icon-closed {
159
160
  display: none;
160
161
  }
161
162
 
162
- .pl-file-tree__details[open] > .pl-file-tree__summary .pl-file-tree__icon-open {
163
+ .pf-file-tree__details[open] > .pf-file-tree__summary .pf-file-tree__icon-open {
163
164
  display: inline-flex;
164
165
  }
165
166
 
166
- .pl-file-tree__icon-theme--dark {
167
+ .pf-file-tree__icon-theme--dark {
167
168
  display: none;
168
169
  }
169
170
 
170
- :root[data-theme='dark'] .pl-file-tree__icon-theme--light {
171
+ :root[data-theme='dark'] .pf-file-tree__icon-theme--light {
171
172
  display: none;
172
173
  }
173
174
 
174
- :root[data-theme='dark'] .pl-file-tree__icon-theme--dark {
175
+ :root[data-theme='dark'] .pf-file-tree__icon-theme--dark {
175
176
  display: block;
176
177
  }
177
178
 
178
179
  @media (prefers-color-scheme: dark) {
179
- :root:is([data-theme='system'], :not([data-theme])) .pl-file-tree__icon-theme--light {
180
+ :root:is([data-theme='system'], :not([data-theme])) .pf-file-tree__icon-theme--light {
180
181
  display: none;
181
182
  }
182
183
 
183
- :root:is([data-theme='system'], :not([data-theme])) .pl-file-tree__icon-theme--dark {
184
+ :root:is([data-theme='system'], :not([data-theme])) .pf-file-tree__icon-theme--dark {
184
185
  display: block;
185
186
  }
186
187
  }
187
188
 
188
- .pl-file-tree__icon[data-kind='directory'] {
189
- color: color-mix(in oklab, var(--pl-accent, #4f46e5) 82%, var(--pl-text, #344054));
189
+ .pf-file-tree__icon[data-kind='directory'] {
190
+ color: color-mix(in oklab, var(--pf-accent, #3e7e55) 82%, var(--pf-text, #344054));
190
191
  }
191
192
 
192
- .pl-file-tree[data-icon-set='lucide'] .pl-file-tree__icon[data-kind='code'] {
193
+ .pf-file-tree[data-icon-set='lucide'] .pf-file-tree__icon[data-kind='code'] {
193
194
  color: oklch(0.58 0.18 250);
194
195
  }
195
196
 
196
- .pl-file-tree[data-icon-set='lucide'] .pl-file-tree__icon[data-kind='config'] {
197
+ .pf-file-tree[data-icon-set='lucide'] .pf-file-tree__icon[data-kind='config'] {
197
198
  color: oklch(0.56 0.14 155);
198
199
  }
199
200
 
200
- .pl-file-tree[data-icon-set='lucide'] .pl-file-tree__icon[data-kind='style'] {
201
+ .pf-file-tree[data-icon-set='lucide'] .pf-file-tree__icon[data-kind='style'] {
201
202
  color: oklch(0.58 0.19 320);
202
203
  }
203
204
 
204
- .pl-file-tree[data-icon-set='lucide'] .pl-file-tree__icon[data-kind='image'] {
205
+ .pf-file-tree[data-icon-set='lucide'] .pf-file-tree__icon[data-kind='image'] {
205
206
  color: oklch(0.58 0.16 80);
206
207
  }
207
208
 
208
- .pl-file-tree__name {
209
- color: var(--pl-text, #344054);
209
+ .pf-file-tree__name {
210
+ color: var(--pf-text, #344054);
210
211
  }
211
212
 
212
- .pl-file-tree__target--highlighted .pl-file-tree__name {
213
+ .pf-file-tree__target--highlighted .pf-file-tree__name {
213
214
  color: inherit;
214
215
  }
215
216
 
216
- .pl-file-tree__name code {
217
+ .pf-file-tree__name code {
217
218
  background: transparent;
218
219
  border: 0;
219
220
  border-radius: 0;
@@ -222,19 +223,19 @@ const entries = parseFileTree(fileTreeHtml);
222
223
  padding: 0;
223
224
  }
224
225
 
225
- .pl-file-tree__comment {
226
- color: var(--pl-text-muted, #667085);
226
+ .pf-file-tree__comment {
227
+ color: var(--pf-text-muted, #667085);
227
228
  font-family:
228
- var(--pl-font-sans, ui-sans-serif, system-ui, sans-serif);
229
+ var(--pf-font-sans, ui-sans-serif, system-ui, sans-serif);
229
230
  font-size: 0.8125rem;
230
231
  }
231
232
 
232
- .pl-file-tree__comment :where(strong) {
233
- color: var(--pl-text-strong, var(--pl-text, #182230));
233
+ .pf-file-tree__comment :where(strong) {
234
+ color: var(--pf-text-strong, var(--pf-text, #182230));
234
235
  font-weight: 600;
235
236
  }
236
237
 
237
- .pl-file-tree__comment :where(code) {
238
+ .pf-file-tree__comment :where(code) {
238
239
  background: transparent;
239
240
  border: 0;
240
241
  color: inherit;
@@ -242,12 +243,12 @@ const entries = parseFileTree(fileTreeHtml);
242
243
  padding: 0;
243
244
  }
244
245
 
245
- .pl-file-tree__item--placeholder > .pl-file-tree__entry,
246
- .pl-file-tree__item--placeholder .pl-file-tree__name {
247
- color: var(--pl-text-muted, #667085);
246
+ .pf-file-tree__item--placeholder > .pf-file-tree__entry,
247
+ .pf-file-tree__item--placeholder .pf-file-tree__name {
248
+ color: var(--pf-text-muted, #667085);
248
249
  }
249
250
 
250
- .pl-file-tree__sr-only {
251
+ .pf-file-tree__sr-only {
251
252
  clip: rect(0, 0, 0, 0);
252
253
  border: 0;
253
254
  height: 1px;
package/dist/mdx/FileTreeItem.astro CHANGED
@@ -26,70 +26,70 @@ const children = entry.children.length > 0 ? entry.children : [placeholderEntry]
26
26
 
27
27
  <li
28
28
  class:list={[
29
- 'pl-file-tree__item',
30
- entry.isDirectory ? 'pl-file-tree__item--directory' : 'pl-file-tree__item--file',
31
- entry.isPlaceholder && 'pl-file-tree__item--placeholder',
32
- entry.highlighted && 'pl-file-tree__item--highlighted',
29
+ 'pf-file-tree__item',
30
+ entry.isDirectory ? 'pf-file-tree__item--directory' : 'pf-file-tree__item--file',
31
+ entry.isPlaceholder && 'pf-file-tree__item--placeholder',
32
+ entry.highlighted && 'pf-file-tree__item--highlighted',
33
33
  ]}
34
34
  >
35
35
  {
36
36
  entry.isDirectory ? (
37
- <details class="pl-file-tree__details" open={entry.children.length > 0 ? true : undefined}>
38
- <summary class="pl-file-tree__summary">
39
- <span class="pl-file-tree__entry">
37
+ <details class="pf-file-tree__details" open={entry.children.length > 0 ? true : undefined}>
38
+ <summary class="pf-file-tree__summary">
39
+ <span class="pf-file-tree__entry">
40
40
  {!entry.isPlaceholder && (
41
- <span aria-hidden="true" class="pl-file-tree__chevron">
41
+ <span aria-hidden="true" class="pf-file-tree__chevron">
42
42
  <Icon name="lucide:chevron-right" />
43
43
  </span>
44
44
  )}
45
45
  <span
46
46
  class:list={[
47
- 'pl-file-tree__target',
48
- entry.highlighted && 'pl-file-tree__target--highlighted',
47
+ 'pf-file-tree__target',
48
+ entry.highlighted && 'pf-file-tree__target--highlighted',
49
49
  ]}
50
50
  >
51
51
  {!entry.isPlaceholder && (
52
- <span aria-hidden="true" class="pl-file-tree__icon" data-kind={entry.kind}>
53
- <span class="pl-file-tree__icon-closed">
52
+ <span aria-hidden="true" class="pf-file-tree__icon" data-kind={entry.kind}>
53
+ <span class="pf-file-tree__icon-closed">
54
54
  <Icon name={icon.closed ?? icon.name} />
55
55
  </span>
56
- <span class="pl-file-tree__icon-open">
56
+ <span class="pf-file-tree__icon-open">
57
57
  <Icon name={icon.open ?? icon.name} />
58
58
  </span>
59
59
  </span>
60
60
  )}
61
- <span class="pl-file-tree__name">
62
- {!entry.isPlaceholder && <span class="pl-file-tree__sr-only">Directory </span>}
61
+ <span class="pf-file-tree__name">
62
+ {!entry.isPlaceholder && <span class="pf-file-tree__sr-only">Directory </span>}
63
63
  <Fragment set:html={entry.nameHtml} />
64
64
  </span>
65
65
  </span>
66
66
  {
67
67
  entry.commentHtml && (
68
- <span class="pl-file-tree__comment" set:html={entry.commentHtml} />
68
+ <span class="pf-file-tree__comment" set:html={entry.commentHtml} />
69
69
  )
70
70
  }
71
71
  </span>
72
72
  </summary>
73
- <ul class="pl-file-tree__list" role="list">
73
+ <ul class="pf-file-tree__list" role="list">
74
74
  {children.map((child) => <FileTreeItem entry={child} iconSet={iconSet} />)}
75
75
  </ul>
76
76
  </details>
77
77
  ) : (
78
- <span class="pl-file-tree__entry">
78
+ <span class="pf-file-tree__entry">
79
79
  <span
80
80
  class:list={[
81
- 'pl-file-tree__target',
82
- entry.highlighted && 'pl-file-tree__target--highlighted',
81
+ 'pf-file-tree__target',
82
+ entry.highlighted && 'pf-file-tree__target--highlighted',
83
83
  ]}
84
84
  >
85
85
  {!entry.isPlaceholder && (
86
- <span aria-hidden="true" class="pl-file-tree__icon" data-kind={entry.kind}>
86
+ <span aria-hidden="true" class="pf-file-tree__icon" data-kind={entry.kind}>
87
87
  {icon.light && icon.dark ? (
88
88
  <>
89
- <span class="pl-file-tree__icon-theme pl-file-tree__icon-theme--light">
89
+ <span class="pf-file-tree__icon-theme pf-file-tree__icon-theme--light">
90
90
  <Icon name={icon.light} />
91
91
  </span>
92
- <span class="pl-file-tree__icon-theme pl-file-tree__icon-theme--dark">
92
+ <span class="pf-file-tree__icon-theme pf-file-tree__icon-theme--dark">
93
93
  <Icon name={icon.dark} />
94
94
  </span>
95
95
  </>
@@ -98,11 +98,11 @@ const children = entry.children.length > 0 ? entry.children : [placeholderEntry]
98
98
  )}
99
99
  </span>
100
100
  )}
101
- <span class="pl-file-tree__name" set:html={entry.nameHtml} />
101
+ <span class="pf-file-tree__name" set:html={entry.nameHtml} />
102
102
  </span>
103
103
  {
104
104
  entry.commentHtml && (
105
- <span class="pl-file-tree__comment" set:html={entry.commentHtml} />
105
+ <span class="pf-file-tree__comment" set:html={entry.commentHtml} />
106
106
  )
107
107
  }
108
108
  </span>
package/dist/mdx/Icon.astro CHANGED
@@ -118,13 +118,13 @@ const svgAttributes = {
118
118
  };
119
119
  ---
120
120
 
121
- <svg class:list={['pl-icon', className]} {...svgAttributes}>
121
+ <svg class:list={['pf-icon', className]} {...svgAttributes}>
122
122
  {title && <title>{title}</title>}
123
123
  <Fragment set:html={body} />
124
124
  </svg>
125
125
 
126
126
  <style>
127
- .pl-icon {
127
+ .pf-icon {
128
128
  display: inline-block;
129
129
  flex-shrink: 0;
130
130
  vertical-align: -0.125em;
package/dist/mdx/Steps.astro CHANGED
@@ -1,4 +1,5 @@
1
1
  ---
2
+ import '../theme-tokens.css';
2
3
  import { processSteps } from './rehype-steps';
3
4
 
4
5
  const content = await Astro.slots.render('default');
@@ -8,81 +9,81 @@ const { html } = processSteps(content);
8
9
  <Fragment set:html={html} />
9
10
 
10
11
  <style is:global>
11
- .pl-steps {
12
- --pl-steps-bullet-size: 1.75rem;
13
- --pl-steps-bullet-margin: 0.375rem;
14
- --pl-steps-line: var(--pl-border-subtle, #e5e7eb);
15
- --pl-steps-marker-background: var(--pl-surface, #f4f6f8);
16
- --pl-steps-marker-foreground: var(--pl-text, #344054);
17
- counter-reset: pl-steps-counter var(--pl-steps-start, 0);
12
+ .pf-steps {
13
+ --pf-steps-bullet-size: 1.75rem;
14
+ --pf-steps-bullet-margin: 0.375rem;
15
+ --pf-steps-line: var(--pf-border-subtle, #e5e7eb);
16
+ --pf-steps-marker-background: var(--pf-surface, #f4f6f8);
17
+ --pf-steps-marker-foreground: var(--pf-text, #344054);
18
+ counter-reset: pf-steps-counter var(--pf-steps-start, 0);
18
19
  list-style: none;
19
20
  margin-block: 1.5rem;
20
21
  padding-inline-start: 0;
21
22
  }
22
23
 
23
- .pl-steps > li {
24
- counter-increment: pl-steps-counter;
24
+ .pf-steps > li {
25
+ counter-increment: pf-steps-counter;
25
26
  min-height: calc(
26
- var(--pl-steps-bullet-size) + var(--pl-steps-bullet-margin)
27
+ var(--pf-steps-bullet-size) + var(--pf-steps-bullet-margin)
27
28
  );
28
29
  padding-block-end: 1px;
29
- padding-inline-start: calc(var(--pl-steps-bullet-size) + 1rem);
30
+ padding-inline-start: calc(var(--pf-steps-bullet-size) + 1rem);
30
31
  position: relative;
31
32
  }
32
33
 
33
- .pl-steps > li + li {
34
+ .pf-steps > li + li {
34
35
  margin-block-start: 0;
35
36
  }
36
37
 
37
- .pl-steps > li::before {
38
- background: var(--pl-steps-marker-background);
38
+ .pf-steps > li::before {
39
+ background: var(--pf-steps-marker-background);
39
40
  border-radius: 999px;
40
- color: var(--pl-steps-marker-foreground);
41
- content: counter(pl-steps-counter);
41
+ color: var(--pf-steps-marker-foreground);
42
+ content: counter(pf-steps-counter);
42
43
  font-size: 0.8125rem;
43
44
  font-weight: 600;
44
- height: var(--pl-steps-bullet-size);
45
+ height: var(--pf-steps-bullet-size);
45
46
  inset-block-start: 0;
46
47
  inset-inline-start: 0;
47
- line-height: var(--pl-steps-bullet-size);
48
+ line-height: var(--pf-steps-bullet-size);
48
49
  position: absolute;
49
50
  text-align: center;
50
- width: var(--pl-steps-bullet-size);
51
+ width: var(--pf-steps-bullet-size);
51
52
  z-index: 1;
52
53
  }
53
54
 
54
- .pl-steps > li::after {
55
- background: var(--pl-steps-line);
56
- bottom: var(--pl-steps-bullet-margin);
55
+ .pf-steps > li::after {
56
+ background: var(--pf-steps-line);
57
+ bottom: var(--pf-steps-bullet-margin);
57
58
  content: "";
58
- inset-inline-start: calc((var(--pl-steps-bullet-size) - 1px) / 2);
59
+ inset-inline-start: calc((var(--pf-steps-bullet-size) - 1px) / 2);
59
60
  position: absolute;
60
- top: calc(var(--pl-steps-bullet-size) + var(--pl-steps-bullet-margin));
61
+ top: calc(var(--pf-steps-bullet-size) + var(--pf-steps-bullet-margin));
61
62
  width: 1px;
62
63
  }
63
64
 
64
- .pl-steps > li:last-child::after {
65
+ .pf-steps > li:last-child::after {
65
66
  display: none;
66
67
  }
67
68
 
68
- .pl-steps > li > :first-child {
69
- --pl-steps-first-line-height: 1.75em;
70
- --pl-steps-shift-y: calc(
69
+ .pf-steps > li > :first-child {
70
+ --pf-steps-first-line-height: 1.75em;
71
+ --pf-steps-shift-y: calc(
71
72
  0.5 *
72
- (var(--pl-steps-bullet-size) - var(--pl-steps-first-line-height))
73
+ (var(--pf-steps-bullet-size) - var(--pf-steps-first-line-height))
73
74
  );
74
75
  margin-block-start: 0;
75
- margin-bottom: var(--pl-steps-shift-y);
76
- transform: translateY(var(--pl-steps-shift-y));
76
+ margin-bottom: var(--pf-steps-shift-y);
77
+ transform: translateY(var(--pf-steps-shift-y));
77
78
  }
78
79
 
79
- .pl-steps > li > :first-child:where(h1, h2, h3, h4, h5, h6) {
80
- --pl-steps-first-line-height: 1.25em;
80
+ .pf-steps > li > :first-child:where(h1, h2, h3, h4, h5, h6) {
81
+ --pf-steps-first-line-height: 1.25em;
81
82
  }
82
83
 
83
84
  @supports (--prop: 1lh) {
84
- .pl-steps > li > :first-child {
85
- --pl-steps-first-line-height: 1lh;
85
+ .pf-steps > li > :first-child {
86
+ --pf-steps-first-line-height: 1lh;
86
87
  }
87
88
  }
88
89
  </style>