@dr-ishaan/remake-blocks 1.4.0 → 1.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.
package/dist/styles.css CHANGED
@@ -56,16 +56,16 @@
56
56
  /* -- Enhanced Blockquote ---------------------------------------------- */
57
57
  --blockquote-enhanced-border: #d0d7de;
58
58
  --blockquote-enhanced-bg: #f6f8fa;
59
- --blockquote-enhanced-color: #57606a;
59
+ --blockquote-enhanced-color: #24292f;
60
60
  --blockquote-padding: 8px 14px;
61
61
  --blockquote-margin: 10px 0;
62
62
 
63
63
  /* -- Disclosure Widget ------------------------------------------------ */
64
64
  --disclosure-border: #d0d7de;
65
- --disclosure-bg: transparent;
65
+ --disclosure-bg: #f6f8fa;
66
66
  --disclosure-title-color: #24292f;
67
67
  --disclosure-body-color: inherit;
68
- --disclosure-radius: 6px;
68
+ --disclosure-radius: 8px;
69
69
  --disclosure-padding: 8px 12px;
70
70
  --disclosure-title-font-size: 1.0625em;
71
71
  --disclosure-body-font-size: 1.0625em;
@@ -117,7 +117,7 @@
117
117
  --blockquote-enhanced-color: #8b949e;
118
118
 
119
119
  --disclosure-border: #444c56;
120
- --disclosure-bg: transparent;
120
+ --disclosure-bg: #161b22;
121
121
  --disclosure-title-color: #e6edf3;
122
122
  --disclosure-body-color: inherit;
123
123
  }
@@ -166,7 +166,7 @@
166
166
  --blockquote-enhanced-color: #8b949e;
167
167
 
168
168
  --disclosure-border: #444c56;
169
- --disclosure-bg: transparent;
169
+ --disclosure-bg: #161b22;
170
170
  --disclosure-title-color: #e6edf3;
171
171
  --disclosure-body-color: inherit;
172
172
  }
@@ -336,12 +336,25 @@
336
336
  position: relative;
337
337
  margin: 0;
338
338
  padding: var(--blockquote-padding);
339
- border-left: 3px solid var(--blockquote-enhanced-border);
339
+ border-left: none;
340
340
  background-color: var(--blockquote-enhanced-bg);
341
341
  border-radius: 0 var(--callout-radius) var(--callout-radius) 0;
342
342
  color: var(--blockquote-enhanced-color);
343
343
  font-style: italic;
344
344
  line-height: 1.5;
345
+ overflow: hidden;
346
+ }
347
+
348
+ /* v1.4.1: Rounded left line via pseudo-element (pill-shaped ends) */
349
+ .blockquote-enhanced blockquote::before {
350
+ content: "";
351
+ position: absolute;
352
+ left: 0;
353
+ top: 0;
354
+ bottom: 0;
355
+ width: 4px;
356
+ background: var(--blockquote-enhanced-border);
357
+ border-radius: 4px;
345
358
  }
346
359
 
347
360
  .blockquote-enhanced blockquote > *:first-child { margin-top: 0; }
@@ -404,19 +417,34 @@
404
417
  * Always renders as <details>/<summary>.
405
418
  */
406
419
 
420
+ /* v1.4.1: G-1 design — card with rounded left accent line, no full border */
407
421
  .disclosure {
408
- margin: 10px 0;
409
- border: 1px solid var(--disclosure-border);
410
- border-radius: var(--disclosure-radius);
422
+ position: relative;
423
+ margin: 12px 0;
424
+ border: none;
425
+ border-radius: 8px;
411
426
  background: var(--disclosure-bg);
412
427
  overflow: hidden;
413
428
  }
414
429
 
