@solid-design-system/styles 1.1.0 → 1.3.0

package/dist/solid-styles.css

@@ -346,19 +346,65 @@ Used for divider, teaser, container, ...  */;
   color: rgb(var(--sd-color-neutral-700, 104 104 104) / var(--tw-text-opacity, 1)) /* Additional text color */;
 }
 
+.sd-footnotes :target {
+  
+  background-color: rgb(var(--sd-color-neutral-200, 233 233 233) / var(--tw-bg-opacity, 1)) /* Used for hover interaction  */;
+}
+
+.sd-footnotes:is(ol) {
+  padding-inline-start: var(--sd-spacing-8, 2rem) /* 32px */;
+}
+
 .sd-footnotes:is(ol) li {
       counter-increment: list-item;
-      display: flex;
-      gap: var(--sd-spacing-2, 0.5rem) /* 8px */;
+      position: relative;
+      list-style-type: none;
     }
 
-.sd-footnotes:is(ol) li::before {
-  width: var(--sd-spacing-5, 1.25rem) /* 20px */;
+.sd-footnotes:is(ol) li .sd-footnotes--marker::before, .sd-footnotes:is(ol) li:has(.sd-footnotes--marker:nth-of-type(2))::before, .sd-footnotes:is(ol) li:not(:has(.sd-footnotes--marker))::before {
+  position: absolute;
+  left: calc(var(--sd-spacing-8, 2rem) /* 32px */ * -1);
   flex-shrink: 0;
+  font-weight: 700;
   line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
-        content: counter(list-item);
-        padding-top: 1px;
-        font-size: 10px;
+          content: '[ ' counter(list-item) ' ]';
+          padding-top: 1px;
+          font-size: 10px;
+}
+
+.sd-footnotes:is(ol) li .sd-footnotes--marker::after, .sd-footnotes:is(ol) li:has(.sd-footnotes--marker:nth-of-type(2))::after, .sd-footnotes:is(ol) li:not(:has(.sd-footnotes--marker))::after {
+          content: none;
+        }
+
+.sd-footnotes:is(ol) li .sd-footnotes--marker .sd-footnotes--marker, .sd-footnotes:is(ol) li:has(.sd-footnotes--marker:nth-of-type(2)) .sd-footnotes--marker, .sd-footnotes:is(ol) li:not(:has(.sd-footnotes--marker)) .sd-footnotes--marker {
+  display: inline-block;
+          counter-increment: footnotes-multiple;
+}
+
+.sd-footnotes:is(ol) li .sd-footnotes--marker .sd-footnotes--marker::before, .sd-footnotes:is(ol) li:has(.sd-footnotes--marker:nth-of-type(2)) .sd-footnotes--marker::before, .sd-footnotes:is(ol) li:not(:has(.sd-footnotes--marker)) .sd-footnotes--marker::before {
+  position: relative;
+  left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+  vertical-align: super;
+  font-weight: 700;
+  line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
+            content: counter(footnotes-multiple, lower-alpha);
+}
+
+.sd-footnotes:is(ol) li .sd-footnotes--marker {
+  bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+  display: block;
+}
+
+.sd-footnotes:is(ol) li .sd-footnotes--marker:focus-visible {
+  outline-width: 0px;
+}
+
+.sd-footnotes:is(ol) li .sd-footnotes--marker:focus-visible::before {
+  border-radius: var(--sd-border-radius-default, 0.25rem) /* 4px Default radius for buttons */;
+  outline-style: solid;
+  outline-width: 2px;
+  outline-offset: 2px;
+  outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
 }
 
 .sd-footnotes:is(ul) {
@@ -371,6 +417,67 @@ Used for divider, teaser, container, ...  */;
 Used for inverted pressed interaction text link */;
 }
 
+.sd-footnotes--inverted :target {
+  
+  background-color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-bg-opacity, 1)) /* Used for pressed interaction */;
+}
+
+.sd-footnotes--inverted .sd-footnotes--marker::before {
+  
+  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
+  outline-color: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */ !important;
+}
+
+.sd-footnotes--inverted:is(.sd-footnotes--marker) {
+  --tw-text-opacity: 1 !important;
+  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */ !important;
+  outline-color: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */ !important;
+}
+
+.sd-footnotes--inverted:is(.sd-footnotes--marker):target {
+  
+  background-color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-bg-opacity, 1)) /* Used for pressed interaction */;
+}
+
+.sd-footnotes--marker {
+  position: relative;
+  bottom: var(--sd-spacing-2, 0.5rem) /* 8px */;
+  display: inline-block;
+  white-space: nowrap;
+  font-weight: 700;
+  text-decoration-line: none !important;
+    font-size: x-small;
+}
+
+.sd-footnotes--marker:target {
+  
+  background-color: rgb(var(--sd-color-neutral-200, 233 233 233) / var(--tw-bg-opacity, 1)) /* Used for hover interaction  */;
+}
+
+.sd-footnotes--marker::before {
+      content: '[ ';
+      display: inline-block;
+    }
+
+.sd-footnotes--marker::after {
+      content: ' ]';
+      display: inline-block;
+    }
+
+.sd-footnotes--marker:link,
+    .sd-footnotes--marker:visited {
+  
+  color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
+}
+
+.sd-footnotes--marker:focus-visible {
+  border-radius: var(--sd-border-radius-default, 0.25rem) /* 4px Default radius for buttons */;
+  outline-style: solid;
+  outline-width: 2px;
+  outline-offset: 2px;
+  outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
+}
+
 /**
  * Hidden links can be used to show links only for keyboard users.
  * @name sd-hidden-links
@@ -492,6 +599,348 @@ Used for inverted pressed interaction text link */;
   margin-right: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
 }
 
