@solid-design-system/styles 1.3.2 → 1.4.1

package/dist/modules/pagination.css

@@ -39,6 +39,8 @@
 
     color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
 
+    text-decoration-line: none;
+
     transition-property: color;
 
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -78,7 +80,9 @@
 
     height: var(--sd-spacing-12, 3rem) /* 48px */;
 
-    width: var(--sd-spacing-12, 3rem) /* 48px */
+    width: var(--sd-spacing-12, 3rem) /* 48px */;
+
+    font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */
 }
 
 .sd-pagination ul li:first-child a, .sd-pagination ul li:last-child a {
@@ -88,13 +92,6 @@
     width: 100%
 }
 
-.sd-pagination ul li:first-child sd-icon, .sd-pagination ul li:last-child sd-icon {
-
-    height: var(--sd-spacing-6, 1.5rem) /* 24px */;
-
-    width: var(--sd-spacing-6, 1.5rem) /* 24px */
-}
-
 /* Numbers */
 
 .sd-pagination ul li {
@@ -112,7 +109,7 @@
     text-align: center
 }
 
-.sd-pagination ul li:not(:has(a sd-icon)) a {
+.sd-pagination ul li:not(:first-child):not(:last-child) a {
 
     height: 100%;
 
@@ -123,7 +120,7 @@
     border-bottom-color: transparent
 }
 
-.sd-pagination ul li:not(:has(a sd-icon)) a[aria-current] {
+.sd-pagination ul li:not(:first-child):not(:last-child) a[aria-current] {
 
     --tw-border-opacity: 1;
 
@@ -147,7 +144,8 @@
 
 /* Previous and next arrow when it has no href */
 
-.sd-pagination ul li:has(a:not([href]) sd-icon) a {
+.sd-pagination ul li:first-child:has(a:not([href])) a,
+    .sd-pagination ul li:last-child:has(a:not([href])) a {
 
     cursor: not-allowed;
 
@@ -156,7 +154,8 @@
     color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */
 }
 
-.sd-pagination ul li:has(a:not([href]) sd-icon) a:hover:not([disabled]) {
+.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]) {
 
     
 
@@ -167,57 +166,57 @@
 
 /* Number which is not current */
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):not(:has(a[aria-current])) {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current])) {
 
     pointer-events: none;
 
     position: absolute
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):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])) a {
 
     display: none
 }
 
 /* Apply ellipsis to (n + 2 && n - 1) */
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):has(+ li + li a[aria-current]),
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):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]),
+        .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current]) + li + li:not(:last-child) {
 
     pointer-events: auto !important;
 
     position: relative !important
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):has(+ li + li a[aria-current])::after,
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):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])::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 {
 
     --tw-content: '...';
 
     content: var(--tw-content)
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(2), 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(2), 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):has(+ li a[aria-current]), 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):has(a[aria-current]) + li {
+.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 {
 
     pointer-events: auto !important;
 
     position: relative !important
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(2)::after, 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(2)::after, 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):has(+ li a[aria-current])::after, 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):has(a[aria-current]) + li::after {
+.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 {
 
     content: var(--tw-content) !important;
 
     display: none !important
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(2) a, .sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(2) a, .sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):has(+ li a[aria-current]) a, .sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):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-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 {
 
     display: flex !important
 }
@@ -226,35 +225,35 @@
 
 /* Show until the 5th page (forward) */
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):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]) ~ :nth-child(-n + 6) {
 
     pointer-events: auto;
 
     position: relative
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):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]) ~ :nth-child(-n + 6)::after {
 
     content: var(--tw-content);
 
     display: none
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):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]) ~ :nth-child(-n + 6) a {
 
     display: flex
 }
 
 /* Show ellipsis on the 6th */
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):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]) ~ :nth-child(6):not(:last-child) + li {
 
     pointer-events: none;
 
     position: relative
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(-n + 6):has(a[aria-current]) ~ :nth-child(6):not(:last-child) + li::after {
+.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 {
 
     --tw-content: '...';
 
@@ -263,77 +262,77 @@
 
 /* When one of the first 4 pages is selected, show until the 5th page (backward) */
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):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]) {
 
     pointer-events: auto;
 
     position: relative
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):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])::after {
 
     content: var(--tw-content);
 
     display: none
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):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]) a {
 
     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(:has(a sd-icon)):nth-last-child(-n + 5):has(a[aria-current]) ~ :nth-last-child(-n + 5):not(:has(a sd-icon)) {
+.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) {
 
     pointer-events: auto;
 
     position: relative
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(-n + 5):has(a[aria-current]) ~ :nth-last-child(-n + 5):not(:has(a sd-icon))::after {
+.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 {
 
     content: var(--tw-content);
 
     display: none
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(-n + 5):has(a[aria-current]) ~ :nth-last-child(-n + 5):not(:has(a sd-icon)) a {
+.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 {
 
     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(:has(a sd-icon)):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]) {
 
     pointer-events: auto;
 
     position: relative
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):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])::after {
 
     content: var(--tw-content);
 
     display: none
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):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]) a {
 
     display: flex
 }
 
 /* Show ellipsis on the 6th to last */
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):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]) {
 
     pointer-events: none;
 
     position: relative
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):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])::after {
 
     --tw-content: '...';
 
@@ -408,14 +407,16 @@
     color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */
 }
 
