@solid-design-system/styles 1.3.1 → 1.3.3

package/dist/modules/prose.css

@@ -401,82 +401,124 @@ Used for inverted pressed interaction text link */;
 
 .sd-list:not(.sd-list--icon),
 .sd-prose > :is(ol, ul) {
+  list-style-position: revert;
+  list-style-type: revert;
+  padding: revert;
   padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
   padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
+  padding-left: var(--sd-spacing-4, 1rem) /* 16px */;
   text-align: left;
+
+  /*
+   * Unordered lists
+   */
 }
 
 .sd-list:not(.sd-list--icon) li:not(:first-child), .sd-prose > :is(ol, ul) li:not(:first-child) {
   margin-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
 }
 
-.sd-list:not(.sd-list--icon) ol,
-  .sd-list:not(.sd-list--icon) ul,
-  .sd-prose > :is(ol, ul) ol,
-  .sd-prose > :is(ol, ul) ul {
-  padding-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
-}
-
-/* Counter handling for ordered lists. */
+.sd-list:not(.sd-list--icon) ul,
+  .sd-list:not(.sd-list--icon) ol,
+  .sd-prose > :is(ol, ul) ul,
+  .sd-prose > :is(ol, ul) ol {
+    all: revert;
+    padding-left: 1.4em;
+    padding-top: 0.75em;
+  }
 
-.sd-list:not(.sd-list--icon):is(ol) > li, .sd-list:not(.sd-list--icon) ol > li, .sd-prose > :is(ol, ul):is(ol) > li, .sd-prose > :is(ol, ul) ol > li {
-      counter-increment: item;
-    }
+@supports not (-webkit-hyphens: none) {
 
-.sd-list:not(.sd-list--icon):is(ol) > li:before, .sd-list:not(.sd-list--icon) ol > li:before, .sd-prose > :is(ol, ul):is(ol) > li:before, .sd-prose > :is(ol, ul) ol > li:before {
-        content: counters(item, '.') '. ';
-      }
+.sd-list:not(.sd-list--icon),
+.sd-prose > :is(ol, ul) {
+    /* Safari automatically adds some spacing. This adds it for other browsers. */
 
-/* Add second level */
+    /*
+     * Ordered lists
+     */
 
-.sd-list:not(.sd-list--icon):is(ol),
-  .sd-list:not(.sd-list--icon):is(ol) > li > ol,
-  .sd-list:not(.sd-list--icon) ol > li > ol,
-  .sd-prose > :is(ol, ul):is(ol),
-  .sd-prose > :is(ol, ul):is(ol) > li > ol,
-  .sd-prose > :is(ol, ul) ol > li > ol {
-    counter-reset: item;
+    /* 
+   * Safari currently only partially supports the ::marker pseudo class.
+   * Support is limited to color and font-size. Therefore we optimize the numbering only for non-Safari browsers.
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/::marker#browser_compatibility
+   */
+    /* Level 1 */
+}
+    .sd-list:not(.sd-list--icon) li, .sd-prose > :is(ol, ul) li {
+    padding-left: 0.3em;
   }
-
-/* Ordered lists inside unordered lists. */
-
-.sd-list:not(.sd-list--icon):is(ul) > li > ol,
-  .sd-list:not(.sd-list--icon) ul > li > ol,
-  .sd-prose > :is(ol, ul):is(ul) > li > ol,
-  .sd-prose > :is(ol, ul) ul > li > ol {
-    counter-set: item 0;
+    .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon), .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) {
+      counter-reset: item;
+    }
+      .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li {
+        counter-increment: item;
+      }
+        .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li::marker, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li::marker {
+          content: counters(item, '.', decimal) '. ';
+        }
+        /* Level 2 */
+        .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol {
+    padding-left: 1.9em;
+          counter-reset: subitem;
+  }
+          .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li {
+            counter-increment: subitem;
+          }
+            .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li::marker, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li::marker {
+              content: counters(item, '.', decimal) '.' counters(subitem, '.', decimal) '. ';
+            }
+            /* Level 3 */
+            .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li > ol, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li > ol {
+    padding-left: 2.7em;
+              counter-reset: subsubitem;
+  }
+              .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li > ol > li, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li > ol > li {
+                counter-increment: subsubitem;
+              }
+                .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li > ol > li::marker, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li > ol > li::marker {
+                  content: counters(item, '.', decimal) '.' counters(subitem, '.', decimal) '.'
+                    counters(subsubitem, '.', decimal) '. ';
+                }
   }
 