430
+ /* Rounded left accent line (pill-shaped ends, matching blockquote) */
431
+ .disclosure::before {
432
+ content: "";
433
+ position: absolute;
434
+ left: 0;
435
+ top: 0;
436
+ bottom: 0;
437
+ width: 4px;
438
+ background: var(--disclosure-border);
439
+ border-radius: 4px;
440
+ z-index: 1;
441
+ }
442
+
415
443
  .disclosure > summary {
416
444
  display: flex;
417
445
  align-items: center;
418
- gap: 6px;
419
- padding: var(--disclosure-padding);
446
+ gap: 8px;
447
+ padding: 12px 16px 10px 20px;
420
448
  font-weight: 600;
421
449
  font-size: var(--disclosure-title-font-size);
422
450
  line-height: 1.3;
@@ -424,7 +452,8 @@
424
452
  cursor: pointer;
425
453
  user-select: none;
426
454
  list-style: none;
427
- transition: background-color 0.15s ease;
455
+ border-bottom: 1px solid transparent;
456
+ transition: border-bottom-color 0.15s ease;
428
457
  }
429
458
 
430
459
  .disclosure > summary:hover {
@@ -439,23 +468,29 @@
439
468
  .disclosure > summary::before {
440
469
  content: "";
441
470
  flex-shrink: 0;
442
- width: 6px;
443
- height: 6px;
444
- border-right: 1.5px solid currentColor;
445
- border-bottom: 1.5px solid currentColor;
471
+ width: 7px;
472
+ height: 7px;
473
+ border-right: 2px solid currentColor;
474
+ border-bottom: 2px solid currentColor;
446
475
  transform: rotate(45deg);
447
476
  transition: transform 0.2s ease;
477
+ margin-right: 2px;
448
478
  }
449
479
 
450
480
  .disclosure[open] > summary::before {
451
481
  transform: rotate(-135deg);
452
482
  }
453
483
 
484
+ /* Separator line appears only when expanded */
485
+ .disclosure[open] > summary {
486
+ border-bottom: 1px solid var(--disclosure-border);
487
+ }
488
+
454
489
  .disclosure-title {
455
490
  display: flex;
456
491
  align-items: center;
457
- gap: 6px;
458
- padding: var(--disclosure-padding);
492
+ gap: 8px;
493
+ padding: 12px 16px 10px 20px;
459
494
  font-weight: 600;
460
495
  font-size: var(--disclosure-title-font-size);
461
496
  line-height: 1.3;
@@ -465,9 +500,9 @@
465
500
  }
466
501
 
467
502
  .disclosure-body {
468
- padding: 0 var(--disclosure-padding) var(--disclosure-padding);
503
+ padding: 10px 16px 14px 20px;
469
504
  font-size: var(--disclosure-body-font-size);
470
- line-height: 1.5;
505
+ line-height: 1.6;
471
506
  color: var(--disclosure-body-color);
472
507
  animation: callout-fade-in 0.15s ease-out;
473
508
  }
@@ -516,11 +551,27 @@
516
551
  * Progressive enhancement: without JS, each disclosure still toggles independently.
517
552
  */
518
553
 
554
+ /* v1.4.1: Accordion — card container matching disclosure G-1 design */
519
555
  .disclosure-accordion {
520
- margin: 10px 0;
521
- border: 1px solid var(--disclosure-border);
522
- border-radius: var(--disclosure-radius);
556
+ position: relative;
557
+ margin: 12px 0;
558
+ border: none;
559
+ border-radius: 8px;
523
560
  overflow: hidden;
561
+ background: var(--disclosure-bg);
562
+ }
563
+
564
+ /* Left accent line for the entire accordion */
565
+ .disclosure-accordion::before {
566
+ content: "";
567
+ position: absolute;
568
+ left: 0;
569
+ top: 0;
570
+ bottom: 0;
571
+ width: 4px;
572
+ background: var(--disclosure-border);
573
+ border-radius: 4px;
574
+ z-index: 1;
524
575
  }
525
576
 
526
577
  .disclosure-accordion > .disclosure {
@@ -529,6 +580,10 @@
529
580
  border-radius: 0;
530
581
  }
531
582
 
583
+ .disclosure-accordion > .disclosure::before {
584
+ display: none; /* inner disclosures don't need their own left line */
585
+ }
586
+
532
587
  /* Connect accordion items with a subtle divider */
533
588
  .disclosure-accordion > .disclosure + .disclosure {
534
589
  border-top: 1px solid var(--disclosure-border);
@@ -614,9 +669,12 @@
614
669
  @media print {
615
670
  .callout { box-shadow: none; break-inside: avoid; }
616
671
  .callout::before { display: none; }
617
- .blockquote-enhanced blockquote { background: none; border-left-width: 2px; }
618
- .disclosure { border-width: 1px; }
619
- .disclosure-accordion { border-width: 1px; }
672
+ .blockquote-enhanced blockquote { background: none; }
673
+ .blockquote-enhanced blockquote::before { width: 2px; }
674
+ .disclosure { box-shadow: none; }
675
+ .disclosure::before { width: 2px; }
676
+ .disclosure-accordion { box-shadow: none; }
677
+ .disclosure-accordion::before { width: 2px; }
620
678
  .disclosure-tree { border-left-width: 1px; }
621
679
  }
622
680
 
@@ -65,7 +65,7 @@
65
65
  /* -- Enhanced Blockquote ---------------------------------------------- */
66
66
  --blockquote-enhanced-border: #d0d7de;
67
67
  --blockquote-enhanced-bg: #f6f8fa;
68
- --blockquote-enhanced-color: #57606a;
68
+ --blockquote-enhanced-color: #24292f;
69
69
  --blockquote-padding: 14px 18px;
70
70
  --blockquote-margin: 14px 0;
71
71
 
@@ -120,7 +120,7 @@
120
120
 
121
121
  --blockquote-enhanced-border: #444c56;
122
122
  --blockquote-enhanced-bg: #161b22;
123
- --blockquote-enhanced-color: #c9d1d9;
123
+ --blockquote-enhanced-color: #e6edf3;
124
124
 
125
125
  --disclosure-border: #444c56;
126
126
  --disclosure-bg: #161b22;
@@ -168,7 +168,7 @@
168
168
 
169
169
  --blockquote-enhanced-border: #444c56;
170
170
  --blockquote-enhanced-bg: #161b22;
171
- --blockquote-enhanced-color: #c9d1d9;
171
+ --blockquote-enhanced-color: #e6edf3;
172
172
 
173
173
  --disclosure-border: #444c56;
174
174
  --disclosure-bg: #161b22;
@@ -332,6 +332,18 @@
332
332
  box-shadow: var(--callout-shadow);
333
333
  }
334
334
 
335
+ /* v1.4.1: Rounded left line via pseudo-element (pill-shaped ends) */
336
+ .blockquote-enhanced blockquote::before {
337
+ content: "";
338
+ position: absolute;
339
+ left: 0;
340
+ top: 0;
341
+ bottom: 0;
342
+ width: 4px;
343
+ background: var(--blockquote-enhanced-border);
344
+ border-radius: 4px;
345
+ }
346
+
335
347
  .blockquote-enhanced blockquote > *:first-child { margin-top: 0; }
336
348
  .blockquote-enhanced blockquote > *:last-child { margin-bottom: 0; }
337
349
  .blockquote-enhanced blockquote p { margin: 0.2em 0; }
@@ -416,18 +428,24 @@
416
428
  .disclosure > summary::before {
417
429
  content: "";
418
430
  flex-shrink: 0;
419
- width: 6px;
420
- height: 6px;
421
- border-right: 1.5px solid currentColor;
422
- border-bottom: 1.5px solid currentColor;
431
+ width: 7px;
432
+ height: 7px;
433
+ border-right: 2px solid currentColor;
434
+ border-bottom: 2px solid currentColor;
423
435
  transform: rotate(45deg);
424
436
  transition: transform 0.2s ease;
437
+ margin-right: 2px;
425
438
  }
426
439
 
427
440
  .disclosure[open] > summary::before {
428
441
  transform: rotate(-135deg);
429
442
  }
430
443
 
444
+ /* Separator line appears only when expanded */
445
+ .disclosure[open] > summary {
446
+ border-bottom: 1px solid var(--disclosure-border);
447
+ }
448
+
431
449
  .disclosure-title {
432
450
  display: flex;
433
451
  align-items: center;
@@ -442,7 +460,7 @@
442
460
  }
443
461
 
444
462
  .disclosure-body {
445
- padding: 0 var(--disclosure-padding) var(--disclosure-padding);
463
+ padding: 10px 16px 14px 20px;
446
464
  font-size: var(--disclosure-body-font-size);
447
465
  line-height: 1.5;
448
466
  color: var(--disclosure-body-color);
@@ -56,16 +56,16 @@
56
56
  /* -- Enhanced Blockquote ---------------------------------------------- */
57
57
  --blockquote-enhanced-border: #d0d7de;
58
58
  --blockquote-enhanced-bg: #f6f8fa;
59
- --blockquote-enhanced-color: #57606a;
59
+ --blockquote-enhanced-color: #24292f;
60
60
  --blockquote-padding: 8px 14px;
61
61
  --blockquote-margin: 10px 0;
62
62
 
63
63
  /* -- Disclosure Widget ------------------------------------------------ */
64
64
  --disclosure-border: #d0d7de;
65
- --disclosure-bg: transparent;
65
+ --disclosure-bg: #f6f8fa;
66
66
  --disclosure-title-color: #24292f;
67
67
  --disclosure-body-color: inherit;
68
- --disclosure-radius: 6px;
68
+ --disclosure-radius: 8px;
69
69
  --disclosure-padding: 8px 12px;
70
70
  --disclosure-title-font-size: 1.0625em;
71
71
  --disclosure-body-font-size: 1.0625em;
@@ -117,7 +117,7 @@
117
117
  --blockquote-enhanced-color: #8b949e;
118
118
 
119
119
  --disclosure-border: #444c56;
120
- --disclosure-bg: transparent;
120
+ --disclosure-bg: #161b22;
121
121
  --disclosure-title-color: #e6edf3;
122
122
  --disclosure-body-color: inherit;
123
123
  }
@@ -166,7 +166,7 @@
166
166
  --blockquote-enhanced-color: #8b949e;
167
167
 
168
168
  --disclosure-border: #444c56;
169
- --disclosure-bg: transparent;
169
+ --disclosure-bg: #161b22;
170
170
  --disclosure-title-color: #e6edf3;
171
171
  --disclosure-body-color: inherit;
172
172
  }
