@solid-design-system/styles 1.4.1 → 1.5.1

package/dist/solid-styles.css

@@ -630,7 +630,19 @@ Used for inverted pressed interaction text link */;
   gap: var(--sd-spacing-2, 0.5rem) /* 8px */;
 }
 
-.sd-pagination ul li a {
+.sd-pagination ul li button {
+      all: unset;
+      border-width: 2px;
+      border-style: solid;
+      border-color: transparent;
+    }
+
+.sd-pagination ul li button:hover:not([disabled]) {
+  cursor: pointer;
+}
+
+.sd-pagination ul li a,
+    .sd-pagination ul li button {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -642,17 +654,19 @@ Used for inverted pressed interaction text link */;
   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;
   outline-width: 2px;
   outline-offset: 2px;
@@ -668,7 +682,10 @@ Used for inverted pressed interaction text link */;
   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%;
   width: 100%;
 }
@@ -684,25 +701,28 @@ Used for inverted pressed interaction text link */;
   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%;
   width: 100%;
   border-bottom-width: 2px;
   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;
   border-bottom-color: rgb(var(--sd-color-accent, 45 157 0) / var(--tw-border-opacity, 1)) /* Used to highlight active/selected elements
  */;
 }
 
-.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]) {
   
   color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
 }
@@ -710,14 +730,18 @@ Used for inverted pressed interaction text link */;
 /* 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;
   
   color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
 }
 
 .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]) {
   
   color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
 }
@@ -726,46 +750,68 @@ Used for inverted pressed interaction text link */;
 
 /* 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: '...';
   content: var(--tw-content);
 }
 
 .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;
   position: relative !important;
 }
 
 .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;
 }
 
@@ -773,88 +819,110 @@ Used for inverted pressed interaction text link */;
 
 /* 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: '...';
   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(: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: '...';
   content: var(--tw-content);
 }
@@ -871,7 +939,8 @@ Used for inverted pressed interaction text link */;
   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;
 }
 
@@ -894,6 +963,11 @@ Used for inverted pressed interaction text link */;
   content: var(--tw-content);
 }
 
+.sd-pagination--simple ul li:nth-child(2) {
+
+        border-bottom-style: solid;
+      }
+
 .sd-pagination--simple ul li:nth-last-child(2) {
   border-bottom-width: 2px;
   border-bottom-color: transparent;
@@ -906,37 +980,47 @@ Used for inverted pressed interaction text link */;
 }
 
 .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 {
   
   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: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]) {
   
   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 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] {
   
   color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
 .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]) {
   
   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-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]) {
   
   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-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 */;
 }
 

package/dist-versioned/modules/chip.css

@@ -1,12 +1,12 @@
 /**
  * Generates basic styles for chip elements.
- * @name sd-1-4-1-chip
+ * @name sd-1-5-1-chip
  * @status stable
  * @since 1.30.0
- * @variant { primary-300 | primary-500 | white } sd-1-4-1-chip--...
+ * @variant { primary-300 | primary-500 | white } sd-1-5-1-chip--...
  */
 
