@meowdown/core 0.71.1 → 0.71.2

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 (2) hide show
  1. package/dist/style.css +220 -182
  2. package/package.json +3 -3
package/dist/style.css CHANGED
@@ -183,224 +183,261 @@
183
183
  inherits: true
184
184
  }
185
185
 
186
- @layer post-embed {
187
- :where([data-post-embed="x-post"]) {
188
- --_hairline: var(--post-embed-border-color, color-mix(in srgb, currentColor 15%, transparent));
189
- --_muted: var(--post-embed-muted-color, color-mix(in srgb, currentColor 58%, transparent));
190
- --_link: var(--post-embed-link-color, #1d9bf0);
191
- font: inherit;
192
- color: var(--post-embed-color, inherit);
193
- text-decoration-skip-ink: none;
194
- display: block;
186
+ [data-post-embed="x-post"] [data-root], [data-post-embed="x-post"] [data-root] *, [data-post-embed="x-post"] [data-root] :before, [data-post-embed="x-post"] [data-root] :after {
187
+ all: revert;
188
+ box-sizing: border-box;
189
+ }
195
190
 
196
- & :where([data-root]) {
197
- background: var(--post-embed-background, transparent);
198
- border: 1px solid var(--_hairline);
199
- border-radius: var(--post-embed-radius, 1rem);
200
- padding: var(--post-embed-padding, 1rem);
201
- overflow-wrap: anywhere;
202
- line-height: 1.4;
203
- position: relative;
204
- }
191
+ [data-post-embed="x-post"] {
192
+ --_hairline: var(--post-embed-border-color, color-mix(in srgb, currentColor 14%, transparent));
193
+ --_muted: var(--post-embed-muted-color, color-mix(in srgb, currentColor 55%, transparent));
194
+ --_link: var(--post-embed-link-color, #1d9bf0);
195
+ --_tint: color-mix(in srgb, currentColor 5%, transparent);
196
+ font: inherit;
197
+ color: var(--post-embed-color, inherit);
198
+ text-decoration-skip-ink: none;
199
+ display: block;
200
+ }
205
201
 
206
- & :where([hidden]) {
207
- display: none !important;
208
- }
202
+ [data-post-embed="x-post"] [data-root] {
203
+ color: var(--post-embed-color, inherit);
204
+ background: var(--post-embed-background, transparent);
205
+ border: 1px solid var(--_hairline);
206
+ border-radius: var(--post-embed-radius, .75rem);
207
+ padding: var(--post-embed-padding, 1rem);
208
+ letter-spacing: normal;
209
+ text-align: start;
210
+ text-transform: none;
211
+ text-indent: 0;
212
+ text-shadow: none;
213
+ word-spacing: normal;
214
+ font-variant: normal;
215
+ hyphens: manual;
216
+ white-space: normal;
217
+ overflow-wrap: anywhere;
218
+ cursor: auto;
219
+ font-size: 1em;
220
+ font-style: normal;
221
+ font-weight: 400;
222
+ line-height: 1.45;
223
+ display: block;
224
+ position: relative;
209
225
 
210
- & :where(a) {
211
- color: var(--_link);
212
- text-decoration: none;
213
- }
226
+ & [hidden] {
227
+ display: none !important;
228
+ }
214
229
 
215
- & :where(a:hover) {
216
- text-underline-offset: .15em;
217
- text-decoration: underline;
218
- }
230
+ & p {
231
+ margin: 0;
232
+ }
219
233
 
220
- & :where(a:focus-visible, button:focus-visible) {
221
- outline: 2px solid var(--_link);
222
- outline-offset: 2px;
223
- border-radius: 4px;
224
- }
234
+ & a {
235
+ color: var(--_link);
236
+ cursor: pointer;
237
+ text-decoration: none;
238
+ }
225
239
 
226
- & :where([data-author]) {
227
- align-items: center;
228
- gap: .75rem;
229
- display: flex;
230
- }
240
+ & a:hover {
241
+ text-underline-offset: .15em;
242
+ text-decoration: underline;
243
+ }
231
244
 
232
- & :where([data-avatar]) {
233
- object-fit: cover;
234
- border-radius: 50%;
235
- flex: none;
236
- width: 3rem;
237
- height: 3rem;
238
- }
245
+ & a:focus-visible {
246
+ outline: 2px solid var(--_link);
247
+ outline-offset: 2px;
248
+ border-radius: 4px;
249
+ }
239
250
 
240
- & :where([data-avatar][data-shape="square"]) {
241
- border-radius: .5rem;
242
- }
251
+ & [data-author] {
252
+ align-items: center;
253
+ gap: .625rem;
254
+ min-width: 0;
255
+ display: flex;
256
+ }
243
257
 
244
- & :where([data-avatar][data-shape="hexagon"]) {
245
- clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
246
- }
258
+ & [data-avatar] {
259
+ object-fit: cover;
260
+ background: var(--_tint);
261
+ border-radius: 50%;
262
+ flex: none;
263
+ width: 2.5rem;
264
+ height: 2.5rem;
265
+ display: block;
266
+ }
247
267
 
248
- & :where([data-author-details]) {
249
- min-width: 0;
250
- color: var(--_muted);
251
- flex: 1;
252
- line-height: 1.3;
253
- }
268
+ & [data-avatar][data-shape="square"] {
269
+ border-radius: .5rem;
270
+ }
254
271
 
255
- & :where([data-author-name]) {
256
- color: var(--post-embed-color, inherit);
257
- flex-wrap: wrap;
258
- align-items: center;
259
- gap: .25rem;
260
- font-weight: 700;
261
- display: flex;
262
- }
272
+ & [data-avatar][data-shape="hexagon"] {
273
+ clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
274
+ }
263
275
 
264
- & :where([data-author-details] > bdi > a) {
265
- color: inherit;
266
- }
276
+ & [data-author-details] {
277
+ flex: 1;
278
+ min-width: 0;
279
+ line-height: 1.3;
280
+ display: block;
281
+ }
267
282
 
268
- & :where([data-reply-to]) {
269
- color: var(--_muted);
270
- margin-block-start: .75rem;
271
- font-size: .9375em;
272
- }
283
+ & [data-author-name] {
284
+ flex-wrap: wrap;
285
+ align-items: center;
286
+ gap: .25rem;
287
+ font-weight: 600;
288
+ display: flex;
289
+ }
273
290
 
274
- & :where([data-body]) {
275
- margin-block: .75rem 0;
276
- font-size: 1.0625em;
277
- line-height: 1.45;
278
- }
291
+ & [data-author-details] > bdi {
292
+ color: var(--_muted);
293
+ }
279
294
 
280
- & :where([data-text]) {
281
- white-space: pre-wrap;
282
- }
295
+ & [data-author-details] > bdi > a {
296
+ color: inherit;
297
+ }
283
298
 
284
- & :where([data-media]) {
285
- border: 1px solid var(--_hairline);
286
- border-radius: 1rem;
287
- grid-template-columns: repeat(2, minmax(0, 1fr));
288
- gap: 2px;
289
- margin-block-start: .75rem;
290
- display: grid;
291
- overflow: hidden;
292
- }
299
+ & [data-reply-to] {
300
+ color: var(--_muted);
301
+ margin-block-start: .625rem;
302
+ font-size: .9375em;
303
+ display: block;
304
+ }
293
305
 
294
- & :where([data-media][data-count="1"]) {
295
- grid-template-columns: minmax(0, 1fr);
296
- }
306
+ & [data-body] {
307
+ margin-block: .625rem 0;
308
+ font-size: 1em;
309
+ line-height: 1.5;
310
+ display: block;
311
+ }
297
312
 
298
- & :where([data-media-item]) {
299
- min-width: 0;
300
- overflow: hidden;
301
- }
313
+ & [data-text] {
314
+ white-space: pre-wrap;
315
+ }
302
316
 
303
- & :where([data-media-item] > a) {
304
- height: 100%;
305
- display: block;
306
- }
317
+ & [data-media] {
318
+ background: var(--_hairline);
319
+ border-radius: .5rem;
320
+ grid-template-columns: repeat(2, minmax(0, 1fr));
321
+ gap: 2px;
322
+ margin-block-start: .75rem;
323
+ display: grid;
324
+ overflow: hidden;
325
+ }
307
326
 
308
- & :where([data-media-item] img, [data-media-item] video) {
309
- object-fit: contain;
310
- background: color-mix(in srgb, currentColor 6%, transparent);
311
- width: 100%;
312
- height: auto;
313
- max-height: 36rem;
314
- display: block;
315
- }
327
+ & [data-media][data-count="1"] {
328
+ grid-template-columns: minmax(0, 1fr);
329
+ }
316
330
 
317
- & :where([data-media]:not([data-count="1"]) [data-media-item] img) {
318
- aspect-ratio: 1;
319
- object-fit: cover;
320
- height: 100%;
321
- }
331
+ & [data-media-item] {
332
+ min-width: 0;
333
+ display: block;
334
+ overflow: hidden;
335
+ }
322
336
 
323
- & :where([data-media][data-count="3"] [data-media-item]:first-child) {
324
- grid-row: span 2;
325
- }
337
+ & [data-media-item] > a {
338
+ height: 100%;
339
+ display: block;
340
+ }
326
341
 
327
- & :where([data-media-unavailable], [data-media-error]) {
328
- color: var(--_muted);
329
- background: color-mix(in srgb, currentColor 4%, transparent);
330
- padding: .75rem 1rem;
331
- }
342
+ & [data-media-item] img, & [data-media-item] video {
343
+ object-fit: contain;
344
+ background: var(--_tint);
345
+ width: 100%;
346
+ height: auto;
347
+ max-height: 32rem;
348
+ display: block;
349
+ }
332
350
 
333
- & :where([data-quoted]) {
334
- border: 1px solid var(--_hairline);
335
- border-radius: 1rem;
336
- margin-block-start: .75rem;
337
- padding: .75rem;
338
- }
351
+ & [data-media]:not([data-count="1"]) [data-media-item] img {
352
+ aspect-ratio: 1;
353
+ object-fit: cover;
354
+ height: 100%;
355
+ }
339
356
 
340
- & :where([data-quoted] [data-author]) {
341
- gap: .5rem;
342
- }
357
+ & [data-media][data-count="3"] [data-media-item]:first-child {
358
+ grid-row: span 2;
359
+ }
343
360
 
344
- & :where([data-quoted] [data-avatar]) {
345
- width: 1.5rem;
346
- height: 1.5rem;
347
- }
361
+ & [data-media-unavailable], & [data-media-error] {
362
+ color: var(--_muted);
363
+ background: var(--_tint);
364
+ padding: .75rem 1rem;
365
+ display: block;
366
+ }
348
367
 
349
- & :where([data-quoted] [data-author-details]) {
350
- flex-wrap: wrap;
351
- align-items: baseline;
352
- gap: 0 .35rem;
353
- display: flex;
354
- }
368
+ & [data-quoted] {
369
+ border: 1px solid var(--_hairline);
370
+ border-radius: .5rem;
371
+ margin-block-start: .75rem;
372
+ padding: .75rem;
373
+ display: block;
374
+ }
355
375
 
356
- & :where([data-quoted] [data-body]) {
357
- margin-block-start: .375rem;
358
- font-size: 1em;
359
- }
376
+ & [data-quoted] [data-author] {
377
+ gap: .5rem;
378
+ }
360
379
 
361
- & :where([data-quoted] [data-media]) {
362
- border-radius: .75rem;
363
- }
380
+ & [data-quoted] [data-avatar] {
381
+ width: 1.375rem;
382
+ height: 1.375rem;
383
+ }
364
384
 
365
- & :where([data-quoted] [data-footer]) {
366
- margin-block-start: .5rem;
367
- font-size: .875em;
368
- }
385
+ & [data-quoted] [data-author-details] {
386
+ flex-wrap: wrap;
387
+ align-items: baseline;
388
+ gap: 0 .35rem;
389
+ display: flex;
390
+ }
369
391
 
370
- & :where([data-footer]) {
371
- color: var(--_muted);
372
- flex-wrap: wrap;
373
- align-items: center;
374
- gap: .25rem 0;
375
- margin-block-start: .75rem;
376
- font-size: .9375em;
377
- display: flex;
378
- }
392
+ & [data-quoted] [data-body] {
393
+ margin-block-start: .375rem;
394
+ font-size: .9375em;
395
+ }
379
396
 
380
- & :where([data-footer] > a) {
381
- color: inherit;
382
- }
397
+ & [data-quoted] [data-media] {
398
+ border-radius: .375rem;
399
+ }
383
400
 
384
- & :where([data-footer] > [data-edited]):before {
385
- content: "";
386
- vertical-align: middle;
387
- background: currentColor;
388
- border-radius: 50%;
389
- width: 3px;
390
- height: 3px;
391
- margin-inline: .45rem;
392
- display: inline-block;
393
- }
401
+ & [data-quoted] [data-footer] {
402
+ margin-block-start: .5rem;
403
+ font-size: .8125em;
404
+ }
394
405
 
395
- & :where([data-edited]) {
396
- font-style: normal;
397
- }
406
+ & [data-footer] {
407
+ color: var(--_muted);
408
+ flex-wrap: wrap;
409
+ align-items: center;
410
+ gap: .25rem 0;
411
+ margin-block-start: .625rem;
412
+ font-size: .875em;
413
+ display: flex;
414
+ }
398
415
 
399
- & :where([data-fallback] [data-body]) {
400
- color: var(--_muted);
401
- }
416
+ & [data-footer] > a {
417
+ color: inherit;
418
+ }
419
+
420
+ & [data-footer] > [data-edited]:before {
421
+ content: "";
422
+ vertical-align: middle;
423
+ background: currentColor;
424
+ border-radius: 50%;
425
+ width: 3px;
426
+ height: 3px;
427
+ margin-inline: .45rem;
428
+ display: inline-block;
429
+ }
430
+
431
+ & [data-edited] {
432
+ font-style: normal;
402
433
  }
403
434
 
435
+ & [data-fallback] [data-body] {
436
+ color: var(--_muted);
437
+ }
438
+ }
439
+
440
+ @layer post-embed {
404
441
  :where([data-post-embed="youtube-video"]) {
405
442
  --_hairline: var(--post-embed-border-color, color-mix(in srgb, currentColor 15%, transparent));
406
443
  --_muted: var(--post-embed-muted-color, color-mix(in srgb, currentColor 58%, transparent));
@@ -1209,7 +1246,8 @@
1209
1246
  }
1210
1247
 
1211
1248
  & .md-image-view-preview[data-post-embed] {
1212
- border-radius: var(--post-embed-radius, 1rem);
1249
+ border-radius: var(--post-embed-radius, .75rem);
1250
+ overflow: visible;
1213
1251
  }
1214
1252
 
1215
1253
  & .md-image-resizable {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@meowdown/core",
3
3
  "type": "module",
4
- "version": "0.71.1",
4
+ "version": "0.71.2",
5
5
  "license": "MIT",
6
6
  "repository": {
7
7
  "type": "git",
@@ -26,7 +26,7 @@
26
26
  "@floating-ui/dom": "^1.8.0",
27
27
  "@lezer/highlight": "^1.2.3",
28
28
  "@ocavue/utils": "^1.8.0",
29
- "@post-embed/elements": "^0.4.1",
29
+ "@post-embed/elements": "^0.5.0",
30
30
  "@post-embed/exporter": "^0.4.1",
31
31
  "@post-embed/schema": "^0.5.0",
32
32
  "@post-embed/types": "^0.4.0",
@@ -49,7 +49,7 @@
49
49
  "unicode-by-name": "^0.2.0",
50
50
  "unified": "^11.0.5",
51
51
  "valibot": "^1.5.0",
52
- "@meowdown/markdown": "^0.71.1"
52
+ "@meowdown/markdown": "^0.71.2"
53
53
  },
54
54
  "devDependencies": {
55
55
  "@ocavue/tsconfig": "^0.7.1",