@solid-design-system/styles 1.0.0-next.1

package/dist/modules/headline.css

@@ -0,0 +1,237 @@
+/**
+ * Headlines are vital for displaying content hierarchy and to improve accessibility. A headline can be additionally accompanied by an icon. The icon can be displayed on the left side or inline.
+ * @name sd-headline
+ * @status stable
+ * @since 1.16
+ * @variant { 3xl | xl | lg | base } sd-headline--size-... The headline's size.
+ * @boolean sd-headline--inverted Inverts the headline text.
+ * @boolean sd-headline--inline Sets inline behavior. Used exclusively when an sd-icon or other component is present. See usage <a href="#inline">here.</a>
+ */
+
+.sd-headline,
+.sd-prose :is(h1, h2, h3, h4, h5) {
+
+    display: flex;
+
+    font-weight: 700;
+
+    
+
+    color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */
+}
+
+.sd-headline sd-icon, .sd-prose :is(h1, h2, h3, h4, h5) sd-icon {
+
+    flex-shrink: 0;
+
+    font-size: 3rem;
+
+    
+
+    color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */
+}
+
+@media (min-width: 640px) {
+
+    .sd-headline sd-icon, .sd-prose :is(h1, h2, h3, h4, h5) sd-icon {
+
+        margin-top: var(--sd-spacing-2, 0.5rem) /* 8px */
+    }
+}
+
+.sd-headline.sd-headline,
+  .sd-headline:is(h1):not(.sd-headline),
+  .sd-prose :is(h1, h2, h3, h4, h5).sd-headline,
+  .sd-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-headline) {
+
+    gap: var(--sd-spacing-4, 1rem) /* 16px */;
+
+    font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
+
+    line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */
+}
+
+@media (min-width: 640px) {
+
+    .sd-headline.sd-headline,
+  .sd-headline:is(h1):not(.sd-headline),
+  .sd-prose :is(h1, h2, h3, h4, h5).sd-headline,
+  .sd-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-headline) {
+
+        font-size: var(--sd-font-size-4xl, 2.5rem) /* 40px */
+    }
+}
+
+.sd-headline.sd-headline sd-icon, .sd-headline:is(h1):not(.sd-headline) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-headline) sd-icon {
+
+    margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1)
+}
+
+@media (min-width: 640px) {
+
+    .sd-headline.sd-headline sd-icon, .sd-headline:is(h1):not(.sd-headline) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-headline) sd-icon {
+
+        margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */
+    }
+}
+
+.sd-headline.sd-headline--size-3xl,
+  .sd-headline:is(h2):not(.sd-headline),
+  .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-3xl,
+  .sd-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-headline) {
+
+    gap: var(--sd-spacing-4, 1rem) /* 16px */;
+
+    font-size: var(--sd-font-size-2xl, 1.75rem) /* 28px */;
+
+    line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */
+}
+
+@media (min-width: 640px) {
+
+    .sd-headline.sd-headline--size-3xl,
+  .sd-headline:is(h2):not(.sd-headline),
+  .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-3xl,
+  .sd-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-headline) {
+
+        font-size: var(--sd-font-size-3xl, 2rem) /* 32px */
+    }
+}
+
+.sd-headline.sd-headline--size-3xl sd-icon, .sd-headline:is(h2):not(.sd-headline) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-3xl sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-headline) sd-icon {
+
+    margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1)
+}
+
+@media (min-width: 640px) {
+
+    .sd-headline.sd-headline--size-3xl sd-icon, .sd-headline:is(h2):not(.sd-headline) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-3xl sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-headline) sd-icon {
+
+        margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */
+    }
+}
+
+.sd-headline.sd-headline--size-xl,
+  .sd-headline.sd-headline--size-lg,
+  .sd-headline.sd-headline--size-base,
+  .sd-headline:is(h3, h4, h5):not(.sd-headline),
+  .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-xl,
+  .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-lg,
+  .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-base,
+  .sd-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-headline) {
+
+    gap: var(--sd-spacing-2, 0.5rem) /* 8px */;
+
+    
+
+    color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
+}
+
+.sd-headline.sd-headline--size-xl sd-icon, .sd-headline.sd-headline--size-lg sd-icon, .sd-headline.sd-headline--size-base sd-icon, .sd-headline:is(h3, h4, h5):not(.sd-headline) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-xl sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-lg sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-base sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-headline) sd-icon {
+
+    font-size: 2rem
+}
+
+.sd-headline.sd-headline--size-xl,
+  .sd-headline:is(h3):not(.sd-headline),
+  .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-xl,
+  .sd-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-headline) {
+
+    font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */
+}
+
+.sd-headline.sd-headline--size-xl sd-icon, .sd-headline:is(h3):not(.sd-headline) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-xl sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-headline) sd-icon {
+
+    margin-top: var(--sd-spacing-0-5, 0.125rem) /* 2px */
+}
+
+@media (min-width: 640px) {
+
+    .sd-headline.sd-headline--size-xl sd-icon, .sd-headline:is(h3):not(.sd-headline) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-xl sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-headline) sd-icon {
+
+        margin-top: var(--sd-spacing-0-5, 0.125rem) /* 2px */
+    }
+}
+
+.sd-headline.sd-headline--size-lg,
+  .sd-headline.sd-headline--size-base,
+  .sd-headline:is(h4, h5):not(.sd-headline),
+  .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-lg,
+  .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-base,
+  .sd-prose :is(h1, h2, h3, h4, h5):is(h4, h5):not(.sd-headline) {
+
+    line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */
+}
+
+.sd-headline.sd-headline--size-lg,
+  .sd-headline:is(h4),
+  .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-lg,
+  .sd-prose :is(h1, h2, h3, h4, h5):is(h4) {
+
+    font-size: var(--sd-font-size-lg, 1.25rem) /* 20px */
+}
+
+.sd-headline.sd-headline--size-lg sd-icon, .sd-headline:is(h4) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-lg sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
+
+    margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */
+}
+
+@media (min-width: 640px) {
+
+    .sd-headline.sd-headline--size-lg sd-icon, .sd-headline:is(h4) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-lg sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
+
+        margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */
+    }
+}
+
+.sd-headline.sd-headline--size-base,
+  .sd-headline:is(h5):not(.sd-headline),
+  .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-base,
+  .sd-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-headline) {
+
+    font-size: var(--sd-font-size-base, 1rem) /* 16px */
+}
+
+.sd-headline.sd-headline--size-base sd-icon, .sd-headline:is(h5):not(.sd-headline) sd-icon, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-base sd-icon, .sd-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-headline) sd-icon {
+
+    margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1)
+}
+
+.sd-headline.sd-headline--size-base mark, .sd-headline:is(h5):not(.sd-headline) mark, .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-base mark, .sd-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-headline) mark {
+
+    color: inherit
+}
+
+.sd-headline--inline {
+
+    display: inline-block
+}
+
+.sd-headline--inline sd-icon {
+
+    margin-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
+
+    margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
+
+    vertical-align: middle
+}
+
+.sd-headline--inline:is(.sd-headline--size-xl, .sd-headline--size-lg, .sd-headline--size-base) sd-icon {
+
+    margin-right: var(--sd-spacing-0-5, 0.125rem) /* 2px */
+}
+
+.sd-headline--inverted:not(#_),
+.sd-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-headline):not(#_) {
+
+    
+
+    color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */
+}
+
+.sd-headline--inverted:not(#_) sd-icon, .sd-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-headline):not(#_) sd-icon {
+
+    
+
+    color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */
+}

