@solid-design-system/styles 1.2.0 → 1.3.1

package/dist-versioned/modules/copyright.css

@@ -1,63 +1,72 @@
 /**
  * Generates basic styles for copyright elements.
- * @name sd-1-2-0-copyright
+ * @name sd-1-3-1-copyright
  * @status stable
  * @since 2.5.0
- * @variant { vertical } sd-1-2-0-copyright--orientation-... The copyright's orientation.
- * @variant { black } sd-1-2-0-copyright--color-... The copyright's text color.
- * @boolean sd-1-2-0-copyright--... Removes the shadow.
- * @variant { top } sd-1-2-0-copyright--placement-... The copyright's placement.
+ * @variant { vertical } sd-1-3-1-copyright--orientation-... The copyright's orientation.
+ * @variant { black } sd-1-3-1-copyright--color-... The copyright's text color.
+ * @boolean sd-1-3-1-copyright--... Removes the shadow.
+ * @variant { top } sd-1-3-1-copyright--placement-... The copyright's placement.
  */
 
-.sd-1-2-0-copyright {
-    position: relative;
+.sd-1-3-1-copyright {
+  position:relative;
+  /* Bug fix for drop-shadow-sm */
+  --tw-blur: ;
+  --tw-brightness: ;
+  --tw-contrast: ;
+  --tw-grayscale: ;
+  --tw-hue-rotate: ;
+  --tw-invert: ;
+  --tw-saturate: ;
+  --tw-sepia: ;
 }
 
-.sd-1-2-0-copyright::after {
-    position: absolute;
-    bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-    left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-    display: block;
-    width: 100%;
-    padding-bottom: var(--sd-spacing-2, 0.5rem) /* 8px */;
-    padding-left: var(--sd-spacing-4, 1rem) /* 16px */;
-    font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
-    
-    color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
-    --tw-drop-shadow: drop-shadow(var(--sd-shadow-sm, 0.5px 0.5px 1.5px rgb(81 81 81)));
-    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+.sd-1-3-1-copyright::after {
+  position:absolute;
+  bottom:var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+  left:var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+  display:block;
+  width:100%;
+  padding-bottom:var(--sd-spacing-2, 0.5rem) /* 8px */;
+  padding-left:var(--sd-spacing-4, 1rem) /* 16px */;
+  font-size:var(--sd-font-size-sm, 0.875rem) /* 14px */;
+  --tw-text-opacity:1;
+  color:rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
+  --tw-drop-shadow:drop-shadow(var(--sd-shadow-sm, 0.5px 0.5px 1.5px rgb(81 81 81)));
+  filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
     content: var(--copyright);
 }
 
-.sd-1-2-0-copyright--orientation-vertical::after {
-    width: -moz-max-content;
-    width: max-content;
-    padding-top: var(--sd-spacing-2, 0.5rem) /* 8px */;
-    padding-bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-    padding-right: var(--sd-spacing-1, 0.25rem) /* 4px */;
-    padding-left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+.sd-1-3-1-copyright--orientation-vertical::after {
+  width:-moz-max-content;
+  width:max-content;
+  padding-top:var(--sd-spacing-2, 0.5rem) /* 8px */;
+  padding-bottom:var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+  padding-right:var(--sd-spacing-1, 0.25rem) /* 4px */;
+  padding-left:var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
         writing-mode: vertical-rl;
         text-orientation: sideways-right;
         transform: rotate(180deg);
 }
 
-.sd-1-2-0-copyright--color-black::after {
-    
-    color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
+.sd-1-3-1-copyright--color-black::after {
+  --tw-text-opacity:1;
+  color:rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
         filter: drop-shadow(0 0 transparent);
 }
 
-.sd-1-2-0-copyright--no-shadow::after {
+.sd-1-3-1-copyright--no-shadow::after {
       filter: drop-shadow(0 0 transparent);
     }
 
-.sd-1-2-0-copyright--placement-top::after {
-    position: absolute;
-    top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-    right: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
-    display: block;
-    max-height: -moz-fit-content;
-    max-height: fit-content;
-    padding-top: var(--sd-spacing-2, 0.5rem) /* 8px */;
-    padding-right: var(--sd-spacing-4, 1rem) /* 16px */;
+.sd-1-3-1-copyright--placement-top::after {
+  position:absolute;
+  top:var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+  right:var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+  display:block;
+  max-height:-moz-fit-content;
+  max-height:fit-content;
+  padding-top:var(--sd-spacing-2, 0.5rem) /* 8px */;
+  padding-right:var(--sd-spacing-4, 1rem) /* 16px */;
 }

package/dist-versioned/modules/display.css

@@ -1,13 +1,13 @@
 /**
  * Display provides larger text sizes that are not used as headlines. The different sizes allow for a more versatile styling of text elements. Display text should not be used as substitute for headlines.
- * @name sd-1-2-0-display
+ * @name sd-1-3-1-display
  * @status stable
  * @since 1.7
- * @variant { xl | 3xl } sd-1-2-0-display--size-... The display's size.
- * @boolean sd-1-2-0-display--inverted Inverts the display text.
+ * @variant { xl | 3xl } sd-1-3-1-display--size-... The display's size.
+ * @boolean sd-1-3-1-display--inverted Inverts the display text.
  */
 
-.sd-1-2-0-display {
+.sd-1-3-1-display {
 
     font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
 
@@ -22,13 +22,13 @@
 
 @media (min-width: 1024px) {
 
-    .sd-1-2-0-display {
+    .sd-1-3-1-display {
 
         font-size: var(--sd-font-size-4xl, 2.5rem) /* 40px */
     }
 }
 
-.sd-1-2-0-display--size-xl {
+.sd-1-3-1-display--size-xl {
 
     font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
 
@@ -41,7 +41,7 @@
     color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
 }
 
-.sd-1-2-0-display--size-3xl {
+.sd-1-3-1-display--size-3xl {
 
     font-size: var(--sd-font-size-2xl, 1.75rem) /* 28px */;
 
@@ -56,13 +56,13 @@
 
 @media (min-width: 1024px) {
 
-    .sd-1-2-0-display--size-3xl {
+    .sd-1-3-1-display--size-3xl {
 
         font-size: var(--sd-font-size-3xl, 2rem) /* 32px */
     }
 }
 
-.sd-1-2-0-display--inverted {
+.sd-1-3-1-display--inverted {
 
     
 

package/dist-versioned/modules/flag.css

@@ -1,12 +1,12 @@
 /**
  * Generates basic styles for flag elements.
- * @name sd-1-2-0-flag
+ * @name sd-1-3-1-flag
  * @status stable
  * @since 1.34.0
- * @variant { neutral-300 | neutral-500 | white } sd-1-2-0-flag--...
+ * @variant { neutral-300 | neutral-500 | white } sd-1-3-1-flag--...
  */
 
-.sd-1-2-0-flag {
+.sd-1-3-1-flag {
 
     display: inline-flex;
 
@@ -33,7 +33,7 @@
     color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
 }
 
-.sd-1-2-0-flag--neutral-500 {
+.sd-1-3-1-flag--neutral-500 {
 
     
 
@@ -44,14 +44,14 @@
     color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
 }
 
-.sd-1-2-0-flag--neutral-300 {
+.sd-1-3-1-flag--neutral-300 {
 
     
 
     background-color: rgb(var(--sd-color-neutral-300, 218 218 218) / var(--tw-bg-opacity, 1)) /* Used for flag  */
 }
 
-.sd-1-2-0-flag--white {
+.sd-1-3-1-flag--white {
 
     
 

package/dist-versioned/modules/footnotes.css

@@ -1,12 +1,12 @@
 /**
  * A footnote contains additional information/sources related to the content and usually appears at the bottom of a page or below the content it refers to.
- * @name sd-1-2-0-footnotes
+ * @name sd-1-3-1-footnotes
  * @status stable
  * @since 3.0.0
- * @boolean sd-1-2-0-footnotes--inverted Inverts the footnote text.
+ * @boolean sd-1-3-1-footnotes--inverted Inverts the footnote text.
  */
 
-.sd-1-2-0-footnotes {
+.sd-1-3-1-footnotes {
       margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
       margin-bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
       padding: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
@@ -16,22 +16,22 @@
       color: rgb(var(--sd-color-neutral-700, 104 104 104) / var(--tw-text-opacity, 1)) /* Additional text color */;
 }
 
-.sd-1-2-0-footnotes :target {
+.sd-1-3-1-footnotes :target {
       
       background-color: rgb(var(--sd-color-neutral-200, 233 233 233) / var(--tw-bg-opacity, 1)) /* Used for hover interaction  */;
 }
 
-.sd-1-2-0-footnotes:is(ol) {
+.sd-1-3-1-footnotes:is(ol) {
       padding-inline-start: var(--sd-spacing-8, 2rem) /* 32px */;
 }
 
-.sd-1-2-0-footnotes:is(ol) li {
+.sd-1-3-1-footnotes:is(ol) li {
       counter-increment: list-item;
       position: relative;
       list-style-type: none;
     }
 
-.sd-1-2-0-footnotes:is(ol) li .sd-1-2-0-footnotes--marker::before, .sd-1-2-0-footnotes:is(ol) li:has(.sd-1-2-0-footnotes--marker:nth-of-type(2))::before, .sd-1-2-0-footnotes:is(ol) li:not(:has(.sd-1-2-0-footnotes--marker))::before {
+.sd-1-3-1-footnotes:is(ol) li .sd-1-3-1-footnotes--marker::before, .sd-1-3-1-footnotes:is(ol) li:has(.sd-1-3-1-footnotes--marker:nth-of-type(2))::before, .sd-1-3-1-footnotes:is(ol) li:not(:has(.sd-1-3-1-footnotes--marker))::before {
       position: absolute;
       left: calc(var(--sd-spacing-8, 2rem) /* 32px */ * -1);
       flex-shrink: 0;
@@ -42,16 +42,16 @@
           font-size: 10px;
 }
 
-.sd-1-2-0-footnotes:is(ol) li .sd-1-2-0-footnotes--marker::after, .sd-1-2-0-footnotes:is(ol) li:has(.sd-1-2-0-footnotes--marker:nth-of-type(2))::after, .sd-1-2-0-footnotes:is(ol) li:not(:has(.sd-1-2-0-footnotes--marker))::after {
+.sd-1-3-1-footnotes:is(ol) li .sd-1-3-1-footnotes--marker::after, .sd-1-3-1-footnotes:is(ol) li:has(.sd-1-3-1-footnotes--marker:nth-of-type(2))::after, .sd-1-3-1-footnotes:is(ol) li:not(:has(.sd-1-3-1-footnotes--marker))::after {
           content: none;
         }
 
-.sd-1-2-0-footnotes:is(ol) li .sd-1-2-0-footnotes--marker .sd-1-2-0-footnotes--marker, .sd-1-2-0-footnotes:is(ol) li:has(.sd-1-2-0-footnotes--marker:nth-of-type(2)) .sd-1-2-0-footnotes--marker, .sd-1-2-0-footnotes:is(ol) li:not(:has(.sd-1-2-0-footnotes--marker)) .sd-1-2-0-footnotes--marker {
+.sd-1-3-1-footnotes:is(ol) li .sd-1-3-1-footnotes--marker .sd-1-3-1-footnotes--marker, .sd-1-3-1-footnotes:is(ol) li:has(.sd-1-3-1-footnotes--marker:nth-of-type(2)) .sd-1-3-1-footnotes--marker, .sd-1-3-1-footnotes:is(ol) li:not(:has(.sd-1-3-1-footnotes--marker)) .sd-1-3-1-footnotes--marker {
       display: inline-block;
           counter-increment: footnotes-multiple;
 }
 
-.sd-1-2-0-footnotes:is(ol) li .sd-1-2-0-footnotes--marker .sd-1-2-0-footnotes--marker::before, .sd-1-2-0-footnotes:is(ol) li:has(.sd-1-2-0-footnotes--marker:nth-of-type(2)) .sd-1-2-0-footnotes--marker::before, .sd-1-2-0-footnotes:is(ol) li:not(:has(.sd-1-2-0-footnotes--marker)) .sd-1-2-0-footnotes--marker::before {
+.sd-1-3-1-footnotes:is(ol) li .sd-1-3-1-footnotes--marker .sd-1-3-1-footnotes--marker::before, .sd-1-3-1-footnotes:is(ol) li:has(.sd-1-3-1-footnotes--marker:nth-of-type(2)) .sd-1-3-1-footnotes--marker::before, .sd-1-3-1-footnotes:is(ol) li:not(:has(.sd-1-3-1-footnotes--marker)) .sd-1-3-1-footnotes--marker::before {
       position: relative;
       left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
       vertical-align: super;
@@ -60,16 +60,16 @@
             content: counter(footnotes-multiple, lower-alpha);
 }
 
-.sd-1-2-0-footnotes:is(ol) li .sd-1-2-0-footnotes--marker {
+.sd-1-3-1-footnotes:is(ol) li .sd-1-3-1-footnotes--marker {
       bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
       display: block;
 }
 
-.sd-1-2-0-footnotes:is(ol) li .sd-1-2-0-footnotes--marker:focus-visible {
+.sd-1-3-1-footnotes:is(ol) li .sd-1-3-1-footnotes--marker:focus-visible {
       outline-width: 0px;
 }
 
-.sd-1-2-0-footnotes:is(ol) li .sd-1-2-0-footnotes--marker:focus-visible::before {
+.sd-1-3-1-footnotes:is(ol) li .sd-1-3-1-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;
@@ -77,39 +77,39 @@
       outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
 }
 
-.sd-1-2-0-footnotes:is(ul) {
+.sd-1-3-1-footnotes:is(ul) {
     list-style: '';
   }
 
-.sd-1-2-0-footnotes--inverted {
+.sd-1-3-1-footnotes--inverted {
       
       color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
 Used for inverted pressed interaction text link */;
 }
 
-.sd-1-2-0-footnotes--inverted :target {
+.sd-1-3-1-footnotes--inverted :target {
       
       background-color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-bg-opacity, 1)) /* Used for pressed interaction */;
 }
 
-.sd-1-2-0-footnotes--inverted .sd-1-2-0-footnotes--marker::before {
+.sd-1-3-1-footnotes--inverted .sd-1-3-1-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-1-2-0-footnotes--inverted:is(.sd-1-2-0-footnotes--marker) {
+.sd-1-3-1-footnotes--inverted:is(.sd-1-3-1-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-1-2-0-footnotes--inverted:is(.sd-1-2-0-footnotes--marker):target {
+.sd-1-3-1-footnotes--inverted:is(.sd-1-3-1-footnotes--marker):target {
       
       background-color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-bg-opacity, 1)) /* Used for pressed interaction */;
 }
 
-.sd-1-2-0-footnotes--marker {
+.sd-1-3-1-footnotes--marker {
       position: relative;
       bottom: var(--sd-spacing-2, 0.5rem) /* 8px */;
       display: inline-block;
@@ -119,28 +119,28 @@ Used for inverted pressed interaction text link */;
     font-size: x-small;
 }
 
-.sd-1-2-0-footnotes--marker:target {
+.sd-1-3-1-footnotes--marker:target {
       
       background-color: rgb(var(--sd-color-neutral-200, 233 233 233) / var(--tw-bg-opacity, 1)) /* Used for hover interaction  */;
 }
 
-.sd-1-2-0-footnotes--marker::before {
+.sd-1-3-1-footnotes--marker::before {
       content: '[ ';
       display: inline-block;
     }
 
-.sd-1-2-0-footnotes--marker::after {
+.sd-1-3-1-footnotes--marker::after {
       content: ' ]';
       display: inline-block;
     }
 
-.sd-1-2-0-footnotes--marker:link,
-    .sd-1-2-0-footnotes--marker:visited {
+.sd-1-3-1-footnotes--marker:link,
+    .sd-1-3-1-footnotes--marker:visited {
       
       color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
 }
 
-.sd-1-2-0-footnotes--marker:focus-visible {
+.sd-1-3-1-footnotes--marker:focus-visible {
       border-radius: var(--sd-border-radius-default, 0.25rem) /* 4px Default radius for buttons */;
       outline-style: solid;
       outline-width: 2px;