@simple-reporting/base 1.0.21 → 1.0.22

package/dev/package.json

@@ -19,7 +19,7 @@
     "postinstall": "srl prepare"
   },
   "dependencies": {
-    "@simple-reporting/base": "^1.0.21",
+    "@simple-reporting/base": "^1.0.22",
     "axios": "^1.12.2",
     "chalk": "^5.6.2",
     "exceljs": "^4.4.0",

package/dev/src/assets/scss/placeholders.scss

@@ -225,6 +225,54 @@
   @include srl.grid-offset(1, desktop-large);
 }
 
+/*
+  Quote with an image regular with
+  Just the image
+*/
+%srl-cv-header-portrait {
+  // Mobile
+  @include srl.grid-col(4);
+
+  // Mobile landscape
+  @include srl.grid-col(4, phone-ls);
+
+  // Tablet portrait
+  @include srl.grid-col(3, tablet-pt);
+
+  // Tablet landscape
+  @include srl.grid-col(3, tablet-ls);
+
+  // Desktop
+  @include srl.grid-col(2, desktop);
+
+  // Desktop large
+  @include srl.grid-col(2, desktop-large);
+}
+
+/*
+  Quote with an image regular with
+  Just the text
+*/
+%srl-cv-header-content {
+  // Mobile
+  @include srl.grid-col(4);
+
+  // Mobile landscape
+  @include srl.grid-col(4, phone-ls);
+
+  // Tablet portrait
+  @include srl.grid-col(5, tablet-pt);
+
+  // Tablet landscape
+  @include srl.grid-col(5, tablet-ls);
+
+  // Desktop
+  @include srl.grid-col(4, desktop);
+
+  // Desktop large
+  @include srl.grid-col(4, desktop-large);
+}
+
 %srl-icon {
   display: block;
   width: srl.system-size-unit(24);

package/dev/srl.config.json

@@ -121,6 +121,22 @@
           }
         }
       },
+      {
+        "name": "title-h1-pdf",
+        "font-family": "Inter",
+        "font-size": "16pt",
+        "line-height": 1.2,
+        "font-style": "normal",
+        "font-weight": 600,
+        "color": "white-1000",
+        "letter-spacing": 0,
+        "media": {
+          "print": {
+            "font-size": "16pt",
+            "line-height": 1.2
+          }
+        }
+      },
       {
         "name": "title-h2",
         "font-family": "Inter",
@@ -143,6 +159,22 @@
           }
         }
       },
+      {
+        "name": "title-h2-pdf",
+        "font-family": "Inter",
+        "font-size": "28pt",
+        "line-height": 0.875,
+        "font-style": "normal",
+        "font-weight": 600,
+        "color": "white-1000",
+        "letter-spacing": 0,
+        "media": {
+          "print": {
+            "font-size": "28pt",
+            "line-height": 0.875
+          }
+        }
+      },
       {
         "name": "title-h3",
         "font-family": "Inter",
@@ -643,6 +675,27 @@
           }
         }
       },
+      {
+        "name": "cv-time-span",
+        "font-family": "Inter",
+        "font-size": 14,
+        "line-height": 1.5,
+        "font-style": "normal",
+        "font-weight": 400,
+        "color": "black-1000",
+        "letter-spacing": 0,
+        "media": {
+          "print": {
+            "font-size": "9pt",
+            "line-height": 1.444
+          },
+          "up": {
+            "tablet-pt": {
+              "font-size": 16
+            }
+          }
+        }
+      },
       {
         "name": "pdf-header",
         "font-family": "Inter",
@@ -659,6 +712,38 @@
           }
         }
       },
