@solid-design-system/styles 1.5.5 → 2.0.0-next.0

package/dist-versioned/modules/interactive.css

@@ -1,124 +1,95 @@
-/**
- * Generates basic styles for interactive elements.
- * @name sd-1-5-5-interactive
- * @status stable
- * @since 1.11
- * @boolean sd-1-5-5-interactive--disabled Makes an element look disabled.
- * @boolean sd-1-5-5-interactive--inverted Inverts the colors of an element.
- * @boolean sd-1-5-5-interactive--reset Resets the default browser styles of e.g., a button.
- */
-
-.sd-1-5-5-prose a--reset, .sd-1-5-5-interactive--reset {
+/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
+@layer properties;
+.sd-2-0-0-next-0-prose a--reset, .sd-2-0-0-next-0-interactive--reset {
     all: unset;
     outline: revert;
   }
-
-.sd-1-5-5-prose a,
-.sd-1-5-5-interactive {
-    cursor: pointer;
-    
-    color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
-    text-decoration-line: underline;
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-    transition-duration: 150ms;
-    transition-duration: var(--sd-duration-fast, 150ms) /* Component State
-Animation of states like hover or pressed
-Microinteractions
-Smooth transitions eg. for buttons or dropdowns */;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+.sd-2-0-0-next-0-prose a, .sd-2-0-0-next-0-interactive{
+  cursor: pointer;
+  color: var(--sd-color-text-primary, var(--sd-color-primary));
+  text-decoration-line: underline;
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
+  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
+  --tw-duration: var(--sd-duration-fast, 150ms);
+  transition-duration: var(--sd-duration-fast, 150ms);
+  --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
+  transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
 }
-
-.sd-1-5-5-prose a:hover:not([disabled]),
-.sd-1-5-5-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-5-prose a:active:not([disabled]),
-.sd-1-5-5-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-5-prose a:is(.sd-1-5-5-interactive), .sd-1-5-5-interactive:is(.sd-1-5-5-interactive) {
-    text-decoration-line: none;
-}
-
-.sd-1-5-5-prose a:focus-visible, .sd-1-5-5-interactive:focus-visible {
+.sd-2-0-0-next-0-prose a:hover:not([disabled]), .sd-2-0-0-next-0-interactive:hover:not([disabled]) {
+    color: var(--sd-color-text-primary-500, var(--sd-color-primary-500));
+  }
+.sd-2-0-0-next-0-prose a:focus-visible, .sd-2-0-0-next-0-interactive:focus-visible {
     outline-style: solid;
+    outline-offset: 2px;
     outline-width: 2px;
+    outline-color: var(--outline-color-primary);
+  }
+.sd-2-0-0-next-0-prose a:focus-visible, .sd-2-0-0-next-0-interactive:focus-visible {
+    outline-style: solid;
     outline-offset: 2px;
-    outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
-}
-
-.sd-1-5-5-prose a--disabled,
-  .sd-1-5-5-prose a[disabled],
-  .sd-1-5-5-prose a[href=''],
-  .sd-1-5-5-interactive--disabled,
-  .sd-1-5-5-interactive[disabled],
-  .sd-1-5-5-interactive[href=''] {
+    outline-width: 2px;
+    outline-color: var(--outline-color-primary);
+  }
+.sd-2-0-0-next-0-prose a:active:not([disabled]), .sd-2-0-0-next-0-interactive:active:not([disabled]) {
+    color: var(--sd-interactive--active-color-text, var(--sd-color-primary-800));
+  }
+.sd-2-0-0-next-0-prose a:is(.sd-2-0-0-next-0-interactive), .sd-2-0-0-next-0-interactive:is(.sd-2-0-0-next-0-interactive) {
+    text-decoration-line: none;
+  }
+.sd-2-0-0-next-0-prose a--disabled, .sd-2-0-0-next-0-prose a[disabled], .sd-2-0-0-next-0-prose a[href=''], .sd-2-0-0-next-0-interactive--disabled, .sd-2-0-0-next-0-interactive[disabled], .sd-2-0-0-next-0-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-5-prose a--disabled:hover:not([disabled]),
-  .sd-1-5-5-prose a[disabled]:hover:not([disabled]),
-  .sd-1-5-5-prose a[href='']:hover:not([disabled]),
-  .sd-1-5-5-interactive--disabled:hover:not([disabled]),
-  .sd-1-5-5-interactive[disabled]:hover:not([disabled]),
-  .sd-1-5-5-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-5-prose a--disabled:active:not([disabled]),
-  .sd-1-5-5-prose a[disabled]:active:not([disabled]),
-  .sd-1-5-5-prose a[href='']:active:not([disabled]),
-  .sd-1-5-5-interactive--disabled:active:not([disabled]),
-  .sd-1-5-5-interactive[disabled]:active:not([disabled]),
-  .sd-1-5-5-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-5-prose a--disabled.sd-1-5-5-interactive--inverted, .sd-1-5-5-prose a[disabled].sd-1-5-5-interactive--inverted, .sd-1-5-5-prose a[href=''].sd-1-5-5-interactive--inverted, .sd-1-5-5-interactive--disabled.sd-1-5-5-interactive--inverted, .sd-1-5-5-interactive[disabled].sd-1-5-5-interactive--inverted, .sd-1-5-5-interactive[href=''].sd-1-5-5-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-5-prose a--disabled.sd-1-5-5-interactive--inverted:hover:not([disabled]), .sd-1-5-5-prose a[disabled].sd-1-5-5-interactive--inverted:hover:not([disabled]), .sd-1-5-5-prose a[href=''].sd-1-5-5-interactive--inverted:hover:not([disabled]), .sd-1-5-5-interactive--disabled.sd-1-5-5-interactive--inverted:hover:not([disabled]), .sd-1-5-5-interactive[disabled].sd-1-5-5-interactive--inverted:hover:not([disabled]), .sd-1-5-5-interactive[href=''].sd-1-5-5-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-5-prose a--disabled.sd-1-5-5-interactive--inverted:active:not([disabled]), .sd-1-5-5-prose a[disabled].sd-1-5-5-interactive--inverted:active:not([disabled]), .sd-1-5-5-prose a[href=''].sd-1-5-5-interactive--inverted:active:not([disabled]), .sd-1-5-5-interactive--disabled.sd-1-5-5-interactive--inverted:active:not([disabled]), .sd-1-5-5-interactive[disabled].sd-1-5-5-interactive--inverted:active:not([disabled]), .sd-1-5-5-interactive[href=''].sd-1-5-5-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-5-prose--inverted a,
-.sd-1-5-5-interactive--inverted {
-    
-    color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
-}
-
-.sd-1-5-5-prose--inverted a:hover:not([disabled]),
-.sd-1-5-5-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-5-prose--inverted a:active:not([disabled]),
-.sd-1-5-5-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 */;
+    color: var(--sd-color-text-neutral-500, var(--sd-color-neutral-500));
+  }
+.sd-2-0-0-next-0-prose a--disabled:hover:not([disabled]), .sd-2-0-0-next-0-prose a[disabled]:hover:not([disabled]), .sd-2-0-0-next-0-prose a[href='']:hover:not([disabled]), .sd-2-0-0-next-0-interactive--disabled:hover:not([disabled]), .sd-2-0-0-next-0-interactive[disabled]:hover:not([disabled]), .sd-2-0-0-next-0-interactive[href='']:hover:not([disabled]) {
+      color: var(--sd-color-text-neutral-500, var(--sd-color-neutral-500));
+    }
+.sd-2-0-0-next-0-prose a--disabled:active:not([disabled]), .sd-2-0-0-next-0-prose a[disabled]:active:not([disabled]), .sd-2-0-0-next-0-prose a[href='']:active:not([disabled]), .sd-2-0-0-next-0-interactive--disabled:active:not([disabled]), .sd-2-0-0-next-0-interactive[disabled]:active:not([disabled]), .sd-2-0-0-next-0-interactive[href='']:active:not([disabled]) {
+      color: var(--sd-color-text-neutral-500, var(--sd-color-neutral-500));
+    }
+.sd-2-0-0-next-0-prose a--disabled.sd-2-0-0-next-0-interactive--inverted, .sd-2-0-0-next-0-prose a[disabled].sd-2-0-0-next-0-interactive--inverted, .sd-2-0-0-next-0-prose a[href=''].sd-2-0-0-next-0-interactive--inverted, .sd-2-0-0-next-0-interactive--disabled.sd-2-0-0-next-0-interactive--inverted, .sd-2-0-0-next-0-interactive[disabled].sd-2-0-0-next-0-interactive--inverted, .sd-2-0-0-next-0-interactive[href=''].sd-2-0-0-next-0-interactive--inverted {
+      color: var(--sd-color-text-neutral-600, var(--sd-color-neutral-600));
+    }
+.sd-2-0-0-next-0-prose a--disabled.sd-2-0-0-next-0-interactive--inverted:hover:not([disabled]), .sd-2-0-0-next-0-prose a[disabled].sd-2-0-0-next-0-interactive--inverted:hover:not([disabled]), .sd-2-0-0-next-0-prose a[href=''].sd-2-0-0-next-0-interactive--inverted:hover:not([disabled]), .sd-2-0-0-next-0-interactive--disabled.sd-2-0-0-next-0-interactive--inverted:hover:not([disabled]), .sd-2-0-0-next-0-interactive[disabled].sd-2-0-0-next-0-interactive--inverted:hover:not([disabled]), .sd-2-0-0-next-0-interactive[href=''].sd-2-0-0-next-0-interactive--inverted:hover:not([disabled]) {
+        color: var(--sd-color-text-neutral-600, var(--sd-color-neutral-600));
+      }
+.sd-2-0-0-next-0-prose a--disabled.sd-2-0-0-next-0-interactive--inverted:active:not([disabled]), .sd-2-0-0-next-0-prose a[disabled].sd-2-0-0-next-0-interactive--inverted:active:not([disabled]), .sd-2-0-0-next-0-prose a[href=''].sd-2-0-0-next-0-interactive--inverted:active:not([disabled]), .sd-2-0-0-next-0-interactive--disabled.sd-2-0-0-next-0-interactive--inverted:active:not([disabled]), .sd-2-0-0-next-0-interactive[disabled].sd-2-0-0-next-0-interactive--inverted:active:not([disabled]), .sd-2-0-0-next-0-interactive[href=''].sd-2-0-0-next-0-interactive--inverted:active:not([disabled]) {
+        color: var(--sd-color-text-neutral-600, var(--sd-color-neutral-600));
+      }
+.sd-2-0-0-next-0-prose--inverted a, .sd-2-0-0-next-0-interactive--inverted {
+  color: var(--sd-color-text-white, var(--sd-color-white));
 }
-
-.sd-1-5-5-prose--inverted a:focus-visible, .sd-1-5-5-interactive--inverted:focus-visible {
+.sd-2-0-0-next-0-prose--inverted a:hover:not([disabled]), .sd-2-0-0-next-0-interactive--inverted:hover:not([disabled]) {
+    color: var(--sd-color-text-primary-200, var(--sd-color-primary-200));
+  }
+.sd-2-0-0-next-0-prose--inverted a:focus-visible, .sd-2-0-0-next-0-interactive--inverted:focus-visible {
     outline-style: solid;
+    outline-offset: 2px;
     outline-width: 2px;
+    outline-color: var(--outline-color-primary);
+  }
+.sd-2-0-0-next-0-prose--inverted a:focus-visible, .sd-2-0-0-next-0-interactive--inverted:focus-visible {
+    outline-style: solid;
     outline-offset: 2px;
-    outline-color: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */;
+    outline-width: 2px;
+    outline-color: var(--outline-color-primary);
+  }
+.sd-2-0-0-next-0-prose--inverted a:active:not([disabled]), .sd-2-0-0-next-0-interactive--inverted:active:not([disabled]) {
+    color: var(--sd-color-text-primary-400, var(--sd-color-primary-400));
+  }
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-duration: initial;
+      --tw-ease: initial;
+    }
+  }
 }