@@ -336,12 +336,25 @@
336
336
  position: relative;
337
337
  margin: 0;
338
338
  padding: var(--blockquote-padding);
339
- border-left: 3px solid var(--blockquote-enhanced-border);
339
+ border-left: none;
340
340
  background-color: var(--blockquote-enhanced-bg);
341
341
  border-radius: 0 var(--callout-radius) var(--callout-radius) 0;
342
342
  color: var(--blockquote-enhanced-color);
343
343
  font-style: italic;
344
344
  line-height: 1.5;
345
+ overflow: hidden;
346
+ }
347
+
348
+ /* v1.4.1: Rounded left line via pseudo-element (pill-shaped ends) */
349
+ .blockquote-enhanced blockquote::before {
350
+ content: "";
351
+ position: absolute;
352
+ left: 0;
353
+ top: 0;
354
+ bottom: 0;
355
+ width: 4px;
356
+ background: var(--blockquote-enhanced-border);
357
+ border-radius: 4px;
345
358
  }
346
359
 
347
360
  .blockquote-enhanced blockquote > *:first-child { margin-top: 0; }
@@ -404,19 +417,34 @@
404
417
  * Always renders as <details>/<summary>.
405
418
  */
406
419
 
420
+ /* v1.4.1: G-1 design — card with rounded left accent line, no full border */
407
421
  .disclosure {
408
- margin: 10px 0;
409
- border: 1px solid var(--disclosure-border);
410
- border-radius: var(--disclosure-radius);
422
+ position: relative;
423
+ margin: 12px 0;
424
+ border: none;
425
+ border-radius: 8px;
411
426
  background: var(--disclosure-bg);
412
427
  overflow: hidden;
413
428
  }