-/* Styling */
+/* Level 1 */
 
-.sd-list:not(.sd-list--icon) li, .sd-prose > :is(ol, ul) li {
-  display: table;
+.sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon),
+  .sd-list:not(.sd-list--icon) ul,
+  .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon),
+  .sd-prose > :is(ol, ul) ul {
+  padding-left: 0.5em;
 }
 
-.sd-list:not(.sd-list--icon) li:before, .sd-prose > :is(ol, ul) li:before {
-  display: table-cell;
-  padding-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
+.sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li, .sd-list:not(.sd-list--icon) ul > li, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li, .sd-prose > :is(ol, ul) ul > li {
+  padding-left: 0.75em;
+      list-style-type: '\2022'; /* • */
 }
 
-.sd-list:not(.sd-list--icon):is(ul),
-  .sd-list:not(.sd-list--icon) ul,
-  .sd-prose > :is(ol, ul):is(ul),
-  .sd-prose > :is(ol, ul) ul {
-    list-style-type: '';
-  }
-
-.sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li:before, .sd-list:not(.sd-list--icon) ul > li:before, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li:before, .sd-prose > :is(ol, ul) ul > li:before {
-      content: '\2022';
-    }
+/* Level 2 */
 
-.sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li:before, .sd-list:not(.sd-list--icon) ul > li > ul > li:before, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li:before, .sd-prose > :is(ol, ul) ul > li > ul > li:before {
-        content: '\002B1D';
-      }
+.sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul, .sd-list:not(.sd-list--icon) ul > li > ul, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul, .sd-prose > :is(ol, ul) ul > li > ul {
+  padding-left: 0.3em;
+}
 
-.sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li > ul > li:before, .sd-list:not(.sd-list--icon) ul > li > ul > li > ul > li:before, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li > ul > li:before, .sd-prose > :is(ol, ul) ul > li > ul > li > ul > li:before {
-          content: '\2010';
+.sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li, .sd-list:not(.sd-list--icon) ul > li > ul > li, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li, .sd-prose > :is(ol, ul) ul > li > ul > li {
+          list-style-type: '\002B1D'; /* · */
         }
 
+/* Level 3 */
+
+.sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li > ul, .sd-list:not(.sd-list--icon) ul > li > ul > li > ul, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li > ul, .sd-prose > :is(ol, ul) ul > li > ul > li > ul {
+  padding-left: 0.4em;
+}
+
+.sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li > ul > li, .sd-list:not(.sd-list--icon) ul > li > ul > li > ul > li, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li > ul > li, .sd-prose > :is(ol, ul) ul > li > ul > li > ul > li {
+              list-style-type: '\2010'; /* - */
+            }
+
+/*
+  * Icon lists
+  */
+
 .sd-list--icon {
   padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
   padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
@@ -530,6 +572,10 @@ Used for inverted pressed interaction text link */;
   margin-right: var(--sd-spacing-8, 2rem) /* 32px */;
 }
 
+/*
+ * Inverted
+ */
+
 .sd-list--inverted,
 .sd-prose--inverted > :is(ol, ul) {
   

package/dist/solid-styles.css

@@ -636,6 +636,7 @@ Used for inverted pressed interaction text link */;
   justify-content: center;
   
   color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
+  text-decoration-line: none;
   transition-property: color;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
@@ -664,6 +665,7 @@ Used for inverted pressed interaction text link */;
     .sd-pagination ul li:last-child {
   height: var(--sd-spacing-12, 3rem) /* 48px */;
   width: var(--sd-spacing-12, 3rem) /* 48px */;
+  font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
 }
 
 .sd-pagination ul li:first-child a, .sd-pagination ul li:last-child a {
@@ -671,11 +673,6 @@ Used for inverted pressed interaction text link */;
   width: 100%;
 }
 
-.sd-pagination ul li:first-child sd-icon, .sd-pagination ul li:last-child sd-icon {
-  height: var(--sd-spacing-6, 1.5rem) /* 24px */;
-  width: var(--sd-spacing-6, 1.5rem) /* 24px */;
-}
-
 /* Numbers */
 
 .sd-pagination ul li {
@@ -687,14 +684,14 @@ Used for inverted pressed interaction text link */;
   text-align: center;
 }
 
-.sd-pagination ul li:not(:has(a sd-icon)) a {
+.sd-pagination ul li:not(:first-child):not(:last-child) a {
   height: 100%;
   width: 100%;
   border-bottom-width: 2px;
   border-bottom-color: transparent;
 }
 
-.sd-pagination ul li:not(:has(a sd-icon)) a[aria-current] {
+.sd-pagination ul li:not(:first-child):not(:last-child) a[aria-current] {
   --tw-border-opacity: 1;
   border-bottom-color: rgb(var(--sd-color-accent, 45 157 0) / var(--tw-border-opacity, 1)) /* Used to highlight active/selected elements
  */;
@@ -712,13 +709,15 @@ Used for inverted pressed interaction text link */;
 
 /* Previous and next arrow when it has no href */
 
-.sd-pagination ul li:has(a:not([href]) sd-icon) a {
+.sd-pagination ul li:first-child:has(a:not([href])) a,
+    .sd-pagination ul li:last-child:has(a:not([href])) a {
   cursor: not-allowed;
   
   color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
 }
 
-.sd-pagination ul li:has(a:not([href]) sd-icon) a:hover:not([disabled]) {
+.sd-pagination ul li:first-child:has(a:not([href])) a:hover:not([disabled]),
+    .sd-pagination ul li:last-child:has(a:not([href])) a:hover:not([disabled]) {
   
   color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
 }
@@ -727,46 +726,46 @@ Used for inverted pressed interaction text link */;
 
 /* Number which is not current */
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):not(:has(a[aria-current])) {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current])) {
   pointer-events: none;
   position: absolute;
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):not(:has(a[aria-current])) a {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current])) a {
   display: none;
 }
 
 /* Apply ellipsis to (n + 2 && n - 1) */
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):has(+ li + li a[aria-current]),
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):has(a[aria-current]) + li + li:not(:last-child) {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li + li a[aria-current]),
+        .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current]) + li + li:not(:last-child) {
   pointer-events: auto !important;
   position: relative !important;
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):has(+ li + li a[aria-current])::after,
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):has(a[aria-current]) + li + li:not(:last-child)::after {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li + li a[aria-current])::after,
+        .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current]) + li + li:not(:last-child)::after {
   --tw-content: '...';
   content: var(--tw-content);
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(2), 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(2), 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):has(+ li a[aria-current]), 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):has(a[aria-current]) + li {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2), 
+        .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2), 
+        .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li a[aria-current]), 
+        .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current]) + li {
   pointer-events: auto !important;
   position: relative !important;
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(2)::after, 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(2)::after, 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):has(+ li a[aria-current])::after, 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):has(a[aria-current]) + li::after {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2)::after, 
+        .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2)::after, 
+        .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li a[aria-current])::after, 
+        .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current]) + li::after {
   content: var(--tw-content) !important;
   display: none !important;
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(2) a, .sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(2) a, .sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):has(+ li a[aria-current]) a, .sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):has(a[aria-current]) + li a {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2) a, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2) a, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li a[aria-current]) a, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current]) + li a {
   display: flex !important;
 }
 