package/dist-versioned/modules/leadtext.css

@@ -1,43 +1,39 @@
-/**
- * Leadtext is used for text that should be highlighted and a focal point of the page.
- * @name sd-1-5-5-leadtext
- * @status stable
- * @since 1.7
- * @variant { lg } sd-1-5-5-leadtext--size-... The leadtext's size.
- * @boolean sd-1-5-5-leadtext--inverted Inverts the leadtext text.
- */
-
-.sd-1-5-5-prose > .sd-1-5-5-leadtext,
-.sd-1-5-5-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 */;
-
-    
-
-    color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
+/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
+@layer properties;
+.sd-2-0-0-next-0-prose > .sd-2-0-0-next-0-leadtext, .sd-2-0-0-next-0-leadtext {
+  font-size: var(--sd-text-xl);
+  line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
+  --tw-leading: var(--leading-normal, 1.5);
+  line-height: var(--leading-normal, 1.5);
+  --tw-font-weight: var(--sd-font-weight-normal);
+  font-weight: var(--sd-font-weight-normal);
+  color: var(--sd-color-text-black, var(--sd-color-black));
 }
-
-.sd-1-5-5-prose > .sd-1-5-5-leadtext--size-lg, .sd-1-5-5-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 */;
-
-    
-
-    color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
+.sd-2-0-0-next-0-prose > .sd-2-0-0-next-0-leadtext--size-lg, .sd-2-0-0-next-0-leadtext--size-lg {
+    font-size: var(--sd-text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
+    --tw-leading: var(--leading-normal, 1.5);
+    line-height: var(--leading-normal, 1.5);
+    --tw-font-weight: var(--sd-font-weight-normal);
+    font-weight: var(--sd-font-weight-normal);
+    color: var(--sd-color-text-black, var(--sd-color-black));
+  }
+.sd-2-0-0-next-0-prose--inverted > .sd-2-0-0-next-0-leadtext, .sd-2-0-0-next-0-leadtext--inverted {
+  color: var(--sd-color-text-white, var(--sd-color-white));
 }
-
-.sd-1-5-5-prose--inverted > .sd-1-5-5-leadtext,
-.sd-1-5-5-leadtext--inverted {
-
-    
-
-    color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-leading: initial;
+      --tw-font-weight: initial;
+    }
+  }
 }