-.sd-pagination--inverted ul li:has(a:not([href]) sd-icon) a {
+.sd-pagination--inverted ul li:first-child:has(a:not([href])) a,
+      .sd-pagination--inverted ul li:last-child:has(a:not([href])) a {
 
     
 
     color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */
 }
 
-.sd-pagination--inverted ul li:has(a:not([href]) sd-icon) a:hover:not([disabled]) {
+.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]) {
 
     
 

package/dist/modules/prose.css

@@ -275,8 +275,12 @@
   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-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   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-prose a:hover:not([disabled]),

package/dist/solid-styles.css

@@ -636,6 +636,7 @@ Used for inverted pressed interaction text link */;
   justify-content: center;
   
   color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
+  text-decoration-line: none;
   transition-property: color;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
@@ -664,6 +665,7 @@ Used for inverted pressed interaction text link */;
     .sd-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-pagination ul li:first-child a, .sd-pagination ul li:last-child a {
@@ -671,11 +673,6 @@ Used for inverted pressed interaction text link */;
   width: 100%;
 }
 
-.sd-pagination ul li:first-child sd-icon, .sd-pagination ul li:last-child sd-icon {
-  height: var(--sd-spacing-6, 1.5rem) /* 24px */;
-  width: var(--sd-spacing-6, 1.5rem) /* 24px */;
-}
-
 /* Numbers */
 
 .sd-pagination ul li {
@@ -687,14 +684,14 @@ Used for inverted pressed interaction text link */;
   text-align: center;
 }
 
-.sd-pagination ul li:not(:has(a sd-icon)) a {
+.sd-pagination ul li:not(:first-child):not(:last-child) a {
   height: 100%;
   width: 100%;
   border-bottom-width: 2px;
   border-bottom-color: transparent;
 }
 
-.sd-pagination ul li:not(:has(a sd-icon)) a[aria-current] {
+.sd-pagination ul li:not(:first-child):not(:last-child) a[aria-current] {
   --tw-border-opacity: 1;
   border-bottom-color: rgb(var(--sd-color-accent, 45 157 0) / var(--tw-border-opacity, 1)) /* Used to highlight active/selected elements
  */;
@@ -712,13 +709,15 @@ Used for inverted pressed interaction text link */;
 
 /* Previous and next arrow when it has no href */
 
-.sd-pagination ul li:has(a:not([href]) sd-icon) a {
+.sd-pagination ul li:first-child:has(a:not([href])) a,
+    .sd-pagination ul li:last-child:has(a:not([href])) a {
   cursor: not-allowed;
   
   color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
 }
 
-.sd-pagination ul li:has(a:not([href]) sd-icon) a:hover:not([disabled]) {
+.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]) {
   
   color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
 }
@@ -727,46 +726,46 @@ Used for inverted pressed interaction text link */;
 
 /* Number which is not current */
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):not(:has(a[aria-current])) {
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current])) {
   pointer-events: none;
   position: absolute;
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):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])) a {
   display: none;
 }
 
 /* Apply ellipsis to (n + 2 && n - 1) */
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):has(+ li + li a[aria-current]),
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):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]),
+        .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current]) + li + li:not(:last-child) {
   pointer-events: auto !important;
   position: relative !important;
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):has(+ li + li a[aria-current])::after,
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):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])::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 {
   --tw-content: '...';
   content: var(--tw-content);
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(2), 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(2), 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):has(+ li a[aria-current]), 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):has(a[aria-current]) + li {
+.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 {
   pointer-events: auto !important;
   position: relative !important;
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(2)::after, 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(2)::after, 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):has(+ li a[aria-current])::after, 
-        .sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):has(a[aria-current]) + li::after {
+.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 {
   content: var(--tw-content) !important;
   display: none !important;
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(2) a, .sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(2) a, .sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):has(+ li a[aria-current]) a, .sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):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-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 {
   display: flex !important;
 }
 
