@simple-reporting/base 1.0.16 → 1.0.18

package/dev/src/assets/scss/web.scss

@@ -1,5 +1,6 @@
 @use "srl";
 @use "placeholders";
+@use "./components/note/accordion";
 
 .srl-grid {
   @extend %srl-grid-base;

package/dev/srl.config.json

@@ -2,7 +2,7 @@
   "meta": {
     "meta": {
       "title": {
-        "number-width": 400,
+        "number-width": 800,
         "number-width-pdf": 400
       },
       "list": {
@@ -154,8 +154,8 @@
         "letter-spacing": 0,
         "media": {
           "print": {
-            "font-size": "20pt",
-            "line-height": 1.2
+            "font-size": "16pt",
+            "line-height": 1.25
           },
           "up": {
             "tablet-pt": {
@@ -203,9 +203,6 @@
           "up": {
             "tablet-pt": {
               "font-size": 16
-            },
-            "desktop": {
-              "font-size": 16
             }
           }
         }
@@ -227,9 +224,6 @@
           "up": {
             "tablet-pt": {
               "font-size": 16
-            },
-            "desktop": {
-              "font-size": 16
             }
           }
         }
@@ -514,7 +508,7 @@
         "name": "button-text",
         "font-family": "Inter",
         "font-size": 12,
-        "line-height": 1.5,
+        "line-height": 1,
         "font-style": "normal",
         "font-weight": 400,
         "color": "black-1000",
@@ -522,7 +516,7 @@
         "media": {
           "print": {
             "font-size": "7pt",
-            "line-height": 1.429
+            "line-height": 1
           },
           "up": {
             "tablet-pt": {
@@ -765,6 +759,27 @@
         "name": "secondary-1000",
         "color": "#001987"
       },
+
+      {
+        "name": "tertiary-200",
+        "color": "#ccd1e7"
+      },
+      {
+        "name": "tertiary-400",
+        "color": "#99a3cf"
+      },
+      {
+        "name": "tertiary-600",
+        "color": "#6675b7"
+      },
+      {
+        "name": "tertiary-800",
+        "color": "#33479f"
+      },
+      {
+        "name": "tertiary-1000",
+        "color": "#001987"
+      },
       {
         "name": "yellow-200",
         "color": "#fff7dc"
@@ -852,7 +867,7 @@
           }
         }
       },
-      "300": {
+      "400": {
         "size": 32,
         "media": {
           "print": {
@@ -860,7 +875,7 @@
           }
         }
       },
-      "400": {
+      "800": {
         "size": 64,
         "media": {
           "print": {
@@ -868,7 +883,7 @@
           }
         }
       },
-      "500": {
+      "1600": {
         "size": 128,
         "media": {
           "print": {

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

@@ -5,7 +5,7 @@ $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(400);
+  @include srl.spacer-margin-top(800);
 }
 
 .srl-title-h2__number-text-container {

package/livingdocs/010.Titles/020.title-h2/title-h2.html

@@ -1,10 +1,9 @@
-<h2 class="srl-grid srl-title-h2 srl-linkable">
+<h2 class="srl-grid srl-title-h2 srl-linkable" data-category-marker="container">
   <span
-    class="srl-grid__inner srl-title-h2__number-text-container js-notes-marker"
-    data-category-marker="container"
+    class="srl-grid__inner srl-title-h2__number-text-container"
   >
     <span
-      class="srl-title-h2__number js-notes-marker-number"
+      class="srl-title-h2__number"
       data-category-marker="number"
       doc-optional
       doc-editable="title-h2-number"
@@ -12,11 +11,11 @@
       1
     </span>
     <span
-      class="srl-title-h2__text js-notes-marker-text"
+      class="srl-title-h2__text"
       data-category-marker="text"
       doc-editable="title-h2-text"
     >
       Title h2 Lorem ipsum dolor sit amet
     </span>
   </span>
-</h2>
+</h2>

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

@@ -5,7 +5,7 @@ $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(300);
+  @include srl.spacer-margin-top(400);
 }
 
 .srl-title-h3__number-text-container {

package/livingdocs/010.Titles/030.title-h3/title-h3.html

@@ -1,10 +1,9 @@
-<h3 class="srl-grid srl-title-h3 srl-linkable">
+<h3 class="srl-grid srl-title-h3 srl-linkable" data-category-marker="container">
   <span
-    class="srl-grid__inner srl-title-h3__number-text-container js-notes-marker"
-    data-category-marker="container"
+    class="srl-grid__inner srl-title-h3__number-text-container"
   >
     <span
-      class="srl-title-h3__number js-notes-marker-number"
+      class="srl-title-h3__number"
       data-category-marker="number"
       doc-optional
       doc-editable="title-h3-number"
@@ -12,7 +11,7 @@
       1.1.
     </span>
     <span
-      class="srl-title-h3__text js-notes-marker-text"
+      class="srl-title-h3__text"
       data-category-marker="text"
       doc-editable="title-h3-text"
     >

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

@@ -5,7 +5,7 @@ $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(300);
+  @include srl.spacer-margin-top(400);
 }
 
 .srl-title-h4__number-text-container {

package/livingdocs/010.Titles/040.title-h4/title-h4.html

@@ -1,10 +1,9 @@
-<h4 class="srl-grid srl-title-h4 srl-linkable">
+<h4 class="srl-grid srl-title-h4 srl-linkable" data-category-marker="container">
   <span
-    class="srl-grid__inner srl-title-h4__number-text-container js-notes-marker"
-    data-category-marker="container"
+    class="srl-grid__inner srl-title-h4__number-text-container"
   >
     <span
-      class="srl-title-h4__number js-notes-marker-number"
+      class="srl-title-h4__number"
       data-category-marker="number"
       doc-optional
       doc-editable="title-h4-number"
@@ -12,7 +11,7 @@
       1.1.1.
     </span>
     <span
-      class="srl-title-h4__text js-notes-marker-text"
+      class="srl-title-h4__text"
       data-category-marker="text"
       doc-editable="title-h4-text"
     >

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

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

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

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

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

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

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

@@ -1,5 +1,6 @@
 @use "srl";
 
 .srl-footnote-container {
+  overflow: hidden;
   @include srl.spacer-margin-top(200);
 }

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

@@ -0,0 +1,9 @@
+@use 'srl';
+
+.srl-footnote-container:not(.srl-grid) {
+  @include srl.grid-pdf-flex-col(6);
+
+  .srl-wide-width & {
+    @include srl.grid-pdf-flex-col(8);
+  }
+}

package/livingdocs/040.Media/010.table/ld-conf.json

@@ -4,12 +4,7 @@
   "properties": ["pdf-padding", "pdf-font-size", "width-reduced", "pdf-spacer"],
   "directives": {
     "nswow-table": {
-      "services": [
-        {
-          "service": "nswow-table",
-          "label": "ns.wow Table"
-        }
-      ]
+      "service": "nswow-table"
     }
   }
 }

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

@@ -10,7 +10,8 @@ $table-border-bold: map.get(srl.$meta, table, border, bold);
 @include srl.system-add-root-style(srl-table-border-bold-width, srl.system-size-unit(map.get($table-border-bold, media, print, width)), print);
 
 .srl-table {
-  @include srl.spacer-margin-top(300);
+  display: block;
+  @include srl.spacer-margin-top(400);
 }
 
 .srl-table__container {
@@ -22,9 +23,17 @@ $table-border-bold: map.get(srl.$meta, table, border, bold);
 table {
   border-collapse: collapse;
   border-spacing: 0;
-  width: 100%;
+  min-width: 100%;
   margin: 0;
   table-layout: fixed;
+
+  .responsive-table & {
+    table-layout: auto;
+  }
+
+  @-moz-document url-prefix() {
+    border-collapse: inherit;
+  }
 }
 
 th,
@@ -201,7 +210,7 @@ td {
 
   &[class*="ind_ind"] {
     &:first-child {
-      padding-left: srl.spacer-get(300);
+      padding-left: srl.spacer-get(400);
     }
   }
 
@@ -294,6 +303,31 @@ td {
   /*
   Responsive CSS tables
   */
+  &:first-child {
+    .responsive-table & {
+      background: white;
+      position: sticky;
+      left: 0;
+      z-index: 2;
+    }
+
+    &:not(:first-child) {
+      .responsive-table & {
+        position: relative;
+        z-index: 1;
+      }
+    }
+
+    .has-shadow & {
+      box-shadow: 0 15px 15px rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  &:nth-child(2) {
+    .has-shadow & {
+      padding-left: calc(#{srl.spacer-get(map.get(srl.$meta, table, padding, regular, left))} + 24px);
+    }
+  }
 
   /*
   Paragraphs and spans
@@ -325,4 +359,22 @@ td {
 .note-link {
   color: srl.colors-primary-1000();
   text-decoration: none;
+  -webkit-appearance: none;
+  border: none;
+  padding: 0;
+  background: none;
+  cursor: pointer;
+  transition: color 0.3s ease;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 0s;
+  }
+
+  &:hover {
+    color: srl.colors-primary-1000();
+  }
+
+  &:focus {
+    color: srl.colors-primary-1000();
+  }
 }

package/livingdocs/040.Media/010.table/table.html

@@ -1,9 +1,11 @@
-<srl-ld-table class="srl-table">
-  <div class="srl-table__container" doc-include="nswow-table">
-    <p class="srl-grid srl-paragraph">
-      <span class="srl-grid__inner srl-paragraph__text">
-        Table placeholder
-      </span>
-    </p>
-  </div>
-</srl-ld-table>
+<div class="srl-table">
+  <srl-ld-table data-remove-from-xbrl="transient" data-remove-from-pdf="transient">
+    <div ref="wrapper" class="srl-table__container" doc-include="nswow-table">
+      <p class="srl-grid srl-paragraph">
+        <span class="srl-grid__inner srl-paragraph__text">
+          Table placeholder
+        </span>
+      </p>
+    </div>
+  </srl-ld-table>
+</div>

package/livingdocs/040.Media/010.table/table.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 const props = withDefaults(defineProps<{
   responsive?: boolean
   download?: boolean

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

@@ -2,7 +2,7 @@
 @use "assets/scss/placeholders";
 
 .srl-image {
-  @include srl.spacer-margin-top(400);
+  @include srl.spacer-margin-top(800);
 }
 
 .srl-grid--media {

package/livingdocs/040.Media/030.video/ld-conf.json

@@ -14,6 +14,9 @@
     },
     "link": {
       "plainText": true
+    },
+    "text": {
+      "plainText": true
     }
   }
 }

package/livingdocs/040.Media/030.video/scss/general.scss

@@ -1,5 +1,9 @@
 @use 'srl';
 
+.srl-video {
+  display: block;
+}
+
 .srl-video__video-link-container {
   @include srl.spacer-margin-top(100);
 }

package/livingdocs/040.Media/030.video/scss/web.scss

@@ -23,6 +23,15 @@
     width: 100%;
     height: 100%;
   }
+
+  video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 }
 
 .srl-video__thumbnail {
@@ -30,43 +39,17 @@
   top: 0;
   left: 0;
   bottom: 0;
+  opacity: 1;
+  transition: opacity 0.3s ease;
 }
 
 .srl-video__play {
   position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  top: srl.spacer-get(400);
+  left: srl.spacer-get(400);
   z-index: 5;
-}
-
-.srl-video__play-button {
-  width: 48px;
-  height: 48px;
-  background-color: srl.colors-white-1000();
-  cursor: pointer;
-  padding: 0;
-  border-radius: 50%;
-  transition: background-color 0.3s ease;
-  -webkit-appearance: none;
-  border: 1px solid srl.colors-primary-1000();
-  color: srl.colors-primary-1000();
-
-  @media (prefers-reduced-motion: reduce) {
-    transition-duration: 0s;
-  }
-
-  &:hover {
-    background-color: srl.colors-primary-1000();
-    border-color: srl.colors-primary-1000();
-    color: srl.colors-white-1000();
-  }
-
-  &:focus {
-    background-color: srl.colors-secondary-1000();
-    border-color: srl.colors-secondary-1000();
-    color: srl.colors-white-1000();
-  }
+  opacity: 1;
+  transition: opacity 0.3s ease;
 }
 
 .srl-video__play-button-inner {
@@ -92,4 +75,12 @@
 
 .srl-video__video-link-container {
   @extend %srl-regular-width;
+}
+
+.srl-video__started {
+    .srl-video__thumbnail,
+    .srl-video__play {
+      opacity: 0;
+      pointer-events: none;
+    }
 }

package/livingdocs/040.Media/030.video/video.html

@@ -1,17 +1,18 @@
-<div class="srl-video" data-autoload="video">
+<div class="srl-video">
   <div class="srl-grid srl-grid--media">
     <div class="srl-grid__inner srl-video__inner">
-      <div class="srl-video__video-container" doc-html="free-html"  data-remove-from-pdf="complete"></div>
-      <img class="srl-video__thumbnail" doc-image="video-thumbnail"></img>
-      <div class="srl-video__play" data-remove-from-pdf="complete">
-        <button class="srl-video__play-button" type="button">
-          <div class="srl-video__play-button-inner">
-            <svg class="svg svg-play" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5 3L19 12L5 21V3Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-          </div>
-        </button>
-      </div>
+      <srl-ld-video data-remove-from-xbrl="transient" data-remove-from-pdf="transient">
+        <div class="srl-video__video-container" doc-html="free-html"  data-remove-from-pdf="complete"></div>
+        <img class="srl-video__thumbnail" doc-image="video-thumbnail"></img>
+        <div class="srl-video__play" data-remove-from-pdf="complete">
+          <button class="srl-button srl-has-icon" type="button">
+              <svg class="svg svg-play" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M5 3L19 12L5 21V3Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            <span doc-editable="text">Video abspielen</span>
+          </button>
+        </div>
+      </srl-ld-video>
     </div>
   </div>
   <div class="srl-grid">

package/livingdocs/040.Media/030.video/video.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { onMounted, ref, useId } from 'vue'
+
+const id = useId()
+const rootEl = ref<HTMLDivElement>()
+const button = ref<HTMLButtonElement>()
+const video = ref<HTMLVideoElement>()
+
+onMounted(() => {
+  video.value = rootEl.value?.querySelector('video') || undefined
+  if (video.value) {
+    video.value.id = id
+    video.value.playsInline = true
+    video.value.controls = true
+    video.value.tabIndex = -1
+    button.value = rootEl.value?.querySelector('button') || undefined
+    if (button.value) {
+      const label = button.value.textContent || 'Play Video'
+      button.value.setAttribute('aria-label', label)
+      button.value.setAttribute('title', label)
+      button.value.setAttribute('aria-controls', id)
+      button.value.addEventListener('click', () => {
+        rootEl.value?.classList.add('srl-video__started')
+        if (video.value) {
+          video.value.tabIndex = 0
+        }
+
+        if (button.value) {
+          button.value.setAttribute('aria-hidden', 'true')
+          button.value.setAttribute('tabindex', '-1')
+        }
+
+        const thumbnail = rootEl.value?.querySelector('.srl-video__thumbnail') as HTMLImageElement
+        if (thumbnail) {
+          thumbnail.ariaHidden = 'true'
+        }
+        video.value?.focus()
+        video.value?.play()
+      })
+    }
+  }
+})
+</script>
+
+<template>
+  <div ref="rootEl">
+    <slot/>
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

package/livingdocs/060.Buttons/010.button-container/button-container.html

@@ -0,0 +1,5 @@
+<div class="srl-grid srl-button-container">
+  <div class="srl-grid__inner srl-button-container__inner" doc-container="button-container">
+
+  </div>
+</div>

package/livingdocs/060.Buttons/010.button-container/ld-conf.json

@@ -0,0 +1,19 @@
+{
+  "name": "button-container",
+  "label": "Button container",
+  "directives": {
+    "button-container": {
+      "allowedChildren": [
+        "button"
+      ],
+      "defaultComponents": {
+        "paragraph": "button"
+      },
+      "defaultContent": [
+        {
+          "component": "button"
+        }
+      ]
+    }
+  }
+}

package/livingdocs/060.Buttons/010.button-container/properties.json

@@ -0,0 +1 @@
+{}

package/livingdocs/060.Buttons/010.button-container/scss/app.scss

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

package/livingdocs/060.Buttons/010.button-container/scss/editor.scss

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

package/livingdocs/060.Buttons/010.button-container/scss/general.scss

@@ -0,0 +1,6 @@
+@use "srl";
+
+.srl-button-container__inner {
+  display: flex;
+  gap: srl.spacer-get(400);
+}

package/livingdocs/060.Buttons/010.button-container/scss/pdf.scss

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

package/livingdocs/060.Buttons/010.button-container/scss/web.scss

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

package/livingdocs/060.Buttons/010.button-container/scss/word.scss

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

package/livingdocs/060.Buttons/010.button-container/scss/xbrl.scss

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

package/livingdocs/060.Buttons/020.button/button.html

@@ -0,0 +1,4 @@
+<a doc-link="href" class="srl-button">
+  <i class="srl-button__icon" aria-hidden="true"></i>
+  <span class="srl-button__text" doc-editable="button-text">Button</span>
+</a>