+      {
+        "name": "toc-title",
+        "font-family": "Inter",
+        "font-size": "28pt",
+        "line-height": 1.14,
+        "font-style": "normal",
+        "font-weight": 600,
+        "color": "black-1000",
+        "letter-spacing": 0,
+        "media": {
+          "print": {
+            "font-size": "28pt",
+            "line-height": 1.14
+          }
+        }
+      },
+      {
+        "name": "toc-item-title",
+        "font-family": "Inter",
+        "font-size": "20pt",
+        "line-height": 1.2,
+        "font-style": "normal",
+        "font-weight": 600,
+        "color": "black-1000",
+        "letter-spacing": 0,
+        "media": {
+          "print": {
+            "font-size": "20pt",
+            "line-height": 1.2
+          }
+        }
+      },
       {
         "name": "editor-label-text",
         "font-family": "Inter",

package/livingdocs/010.Titles/010.title-h1/scss/general.scss

@@ -2,4 +2,16 @@
 
 .srl-title-h1 {
   @include srl.typography-title-h1();
+
+  .srl-pdf-cover & {
+    @include srl.typography-title-h1-pdf();
+  }
+
+  .srl-cover--font-color-black & {
+    color: srl.colors-black-1000();
+  }
+
+  .srl-cover--font-color-primary & {
+    color: srl.colors-primary-1000();
+  }
 }

package/livingdocs/010.Titles/020.title-h2/scss/general.scss

@@ -5,7 +5,18 @@ $number-width: srl.spacer-get(map.get(srl.$meta, title, number-width));
 
 .srl-title-h2 {
   @include srl.typography-title-h2();
-  @include srl.spacer-margin-top(800);
+
+  .srl-pdf-cover & {
+    @include srl.typography-title-h2-pdf();
+  }
+
+  .srl-cover--font-color-black & {
+    color: srl.colors-black-1000();
+  }
+
+  .srl-cover--font-color-primary & {
+    color: srl.colors-primary-1000();
+  }
 }
 
 .srl-title-h2__number-text-container {

package/livingdocs/010.Titles/030.title-h3/scss/general.scss

@@ -5,7 +5,6 @@ $number-width: srl.spacer-get(map.get(srl.$meta, title, number-width));
 
 .srl-title-h3 {
   @include srl.typography-title-h3();
-  @include srl.spacer-margin-top(400);
 }
 
 .srl-title-h3__number-text-container {

package/livingdocs/010.Titles/040.title-h4/scss/general.scss

@@ -5,7 +5,6 @@ $number-width: srl.spacer-get(map.get(srl.$meta, title, number-width));
 
 .srl-title-h4 {
   @include srl.typography-title-h4();
-  @include srl.spacer-margin-top(400);
 }
 
 .srl-title-h4__number-text-container {

package/livingdocs/010.Titles/050.title-h5/scss/general.scss

@@ -2,5 +2,4 @@
 
 .srl-title-h5 {
   @include srl.typography-title-h5();
-  @include srl.spacer-margin-top(200);
 }

package/livingdocs/010.Titles/060.title-h6/scss/general.scss

@@ -2,5 +2,4 @@
 
 .srl-title-h6 {
   @include srl.typography-title-h6();
-  @include srl.spacer-margin-top(200);
 }

package/livingdocs/020.Text/010.lead/scss/general.scss

@@ -2,5 +2,4 @@
 
 .srl-lead {
   @include srl.typography-lead();
-  @include srl.spacer-margin-top(400);
 }

package/livingdocs/020.Text/020.paragraph/scss/general.scss

@@ -2,5 +2,4 @@
 
 .srl-paragraph {
   @include srl.typography-paragraph();
-  @include srl.spacer-margin-top(200);
 }

package/livingdocs/020.Text/040.link/scss/general.scss

@@ -2,5 +2,4 @@
 
 .srl-link {
   @include srl.typography-link();
-  @include srl.spacer-margin-top(100);
 }

package/livingdocs/020.Text/050.quote/scss/general.scss

@@ -1,9 +1,5 @@
 @use 'srl';
 
-.srl-quote {
-  @include srl.spacer-margin-top(800);
-}
-
 .srl-quote__quote {
   @include srl.typography-quote();
 }

package/livingdocs/020.Text/060.quote-with-portrait/scss/general.scss

@@ -8,7 +8,10 @@ $quote-close: map.get(srl.$meta, quote, quote-close);
 .srl-quote {
   align-items: center;
   row-gap: srl.spacer-get(400);
-  @include srl.spacer-margin-top(800);
+}
+
+.srl-quote__img {
+  border-radius: 50%;
 }
 
 .srl-quote__quote {

package/livingdocs/020.Text/070.footnote-container/scss/general.scss

@@ -2,5 +2,4 @@
 
 .srl-footnote-container {
   overflow: hidden;
-  @include srl.spacer-margin-top(200);
-}
+}

package/livingdocs/020.Text/080.footnote-item/scss/general.scss

@@ -4,13 +4,5 @@
 .srl-footnote:not(.srl-grid),
 .srl-footnote__item {
   display: flex;
-  @include srl.spacer-margin-top(100);
   @include srl.typography-footnote-text();
 }
-
-.srl-footnote__key {
-  font-size: 60%;
-  font-variant-numeric: tabular-nums;
-  line-height: 1; // prevents normal text from getting too much height
-  vertical-align: super;
-}

package/livingdocs/020.Text/080.footnote-item/scss/pdf.scss

@@ -6,9 +6,16 @@ $number-width: srl.system-size-unit(map.get(srl.$meta, footnote, number-width-pd
 .srl-footnote__key,
 .srl-footnote__number {
   width: $number-width;
+
+  &:empty {
+    width: 0;
+
+    & + .srl-footnote__text {
+        width: 100%;
+    }
+  }
 }
 
-.srl-footnote__text,
 .srl-footnote__text {
   width: calc(100% - #{$number-width});
 }

package/livingdocs/020.Text/080.footnote-item/scss/web.scss

@@ -6,9 +6,16 @@ $number-width: srl.system-size-unit(map.get(srl.$meta, footnote, number-width));
 .srl-footnote__key,
 .srl-footnote__number {
   width: $number-width;
+
+  &:empty {
+    width: 0;
+
+    & + .srl-footnote__text {
+      width: 100%;
+    }
+  }
 }
 
-.srl-footnote__text,
 .srl-footnote__text {
   width: calc(100% - #{$number-width});
 }

package/livingdocs/030.Lists/010.unordered-list/scss/general.scss

@@ -1,8 +1,8 @@
 @use 'srl';
-@use "sass:map";
 
-.srl-list-group {
-  @include srl.spacer-margin-top(200);
+.srl-table-list {
+  list-style: none;
+  padding: 0;
 }
 
 .srl-list-group__list {

package/livingdocs/030.Lists/010.unordered-list/scss/pdf.scss

@@ -0,0 +1,8 @@
+@use 'srl';
+@use 'sass:map';
+
+$number-width: srl.system-size-unit(map.get(srl.$meta, footnote, number-width-pdf));
+
+.srl-table-list {
+  margin-left: $number-width;
+}

package/livingdocs/030.Lists/010.unordered-list/scss/web.scss

@@ -0,0 +1,2 @@
+@use 'srl';
+@use 'sass:map';

package/livingdocs/030.Lists/010.unordered-list/unordered-list.html

@@ -3,4 +3,4 @@
     class="srl-grid__inner srl-list-group__list srl-list-group__list--ul"
     doc-container="list"
   ></ul>
-</div>
+</div>

package/livingdocs/030.Lists/020.ordered-list/scss/general.scss

@@ -1,9 +1,6 @@
 @use 'srl';
 
-.srl-list-group {
-  @include srl.spacer-margin-top(200);
-}
-
-.srl-list-group--ol {
+.srl-list-group--ol,
+.srl-table-list--ol {
   counter-reset: ordered-list;
 }

package/livingdocs/030.Lists/030.alphanumeric-list/scss/general.scss

@@ -1,9 +1,6 @@
 @use 'srl';
 
-.srl-list-group {
-  @include srl.spacer-margin-top(200);
-}
-
-.srl-list-group--alphanumeric {
+.srl-list-group--alphanumeric,
+.srl-table-list--alphanumeric {
   counter-reset: alphanumeric-list;
 }

package/livingdocs/030.Lists/040.list-item/scss/general.scss

@@ -10,17 +10,24 @@ $alphanumeric-marker-after: ")";
   display: flex;
   @include srl.typography-list();
 
+  .srl-footnote-container .srl-table-list & {
+    @include srl.typography-footnote-text();
+  }
+
   &:before {
+    .srl-table-list--ul &,
     .srl-list-group--ul & {
       content: "#{$unordered-marker}";
     }
 
+    .srl-table-list--ol &,
     .srl-list-group--ol & {
       counter-increment: ordered-list;
       content: counter(ordered-list) $ordered-marker-after;
       font-variant-numeric: tabular-nums;
     }
 
+    .srl-table-list--alphanumeric &,
     .srl-list-group--alphanumeric & {
       counter-increment: alphanumeric-list;
       content: counter(alphanumeric-list, lower-alpha) $alphanumeric-marker-after;

package/livingdocs/030.Lists/040.list-item/scss/web.scss

@@ -2,13 +2,26 @@
 @use "sass:map";
 
 $marker-width: srl.system-size-unit(map.get(srl.$meta, list, marker-width));
+$number-width: srl.system-size-unit(map.get(srl.$meta, footnote, number-width));
 
 .srl-list-group__item {
   &:before {
     width: $marker-width;
+
+    .srl-table-list--ul &,
+    .srl-table-list--ol &,
+    .srl-table-list--alphanumeric & {
+      padding-left: $number-width;
+    }
   }
 }
 
 .srl-list-group__item-text {
   width: calc(100% -  #{$marker-width});
+
+  .srl-table-list--ul &,
+  .srl-table-list--ol &,
+  .srl-table-list--alphanumeric & {
+    width: calc(100% -  #{$marker-width} - #{$number-width});
+  }
 }

package/livingdocs/040.Media/010.table/scss/general.scss

@@ -11,7 +11,6 @@ $table-border-bold: map.get(srl.$meta, table, border, bold);
 
 .srl-table {
   display: block;
-  @include srl.spacer-margin-top(400);
 }
 
 .srl-table__container {
@@ -58,6 +57,9 @@ td {
   /*
   Font colors
   */
+  &[class*="fcprimary"] {
+    color: srl.colors-primary-1000();
+  }
 
   /*
   Font Sizes
@@ -74,6 +76,10 @@ td {
     font-weight: srl.typography-get-font-weight('table-head-strong');
   }
 
+  &[class*="regular"] {
+    font-weight: srl.typography-get-font-weight('table-cell-regular');
+  }
+
   &[class*="bold"] {
     font-weight: srl.typography-get-font-weight('table-cell-strong');
   }
@@ -214,48 +220,21 @@ td {
     }
   }
 
+  &[class*="ind_ind_ind"] {
+    &:first-child {
+      padding-left: srl.spacer-get(800);
+    }
+  }
+
   /*
   Cell Backgrounds
   DEFINE HERE; DIFFERENT CSS CLASSES IN EVERY PROJECT
   */
-  &[class*="background-01"] {
-    background-color: transparent;
-  }
-
-  &[class*="background-02"] {
-    background-color: transparent;
-  }
-
-  &[class*="background-03"] {
-    background-color: transparent;
-  }
-
-  &[class*="background-04"] {
-    background-color: transparent;
-  }
-
-  &[class*="background-05"] {
-    background-color: transparent;
-  }
-
-  &[class*="background-06"] {
-    background-color: transparent;
-  }
-
-  &[class*="background-07"] {
-    background-color: transparent;
-  }
-
-  &[class*="background-08"] {
-    background-color: transparent;
-  }
-
-  &[class*="background-09"] {
-    background-color: transparent;
-  }
-
-  &[class*="background-10"] {
-    background-color: transparent;
+  @for $i from 1 through 10 {
+    $suffix: if($i < 10, "0#{$i}", "#{$i}");
+    &[class*="background-#{$suffix}"] {
+      background-color: var(--srl-table-background-#{$suffix}, transparent);
+    }
   }
 
   &[class*="background-01"],

package/livingdocs/040.Media/020.image/scss/general.scss

@@ -1,10 +1,6 @@
 @use 'srl';
 @use "assets/scss/placeholders";
 
-.srl-image {
-  @include srl.spacer-margin-top(800);
-}
-
 .srl-grid--media {
   .srl-full-width & {
     @extend %srl-grid-reset;

package/livingdocs/080.CV/010.cv/cv.html

@@ -1,6 +1,6 @@
 <div class="srl-cv">
   <div class="srl-grid srl-cv__header">
-    <div class="srl-grid__inner">
+    <div class="srl-grid__inner srl-cv__inner">
       <div class="srl-cv__header-portrait">
         <figure class="srl-cv__figure">
           <img class="srl-cv__img" doc-image="image" />

package/livingdocs/080.CV/010.cv/scss/app.scss

@@ -0,0 +1 @@
+@use "web";

package/livingdocs/080.CV/010.cv/scss/editor.scss

@@ -0,0 +1 @@
+@use "web";

package/livingdocs/080.CV/010.cv/scss/general.scss

@@ -0,0 +1,15 @@
+@use 'srl';
+@use "sass:map";
+
+.srl-cv__inner {
+  display: flex;
+  align-items: center;
+}
+
+.srl-cv__img {
+  border-radius: 50%;
+}
+
+.srl-cv__content {
+  margin-top: srl.spacer-get(400);
+}

package/livingdocs/080.CV/010.cv/scss/pdf.scss

@@ -0,0 +1,14 @@
+@use 'srl';
+
+.srl-cv__inner {
+  display: flex;
+}
+
+.srl-cv__header-portrait {
+  margin-right: srl.grid-get-gutter-column-gap();
+  width: srl.grid-calculate-pdf-col-span-minus-one-gutter(2);
+}
+
+.srl-cv__header-content {
+  width: srl.grid-calculate-pdf-col-span-minus-one-gutter(4);
+}

package/livingdocs/080.CV/010.cv/scss/web.scss

@@ -0,0 +1,15 @@
+@use 'srl';
+@use "assets/scss/placeholders";
+
+.srl-cv__inner {
+  display: grid;
+  grid-template-columns: subgrid;
+}
+
+.srl-cv__header-portrait {
+  @extend %srl-cv-header-portrait;
+}
+
+.srl-cv__header-content {
+  @extend %srl-cv-header-content;
+}

package/livingdocs/080.CV/010.cv/scss/xbrl.scss

@@ -0,0 +1 @@
+@use 'general';

package/livingdocs/080.CV/020.cv-time-span/cv-time-span.html

@@ -1,13 +1,15 @@
-<div class="srl-cv-time-span">
-  <span class="srl-cv-time-span__years" doc-editable="cv-time-span-years">
-    2010 - 2012
-  </span>
-  <span
-    class="srl-cv-time-span__position srl-linkable"
-    doc-editable="cv-time-span-position"
-  >
-    Ut enim ad minim veniam, quis nostrud exercitation ullamco, Ut enim ad minim
-    veniam, quis nostrud exercitation ullamco. Ut enim ad minim veniam, quis
-    nostrud exercitation ullamco
-  </span>
+<div class="srl-grid srl-cv-time-span">
+  <div class="srl-grid__inner srl-cv-time-span__inner">
+    <span class="srl-cv-time-span__years" doc-editable="cv-time-span-years">
+      2010 - 2012
+    </span>
+    <span
+      class="srl-cv-time-span__position srl-linkable"
+      doc-editable="cv-time-span-position"
+    >
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco, Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco. Ut enim ad minim veniam, quis
+      nostrud exercitation ullamco
+    </span>
+  </div>
 </div>

package/livingdocs/080.CV/020.cv-time-span/scss/app.scss

@@ -0,0 +1 @@
+@use "web";

package/livingdocs/080.CV/020.cv-time-span/scss/editor.scss

@@ -0,0 +1 @@
+@use "web";

package/livingdocs/080.CV/020.cv-time-span/scss/general.scss

@@ -0,0 +1,10 @@
+@use 'srl';
+@use "sass:map";
+
+.srl-cv-time-span {
+  @include srl.typography-cv-time-span();
+}
+
+.srl-cv-time-span__inner {
+  display: flex;
+}

package/livingdocs/080.CV/020.cv-time-span/scss/pdf.scss

@@ -0,0 +1,10 @@
+@use 'srl';
+
+
+.srl-cv-time-span__years {
+  width: srl.system-size-unit(80);
+}
+
+.srl-cv-time-span__position {
+  width: calc(100% - srl.system-size-unit(80));
+}

package/livingdocs/080.CV/020.cv-time-span/scss/web.scss

@@ -0,0 +1,10 @@
+@use 'srl';
+@use "assets/scss/placeholders";
+
+.srl-cv-time-span__years {
+  width: srl.system-size-unit(110);
+}
+
+.srl-cv-time-span__position {
+  width: calc(100% - srl.system-size-unit(110));
+}

package/livingdocs/080.CV/020.cv-time-span/scss/xbrl.scss

@@ -0,0 +1 @@
+@use 'general';

package/livingdocs/090.Signatures/020.signature-item/scss/general.scss

@@ -1,6 +1,7 @@
 @use 'srl';
 
 .srl-signature__name {
+  margin-top: srl.spacer-get(100);
   @include srl.typography-signature-name();
 }
 

package/livingdocs/110.PDF/050.pdf-chapter-navigation-container/pdf-chapter-navigation.html

@@ -1,5 +1,5 @@
 <div
-  class="srl-chapter-navigation"
+  class="srl-chapter-navigation srl-editor-component"
   data-is-chapter-override="true"
   data-remove-from-web="complete"
 >

package/livingdocs/110.PDF/050.pdf-chapter-navigation-container/scss/editor.scss

@@ -1 +1,5 @@
 @use "web";
+
+.srl-chapter-navigation__list {
+  @extend %srl-regular-width;
+}

package/livingdocs/110.PDF/050.pdf-chapter-navigation-container/scss/general.scss

@@ -1 +1,9 @@
-@use 'srl';
+@use 'srl';
+
+.srl-chapter-navigation__list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  column-gap: srl.grid-get-gutter-column-gap();
+}

package/livingdocs/110.PDF/050.pdf-chapter-navigation-container/scss/pdf.scss

@@ -1,15 +1,6 @@
 @use 'srl';
 @use 'sass:map';
 
-
 .srl-chapter-navigation {
   position: running(chapterNavigation);
 }
-
-.srl-chapter-navigation__list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  column-gap: srl.grid-get-gutter-column-gap();
-}

package/livingdocs/110.PDF/060.pdf-chapter-navigation-item/pdf-chapter-navigation-item.html

@@ -1,7 +1,8 @@
 <li
   class="srl-chapter-navigation__list-item"
-  doc-editable="pdf-chapter-navigation-item-text"
   data-remove-from-web="complete"
 >
-  Chapter Title
+  <a class="srl-chapter-navigation__link" doc-link="href" doc-editable="pdf-chapter-navigation-item-text">
+    Chapter Title
+  </a>
 </li>

package/livingdocs/110.PDF/060.pdf-chapter-navigation-item/scss/general.scss

@@ -1 +1,14 @@
-@use 'srl';
+@use 'srl';
+
+.srl-chapter-navigation__list-item {
+  a {
+    text-decoration: none;
+    @include srl.typography-pdf-header();
+  }
+}
+
+.srl-chapter-navigation__list-item--current {
+  a {
+    color: srl.colors-primary-1000();
+  }
+}

package/livingdocs/110.PDF/060.pdf-chapter-navigation-item/scss/pdf.scss

@@ -1,15 +1,2 @@
 @use 'srl';
-@use 'sass:map';
-
-.srl-chapter-navigation__list-item {
-  a {
-    text-decoration: none;
-    @include srl.typography-pdf-header();
-  }
-}
-
-.srl-chapter-navigation__list-item--current {
-  a {
-    color: srl.colors-primary-1000();
-  }
-}
+@use 'sass:map';

package/livingdocs/110.PDF/070.pdf-cover/ld-conf.json

@@ -1,6 +1,9 @@
 {
   "name": "pdf-cover",
   "label": "PDF cover",
+  "properties": [
+    "invert-cover"
+  ],
   "directives": {
     "show-logo": {
       "type": "toggle",

package/livingdocs/110.PDF/070.pdf-cover/properties.json

@@ -0,0 +1,19 @@
+{
+  "invert-cover": {
+    "label": "Font color scheme",
+    "type": "select",
+    "options": [
+      {
+        "caption": "Normal"
+      },
+      {
+        "caption": "Black",
+        "value": "srl-cover--font-color-black"
+      },
+      {
+        "caption": "Primary",
+        "value": "srl-cover--font-color-primary"
+      }
+    ]
+  }
+}

package/livingdocs/110.PDF/070.pdf-cover/scss/editor.scss

@@ -0,0 +1,7 @@
+@use 'srl';
+@use 'web';
+
+.srl-pdf-cover {
+  border: 1px solid #{srl.colors-primary-1000()};
+  margin-inline: auto;
+}

package/livingdocs/110.PDF/070.pdf-cover/scss/general.scss

@@ -0,0 +1,22 @@
+@use "srl";
+@use 'sass:map';
+
+$page-margin-top: srl.system-size-unit(map.get(srl.$meta, pdf, margin, top));
+$page-margin-right: srl.system-size-unit(map.get(srl.$meta, pdf, margin, right));
+$page-margin-bottom: srl.system-size-unit(map.get(srl.$meta, pdf, margin, bottom));
+$page-margin-left: srl.system-size-unit(map.get(srl.$meta, pdf, margin, left));
+
+.srl-pdf-cover {
+  background-size: cover;
+  width: 595pt;
+  height: 842pt;
+}
+
+.srl-pdf-cover__content {
+  padding: 32pt 32pt 96pt;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+

package/livingdocs/110.PDF/070.pdf-cover/scss/pdf.scss

@@ -0,0 +1,22 @@
+@page cover {
+  margin: 0;
+
+  @top-left-corner {
+    content: "";
+    display: none;
+  }
+
+  @top-left {
+    content: "";
+    display: none;
+  }
+
+  @top-right-corner {
+    content: "";
+    display: none;
+  }
+}
+
+.srl-pdf-cover {
+  page: cover;
+}

package/livingdocs/110.PDF/070.pdf-cover/scss/web.scss

@@ -0,0 +1 @@
+@use "srl";

package/livingdocs/110.PDF/070.pdf-cover/scss/xbrl.scss

@@ -0,0 +1 @@
+@use 'general';

package/livingdocs/110.PDF/080.pdf-toc-page/pdf-toc-page.html

@@ -3,6 +3,6 @@
     <div class="srl-pdf-toc-page__title" doc-editable="pdf-toc-page-title">
       Chapter title
     </div>
-    <div class="srl-pdf-toc" doc-container="toc"></div>
+    <div class="srl-pdf-toc-page__toc-container" doc-container="toc"></div>
   </div>
 </div>

package/livingdocs/110.PDF/080.pdf-toc-page/scss/editor.scss

@@ -0,0 +1,35 @@
+@use 'srl';
+@use 'web';
+@use 'sass:map';
+
+$page-margin-top: srl.system-size-unit(map.get(srl.$meta, pdf, margin, top));
+$page-margin-right: srl.system-size-unit(map.get(srl.$meta, pdf, margin, right));
+$page-margin-bottom: srl.system-size-unit(map.get(srl.$meta, pdf, margin, bottom));
+$page-margin-left: srl.system-size-unit(map.get(srl.$meta, pdf, margin, left));
+
+.srl-pdf-toc-page {
+  width: 595pt;
+  margin-left: auto;
+  margin-right: auto;
+  border: 1px solid #{srl.colors-primary-1000()};
+}
+
+.srl-pdf-toc-page__inner {
+  padding: (
+    $page-margin-top
+    $page-margin-right
+    $page-margin-bottom
+    $page-margin-left
+  );
+
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  column-gap: var(--srl-gutter-column-gap);
+  row-gap: var(--srl-gutter-row-gap);
+}
+
+.srl-pdf-toc-page__title,
+.srl-pdf-toc-page__toc-container {
+  grid-column: auto / span 6;
+  grid-column-start: 3;
+}

package/livingdocs/110.PDF/080.pdf-toc-page/scss/general.scss

@@ -0,0 +1,5 @@
+@use 'srl';
+
+.srl-pdf-toc-page__title {
+  @include srl.typography-toc-title();
+}

package/livingdocs/110.PDF/080.pdf-toc-page/scss/pdf.scss

@@ -0,0 +1,20 @@
+@use 'srl';
+@use 'sass:map';
+
+.srl-pdf-toc-page {
+  break-after: always;
+}
+
+.srl-pdf-toc-page__inner {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  width: 100%;
+}
+
+.srl-pdf-toc-page__title,
+.srl-pdf-toc-page__toc-container {
+  @include srl.grid-pdf-flex-col(6);
+}
+
+

package/livingdocs/110.PDF/080.pdf-toc-page/scss/web.scss

@@ -0,0 +1 @@
+@use "srl";

package/livingdocs/110.PDF/080.pdf-toc-page/scss/xbrl.scss

@@ -0,0 +1 @@
+@use 'general';

package/livingdocs/110.PDF/090.pdf-toc-item-title/pdf-toc-item-title.html

@@ -1,3 +1,3 @@
 <div class="srl-pdf-toc-item-title" doc-editable="pdf-toc-item-title-text">
-  ToC item title
+  Chapter title
 </div>

package/livingdocs/110.PDF/090.pdf-toc-item-title/scss/editor.scss

@@ -0,0 +1,3 @@
+@use 'srl';
+@use 'web';
+@use 'sass:map';

package/livingdocs/110.PDF/090.pdf-toc-item-title/scss/general.scss

@@ -0,0 +1,5 @@
+@use 'srl';
+
+.srl-pdf-toc-item-title {
+  @include srl.typography-toc-item-title();
+}

package/livingdocs/110.PDF/090.pdf-toc-item-title/scss/pdf.scss

@@ -0,0 +1,2 @@
+@use 'srl';
+@use 'sass:map';

package/livingdocs/110.PDF/090.pdf-toc-item-title/scss/web.scss

@@ -0,0 +1 @@
+@use "srl";

package/livingdocs/110.PDF/090.pdf-toc-item-title/scss/xbrl.scss

@@ -0,0 +1 @@
+@use 'general';

package/livingdocs/110.PDF/100.pdf-toc-item/pdf-toc-item.html

@@ -1,6 +1,6 @@
 <a class="srl-pdf-toc__item" doc-link="href" data-page-number="">
-  <div class="srl-pdf-toc__number" doc-editable="pdf-toc-item-number">1</div>
   <div class="srl-pdf-toc__text" doc-editable="pdf-toc-item-text">
-    Chapter Title
+    Article title
   </div>
+  <div class="srl-pdf-toc__number" doc-editable="pdf-toc-item-number">1</div>
 </a>

package/livingdocs/110.PDF/100.pdf-toc-item/scss/editor.scss

@@ -0,0 +1,3 @@
+@use 'srl';
+@use 'web';
+@use 'sass:map';

package/livingdocs/110.PDF/100.pdf-toc-item/scss/general.scss

@@ -0,0 +1,23 @@
+@use 'srl';
+
+.srl-pdf-toc__item {
+  padding-block: srl.spacer-get(100);
+  display: flex;
+  justify-content: space-between;
+  border-top: srl.system-size-unit(1pt) solid srl.colors-black-1000();
+  text-decoration: none;
+  @include srl.typography-title-h5();
+}
+
+.srl-pdf-toc__text {
+  width: calc(100% - srl.system-size-unit(24pt) - srl.spacer-get(100));
+}
+
+.srl-pdf-toc__number {
+  text-align: right;
+  width: srl.system-size-unit(24pt);
+
+  &:after {
+    content: target-counter(attr(data-page-number), page);
+  }
+}

package/livingdocs/110.PDF/100.pdf-toc-item/scss/pdf.scss

@@ -0,0 +1,2 @@
+@use 'srl';
+@use 'sass:map';

package/livingdocs/110.PDF/100.pdf-toc-item/scss/web.scss

@@ -0,0 +1 @@
+@use "srl";

package/livingdocs/110.PDF/100.pdf-toc-item/scss/xbrl.scss

@@ -0,0 +1 @@
+@use 'general';

package/livingdocs/999.Properties/pdf-spacer/properties.json

@@ -6,37 +6,33 @@
       {
         "caption": "Default"
       },
-      {
-        "caption": "XXXS spacer",
-        "value": "srl-spacer-xs"
-      },
       {
         "caption": "XXS spacer",
-        "value": "srl-spacer-xs"
+        "value": "srl-spacer-25"
       },
       {
         "caption": "XS spacer",
-        "value": "srl-spacer-xs"
+        "value": "srl-spacer-50"
       },
       {
         "caption": "S spacer",
-        "value": "srl-spacer-sm"
+        "value": "srl-spacer-100"
       },
       {
         "caption": "M spacer",
-        "value": "srl-spacer-md"
+        "value": "srl-spacer-200"
       },
       {
         "caption": "L spacer",
-        "value": "srl-spacer-lg"
+        "value": "srl-spacer-400"
       },
       {
         "caption": "XL spacer",
-        "value": "srl-spacer-xl"
+        "value": "srl-spacer-800"
       },
       {
         "caption": "XXL spacer",
-        "value": "srl-spacer-xxl"
+        "value": "srl-spacer-1600"
       }
     ]
   }

package/livingdocs/999.Properties/pdf-spacer/scss/pdf.scss

@@ -0,0 +1,29 @@
+@use "srl";
+
+.srl-spacer-25 {
+  margin-top: srl.spacer-get(25) !important;
+}
+
+.srl-spacer-50 {
+    margin-top: srl.spacer-get(50) !important;
+}
+
+.srl-spacer-100 {
+    margin-top: srl.spacer-get(100) !important;
+}
+
+.srl-spacer-200 {
+    margin-top: srl.spacer-get(200) !important;
+}
+
+.srl-spacer-400 {
+  margin-top: srl.spacer-get(400) !important;
+}
+
+.srl-spacer-800 {
+  margin-top: srl.spacer-get(800) !important;
+}
+
+.srl-spacer-1600 {
+  margin-top: srl.spacer-get(1600) !important;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-reporting/base",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "description": "Manage srl templates, build and publish",
   "bin": {
     "srl": "cli.js"