@solid-design-system/styles 1.4.1 → 1.5.0

package/dist/modules/pagination.css

@@ -27,7 +27,8 @@
     gap: var(--sd-spacing-2, 0.5rem) /* 8px */
 }
 
-.sd-pagination ul li a {
+.sd-pagination ul li a,
+    .sd-pagination ul li button {
 
     display: flex;
 
@@ -48,21 +49,23 @@
     transition-duration: 150ms
 }
 
-.sd-pagination ul li a:hover:not([disabled]) {
+.sd-pagination ul li a:hover:not([disabled]),
+    .sd-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-pagination ul li a:active:not([disabled]) {
+.sd-pagination ul li a:active:not([disabled]),
+    .sd-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-pagination ul li a:focus-visible {
+.sd-pagination ul li a:focus-visible, .sd-pagination ul li button:focus-visible {
 
     outline-style: solid;
 
@@ -85,7 +88,10 @@
     font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */
 }
 
-.sd-pagination ul li:first-child a, .sd-pagination ul li:last-child a {
+.sd-pagination ul li:first-child a,
+      .sd-pagination ul li:first-child button,
+      .sd-pagination ul li:last-child a,
+      .sd-pagination ul li:last-child button {
 
     height: 100%;
 
@@ -109,7 +115,8 @@
     text-align: center
 }
 
-.sd-pagination ul li:not(:first-child):not(:last-child) a {
+.sd-pagination ul li:not(:first-child):not(:last-child) a,
+        .sd-pagination ul li:not(:first-child):not(:last-child) button {
 
     height: 100%;
 
@@ -120,7 +127,7 @@
     border-bottom-color: transparent
 }
 
-.sd-pagination ul li:not(:first-child):not(:last-child) a[aria-current] {
+.sd-pagination ul li:not(:first-child):not(:last-child) a[aria-current], .sd-pagination ul li:not(:first-child):not(:last-child) button[aria-current] {
 
     --tw-border-opacity: 1;
 
@@ -128,14 +135,16 @@
  */
 }
 
-.sd-pagination ul li a[aria-current] {
+.sd-pagination ul li a[aria-current],
+      .sd-pagination ul li button[aria-current] {
 
     
 
     color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
 }
 
-.sd-pagination ul li a[aria-current]:hover:not([disabled]) {
+.sd-pagination ul li a[aria-current]:hover:not([disabled]),
+      .sd-pagination ul li button[aria-current]:hover:not([disabled]) {
 
     
 
@@ -145,7 +154,9 @@
 /* Previous and next arrow when it has no href */
 
 .sd-pagination ul li:first-child:has(a:not([href])) a,
-    .sd-pagination ul li:last-child:has(a:not([href])) a {
+    .sd-pagination ul li:last-child:has(a:not([href])) a,
+    .sd-pagination ul li:first-child:has(button[disabled]) button,
+    .sd-pagination ul li:last-child:has(button[disabled]) button {
 
     cursor: not-allowed;
 
@@ -155,7 +166,9 @@
 }
 
 .sd-pagination ul li:first-child:has(a:not([href])) a:hover:not([disabled]),
-    .sd-pagination ul li:last-child:has(a:not([href])) a:hover:not([disabled]) {
+    .sd-pagination ul li:last-child:has(a:not([href])) a:hover:not([disabled]),
+    .sd-pagination ul li:first-child:has(button[disabled]) button:hover:not([disabled]),
+    .sd-pagination ul li:last-child:has(button[disabled]) button:hover:not([disabled]) {
 
     
 
@@ -166,30 +179,29 @@
 
 /* Number which is not current */
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current])) {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) {
 
     pointer-events: none;
 
     position: absolute
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current])) a {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) a,
+          .sd-pagination:not(.sd-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-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li + li a[aria-current]),
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current]) + li + li:not(:last-child) {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li + li a[aria-current], + li + li button[aria-current]), .sd-pagination:not(.sd-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-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li + li a[aria-current])::after,
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current]) + li + li:not(:last-child)::after {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li + li a[aria-current], + li + li button[aria-current])::after, .sd-pagination:not(.sd-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: '...';
 
@@ -198,8 +210,12 @@
 
 .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2), 
         .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2), 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li a[aria-current]), 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current]) + li {
+        .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(
+          + li a[aria-current],
+          + li button[aria-current]), 
+        .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(
+          a[aria-current],
+          button[aria-current]) + li {
 
     pointer-events: auto !important;
 
@@ -208,15 +224,34 @@
 
 .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2)::after, 
         .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2)::after, 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li a[aria-current])::after, 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current]) + li::after {
+        .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(
+          + li a[aria-current],
+          + li button[aria-current])::after, 
+        .sd-pagination:not(.sd-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-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2) a, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2) a, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li a[aria-current]) a, .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current]) + li a {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2) a,
+          .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2) button,
+          .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2) a,
+          .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2) button,
+          .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(
+          + li a[aria-current],
+          + li button[aria-current]) a,
+          .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(
+          + li a[aria-current],
+          + li button[aria-current]) button,
+          .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(
+          a[aria-current],
+          button[aria-current]) + li a,
+          .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(
+          a[aria-current],
+          button[aria-current]) + li button {
 
     display: flex !important
 }