@@ -774,88 +773,88 @@ Used for inverted pressed interaction text link */;
 
 /* Show until the 5th page (forward) */
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(-n + 6):has(a[aria-current]) ~ :nth-child(-n + 6) {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current]) ~ :nth-child(-n + 6) {
   pointer-events: auto;
   position: relative;
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(-n + 6):has(a[aria-current]) ~ :nth-child(-n + 6)::after {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current]) ~ :nth-child(-n + 6)::after {
   content: var(--tw-content);
   display: none;
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(-n + 6):has(a[aria-current]) ~ :nth-child(-n + 6) a {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current]) ~ :nth-child(-n + 6) a {
   display: flex;
 }
 
 /* Show ellipsis on the 6th */
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(-n + 6):has(a[aria-current]) ~ :nth-child(6):not(:last-child) + li {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current]) ~ :nth-child(6):not(:last-child) + li {
   pointer-events: none;
   position: relative;
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(-n + 6):has(a[aria-current]) ~ :nth-child(6):not(:last-child) + li::after {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current]) ~ :nth-child(6):not(:last-child) + li::after {
   --tw-content: '...';
   content: var(--tw-content);
 }
 
 /* When one of the first 4 pages is selected, show until the 5th page (backward) */
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current]) {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current]) {
   pointer-events: auto;
   position: relative;
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current])::after {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current])::after {
   content: var(--tw-content);
   display: none;
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current]) a {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current]) a {
   display: flex;
 }
 
 /* When one of the last 4 pages is selected, show the last 4 pages (forward) */
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(-n + 5):has(a[aria-current]) ~ :nth-last-child(-n + 5):not(:has(a sd-icon)) {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child) {
   pointer-events: auto;
   position: relative;
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(-n + 5):has(a[aria-current]) ~ :nth-last-child(-n + 5):not(:has(a sd-icon))::after {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child)::after {
   content: var(--tw-content);
   display: none;
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(-n + 5):has(a[aria-current]) ~ :nth-last-child(-n + 5):not(:has(a sd-icon)) a {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child) a {
   display: flex;
 }
 
 /* When one of the last 4 pages is selected, show the last 4 pages (backward) */
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(-n + 6):has(~ :nth-last-child(-n + 5) a[aria-current]) {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(~ :nth-last-child(-n + 5) a[aria-current]) {
   pointer-events: auto;
   position: relative;
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(-n + 6):has(~ :nth-last-child(-n + 5) a[aria-current])::after {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(~ :nth-last-child(-n + 5) a[aria-current])::after {
   content: var(--tw-content);
   display: none;
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(-n + 6):has(~ :nth-last-child(-n + 5) a[aria-current]) a {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(~ :nth-last-child(-n + 5) a[aria-current]) a {
   display: flex;
 }
 
 /* Show ellipsis on the 6th to last */
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(7):has(~ :nth-last-child(-n + 5) a[aria-current]) {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has(~ :nth-last-child(-n + 5) a[aria-current]) {
   pointer-events: none;
   position: relative;
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(7):has(~ :nth-last-child(-n + 5) a[aria-current])::after {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has(~ :nth-last-child(-n + 5) a[aria-current])::after {
   --tw-content: '...';
   content: var(--tw-content);
 }
@@ -906,12 +905,14 @@ Used for inverted pressed interaction text link */;
   color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
-.sd-pagination--inverted ul li:has(a:not([href]) sd-icon) a {
+.sd-pagination--inverted ul li:first-child:has(a:not([href])) a,
+      .sd-pagination--inverted ul li:last-child:has(a:not([href])) a {
   
   color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
 }
 
-.sd-pagination--inverted ul li:has(a:not([href]) sd-icon) a:hover:not([disabled]) {
+.sd-pagination--inverted ul li:first-child:has(a:not([href])) a:hover:not([disabled]),
+      .sd-pagination--inverted ul li:last-child:has(a:not([href])) a:hover:not([disabled]) {
   
   color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
 }
@@ -1399,82 +1400,124 @@ Used for inverted pressed interaction text link */;
 
 .sd-list:not(.sd-list--icon),
 .sd-prose > :is(ol, ul) {
+  list-style-position: revert;
+  list-style-type: revert;
+  padding: revert;
   padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
   padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
+  padding-left: var(--sd-spacing-4, 1rem) /* 16px */;
   text-align: left;
+
+  /*
+   * Unordered lists
+   */
 }
 
 .sd-list:not(.sd-list--icon) li:not(:first-child), .sd-prose > :is(ol, ul) li:not(:first-child) {
   margin-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
 }
 
-.sd-list:not(.sd-list--icon) ol,
-  .sd-list:not(.sd-list--icon) ul,
-  .sd-prose > :is(ol, ul) ol,
-  .sd-prose > :is(ol, ul) ul {
-  padding-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
-}
-
-/* Counter handling for ordered lists. */
+.sd-list:not(.sd-list--icon) ul,
+  .sd-list:not(.sd-list--icon) ol,
+  .sd-prose > :is(ol, ul) ul,
+  .sd-prose > :is(ol, ul) ol {
+    all: revert;
+    padding-left: 1.4em;
+    padding-top: 0.75em;
+  }
 
-.sd-list:not(.sd-list--icon):is(ol) > li, .sd-list:not(.sd-list--icon) ol > li, .sd-prose > :is(ol, ul):is(ol) > li, .sd-prose > :is(ol, ul) ol > li {
-      counter-increment: item;
-    }
+@supports not (-webkit-hyphens: none) {
 
-.sd-list:not(.sd-list--icon):is(ol) > li:before, .sd-list:not(.sd-list--icon) ol > li:before, .sd-prose > :is(ol, ul):is(ol) > li:before, .sd-prose > :is(ol, ul) ol > li:before {
-        content: counters(item, '.') '. ';
-      }
+.sd-list:not(.sd-list--icon),
+.sd-prose > :is(ol, ul) {
+    /* Safari automatically adds some spacing. This adds it for other browsers. */
 
-/* Add second level */
+    /*
+     * Ordered lists
+     */
 
-.sd-list:not(.sd-list--icon):is(ol),
-  .sd-list:not(.sd-list--icon):is(ol) > li > ol,
-  .sd-list:not(.sd-list--icon) ol > li > ol,
-  .sd-prose > :is(ol, ul):is(ol),
-  .sd-prose > :is(ol, ul):is(ol) > li > ol,
-  .sd-prose > :is(ol, ul) ol > li > ol {
-    counter-reset: item;
+    /* 
+   * Safari currently only partially supports the ::marker pseudo class.
+   * Support is limited to color and font-size. Therefore we optimize the numbering only for non-Safari browsers.
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/::marker#browser_compatibility
+   */
+    /* Level 1 */
+}
+    .sd-list:not(.sd-list--icon) li, .sd-prose > :is(ol, ul) li {
+    padding-left: 0.3em;
   }
-
-/* Ordered lists inside unordered lists. */
-
-.sd-list:not(.sd-list--icon):is(ul) > li > ol,
-  .sd-list:not(.sd-list--icon) ul > li > ol,
-  .sd-prose > :is(ol, ul):is(ul) > li > ol,
-  .sd-prose > :is(ol, ul) ul > li > ol {
-    counter-set: item 0;
+    .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon), .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) {
+      counter-reset: item;
+    }
+      .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li {
+        counter-increment: item;
+      }
+        .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li::marker, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li::marker {
+          content: counters(item, '.', decimal) '. ';
+        }
+        /* Level 2 */
+        .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol {
+    padding-left: 1.9em;
+          counter-reset: subitem;
+  }
+          .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li {
+            counter-increment: subitem;
+          }
+            .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li::marker, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li::marker {
+              content: counters(item, '.', decimal) '.' counters(subitem, '.', decimal) '. ';
+            }
+            /* Level 3 */
+            .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li > ol, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li > ol {
+    padding-left: 2.7em;
+              counter-reset: subsubitem;
+  }
+              .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li > ol > li, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li > ol > li {
+                counter-increment: subsubitem;
+              }
+                .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li > ol > li::marker, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li > ol > li::marker {
+                  content: counters(item, '.', decimal) '.' counters(subitem, '.', decimal) '.'
+                    counters(subsubitem, '.', decimal) '. ';
+                }
   }
 
-/* Styling */
+/* Level 1 */
 
-.sd-list:not(.sd-list--icon) li, .sd-prose > :is(ol, ul) li {
-  display: table;
+.sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon),
+  .sd-list:not(.sd-list--icon) ul,
+  .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon),
+  .sd-prose > :is(ol, ul) ul {
+  padding-left: 0.5em;
 }
 
-.sd-list:not(.sd-list--icon) li:before, .sd-prose > :is(ol, ul) li:before {
-  display: table-cell;
-  padding-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
+.sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li, .sd-list:not(.sd-list--icon) ul > li, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li, .sd-prose > :is(ol, ul) ul > li {
+  padding-left: 0.75em;
+      list-style-type: '\2022'; /* • */
 }
 
-.sd-list:not(.sd-list--icon):is(ul),
-  .sd-list:not(.sd-list--icon) ul,
-  .sd-prose > :is(ol, ul):is(ul),
-  .sd-prose > :is(ol, ul) ul {
-    list-style-type: '';
-  }
-
-.sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li:before, .sd-list:not(.sd-list--icon) ul > li:before, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li:before, .sd-prose > :is(ol, ul) ul > li:before {
-      content: '\2022';
-    }
+/* Level 2 */
 
-.sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li:before, .sd-list:not(.sd-list--icon) ul > li > ul > li:before, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li:before, .sd-prose > :is(ol, ul) ul > li > ul > li:before {
-        content: '\002B1D';
-      }
+.sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul, .sd-list:not(.sd-list--icon) ul > li > ul, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul, .sd-prose > :is(ol, ul) ul > li > ul {
+  padding-left: 0.3em;
+}
 
-.sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li > ul > li:before, .sd-list:not(.sd-list--icon) ul > li > ul > li > ul > li:before, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li > ul > li:before, .sd-prose > :is(ol, ul) ul > li > ul > li > ul > li:before {
-          content: '\2010';
+.sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li, .sd-list:not(.sd-list--icon) ul > li > ul > li, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li, .sd-prose > :is(ol, ul) ul > li > ul > li {
+          list-style-type: '\002B1D'; /* · */
         }
 
+/* Level 3 */
+
+.sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li > ul, .sd-list:not(.sd-list--icon) ul > li > ul > li > ul, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li > ul, .sd-prose > :is(ol, ul) ul > li > ul > li > ul {
+  padding-left: 0.4em;
+}
+
+.sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li > ul > li, .sd-list:not(.sd-list--icon) ul > li > ul > li > ul > li, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li > ul > li, .sd-prose > :is(ol, ul) ul > li > ul > li > ul > li {
+              list-style-type: '\2010'; /* - */
+            }
+
+/*
+  * Icon lists
+  */
+
 .sd-list--icon {
   padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
   padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
@@ -1528,6 +1571,10 @@ Used for inverted pressed interaction text link */;
   margin-right: var(--sd-spacing-8, 2rem) /* 32px */;
 }
 
+/*
+ * Inverted
+ */
+
 .sd-list--inverted,
 .sd-prose--inverted > :is(ol, ul) {