-.sd-1-4-1-chip {
+.sd-1-5-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-4-1-chip--primary-500 {
+.sd-1-5-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-4-1-chip--primary-300 {
+.sd-1-5-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-4-1-chip--white {
+.sd-1-5-1-chip--white {
 
     
 

package/dist-versioned/modules/container.css

@@ -1,14 +1,14 @@
 /**
  * Container lets users delimit and highlight a piece of content. The user has no interaction with it, it is merely a visual element that influences the flow of the page.
- * @name sd-1-4-1-container
+ * @name sd-1-5-1-container
  * @status stable
  * @since 1.30.0
- * @variant { primary-100 | primary | border-neutral-400 | white } sd-1-4-1-container--variant-... Defines the background color and border of sd-1-4-1-container.
- * @variant { sm } sd-1-4-1-container--padding-... Defines the padding of sd-1-4-1-container. This makes it adaptable to both small and large screens.
- * @variant { top | right | bottom | left } sd-1-4-1-container--triangle-... Defines an optional triangle cut-out for sd-1-4-1-container. This allows for an indentation resembling an arrow on any side of the container. CSS Property `triangle-background` defines the background color of the cut-out.
+ * @variant { primary-100 | primary | border-neutral-400 | white } sd-1-5-1-container--variant-... Defines the background color and border of sd-1-5-1-container.
+ * @variant { sm } sd-1-5-1-container--padding-... Defines the padding of sd-1-5-1-container. This makes it adaptable to both small and large screens.
+ * @variant { top | right | bottom | left } sd-1-5-1-container--triangle-... Defines an optional triangle cut-out for sd-1-5-1-container. This allows for an indentation resembling an arrow on any side of the container. CSS Property `triangle-background` defines the background color of the cut-out.
  */
 
-.sd-1-4-1-container {
+.sd-1-5-1-container {
   position: relative;
   
   background-color: rgb(var(--sd-color-neutral-100, 246 246 246) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */;
@@ -18,18 +18,18 @@
   padding-bottom: var(--sd-spacing-8, 2rem) /* 32px */;
 }
 
-.sd-1-4-1-container--variant-primary-100 {
+.sd-1-5-1-container--variant-primary-100 {
   
   background-color: rgb(var(--sd-color-primary-100, 236 240 249) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */;
 }
 
-.sd-1-4-1-container--variant-primary {
+.sd-1-5-1-container--variant-primary {
   
   background-color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-bg-opacity, 1)) /* Inverted background color (light mode)
 Used for button */;
 }
 
-.sd-1-4-1-container--variant-border-neutral-400 {
+.sd-1-5-1-container--variant-border-neutral-400 {
   border-style: solid;
   --tw-border-opacity: 1;
   border-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color. 
@@ -39,27 +39,27 @@ Used for divider, teaser, container, ...  */;
     border-width: 1px;
 }
 
-.sd-1-4-1-container--variant-white {
+.sd-1-5-1-container--variant-white {
   
   background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode) 
Used for inverted button */;
 }
 
-.sd-1-4-1-container--padding-sm {
+.sd-1-5-1-container--padding-sm {
   padding-left: var(--sd-spacing-6, 1.5rem) /* 24px */;
   padding-right: var(--sd-spacing-6, 1.5rem) /* 24px */;
   padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
   padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
 }
 
-.sd-1-4-1-container {
+.sd-1-5-1-container {
 
   --triangle-background: white;
 }
 
-.sd-1-4-1-container--triangle-top::before,
-  .sd-1-4-1-container--triangle-right::before,
-  .sd-1-4-1-container--triangle-bottom::before,
-  .sd-1-4-1-container--triangle-left::before {
+.sd-1-5-1-container--triangle-top::before,
+  .sd-1-5-1-container--triangle-right::before,
+  .sd-1-5-1-container--triangle-bottom::before,
+  .sd-1-5-1-container--triangle-left::before {
   position: absolute;
   display: block;
   border-style: solid;
@@ -68,38 +68,38 @@ Used for divider, teaser, container, ...  */;
     content: '';
 }
 
-.sd-1-4-1-container--triangle-top::before {
+.sd-1-5-1-container--triangle-top::before {
   top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
     left: calc(50% - 14px);
     border-top-color: var(--triangle-background);
 }
 
-.sd-1-4-1-container--triangle-right::before {
+.sd-1-5-1-container--triangle-right::before {
   right: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
     top: calc(50% - 14px);
     border-right-color: var(--triangle-background);
 }
 
-.sd-1-4-1-container--triangle-bottom::before {
+.sd-1-5-1-container--triangle-bottom::before {
   bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
     left: calc(50% - 14px);
     border-bottom-color: var(--triangle-background);
 }
 
-.sd-1-4-1-container--triangle-left::before {
+.sd-1-5-1-container--triangle-left::before {
   left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
     top: calc(50% - 14px);
     border-left-color: var(--triangle-background);
 }
 
-.sd-1-4-1-container--triangle-top-border::after,
-    .sd-1-4-1-container--triangle-top-border::before,
-    .sd-1-4-1-container--triangle-right-border::after,
-    .sd-1-4-1-container--triangle-right-border::before,
-    .sd-1-4-1-container--triangle-bottom-border::after,
-    .sd-1-4-1-container--triangle-bottom-border::before,
-    .sd-1-4-1-container--triangle-left-border::after,
-    .sd-1-4-1-container--triangle-left-border::before {
+.sd-1-5-1-container--triangle-top-border::after,
+    .sd-1-5-1-container--triangle-top-border::before,
+    .sd-1-5-1-container--triangle-right-border::after,
+    .sd-1-5-1-container--triangle-right-border::before,
+    .sd-1-5-1-container--triangle-bottom-border::after,
+    .sd-1-5-1-container--triangle-bottom-border::before,
+    .sd-1-5-1-container--triangle-left-border::after,
+    .sd-1-5-1-container--triangle-left-border::before {
   position: absolute;
   display: block;
   border-style: solid;
@@ -107,78 +107,78 @@ Used for divider, teaser, container, ...  */;
       content: '';
 }
 
-.sd-1-4-1-container--triangle-top-border::after, .sd-1-4-1-container--triangle-right-border::after, .sd-1-4-1-container--triangle-bottom-border::after, .sd-1-4-1-container--triangle-left-border::after {
+.sd-1-5-1-container--triangle-top-border::after, .sd-1-5-1-container--triangle-right-border::after, .sd-1-5-1-container--triangle-bottom-border::after, .sd-1-5-1-container--triangle-left-border::after {
       border-width: 14px;
     }
 
-.sd-1-4-1-container--triangle-top-border::before, .sd-1-4-1-container--triangle-right-border::before, .sd-1-4-1-container--triangle-bottom-border::before, .sd-1-4-1-container--triangle-left-border::before {
+.sd-1-5-1-container--triangle-top-border::before, .sd-1-5-1-container--triangle-right-border::before, .sd-1-5-1-container--triangle-bottom-border::before, .sd-1-5-1-container--triangle-left-border::before {
       border-width: 15px;
     }
 
-.sd-1-4-1-container--triangle-top-border::after,
-    .sd-1-4-1-container--triangle-top-border::before {
+.sd-1-5-1-container--triangle-top-border::after,
+    .sd-1-5-1-container--triangle-top-border::before {
       top: -1px;
     }
 
-.sd-1-4-1-container--triangle-top-border::before {
+.sd-1-5-1-container--triangle-top-border::before {
   --tw-border-opacity: 1;
   border-top-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color. 
 Used for divider, teaser, container, ...  */;
       left: calc(50% - 15px);
 }
 
-.sd-1-4-1-container--triangle-top-border::after {
+.sd-1-5-1-container--triangle-top-border::after {
       left: calc(50% - 14px);
       border-top-color: var(--triangle-background);
     }
 
-.sd-1-4-1-container--triangle-right-border::after,
-    .sd-1-4-1-container--triangle-right-border::before {
+.sd-1-5-1-container--triangle-right-border::after,
+    .sd-1-5-1-container--triangle-right-border::before {
       right: -1px;
     }
 
-.sd-1-4-1-container--triangle-right-border::before {
+.sd-1-5-1-container--triangle-right-border::before {
   --tw-border-opacity: 1;
   border-right-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color. 
 Used for divider, teaser, container, ...  */;
       top: calc(50% - 15px);
 }
 
-.sd-1-4-1-container--triangle-right-border::after {
+.sd-1-5-1-container--triangle-right-border::after {
       top: calc(50% - 14px);
       border-right-color: var(--triangle-background);
     }
 
-.sd-1-4-1-container--triangle-bottom-border::after,
-    .sd-1-4-1-container--triangle-bottom-border::before {
+.sd-1-5-1-container--triangle-bottom-border::after,
+    .sd-1-5-1-container--triangle-bottom-border::before {
       bottom: -1px;
     }
 
-.sd-1-4-1-container--triangle-bottom-border::before {
+.sd-1-5-1-container--triangle-bottom-border::before {
   --tw-border-opacity: 1;
   border-bottom-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color. 
 Used for divider, teaser, container, ...  */;
       left: calc(50% - 15px);
 }
 
-.sd-1-4-1-container--triangle-bottom-border::after {
+.sd-1-5-1-container--triangle-bottom-border::after {
       left: calc(50% - 14px);
       border-bottom-color: var(--triangle-background);
     }
 
-.sd-1-4-1-container--triangle-left-border::after,
-    .sd-1-4-1-container--triangle-left-border::before {
+.sd-1-5-1-container--triangle-left-border::after,
+    .sd-1-5-1-container--triangle-left-border::before {
       left: -1px;
     }
 
-.sd-1-4-1-container--triangle-left-border::before {
+.sd-1-5-1-container--triangle-left-border::before {
   --tw-border-opacity: 1;
   border-left-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color. 
 Used for divider, teaser, container, ...  */;
       top: calc(50% - 15px);
 }
 
-.sd-1-4-1-container--triangle-left-border::after {
+.sd-1-5-1-container--triangle-left-border::after {
       top: calc(50% - 14px);
       border-left-color: var(--triangle-background);
     }