+/**
+ * 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-pagination
+ * @status stable
+ * @since 1.3
+ * @variant { simple } sd-pagination--... The pagination format.
+ * @boolean sd-pagination--inverted Inverts the pagination style.
+ */
+
+.sd-pagination > :not(ul) {
+  position: absolute;
+  height: var(--sd-spacing-0-25, 1px) /* 1px */;
+  width: var(--sd-spacing-0-25, 1px) /* 1px */;
+  overflow: hidden;
+}
+
+.sd-pagination ul {
+  display: flex;
+  align-items: center;
+  gap: var(--sd-spacing-2, 0.5rem) /* 8px */;
+}
+
+.sd-pagination ul li a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+  color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
+  transition-property: color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.sd-pagination ul li a: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]) {
+  
+  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 {
+  outline-style: solid;
+  outline-width: 2px;
+  outline-offset: 2px;
+  outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
+}
+
+/* Previous and Next */
+
+.sd-pagination ul li:first-child,
+    .sd-pagination ul li:last-child {
+  height: var(--sd-spacing-12, 3rem) /* 48px */;
+  width: var(--sd-spacing-12, 3rem) /* 48px */;
+}
+
+.sd-pagination ul li:first-child a, .sd-pagination ul li:last-child a {
+  height: 100%;
+  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 {
+  display: flex;
+  height: var(--sd-spacing-8, 2rem) /* 32px */;
+  width: var(--sd-spacing-8, 2rem) /* 32px */;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.sd-pagination ul li:not(:has(a sd-icon)) 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] {
+  --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] {
+  
+  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]) {
+  
+  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-pagination ul li:has(a:not([href]) sd-icon) 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]) {
+  
+  color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
+}
+
+/* Numbers */
+
+/* Number which is not current */
+
+.sd-pagination:not(.sd-pagination--simple) ul li:not(:has(a sd-icon)):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 {
+  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) {
+  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 {
+  --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 {
+  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 {
+  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 {
+  display: flex !important;
+}
+
+/* When one of the first 4 pages is selected */
+
+/* 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) {
+  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 {
+  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 {
+  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 {
+  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 {
+  --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]) {
+  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 {
+  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 {
+  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)) {
+  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 {
+  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 {
+  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]) {
+  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 {
+  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 {
+  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]) {
+  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 {
+  --tw-content: '...';
+  content: var(--tw-content);
+}
+
+/* When it only has 5 numbers + 2 prev & next buttons */
+
+.sd-pagination:not(.sd-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li {
+  pointer-events: auto;
+  position: relative;
+}
+
+.sd-pagination:not(.sd-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li::after {
+  content: var(--tw-content);
+  display: none;
+}
+
+.sd-pagination:not(.sd-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li a {
+  display: flex;
+}
+
+.sd-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 */;
+  border-bottom-width: 2px;
+  --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--simple ul li:nth-child(2)::after {
+  position: absolute;
+  right: -18px;
+  --tw-scale-y: 1.5;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  --tw-content: '/';
+  content: var(--tw-content);
+}
+
+.sd-pagination--simple ul li:nth-last-child(2) {
+  border-bottom-width: 2px;
+  border-bottom-color: transparent;
+}
+
+.sd-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-pagination--inverted ul li:has(a:not([href]) sd-icon) 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]) {
+  
+  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] {
+  
+  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]) {
+  
+  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]) {
+  
+  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 {
+  outline-color: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */;
+}
+
+.sd-pagination--inverted.sd-pagination--simple ul li {
+  
+  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
+}
+
+.sd-pagination--inverted.sd-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 */;
+}
+
 /**
  * Description of the style.
  * @name sd-status-badge

package/dist-versioned/modules/chip.css

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