414
429
 
430
+ /* Rounded left accent line (pill-shaped ends, matching blockquote) */
431
+ .disclosure::before {
432
+ content: "";
433
+ position: absolute;
434
+ left: 0;
435
+ top: 0;
436
+ bottom: 0;
437
+ width: 4px;
438
+ background: var(--disclosure-border);
439
+ border-radius: 4px;
440
+ z-index: 1;
441
+ }
442
+
415
443
  .disclosure > summary {
416
444
  display: flex;
417
445
  align-items: center;
418
- gap: 6px;
419
- padding: var(--disclosure-padding);
446
+ gap: 8px;
447
+ padding: 12px 16px 10px 20px;
420
448
  font-weight: 600;
421
449
  font-size: var(--disclosure-title-font-size);
422
450
  line-height: 1.3;
@@ -424,7 +452,8 @@
424
452
  cursor: pointer;
425
453
  user-select: none;
426
454
  list-style: none;
427
- transition: background-color 0.15s ease;
455
+ border-bottom: 1px solid transparent;
456
+ transition: border-bottom-color 0.15s ease;
428
457
  }
429
458
 
430
459
  .disclosure > summary:hover {
@@ -439,23 +468,29 @@
439
468
  .disclosure > summary::before {
440
469
  content: "";
441
470
  flex-shrink: 0;
442
- width: 6px;
443
- height: 6px;
444
- border-right: 1.5px solid currentColor;
445
- border-bottom: 1.5px solid currentColor;
471
+ width: 7px;
472
+ height: 7px;
473
+ border-right: 2px solid currentColor;
474
+ border-bottom: 2px solid currentColor;
446
475
  transform: rotate(45deg);
447
476
  transition: transform 0.2s ease;
477
+ margin-right: 2px;
448
478
  }
449
479
 
450
480
  .disclosure[open] > summary::before {
451
481
  transform: rotate(-135deg);
452
482
  }
453
483
 
484
+ /* Separator line appears only when expanded */
485
+ .disclosure[open] > summary {
486
+ border-bottom: 1px solid var(--disclosure-border);
487
+ }
488
+
454
489
  .disclosure-title {
455
490
  display: flex;
456
491
  align-items: center;
457
- gap: 6px;
458
- padding: var(--disclosure-padding);
492
+ gap: 8px;
493
+ padding: 12px 16px 10px 20px;
459
494
  font-weight: 600;
460
495
  font-size: var(--disclosure-title-font-size);
461
496
  line-height: 1.3;
@@ -465,9 +500,9 @@
465
500
  }
466
501
 
467
502
  .disclosure-body {
468
- padding: 0 var(--disclosure-padding) var(--disclosure-padding);
503
+ padding: 10px 16px 14px 20px;
469
504
  font-size: var(--disclosure-body-font-size);
470
- line-height: 1.5;
505
+ line-height: 1.6;
471
506
  color: var(--disclosure-body-color);
472
507
  animation: callout-fade-in 0.15s ease-out;
473
508
  }
@@ -516,11 +551,27 @@
516
551
  * Progressive enhancement: without JS, each disclosure still toggles independently.
517
552
  */
518
553
 
554
+ /* v1.4.1: Accordion — card container matching disclosure G-1 design */
519
555
  .disclosure-accordion {
520
- margin: 10px 0;
521
- border: 1px solid var(--disclosure-border);
522
- border-radius: var(--disclosure-radius);
556
+ position: relative;
557
+ margin: 12px 0;
558
+ border: none;
559
+ border-radius: 8px;
523
560
  overflow: hidden;
561
+ background: var(--disclosure-bg);
562
+ }
563
+
564
+ /* Left accent line for the entire accordion */
565
+ .disclosure-accordion::before {
566
+ content: "";
567
+ position: absolute;
568
+ left: 0;
569
+ top: 0;
570
+ bottom: 0;
571
+ width: 4px;
572
+ background: var(--disclosure-border);
573
+ border-radius: 4px;
574
+ z-index: 1;
524
575
  }
525
576
 
526
577
  .disclosure-accordion > .disclosure {
@@ -529,6 +580,10 @@
529
580
  border-radius: 0;
530
581
  }
531
582
 
583
+ .disclosure-accordion > .disclosure::before {
584
+ display: none; /* inner disclosures don't need their own left line */
585
+ }
586
+
532
587
  /* Connect accordion items with a subtle divider */
533
588
  .disclosure-accordion > .disclosure + .disclosure {
534
589
  border-top: 1px solid var(--disclosure-border);
@@ -614,9 +669,12 @@
614
669
  @media print {
615
670
  .callout { box-shadow: none; break-inside: avoid; }
616
671
  .callout::before { display: none; }
617
- .blockquote-enhanced blockquote { background: none; border-left-width: 2px; }
618
- .disclosure { border-width: 1px; }
619
- .disclosure-accordion { border-width: 1px; }
672
+ .blockquote-enhanced blockquote { background: none; }
673
+ .blockquote-enhanced blockquote::before { width: 2px; }
674
+ .disclosure { box-shadow: none; }
675
+ .disclosure::before { width: 2px; }
676
+ .disclosure-accordion { box-shadow: none; }
677
+ .disclosure-accordion::before { width: 2px; }
620
678
  .disclosure-tree { border-left-width: 1px; }
621
679
  }
622
680
 
@@ -65,13 +65,13 @@
65
65
  /* -- Enhanced Blockquote ---------------------------------------------- */
66
66
  --blockquote-enhanced-border: #a0a8b8;
67
67
  --blockquote-enhanced-bg: rgba(160, 168, 184, 0.05);
68
- --blockquote-enhanced-color: #57606a;
68
+ --blockquote-enhanced-color: #24292f;
69
69
  --blockquote-padding: 10px 14px;
70
70
  --blockquote-margin: 12px 0;
71
71
 
72
72
  /* -- Disclosure Widget ------------------------------------------------ */
73
73
  --disclosure-border: #a0a8b8;
74
- --disclosure-bg: transparent;
74
+ --disclosure-bg: #f6f8fa;
75
75
  --disclosure-title-color: #24292f;
76
76
  --disclosure-body-color: inherit;
77
77
  --disclosure-radius: 8px;
@@ -120,7 +120,7 @@
120
120
 
121
121
  --blockquote-enhanced-border: #5a626c;
122
122
  --blockquote-enhanced-bg: rgba(138, 146, 163, 0.08);
123
- --blockquote-enhanced-color: #c9d1d9;
123
+ --blockquote-enhanced-color: #e6edf3;
124
124
 
125
125
  --disclosure-border: #5a626c;
126
126
  --disclosure-bg: rgba(138, 146, 163, 0.05);
@@ -168,7 +168,7 @@
168
168
 
169
169
  --blockquote-enhanced-border: #5a626c;
170
170
  --blockquote-enhanced-bg: rgba(138, 146, 163, 0.08);
171
- --blockquote-enhanced-color: #c9d1d9;
171
+ --blockquote-enhanced-color: #e6edf3;
172
172
 
173
173
  --disclosure-border: #5a626c;
174
174
  --disclosure-bg: rgba(138, 146, 163, 0.05);
@@ -324,12 +324,25 @@
324
324
  position: relative;
325
325
  margin: 0;
326
326
  padding: var(--blockquote-padding);
327
- border-left: 3px solid var(--blockquote-enhanced-border);
327
+ border-left: none;
328
328
  background-color: var(--blockquote-enhanced-bg);
329
329
  border-radius: 0 var(--callout-radius) var(--callout-radius) 0;
330
330
  color: var(--blockquote-enhanced-color);
331
331
  font-style: italic;
332
332
  line-height: 1.5;
333
+ overflow: hidden;
334
+ }
335
+
336
+ /* v1.4.1: Rounded left line via pseudo-element (pill-shaped ends) */
337
+ .blockquote-enhanced blockquote::before {
338
+ content: "";
339
+ position: absolute;
340
+ left: 0;
341
+ top: 0;
342
+ bottom: 0;
343
+ width: 4px;
344
+ background: var(--blockquote-enhanced-border);
345
+ border-radius: 4px;
333
346
  }
334
347
 
335
348
  .blockquote-enhanced blockquote > *:first-child { margin-top: 0; }
@@ -395,7 +408,7 @@
395
408
  display: flex;
396
409
  align-items: center;
397
410
  gap: 6px;
398
- padding: var(--disclosure-padding);
411
+ padding: 12px 16px 10px 20px;
399
412
  font-weight: 600;
400
413
  font-size: var(--disclosure-title-font-size);
401
414
  line-height: 1.3;
@@ -403,7 +416,8 @@
403
416
  cursor: pointer;
404
417
  user-select: none;
405
418
  list-style: none;
406
- transition: background-color 0.15s ease;
419
+ border-bottom: 1px solid transparent;
420
+ transition: border-bottom-color 0.15s ease;
407
421
  }