package/dist-versioned/modules/list.css

@@ -1,198 +1,125 @@
-/**
- * Generates basic styles for list elements.
- * @name sd-1-5-5-list
- * @status stable
- * @since 1.39.0
- * @boolean sd-1-5-5-list--inverted Inverts the list text.
- */
-
-.sd-1-5-5-list:not(.sd-1-5-5-list--icon),
-.sd-1-5-5-prose > :is(ol, ul) {
+/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
+@layer properties;
+.sd-2-0-0-next-0-list:not(.sd-2-0-0-next-0-list--icon), .sd-2-0-0-next-0-prose > :is(ol, ul) {
   list-style-position: revert;
   list-style-type: revert;
   padding: revert;
-  padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
-  padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
-  padding-left: var(--sd-spacing-4, 1rem) /* 16px */;
+  padding-block: var(--sd-spacing-4);
+  padding-left: var(--sd-spacing-4);
   text-align: left;
-
-  /*
-   * Unordered lists
-   */
 }
-
-.sd-1-5-5-list:not(.sd-1-5-5-list--icon) li:not(:first-child), .sd-1-5-5-prose > :is(ol, ul) li:not(:first-child) {
-  margin-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
-}
-
-.sd-1-5-5-list:not(.sd-1-5-5-list--icon) ul,
-  .sd-1-5-5-list:not(.sd-1-5-5-list--icon) ol,
-  .sd-1-5-5-prose > :is(ol, ul) ul,
-  .sd-1-5-5-prose > :is(ol, ul) ol {
+.sd-2-0-0-next-0-list:not(.sd-2-0-0-next-0-list--icon) li:not(:first-child), .sd-2-0-0-next-0-prose > :is(ol, ul) li:not(:first-child) {
+    margin-top: var(--sd-spacing-3);
+  }
+.sd-2-0-0-next-0-list:not(.sd-2-0-0-next-0-list--icon) ul, .sd-2-0-0-next-0-list:not(.sd-2-0-0-next-0-list--icon) ol, .sd-2-0-0-next-0-prose > :is(ol, ul) ul, .sd-2-0-0-next-0-prose > :is(ol, ul) ol {
     all: revert;
-    padding-left: 1.4em;
     padding-top: 0.75em;
+    padding-left: 1.4em;
   }
-
 @supports not (-webkit-hyphens: none) {
-
-.sd-1-5-5-list:not(.sd-1-5-5-list--icon),
-.sd-1-5-5-prose > :is(ol, ul) {
-    /* Safari automatically adds some spacing. This adds it for other browsers. */
-
-    /*
-     * Ordered lists
-     */
-
-    /* 
-   * Safari currently only partially supports the ::marker pseudo class.
-   * Support is limited to color and font-size. Therefore we optimize the numbering only for non-Safari browsers.
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/::marker#browser_compatibility
-   */
-    /* Level 1 */
-}
-    .sd-1-5-5-list:not(.sd-1-5-5-list--icon) li, .sd-1-5-5-prose > :is(ol, ul) li {
-    padding-left: 0.3em;
-  }
-    .sd-1-5-5-list:not(.sd-1-5-5-list--icon):is(ol):not(.sd-1-5-5-list--icon), .sd-1-5-5-prose > :is(ol, ul):is(ol):not(.sd-1-5-5-list--icon) {
+    .sd-2-0-0-next-0-list:not(.sd-2-0-0-next-0-list--icon) li, .sd-2-0-0-next-0-prose > :is(ol, ul) li {
+      padding-left: 0.3em;
+    }
+    .sd-2-0-0-next-0-list:not(.sd-2-0-0-next-0-list--icon):is(ol):not(.sd-2-0-0-next-0-list--icon), .sd-2-0-0-next-0-prose > :is(ol, ul):is(ol):not(.sd-2-0-0-next-0-list--icon) {
       counter-reset: item;
     }
-      .sd-1-5-5-list:not(.sd-1-5-5-list--icon):is(ol):not(.sd-1-5-5-list--icon) > li, .sd-1-5-5-prose > :is(ol, ul):is(ol):not(.sd-1-5-5-list--icon) > li {
+      .sd-2-0-0-next-0-list:not(.sd-2-0-0-next-0-list--icon):is(ol):not(.sd-2-0-0-next-0-list--icon) > li, .sd-2-0-0-next-0-prose > :is(ol, ul):is(ol):not(.sd-2-0-0-next-0-list--icon) > li {
         counter-increment: item;
       }
-        .sd-1-5-5-list:not(.sd-1-5-5-list--icon):is(ol):not(.sd-1-5-5-list--icon) > li::marker, .sd-1-5-5-prose > :is(ol, ul):is(ol):not(.sd-1-5-5-list--icon) > li::marker {
+        .sd-2-0-0-next-0-list:not(.sd-2-0-0-next-0-list--icon):is(ol):not(.sd-2-0-0-next-0-list--icon) > li::marker, .sd-2-0-0-next-0-prose > :is(ol, ul):is(ol):not(.sd-2-0-0-next-0-list--icon) > li::marker {
           content: counters(item, '.', decimal) '. ';
         }
-        /* Level 2 */
-        .sd-1-5-5-list:not(.sd-1-5-5-list--icon):is(ol):not(.sd-1-5-5-list--icon) > li > ol, .sd-1-5-5-prose > :is(ol, ul):is(ol):not(.sd-1-5-5-list--icon) > li > ol {
-    padding-left: 1.9em;
+        .sd-2-0-0-next-0-list:not(.sd-2-0-0-next-0-list--icon):is(ol):not(.sd-2-0-0-next-0-list--icon) > li > ol, .sd-2-0-0-next-0-prose > :is(ol, ul):is(ol):not(.sd-2-0-0-next-0-list--icon) > li > ol {
+          padding-left: 1.9em;
           counter-reset: subitem;
-  }
-          .sd-1-5-5-list:not(.sd-1-5-5-list--icon):is(ol):not(.sd-1-5-5-list--icon) > li > ol > li, .sd-1-5-5-prose > :is(ol, ul):is(ol):not(.sd-1-5-5-list--icon) > li > ol > li {
+        }
+          .sd-2-0-0-next-0-list:not(.sd-2-0-0-next-0-list--icon):is(ol):not(.sd-2-0-0-next-0-list--icon) > li > ol > li, .sd-2-0-0-next-0-prose > :is(ol, ul):is(ol):not(.sd-2-0-0-next-0-list--icon) > li > ol > li {
             counter-increment: subitem;
           }
-            .sd-1-5-5-list:not(.sd-1-5-5-list--icon):is(ol):not(.sd-1-5-5-list--icon) > li > ol > li::marker, .sd-1-5-5-prose > :is(ol, ul):is(ol):not(.sd-1-5-5-list--icon) > li > ol > li::marker {
+            .sd-2-0-0-next-0-list:not(.sd-2-0-0-next-0-list--icon):is(ol):not(.sd-2-0-0-next-0-list--icon) > li > ol > li::marker, .sd-2-0-0-next-0-prose > :is(ol, ul):is(ol):not(.sd-2-0-0-next-0-list--icon) > li > ol > li::marker {
               content: counters(item, '.', decimal) '.' counters(subitem, '.', decimal) '. ';
             }
-            /* Level 3 */
-            .sd-1-5-5-list:not(.sd-1-5-5-list--icon):is(ol):not(.sd-1-5-5-list--icon) > li > ol > li > ol, .sd-1-5-5-prose > :is(ol, ul):is(ol):not(.sd-1-5-5-list--icon) > li > ol > li > ol {
-    padding-left: 2.7em;
+            .sd-2-0-0-next-0-list:not(.sd-2-0-0-next-0-list--icon):is(ol):not(.sd-2-0-0-next-0-list--icon) > li > ol > li > ol, .sd-2-0-0-next-0-prose > :is(ol, ul):is(ol):not(.sd-2-0-0-next-0-list--icon) > li > ol > li > ol {
+              padding-left: 2.7em;
               counter-reset: subsubitem;
-  }
-              .sd-1-5-5-list:not(.sd-1-5-5-list--icon):is(ol):not(.sd-1-5-5-list--icon) > li > ol > li > ol > li, .sd-1-5-5-prose > :is(ol, ul):is(ol):not(.sd-1-5-5-list--icon) > li > ol > li > ol > li {
+            }
+              .sd-2-0-0-next-0-list:not(.sd-2-0-0-next-0-list--icon):is(ol):not(.sd-2-0-0-next-0-list--icon) > li > ol > li > ol > li, .sd-2-0-0-next-0-prose > :is(ol, ul):is(ol):not(.sd-2-0-0-next-0-list--icon) > li > ol > li > ol > li {
                 counter-increment: subsubitem;
               }
-                .sd-1-5-5-list:not(.sd-1-5-5-list--icon):is(ol):not(.sd-1-5-5-list--icon) > li > ol > li > ol > li::marker, .sd-1-5-5-prose > :is(ol, ul):is(ol):not(.sd-1-5-5-list--icon) > li > ol > li > ol > li::marker {
-                  content: counters(item, '.', decimal) '.' counters(subitem, '.', decimal) '.'
-                    counters(subsubitem, '.', decimal) '. ';
+                .sd-2-0-0-next-0-list:not(.sd-2-0-0-next-0-list--icon):is(ol):not(.sd-2-0-0-next-0-list--icon) > li > ol > li > ol > li::marker, .sd-2-0-0-next-0-prose > :is(ol, ul):is(ol):not(.sd-2-0-0-next-0-list--icon) > li > ol > li > ol > li::marker {
+                  content: counters(item, '.', decimal) '.' counters(subitem, '.', decimal) '.' counters(subsubitem, '.', decimal) '. ';
                 }
   }
-
-/* Level 1 */
-
-.sd-1-5-5-list:not(.sd-1-5-5-list--icon):is(ul):not(.sd-1-5-5-list--icon),
-  .sd-1-5-5-list:not(.sd-1-5-5-list--icon) ul,
-  .sd-1-5-5-prose > :is(ol, ul):is(ul):not(.sd-1-5-5-list--icon),
-  .sd-1-5-5-prose > :is(ol, ul) ul {
-  padding-left: 0.5em;
-}
-
-.sd-1-5-5-list:not(.sd-1-5-5-list--icon):is(ul):not(.sd-1-5-5-list--icon) > li, .sd-1-5-5-list:not(.sd-1-5-5-list--icon) ul > li, .sd-1-5-5-prose > :is(ol, ul):is(ul):not(.sd-1-5-5-list--icon) > li, .sd-1-5-5-prose > :is(ol, ul) ul > li {
-  padding-left: 0.75em;
-      list-style-type: '\2022'; /* • */
-}
-
-/* Level 2 */
-
-.sd-1-5-5-list:not(.sd-1-5-5-list--icon):is(ul):not(.sd-1-5-5-list--icon) > li > ul, .sd-1-5-5-list:not(.sd-1-5-5-list--icon) ul > li > ul, .sd-1-5-5-prose > :is(ol, ul):is(ul):not(.sd-1-5-5-list--icon) > li > ul, .sd-1-5-5-prose > :is(ol, ul) ul > li > ul {
-  padding-left: 0.3em;
-}
-
-.sd-1-5-5-list:not(.sd-1-5-5-list--icon):is(ul):not(.sd-1-5-5-list--icon) > li > ul > li, .sd-1-5-5-list:not(.sd-1-5-5-list--icon) ul > li > ul > li, .sd-1-5-5-prose > :is(ol, ul):is(ul):not(.sd-1-5-5-list--icon) > li > ul > li, .sd-1-5-5-prose > :is(ol, ul) ul > li > ul > li {
-          list-style-type: '\002B1D'; /* · */
+.sd-2-0-0-next-0-list:not(.sd-2-0-0-next-0-list--icon):is(ul):not(.sd-2-0-0-next-0-list--icon), .sd-2-0-0-next-0-list:not(.sd-2-0-0-next-0-list--icon) ul, .sd-2-0-0-next-0-prose > :is(ol, ul):is(ul):not(.sd-2-0-0-next-0-list--icon), .sd-2-0-0-next-0-prose > :is(ol, ul) ul {
+    padding-left: 0.5em;
+  }
+.sd-2-0-0-next-0-list:not(.sd-2-0-0-next-0-list--icon):is(ul):not(.sd-2-0-0-next-0-list--icon) > li, .sd-2-0-0-next-0-list:not(.sd-2-0-0-next-0-list--icon) ul > li, .sd-2-0-0-next-0-prose > :is(ol, ul):is(ul):not(.sd-2-0-0-next-0-list--icon) > li, .sd-2-0-0-next-0-prose > :is(ol, ul) ul > li {
+      padding-left: 0.75em;
+      list-style-type: '\2022';
+    }
+.sd-2-0-0-next-0-list:not(.sd-2-0-0-next-0-list--icon):is(ul):not(.sd-2-0-0-next-0-list--icon) > li > ul, .sd-2-0-0-next-0-list:not(.sd-2-0-0-next-0-list--icon) ul > li > ul, .sd-2-0-0-next-0-prose > :is(ol, ul):is(ul):not(.sd-2-0-0-next-0-list--icon) > li > ul, .sd-2-0-0-next-0-prose > :is(ol, ul) ul > li > ul {
+        padding-left: 0.3em;
+      }
+.sd-2-0-0-next-0-list:not(.sd-2-0-0-next-0-list--icon):is(ul):not(.sd-2-0-0-next-0-list--icon) > li > ul > li, .sd-2-0-0-next-0-list:not(.sd-2-0-0-next-0-list--icon) ul > li > ul > li, .sd-2-0-0-next-0-prose > :is(ol, ul):is(ul):not(.sd-2-0-0-next-0-list--icon) > li > ul > li, .sd-2-0-0-next-0-prose > :is(ol, ul) ul > li > ul > li {
+          list-style-type: '\002B1D';
         }
-
-/* Level 3 */
-
-.sd-1-5-5-list:not(.sd-1-5-5-list--icon):is(ul):not(.sd-1-5-5-list--icon) > li > ul > li > ul, .sd-1-5-5-list:not(.sd-1-5-5-list--icon) ul > li > ul > li > ul, .sd-1-5-5-prose > :is(ol, ul):is(ul):not(.sd-1-5-5-list--icon) > li > ul > li > ul, .sd-1-5-5-prose > :is(ol, ul) ul > li > ul > li > ul {
-  padding-left: 0.4em;
-}
-
-.sd-1-5-5-list:not(.sd-1-5-5-list--icon):is(ul):not(.sd-1-5-5-list--icon) > li > ul > li > ul > li, .sd-1-5-5-list:not(.sd-1-5-5-list--icon) ul > li > ul > li > ul > li, .sd-1-5-5-prose > :is(ol, ul):is(ul):not(.sd-1-5-5-list--icon) > li > ul > li > ul > li, .sd-1-5-5-prose > :is(ol, ul) ul > li > ul > li > ul > li {
-              list-style-type: '\2010'; /* - */
+.sd-2-0-0-next-0-list:not(.sd-2-0-0-next-0-list--icon):is(ul):not(.sd-2-0-0-next-0-list--icon) > li > ul > li > ul, .sd-2-0-0-next-0-list:not(.sd-2-0-0-next-0-list--icon) ul > li > ul > li > ul, .sd-2-0-0-next-0-prose > :is(ol, ul):is(ul):not(.sd-2-0-0-next-0-list--icon) > li > ul > li > ul, .sd-2-0-0-next-0-prose > :is(ol, ul) ul > li > ul > li > ul {
+            padding-left: 0.4em;
+          }
+.sd-2-0-0-next-0-list:not(.sd-2-0-0-next-0-list--icon):is(ul):not(.sd-2-0-0-next-0-list--icon) > li > ul > li > ul > li, .sd-2-0-0-next-0-list:not(.sd-2-0-0-next-0-list--icon) ul > li > ul > li > ul > li, .sd-2-0-0-next-0-prose > :is(ol, ul):is(ul):not(.sd-2-0-0-next-0-list--icon) > li > ul > li > ul > li, .sd-2-0-0-next-0-prose > :is(ol, ul) ul > li > ul > li > ul > li {
+              list-style-type: '\2010';
             }
-
-/*
-  * Icon lists
-  */
-
-.sd-1-5-5-list--icon {
-  padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
-  padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
+.sd-2-0-0-next-0-list--icon {
+  padding-block: var(--sd-spacing-4);
   text-align: left;
 }
-
-.sd-1-5-5-list--icon li sd-icon:first-of-type,
-    .sd-1-5-5-list--icon li .sd-1-5-5-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-5-list--icon {
+.sd-2-0-0-next-0-list--icon li sd-icon:first-of-type, .sd-2-0-0-next-0-list--icon li .sd-2-0-0-next-0-list--icon__icon:first-of-type {
+      color: var(--sd-color-text-white, var(--sd-color-white));
+    }
+.sd-2-0-0-next-0-list--icon{
   list-style-type: '';
 }
-
-/* Safari removes list semantics of lists that don’t look like lists (list-style: none). The only way to remove list
-    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-5-list--icon > li:first-of-type {
-  padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-}
-
-.sd-1-5-5-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-5-list--icon li > sd-icon:first-of-type,
-    .sd-1-5-5-list--icon li > .sd-1-5-5-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 */;
-  
-  color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
-}
-
-.sd-1-5-5-list--icon.sd-1-5-5-list--horizontal {
-  display: flex;
-}
-
-.sd-1-5-5-list--icon.sd-1-5-5-list--horizontal li {
-  display: flex;
-  padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-}
-
-.sd-1-5-5-list--icon.sd-1-5-5-list--horizontal li:not(:last-child) {
-  margin-right: var(--sd-spacing-8, 2rem) /* 32px */;
-}
-
-/*
- * Inverted
- */
-
-.sd-1-5-5-list--inverted,
-.sd-1-5-5-prose--inverted > :is(ol, ul) {
-  
-  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
+.sd-2-0-0-next-0-list--icon > li:first-of-type {
+    padding-top: calc(var(--sd-spacing-1) * 0);
+  }
+.sd-2-0-0-next-0-list--icon li {
+    position: relative;
+    padding-top: var(--sd-spacing-3);
+    padding-left: var(--sd-spacing-10);
+    --tw-leading: 32px;
+    line-height: 32px;
+  }
+.sd-2-0-0-next-0-list--icon li > sd-icon:first-of-type, .sd-2-0-0-next-0-list--icon li > .sd-2-0-0-next-0-list--icon__icon:first-of-type {
+      position: absolute;
+      left: calc(var(--sd-spacing-1) * 0);
+      font-size: var(--sd-text-3xl);
+      line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
+      color: var(--sd-color-text-primary, var(--sd-color-primary));
+    }
+.sd-2-0-0-next-0-list--icon.sd-2-0-0-next-0-list--horizontal {
+    display: flex;
+  }
+.sd-2-0-0-next-0-list--icon.sd-2-0-0-next-0-list--horizontal li {
+      display: flex;
+      padding-top: calc(var(--sd-spacing-1) * 0);
+    }
+.sd-2-0-0-next-0-list--icon.sd-2-0-0-next-0-list--horizontal li:not(:last-child) {
+      margin-right: var(--sd-spacing-8);
+    }
+.sd-2-0-0-next-0-list--inverted, .sd-2-0-0-next-0-prose--inverted > :is(ol, ul) {
+  color: var(--sd-color-text-white, var(--sd-color-white));
 }
-
-.sd-1-5-5-list--inverted li > sd-icon:first-of-type,
-  .sd-1-5-5-list--inverted li > .sd-1-5-5-list--icon__icon:first-of-type,
-  .sd-1-5-5-prose--inverted > :is(ol, ul) li > sd-icon:first-of-type,
-  .sd-1-5-5-prose--inverted > :is(ol, ul) li > .sd-1-5-5-list--icon__icon:first-of-type {
-  
-  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
+.sd-2-0-0-next-0-list--inverted li > sd-icon:first-of-type, .sd-2-0-0-next-0-list--inverted li > .sd-2-0-0-next-0-list--icon__icon:first-of-type, .sd-2-0-0-next-0-prose--inverted > :is(ol, ul) li > sd-icon:first-of-type, .sd-2-0-0-next-0-prose--inverted > :is(ol, ul) li > .sd-2-0-0-next-0-list--icon__icon:first-of-type {
+    color: var(--sd-color-text-white, var(--sd-color-white));
+  }
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-leading: initial;
+    }
+  }
 }

package/dist-versioned/modules/mark.css

@@ -1,15 +1,5 @@
-/**
- * The green accent color can be used to highlight parts of the text.
- * @name sd-1-5-5-mark
- * @status stable
- * @since 1.7
- */
-
-mark.sd-1-5-5-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 */
+/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
+mark.sd-2-0-0-next-0-mark {
+  background-color: transparent;
+  color: var(--sd-color-text-accent, var(--sd-color-accent));
 }