package/dist/modules/hidden-links.css

@@ -0,0 +1,57 @@
+/**
+ * Hidden links can be used to show links only for keyboard users.
+ * @name sd-hidden-links
+ * @status stable
+ * @since 3.15.0
+ * @boolean sd-hidden-links--multiple Adapts styling for multiple skip links.
+ * @boolean sd-hidden-links--debug Always show the links for debugging purposes.
+ */
+
+:lang(en) {
+  --sd-hidden-links-title: 'Jump to';
+}
+
+:lang(de) {
+  --sd-hidden-links-title: 'Springe zu';
+}
+
+.sd-hidden-links:not(:focus-within):not(.sd-hidden-links--debug) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.sd-hidden-links {
+  position: absolute;
+  top: var(--sd-spacing-6, 1.5rem) /* 24px */;
+  left: var(--sd-spacing-6, 1.5rem) /* 24px */;
+}
+
+.sd-hidden-links--multiple {
+  display: flex;
+  flex-direction: column;
+  
+  background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode) 
Used for inverted button */;
+  padding-left: var(--sd-spacing-2, 0.5rem) /* 8px */;
+  padding-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
+  padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
+  padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
+  --tw-shadow: var(--sd-shadow, 0px 1px 3px 0px rgb(81 81 81 / 75%));
+  --tw-shadow-colored: 0px 1px 3px 0px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.sd-hidden-links--multiple:before {
+  padding-left: var(--sd-spacing-4, 1rem) /* 16px */;
+  padding-right: var(--sd-spacing-4, 1rem) /* 16px */;
+  padding-top: var(--sd-spacing-2, 0.5rem) /* 8px */;
+  padding-bottom: var(--sd-spacing-2, 0.5rem) /* 8px */;
+  font-weight: 700;
+      content: var(--sd-hidden-links-title);
+}