408
422
 
409
423
  .disclosure > summary:hover {
@@ -416,18 +430,24 @@
416
430
  .disclosure > summary::before {
417
431
  content: "";
418
432
  flex-shrink: 0;
419
- width: 6px;
420
- height: 6px;
421
- border-right: 1.5px solid currentColor;
422
- border-bottom: 1.5px solid currentColor;
433
+ width: 7px;
434
+ height: 7px;
435
+ border-right: 2px solid currentColor;
436
+ border-bottom: 2px solid currentColor;
423
437
  transform: rotate(45deg);
424
438
  transition: transform 0.2s ease;
439
+ margin-right: 2px;
425
440
  }
426
441
 
427
442
  .disclosure[open] > summary::before {
428
443
  transform: rotate(-135deg);
429
444
  }
430
445
 
446
+ /* Separator line appears only when expanded */
447
+ .disclosure[open] > summary {
448
+ border-bottom: 1px solid var(--disclosure-border);
449
+ }
450
+
431
451
  .disclosure-title {
432
452
  display: flex;
433
453
  align-items: center;
@@ -442,7 +462,7 @@
442
462
  }
443
463
 
444
464
  .disclosure-body {
445
- padding: 0 var(--disclosure-padding) var(--disclosure-padding);
465
+ padding: 10px 16px 14px 20px;
446
466
  font-size: var(--disclosure-body-font-size);
447
467
  line-height: 1.5;
448
468
  color: var(--disclosure-body-color);
@@ -66,13 +66,13 @@
66
66
  /* -- Enhanced Blockquote ---------------------------------------------- */
67
67
  --blockquote-enhanced-border: #d0d7de;
68
68
  --blockquote-enhanced-bg: #f6f8fa;
69
- --blockquote-enhanced-color: #57606a;
69
+ --blockquote-enhanced-color: #24292f;
70
70
  --blockquote-padding: 16px 20px;
71
71
  --blockquote-margin: 16px 0;
72
72
 
73
73
  /* -- Disclosure Widget ------------------------------------------------ */
74
74
  --disclosure-border: #d0d7de;
75
- --disclosure-bg: transparent;
75
+ --disclosure-bg: #f6f8fa;
76
76
  --disclosure-title-color: #24292f;
77
77
  --disclosure-body-color: inherit;
78
78
  --disclosure-radius: 0;
@@ -120,7 +120,7 @@
120
120
 
121
121
  --blockquote-enhanced-border: #444c56;
122
122
  --blockquote-enhanced-bg: #161b22;
123
- --blockquote-enhanced-color: #c9d1d9;
123
+ --blockquote-enhanced-color: #e6edf3;
124
124
 
125
125
  --disclosure-border: #444c56;
126
126
  --disclosure-title-color: #e6edf3;
@@ -165,7 +165,7 @@
165
165
 
166
166
  --blockquote-enhanced-border: #444c56;
167
167
  --blockquote-enhanced-bg: #161b22;
168
- --blockquote-enhanced-color: #c9d1d9;
168
+ --blockquote-enhanced-color: #e6edf3;
169
169
 
170
170
  --disclosure-border: #444c56;
171
171
  --disclosure-title-color: #e6edf3;
@@ -325,6 +325,19 @@
325
325
  color: var(--blockquote-enhanced-color);
326
326
  font-style: italic;
327
327
  line-height: 1.5;
328
+ overflow: hidden;
329
+ }
330
+
331
+ /* v1.4.1: Rounded left line via pseudo-element (pill-shaped ends) */
332
+ .blockquote-enhanced blockquote::before {
333
+ content: "";
334
+ position: absolute;
335
+ left: 0;
336
+ top: 0;
337
+ bottom: 0;
338
+ width: 4px;
339
+ background: var(--blockquote-enhanced-border);
340
+ border-radius: 4px;
328
341
  }
329
342
 
330
343
  .blockquote-enhanced blockquote > *:first-child { margin-top: 0; }
@@ -411,18 +424,24 @@
411
424
  .disclosure > summary::before {
412
425
  content: "";
413
426
  flex-shrink: 0;
414
- width: 6px;
415
- height: 6px;
416
- border-right: 1.5px solid currentColor;
417
- border-bottom: 1.5px solid currentColor;
427
+ width: 7px;
428
+ height: 7px;
429
+ border-right: 2px solid currentColor;
430
+ border-bottom: 2px solid currentColor;
418
431
  transform: rotate(45deg);
419
432
  transition: transform 0.2s ease;
433
+ margin-right: 2px;
420
434
  }
421
435
 
422
436
  .disclosure[open] > summary::before {
423
437
  transform: rotate(-135deg);
424
438
  }
425
439
 
440
+ /* Separator line appears only when expanded */
441
+ .disclosure[open] > summary {
442
+ border-bottom: 1px solid var(--disclosure-border);
443
+ }
444
+
426
445
  .disclosure-title {
427
446
  display: flex;
428
447
  align-items: center;
@@ -437,7 +456,7 @@
437
456
  }
438
457
 
439
458
  .disclosure-body {
440
- padding: 0 var(--disclosure-padding) var(--disclosure-padding);
459
+ padding: 10px 16px 14px 20px;
441
460
  font-size: var(--disclosure-body-font-size);
442
461
  line-height: 1.5;
443
462
  color: var(--disclosure-body-color);
@@ -569,8 +588,8 @@
569
588
  @media print {
570
589
  .callout { box-shadow: none; break-inside: avoid; }
571
590
  .blockquote-enhanced blockquote { background: none; border-left-width: 2px; }
572
- .disclosure { border-width: 1px; }
573
- .disclosure-accordion { border-width: 1px; }
591
+ .disclosure::before { width: 2px; }
592
+ .disclosure-accordion::before { width: 2px; }
574
593
  .disclosure-tree { border-left-width: 1px; }
575
594
  }
576
595
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dr-ishaan/remake-blocks",
3
- "version": "1.4.0",
3
+ "version": "1.4.1",
4
4
  "description": "Astro 6 + remark plugin for GitHub-style callouts (admonitions), enhanced blockquotes, and disclosure widgets — 27 first-class types + 4 themes + inline callouts + directive syntax + safe-by-default HTML escaping + Lucide/emoji icon sets",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",