@solid-design-system/styles 1.5.2 → 1.5.3

package/dist-versioned/modules/pagination.css

@@ -1,38 +1,42 @@
 /**
  * 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-5-2-pagination
+ * @name sd-1-5-3-pagination
  * @status stable
  * @since 1.3
- * @variant { simple } sd-1-5-2-pagination--... The pagination format.
- * @boolean sd-1-5-2-pagination--inverted Inverts the pagination style.
+ * @variant { simple } sd-1-5-3-pagination--... The pagination format.
+ * @boolean sd-1-5-3-pagination--inverted Inverts the pagination style.
  */
 
-.sd-1-5-2-pagination > :not(ul) {
+.sd-1-5-3-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-5-2-pagination ul {
+.sd-1-5-3-pagination ul {
       display: flex;
       align-items: center;
       gap: var(--sd-spacing-2, 0.5rem) /* 8px */;
 }
 
-.sd-1-5-2-pagination ul li button {
+.sd-1-5-3-pagination ul li button {
       all: unset;
-      border-width: 2px;
+      border-width: 0px;
       border-style: solid;
       border-color: transparent;
     }
 
-.sd-1-5-2-pagination ul li button:hover:not([disabled]) {
+.sd-1-5-3-pagination ul li button:hover:not([disabled]) {
       cursor: pointer;
 }
 
-.sd-1-5-2-pagination ul li a,
-    .sd-1-5-2-pagination ul li button {
+.sd-1-5-3-pagination ul li:has(button) {
+      height: 1.875rem;
+}
+
+.sd-1-5-3-pagination ul li a,
+    .sd-1-5-3-pagination ul li button {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -44,19 +48,19 @@
       transition-duration: 150ms;
 }
 
-.sd-1-5-2-pagination ul li a:hover:not([disabled]),
-    .sd-1-5-2-pagination ul li button:hover:not([disabled]) {
+.sd-1-5-3-pagination ul li a:hover:not([disabled]),
+    .sd-1-5-3-pagination ul li button: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-2-pagination ul li a:active:not([disabled]),
-    .sd-1-5-2-pagination ul li button:active:not([disabled]) {
+.sd-1-5-3-pagination ul li a:active:not([disabled]),
+    .sd-1-5-3-pagination ul li button: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-2-pagination ul li a:focus-visible, .sd-1-5-2-pagination ul li button:focus-visible {
+.sd-1-5-3-pagination ul li a:focus-visible, .sd-1-5-3-pagination ul li button:focus-visible {
       outline-style: solid;
       outline-width: 2px;
       outline-offset: 2px;
@@ -65,24 +69,24 @@
 
 /* Previous and Next */
 
-.sd-1-5-2-pagination ul li:first-child,
-    .sd-1-5-2-pagination ul li:last-child {
+.sd-1-5-3-pagination ul li:first-child,
+    .sd-1-5-3-pagination ul li:last-child {
       height: var(--sd-spacing-12, 3rem) /* 48px */;
       width: var(--sd-spacing-12, 3rem) /* 48px */;
       font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
 }
 
-.sd-1-5-2-pagination ul li:first-child a,
-      .sd-1-5-2-pagination ul li:first-child button,
-      .sd-1-5-2-pagination ul li:last-child a,
-      .sd-1-5-2-pagination ul li:last-child button {
+.sd-1-5-3-pagination ul li:first-child a,
+      .sd-1-5-3-pagination ul li:first-child button,
+      .sd-1-5-3-pagination ul li:last-child a,
+      .sd-1-5-3-pagination ul li:last-child button {
       height: 100%;
       width: 100%;
 }
 
 /* Numbers */
 
-.sd-1-5-2-pagination ul li {
+.sd-1-5-3-pagination ul li {
       display: flex;
       height: var(--sd-spacing-8, 2rem) /* 32px */;
       width: var(--sd-spacing-8, 2rem) /* 32px */;
@@ -91,47 +95,47 @@
       text-align: center;
 }
 
-.sd-1-5-2-pagination ul li:not(:first-child):not(:last-child) a,
-        .sd-1-5-2-pagination ul li:not(:first-child):not(:last-child) button {
+.sd-1-5-3-pagination ul li:not(:first-child):not(:last-child) a,
+        .sd-1-5-3-pagination ul li:not(:first-child):not(:last-child) button {
       height: 100%;
       width: 100%;
       border-bottom-width: 2px;
       border-bottom-color: transparent;
 }
 
-.sd-1-5-2-pagination ul li:not(:first-child):not(:last-child) a[aria-current], .sd-1-5-2-pagination ul li:not(:first-child):not(:last-child) button[aria-current] {
+.sd-1-5-3-pagination ul li:not(:first-child):not(:last-child) a[aria-current], .sd-1-5-3-pagination ul li:not(:first-child):not(:last-child) button[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-5-2-pagination ul li a[aria-current],
-      .sd-1-5-2-pagination ul li button[aria-current] {
+.sd-1-5-3-pagination ul li a[aria-current],
+      .sd-1-5-3-pagination ul li button[aria-current] {
       
       color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
 }
 
-.sd-1-5-2-pagination ul li a[aria-current]:hover:not([disabled]),
-      .sd-1-5-2-pagination ul li button[aria-current]:hover:not([disabled]) {
+.sd-1-5-3-pagination ul li a[aria-current]:hover:not([disabled]),
+      .sd-1-5-3-pagination ul li button[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-5-2-pagination ul li:first-child:has(a:not([href])) a,
-    .sd-1-5-2-pagination ul li:last-child:has(a:not([href])) a,
-    .sd-1-5-2-pagination ul li:first-child:has(button[disabled]) button,
-    .sd-1-5-2-pagination ul li:last-child:has(button[disabled]) button {
+.sd-1-5-3-pagination ul li:first-child:has(a:not([href])) a,
+    .sd-1-5-3-pagination ul li:last-child:has(a:not([href])) a,
+    .sd-1-5-3-pagination ul li:first-child:has(button[disabled]) button,
+    .sd-1-5-3-pagination ul li:last-child:has(button[disabled]) button {
       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-2-pagination ul li:first-child:has(a:not([href])) a:hover:not([disabled]),
-    .sd-1-5-2-pagination ul li:last-child:has(a:not([href])) a:hover:not([disabled]),
-    .sd-1-5-2-pagination ul li:first-child:has(button[disabled]) button:hover:not([disabled]),
-    .sd-1-5-2-pagination ul li:last-child:has(button[disabled]) button:hover:not([disabled]) {
+.sd-1-5-3-pagination ul li:first-child:has(a:not([href])) a:hover:not([disabled]),
+    .sd-1-5-3-pagination ul li:last-child:has(a:not([href])) a:hover:not([disabled]),
+    .sd-1-5-3-pagination ul li:first-child:has(button[disabled]) button:hover:not([disabled]),
+    .sd-1-5-3-pagination ul li:last-child:has(button[disabled]) button:hover:not([disabled]) {
       
       color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
 }
@@ -140,66 +144,66 @@
 
 /* Number which is not current */
 
-.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) {
+.sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) {
       pointer-events: none;
       position: absolute;
 }
 
-.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) a,
-          .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) button {
+.sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) a,
+          .sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) button {
       display: none;
 }
 
 /* Apply ellipsis to (n + 2 && n - 1) */
 
-.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li + li a[aria-current], + li + li button[aria-current]), .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current], button[aria-current]) + li + li:not(:last-child) {
+.sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li + li a[aria-current], + li + li button[aria-current]), .sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current], button[aria-current]) + li + li:not(:last-child) {
       pointer-events: auto !important;
       position: relative !important;
 }
 
-.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li + li a[aria-current], + li + li button[aria-current])::after, .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current], button[aria-current]) + li + li:not(:last-child)::after {
+.sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li + li a[aria-current], + li + li button[aria-current])::after, .sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current], button[aria-current]) + li + li:not(:last-child)::after {
       --tw-content: '...';
       content: var(--tw-content);
 }
 
-.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2), 
-        .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2), 
-        .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(
+.sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2), 
+        .sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2), 
+        .sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):has(
           + li a[aria-current],
           + li button[aria-current]), 
-        .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(
+        .sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):has(
           a[aria-current],
           button[aria-current]) + li {
       pointer-events: auto !important;
       position: relative !important;
 }
 
-.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2)::after, 
-        .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2)::after, 
-        .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(
+.sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2)::after, 
+        .sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2)::after, 
+        .sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):has(
           + li a[aria-current],
           + li button[aria-current])::after, 
