@solid-design-system/styles 1.2.0 → 1.3.1

package/dist-versioned/solid-styles.css

@@ -1,12 +1,12 @@
 /**
  * Generates basic styles for chip elements.
- * @name sd-1-2-0-chip
+ * @name sd-1-3-1-chip
  * @status stable
  * @since 1.30.0
- * @variant { primary-300 | primary-500 | white } sd-1-2-0-chip--...
+ * @variant { primary-300 | primary-500 | white } sd-1-3-1-chip--...
  */
 
-.sd-1-2-0-chip {
+.sd-1-3-1-chip {
   display: inline-flex;
   height: var(--sd-spacing-6, 1.5rem) /* 24px */;
   align-items: center;
@@ -22,34 +22,34 @@
   color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
 }
 
-.sd-1-2-0-chip--primary-500 {
+.sd-1-3-1-chip--primary-500 {
   
   background-color: rgb(var(--sd-color-primary-500, 70 109 175) / var(--tw-bg-opacity, 1)) /* Used for hover interaction */;
   
   color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
-.sd-1-2-0-chip--primary-300 {
+.sd-1-3-1-chip--primary-300 {
   
   background-color: rgb(var(--sd-color-primary-300, 200 213 231) / var(--tw-bg-opacity, 1)) /* Used for chip background */;
 }
 
-.sd-1-2-0-chip--white {
+.sd-1-3-1-chip--white {
   
   background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode) 
Used for inverted button */;
 }
 
 /**
  * Container lets users delimit and highlight a piece of content. The user has no interaction with it, it is merely a visual element that influences the flow of the page.
- * @name sd-1-2-0-container
+ * @name sd-1-3-1-container
  * @status stable
  * @since 1.30.0
- * @variant { primary-100 | primary | border-neutral-400 | white } sd-1-2-0-container--variant-... Defines the background color and border of sd-1-2-0-container.
- * @variant { sm } sd-1-2-0-container--padding-... Defines the padding of sd-1-2-0-container. This makes it adaptable to both small and large screens.
- * @variant { top | right | bottom | left } sd-1-2-0-container--triangle-... Defines an optional triangle cut-out for sd-1-2-0-container. This allows for an indentation resembling an arrow on any side of the container. CSS Property `triangle-background` defines the background color of the cut-out.
+ * @variant { primary-100 | primary | border-neutral-400 | white } sd-1-3-1-container--variant-... Defines the background color and border of sd-1-3-1-container.
+ * @variant { sm } sd-1-3-1-container--padding-... Defines the padding of sd-1-3-1-container. This makes it adaptable to both small and large screens.
+ * @variant { top | right | bottom | left } sd-1-3-1-container--triangle-... Defines an optional triangle cut-out for sd-1-3-1-container. This allows for an indentation resembling an arrow on any side of the container. CSS Property `triangle-background` defines the background color of the cut-out.
  */
 
-.sd-1-2-0-container {
+.sd-1-3-1-container {
   position: relative;
   
   background-color: rgb(var(--sd-color-neutral-100, 246 246 246) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */;
@@ -59,18 +59,18 @@
   padding-bottom: var(--sd-spacing-8, 2rem) /* 32px */;
 }
 
-.sd-1-2-0-container--variant-primary-100 {
+.sd-1-3-1-container--variant-primary-100 {
   
   background-color: rgb(var(--sd-color-primary-100, 236 240 249) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */;
 }
 
-.sd-1-2-0-container--variant-primary {
+.sd-1-3-1-container--variant-primary {
   
   background-color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-bg-opacity, 1)) /* Inverted background color (light mode)
 Used for button */;
 }
 
-.sd-1-2-0-container--variant-border-neutral-400 {
+.sd-1-3-1-container--variant-border-neutral-400 {
   border-style: solid;
   --tw-border-opacity: 1;
   border-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color. 
@@ -80,27 +80,27 @@ Used for divider, teaser, container, ...  */;
     border-width: 1px;
 }
 
-.sd-1-2-0-container--variant-white {
+.sd-1-3-1-container--variant-white {
   
   background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode) 
Used for inverted button */;
 }
 
-.sd-1-2-0-container--padding-sm {
+.sd-1-3-1-container--padding-sm {
   padding-left: var(--sd-spacing-6, 1.5rem) /* 24px */;
   padding-right: var(--sd-spacing-6, 1.5rem) /* 24px */;
   padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
   padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
 }
 
-.sd-1-2-0-container {
+.sd-1-3-1-container {
 
   --triangle-background: white;
 }
 
-.sd-1-2-0-container--triangle-top::before,
-  .sd-1-2-0-container--triangle-right::before,
-  .sd-1-2-0-container--triangle-bottom::before,
-  .sd-1-2-0-container--triangle-left::before {
+.sd-1-3-1-container--triangle-top::before,
+  .sd-1-3-1-container--triangle-right::before,
+  .sd-1-3-1-container--triangle-bottom::before,
+  .sd-1-3-1-container--triangle-left::before {
   position: absolute;
   display: block;
   border-style: solid;
@@ -109,38 +109,38 @@ Used for divider, teaser, container, ...  */;
     content: '';
 }
 
-.sd-1-2-0-container--triangle-top::before {
+.sd-1-3-1-container--triangle-top::before {
   top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
     left: calc(50% - 14px);
     border-top-color: var(--triangle-background);
 }
 
-.sd-1-2-0-container--triangle-right::before {
+.sd-1-3-1-container--triangle-right::before {
   right: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
     top: calc(50% - 14px);
     border-right-color: var(--triangle-background);
 }
 
-.sd-1-2-0-container--triangle-bottom::before {
+.sd-1-3-1-container--triangle-bottom::before {
   bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
     left: calc(50% - 14px);
     border-bottom-color: var(--triangle-background);
 }
 
-.sd-1-2-0-container--triangle-left::before {
+.sd-1-3-1-container--triangle-left::before {
   left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
     top: calc(50% - 14px);
     border-left-color: var(--triangle-background);
 }
 
-.sd-1-2-0-container--triangle-top-border::after,
-    .sd-1-2-0-container--triangle-top-border::before,
-    .sd-1-2-0-container--triangle-right-border::after,
-    .sd-1-2-0-container--triangle-right-border::before,
-    .sd-1-2-0-container--triangle-bottom-border::after,
-    .sd-1-2-0-container--triangle-bottom-border::before,
-    .sd-1-2-0-container--triangle-left-border::after,
-    .sd-1-2-0-container--triangle-left-border::before {
+.sd-1-3-1-container--triangle-top-border::after,
+    .sd-1-3-1-container--triangle-top-border::before,
+    .sd-1-3-1-container--triangle-right-border::after,
+    .sd-1-3-1-container--triangle-right-border::before,
+    .sd-1-3-1-container--triangle-bottom-border::after,
+    .sd-1-3-1-container--triangle-bottom-border::before,
+    .sd-1-3-1-container--triangle-left-border::after,
+    .sd-1-3-1-container--triangle-left-border::before {
   position: absolute;
   display: block;
   border-style: solid;
@@ -148,98 +148,107 @@ Used for divider, teaser, container, ...  */;
       content: '';
 }
 
-.sd-1-2-0-container--triangle-top-border::after, .sd-1-2-0-container--triangle-right-border::after, .sd-1-2-0-container--triangle-bottom-border::after, .sd-1-2-0-container--triangle-left-border::after {
+.sd-1-3-1-container--triangle-top-border::after, .sd-1-3-1-container--triangle-right-border::after, .sd-1-3-1-container--triangle-bottom-border::after, .sd-1-3-1-container--triangle-left-border::after {
       border-width: 14px;
     }
 
-.sd-1-2-0-container--triangle-top-border::before, .sd-1-2-0-container--triangle-right-border::before, .sd-1-2-0-container--triangle-bottom-border::before, .sd-1-2-0-container--triangle-left-border::before {
+.sd-1-3-1-container--triangle-top-border::before, .sd-1-3-1-container--triangle-right-border::before, .sd-1-3-1-container--triangle-bottom-border::before, .sd-1-3-1-container--triangle-left-border::before {
       border-width: 15px;
     }
 
-.sd-1-2-0-container--triangle-top-border::after,
-    .sd-1-2-0-container--triangle-top-border::before {
+.sd-1-3-1-container--triangle-top-border::after,
+    .sd-1-3-1-container--triangle-top-border::before {
       top: -1px;
     }
 
-.sd-1-2-0-container--triangle-top-border::before {
+.sd-1-3-1-container--triangle-top-border::before {
   --tw-border-opacity: 1;
   border-top-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color. 
 Used for divider, teaser, container, ...  */;
       left: calc(50% - 15px);
 }
 
-.sd-1-2-0-container--triangle-top-border::after {
+.sd-1-3-1-container--triangle-top-border::after {
       left: calc(50% - 14px);
       border-top-color: var(--triangle-background);
     }
 
-.sd-1-2-0-container--triangle-right-border::after,
-    .sd-1-2-0-container--triangle-right-border::before {
+.sd-1-3-1-container--triangle-right-border::after,
+    .sd-1-3-1-container--triangle-right-border::before {
       right: -1px;
     }
 
-.sd-1-2-0-container--triangle-right-border::before {
+.sd-1-3-1-container--triangle-right-border::before {
   --tw-border-opacity: 1;
   border-right-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color. 
 Used for divider, teaser, container, ...  */;
       top: calc(50% - 15px);
 }
 
-.sd-1-2-0-container--triangle-right-border::after {
+.sd-1-3-1-container--triangle-right-border::after {
       top: calc(50% - 14px);
       border-right-color: var(--triangle-background);
     }
 
-.sd-1-2-0-container--triangle-bottom-border::after,
-    .sd-1-2-0-container--triangle-bottom-border::before {
+.sd-1-3-1-container--triangle-bottom-border::after,
+    .sd-1-3-1-container--triangle-bottom-border::before {
       bottom: -1px;
     }
 
-.sd-1-2-0-container--triangle-bottom-border::before {
+.sd-1-3-1-container--triangle-bottom-border::before {
   --tw-border-opacity: 1;
   border-bottom-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color. 
 Used for divider, teaser, container, ...  */;
       left: calc(50% - 15px);
 }
 
-.sd-1-2-0-container--triangle-bottom-border::after {
+.sd-1-3-1-container--triangle-bottom-border::after {
       left: calc(50% - 14px);
       border-bottom-color: var(--triangle-background);
     }
 
-.sd-1-2-0-container--triangle-left-border::after,
-    .sd-1-2-0-container--triangle-left-border::before {
+.sd-1-3-1-container--triangle-left-border::after,
+    .sd-1-3-1-container--triangle-left-border::before {
       left: -1px;
     }
 
-.sd-1-2-0-container--triangle-left-border::before {
+.sd-1-3-1-container--triangle-left-border::before {
   --tw-border-opacity: 1;
   border-left-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color. 
 Used for divider, teaser, container, ...  */;
       top: calc(50% - 15px);
 }
 
-.sd-1-2-0-container--triangle-left-border::after {
+.sd-1-3-1-container--triangle-left-border::after {
       top: calc(50% - 14px);
       border-left-color: var(--triangle-background);
     }
 
 /**
  * Generates basic styles for copyright elements.
- * @name sd-1-2-0-copyright
+ * @name sd-1-3-1-copyright
  * @status stable
  * @since 2.5.0
- * @variant { vertical } sd-1-2-0-copyright--orientation-... The copyright's orientation.
- * @variant { black } sd-1-2-0-copyright--color-... The copyright's text color.
- * @boolean sd-1-2-0-copyright--... Removes the shadow.
- * @variant { top } sd-1-2-0-copyright--placement-... The copyright's placement.
+ * @variant { vertical } sd-1-3-1-copyright--orientation-... The copyright's orientation.
+ * @variant { black } sd-1-3-1-copyright--color-... The copyright's text color.
+ * @boolean sd-1-3-1-copyright--... Removes the shadow.
+ * @variant { top } sd-1-3-1-copyright--placement-... The copyright's placement.
  */
 
-.sd-1-2-0-copyright {
+.sd-1-3-1-copyright {
   position: relative;
-}
-
-.sd-1-2-0-copyright::after {
+  /* Bug fix for drop-shadow-sm */
+  --tw-blur: ;
+  --tw-brightness: ;
+  --tw-contrast: ;
+  --tw-grayscale: ;
+  --tw-hue-rotate: ;
+  --tw-invert: ;
+  --tw-saturate: ;
+  --tw-sepia: ;
+}
+
+.sd-1-3-1-copyright::after {
   position: absolute;
   bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
   left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
@@ -255,7 +264,7 @@ Used for divider, teaser, container, ...  */;
     content: var(--copyright);
 }
 
-.sd-1-2-0-copyright--orientation-vertical::after {
+.sd-1-3-1-copyright--orientation-vertical::after {
   width: -moz-max-content;
   width: max-content;
   padding-top: var(--sd-spacing-2, 0.5rem) /* 8px */;
@@ -267,17 +276,17 @@ Used for divider, teaser, container, ...  */;
         transform: rotate(180deg);
 }
 
-.sd-1-2-0-copyright--color-black::after {
+.sd-1-3-1-copyright--color-black::after {
   
   color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
         filter: drop-shadow(0 0 transparent);
 }
 
-.sd-1-2-0-copyright--no-shadow::after {
+.sd-1-3-1-copyright--no-shadow::after {
       filter: drop-shadow(0 0 transparent);
     }
 
-.sd-1-2-0-copyright--placement-top::after {
+.sd-1-3-1-copyright--placement-top::after {
   position: absolute;
   top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
   right: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
@@ -290,13 +299,13 @@ Used for divider, teaser, container, ...  */;
 
 /**
  * Generates basic styles for flag elements.
- * @name sd-1-2-0-flag
+ * @name sd-1-3-1-flag
  * @status stable
  * @since 1.34.0
- * @variant { neutral-300 | neutral-500 | white } sd-1-2-0-flag--...
+ * @variant { neutral-300 | neutral-500 | white } sd-1-3-1-flag--...
  */
 
-.sd-1-2-0-flag {
+.sd-1-3-1-flag {
   display: inline-flex;
   height: var(--sd-spacing-8, 2rem) /* 32px */;
   align-items: center;
@@ -311,32 +320,32 @@ Used for divider, teaser, container, ...  */;
   color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
 }
 
-.sd-1-2-0-flag--neutral-500 {
+.sd-1-3-1-flag--neutral-500 {
   
   background-color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-bg-opacity, 1)) /* Used for disabled state  */;
   
   color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
 }
 
-.sd-1-2-0-flag--neutral-300 {
+.sd-1-3-1-flag--neutral-300 {
   
   background-color: rgb(var(--sd-color-neutral-300, 218 218 218) / var(--tw-bg-opacity, 1)) /* Used for flag  */;
 }
 
-.sd-1-2-0-flag--white {
+.sd-1-3-1-flag--white {
   
   background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode) 
Used for inverted button */;
 }
 
 /**
  * A footnote contains additional information/sources related to the content and usually appears at the bottom of a page or below the content it refers to.
- * @name sd-1-2-0-footnotes
+ * @name sd-1-3-1-footnotes
  * @status stable
  * @since 3.0.0
- * @boolean sd-1-2-0-footnotes--inverted Inverts the footnote text.
+ * @boolean sd-1-3-1-footnotes--inverted Inverts the footnote text.
  */
 
-.sd-1-2-0-footnotes {
+.sd-1-3-1-footnotes {
   margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
   margin-bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
   padding: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
@@ -346,22 +355,22 @@ Used for divider, teaser, container, ...  */;
   color: rgb(var(--sd-color-neutral-700, 104 104 104) / var(--tw-text-opacity, 1)) /* Additional text color */;
 }
 
-.sd-1-2-0-footnotes :target {
+.sd-1-3-1-footnotes :target {
   
   background-color: rgb(var(--sd-color-neutral-200, 233 233 233) / var(--tw-bg-opacity, 1)) /* Used for hover interaction  */;
 }
 
-.sd-1-2-0-footnotes:is(ol) {
+.sd-1-3-1-footnotes:is(ol) {
   padding-inline-start: var(--sd-spacing-8, 2rem) /* 32px */;
 }
 
-.sd-1-2-0-footnotes:is(ol) li {
+.sd-1-3-1-footnotes:is(ol) li {
       counter-increment: list-item;
       position: relative;
       list-style-type: none;
     }
 
-.sd-1-2-0-footnotes:is(ol) li .sd-1-2-0-footnotes--marker::before, .sd-1-2-0-footnotes:is(ol) li:has(.sd-1-2-0-footnotes--marker:nth-of-type(2))::before, .sd-1-2-0-footnotes:is(ol) li:not(:has(.sd-1-2-0-footnotes--marker))::before {
+.sd-1-3-1-footnotes:is(ol) li .sd-1-3-1-footnotes--marker::before, .sd-1-3-1-footnotes:is(ol) li:has(.sd-1-3-1-footnotes--marker:nth-of-type(2))::before, .sd-1-3-1-footnotes:is(ol) li:not(:has(.sd-1-3-1-footnotes--marker))::before {
   position: absolute;
   left: calc(var(--sd-spacing-8, 2rem) /* 32px */ * -1);
   flex-shrink: 0;
@@ -372,16 +381,16 @@ Used for divider, teaser, container, ...  */;
           font-size: 10px;
 }
 
-.sd-1-2-0-footnotes:is(ol) li .sd-1-2-0-footnotes--marker::after, .sd-1-2-0-footnotes:is(ol) li:has(.sd-1-2-0-footnotes--marker:nth-of-type(2))::after, .sd-1-2-0-footnotes:is(ol) li:not(:has(.sd-1-2-0-footnotes--marker))::after {
+.sd-1-3-1-footnotes:is(ol) li .sd-1-3-1-footnotes--marker::after, .sd-1-3-1-footnotes:is(ol) li:has(.sd-1-3-1-footnotes--marker:nth-of-type(2))::after, .sd-1-3-1-footnotes:is(ol) li:not(:has(.sd-1-3-1-footnotes--marker))::after {
           content: none;
         }
 
-.sd-1-2-0-footnotes:is(ol) li .sd-1-2-0-footnotes--marker .sd-1-2-0-footnotes--marker, .sd-1-2-0-footnotes:is(ol) li:has(.sd-1-2-0-footnotes--marker:nth-of-type(2)) .sd-1-2-0-footnotes--marker, .sd-1-2-0-footnotes:is(ol) li:not(:has(.sd-1-2-0-footnotes--marker)) .sd-1-2-0-footnotes--marker {
+.sd-1-3-1-footnotes:is(ol) li .sd-1-3-1-footnotes--marker .sd-1-3-1-footnotes--marker, .sd-1-3-1-footnotes:is(ol) li:has(.sd-1-3-1-footnotes--marker:nth-of-type(2)) .sd-1-3-1-footnotes--marker, .sd-1-3-1-footnotes:is(ol) li:not(:has(.sd-1-3-1-footnotes--marker)) .sd-1-3-1-footnotes--marker {
   display: inline-block;
           counter-increment: footnotes-multiple;
 }
 
-.sd-1-2-0-footnotes:is(ol) li .sd-1-2-0-footnotes--marker .sd-1-2-0-footnotes--marker::before, .sd-1-2-0-footnotes:is(ol) li:has(.sd-1-2-0-footnotes--marker:nth-of-type(2)) .sd-1-2-0-footnotes--marker::before, .sd-1-2-0-footnotes:is(ol) li:not(:has(.sd-1-2-0-footnotes--marker)) .sd-1-2-0-footnotes--marker::before {
+.sd-1-3-1-footnotes:is(ol) li .sd-1-3-1-footnotes--marker .sd-1-3-1-footnotes--marker::before, .sd-1-3-1-footnotes:is(ol) li:has(.sd-1-3-1-footnotes--marker:nth-of-type(2)) .sd-1-3-1-footnotes--marker::before, .sd-1-3-1-footnotes:is(ol) li:not(:has(.sd-1-3-1-footnotes--marker)) .sd-1-3-1-footnotes--marker::before {
   position: relative;
   left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
   vertical-align: super;
@@ -390,16 +399,16 @@ Used for divider, teaser, container, ...  */;
             content: counter(footnotes-multiple, lower-alpha);
 }
 
-.sd-1-2-0-footnotes:is(ol) li .sd-1-2-0-footnotes--marker {
+.sd-1-3-1-footnotes:is(ol) li .sd-1-3-1-footnotes--marker {
   bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
   display: block;
 }
 
-.sd-1-2-0-footnotes:is(ol) li .sd-1-2-0-footnotes--marker:focus-visible {
+.sd-1-3-1-footnotes:is(ol) li .sd-1-3-1-footnotes--marker:focus-visible {
   outline-width: 0px;
 }
 
-.sd-1-2-0-footnotes:is(ol) li .sd-1-2-0-footnotes--marker:focus-visible::before {
+.sd-1-3-1-footnotes:is(ol) li .sd-1-3-1-footnotes--marker:focus-visible::before {
   border-radius: var(--sd-border-radius-default, 0.25rem) /* 4px Default radius for buttons */;
   outline-style: solid;
   outline-width: 2px;
@@ -407,39 +416,39 @@ Used for divider, teaser, container, ...  */;
   outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
 }
 
-.sd-1-2-0-footnotes:is(ul) {
+.sd-1-3-1-footnotes:is(ul) {
     list-style: '';
   }
 
-.sd-1-2-0-footnotes--inverted {
+.sd-1-3-1-footnotes--inverted {
   
   color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
 Used for inverted pressed interaction text link */;
 }
 
-.sd-1-2-0-footnotes--inverted :target {
+.sd-1-3-1-footnotes--inverted :target {
   
   background-color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-bg-opacity, 1)) /* Used for pressed interaction */;
 }
 
-.sd-1-2-0-footnotes--inverted .sd-1-2-0-footnotes--marker::before {
+.sd-1-3-1-footnotes--inverted .sd-1-3-1-footnotes--marker::before {
   
   color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
   outline-color: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */ !important;
 }
 
-.sd-1-2-0-footnotes--inverted:is(.sd-1-2-0-footnotes--marker) {
+.sd-1-3-1-footnotes--inverted:is(.sd-1-3-1-footnotes--marker) {
   --tw-text-opacity: 1 !important;
   color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */ !important;
   outline-color: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */ !important;
 }
 
-.sd-1-2-0-footnotes--inverted:is(.sd-1-2-0-footnotes--marker):target {
+.sd-1-3-1-footnotes--inverted:is(.sd-1-3-1-footnotes--marker):target {
   
   background-color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-bg-opacity, 1)) /* Used for pressed interaction */;
 }
 
-.sd-1-2-0-footnotes--marker {
+.sd-1-3-1-footnotes--marker {
   position: relative;
   bottom: var(--sd-spacing-2, 0.5rem) /* 8px */;
   display: inline-block;
@@ -449,28 +458,28 @@ Used for inverted pressed interaction text link */;
     font-size: x-small;
 }
 
-.sd-1-2-0-footnotes--marker:target {
+.sd-1-3-1-footnotes--marker:target {
   
   background-color: rgb(var(--sd-color-neutral-200, 233 233 233) / var(--tw-bg-opacity, 1)) /* Used for hover interaction  */;
 }
 
-.sd-1-2-0-footnotes--marker::before {
+.sd-1-3-1-footnotes--marker::before {
       content: '[ ';
       display: inline-block;
     }
 
-.sd-1-2-0-footnotes--marker::after {
+.sd-1-3-1-footnotes--marker::after {
       content: ' ]';
       display: inline-block;
     }
 
-.sd-1-2-0-footnotes--marker:link,
-    .sd-1-2-0-footnotes--marker:visited {
+.sd-1-3-1-footnotes--marker:link,
+    .sd-1-3-1-footnotes--marker:visited {
   
   color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
 }
 
-.sd-1-2-0-footnotes--marker:focus-visible {
+.sd-1-3-1-footnotes--marker:focus-visible {
   border-radius: var(--sd-border-radius-default, 0.25rem) /* 4px Default radius for buttons */;
   outline-style: solid;
   outline-width: 2px;
@@ -480,11 +489,11 @@ Used for inverted pressed interaction text link */;
 
 /**
  * Hidden links can be used to show links only for keyboard users.
- * @name sd-1-2-0-hidden-links
+ * @name sd-1-3-1-hidden-links
  * @status stable
  * @since 3.15.0
- * @boolean sd-1-2-0-hidden-links--multiple Adapts styling for multiple skip links.
- * @boolean sd-1-2-0-hidden-links--debug Always show the links for debugging purposes.
+ * @boolean sd-1-3-1-hidden-links--multiple Adapts styling for multiple skip links.
+ * @boolean sd-1-3-1-hidden-links--debug Always show the links for debugging purposes.
  */
 
 :lang(en) {
@@ -495,7 +504,7 @@ Used for inverted pressed interaction text link */;
   --sd-hidden-links-title: 'Springe zu';
 }
 
-.sd-1-2-0-hidden-links:not(:focus-within):not(.sd-1-2-0-hidden-links--debug) {
+.sd-1-3-1-hidden-links:not(:focus-within):not(.sd-1-3-1-hidden-links--debug) {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -507,13 +516,13 @@ Used for inverted pressed interaction text link */;
   border-width: 0;
 }
 
-.sd-1-2-0-hidden-links {
+.sd-1-3-1-hidden-links {
   position: absolute;
   top: var(--sd-spacing-6, 1.5rem) /* 24px */;
   left: var(--sd-spacing-6, 1.5rem) /* 24px */;
 }
 
-.sd-1-2-0-hidden-links--multiple {
+.sd-1-3-1-hidden-links--multiple {
   display: flex;
   flex-direction: column;
   
@@ -527,7 +536,7 @@ Used for inverted pressed interaction text link */;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.sd-1-2-0-hidden-links--multiple:before {
+.sd-1-3-1-hidden-links--multiple:before {
   padding-left: var(--sd-spacing-4, 1rem) /* 16px */;
   padding-right: var(--sd-spacing-4, 1rem) /* 16px */;
   padding-top: var(--sd-spacing-2, 0.5rem) /* 8px */;
@@ -538,12 +547,12 @@ Used for inverted pressed interaction text link */;
 
 /**
  * The green accent color can be used to highlight parts of the text.
- * @name sd-1-2-0-mark
+ * @name sd-1-3-1-mark
  * @status stable
  * @since 1.7
  */
 
-mark.sd-1-2-0-mark {
+mark.sd-1-3-1-mark {
   background-color: transparent;
   
   color: rgb(var(--sd-color-accent, 45 157 0) / var(--tw-text-opacity, 1)) /* Used for inverted hover interaction button label */;
@@ -551,16 +560,16 @@ mark.sd-1-2-0-mark {
 
 /**
  * Meta information like file size, date, or whatever is needed.
- * @name sd-1-2-0-meta
+ * @name sd-1-3-1-meta
  * @status stable
  * @since 1.7
- * @variant { sm } sd-1-2-0-meta--size-... The size. Small can be used as an alternative in tight spaces.
- * @boolean sd-1-2-0-meta--inverted Inverts the meta element.
- * @boolean sd-1-2-0-meta--pipe Adds a pipe right from the meta element.
- * @boolean sd-1-2-0-meta--light Makes sd-1-2-0-meta light.
+ * @variant { sm } sd-1-3-1-meta--size-... The size. Small can be used as an alternative in tight spaces.
+ * @boolean sd-1-3-1-meta--inverted Inverts the meta element.
+ * @boolean sd-1-3-1-meta--pipe Adds a pipe right from the meta element.
+ * @boolean sd-1-3-1-meta--light Makes sd-1-3-1-meta light.
  */
 
-.sd-1-2-0-meta {
+.sd-1-3-1-meta {
   font-size: var(--sd-font-size-base, 1rem) /* 16px */;
   font-weight: 400;
   line-height: var(--sd-line-height-none, 100%) /* Used for buttons, input fields etc. */;
@@ -568,51 +577,393 @@ mark.sd-1-2-0-mark {
   color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
 }
 
-.sd-1-2-0-meta--size-sm {
+.sd-1-3-1-meta--size-sm {
   font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
 }
 
-.sd-1-2-0-meta--light {
+.sd-1-3-1-meta--light {
   
   color: rgb(var(--sd-color-neutral-700, 104 104 104) / var(--tw-text-opacity, 1)) /* Additional text color */;
 }
 
-.sd-1-2-0-meta--inverted {
+.sd-1-3-1-meta--inverted {
   
   color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
-.sd-1-2-0-meta--inverted.sd-1-2-0-meta--light {
+.sd-1-3-1-meta--inverted.sd-1-3-1-meta--light {
   
   color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
 Used for inverted pressed interaction text link */;
 }
 
-.sd-1-2-0-meta--pipe::after {
+.sd-1-3-1-meta--pipe::after {
       content: '|';
       margin-left: var(--sd-spacing-1, 0.25rem) /* 4px */;
       margin-right: var(--sd-spacing-1, 0.25rem) /* 4px */;
     }
 
-.sd-1-2-0-meta--pipe.sd-1-2-0-meta--size-sm::after {
+.sd-1-3-1-meta--pipe.sd-1-3-1-meta--size-sm::after {
   margin-left: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
   margin-right: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
 }
 
+/**
+ * Used to split large content into several pages, allowing users to navigate between them instead of displaying all information on a single page.
+ * @name sd-1-3-1-pagination
+ * @status stable
+ * @since 1.3
+ * @variant { simple } sd-1-3-1-pagination--... The pagination format.
+ * @boolean sd-1-3-1-pagination--inverted Inverts the pagination style.
+ */
+
+.sd-1-3-1-pagination > :not(ul) {
+  position: absolute;
+  height: var(--sd-spacing-0-25, 1px) /* 1px */;
+  width: var(--sd-spacing-0-25, 1px) /* 1px */;
+  overflow: hidden;
+}
+
+.sd-1-3-1-pagination ul {
+  display: flex;
+  align-items: center;
+  gap: var(--sd-spacing-2, 0.5rem) /* 8px */;
+}
+
+.sd-1-3-1-pagination ul li a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+  color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
+  transition-property: color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.sd-1-3-1-pagination ul li a:hover:not([disabled]) {
+  
+  color: rgb(var(--sd-color-primary-500, 70 109 175) / var(--tw-text-opacity, 1)) /* Used for hover interaction */;
+}
+
+.sd-1-3-1-pagination ul li a:active:not([disabled]) {
+  
+  color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-text-opacity, 1)) /* Used for pressed interaction */;
+}
+
+.sd-1-3-1-pagination ul li a:focus-visible {
+  outline-style: solid;
+  outline-width: 2px;
+  outline-offset: 2px;
+  outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
+}
+
+/* Previous and Next */
+
+.sd-1-3-1-pagination ul li:first-child,
+    .sd-1-3-1-pagination ul li:last-child {
+  height: var(--sd-spacing-12, 3rem) /* 48px */;
+  width: var(--sd-spacing-12, 3rem) /* 48px */;
+}
+
+.sd-1-3-1-pagination ul li:first-child a, .sd-1-3-1-pagination ul li:last-child a {
+  height: 100%;
+  width: 100%;
+}
+
+.sd-1-3-1-pagination ul li:first-child sd-icon, .sd-1-3-1-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-1-3-1-pagination ul li {
+  display: flex;
+  height: var(--sd-spacing-8, 2rem) /* 32px */;
+  width: var(--sd-spacing-8, 2rem) /* 32px */;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.sd-1-3-1-pagination ul li:not(:has(a sd-icon)) a {
+  height: 100%;
+  width: 100%;
+  border-bottom-width: 2px;
+  border-bottom-color: transparent;
+}
+
+.sd-1-3-1-pagination ul li:not(:has(a sd-icon)) 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
+ */;
+}
+
+.sd-1-3-1-pagination ul li a[aria-current] {
+  
+  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
+}
+
+.sd-1-3-1-pagination ul li a[aria-current]:hover:not([disabled]) {
+  
+  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
+}
+
+/* Previous and next arrow when it has no href */
+
+.sd-1-3-1-pagination ul li:has(a:not([href]) sd-icon) a {
+  cursor: not-allowed;
+  
+  color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
+}
+
+.sd-1-3-1-pagination ul li:has(a:not([href]) sd-icon) a:hover:not([disabled]) {
+  
+  color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
+}
+
+/* Numbers */
+
+/* Number which is not current */
+
+.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):not(:has(a[aria-current])) {
+  pointer-events: none;
+  position: absolute;
+}
+
+.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):not(:has(a[aria-current])) a {
+  display: none;
+}
+
+/* Apply ellipsis to (n + 2 && n - 1) */
+
+.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):has(+ li + li a[aria-current]),
+        .sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):has(a[aria-current]) + li + li:not(:last-child) {
+  pointer-events: auto !important;
+  position: relative !important;
+}
+
+.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):has(+ li + li a[aria-current])::after,
+        .sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):has(a[aria-current]) + li + li:not(:last-child)::after {
+  --tw-content: '...';
+  content: var(--tw-content);
+}
+
+.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(2), 
+        .sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(2), 
+        .sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):has(+ li a[aria-current]), 
+        .sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):has(a[aria-current]) + li {
+  pointer-events: auto !important;
+  position: relative !important;
+}
+
+.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(2)::after, 
+        .sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(2)::after, 
+        .sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):has(+ li a[aria-current])::after, 
+        .sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):has(a[aria-current]) + li::after {
+  content: var(--tw-content) !important;
+  display: none !important;
+}
+
+.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(2) a, .sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(2) a, .sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):has(+ li a[aria-current]) a, .sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):has(a[aria-current]) + li a {
+  display: flex !important;
+}
+
+/* When one of the first 4 pages is selected */
+
+/* Show until the 5th page (forward) */
+
+.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(-n + 6):has(a[aria-current]) ~ :nth-child(-n + 6) {
+  pointer-events: auto;
+  position: relative;
+}
+
+.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(-n + 6):has(a[aria-current]) ~ :nth-child(-n + 6)::after {
+  content: var(--tw-content);
+  display: none;
+}
+
+.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(-n + 6):has(a[aria-current]) ~ :nth-child(-n + 6) a {
+  display: flex;
+}
+
+/* Show ellipsis on the 6th */
+
+.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(-n + 6):has(a[aria-current]) ~ :nth-child(6):not(:last-child) + li {
+  pointer-events: none;
+  position: relative;
+}
+
+.sd-1-3-1-pagination:not(.sd-1-3-1-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 {
+  --tw-content: '...';
+  content: var(--tw-content);
+}
+
+/* When one of the first 4 pages is selected, show until the 5th page (backward) */
+
+.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current]) {
+  pointer-events: auto;
+  position: relative;
+}
+
+.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current])::after {
+  content: var(--tw-content);
+  display: none;
+}
+
+.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):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-1-3-1-pagination:not(.sd-1-3-1-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)) {
+  pointer-events: auto;
+  position: relative;
+}
+
+.sd-1-3-1-pagination:not(.sd-1-3-1-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 {
+  content: var(--tw-content);
+  display: none;
+}
+
+.sd-1-3-1-pagination:not(.sd-1-3-1-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 {
+  display: flex;
+}
+
+/* When one of the last 4 pages is selected, show the last 4 pages (backward) */
+
+.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(-n + 6):has(~ :nth-last-child(-n + 5) a[aria-current]) {
+  pointer-events: auto;
+  position: relative;
+}
+
+.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(-n + 6):has(~ :nth-last-child(-n + 5) a[aria-current])::after {
+  content: var(--tw-content);
+  display: none;
+}
+
+.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):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-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(7):has(~ :nth-last-child(-n + 5) a[aria-current]) {
+  pointer-events: none;
+  position: relative;
+}
+
+.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(7):has(~ :nth-last-child(-n + 5) a[aria-current])::after {
+  --tw-content: '...';
+  content: var(--tw-content);
+}
+
+/* When it only has 5 numbers + 2 prev & next buttons */
+
+.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li {
+  pointer-events: auto;
+  position: relative;
+}
+
+.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li::after {
+  content: var(--tw-content);
+  display: none;
+}
+
+.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li a {
+  display: flex;
+}
+
+.sd-1-3-1-pagination--simple ul li:nth-child(2) {
+  position: relative;
+  margin-inline-end: var(--sd-spacing-5, 1.25rem) /* 20px */;
+  width: var(--sd-spacing-8, 2rem) /* 32px */;
+  border-bottom-width: 2px;
+  --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
+ */;
+}
+
+.sd-1-3-1-pagination--simple ul li:nth-child(2)::after {
+  position: absolute;
+  right: -18px;
+  --tw-scale-y: 1.5;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  --tw-content: '/';
+  content: var(--tw-content);
+}
+
+.sd-1-3-1-pagination--simple ul li:nth-last-child(2) {
+  border-bottom-width: 2px;
+  border-bottom-color: transparent;
+}
+
+.sd-1-3-1-pagination--inverted ul li::after {
+  content: var(--tw-content);
+  
+  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
+}
+
+.sd-1-3-1-pagination--inverted ul li:has(a:not([href]) sd-icon) a {
+  
+  color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
+}
+
+.sd-1-3-1-pagination--inverted ul li:has(a:not([href]) sd-icon) a:hover:not([disabled]) {
+  
+  color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
+}
+
+.sd-1-3-1-pagination--inverted ul li a,
+      .sd-1-3-1-pagination--inverted ul li a[aria-current] {
+  
+  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
+}
+
+.sd-1-3-1-pagination--inverted ul li a:hover:not([disabled]),
+      .sd-1-3-1-pagination--inverted ul li a[aria-current]:hover:not([disabled]) {
+  
+  color: rgb(var(--sd-color-primary-200, 224 233 243) / var(--tw-text-opacity, 1)) /* Used for inverted hover interaction text link and inverted pressed interaction button label */;
+}
+
+.sd-1-3-1-pagination--inverted ul li a:active:not([disabled]),
+      .sd-1-3-1-pagination--inverted ul li a[aria-current]:active:not([disabled]) {
+  
+  color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
+Used for inverted pressed interaction text link */;
+}
+
+.sd-1-3-1-pagination--inverted ul li a:focus-visible, .sd-1-3-1-pagination--inverted ul li a[aria-current]:focus-visible {
+  outline-color: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */;
+}
+
+.sd-1-3-1-pagination--inverted.sd-1-3-1-pagination--simple ul li {
+  
+  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
+}
+
+.sd-1-3-1-pagination--inverted.sd-1-3-1-pagination--simple ul li::after {
+  content: var(--tw-content);
+  
+  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
+}
+
 /**
  * Description of the style.
- * @name sd-1-2-0-status-badge
+ * @name sd-1-3-1-status-badge
  * @status stable
  * @since 1.0
- * @variant { sucess | warning | error | info } sd-1-2-0-status-badge--...
+ * @variant { sucess | warning | error | info } sd-1-3-1-status-badge--...
  */
 
-.sd-1-2-0-status-badge {
+.sd-1-3-1-status-badge {
   display: inline-flex;
   align-items: center;
 }
 
-.sd-1-2-0-status-badge sd-icon {
+.sd-1-3-1-status-badge sd-icon {
   margin-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
   display: flex;
   height: var(--sd-spacing-3, 0.75rem) /* 12px */;
@@ -623,22 +974,22 @@ Used for inverted pressed interaction text link */;
   color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */ !important;
 }
 
-.sd-1-2-0-status-badge--success sd-icon {
+.sd-1-3-1-status-badge--success sd-icon {
   
   background-color: rgb(var(--sd-color-success, 37 136 14) / var(--tw-bg-opacity, 1)) /* Used for success messages */;
 }
 
-.sd-1-2-0-status-badge--warning sd-icon {
+.sd-1-3-1-status-badge--warning sd-icon {
   
   background-color: rgb(var(--sd-color-warning, 187 141 32) / var(--tw-bg-opacity, 1)) /* Used for notifications */;
 }
 
-.sd-1-2-0-status-badge--error sd-icon {
+.sd-1-3-1-status-badge--error sd-icon {
   
   background-color: rgb(var(--sd-color-error, 204 25 55) / var(--tw-bg-opacity, 1)) /* Used for notification, status-badge */;
 }
 
-.sd-1-2-0-status-badge--info sd-icon {
+.sd-1-3-1-status-badge--info sd-icon {
   
   background-color: rgb(var(--sd-color-info, 21 130 213) / var(--tw-bg-opacity, 1)) /* Used for notification, status-badge */;
 }
@@ -647,23 +998,23 @@ Used for inverted pressed interaction text link */;
 
 /**
  * Prose
- * @name sd-1-2-0-prose
+ * @name sd-1-3-1-prose
  * @status stable
  * @since 3.6.0
- * @boolean sd-1-2-0-prose--inverted Inverts the content, but not tables.
- * @boolean sd-1-2-0-prose--full-width Overrides the 80ch max-width and makes the prose full width.
+ * @boolean sd-1-3-1-prose--inverted Inverts the content, but not tables.
+ * @boolean sd-1-3-1-prose--full-width Overrides the 80ch max-width and makes the prose full width.
  */
 
 /**
  * Display provides larger text sizes that are not used as headlines. The different sizes allow for a more versatile styling of text elements. Display text should not be used as substitute for headlines.
- * @name sd-1-2-0-display
+ * @name sd-1-3-1-display
  * @status stable
  * @since 1.7
- * @variant { xl | 3xl } sd-1-2-0-display--size-... The display's size.
- * @boolean sd-1-2-0-display--inverted Inverts the display text.
+ * @variant { xl | 3xl } sd-1-3-1-display--size-... The display's size.
+ * @boolean sd-1-3-1-display--inverted Inverts the display text.
  */
 
-.sd-1-2-0-display {
+.sd-1-3-1-display {
   font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
   font-weight: 400;
   line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
@@ -673,12 +1024,12 @@ Used for inverted pressed interaction text link */;
 
 @media (min-width: 1024px) {
 
-  .sd-1-2-0-display {
+  .sd-1-3-1-display {
     font-size: var(--sd-font-size-4xl, 2.5rem) /* 40px */;
   }
 }
 
-.sd-1-2-0-display--size-xl {
+.sd-1-3-1-display--size-xl {
   font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
   font-weight: 400;
   line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
@@ -686,7 +1037,7 @@ Used for inverted pressed interaction text link */;
   color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
 }
 
-.sd-1-2-0-display--size-3xl {
+.sd-1-3-1-display--size-3xl {
   font-size: var(--sd-font-size-2xl, 1.75rem) /* 28px */;
   font-weight: 400;
   line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
@@ -696,35 +1047,35 @@ Used for inverted pressed interaction text link */;
 
 @media (min-width: 1024px) {
 
-  .sd-1-2-0-display--size-3xl {
+  .sd-1-3-1-display--size-3xl {
     font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
   }
 }
 
-.sd-1-2-0-display--inverted {
+.sd-1-3-1-display--inverted {
   
   color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
 /**
  * Headlines are vital for displaying content hierarchy and to improve accessibility. A headline can be additionally accompanied by an icon. The icon can be displayed on the left side or inline.
- * @name sd-1-2-0-headline
+ * @name sd-1-3-1-headline
  * @status stable
  * @since 1.16
- * @variant { 3xl | xl | lg | base } sd-1-2-0-headline--size-... The headline's size.
- * @boolean sd-1-2-0-headline--inverted Inverts the headline text.
- * @boolean sd-1-2-0-headline--inline Sets inline behavior. Used exclusively when an sd-icon or other component is present. See usage <a href="#inline">here.</a>
+ * @variant { 3xl | xl | lg | base } sd-1-3-1-headline--size-... The headline's size.
+ * @boolean sd-1-3-1-headline--inverted Inverts the headline text.
+ * @boolean sd-1-3-1-headline--inline Sets inline behavior. Used exclusively when an sd-icon or other component is present. See usage <a href="#inline">here.</a>
  */
 
-.sd-1-2-0-headline,
-.sd-1-2-0-prose :is(h1, h2, h3, h4, h5) {
+.sd-1-3-1-headline,
+.sd-1-3-1-prose :is(h1, h2, h3, h4, h5) {
   display: flex;
   font-weight: 700;
   
   color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
 }
 
-.sd-1-2-0-headline sd-icon, .sd-1-2-0-prose :is(h1, h2, h3, h4, h5) sd-icon {
+.sd-1-3-1-headline sd-icon, .sd-1-3-1-prose :is(h1, h2, h3, h4, h5) sd-icon {
   flex-shrink: 0;
   font-size: 3rem;
   
@@ -733,15 +1084,15 @@ Used for inverted pressed interaction text link */;
 
 @media (min-width: 640px) {
 
-  .sd-1-2-0-headline sd-icon, .sd-1-2-0-prose :is(h1, h2, h3, h4, h5) sd-icon {
+  .sd-1-3-1-headline sd-icon, .sd-1-3-1-prose :is(h1, h2, h3, h4, h5) sd-icon {
     margin-top: var(--sd-spacing-2, 0.5rem) /* 8px */;
   }
 }
 
-.sd-1-2-0-headline.sd-1-2-0-headline,
-  .sd-1-2-0-headline:is(h1):not(.sd-1-2-0-headline),
-  .sd-1-2-0-prose :is(h1, h2, h3, h4, h5).sd-1-2-0-headline,
-  .sd-1-2-0-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-2-0-headline) {
+.sd-1-3-1-headline.sd-1-3-1-headline,
+  .sd-1-3-1-headline:is(h1):not(.sd-1-3-1-headline),
+  .sd-1-3-1-prose :is(h1, h2, h3, h4, h5).sd-1-3-1-headline,
+  .sd-1-3-1-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-3-1-headline) {
   gap: var(--sd-spacing-4, 1rem) /* 16px */;
   font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
   line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
@@ -749,29 +1100,29 @@ Used for inverted pressed interaction text link */;
 
 @media (min-width: 640px) {
 
-  .sd-1-2-0-headline.sd-1-2-0-headline,
-  .sd-1-2-0-headline:is(h1):not(.sd-1-2-0-headline),
-  .sd-1-2-0-prose :is(h1, h2, h3, h4, h5).sd-1-2-0-headline,
-  .sd-1-2-0-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-2-0-headline) {
+  .sd-1-3-1-headline.sd-1-3-1-headline,
+  .sd-1-3-1-headline:is(h1):not(.sd-1-3-1-headline),
+  .sd-1-3-1-prose :is(h1, h2, h3, h4, h5).sd-1-3-1-headline,
+  .sd-1-3-1-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-3-1-headline) {
     font-size: var(--sd-font-size-4xl, 2.5rem) /* 40px */;
   }
 }
 
-.sd-1-2-0-headline.sd-1-2-0-headline sd-icon, .sd-1-2-0-headline:is(h1):not(.sd-1-2-0-headline) sd-icon, .sd-1-2-0-prose :is(h1, h2, h3, h4, h5).sd-1-2-0-headline sd-icon, .sd-1-2-0-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-2-0-headline) sd-icon {
+.sd-1-3-1-headline.sd-1-3-1-headline sd-icon, .sd-1-3-1-headline:is(h1):not(.sd-1-3-1-headline) sd-icon, .sd-1-3-1-prose :is(h1, h2, h3, h4, h5).sd-1-3-1-headline sd-icon, .sd-1-3-1-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-3-1-headline) sd-icon {
   margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
 }
 
 @media (min-width: 640px) {
 
-  .sd-1-2-0-headline.sd-1-2-0-headline sd-icon, .sd-1-2-0-headline:is(h1):not(.sd-1-2-0-headline) sd-icon, .sd-1-2-0-prose :is(h1, h2, h3, h4, h5).sd-1-2-0-headline sd-icon, .sd-1-2-0-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-2-0-headline) sd-icon {
+  .sd-1-3-1-headline.sd-1-3-1-headline sd-icon, .sd-1-3-1-headline:is(h1):not(.sd-1-3-1-headline) sd-icon, .sd-1-3-1-prose :is(h1, h2, h3, h4, h5).sd-1-3-1-headline sd-icon, .sd-1-3-1-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-3-1-headline) sd-icon {
     margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
   }
 }
 
-.sd-1-2-0-headline.sd-1-2-0-headline--size-3xl,
-  .sd-1-2-0-headline:is(h2):not(.sd-1-2-0-headline),
-  .sd-1-2-0-prose :is(h1, h2, h3, h4, h5).sd-1-2-0-headline--size-3xl,
-  .sd-1-2-0-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-2-0-headline) {
+.sd-1-3-1-headline.sd-1-3-1-headline--size-3xl,
+  .sd-1-3-1-headline:is(h2):not(.sd-1-3-1-headline),
+  .sd-1-3-1-prose :is(h1, h2, h3, h4, h5).sd-1-3-1-headline--size-3xl,
+  .sd-1-3-1-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-3-1-headline) {
   gap: var(--sd-spacing-4, 1rem) /* 16px */;
   font-size: var(--sd-font-size-2xl, 1.75rem) /* 28px */;
   line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
@@ -779,144 +1130,144 @@ Used for inverted pressed interaction text link */;
 
 @media (min-width: 640px) {
 
-  .sd-1-2-0-headline.sd-1-2-0-headline--size-3xl,
-  .sd-1-2-0-headline:is(h2):not(.sd-1-2-0-headline),
-  .sd-1-2-0-prose :is(h1, h2, h3, h4, h5).sd-1-2-0-headline--size-3xl,
-  .sd-1-2-0-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-2-0-headline) {
+  .sd-1-3-1-headline.sd-1-3-1-headline--size-3xl,
+  .sd-1-3-1-headline:is(h2):not(.sd-1-3-1-headline),
+  .sd-1-3-1-prose :is(h1, h2, h3, h4, h5).sd-1-3-1-headline--size-3xl,
+  .sd-1-3-1-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-3-1-headline) {
     font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
   }
 }
 
-.sd-1-2-0-headline.sd-1-2-0-headline--size-3xl sd-icon, .sd-1-2-0-headline:is(h2):not(.sd-1-2-0-headline) sd-icon, .sd-1-2-0-prose :is(h1, h2, h3, h4, h5).sd-1-2-0-headline--size-3xl sd-icon, .sd-1-2-0-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-2-0-headline) sd-icon {
+.sd-1-3-1-headline.sd-1-3-1-headline--size-3xl sd-icon, .sd-1-3-1-headline:is(h2):not(.sd-1-3-1-headline) sd-icon, .sd-1-3-1-prose :is(h1, h2, h3, h4, h5).sd-1-3-1-headline--size-3xl sd-icon, .sd-1-3-1-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-3-1-headline) sd-icon {
   margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
 }
 
 @media (min-width: 640px) {
 
-  .sd-1-2-0-headline.sd-1-2-0-headline--size-3xl sd-icon, .sd-1-2-0-headline:is(h2):not(.sd-1-2-0-headline) sd-icon, .sd-1-2-0-prose :is(h1, h2, h3, h4, h5).sd-1-2-0-headline--size-3xl sd-icon, .sd-1-2-0-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-2-0-headline) sd-icon {
+  .sd-1-3-1-headline.sd-1-3-1-headline--size-3xl sd-icon, .sd-1-3-1-headline:is(h2):not(.sd-1-3-1-headline) sd-icon, .sd-1-3-1-prose :is(h1, h2, h3, h4, h5).sd-1-3-1-headline--size-3xl sd-icon, .sd-1-3-1-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-3-1-headline) sd-icon {
     margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
   }
 }
 
-.sd-1-2-0-headline.sd-1-2-0-headline--size-xl,
-  .sd-1-2-0-headline.sd-1-2-0-headline--size-lg,
-  .sd-1-2-0-headline.sd-1-2-0-headline--size-base,
-  .sd-1-2-0-headline:is(h3, h4, h5):not(.sd-1-2-0-headline),
-  .sd-1-2-0-prose :is(h1, h2, h3, h4, h5).sd-1-2-0-headline--size-xl,
-  .sd-1-2-0-prose :is(h1, h2, h3, h4, h5).sd-1-2-0-headline--size-lg,
-  .sd-1-2-0-prose :is(h1, h2, h3, h4, h5).sd-1-2-0-headline--size-base,
-  .sd-1-2-0-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-1-2-0-headline) {
+.sd-1-3-1-headline.sd-1-3-1-headline--size-xl,
+  .sd-1-3-1-headline.sd-1-3-1-headline--size-lg,
+  .sd-1-3-1-headline.sd-1-3-1-headline--size-base,
+  .sd-1-3-1-headline:is(h3, h4, h5):not(.sd-1-3-1-headline),
+  .sd-1-3-1-prose :is(h1, h2, h3, h4, h5).sd-1-3-1-headline--size-xl,
+  .sd-1-3-1-prose :is(h1, h2, h3, h4, h5).sd-1-3-1-headline--size-lg,
+  .sd-1-3-1-prose :is(h1, h2, h3, h4, h5).sd-1-3-1-headline--size-base,
+  .sd-1-3-1-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-1-3-1-headline) {
   gap: var(--sd-spacing-2, 0.5rem) /* 8px */;
   
   color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
 }
 
-.sd-1-2-0-headline.sd-1-2-0-headline--size-xl sd-icon, .sd-1-2-0-headline.sd-1-2-0-headline--size-lg sd-icon, .sd-1-2-0-headline.sd-1-2-0-headline--size-base sd-icon, .sd-1-2-0-headline:is(h3, h4, h5):not(.sd-1-2-0-headline) sd-icon, .sd-1-2-0-prose :is(h1, h2, h3, h4, h5).sd-1-2-0-headline--size-xl sd-icon, .sd-1-2-0-prose :is(h1, h2, h3, h4, h5).sd-1-2-0-headline--size-lg sd-icon, .sd-1-2-0-prose :is(h1, h2, h3, h4, h5).sd-1-2-0-headline--size-base sd-icon, .sd-1-2-0-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-1-2-0-headline) sd-icon {
+.sd-1-3-1-headline.sd-1-3-1-headline--size-xl sd-icon, .sd-1-3-1-headline.sd-1-3-1-headline--size-lg sd-icon, .sd-1-3-1-headline.sd-1-3-1-headline--size-base sd-icon, .sd-1-3-1-headline:is(h3, h4, h5):not(.sd-1-3-1-headline) sd-icon, .sd-1-3-1-prose :is(h1, h2, h3, h4, h5).sd-1-3-1-headline--size-xl sd-icon, .sd-1-3-1-prose :is(h1, h2, h3, h4, h5).sd-1-3-1-headline--size-lg sd-icon, .sd-1-3-1-prose :is(h1, h2, h3, h4, h5).sd-1-3-1-headline--size-base sd-icon, .sd-1-3-1-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-1-3-1-headline) sd-icon {
   font-size: 2rem;
 }
 
-.sd-1-2-0-headline.sd-1-2-0-headline--size-xl,
-  .sd-1-2-0-headline:is(h3):not(.sd-1-2-0-headline),
-  .sd-1-2-0-prose :is(h1, h2, h3, h4, h5).sd-1-2-0-headline--size-xl,
-  .sd-1-2-0-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-2-0-headline) {
+.sd-1-3-1-headline.sd-1-3-1-headline--size-xl,
+  .sd-1-3-1-headline:is(h3):not(.sd-1-3-1-headline),
+  .sd-1-3-1-prose :is(h1, h2, h3, h4, h5).sd-1-3-1-headline--size-xl,
+  .sd-1-3-1-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-3-1-headline) {
   font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
 }
 
-.sd-1-2-0-headline.sd-1-2-0-headline--size-xl sd-icon, .sd-1-2-0-headline:is(h3):not(.sd-1-2-0-headline) sd-icon, .sd-1-2-0-prose :is(h1, h2, h3, h4, h5).sd-1-2-0-headline--size-xl sd-icon, .sd-1-2-0-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-2-0-headline) sd-icon {
+.sd-1-3-1-headline.sd-1-3-1-headline--size-xl sd-icon, .sd-1-3-1-headline:is(h3):not(.sd-1-3-1-headline) sd-icon, .sd-1-3-1-prose :is(h1, h2, h3, h4, h5).sd-1-3-1-headline--size-xl sd-icon, .sd-1-3-1-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-3-1-headline) sd-icon {
   margin-top: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
 }
 
 @media (min-width: 640px) {
 
-  .sd-1-2-0-headline.sd-1-2-0-headline--size-xl sd-icon, .sd-1-2-0-headline:is(h3):not(.sd-1-2-0-headline) sd-icon, .sd-1-2-0-prose :is(h1, h2, h3, h4, h5).sd-1-2-0-headline--size-xl sd-icon, .sd-1-2-0-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-2-0-headline) sd-icon {
+  .sd-1-3-1-headline.sd-1-3-1-headline--size-xl sd-icon, .sd-1-3-1-headline:is(h3):not(.sd-1-3-1-headline) sd-icon, .sd-1-3-1-prose :is(h1, h2, h3, h4, h5).sd-1-3-1-headline--size-xl sd-icon, .sd-1-3-1-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-3-1-headline) sd-icon {
     margin-top: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
   }
 }
 
-.sd-1-2-0-headline.sd-1-2-0-headline--size-lg,
-  .sd-1-2-0-headline.sd-1-2-0-headline--size-base,
-  .sd-1-2-0-headline:is(h4, h5):not(.sd-1-2-0-headline),
-  .sd-1-2-0-prose :is(h1, h2, h3, h4, h5).sd-1-2-0-headline--size-lg,
-  .sd-1-2-0-prose :is(h1, h2, h3, h4, h5).sd-1-2-0-headline--size-base,
-  .sd-1-2-0-prose :is(h1, h2, h3, h4, h5):is(h4, h5):not(.sd-1-2-0-headline) {
+.sd-1-3-1-headline.sd-1-3-1-headline--size-lg,
+  .sd-1-3-1-headline.sd-1-3-1-headline--size-base,
+  .sd-1-3-1-headline:is(h4, h5):not(.sd-1-3-1-headline),
+  .sd-1-3-1-prose :is(h1, h2, h3, h4, h5).sd-1-3-1-headline--size-lg,
+  .sd-1-3-1-prose :is(h1, h2, h3, h4, h5).sd-1-3-1-headline--size-base,
+  .sd-1-3-1-prose :is(h1, h2, h3, h4, h5):is(h4, h5):not(.sd-1-3-1-headline) {
   line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
 }
 
-.sd-1-2-0-headline.sd-1-2-0-headline--size-lg,
-  .sd-1-2-0-headline:is(h4),
-  .sd-1-2-0-prose :is(h1, h2, h3, h4, h5).sd-1-2-0-headline--size-lg,
-  .sd-1-2-0-prose :is(h1, h2, h3, h4, h5):is(h4) {
+.sd-1-3-1-headline.sd-1-3-1-headline--size-lg,
+  .sd-1-3-1-headline:is(h4),
+  .sd-1-3-1-prose :is(h1, h2, h3, h4, h5).sd-1-3-1-headline--size-lg,
+  .sd-1-3-1-prose :is(h1, h2, h3, h4, h5):is(h4) {
   font-size: var(--sd-font-size-lg, 1.25rem) /* 20px */;
 }
 
-.sd-1-2-0-headline.sd-1-2-0-headline--size-lg sd-icon, .sd-1-2-0-headline:is(h4) sd-icon, .sd-1-2-0-prose :is(h1, h2, h3, h4, h5).sd-1-2-0-headline--size-lg sd-icon, .sd-1-2-0-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
+.sd-1-3-1-headline.sd-1-3-1-headline--size-lg sd-icon, .sd-1-3-1-headline:is(h4) sd-icon, .sd-1-3-1-prose :is(h1, h2, h3, h4, h5).sd-1-3-1-headline--size-lg sd-icon, .sd-1-3-1-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
   margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
 }
 
 @media (min-width: 640px) {
 
-  .sd-1-2-0-headline.sd-1-2-0-headline--size-lg sd-icon, .sd-1-2-0-headline:is(h4) sd-icon, .sd-1-2-0-prose :is(h1, h2, h3, h4, h5).sd-1-2-0-headline--size-lg sd-icon, .sd-1-2-0-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
+  .sd-1-3-1-headline.sd-1-3-1-headline--size-lg sd-icon, .sd-1-3-1-headline:is(h4) sd-icon, .sd-1-3-1-prose :is(h1, h2, h3, h4, h5).sd-1-3-1-headline--size-lg sd-icon, .sd-1-3-1-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
     margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
   }
 }
 
-.sd-1-2-0-headline.sd-1-2-0-headline--size-base,
-  .sd-1-2-0-headline:is(h5):not(.sd-1-2-0-headline),
-  .sd-1-2-0-prose :is(h1, h2, h3, h4, h5).sd-1-2-0-headline--size-base,
-  .sd-1-2-0-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-2-0-headline) {
+.sd-1-3-1-headline.sd-1-3-1-headline--size-base,
+  .sd-1-3-1-headline:is(h5):not(.sd-1-3-1-headline),
+  .sd-1-3-1-prose :is(h1, h2, h3, h4, h5).sd-1-3-1-headline--size-base,
+  .sd-1-3-1-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-3-1-headline) {
   font-size: var(--sd-font-size-base, 1rem) /* 16px */;
 }
 
-.sd-1-2-0-headline.sd-1-2-0-headline--size-base sd-icon, .sd-1-2-0-headline:is(h5):not(.sd-1-2-0-headline) sd-icon, .sd-1-2-0-prose :is(h1, h2, h3, h4, h5).sd-1-2-0-headline--size-base sd-icon, .sd-1-2-0-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-2-0-headline) sd-icon {
+.sd-1-3-1-headline.sd-1-3-1-headline--size-base sd-icon, .sd-1-3-1-headline:is(h5):not(.sd-1-3-1-headline) sd-icon, .sd-1-3-1-prose :is(h1, h2, h3, h4, h5).sd-1-3-1-headline--size-base sd-icon, .sd-1-3-1-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-3-1-headline) sd-icon {
   margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
 }
 
-.sd-1-2-0-headline.sd-1-2-0-headline--size-base mark, .sd-1-2-0-headline:is(h5):not(.sd-1-2-0-headline) mark, .sd-1-2-0-prose :is(h1, h2, h3, h4, h5).sd-1-2-0-headline--size-base mark, .sd-1-2-0-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-2-0-headline) mark {
+.sd-1-3-1-headline.sd-1-3-1-headline--size-base mark, .sd-1-3-1-headline:is(h5):not(.sd-1-3-1-headline) mark, .sd-1-3-1-prose :is(h1, h2, h3, h4, h5).sd-1-3-1-headline--size-base mark, .sd-1-3-1-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-3-1-headline) mark {
   color: inherit;
 }
 
-.sd-1-2-0-headline--inline {
+.sd-1-3-1-headline--inline {
   display: inline-block;
 }
 
-.sd-1-2-0-headline--inline sd-icon {
+.sd-1-3-1-headline--inline sd-icon {
   margin-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
   margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
   vertical-align: middle;
 }
 
-.sd-1-2-0-headline--inline:is(.sd-1-2-0-headline--size-xl, .sd-1-2-0-headline--size-lg, .sd-1-2-0-headline--size-base) sd-icon {
+.sd-1-3-1-headline--inline:is(.sd-1-3-1-headline--size-xl, .sd-1-3-1-headline--size-lg, .sd-1-3-1-headline--size-base) sd-icon {
   margin-right: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
 }
 
-.sd-1-2-0-headline--inverted:not(#_),
-.sd-1-2-0-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-1-2-0-headline):not(#_) {
+.sd-1-3-1-headline--inverted:not(#_),
+.sd-1-3-1-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-1-3-1-headline):not(#_) {
   
   color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
-.sd-1-2-0-headline--inverted:not(#_) sd-icon, .sd-1-2-0-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-1-2-0-headline):not(#_) sd-icon {
+.sd-1-3-1-headline--inverted:not(#_) sd-icon, .sd-1-3-1-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-1-3-1-headline):not(#_) sd-icon {
   
   color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
 /**
  * Generates basic styles for interactive elements.
- * @name sd-1-2-0-interactive
+ * @name sd-1-3-1-interactive
  * @status stable
  * @since 1.11
- * @boolean sd-1-2-0-interactive--disabled Makes an element look disabled.
- * @boolean sd-1-2-0-interactive--inverted Inverts the colors of an element.
- * @boolean sd-1-2-0-interactive--reset Resets the default browser styles of e.g., a button.
+ * @boolean sd-1-3-1-interactive--disabled Makes an element look disabled.
+ * @boolean sd-1-3-1-interactive--inverted Inverts the colors of an element.
+ * @boolean sd-1-3-1-interactive--reset Resets the default browser styles of e.g., a button.
  */
 
-.sd-1-2-0-prose a--reset, .sd-1-2-0-interactive--reset {
+.sd-1-3-1-prose a--reset, .sd-1-3-1-interactive--reset {
     all: unset;
     outline: revert;
   }
 
-.sd-1-2-0-prose a,
-.sd-1-2-0-interactive {
+.sd-1-3-1-prose a,
+.sd-1-3-1-interactive {
   cursor: pointer;
   
   color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
@@ -926,80 +1277,80 @@ Used for inverted pressed interaction text link */;
   transition-duration: 150ms;
 }
 
-.sd-1-2-0-prose a:hover:not([disabled]),
-.sd-1-2-0-interactive:hover:not([disabled]) {
+.sd-1-3-1-prose a:hover:not([disabled]),
+.sd-1-3-1-interactive:hover:not([disabled]) {
   
   color: rgb(var(--sd-color-primary-500, 70 109 175) / var(--tw-text-opacity, 1)) /* Used for hover interaction */;
 }
 
-.sd-1-2-0-prose a:active:not([disabled]),
-.sd-1-2-0-interactive:active:not([disabled]) {
+.sd-1-3-1-prose a:active:not([disabled]),
+.sd-1-3-1-interactive:active:not([disabled]) {
   
   color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-text-opacity, 1)) /* Used for pressed interaction */;
 }
 
-.sd-1-2-0-prose a:is(.sd-1-2-0-interactive), .sd-1-2-0-interactive:is(.sd-1-2-0-interactive) {
+.sd-1-3-1-prose a:is(.sd-1-3-1-interactive), .sd-1-3-1-interactive:is(.sd-1-3-1-interactive) {
   text-decoration-line: none;
 }
 
-.sd-1-2-0-prose a:focus-visible, .sd-1-2-0-interactive:focus-visible {
+.sd-1-3-1-prose a:focus-visible, .sd-1-3-1-interactive:focus-visible {
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
   outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
 }
 
-.sd-1-2-0-prose a--disabled,
-  .sd-1-2-0-prose a[disabled],
-  .sd-1-2-0-prose a[href=''],
-  .sd-1-2-0-interactive--disabled,
-  .sd-1-2-0-interactive[disabled],
-  .sd-1-2-0-interactive[href=''] {
+.sd-1-3-1-prose a--disabled,
+  .sd-1-3-1-prose a[disabled],
+  .sd-1-3-1-prose a[href=''],
+  .sd-1-3-1-interactive--disabled,
+  .sd-1-3-1-interactive[disabled],
+  .sd-1-3-1-interactive[href=''] {
   cursor: not-allowed;
   
   color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
 }
 
-.sd-1-2-0-prose a--disabled:hover:not([disabled]),
-  .sd-1-2-0-prose a[disabled]:hover:not([disabled]),
-  .sd-1-2-0-prose a[href='']:hover:not([disabled]),
-  .sd-1-2-0-interactive--disabled:hover:not([disabled]),
-  .sd-1-2-0-interactive[disabled]:hover:not([disabled]),
-  .sd-1-2-0-interactive[href='']:hover:not([disabled]) {
+.sd-1-3-1-prose a--disabled:hover:not([disabled]),
+  .sd-1-3-1-prose a[disabled]:hover:not([disabled]),
+  .sd-1-3-1-prose a[href='']:hover:not([disabled]),
+  .sd-1-3-1-interactive--disabled:hover:not([disabled]),
+  .sd-1-3-1-interactive[disabled]:hover:not([disabled]),
+  .sd-1-3-1-interactive[href='']:hover:not([disabled]) {
   
   color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
 }
 
-.sd-1-2-0-prose a--disabled:active:not([disabled]),
-  .sd-1-2-0-prose a[disabled]:active:not([disabled]),
-  .sd-1-2-0-prose a[href='']:active:not([disabled]),
-  .sd-1-2-0-interactive--disabled:active:not([disabled]),
-  .sd-1-2-0-interactive[disabled]:active:not([disabled]),
-  .sd-1-2-0-interactive[href='']:active:not([disabled]) {
+.sd-1-3-1-prose a--disabled:active:not([disabled]),
+  .sd-1-3-1-prose a[disabled]:active:not([disabled]),
+  .sd-1-3-1-prose a[href='']:active:not([disabled]),
+  .sd-1-3-1-interactive--disabled:active:not([disabled]),
+  .sd-1-3-1-interactive[disabled]:active:not([disabled]),
+  .sd-1-3-1-interactive[href='']:active:not([disabled]) {
   
   color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
 }
 
-.sd-1-2-0-prose--inverted a,
-.sd-1-2-0-interactive--inverted {
+.sd-1-3-1-prose--inverted a,
+.sd-1-3-1-interactive--inverted {
   
   color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
-.sd-1-2-0-prose--inverted a:hover:not([disabled]),
-.sd-1-2-0-interactive--inverted:hover:not([disabled]) {
+.sd-1-3-1-prose--inverted a:hover:not([disabled]),
+.sd-1-3-1-interactive--inverted:hover:not([disabled]) {
   
   color: rgb(var(--sd-color-primary-200, 224 233 243) / var(--tw-text-opacity, 1)) /* Used for inverted hover interaction text link and inverted pressed interaction button label */;
 }
 
-.sd-1-2-0-prose--inverted a:active:not([disabled]),
-.sd-1-2-0-interactive--inverted:active:not([disabled]) {
+.sd-1-3-1-prose--inverted a:active:not([disabled]),
+.sd-1-3-1-interactive--inverted:active:not([disabled]) {
   
   color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
 Used for inverted pressed interaction text link */;
 }
 
-.sd-1-2-0-prose--inverted a:focus-visible, .sd-1-2-0-interactive--inverted:focus-visible {
+.sd-1-3-1-prose--inverted a:focus-visible, .sd-1-3-1-interactive--inverted:focus-visible {
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
@@ -1008,15 +1359,15 @@ Used for inverted pressed interaction text link */;
 
 /**
  * Leadtext is used for text that should be highlighted and a focal point of the page.
- * @name sd-1-2-0-leadtext
+ * @name sd-1-3-1-leadtext
  * @status stable
  * @since 1.7
- * @variant { lg } sd-1-2-0-leadtext--size-... The leadtext's size.
- * @boolean sd-1-2-0-leadtext--inverted Inverts the leadtext text.
+ * @variant { lg } sd-1-3-1-leadtext--size-... The leadtext's size.
+ * @boolean sd-1-3-1-leadtext--inverted Inverts the leadtext text.
  */
 
-.sd-1-2-0-prose > .sd-1-2-0-leadtext,
-.sd-1-2-0-leadtext {
+.sd-1-3-1-prose > .sd-1-3-1-leadtext,
+.sd-1-3-1-leadtext {
   font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
   font-weight: 400;
   line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
@@ -1024,7 +1375,7 @@ Used for inverted pressed interaction text link */;
   color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
 }
 
-.sd-1-2-0-prose > .sd-1-2-0-leadtext--size-lg, .sd-1-2-0-leadtext--size-lg {
+.sd-1-3-1-prose > .sd-1-3-1-leadtext--size-lg, .sd-1-3-1-leadtext--size-lg {
   font-size: var(--sd-font-size-lg, 1.25rem) /* 20px */;
   font-weight: 400;
   line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
@@ -1032,111 +1383,111 @@ Used for inverted pressed interaction text link */;
   color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
 }
 
-.sd-1-2-0-prose--inverted > .sd-1-2-0-leadtext,
-.sd-1-2-0-leadtext--inverted {
+.sd-1-3-1-prose--inverted > .sd-1-3-1-leadtext,
+.sd-1-3-1-leadtext--inverted {
   
   color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
 /**
  * Generates basic styles for list elements.
- * @name sd-1-2-0-list
+ * @name sd-1-3-1-list
  * @status stable
  * @since 1.39.0
- * @boolean sd-1-2-0-list--inverted Inverts the list text.
+ * @boolean sd-1-3-1-list--inverted Inverts the list text.
  */
 
-.sd-1-2-0-list:not(.sd-1-2-0-list--icon),
-.sd-1-2-0-prose > :is(ol, ul) {
+.sd-1-3-1-list:not(.sd-1-3-1-list--icon),
+.sd-1-3-1-prose > :is(ol, ul) {
   padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
   padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
   text-align: left;
 }
 
-.sd-1-2-0-list:not(.sd-1-2-0-list--icon) li:not(:first-child), .sd-1-2-0-prose > :is(ol, ul) li:not(:first-child) {
+.sd-1-3-1-list:not(.sd-1-3-1-list--icon) li:not(:first-child), .sd-1-3-1-prose > :is(ol, ul) li:not(:first-child) {
   margin-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
 }
 
-.sd-1-2-0-list:not(.sd-1-2-0-list--icon) ol,
-  .sd-1-2-0-list:not(.sd-1-2-0-list--icon) ul,
-  .sd-1-2-0-prose > :is(ol, ul) ol,
-  .sd-1-2-0-prose > :is(ol, ul) ul {
+.sd-1-3-1-list:not(.sd-1-3-1-list--icon) ol,
+  .sd-1-3-1-list:not(.sd-1-3-1-list--icon) ul,
+  .sd-1-3-1-prose > :is(ol, ul) ol,
+  .sd-1-3-1-prose > :is(ol, ul) ul {
   padding-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
 }
 
 /* Counter handling for ordered lists. */
 
-.sd-1-2-0-list:not(.sd-1-2-0-list--icon):is(ol) > li, .sd-1-2-0-list:not(.sd-1-2-0-list--icon) ol > li, .sd-1-2-0-prose > :is(ol, ul):is(ol) > li, .sd-1-2-0-prose > :is(ol, ul) ol > li {
+.sd-1-3-1-list:not(.sd-1-3-1-list--icon):is(ol) > li, .sd-1-3-1-list:not(.sd-1-3-1-list--icon) ol > li, .sd-1-3-1-prose > :is(ol, ul):is(ol) > li, .sd-1-3-1-prose > :is(ol, ul) ol > li {
       counter-increment: item;
     }
 
-.sd-1-2-0-list:not(.sd-1-2-0-list--icon):is(ol) > li:before, .sd-1-2-0-list:not(.sd-1-2-0-list--icon) ol > li:before, .sd-1-2-0-prose > :is(ol, ul):is(ol) > li:before, .sd-1-2-0-prose > :is(ol, ul) ol > li:before {
+.sd-1-3-1-list:not(.sd-1-3-1-list--icon):is(ol) > li:before, .sd-1-3-1-list:not(.sd-1-3-1-list--icon) ol > li:before, .sd-1-3-1-prose > :is(ol, ul):is(ol) > li:before, .sd-1-3-1-prose > :is(ol, ul) ol > li:before {
         content: counters(item, '.') '. ';
       }
 
 /* Add second level */
 
-.sd-1-2-0-list:not(.sd-1-2-0-list--icon):is(ol),
-  .sd-1-2-0-list:not(.sd-1-2-0-list--icon):is(ol) > li > ol,
-  .sd-1-2-0-list:not(.sd-1-2-0-list--icon) ol > li > ol,
-  .sd-1-2-0-prose > :is(ol, ul):is(ol),
-  .sd-1-2-0-prose > :is(ol, ul):is(ol) > li > ol,
-  .sd-1-2-0-prose > :is(ol, ul) ol > li > ol {
+.sd-1-3-1-list:not(.sd-1-3-1-list--icon):is(ol),
+  .sd-1-3-1-list:not(.sd-1-3-1-list--icon):is(ol) > li > ol,
+  .sd-1-3-1-list:not(.sd-1-3-1-list--icon) ol > li > ol,
+  .sd-1-3-1-prose > :is(ol, ul):is(ol),
+  .sd-1-3-1-prose > :is(ol, ul):is(ol) > li > ol,
+  .sd-1-3-1-prose > :is(ol, ul) ol > li > ol {
     counter-reset: item;
   }
 
 /* Ordered lists inside unordered lists. */
 
-.sd-1-2-0-list:not(.sd-1-2-0-list--icon):is(ul) > li > ol,
-  .sd-1-2-0-list:not(.sd-1-2-0-list--icon) ul > li > ol,
-  .sd-1-2-0-prose > :is(ol, ul):is(ul) > li > ol,
-  .sd-1-2-0-prose > :is(ol, ul) ul > li > ol {
+.sd-1-3-1-list:not(.sd-1-3-1-list--icon):is(ul) > li > ol,
+  .sd-1-3-1-list:not(.sd-1-3-1-list--icon) ul > li > ol,
+  .sd-1-3-1-prose > :is(ol, ul):is(ul) > li > ol,
+  .sd-1-3-1-prose > :is(ol, ul) ul > li > ol {
     counter-set: item 0;
   }
 
 /* Styling */
 
-.sd-1-2-0-list:not(.sd-1-2-0-list--icon) li, .sd-1-2-0-prose > :is(ol, ul) li {
+.sd-1-3-1-list:not(.sd-1-3-1-list--icon) li, .sd-1-3-1-prose > :is(ol, ul) li {
   display: table;
 }
 
-.sd-1-2-0-list:not(.sd-1-2-0-list--icon) li:before, .sd-1-2-0-prose > :is(ol, ul) li:before {
+.sd-1-3-1-list:not(.sd-1-3-1-list--icon) li:before, .sd-1-3-1-prose > :is(ol, ul) li:before {
   display: table-cell;
   padding-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
 }
 
-.sd-1-2-0-list:not(.sd-1-2-0-list--icon):is(ul),
-  .sd-1-2-0-list:not(.sd-1-2-0-list--icon) ul,
-  .sd-1-2-0-prose > :is(ol, ul):is(ul),
-  .sd-1-2-0-prose > :is(ol, ul) ul {
+.sd-1-3-1-list:not(.sd-1-3-1-list--icon):is(ul),
+  .sd-1-3-1-list:not(.sd-1-3-1-list--icon) ul,
+  .sd-1-3-1-prose > :is(ol, ul):is(ul),
+  .sd-1-3-1-prose > :is(ol, ul) ul {
     list-style-type: '';
   }
 
-.sd-1-2-0-list:not(.sd-1-2-0-list--icon):is(ul):not(.sd-1-2-0-list--icon) > li:before, .sd-1-2-0-list:not(.sd-1-2-0-list--icon) ul > li:before, .sd-1-2-0-prose > :is(ol, ul):is(ul):not(.sd-1-2-0-list--icon) > li:before, .sd-1-2-0-prose > :is(ol, ul) ul > li:before {
+.sd-1-3-1-list:not(.sd-1-3-1-list--icon):is(ul):not(.sd-1-3-1-list--icon) > li:before, .sd-1-3-1-list:not(.sd-1-3-1-list--icon) ul > li:before, .sd-1-3-1-prose > :is(ol, ul):is(ul):not(.sd-1-3-1-list--icon) > li:before, .sd-1-3-1-prose > :is(ol, ul) ul > li:before {
       content: '\2022';
     }
 
-.sd-1-2-0-list:not(.sd-1-2-0-list--icon):is(ul):not(.sd-1-2-0-list--icon) > li > ul > li:before, .sd-1-2-0-list:not(.sd-1-2-0-list--icon) ul > li > ul > li:before, .sd-1-2-0-prose > :is(ol, ul):is(ul):not(.sd-1-2-0-list--icon) > li > ul > li:before, .sd-1-2-0-prose > :is(ol, ul) ul > li > ul > li:before {
+.sd-1-3-1-list:not(.sd-1-3-1-list--icon):is(ul):not(.sd-1-3-1-list--icon) > li > ul > li:before, .sd-1-3-1-list:not(.sd-1-3-1-list--icon) ul > li > ul > li:before, .sd-1-3-1-prose > :is(ol, ul):is(ul):not(.sd-1-3-1-list--icon) > li > ul > li:before, .sd-1-3-1-prose > :is(ol, ul) ul > li > ul > li:before {
         content: '\002B1D';
       }
 
-.sd-1-2-0-list:not(.sd-1-2-0-list--icon):is(ul):not(.sd-1-2-0-list--icon) > li > ul > li > ul > li:before, .sd-1-2-0-list:not(.sd-1-2-0-list--icon) ul > li > ul > li > ul > li:before, .sd-1-2-0-prose > :is(ol, ul):is(ul):not(.sd-1-2-0-list--icon) > li > ul > li > ul > li:before, .sd-1-2-0-prose > :is(ol, ul) ul > li > ul > li > ul > li:before {
+.sd-1-3-1-list:not(.sd-1-3-1-list--icon):is(ul):not(.sd-1-3-1-list--icon) > li > ul > li > ul > li:before, .sd-1-3-1-list:not(.sd-1-3-1-list--icon) ul > li > ul > li > ul > li:before, .sd-1-3-1-prose > :is(ol, ul):is(ul):not(.sd-1-3-1-list--icon) > li > ul > li > ul > li:before, .sd-1-3-1-prose > :is(ol, ul) ul > li > ul > li > ul > li:before {
           content: '\2010';
         }
 
-.sd-1-2-0-list--icon {
+.sd-1-3-1-list--icon {
   padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
   padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
   text-align: left;
 }
 
-.sd-1-2-0-list--icon li sd-icon:first-of-type,
-    .sd-1-2-0-list--icon li .sd-1-2-0-list--icon__icon:first-of-type {
+.sd-1-3-1-list--icon li sd-icon:first-of-type,
+    .sd-1-3-1-list--icon li .sd-1-3-1-list--icon__icon:first-of-type {
   
   color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
-.sd-1-2-0-list--icon {
+.sd-1-3-1-list--icon {
   list-style-type: '';
 }
 
@@ -1144,19 +1495,19 @@ Used for inverted pressed interaction text link */;
     styles without affecting semantics is to set list-style-type to an empty string.
     https://www.matuzo.at/blog/2023/removing-list-styles-without-affecting-semantics */
 
-.sd-1-2-0-list--icon > li:first-of-type {
+.sd-1-3-1-list--icon > li:first-of-type {
   padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
 }
 
-.sd-1-2-0-list--icon li {
+.sd-1-3-1-list--icon li {
   position: relative;
   padding-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
   padding-left: var(--sd-spacing-10, 2.5rem) /* 40px */;
   line-height: 32px;
 }
 
-.sd-1-2-0-list--icon li > sd-icon:first-of-type,
-    .sd-1-2-0-list--icon li > .sd-1-2-0-list--icon__icon:first-of-type {
+.sd-1-3-1-list--icon li > sd-icon:first-of-type,
+    .sd-1-3-1-list--icon li > .sd-1-3-1-list--icon__icon:first-of-type {
   position: absolute;
   left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
   font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
@@ -1164,44 +1515,44 @@ Used for inverted pressed interaction text link */;
   color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
 }
 
-.sd-1-2-0-list--icon.sd-1-2-0-list--horizontal {
+.sd-1-3-1-list--icon.sd-1-3-1-list--horizontal {
   display: flex;
 }
 
-.sd-1-2-0-list--icon.sd-1-2-0-list--horizontal li {
+.sd-1-3-1-list--icon.sd-1-3-1-list--horizontal li {
   display: flex;
   padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
 }
 
-.sd-1-2-0-list--icon.sd-1-2-0-list--horizontal li:not(:last-child) {
+.sd-1-3-1-list--icon.sd-1-3-1-list--horizontal li:not(:last-child) {
   margin-right: var(--sd-spacing-8, 2rem) /* 32px */;
 }
 
-.sd-1-2-0-list--inverted,
-.sd-1-2-0-prose--inverted > :is(ol, ul) {
+.sd-1-3-1-list--inverted,
+.sd-1-3-1-prose--inverted > :is(ol, ul) {
   
   color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
-.sd-1-2-0-list--inverted li > sd-icon:first-of-type,
-  .sd-1-2-0-list--inverted li > .sd-1-2-0-list--icon__icon:first-of-type,
-  .sd-1-2-0-prose--inverted > :is(ol, ul) li > sd-icon:first-of-type,
-  .sd-1-2-0-prose--inverted > :is(ol, ul) li > .sd-1-2-0-list--icon__icon:first-of-type {
+.sd-1-3-1-list--inverted li > sd-icon:first-of-type,
+  .sd-1-3-1-list--inverted li > .sd-1-3-1-list--icon__icon:first-of-type,
+  .sd-1-3-1-prose--inverted > :is(ol, ul) li > sd-icon:first-of-type,
+  .sd-1-3-1-prose--inverted > :is(ol, ul) li > .sd-1-3-1-list--icon__icon:first-of-type {
   
   color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
 /**
  * A paragraph is used to display blocks of text. It uses the base font size and can contain bold and/or link styles.
- * @name sd-1-2-0-paragraph
+ * @name sd-1-3-1-paragraph
  * @status stable
  * @since 1.7
- * @variant { sm } sd-1-2-0-paragraph--size-... The paragraph's font size.
- * @boolean sd-1-2-0-paragraph--inverted Inverts the paragraph text.
+ * @variant { sm } sd-1-3-1-paragraph--size-... The paragraph's font size.
+ * @boolean sd-1-3-1-paragraph--inverted Inverts the paragraph text.
  */
 
-.sd-1-2-0-paragraph,
-.sd-1-2-0-prose p {
+.sd-1-3-1-paragraph,
+.sd-1-3-1-prose p {
   font-size: var(--sd-font-size-base, 1rem) /* 16px */;
   font-weight: 400;
   line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
@@ -1209,7 +1560,7 @@ Used for inverted pressed interaction text link */;
   color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
 }
 
-.sd-1-2-0-paragraph--size-sm, .sd-1-2-0-prose p--size-sm {
+.sd-1-3-1-paragraph--size-sm, .sd-1-3-1-prose p--size-sm {
   font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
   font-weight: 400;
   line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
@@ -1217,35 +1568,35 @@ Used for inverted pressed interaction text link */;
   color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
 }
 
-.sd-1-2-0-paragraph--inverted,
-.sd-1-2-0-prose--inverted p {
+.sd-1-3-1-paragraph--inverted,
+.sd-1-3-1-prose--inverted p {
   
   color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
 /**
  * Generates basic styles for media elements.
- * @name sd-1-2-0-media
+ * @name sd-1-3-1-media
  * @status stable
  * @since 2.5.0
- * @boolean sd-1-2-0-media--inverted Inverts the figcaption text.
+ * @boolean sd-1-3-1-media--inverted Inverts the figcaption text.
  */
 
-.sd-1-2-0-prose figure,
-figure.sd-1-2-0-media {
+.sd-1-3-1-prose figure,
+figure.sd-1-3-1-media {
   margin: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
 }
 
-.sd-1-2-0-prose figure figcaption, figure.sd-1-2-0-media figcaption {
+.sd-1-3-1-prose figure figcaption, figure.sd-1-3-1-media figcaption {
   
   color: rgb(var(--sd-color-neutral-700, 104 104 104) / var(--tw-text-opacity, 1)) /* Additional text color */;
 }
 
-.sd-1-2-0-prose figure figcaption:last-child, figure.sd-1-2-0-media figcaption:last-child {
+.sd-1-3-1-prose figure figcaption:last-child, figure.sd-1-3-1-media figcaption:last-child {
   margin-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
 }
 
-.sd-1-2-0-prose--inverted figure figcaption, figure.sd-1-2-0-media--inverted figcaption {
+.sd-1-3-1-prose--inverted figure figcaption, figure.sd-1-3-1-media--inverted figcaption {
   
   color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
 Used for inverted pressed interaction text link */;
@@ -1253,18 +1604,18 @@ Used for inverted pressed interaction text link */;
 
 /**
  * A table cell is a single cell inside a table, used to display discrete data elements.
- * @name sd-1-2-0-table-cell
+ * @name sd-1-3-1-table-cell
  * @status stable
  * @since 1.13
- * @boolean sd-1-2-0-table-cell--divider Displays a divider to the right.
- * @variant { white | primary-100 | neutral-100 } sd-1-2-0-table-cell--bg-... Applies the selected background-color to the table cell. If not selected, a transparent background-color is used per default.
- * @boolean sd-1-2-0-table-cell--shadow-active Displays the table shadow.
- * @variant { top | left | right | bottom } sd-1-2-0-table-cell--shadow-... Applies the selected shadow to the table cell.
+ * @boolean sd-1-3-1-table-cell--divider Displays a divider to the right.
+ * @variant { white | primary-100 | neutral-100 } sd-1-3-1-table-cell--bg-... Applies the selected background-color to the table cell. If not selected, a transparent background-color is used per default.
+ * @boolean sd-1-3-1-table-cell--shadow-active Displays the table shadow.
+ * @variant { top | left | right | bottom } sd-1-3-1-table-cell--shadow-... Applies the selected shadow to the table cell.
  */
 
-.sd-1-2-0-prose td,
-.sd-1-2-0-prose th,
-.sd-1-2-0-table-cell {
+.sd-1-3-1-prose td,
+.sd-1-3-1-prose th,
+.sd-1-3-1-table-cell {
   border-top-width: 1px;
   border-bottom-width: 1px;
   border-left-width: 0px;
@@ -1281,11 +1632,11 @@ Used for divider, teaser, container, ...  */;
   color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
 }
 
-.sd-1-2-0-table-cell--divider {
+.sd-1-3-1-table-cell--divider {
   border-right-width: 1px;
 }
 
-.sd-1-2-0-table-cell--shadow-top:after, .sd-1-2-0-table-cell--shadow-bottom:after, .sd-1-2-0-table-cell--shadow-left:after, .sd-1-2-0-table-cell--shadow-right:after {
+.sd-1-3-1-table-cell--shadow-top:after, .sd-1-3-1-table-cell--shadow-bottom:after, .sd-1-3-1-table-cell--shadow-left:after, .sd-1-3-1-table-cell--shadow-right:after {
   pointer-events: none;
   position: absolute;
   --tw-gradient-from: rgb(0 0 0 / var(--sd-opacity-10, 0.1)) var(--tw-gradient-from-position);
@@ -1300,7 +1651,7 @@ Used for divider, teaser, container, ...  */;
   content: var(--tw-content);
 }
 
-.sd-1-2-0-table-cell--shadow-top:after, .sd-1-2-0-table-cell--shadow-bottom:after {
+.sd-1-3-1-table-cell--shadow-top:after, .sd-1-3-1-table-cell--shadow-bottom:after {
   left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
   right: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
   height: var(--sd-spacing-2-5, 0.625rem) /* 10px */;
@@ -1308,7 +1659,7 @@ Used for divider, teaser, container, ...  */;
 
 /* fix that shows line on top of table-cell */
 
-.sd-1-2-0-table-cell--shadow-top:before, .sd-1-2-0-table-cell--shadow-bottom:before {
+.sd-1-3-1-table-cell--shadow-top:before, .sd-1-3-1-table-cell--shadow-bottom:before {
   position: absolute;
   left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
   display: block;
@@ -1322,66 +1673,66 @@ Used for divider, teaser, container, ...  */;
   content: var(--tw-content);
 }
 
-.sd-1-2-0-table-cell--shadow-left:after, .sd-1-2-0-table-cell--shadow-right:after {
+.sd-1-3-1-table-cell--shadow-left:after, .sd-1-3-1-table-cell--shadow-right:after {
   top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
   bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
   width: var(--sd-spacing-2-5, 0.625rem) /* 10px */;
 }
 
-.sd-1-2-0-table-cell.sd-1-2-0-table-cell--shadow-active:after {
+.sd-1-3-1-table-cell.sd-1-3-1-table-cell--shadow-active:after {
   opacity: 100%;
 }
 
-.sd-1-2-0-table-cell--shadow-top:after {
+.sd-1-3-1-table-cell--shadow-top:after {
   top: -10px;
   background-image: linear-gradient(to top, var(--tw-gradient-stops));
 }
 
 /* fix that shows line on top of table-cell */
 
-.sd-1-2-0-table-cell--shadow-top:before {
+.sd-1-3-1-table-cell--shadow-top:before {
   bottom: -1px;
 }
 
-.sd-1-2-0-table-cell--shadow-bottom:after {
+.sd-1-3-1-table-cell--shadow-bottom:after {
   bottom: -10px;
   background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
 }
 
 /* fix that shows line on top of table-cell */
 
-.sd-1-2-0-table-cell--shadow-bottom:before {
+.sd-1-3-1-table-cell--shadow-bottom:before {
   top: -1px;
 }
 
-.sd-1-2-0-table-cell--shadow-left:after {
+.sd-1-3-1-table-cell--shadow-left:after {
   left: -10px;
   background-image: linear-gradient(to left, var(--tw-gradient-stops));
 }
 
-.sd-1-2-0-table-cell--shadow-right:after {
+.sd-1-3-1-table-cell--shadow-right:after {
   right: -10px;
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
 
-.sd-1-2-0-table-cell--bg-white {
+.sd-1-3-1-table-cell--bg-white {
   
   background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode) 
Used for inverted button */;
 }
 
-.sd-1-2-0-table-cell--bg-primary-100 {
+.sd-1-3-1-table-cell--bg-primary-100 {
   
   background-color: rgb(var(--sd-color-primary-100, 236 240 249) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */;
 }
 
-.sd-1-2-0-table-cell--bg-neutral-100 {
+.sd-1-3-1-table-cell--bg-neutral-100 {
   
   background-color: rgb(var(--sd-color-neutral-100, 246 246 246) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */;
 }
 
 /**
  * A table is organized structured content, used for scanning, comparing, and analyzing the data.
- * @name sd-1-2-0-table
+ * @name sd-1-3-1-table
  * @status stable
  * @since 1.13
  */
@@ -1390,8 +1741,8 @@ Used for divider, teaser, container, ...  */;
 * Remove inherited styles from table before applying our styles.
 */
 
-.sd-1-2-0-table,
-.sd-1-2-0-prose table {
+.sd-1-3-1-table,
+.sd-1-3-1-prose table {
   all: unset;
   display: table;
   border-collapse: collapse;
@@ -1400,13 +1751,13 @@ Used for divider, teaser, container, ...  */;
   border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
 }
 
-.sd-1-2-0-table thead tr:first-of-type, .sd-1-2-0-table tfoot tr:first-of-type, .sd-1-2-0-prose table thead tr:first-of-type, .sd-1-2-0-prose table tfoot tr:first-of-type {
+.sd-1-3-1-table thead tr:first-of-type, .sd-1-3-1-table tfoot tr:first-of-type, .sd-1-3-1-prose table thead tr:first-of-type, .sd-1-3-1-prose table tfoot tr:first-of-type {
   position: relative;
 }
 
 /* plop:style */
 
-.sd-1-2-0-prose {
+.sd-1-3-1-prose {
   /* Optimize for reading. */
   max-width: 80ch;
   text-align: left;
@@ -1414,67 +1765,67 @@ Used for divider, teaser, container, ...  */;
 
 /* Add default spacings */
 
-.sd-1-2-0-prose > *:not(:first-child) {
+.sd-1-3-1-prose > *:not(:first-child) {
   margin-top: var(--sd-spacing-4, 1rem) /* 16px */;
 }
 
 /* First element has no margin-top */
 
-.sd-1-2-0-prose > *:first-child {
+.sd-1-3-1-prose > *:first-child {
   margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
 }
 
 /* headings after a heading have a smaller margin-top */
 
-.sd-1-2-0-prose > :is(h1, h2, h3, h4, h5):not(#_) + :is(h1, h2, h3, h4, h5) {
+.sd-1-3-1-prose > :is(h1, h2, h3, h4, h5):not(#_) + :is(h1, h2, h3, h4, h5) {
     /* :not(#_) is a hack to raise specifity, see https://stackoverflow.com/a/61781795 */
     margin-top: var(--sd-spacing-2, 0.5rem) /* 8px */;
   }
 
 /* Headlines after other non-headlines have a larger margin-top */
 
-.sd-1-2-0-prose > *:not(:is(h1, h2, h3, h4, h5)) + :is(h1, h2, h3, h4, h5):not(#_) {
+.sd-1-3-1-prose > *:not(:is(h1, h2, h3, h4, h5)) + :is(h1, h2, h3, h4, h5):not(#_) {
   margin-top: var(--sd-spacing-8, 2rem) /* 32px */;
 }
 
 /* Images and figures lead to a bigger margin-top for the next element */
 
-.sd-1-2-0-prose > figure + *:not(#_),
-  .sd-1-2-0-prose > img + *:not(#_) {
+.sd-1-3-1-prose > figure + *:not(#_),
+  .sd-1-3-1-prose > img + *:not(#_) {
   margin-top: var(--sd-spacing-6, 1.5rem) /* 24px */;
 }
 
 /* Add styles for elements that are not based on existing CSS styles */
 
-.sd-1-2-0-prose hr {
+.sd-1-3-1-prose hr {
   height: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
   border-top-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-border-opacity, 1)) /* Used for disabled state */;
 }
 
-.sd-1-2-0-prose pre {
+.sd-1-3-1-prose pre {
   overflow: auto;
 }
 
-.sd-1-2-0-prose blockquote,
-    .sd-1-2-0-prose blockquote > * {
+.sd-1-3-1-prose blockquote,
+    .sd-1-3-1-prose blockquote > * {
   font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
 }
 
-.sd-1-2-0-prose blockquote:has(*) *:first-child::before, .sd-1-2-0-prose blockquote:not(:has(*))::before {
+.sd-1-3-1-prose blockquote:has(*) *:first-child::before, .sd-1-3-1-prose blockquote:not(:has(*))::before {
         content: open-quote;
         display: inline;
       }
 
-.sd-1-2-0-prose blockquote:has(*) *:first-child::after, .sd-1-2-0-prose blockquote:not(:has(*))::after {
+.sd-1-3-1-prose blockquote:has(*) *:first-child::after, .sd-1-3-1-prose blockquote:not(:has(*))::after {
         content: close-quote;
         display: inline;
       }
 
 /* Fixes for other elements */
 
-.sd-1-2-0-prose > :is(ul, ol):not(#_) {
+.sd-1-3-1-prose > :is(ul, ol):not(#_) {
     /* ul and ol have padding that has to be reset */
     padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
     padding-bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
@@ -1482,18 +1833,18 @@ Used for divider, teaser, container, ...  */;
 
 /* Inverted styles */
 
-.sd-1-2-0-prose--inverted hr {
+.sd-1-3-1-prose--inverted hr {
   --tw-border-opacity: 1;
   border-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-border-opacity, 1)) /* Used for buttons, inverted focus state */;
 }
 
-.sd-1-2-0-prose--inverted pre {
+.sd-1-3-1-prose--inverted pre {
   
   color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
 /* Full width styles */
 
-.sd-1-2-0-prose--full-width {
+.sd-1-3-1-prose--full-width {
     max-width: unset;
   }