package/dist/modules/interactive.css

@@ -0,0 +1,105 @@
+/**
+ * Generates basic styles for interactive elements.
+ * @name sd-interactive
+ * @status stable
+ * @since 1.11
+ * @boolean sd-interactive--disabled Makes an element look disabled.
+ * @boolean sd-interactive--inverted Inverts the colors of an element.
+ * @boolean sd-interactive--reset Resets the default browser styles of e.g., a button.
+ */
+
+.sd-prose a--reset, .sd-interactive--reset {
+    all: unset;
+    outline: revert;
+  }
+
+.sd-prose a,
+.sd-interactive {
+    cursor: pointer;
+    
+    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;
+}
+
+.sd-prose a:hover:not([disabled]),
+.sd-interactive:hover:not([disabled]) {
+    
+    color: rgb(var(--sd-color-primary-500, 70 109 175) / var(--tw-text-opacity, 1)) /* Used for hover interaction */;
+}
+
+.sd-prose a:active:not([disabled]),
+.sd-interactive:active:not([disabled]) {
+    
+    color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-text-opacity, 1)) /* Used for pressed interaction */;
+}
+
+.sd-prose a:is(.sd-interactive), .sd-interactive:is(.sd-interactive) {
+    text-decoration-line: none;
+}
+
+.sd-prose a:focus-visible, .sd-interactive: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 */;
+}
+
+.sd-prose a--disabled,
+  .sd-prose a[disabled],
+  .sd-prose a[href=''],
+  .sd-interactive--disabled,
+  .sd-interactive[disabled],
+  .sd-interactive[href=''] {
+    cursor: not-allowed;
+    
+    color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
+}
+
+.sd-prose a--disabled:hover:not([disabled]),
+  .sd-prose a[disabled]:hover:not([disabled]),
+  .sd-prose a[href='']:hover:not([disabled]),
+  .sd-interactive--disabled:hover:not([disabled]),
+  .sd-interactive[disabled]:hover:not([disabled]),
+  .sd-interactive[href='']:hover:not([disabled]) {
+    
+    color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
+}
+
+.sd-prose a--disabled:active:not([disabled]),
+  .sd-prose a[disabled]:active:not([disabled]),
+  .sd-prose a[href='']:active:not([disabled]),
+  .sd-interactive--disabled:active:not([disabled]),
+  .sd-interactive[disabled]:active:not([disabled]),
+  .sd-interactive[href='']:active:not([disabled]) {
+    
+    color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
+}
+
+.sd-prose--inverted a,
+.sd-interactive--inverted {
+    
+    color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
+}
+
+.sd-prose--inverted a:hover:not([disabled]),
+.sd-interactive--inverted: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-prose--inverted a:active:not([disabled]),
+.sd-interactive--inverted: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-prose--inverted a:focus-visible, .sd-interactive--inverted:focus-visible {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 2px;
+    outline-color: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */;
+}

package/dist/modules/leadtext.css

@@ -0,0 +1,43 @@
+/**
+ * Leadtext is used for text that should be highlighted and a focal point of the page.
+ * @name sd-leadtext
+ * @status stable
+ * @since 1.7
+ * @variant { lg } sd-leadtext--size-... The leadtext's size.
+ * @boolean sd-leadtext--inverted Inverts the leadtext text.
+ */
+
+.sd-prose > .sd-leadtext,
+.sd-leadtext {
+
+    font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
+
+    font-weight: 400;
+
+    line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
+
+    
+
+    color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
+}
+
+.sd-prose > .sd-leadtext--size-lg, .sd-leadtext--size-lg {
+
+    font-size: var(--sd-font-size-lg, 1.25rem) /* 20px */;
+
+    font-weight: 400;
+
+    line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
+
+    
+
+    color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
+}
+
+.sd-prose--inverted > .sd-leadtext,
+.sd-leadtext--inverted {
+
+    
+
+    color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */
+}