-        .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(
+        .sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):has(
           a[aria-current],
           button[aria-current]) + li::after {
       content: var(--tw-content) !important;
       display: none !important;
 }
 
-.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2) a,
-          .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2) button,
-          .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2) a,
-          .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2) button,
-          .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(
+.sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2) a,
+          .sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2) button,
+          .sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2) a,
+          .sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2) button,
+          .sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):has(
           + li a[aria-current],
           + li button[aria-current]) a,
-          .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(
+          .sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):has(
           + li a[aria-current],
           + li button[aria-current]) button,
-          .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(
+          .sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):has(
           a[aria-current],
           button[aria-current]) + li a,
-          .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(
+          .sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):has(
           a[aria-current],
           button[aria-current]) + li button {
       display: flex !important;
@@ -209,70 +213,70 @@
 
 /* Show until the 5th page (forward) */
 
-.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(-n + 6) {
+.sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(-n + 6) {
       pointer-events: auto;
       position: relative;
 }
 
-.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(-n + 6)::after {
+.sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(-n + 6)::after {
       content: var(--tw-content);
       display: none;
 }
 
-.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(-n + 6) a,
-            .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(-n + 6) button {
+.sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(-n + 6) a,
+            .sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(-n + 6) button {
       display: flex;
 }
 
 /* Show ellipsis on the 6th */
 
-.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(6):not(:last-child) + li {
+.sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(6):not(:last-child) + li {
       pointer-events: none;
       position: relative;
 }
 
-.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(6):not(:last-child) + li::after {
+.sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[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-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current]) {
+.sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current]) {
       pointer-events: auto;
       position: relative;
 }
 
-.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current])::after {
+.sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current])::after {
       content: var(--tw-content);
       display: none;
 }
 
-.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current]) a,
-          .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current]) button {
+.sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current]) a,
+          .sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current]) button {
       display: flex;
 }
 
 /* When one of the last 4 pages is selected, show the last 4 pages (forward) */
 