@@ -774,88 +773,88 @@ Used for inverted pressed interaction text link */;
 
 /* Show until the 5th page (forward) */
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):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]) ~ :nth-child(-n + 6) {
   pointer-events: auto;
   position: relative;
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):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]) ~ :nth-child(-n + 6)::after {
   content: var(--tw-content);
   display: none;
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):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]) ~ :nth-child(-n + 6) a {
   display: flex;
 }
 
 /* Show ellipsis on the 6th */
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):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]) ~ :nth-child(6):not(:last-child) + li {
   pointer-events: none;
   position: relative;
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(-n + 6):has(a[aria-current]) ~ :nth-child(6):not(:last-child) + li::after {
+.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 {
   --tw-content: '...';
   content: var(--tw-content);
 }
 
 /* When one of the first 4 pages is selected, show until the 5th page (backward) */
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):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]) {
   pointer-events: auto;
   position: relative;
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):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])::after {
   content: var(--tw-content);
   display: none;
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):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]) a {
   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(:has(a sd-icon)):nth-last-child(-n + 5):has(a[aria-current]) ~ :nth-last-child(-n + 5):not(:has(a sd-icon)) {
+.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) {
   pointer-events: auto;
   position: relative;
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(-n + 5):has(a[aria-current]) ~ :nth-last-child(-n + 5):not(:has(a sd-icon))::after {
+.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 {
   content: var(--tw-content);
   display: none;
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(-n + 5):has(a[aria-current]) ~ :nth-last-child(-n + 5):not(:has(a sd-icon)) a {
+.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 {
   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(:has(a sd-icon)):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]) {
   pointer-events: auto;
   position: relative;
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):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])::after {
   content: var(--tw-content);
   display: none;
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):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]) a {
   display: flex;
 }
 
 /* Show ellipsis on the 6th to last */
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):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]) {
   pointer-events: none;
   position: relative;
 }
 
-.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):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])::after {
   --tw-content: '...';
   content: var(--tw-content);
 }
@@ -906,12 +905,14 @@ Used for inverted pressed interaction text link */;
   color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
-.sd-pagination--inverted ul li:has(a:not([href]) sd-icon) a {
+.sd-pagination--inverted ul li:first-child:has(a:not([href])) a,
+      .sd-pagination--inverted ul li:last-child:has(a:not([href])) a {
   
   color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
 }
 
-.sd-pagination--inverted ul li:has(a:not([href]) sd-icon) a:hover:not([disabled]) {
+.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]) {
   
   color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
 }
@@ -1273,8 +1274,12 @@ Used for inverted pressed interaction text link */;
   color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
   text-decoration-line: underline;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   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-prose a:hover:not([disabled]),

package/dist-versioned/modules/chip.css

@@ -1,12 +1,12 @@
 /**
  * Generates basic styles for chip elements.
- * @name sd-1-3-2-chip
+ * @name sd-1-4-1-chip
  * @status stable
  * @since 1.30.0
- * @variant { primary-300 | primary-500 | white } sd-1-3-2-chip--...
+ * @variant { primary-300 | primary-500 | white } sd-1-4-1-chip--...
  */
 
-.sd-1-3-2-chip {
+.sd-1-4-1-chip {
 
     display: inline-flex;
 
@@ -35,7 +35,7 @@
     color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
 }
 
-.sd-1-3-2-chip--primary-500 {
+.sd-1-4-1-chip--primary-500 {
 
     
 
@@ -46,14 +46,14 @@
     color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */
 }
 
-.sd-1-3-2-chip--primary-300 {
+.sd-1-4-1-chip--primary-300 {
 
     
 
     background-color: rgb(var(--sd-color-primary-300, 200 213 231) / var(--tw-bg-opacity, 1)) /* Used for chip background */
 }
 
-.sd-1-3-2-chip--white {
+.sd-1-4-1-chip--white {