package/dist/modules/list.css

@@ -0,0 +1,152 @@
+/**
+ * Generates basic styles for list elements.
+ * @name sd-list
+ * @status stable
+ * @since 1.39.0
+ * @boolean sd-list--inverted Inverts the list text.
+ */
+
+.sd-list:not(.sd-list--icon),
+.sd-prose > :is(ol, ul) {
+  padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
+  padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
+  text-align: left;
+}
+
+.sd-list:not(.sd-list--icon) li:not(:first-child), .sd-prose > :is(ol, ul) li:not(:first-child) {
+  margin-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
+}
+
+.sd-list:not(.sd-list--icon) ol,
+  .sd-list:not(.sd-list--icon) ul,
+  .sd-prose > :is(ol, ul) ol,
+  .sd-prose > :is(ol, ul) ul {
+  padding-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
+}
+
+/* Counter handling for ordered lists. */
+
+.sd-list:not(.sd-list--icon):is(ol) > li, .sd-list:not(.sd-list--icon) ol > li, .sd-prose > :is(ol, ul):is(ol) > li, .sd-prose > :is(ol, ul) ol > li {
+      counter-increment: item;
+    }
+
+.sd-list:not(.sd-list--icon):is(ol) > li:before, .sd-list:not(.sd-list--icon) ol > li:before, .sd-prose > :is(ol, ul):is(ol) > li:before, .sd-prose > :is(ol, ul) ol > li:before {
+        content: counters(item, '.') '. ';
+      }
+
+/* Add second level */
+
+.sd-list:not(.sd-list--icon):is(ol),
+  .sd-list:not(.sd-list--icon):is(ol) > li > ol,
+  .sd-list:not(.sd-list--icon) ol > li > ol,
+  .sd-prose > :is(ol, ul):is(ol),
+  .sd-prose > :is(ol, ul):is(ol) > li > ol,
+  .sd-prose > :is(ol, ul) ol > li > ol {
+    counter-reset: item;
+  }
+
+/* Ordered lists inside unordered lists. */
+
+.sd-list:not(.sd-list--icon):is(ul) > li > ol,
+  .sd-list:not(.sd-list--icon) ul > li > ol,
+  .sd-prose > :is(ol, ul):is(ul) > li > ol,
+  .sd-prose > :is(ol, ul) ul > li > ol {
+    counter-set: item 0;
+  }
+
+/* Styling */
+
+.sd-list:not(.sd-list--icon) li, .sd-prose > :is(ol, ul) li {
+  display: table;
+}
+
+.sd-list:not(.sd-list--icon) li:before, .sd-prose > :is(ol, ul) li:before {
+  display: table-cell;
+  padding-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
+}
+
+.sd-list:not(.sd-list--icon):is(ul),
+  .sd-list:not(.sd-list--icon) ul,
+  .sd-prose > :is(ol, ul):is(ul),
+  .sd-prose > :is(ol, ul) ul {
+    list-style-type: '';
+  }
+
+.sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li:before, .sd-list:not(.sd-list--icon) ul > li:before, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li:before, .sd-prose > :is(ol, ul) ul > li:before {
+      content: '\2022';
+    }
+
+.sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li:before, .sd-list:not(.sd-list--icon) ul > li > ul > li:before, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li:before, .sd-prose > :is(ol, ul) ul > li > ul > li:before {
+        content: '\002B1D';
+      }
+
+.sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li > ul > li:before, .sd-list:not(.sd-list--icon) ul > li > ul > li > ul > li:before, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li > ul > li:before, .sd-prose > :is(ol, ul) ul > li > ul > li > ul > li:before {
+          content: '\2010';
+        }
+
+.sd-list--icon {
+  padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
+  padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
+  text-align: left;
+}
+
+.sd-list--icon li sd-icon:first-of-type,
+    .sd-list--icon li .sd-list--icon__icon:first-of-type {
+  
+  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
+}
+
+.sd-list--icon {
+  list-style-type: '';
+}
+
+/* Safari removes list semantics of lists that don’t look like lists (list-style: none). The only way to remove list
+    styles without affecting semantics is to set list-style-type to an empty string.
+    https://www.matuzo.at/blog/2023/removing-list-styles-without-affecting-semantics */
+
+.sd-list--icon > li:first-of-type {
+  padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+}
+
+.sd-list--icon li {
+  position: relative;
+  padding-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
+  padding-left: var(--sd-spacing-10, 2.5rem) /* 40px */;
+  line-height: 32px;
+}
+
+.sd-list--icon li > sd-icon:first-of-type,
+    .sd-list--icon li > .sd-list--icon__icon:first-of-type {
+  position: absolute;
+  left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+  font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
+  
+  color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
+}
+
+.sd-list--icon.sd-list--horizontal {
+  display: flex;
+}
+
+.sd-list--icon.sd-list--horizontal li {
+  display: flex;
+  padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+}
+
+.sd-list--icon.sd-list--horizontal li:not(:last-child) {
+  margin-right: var(--sd-spacing-8, 2rem) /* 32px */;
+}
+
+.sd-list--inverted,
+.sd-prose--inverted > :is(ol, ul) {
+  
+  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
+}
+
+.sd-list--inverted li > sd-icon:first-of-type,
+  .sd-list--inverted li > .sd-list--icon__icon:first-of-type,
+  .sd-prose--inverted > :is(ol, ul) li > sd-icon:first-of-type,
+  .sd-prose--inverted > :is(ol, ul) li > .sd-list--icon__icon:first-of-type {
+  
+  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
+}