-.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current], button[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child) {
+.sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current], button[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child) {
       pointer-events: auto;
       position: relative;
 }
 
-.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current], button[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child)::after {
+.sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current], button[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child)::after {
       content: var(--tw-content);
       display: none;
 }
 
-.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current], button[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child) a,
-            .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current], button[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child) button {
+.sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current], button[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child) a,
+            .sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current], button[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child) button {
       display: flex;
 }
 
 /* When one of the last 4 pages is selected, show the last 4 pages (backward) */
 
-.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
+.sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
             ~ :nth-last-child(-n + 5) a[aria-current],
             ~ :nth-last-child(-n + 5) button[aria-current]
           ) {
@@ -280,7 +284,7 @@
       position: relative;
 }
 
-.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
+.sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
             ~ :nth-last-child(-n + 5) a[aria-current],
             ~ :nth-last-child(-n + 5) button[aria-current]
           )::after {
@@ -288,11 +292,11 @@
       display: none;
 }
 
-.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
+.sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
             ~ :nth-last-child(-n + 5) a[aria-current],
             ~ :nth-last-child(-n + 5) button[aria-current]
           ) a,
-          .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
+          .sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
             ~ :nth-last-child(-n + 5) a[aria-current],
             ~ :nth-last-child(-n + 5) button[aria-current]
           ) button {
@@ -301,7 +305,7 @@
 
 /* Show ellipsis on the 6th to last */
 
-.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has(
+.sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has(
             ~ :nth-last-child(-n + 5) a[aria-current],
             ~ :nth-last-child(-n + 5) button[aria-current]
           ) {
@@ -309,7 +313,7 @@
       position: relative;
 }
 
-.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has(
+.sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has(
             ~ :nth-last-child(-n + 5) a[aria-current],
             ~ :nth-last-child(-n + 5) button[aria-current]
           )::after {
@@ -319,22 +323,22 @@
 
 /* When it only has 5 numbers + 2 prev & next buttons */
 
-.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li {
+.sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li {
       pointer-events: auto;
       position: relative;
 }
 
-.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li::after {
+.sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li::after {
       content: var(--tw-content);
       display: none;
 }
 
-.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li a,
-        .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li button {
+.sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li a,
+        .sd-1-5-3-pagination:not(.sd-1-5-3-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li button {
       display: flex;
 }
 
-.sd-1-5-2-pagination--simple ul li:nth-child(2) {
+.sd-1-5-3-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 */;
@@ -344,7 +348,7 @@
  */;
 }
 
-.sd-1-5-2-pagination--simple ul li:nth-child(2)::after {
+.sd-1-5-3-pagination--simple ul li:nth-child(2)::after {
       position: absolute;
       right: -18px;
       --tw-scale-y: 1.5;
@@ -353,73 +357,73 @@
       content: var(--tw-content);
 }
 
-.sd-1-5-2-pagination--simple ul li:nth-child(2) {
+.sd-1-5-3-pagination--simple ul li:nth-child(2) {
 
         border-bottom-style: solid;
       }
 
-.sd-1-5-2-pagination--simple ul li:nth-last-child(2) {
+.sd-1-5-3-pagination--simple ul li:nth-last-child(2) {
       border-bottom-width: 2px;
       border-bottom-color: transparent;
 }
 
-.sd-1-5-2-pagination--inverted ul li::after {
+.sd-1-5-3-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-5-2-pagination--inverted ul li:first-child:has(a:not([href])) a,
-      .sd-1-5-2-pagination--inverted ul li:last-child:has(a:not([href])) a,
-      .sd-1-5-2-pagination--inverted ul li:first-child:has(button[disabled]) button,
-      .sd-1-5-2-pagination--inverted ul li:last-child:has(button[disabled]) button {
+.sd-1-5-3-pagination--inverted ul li:first-child:has(a:not([href])) a,
+      .sd-1-5-3-pagination--inverted ul li:last-child:has(a:not([href])) a,
+      .sd-1-5-3-pagination--inverted ul li:first-child:has(button[disabled]) button,
+      .sd-1-5-3-pagination--inverted ul li:last-child:has(button[disabled]) button {
       
       color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
 }
 
-.sd-1-5-2-pagination--inverted ul li:first-child:has(a:not([href])) a:hover:not([disabled]),
-      .sd-1-5-2-pagination--inverted ul li:last-child:has(a:not([href])) a:hover:not([disabled]),
-      .sd-1-5-2-pagination--inverted ul li:first-child:has(button[disabled]) button:hover:not([disabled]),
-      .sd-1-5-2-pagination--inverted ul li:last-child:has(button[disabled]) button:hover:not([disabled]) {
+.sd-1-5-3-pagination--inverted ul li:first-child:has(a:not([href])) a:hover:not([disabled]),
+      .sd-1-5-3-pagination--inverted ul li:last-child:has(a:not([href])) a:hover:not([disabled]),
+      .sd-1-5-3-pagination--inverted ul li:first-child:has(button[disabled]) button:hover:not([disabled]),
+      .sd-1-5-3-pagination--inverted ul li:last-child:has(button[disabled]) button: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-2-pagination--inverted ul li a,
-      .sd-1-5-2-pagination--inverted ul li a[aria-current],
-      .sd-1-5-2-pagination--inverted ul li button,
-      .sd-1-5-2-pagination--inverted ul li button[aria-current] {
+.sd-1-5-3-pagination--inverted ul li a,
+      .sd-1-5-3-pagination--inverted ul li a[aria-current],
+      .sd-1-5-3-pagination--inverted ul li button,
+      .sd-1-5-3-pagination--inverted ul li button[aria-current] {
       
       color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
-.sd-1-5-2-pagination--inverted ul li a:hover:not([disabled]),
-      .sd-1-5-2-pagination--inverted ul li a[aria-current]:hover:not([disabled]),
-      .sd-1-5-2-pagination--inverted ul li button:hover:not([disabled]),
-      .sd-1-5-2-pagination--inverted ul li button[aria-current]:hover:not([disabled]) {
+.sd-1-5-3-pagination--inverted ul li a:hover:not([disabled]),
+      .sd-1-5-3-pagination--inverted ul li a[aria-current]:hover:not([disabled]),
+      .sd-1-5-3-pagination--inverted ul li button:hover:not([disabled]),
+      .sd-1-5-3-pagination--inverted ul li button[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-5-2-pagination--inverted ul li a:active:not([disabled]),
-      .sd-1-5-2-pagination--inverted ul li a[aria-current]:active:not([disabled]),
-      .sd-1-5-2-pagination--inverted ul li button:active:not([disabled]),
-      .sd-1-5-2-pagination--inverted ul li button[aria-current]:active:not([disabled]) {
+.sd-1-5-3-pagination--inverted ul li a:active:not([disabled]),
+      .sd-1-5-3-pagination--inverted ul li a[aria-current]:active:not([disabled]),
+      .sd-1-5-3-pagination--inverted ul li button:active:not([disabled]),
+      .sd-1-5-3-pagination--inverted ul li button[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-5-2-pagination--inverted ul li a:focus-visible, .sd-1-5-2-pagination--inverted ul li a[aria-current]:focus-visible, .sd-1-5-2-pagination--inverted ul li button:focus-visible, .sd-1-5-2-pagination--inverted ul li button[aria-current]:focus-visible {
+.sd-1-5-3-pagination--inverted ul li a:focus-visible, .sd-1-5-3-pagination--inverted ul li a[aria-current]:focus-visible, .sd-1-5-3-pagination--inverted ul li button:focus-visible, .sd-1-5-3-pagination--inverted ul li button[aria-current]:focus-visible {
       outline-color: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */;
 }
 
-.sd-1-5-2-pagination--inverted.sd-1-5-2-pagination--simple ul li {
+.sd-1-5-3-pagination--inverted.sd-1-5-3-pagination--simple ul li {
       
       color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
-.sd-1-5-2-pagination--inverted.sd-1-5-2-pagination--simple ul li::after {
+.sd-1-5-3-pagination--inverted.sd-1-5-3-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 */;

package/dist-versioned/modules/paragraph.css

@@ -1,28 +1,28 @@
 /**
  * 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-5-2-paragraph
+ * @name sd-1-5-3-paragraph
  * @status stable
  * @since 1.7
- * @variant { sm } sd-1-5-2-paragraph--size-... The paragraph's font size.
- * @boolean sd-1-5-2-paragraph--inverted Inverts the paragraph text.
+ * @variant { sm } sd-1-5-3-paragraph--size-... The paragraph's font size.
+ * @boolean sd-1-5-3-paragraph--inverted Inverts the paragraph text.
  */
-.sd-1-5-2-paragraph,
-.sd-1-5-2-prose p {
+.sd-1-5-3-paragraph,
+.sd-1-5-3-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 */;
     
     color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
 }
-.sd-1-5-2-paragraph--size-sm, .sd-1-5-2-prose p--size-sm {
+.sd-1-5-3-paragraph--size-sm, .sd-1-5-3-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 */;
     
     color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
 }
-.sd-1-5-2-paragraph--inverted,
-.sd-1-5-2-prose--inverted p {
+.sd-1-5-3-paragraph--inverted,
+.sd-1-5-3-prose--inverted p {
     
     color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */
 }