@simple-reporting/base 1.0.36 → 1.0.38

package/dev/package.json

@@ -24,15 +24,14 @@
     "postinstall": "srl prepare"
   },
   "dependencies": {
-    "@simple-reporting/base": "^1.0.36",
-    "axios": "^1.12.2",
+    "@fortawesome/fontawesome-free": "^7.2.0",
+    "@simple-reporting/base": "^1.0.38",
     "chalk": "^5.6.2",
     "exceljs": "^4.4.0",
     "file-saver": "^2.0.5",
     "highcharts": "^11.4.8",
     "modern-css-reset": "^1.4.0",
     "node-html-parser": "^7.0.1",
-    "pinia": "^2.3.1",
     "scrollmonitor": "^1.2.11",
     "vite-plugin-pwa": "^0.21.2",
     "vue": "^3.5.13",

package/dev/src/App.vue

@@ -7,8 +7,7 @@ const mainNavigation = useMenu('menuMain')
 <template>
   <div class="srl-page__wrap">
     <PageBypassLinks />
-    <PageHeader />
-    <PageMainNavigation :mainNavigation="mainNavigation" />
+    <PageHeader :mainNavigation="mainNavigation" />
     <PageMain :mainNavigation="mainNavigation" />
     <PageFooter />
   </div>

package/dev/src/Autoload.ts

@@ -3,4 +3,4 @@ import ArticleAutoloader from 'srl/ArticleAutoloader'
 const ClassAutoLoader = new ArticleAutoloader()
 
 export default ClassAutoLoader
-export { ClassAutoLoader }
+export { ClassAutoLoader }

package/dev/src/Dialog.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import VRuntimeTemplate from 'vue3-runtime-template'
-import SvgClose from '@/components/Svg/Close.vue'
 
 const props = withDefaults(
   defineProps<{
     header?: string
-    content: string
+    content?: string
   }>(),
   {
     header: '',
@@ -25,78 +24,30 @@ function close() {
 <template>
   <div class="srl-dialog srl-bg-light srl-color-dark" @click.stop>
     <header class="srl-dialog__header">
-      <h2 v-if="props.header !== ''" class="srl-dialog__title" v-html="props.header" />
+      <div v-if="props.header !== '' || $slots.header" class="srl-dialog__header--body">
+        <h2 v-if="props.header !== ''" class="srl-dialog__title" v-html="props.header" />
+        <slot name="header"/>
+      </div>
       <button
         type="button"
-        class="srl-dialog__close"
+        class="srl-dialog__close srl-button srl-button--icon"
         :title="$t('modalClose')"
         :aria-label="$t('modalClose')"
         @click="close"
       >
-        <SvgClose :title="$t('modalClose')" />
+        <i class="srl-icon-close" aria-hidden="true" />
       </button>
     </header>
     <main class="srl-dialog__main srl-article-root" tabindex="-1">
       <VRuntimeTemplate v-if="props.content !== ''" :template="props.content" />
+      <slot name="main"/>
     </main>
+    <footer v-if="$slots.footer" class="srl-dialog__footer">
+      <slot name="footer"/>
+    </footer>
   </div>
 </template>
 
 <style lang="scss">
-@use 'srl';
-
-body:has(.srl-page__dialog[open]) {
-  overflow: hidden;
-}
-
-.srl-page__dialog {
-  display: block;
-  padding: 0;
-  border: 0;
-  border-radius: srl.system-size-unit(16);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.3s;
-  position: fixed;
-  inset: 0;
-  margin: 10vh auto 0;
-
-  &::backdrop {
-    background-color: rgba(0, 0, 0, 0.3);
-    z-index: -1;
-  }
-
-  &[open] {
-    opacity: 1;
-    pointer-events: all;
-  }
-}
-
-.srl-dialog {
-  width: 80vw;
-  height: 80vh;
-
-  &__close {
-    width: srl.system-size-unit(50);
-    height: srl.system-size-unit(50);
-    position: absolute;
-    top: 0;
-    right: srl.system-size-unit(20);
-    background: transparent;
-    border: none;
-    padding: 0;
-    margin: 0;
-    svg {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &__main {
-    padding: srl.system-size-unit(40);
-    height: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-}
+@use "@/assets/scss/components/dialog";
 </style>

package/dev/src/assets/fonts/FontAwesome/font.scss

@@ -0,0 +1,2 @@
+@use "fa-font";
+

package/dev/src/assets/fonts/Inter/inter.scss

@@ -1,7 +1,6 @@
 @font-face {
   font-family: 'Inter';
-  src: url('assets/fonts/Inter/Inter-SemiBold.woff2') format('woff2'),
-  url('assets/fonts/Inter/Inter-SemiBold.ttf') format('truetype');
+  src: url('assets/fonts/Inter/Inter-SemiBold.woff2') format('woff2');
   font-weight: 600;
   font-style: normal;
   font-display: swap;
@@ -9,8 +8,7 @@
 
 @font-face {
   font-family: 'Inter';
-  src: url('assets/fonts/Inter/Inter-Regular.woff2') format('woff2'),
-  url('assets/fonts/Inter/Inter-Regular.ttf') format('truetype');
+  src: url('assets/fonts/Inter/Inter-Regular.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
   font-display: swap;

package/dev/src/assets/images/accordion-minus.svg

@@ -0,0 +1,4 @@
+<svg class="srl-svg srl-svg-minus" aria-label="Minus" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>Minus</title>
+    <path d="M4.16699 10H15.8337" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dev/src/assets/images/accordion-plus.svg

@@ -0,0 +1,4 @@
+<svg class="srl-svg srl-svg-plus" aria-label="Plus" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>Plus</title>
+    <path d="M10.0003 4.1665V15.8332M4.16699 9.99984H15.8337" stroke="#181F27" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dev/src/assets/images/arrow-left.svg

@@ -0,0 +1,5 @@
+<svg class="srl-svg srl-svg-arrow-left" aria-label="Arrow left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
+    <title>Arrow left</title>
+    <line x1="19" y1="12" x2="5" y2="12"></line>
+    <polyline points="12 19 5 12 12 5"></polyline>
+</svg>

package/dev/src/assets/images/arrow-right.svg

@@ -0,0 +1,5 @@
+<svg class="srl-svg srl-svg-arrow-right" aria-label="Arrow right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" >
+    <title>Arrow right</title>
+    <line x1="5" y1="12" x2="19" y2="12"></line>
+    <polyline points="12 5 19 12 12 19"></polyline>
+</svg>

package/dev/src/assets/images/arrow-up.svg

@@ -0,0 +1,5 @@
+<svg class="srl-svg srl-svg-arrow-up" aria-label="Arrow up" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
+    <title>Arrow up</title>
+    <line x1="12" y1="19" x2="12" y2="5"></line>
+    <polyline points="5 12 12 5 19 12"></polyline>
+</svg>

package/dev/src/assets/images/chevron-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>

package/dev/src/assets/images/chevron-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>

package/dev/src/assets/images/chevron-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M311.1 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L243.2 256 73.9 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>

package/dev/src/assets/images/chevron-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M201.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 173.3 54.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"/></svg>

package/dev/src/assets/images/close.svg

@@ -0,0 +1,5 @@
+<svg class="srl-svg srl-svg-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
+    <title>Close</title>
+    <line x1="18" y1="6" x2="6" y2="18"></line>
+    <line x1="6" y1="6" x2="18" y2="18"></line>
+</svg>

package/dev/src/assets/images/download.svg

@@ -0,0 +1,6 @@
+<svg class="srl-svg srl-svg-download" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
+    <title>Download</title>
+    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+    <polyline points="7 10 12 15 17 10"></polyline>
+    <line x1="12" y1="15" x2="12" y2="3"></line>
+</svg>

package/dev/src/assets/images/facebook.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M80 299.3l0 212.7 116 0 0-212.7 86.5 0 18-97.8-104.5 0 0-34.6c0-51.7 20.3-71.5 72.7-71.5 16.3 0 29.4 .4 37 1.2l0-88.7C291.4 4 256.4 0 236.2 0 129.3 0 80 50.5 80 159.4l0 42.1-66 0 0 97.8 66 0z"/></svg>

package/dev/src/assets/images/instagram.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224.3 141a115 115 0 1 0 -.6 230 115 115 0 1 0 .6-230zm-.6 40.4a74.6 74.6 0 1 1 .6 149.2 74.6 74.6 0 1 1 -.6-149.2zm93.4-45.1a26.8 26.8 0 1 1 53.6 0 26.8 26.8 0 1 1 -53.6 0zm129.7 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM399 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>

package/dev/src/assets/images/language.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M317.5 420.1C295.4 465 271.5 480 256 480s-39.4-15-61.5-59.9c-19-38.6-32.1-91.3-34.2-148.1l191.4 0c-2.1 56.8-15.2 109.5-34.2 148.1zM351.7 240l-191.4 0c2.1-56.8 15.2-109.5 34.2-148.1 22.1-44.9 46-59.9 61.5-59.9s39.4 15 61.5 59.9c19 38.6 32.1 91.3 34.2 148.1zm32 32l95.7 0c-6.5 92.5-69.2 169.5-154.2 197.1 33-44.2 55.8-117.8 58.5-197.1zm95.7-32l-95.7 0c-2.7-79.3-25.5-152.9-58.5-197.1 85 27.6 147.7 104.6 154.2 197.1zm-351.2 0l-95.7 0c6.5-92.5 69.2-169.5 154.2-197.1-33 44.2-55.8 117.8-58.5 197.1zM32.6 272l95.7 0c2.7 79.3 25.5 152.9 58.5 197.1-85-27.6-147.7-104.6-154.2-197.1zM256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512z"/></svg>

package/dev/src/assets/images/linkedIn.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M100.3 448l-92.9 0 0-299.1 92.9 0 0 299.1zM53.8 108.1C24.1 108.1 0 83.5 0 53.8 0 39.5 5.7 25.9 15.8 15.8s23.8-15.8 38-15.8 27.9 5.7 38 15.8 15.8 23.8 15.8 38c0 29.7-24.1 54.3-53.8 54.3zM447.9 448l-92.7 0 0-145.6c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7l0 148.1-92.8 0 0-299.1 89.1 0 0 40.8 1.3 0c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3l0 164.3-.1 0z"/></svg>

package/dev/src/assets/images/logo.svg

@@ -0,0 +1 @@
+<svg class="iz-header__logo-svg" viewBox="0 0 160 56" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M158.585 32.7946C157.678 31.0546 156.492 29.5688 155.057 28.3768C153.537 27.117 152.003 26.2216 150.23 25.555C148.506 24.9082 145.255 24.1935 145.117 24.1624L137.558 22.4535C136.66 22.2304 135.66 21.9281 134.581 21.5581C133.584 21.2163 132.66 20.7813 131.833 20.2644C131.011 19.7532 130.429 19.2249 130.05 18.6487C129.635 18.0188 129.432 17.3296 129.432 16.5472C129.432 15.4427 129.658 14.5332 130.101 13.8468C130.595 13.0841 131.231 12.4825 132.047 12.0051C132.94 11.4854 133.937 11.1069 135.013 10.8809C136.168 10.638 137.321 10.5165 138.442 10.5165C139.883 10.5165 141.256 10.6916 142.527 11.0334C143.713 11.3554 144.775 11.8667 145.679 12.5474C146.555 13.2112 147.238 14.036 147.766 15.067C148.159 15.8353 148.422 16.7336 148.549 17.7335L148.772 19.4989H158.421L158.24 17.3155C158.065 15.1913 157.489 13.0305 156.619 11.234C155.591 9.10983 154.178 7.30205 152.424 5.85583C150.687 4.42655 148.656 3.356 146.388 2.67808C144.188 2.02276 141.787 1.68945 139.256 1.68945C137.067 1.68945 134.829 1.94932 132.609 2.46341C130.327 2.99445 128.228 3.83619 126.367 4.96323C124.675 5.99141 123.243 7.32182 122.102 8.92623C118.537 5.17791 113.563 2.84474 108.063 2.84474C102.018 2.84474 96.7785 6.77384 93.3239 11.1238C89.8665 6.77384 84.6296 2.84474 78.5848 2.84474C72.5401 2.84474 67.4387 5.50557 63.8401 9.70866C60.2415 5.50557 54.9679 2.84474 49.0954 2.84474C43.2229 2.84474 37.8109 6.77384 34.3535 11.1238C30.8961 6.77384 25.6592 2.84474 19.6144 2.84474C8.79881 2.85604 0 11.8695 0 22.9478V53.5163H9.75072V22.9478C9.75072 17.2449 14.177 12.6039 19.6173 12.6039C25.0576 12.6039 29.4838 17.2449 29.4838 22.9478V53.5163H39.2345V22.9478C39.2345 17.2449 43.6608 12.6039 49.1011 12.6039C54.5413 12.6039 58.9676 17.2449 58.9676 22.9478V53.5163H68.7268V22.9478C68.7268 17.2449 73.153 12.6039 78.5933 12.6039C84.0336 12.6039 88.4599 17.2449 88.4599 22.9478V53.5163H98.2106V22.9478C98.2106 17.2449 102.637 12.6039 108.077 12.6039C113.517 12.6039 117.944 17.2449 117.944 22.9478V35.6447C117.944 36.8 118.153 39.1247 118.373 40.2574C119.339 45.1666 121.511 48.2568 124.717 50.6945C128.463 53.5474 133.361 54.9936 139.27 54.9936C141.569 54.9936 143.933 54.7337 146.295 54.2253C148.749 53.6943 150.987 52.7988 152.952 51.5673C154.975 50.299 156.658 48.6325 157.961 46.6128C159.314 44.5113 160 41.9691 160 39.0569C160 36.6926 159.528 34.5854 158.599 32.7946H158.585ZM127.677 28.9813C126.398 28.374 125.237 27.6594 124.217 26.8487C122.811 25.7301 121.695 24.3404 120.904 22.7219C120.107 21.0949 119.703 19.1091 119.703 16.8183C119.703 14.0954 120.339 11.6972 121.59 9.69454C121.754 9.43467 121.924 9.18045 122.102 8.9347C125.548 12.5559 127.677 17.5019 127.677 22.945V28.9813ZM149.427 42.3448C148.778 43.2345 147.964 43.952 146.936 44.5395C145.863 45.1525 144.679 45.5931 143.422 45.8502C142.089 46.1242 140.781 46.2626 139.533 46.2626C136.16 46.2626 133.44 45.4378 131.222 43.7402C129.262 42.2431 128.2 40.2291 127.875 37.4016L127.683 35.6475V28.987C128.059 29.1649 128.44 29.3344 128.836 29.4954C130.479 30.1592 132.299 30.7495 134.239 31.2495L134.273 31.258L134.307 31.2665L141.614 32.8906C142.803 33.1759 143.998 33.5205 145.168 33.9188C146.235 34.2832 147.193 34.7436 148.012 35.2775C148.73 35.7492 149.283 36.3113 149.704 36.9977C150.074 37.605 150.263 38.4213 150.263 39.4213C150.263 40.6217 149.992 41.5765 149.43 42.3448H149.427Z" fill="currentColor"></path></svg>

package/dev/src/assets/images/menu-light.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2.5 10H17.5M2.5 5H17.5M2.5 15H17.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dev/src/assets/images/menu.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2.5 10H17.5M2.5 5H17.5M2.5 15H17.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dev/src/assets/images/nav-arrow-left.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9 1L1 9L9 17" stroke="#181F27" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dev/src/assets/images/nav-arrow-right.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1 1L9 9L1 17" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dev/src/assets/images/search.svg

@@ -0,0 +1,5 @@
+<svg class="srl-svg srl-svg-search" aria-label="Search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
+    <title>Search</title>
+    <circle cx="11" cy="11" r="8"></circle>
+    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+</svg>

package/dev/src/assets/images/twitter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M459.4 151.7c.3 4.5 .3 9.1 .3 13.6 0 138.7-105.6 298.6-298.6 298.6-59.5 0-114.7-17.2-161.1-47.1 8.4 1 16.6 1.3 25.3 1.3 49.1 0 94.2-16.6 130.3-44.8-46.1-1-84.8-31.2-98.1-72.8 6.5 1 13 1.6 19.8 1.6 9.4 0 18.8-1.3 27.6-3.6-48.1-9.7-84.1-52-84.1-103l0-1.3c14 7.8 30.2 12.7 47.4 13.3-28.3-18.8-46.8-51-46.8-87.4 0-19.5 5.2-37.4 14.3-53 51.7 63.7 129.3 105.3 216.4 109.8-1.6-7.8-2.6-15.9-2.6-24 0-57.8 46.8-104.9 104.9-104.9 30.2 0 57.5 12.7 76.7 33.1 23.7-4.5 46.5-13.3 66.6-25.3-7.8 24.4-24.4 44.8-46.1 57.8 21.1-2.3 41.6-8.1 60.4-16.2-14.3 20.8-32.2 39.3-52.6 54.3z"/></svg>

package/dev/src/assets/images/xing.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M162.7 210c-1.8 3.3-25.2 44.4-70.1 123.5-4.9 8.3-10.8 12.5-17.7 12.5L9.8 346c-7.7 0-12.1-7.5-8.5-14.4l69-121.3c.2 0 .2-.1 0-.3L26.4 134.4c-4.3-7.8 .3-14.1 8.5-14.1l65.1 0c7.3 0 13.3 4.1 18 12.2L162.7 210zM382.6 46.1l-144 253 0 .3 91.6 166.6c3.9 7.1 .2 14.1-8.5 14.1l-65.2 0c-7.6 0-13.6-4-18-12.2L146.1 299.4c3.3-5.8 51.5-90.8 144.8-255.2 4.6-8.1 10.4-12.2 17.5-12.2l65.7 0c8 0 12.3 6.7 8.5 14.1z"/></svg>

package/dev/src/assets/scss/app.scss

@@ -2,11 +2,20 @@
 @use 'web';
 @use "./components/note/accordion";
 
+html {
+  -webkit-text-size-adjust: 100%;
+  scrollbar-gutter: stable;
+}
+
 html,
 body {
   overscroll-behavior: none;
 }
 
+* {
+  scroll-margin-top: calc(srl.system-root-style(srl-header-height) + srl.spacer-get(400));
+}
+
 .fade-enter-from {
   opacity: 0;
 }

package/dev/src/assets/scss/components/button.scss

@@ -0,0 +1,37 @@
+@use "srl";
+
+.srl-button {
+  @extend %srl-button;
+}
+
+.srl-button--ghost {
+  @extend %srl-button--ghost;
+}
+
+.srl-button--icon {
+  @extend %srl-button--icon;
+}
+
+.srl-button--white {
+  @extend %srl-button--white;
+}
+
+.srl-button--primary {
+  @extend %srl-button--primary;
+}
+
+.srl-button--secondary {
+  @extend %srl-button--secondary;
+}
+
+.srl-button--transparent-white {
+  @extend %srl-button--transparent-white;
+}
+
+.srl-button--transparent-black {
+  @extend %srl-button--transparent-black;
+}
+
+.srl-button__switch {
+  @include srl.button-switch(".srl-button");
+}

package/dev/src/assets/scss/components/dialog.scss

@@ -0,0 +1,84 @@
+@use "srl";
+
+body:has(.srl-page__dialog[open]) {
+    overflow: hidden;
+}
+.srl-page__dialog[open] {
+    border: none;
+    padding: 0;
+    width: srl.system-root-style(srl-container-max-width, 100%);
+    max-width: 100%;
+    max-height: 100dvh;
+    background-color: transparent;
+
+    &::backdrop {
+        background: srl.colors-grey-400();
+        opacity: 0.6;
+    }
+}
+
+
+.srl-dialog {
+    position: relative;
+    background-color: srl.colors-white-1000();
+    padding-block: srl.system-root-style(srl-container-padding, 0);
+    max-height: 100dvh;
+    display: flex;
+    flex-direction: column;
+    gap: srl.system-root-style(srl-container-padding, 0);
+}
+
+.srl-dialog__header,
+.srl-dialog__footer {
+    padding-inline: srl.system-root-style(srl-container-padding, 0);
+}
+
+.srl-dialog__header {
+    flex: 0 0 auto;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-end;
+    align-items: flex-start;
+    position: relative;
+    gap: srl.grid-get-gutter-column-gap();
+}
+
+.srl-dialog__main {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    overflow: auto;
+
+    padding-block-end: srl.system-root-style(srl-container-padding, 0);
+    padding-inline-start: srl.system-root-style(srl-container-padding, 0);
+    padding-inline-end: calc(srl.system-root-style(srl-container-padding, 0) / 4 * 3);
+    margin-inline-end: calc(srl.system-root-style(srl-container-padding, 0) / 4);
+
+    @media (hover: hover) {
+        padding-inline-end: calc(srl.system-root-style(srl-container-padding, 0) / 4 * 3 - #{srl.system-size-unit(16)});
+        scrollbar-gutter: stable;
+    }
+
+    .srl-grid,
+    .srl-table__container > div,
+    .srl-category-accordion__inner-head {
+        padding-inline: 0;
+        margin-inline: 0;
+    }
+}
+
+.srl-dialog__header--body {
+    flex: 1 1 auto;
+}
+
+.srl-dialog__footer {
+    flex: 0 0 auto;
+}
+
+@include srl.grid-media-up(tablet-pt) {
+    .srl-page__dialog[open] {
+        border-radius: srl.system-size-unit(16);
+    }
+}

package/dev/src/assets/scss/components/fontawesome.scss

@@ -0,0 +1,56 @@
+@use "sass:list";
+@use "srl";
+@use "srl/fa";
+
+$brands: (
+  facebook-f,
+  linkedin-in,
+  xing,
+  x-twitter,
+  instagram
+);
+
+$icons: (
+  search,
+  download,
+  close,
+  chevron-up,
+  chevron-right,
+  chevron-down,
+  chevron-left,
+  arrow-up,
+  arrow-right,
+  arrow-down,
+  arrow-left
+);
+
+@at-root {
+  .#{fa.$css-prefix},
+  [class*="#{fa.$css-prefix}-"] {
+    @extend %srl-icon-base;
+  }
+}
+
+@each $name in $brands {
+  .#{fa.$css-prefix}-#{$name} {
+    @include fa.brands($name);
+  }
+}
+
+@each $name in $icons {
+  .#{fa.$css-prefix}-#{$name} {
+    @include fa.icon($name);
+  }
+  .#{fa.$css-prefix}-thin-#{$name} {
+    @include fa.thin($name);
+  }
+  .#{fa.$css-prefix}-light-#{$name} {
+    @include fa.light($name);
+  }
+  .#{fa.$css-prefix}-regular-#{$name} {
+    @include fa.regular($name);
+  }
+  .#{fa.$css-prefix}-solid-#{$name} {
+    @include fa.solid($name);
+  }
+}

package/dev/src/assets/scss/components/note/accordion.scss

@@ -1,9 +1,10 @@
 @use "srl";
-@use "@/assets/scss/placeholders";
+@use "srl/fa";
+@use "srl/button";
 
 $transition-duration: .3s;
 
-.lc-accordion
+.srl-category-accordion
 {
   @include srl.spacer-margin-top(800);
 
@@ -50,63 +51,76 @@ $transition-duration: .3s;
     margin-block-start: 0;
   }
 
-  &:has(+ .lc-accordion) {
-    .lc-accordion__inner:after {
+  &:has(+ .srl-category-accordion) {
+    .srl-category-accordion__inner:after {
       display: none;
     }
   }
 
   &__head {
-    @include srl.typography-title-h3();
-    width: 100%;
     border-style: solid;
     border-color: srl.colors-primary-1000();
     border-width: srl.system-size-unit(1) 0 0 0;
-    text-align: left;
-    background-color: transparent;
-    padding: srl.spacer-get(400) 0;
-    @include srl.spacer-gap(200);
-    cursor: pointer;
-    display: flex;
+
     @extend %srl-regular-width;
 
-    .lc-title-h3__number {
-      width: srl.spacer-get(800);
-      color: srl.colors-black-1000();
+    &--btn {
+      width: 100%;
+      text-align: left;
+      background-color: transparent;
+      padding: srl.spacer-get(400) 0;
+      @include srl.spacer-gap(200);
+      cursor: pointer;
+      display: flex;
+      border: 0;
+      align-items: flex-start;
+
+      @include button.switch(".srl-category-accordion__icon");
+
+      &[aria-expanded="true"] {
+        .srl-category-accordion__icon {
+          @include fa.icon(minus);
+        }
+      }
     }
 
-    .lc-accordion__icon {
+    .srl-grid {
       display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 48px;
-      height: 48px;
-      margin-left: auto;
+      padding-inline: 0;
+      margin-inline: 0;
+    }
+
+    [class*="-number"],
+    [class*="-text"]
+    {
+      @include srl.typography-title-h3();
+      @include srl.spacer-margin-top(100);
+    }
+
+    [class$="-text"] {
+      flex: 1 1 auto;
+    }
+
+    [class$="-number"] {
+      flex: 0 0 auto;
+      width: srl.spacer-get(800);
       color: srl.colors-black-1000();
-      border: srl.system-size-unit(1) solid srl.colors-black-1000();
-      border-radius: 24px;
-      transition: all $transition-duration ease;
-
-      &:before {
-        content: "";
-        display: block;
-        width: srl.system-size-unit(20);
-        height: srl.system-size-unit(20);
-        @extend %srl-icon;
-        @extend %srl-icon-mask;
-        @extend %srl-icon-plus;
-        transition: all $transition-duration ease;
-      }
+    }
+
+    .srl-category-accordion__icon {
+      flex: 0 0 auto;
+      @extend %srl-button;
+      @extend %srl-button--icon;
+      @extend %srl-icon-base;
+      @include fa.icon(plus);
+      width: auto;
     }
 
     &[aria-expanded="true"] {
-      .lc-accordion__icon {
+      .srl-category-accordion__icon {
         background-color: srl.colors-black-1000();
         color: srl.colors-white-1000();
         border-color: srl.colors-black-1000();
-        &:before {
-          @extend %srl-icon-minus;
-        }
       }
     }
   }
@@ -131,8 +145,8 @@ $transition-duration: .3s;
       padding: 0;
       overflow: hidden;
 
-      .lc-accordion:last-child {
-        > .lc-accordion__inner:after {
+      .srl-category-accordion:last-child {
+        > .srl-category-accordion__inner:after {
           display: none;
         }
       }