@@ -225,35 +260,36 @@
 
 /* Show until the 5th page (forward) */
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current]) ~ :nth-child(-n + 6) {
+.sd-pagination:not(.sd-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-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current]) ~ :nth-child(-n + 6)::after {
+.sd-pagination:not(.sd-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-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current]) ~ :nth-child(-n + 6) a {
+.sd-pagination:not(.sd-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-pagination:not(.sd-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-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current]) ~ :nth-child(6):not(:last-child) + li {
+.sd-pagination:not(.sd-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-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current]) ~ :nth-child(6):not(:last-child) + li::after {
+.sd-pagination:not(.sd-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: '...';
 
@@ -262,77 +298,98 @@
 
 /* When one of the first 4 pages is selected, show until the 5th page (backward) */
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current]) {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current]) {
 
     pointer-events: auto;
 
     position: relative
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current])::after {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current])::after {
 
     content: var(--tw-content);
 
     display: none
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current]) a {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current]) a,
+          .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :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-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child) {
+.sd-pagination:not(.sd-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-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child)::after {
+.sd-pagination:not(.sd-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-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child) a {
+.sd-pagination:not(.sd-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-pagination:not(.sd-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-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(~ :nth-last-child(-n + 5) a[aria-current]) {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
+            ~ :nth-last-child(-n + 5) a[aria-current],
+            ~ :nth-last-child(-n + 5) button[aria-current]
+          ) {
 
     pointer-events: auto;
 
     position: relative
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(~ :nth-last-child(-n + 5) a[aria-current])::after {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
+            ~ :nth-last-child(-n + 5) a[aria-current],
+            ~ :nth-last-child(-n + 5) button[aria-current]
+          )::after {
 
     content: var(--tw-content);
 
     display: none
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(~ :nth-last-child(-n + 5) a[aria-current]) a {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
+            ~ :nth-last-child(-n + 5) a[aria-current],
+            ~ :nth-last-child(-n + 5) button[aria-current]
+          ) a,
+          .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
+            ~ :nth-last-child(-n + 5) a[aria-current],
+            ~ :nth-last-child(-n + 5) button[aria-current]
+          ) button {
 
     display: flex
 }
 
 /* Show ellipsis on the 6th to last */
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has(~ :nth-last-child(-n + 5) a[aria-current]) {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has(
+            ~ :nth-last-child(-n + 5) a[aria-current],
+            ~ :nth-last-child(-n + 5) button[aria-current]
+          ) {
 
     pointer-events: none;
 
     position: relative
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has(~ :nth-last-child(-n + 5) a[aria-current])::after {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has(
+            ~ :nth-last-child(-n + 5) a[aria-current],
+            ~ :nth-last-child(-n + 5) button[aria-current]
+          )::after {
 
     --tw-content: '...';
 
@@ -355,7 +412,8 @@
     display: none
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li a {
+.sd-pagination:not(.sd-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li a,
+        .sd-pagination:not(.sd-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li button {
 
     display: flex
 }
@@ -408,7 +466,9 @@
 }
 
 .sd-pagination--inverted ul li:first-child:has(a:not([href])) a,
-      .sd-pagination--inverted ul li:last-child:has(a:not([href])) a {
+      .sd-pagination--inverted ul li:last-child:has(a:not([href])) a,
+      .sd-pagination--inverted ul li:first-child:has(button[disabled]) button,
+      .sd-pagination--inverted ul li:last-child:has(button[disabled]) button {
 
     
 
@@ -416,7 +476,9 @@
 }
 
 .sd-pagination--inverted ul li:first-child:has(a:not([href])) a:hover:not([disabled]),
-      .sd-pagination--inverted ul li:last-child:has(a:not([href])) a:hover:not([disabled]) {
+      .sd-pagination--inverted ul li:last-child:has(a:not([href])) a:hover:not([disabled]),
+      .sd-pagination--inverted ul li:first-child:has(button[disabled]) button:hover:not([disabled]),
+      .sd-pagination--inverted ul li:last-child:has(button[disabled]) button:hover:not([disabled]) {
 
     
 
@@ -424,7 +486,9 @@
 }
 
 .sd-pagination--inverted ul li a,
-      .sd-pagination--inverted ul li a[aria-current] {
+      .sd-pagination--inverted ul li a[aria-current],
+      .sd-pagination--inverted ul li button,
+      .sd-pagination--inverted ul li button[aria-current] {
 
     
 
@@ -432,7 +496,9 @@
 }
 
 .sd-pagination--inverted ul li a:hover:not([disabled]),
-      .sd-pagination--inverted ul li a[aria-current]:hover:not([disabled]) {
+      .sd-pagination--inverted ul li a[aria-current]:hover:not([disabled]),
+      .sd-pagination--inverted ul li button:hover:not([disabled]),
+      .sd-pagination--inverted ul li button[aria-current]:hover:not([disabled]) {
 
     
 
@@ -440,7 +506,9 @@
 }
 
 .sd-pagination--inverted ul li a:active:not([disabled]),
-      .sd-pagination--inverted ul li a[aria-current]:active:not([disabled]) {
+      .sd-pagination--inverted ul li a[aria-current]:active:not([disabled]),
+      .sd-pagination--inverted ul li button:active:not([disabled]),
+      .sd-pagination--inverted ul li button[aria-current]:active:not([disabled]) {
 
     
 
@@ -448,7 +516,7 @@
 Used for inverted pressed interaction text link */
 }
 
-.sd-pagination--inverted ul li a:focus-visible, .sd-pagination--inverted ul li a[aria-current]:focus-visible {
+.sd-pagination--inverted ul li a:focus-visible, .sd-pagination--inverted ul li a[aria-current]:focus-visible, .sd-pagination--inverted ul li button:focus-visible, .sd-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 */
 }