package/dist/modules/mark.css

@@ -0,0 +1,15 @@
+/**
+ * The green accent color can be used to highlight parts of the text.
+ * @name sd-mark
+ * @status stable
+ * @since 1.7
+ */
+
+mark.sd-mark {
+
+    background-color: transparent;
+
+    
+
+    color: rgb(var(--sd-color-accent, 45 157 0) / var(--tw-text-opacity, 1)) /* Used for inverted hover interaction button label */
+}

package/dist/modules/media.css

@@ -0,0 +1,33 @@
+/**
+ * Generates basic styles for media elements.
+ * @name sd-media
+ * @status stable
+ * @since 2.5.0
+ * @boolean sd-media--inverted Inverts the figcaption text.
+ */
+
+.sd-prose figure,
+figure.sd-media {
+
+    margin: var(--sd-spacing-0, 0px) /* No spacing (manually added) */
+}
+
+.sd-prose figure figcaption, figure.sd-media figcaption {
+
+    
+
+    color: rgb(var(--sd-color-neutral-700, 104 104 104) / var(--tw-text-opacity, 1)) /* Additional text color */
+}
+
+.sd-prose figure figcaption:last-child, figure.sd-media figcaption:last-child {
+
+    margin-top: var(--sd-spacing-3, 0.75rem) /* 12px */
+}
+
+.sd-prose--inverted figure figcaption, figure.sd-media--inverted figcaption {
+
+    
+
+    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 */
+}

package/dist/modules/meta.css

@@ -0,0 +1,49 @@
+/**
+ * Meta information like file size, date, or whatever is needed.
+ * @name sd-meta
+ * @status stable
+ * @since 1.7
+ * @variant { sm } sd-meta--size-... The size. Small can be used as an alternative in tight spaces.
+ * @boolean sd-meta--inverted Inverts the meta element.
+ * @boolean sd-meta--pipe Adds a pipe right from the meta element.
+ * @boolean sd-meta--light Makes sd-meta light.
+ */
+
+.sd-meta {
+      font-size: var(--sd-font-size-base, 1rem) /* 16px */;
+      font-weight: 400;
+      line-height: var(--sd-line-height-none, 100%) /* Used for buttons, input fields etc. */;
+      
+      color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
+}
+
+.sd-meta--size-sm {
+      font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
+}
+
+.sd-meta--light {
+      
+      color: rgb(var(--sd-color-neutral-700, 104 104 104) / var(--tw-text-opacity, 1)) /* Additional text color */;
+}
+
+.sd-meta--inverted {
+      
+      color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
+}
+
+.sd-meta--inverted.sd-meta--light {
+      
+      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-meta--pipe::after {
+      content: '|';
+      margin-left: var(--sd-spacing-1, 0.25rem) /* 4px */;
+      margin-right: var(--sd-spacing-1, 0.25rem) /* 4px */;
+    }
+
+.sd-meta--pipe.sd-meta--size-sm::after {
+      margin-left: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
+      margin-right: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
+}