@solid-design-system/styles 1.5.4 → 1.5.6

package/dist-versioned/modules/interactive.css

@@ -1,20 +1,20 @@
 /**
  * Generates basic styles for interactive elements.
- * @name sd-1-5-4-interactive
+ * @name sd-1-5-6-interactive
  * @status stable
  * @since 1.11
- * @boolean sd-1-5-4-interactive--disabled Makes an element look disabled.
- * @boolean sd-1-5-4-interactive--inverted Inverts the colors of an element.
- * @boolean sd-1-5-4-interactive--reset Resets the default browser styles of e.g., a button.
+ * @boolean sd-1-5-6-interactive--disabled Makes an element look disabled.
+ * @boolean sd-1-5-6-interactive--inverted Inverts the colors of an element.
+ * @boolean sd-1-5-6-interactive--reset Resets the default browser styles of e.g., a button.
  */
 
-.sd-1-5-4-prose a--reset, .sd-1-5-4-interactive--reset {
+.sd-1-5-6-prose a--reset, .sd-1-5-6-interactive--reset {
     all: unset;
     outline: revert;
   }
 
-.sd-1-5-4-prose a,
-.sd-1-5-4-interactive {
+.sd-1-5-6-prose a,
+.sd-1-5-6-interactive {
     cursor: pointer;
     
     color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
@@ -28,95 +28,95 @@ Smooth transitions eg. for buttons or dropdowns */;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.sd-1-5-4-prose a:hover:not([disabled]),
-.sd-1-5-4-interactive:hover:not([disabled]) {
+.sd-1-5-6-prose a:hover:not([disabled]),
+.sd-1-5-6-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-5-4-prose a:active:not([disabled]),
-.sd-1-5-4-interactive:active:not([disabled]) {
+.sd-1-5-6-prose a:active:not([disabled]),
+.sd-1-5-6-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-5-4-prose a:is(.sd-1-5-4-interactive), .sd-1-5-4-interactive:is(.sd-1-5-4-interactive) {
+.sd-1-5-6-prose a:is(.sd-1-5-6-interactive), .sd-1-5-6-interactive:is(.sd-1-5-6-interactive) {
     text-decoration-line: none;
 }
 
-.sd-1-5-4-prose a:focus-visible, .sd-1-5-4-interactive:focus-visible {
+.sd-1-5-6-prose a:focus-visible, .sd-1-5-6-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-5-4-prose a--disabled,
-  .sd-1-5-4-prose a[disabled],
-  .sd-1-5-4-prose a[href=''],
-  .sd-1-5-4-interactive--disabled,
-  .sd-1-5-4-interactive[disabled],
-  .sd-1-5-4-interactive[href=''] {
+.sd-1-5-6-prose a--disabled,
+  .sd-1-5-6-prose a[disabled],
+  .sd-1-5-6-prose a[href=''],
+  .sd-1-5-6-interactive--disabled,
+  .sd-1-5-6-interactive[disabled],
+  .sd-1-5-6-interactive[href=''] {
     cursor: not-allowed;
     
     color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
 }
 
-.sd-1-5-4-prose a--disabled:hover:not([disabled]),
-  .sd-1-5-4-prose a[disabled]:hover:not([disabled]),
-  .sd-1-5-4-prose a[href='']:hover:not([disabled]),
-  .sd-1-5-4-interactive--disabled:hover:not([disabled]),
-  .sd-1-5-4-interactive[disabled]:hover:not([disabled]),
-  .sd-1-5-4-interactive[href='']:hover:not([disabled]) {
+.sd-1-5-6-prose a--disabled:hover:not([disabled]),
+  .sd-1-5-6-prose a[disabled]:hover:not([disabled]),
+  .sd-1-5-6-prose a[href='']:hover:not([disabled]),
+  .sd-1-5-6-interactive--disabled:hover:not([disabled]),
+  .sd-1-5-6-interactive[disabled]:hover:not([disabled]),
+  .sd-1-5-6-interactive[href='']:hover:not([disabled]) {
     
     color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
 }
 
-.sd-1-5-4-prose a--disabled:active:not([disabled]),
-  .sd-1-5-4-prose a[disabled]:active:not([disabled]),
-  .sd-1-5-4-prose a[href='']:active:not([disabled]),
-  .sd-1-5-4-interactive--disabled:active:not([disabled]),
-  .sd-1-5-4-interactive[disabled]:active:not([disabled]),
-  .sd-1-5-4-interactive[href='']:active:not([disabled]) {
+.sd-1-5-6-prose a--disabled:active:not([disabled]),
+  .sd-1-5-6-prose a[disabled]:active:not([disabled]),
+  .sd-1-5-6-prose a[href='']:active:not([disabled]),
+  .sd-1-5-6-interactive--disabled:active:not([disabled]),
+  .sd-1-5-6-interactive[disabled]:active:not([disabled]),
+  .sd-1-5-6-interactive[href='']:active:not([disabled]) {
     
     color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
 }
 
-.sd-1-5-4-prose a--disabled.sd-1-5-4-interactive--inverted, .sd-1-5-4-prose a[disabled].sd-1-5-4-interactive--inverted, .sd-1-5-4-prose a[href=''].sd-1-5-4-interactive--inverted, .sd-1-5-4-interactive--disabled.sd-1-5-4-interactive--inverted, .sd-1-5-4-interactive[disabled].sd-1-5-4-interactive--inverted, .sd-1-5-4-interactive[href=''].sd-1-5-4-interactive--inverted {
+.sd-1-5-6-prose a--disabled.sd-1-5-6-interactive--inverted, .sd-1-5-6-prose a[disabled].sd-1-5-6-interactive--inverted, .sd-1-5-6-prose a[href=''].sd-1-5-6-interactive--inverted, .sd-1-5-6-interactive--disabled.sd-1-5-6-interactive--inverted, .sd-1-5-6-interactive[disabled].sd-1-5-6-interactive--inverted, .sd-1-5-6-interactive[href=''].sd-1-5-6-interactive--inverted {
     
     color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
 }
 
-.sd-1-5-4-prose a--disabled.sd-1-5-4-interactive--inverted:hover:not([disabled]), .sd-1-5-4-prose a[disabled].sd-1-5-4-interactive--inverted:hover:not([disabled]), .sd-1-5-4-prose a[href=''].sd-1-5-4-interactive--inverted:hover:not([disabled]), .sd-1-5-4-interactive--disabled.sd-1-5-4-interactive--inverted:hover:not([disabled]), .sd-1-5-4-interactive[disabled].sd-1-5-4-interactive--inverted:hover:not([disabled]), .sd-1-5-4-interactive[href=''].sd-1-5-4-interactive--inverted:hover:not([disabled]) {
+.sd-1-5-6-prose a--disabled.sd-1-5-6-interactive--inverted:hover:not([disabled]), .sd-1-5-6-prose a[disabled].sd-1-5-6-interactive--inverted:hover:not([disabled]), .sd-1-5-6-prose a[href=''].sd-1-5-6-interactive--inverted:hover:not([disabled]), .sd-1-5-6-interactive--disabled.sd-1-5-6-interactive--inverted:hover:not([disabled]), .sd-1-5-6-interactive[disabled].sd-1-5-6-interactive--inverted:hover:not([disabled]), .sd-1-5-6-interactive[href=''].sd-1-5-6-interactive--inverted: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-5-4-prose a--disabled.sd-1-5-4-interactive--inverted:active:not([disabled]), .sd-1-5-4-prose a[disabled].sd-1-5-4-interactive--inverted:active:not([disabled]), .sd-1-5-4-prose a[href=''].sd-1-5-4-interactive--inverted:active:not([disabled]), .sd-1-5-4-interactive--disabled.sd-1-5-4-interactive--inverted:active:not([disabled]), .sd-1-5-4-interactive[disabled].sd-1-5-4-interactive--inverted:active:not([disabled]), .sd-1-5-4-interactive[href=''].sd-1-5-4-interactive--inverted:active:not([disabled]) {
+.sd-1-5-6-prose a--disabled.sd-1-5-6-interactive--inverted:active:not([disabled]), .sd-1-5-6-prose a[disabled].sd-1-5-6-interactive--inverted:active:not([disabled]), .sd-1-5-6-prose a[href=''].sd-1-5-6-interactive--inverted:active:not([disabled]), .sd-1-5-6-interactive--disabled.sd-1-5-6-interactive--inverted:active:not([disabled]), .sd-1-5-6-interactive[disabled].sd-1-5-6-interactive--inverted:active:not([disabled]), .sd-1-5-6-interactive[href=''].sd-1-5-6-interactive--inverted: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-5-4-prose--inverted a,
-.sd-1-5-4-interactive--inverted {
+.sd-1-5-6-prose--inverted a,
+.sd-1-5-6-interactive--inverted {
     
     color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
-.sd-1-5-4-prose--inverted a:hover:not([disabled]),
-.sd-1-5-4-interactive--inverted:hover:not([disabled]) {
+.sd-1-5-6-prose--inverted a:hover:not([disabled]),
+.sd-1-5-6-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-5-4-prose--inverted a:active:not([disabled]),
-.sd-1-5-4-interactive--inverted:active:not([disabled]) {
+.sd-1-5-6-prose--inverted a:active:not([disabled]),
+.sd-1-5-6-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-5-4-prose--inverted a:focus-visible, .sd-1-5-4-interactive--inverted:focus-visible {
+.sd-1-5-6-prose--inverted a:focus-visible, .sd-1-5-6-interactive--inverted:focus-visible {
     outline-style: solid;
     outline-width: 2px;
     outline-offset: 2px;

package/dist-versioned/modules/leadtext.css

@@ -1,14 +1,14 @@
 /**
  * Leadtext is used for text that should be highlighted and a focal point of the page.
- * @name sd-1-5-4-leadtext
+ * @name sd-1-5-6-leadtext
  * @status stable
  * @since 1.7
- * @variant { lg } sd-1-5-4-leadtext--size-... The leadtext's size.
- * @boolean sd-1-5-4-leadtext--inverted Inverts the leadtext text.
+ * @variant { lg } sd-1-5-6-leadtext--size-... The leadtext's size.
+ * @boolean sd-1-5-6-leadtext--inverted Inverts the leadtext text.
  */
 
-.sd-1-5-4-prose > .sd-1-5-4-leadtext,
-.sd-1-5-4-leadtext {
+.sd-1-5-6-prose > .sd-1-5-6-leadtext,
+.sd-1-5-6-leadtext {
 
     font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
 
@@ -21,7 +21,7 @@
     color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
 }
 
-.sd-1-5-4-prose > .sd-1-5-4-leadtext--size-lg, .sd-1-5-4-leadtext--size-lg {
+.sd-1-5-6-prose > .sd-1-5-6-leadtext--size-lg, .sd-1-5-6-leadtext--size-lg {
 
     font-size: var(--sd-font-size-lg, 1.25rem) /* 20px */;
 
@@ -34,8 +34,8 @@
     color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
 }
 
-.sd-1-5-4-prose--inverted > .sd-1-5-4-leadtext,
-.sd-1-5-4-leadtext--inverted {
+.sd-1-5-6-prose--inverted > .sd-1-5-6-leadtext,
+.sd-1-5-6-leadtext--inverted {
 
     
 

package/dist-versioned/modules/list.css

@@ -1,13 +1,13 @@
 /**
  * Generates basic styles for list elements.
- * @name sd-1-5-4-list
+ * @name sd-1-5-6-list
  * @status stable
  * @since 1.39.0
- * @boolean sd-1-5-4-list--inverted Inverts the list text.
+ * @boolean sd-1-5-6-list--inverted Inverts the list text.
  */
 
-.sd-1-5-4-list:not(.sd-1-5-4-list--icon),
-.sd-1-5-4-prose > :is(ol, ul) {
+.sd-1-5-6-list:not(.sd-1-5-6-list--icon),
+.sd-1-5-6-prose > :is(ol, ul) {
   list-style-position: revert;
   list-style-type: revert;
   padding: revert;
@@ -21,14 +21,14 @@
    */
 }
 
-.sd-1-5-4-list:not(.sd-1-5-4-list--icon) li:not(:first-child), .sd-1-5-4-prose > :is(ol, ul) li:not(:first-child) {
+.sd-1-5-6-list:not(.sd-1-5-6-list--icon) li:not(:first-child), .sd-1-5-6-prose > :is(ol, ul) li:not(:first-child) {
   margin-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
 }
 
-.sd-1-5-4-list:not(.sd-1-5-4-list--icon) ul,
-  .sd-1-5-4-list:not(.sd-1-5-4-list--icon) ol,
-  .sd-1-5-4-prose > :is(ol, ul) ul,
-  .sd-1-5-4-prose > :is(ol, ul) ol {
+.sd-1-5-6-list:not(.sd-1-5-6-list--icon) ul,
+  .sd-1-5-6-list:not(.sd-1-5-6-list--icon) ol,
+  .sd-1-5-6-prose > :is(ol, ul) ul,
+  .sd-1-5-6-prose > :is(ol, ul) ol {
     all: revert;
     padding-left: 1.4em;
     padding-top: 0.75em;
@@ -36,8 +36,8 @@
 
 @supports not (-webkit-hyphens: none) {
 
-.sd-1-5-4-list:not(.sd-1-5-4-list--icon),
-.sd-1-5-4-prose > :is(ol, ul) {
+.sd-1-5-6-list:not(.sd-1-5-6-list--icon),
+.sd-1-5-6-prose > :is(ol, ul) {
     /* Safari automatically adds some spacing. This adds it for other browsers. */
 
     /*
@@ -51,74 +51,73 @@
    */
     /* Level 1 */
 }
-    .sd-1-5-4-list:not(.sd-1-5-4-list--icon) li, .sd-1-5-4-prose > :is(ol, ul) li {
+    .sd-1-5-6-list:not(.sd-1-5-6-list--icon) li, .sd-1-5-6-prose > :is(ol, ul) li {
     padding-left: 0.3em;
   }
-    .sd-1-5-4-list:not(.sd-1-5-4-list--icon):is(ol):not(.sd-1-5-4-list--icon), .sd-1-5-4-prose > :is(ol, ul):is(ol):not(.sd-1-5-4-list--icon) {
+    .sd-1-5-6-list:not(.sd-1-5-6-list--icon):is(ol):not(.sd-1-5-6-list--icon), .sd-1-5-6-prose > :is(ol, ul):is(ol):not(.sd-1-5-6-list--icon) {
       counter-reset: item;
     }
-      .sd-1-5-4-list:not(.sd-1-5-4-list--icon):is(ol):not(.sd-1-5-4-list--icon) > li, .sd-1-5-4-prose > :is(ol, ul):is(ol):not(.sd-1-5-4-list--icon) > li {
+      .sd-1-5-6-list:not(.sd-1-5-6-list--icon):is(ol):not(.sd-1-5-6-list--icon) > li, .sd-1-5-6-prose > :is(ol, ul):is(ol):not(.sd-1-5-6-list--icon) > li {
         counter-increment: item;
       }
-        .sd-1-5-4-list:not(.sd-1-5-4-list--icon):is(ol):not(.sd-1-5-4-list--icon) > li::marker, .sd-1-5-4-prose > :is(ol, ul):is(ol):not(.sd-1-5-4-list--icon) > li::marker {
-          content: counters(item, '.', decimal) '. ';
+        .sd-1-5-6-list:not(.sd-1-5-6-list--icon):is(ol):not(.sd-1-5-6-list--icon) > li::marker, .sd-1-5-6-prose > :is(ol, ul):is(ol):not(.sd-1-5-6-list--icon) > li::marker {
+          content: counter(item, decimal) '. ';
         }
         /* Level 2 */
-        .sd-1-5-4-list:not(.sd-1-5-4-list--icon):is(ol):not(.sd-1-5-4-list--icon) > li > ol, .sd-1-5-4-prose > :is(ol, ul):is(ol):not(.sd-1-5-4-list--icon) > li > ol {
+        .sd-1-5-6-list:not(.sd-1-5-6-list--icon):is(ol):not(.sd-1-5-6-list--icon) > li > ol, .sd-1-5-6-prose > :is(ol, ul):is(ol):not(.sd-1-5-6-list--icon) > li > ol {
     padding-left: 1.9em;
           counter-reset: subitem;
   }
-          .sd-1-5-4-list:not(.sd-1-5-4-list--icon):is(ol):not(.sd-1-5-4-list--icon) > li > ol > li, .sd-1-5-4-prose > :is(ol, ul):is(ol):not(.sd-1-5-4-list--icon) > li > ol > li {
+          .sd-1-5-6-list:not(.sd-1-5-6-list--icon):is(ol):not(.sd-1-5-6-list--icon) > li > ol > li, .sd-1-5-6-prose > :is(ol, ul):is(ol):not(.sd-1-5-6-list--icon) > li > ol > li {
             counter-increment: subitem;
           }
-            .sd-1-5-4-list:not(.sd-1-5-4-list--icon):is(ol):not(.sd-1-5-4-list--icon) > li > ol > li::marker, .sd-1-5-4-prose > :is(ol, ul):is(ol):not(.sd-1-5-4-list--icon) > li > ol > li::marker {
-              content: counters(item, '.', decimal) '.' counters(subitem, '.', decimal) '. ';
+            .sd-1-5-6-list:not(.sd-1-5-6-list--icon):is(ol):not(.sd-1-5-6-list--icon) > li > ol > li::marker, .sd-1-5-6-prose > :is(ol, ul):is(ol):not(.sd-1-5-6-list--icon) > li > ol > li::marker {
+              content: counter(item, decimal) '.' counter(subitem, decimal) '. ';
             }
             /* Level 3 */
-            .sd-1-5-4-list:not(.sd-1-5-4-list--icon):is(ol):not(.sd-1-5-4-list--icon) > li > ol > li > ol, .sd-1-5-4-prose > :is(ol, ul):is(ol):not(.sd-1-5-4-list--icon) > li > ol > li > ol {
+            .sd-1-5-6-list:not(.sd-1-5-6-list--icon):is(ol):not(.sd-1-5-6-list--icon) > li > ol > li > ol, .sd-1-5-6-prose > :is(ol, ul):is(ol):not(.sd-1-5-6-list--icon) > li > ol > li > ol {
     padding-left: 2.7em;
               counter-reset: subsubitem;
   }
-              .sd-1-5-4-list:not(.sd-1-5-4-list--icon):is(ol):not(.sd-1-5-4-list--icon) > li > ol > li > ol > li, .sd-1-5-4-prose > :is(ol, ul):is(ol):not(.sd-1-5-4-list--icon) > li > ol > li > ol > li {
+              .sd-1-5-6-list:not(.sd-1-5-6-list--icon):is(ol):not(.sd-1-5-6-list--icon) > li > ol > li > ol > li, .sd-1-5-6-prose > :is(ol, ul):is(ol):not(.sd-1-5-6-list--icon) > li > ol > li > ol > li {
                 counter-increment: subsubitem;
               }
-                .sd-1-5-4-list:not(.sd-1-5-4-list--icon):is(ol):not(.sd-1-5-4-list--icon) > li > ol > li > ol > li::marker, .sd-1-5-4-prose > :is(ol, ul):is(ol):not(.sd-1-5-4-list--icon) > li > ol > li > ol > li::marker {
-                  content: counters(item, '.', decimal) '.' counters(subitem, '.', decimal) '.'
-                    counters(subsubitem, '.', decimal) '. ';
+                .sd-1-5-6-list:not(.sd-1-5-6-list--icon):is(ol):not(.sd-1-5-6-list--icon) > li > ol > li > ol > li::marker, .sd-1-5-6-prose > :is(ol, ul):is(ol):not(.sd-1-5-6-list--icon) > li > ol > li > ol > li::marker {
+                  content: counter(item, decimal) '.' counter(subitem, decimal) '.' counter(subsubitem, decimal) '. ';
                 }
   }
 
 /* Level 1 */
 
-.sd-1-5-4-list:not(.sd-1-5-4-list--icon):is(ul):not(.sd-1-5-4-list--icon),
-  .sd-1-5-4-list:not(.sd-1-5-4-list--icon) ul,
-  .sd-1-5-4-prose > :is(ol, ul):is(ul):not(.sd-1-5-4-list--icon),
-  .sd-1-5-4-prose > :is(ol, ul) ul {
+.sd-1-5-6-list:not(.sd-1-5-6-list--icon):is(ul):not(.sd-1-5-6-list--icon),
+  .sd-1-5-6-list:not(.sd-1-5-6-list--icon) ul,
+  .sd-1-5-6-prose > :is(ol, ul):is(ul):not(.sd-1-5-6-list--icon),
+  .sd-1-5-6-prose > :is(ol, ul) ul {
   padding-left: 0.5em;
 }
 
-.sd-1-5-4-list:not(.sd-1-5-4-list--icon):is(ul):not(.sd-1-5-4-list--icon) > li, .sd-1-5-4-list:not(.sd-1-5-4-list--icon) ul > li, .sd-1-5-4-prose > :is(ol, ul):is(ul):not(.sd-1-5-4-list--icon) > li, .sd-1-5-4-prose > :is(ol, ul) ul > li {
+.sd-1-5-6-list:not(.sd-1-5-6-list--icon):is(ul):not(.sd-1-5-6-list--icon) > li, .sd-1-5-6-list:not(.sd-1-5-6-list--icon) ul > li, .sd-1-5-6-prose > :is(ol, ul):is(ul):not(.sd-1-5-6-list--icon) > li, .sd-1-5-6-prose > :is(ol, ul) ul > li {
   padding-left: 0.75em;
       list-style-type: '\2022'; /* • */
 }
 
 /* Level 2 */
 
-.sd-1-5-4-list:not(.sd-1-5-4-list--icon):is(ul):not(.sd-1-5-4-list--icon) > li > ul, .sd-1-5-4-list:not(.sd-1-5-4-list--icon) ul > li > ul, .sd-1-5-4-prose > :is(ol, ul):is(ul):not(.sd-1-5-4-list--icon) > li > ul, .sd-1-5-4-prose > :is(ol, ul) ul > li > ul {
+.sd-1-5-6-list:not(.sd-1-5-6-list--icon):is(ul):not(.sd-1-5-6-list--icon) > li > ul, .sd-1-5-6-list:not(.sd-1-5-6-list--icon) ul > li > ul, .sd-1-5-6-prose > :is(ol, ul):is(ul):not(.sd-1-5-6-list--icon) > li > ul, .sd-1-5-6-prose > :is(ol, ul) ul > li > ul {
   padding-left: 0.3em;
 }
 
-.sd-1-5-4-list:not(.sd-1-5-4-list--icon):is(ul):not(.sd-1-5-4-list--icon) > li > ul > li, .sd-1-5-4-list:not(.sd-1-5-4-list--icon) ul > li > ul > li, .sd-1-5-4-prose > :is(ol, ul):is(ul):not(.sd-1-5-4-list--icon) > li > ul > li, .sd-1-5-4-prose > :is(ol, ul) ul > li > ul > li {
+.sd-1-5-6-list:not(.sd-1-5-6-list--icon):is(ul):not(.sd-1-5-6-list--icon) > li > ul > li, .sd-1-5-6-list:not(.sd-1-5-6-list--icon) ul > li > ul > li, .sd-1-5-6-prose > :is(ol, ul):is(ul):not(.sd-1-5-6-list--icon) > li > ul > li, .sd-1-5-6-prose > :is(ol, ul) ul > li > ul > li {
           list-style-type: '\002B1D'; /* · */
         }
 
 /* Level 3 */
 
-.sd-1-5-4-list:not(.sd-1-5-4-list--icon):is(ul):not(.sd-1-5-4-list--icon) > li > ul > li > ul, .sd-1-5-4-list:not(.sd-1-5-4-list--icon) ul > li > ul > li > ul, .sd-1-5-4-prose > :is(ol, ul):is(ul):not(.sd-1-5-4-list--icon) > li > ul > li > ul, .sd-1-5-4-prose > :is(ol, ul) ul > li > ul > li > ul {
+.sd-1-5-6-list:not(.sd-1-5-6-list--icon):is(ul):not(.sd-1-5-6-list--icon) > li > ul > li > ul, .sd-1-5-6-list:not(.sd-1-5-6-list--icon) ul > li > ul > li > ul, .sd-1-5-6-prose > :is(ol, ul):is(ul):not(.sd-1-5-6-list--icon) > li > ul > li > ul, .sd-1-5-6-prose > :is(ol, ul) ul > li > ul > li > ul {
   padding-left: 0.4em;
 }
 
-.sd-1-5-4-list:not(.sd-1-5-4-list--icon):is(ul):not(.sd-1-5-4-list--icon) > li > ul > li > ul > li, .sd-1-5-4-list:not(.sd-1-5-4-list--icon) ul > li > ul > li > ul > li, .sd-1-5-4-prose > :is(ol, ul):is(ul):not(.sd-1-5-4-list--icon) > li > ul > li > ul > li, .sd-1-5-4-prose > :is(ol, ul) ul > li > ul > li > ul > li {
+.sd-1-5-6-list:not(.sd-1-5-6-list--icon):is(ul):not(.sd-1-5-6-list--icon) > li > ul > li > ul > li, .sd-1-5-6-list:not(.sd-1-5-6-list--icon) ul > li > ul > li > ul > li, .sd-1-5-6-prose > :is(ol, ul):is(ul):not(.sd-1-5-6-list--icon) > li > ul > li > ul > li, .sd-1-5-6-prose > :is(ol, ul) ul > li > ul > li > ul > li {
               list-style-type: '\2010'; /* - */
             }
 
@@ -126,19 +125,19 @@
   * Icon lists
   */
 
-.sd-1-5-4-list--icon {
+.sd-1-5-6-list--icon {
   padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
   padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
   text-align: left;
 }
 
-.sd-1-5-4-list--icon li sd-icon:first-of-type,
-    .sd-1-5-4-list--icon li .sd-1-5-4-list--icon__icon:first-of-type {
+.sd-1-5-6-list--icon li sd-icon:first-of-type,
+    .sd-1-5-6-list--icon li .sd-1-5-6-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-5-4-list--icon {
+.sd-1-5-6-list--icon {
   list-style-type: '';
 }
 
@@ -146,19 +145,19 @@
     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-5-4-list--icon > li:first-of-type {
+.sd-1-5-6-list--icon > li:first-of-type {
   padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
 }
 
-.sd-1-5-4-list--icon li {
+.sd-1-5-6-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-5-4-list--icon li > sd-icon:first-of-type,
-    .sd-1-5-4-list--icon li > .sd-1-5-4-list--icon__icon:first-of-type {
+.sd-1-5-6-list--icon li > sd-icon:first-of-type,
+    .sd-1-5-6-list--icon li > .sd-1-5-6-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 */;
@@ -166,16 +165,16 @@
   color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
 }
 
-.sd-1-5-4-list--icon.sd-1-5-4-list--horizontal {
+.sd-1-5-6-list--icon.sd-1-5-6-list--horizontal {
   display: flex;
 }
 
-.sd-1-5-4-list--icon.sd-1-5-4-list--horizontal li {
+.sd-1-5-6-list--icon.sd-1-5-6-list--horizontal li {
   display: flex;
   padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
 }
 
-.sd-1-5-4-list--icon.sd-1-5-4-list--horizontal li:not(:last-child) {
+.sd-1-5-6-list--icon.sd-1-5-6-list--horizontal li:not(:last-child) {
   margin-right: var(--sd-spacing-8, 2rem) /* 32px */;
 }
 
@@ -183,16 +182,16 @@
  * Inverted
  */
 
-.sd-1-5-4-list--inverted,
-.sd-1-5-4-prose--inverted > :is(ol, ul) {
+.sd-1-5-6-list--inverted,
+.sd-1-5-6-prose--inverted > :is(ol, ul) {
   
   color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
-.sd-1-5-4-list--inverted li > sd-icon:first-of-type,
-  .sd-1-5-4-list--inverted li > .sd-1-5-4-list--icon__icon:first-of-type,
-  .sd-1-5-4-prose--inverted > :is(ol, ul) li > sd-icon:first-of-type,
-  .sd-1-5-4-prose--inverted > :is(ol, ul) li > .sd-1-5-4-list--icon__icon:first-of-type {
+.sd-1-5-6-list--inverted li > sd-icon:first-of-type,
+  .sd-1-5-6-list--inverted li > .sd-1-5-6-list--icon__icon:first-of-type,
+  .sd-1-5-6-prose--inverted > :is(ol, ul) li > sd-icon:first-of-type,
+  .sd-1-5-6-prose--inverted > :is(ol, ul) li > .sd-1-5-6-list--icon__icon:first-of-type {
   
   color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }

package/dist-versioned/modules/mark.css

@@ -1,11 +1,11 @@
 /**
  * The green accent color can be used to highlight parts of the text.
- * @name sd-1-5-4-mark
+ * @name sd-1-5-6-mark
  * @status stable
  * @since 1.7
  */
 
-mark.sd-1-5-4-mark {
+mark.sd-1-5-6-mark {
 
     background-color: transparent;
 

package/dist-versioned/modules/media.css

@@ -1,30 +1,30 @@
 /**
  * Generates basic styles for media elements.
- * @name sd-1-5-4-media
+ * @name sd-1-5-6-media
  * @status stable
  * @since 2.5.0
- * @boolean sd-1-5-4-media--inverted Inverts the figcaption text.
+ * @boolean sd-1-5-6-media--inverted Inverts the figcaption text.
  */
 
-.sd-1-5-4-prose figure,
-figure.sd-1-5-4-media {
+.sd-1-5-6-prose figure,
+figure.sd-1-5-6-media {
 
     margin: var(--sd-spacing-0, 0px) /* No spacing (manually added) */
 }
 
-.sd-1-5-4-prose figure figcaption, figure.sd-1-5-4-media figcaption {
+.sd-1-5-6-prose figure figcaption, figure.sd-1-5-6-media figcaption {
 
     
 
     color: rgb(var(--sd-color-neutral-700, 104 104 104) / var(--tw-text-opacity, 1)) /* Additional text color */
 }
 
-.sd-1-5-4-prose figure figcaption:last-child, figure.sd-1-5-4-media figcaption:last-child {
+.sd-1-5-6-prose figure figcaption:last-child, figure.sd-1-5-6-media figcaption:last-child {
 
     margin-top: var(--sd-spacing-3, 0.75rem) /* 12px */
 }
 
-.sd-1-5-4-prose--inverted figure figcaption, figure.sd-1-5-4-media--inverted figcaption {
+.sd-1-5-6-prose--inverted figure figcaption, figure.sd-1-5-6-media--inverted figcaption {
 
     
 

package/dist-versioned/modules/meta.css

@@ -1,15 +1,15 @@
 /**
  * Meta information like file size, date, or whatever is needed.
- * @name sd-1-5-4-meta
+ * @name sd-1-5-6-meta
  * @status stable
  * @since 1.7
- * @variant { sm } sd-1-5-4-meta--size-... The size. Small can be used as an alternative in tight spaces.
- * @boolean sd-1-5-4-meta--inverted Inverts the meta element.
- * @boolean sd-1-5-4-meta--pipe Adds a pipe right from the meta element.
- * @boolean sd-1-5-4-meta--light Makes sd-1-5-4-meta light.
+ * @variant { sm } sd-1-5-6-meta--size-... The size. Small can be used as an alternative in tight spaces.
+ * @boolean sd-1-5-6-meta--inverted Inverts the meta element.
+ * @boolean sd-1-5-6-meta--pipe Adds a pipe right from the meta element.
+ * @boolean sd-1-5-6-meta--light Makes sd-1-5-6-meta light.
  */
 
-.sd-1-5-4-meta {
+.sd-1-5-6-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. */;
@@ -17,33 +17,33 @@
       color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
 }
 
-.sd-1-5-4-meta--size-sm {
+.sd-1-5-6-meta--size-sm {
       font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
 }
 
-.sd-1-5-4-meta--light {
+.sd-1-5-6-meta--light {
       
       color: rgb(var(--sd-color-neutral-700, 104 104 104) / var(--tw-text-opacity, 1)) /* Additional text color */;
 }
 
-.sd-1-5-4-meta--inverted {
+.sd-1-5-6-meta--inverted {
       
       color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
-.sd-1-5-4-meta--inverted.sd-1-5-4-meta--light {
+.sd-1-5-6-meta--inverted.sd-1-5-6-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-5-4-meta--pipe::after {
+.sd-1-5-6-meta--pipe::after {
       content: '|';
       margin-left: var(--sd-spacing-1, 0.25rem) /* 4px */;
       margin-right: var(--sd-spacing-1, 0.25rem) /* 4px */;
     }
 
-.sd-1-5-4-meta--pipe.sd-1-5-4-meta--size-sm::after {
+.sd-1-5-6-meta--pipe.sd-1-5-6-meta--size-sm::after {
       margin-left: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
       margin-right: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
 }