@solid-design-system/styles 1.5.4 → 2.0.0-next.0

package/dist-versioned/modules/headline.css

@@ -1,237 +1,138 @@
-/**
- * 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-1-5-4-headline
- * @status stable
- * @since 1.16
- * @variant { 3xl | xl | lg | base } sd-1-5-4-headline--size-... The headline's size.
- * @boolean sd-1-5-4-headline--inverted Inverts the headline text.
- * @boolean sd-1-5-4-headline--inline Sets inline behavior. Used exclusively when an sd-icon or other component is present. See usage <a href="#inline">here.</a>
- */
-
-.sd-1-5-4-headline,
-.sd-1-5-4-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-1-5-4-headline sd-icon, .sd-1-5-4-prose :is(h1, h2, h3, h4, h5) sd-icon {
-
+/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
+@layer properties;
+.sd-2-0-0-next-0-headline, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5) {
+  display: flex;
+  --tw-font-weight: var(--sd-font-weight-bold);
+  font-weight: var(--sd-font-weight-bold);
+  color: var(--sd-color-text-primary, var(--sd-color-primary));
+}
+.sd-2-0-0-next-0-headline sd-icon, .sd-2-0-0-next-0-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-1-5-4-headline sd-icon, .sd-1-5-4-prose :is(h1, h2, h3, h4, h5) sd-icon {
-
-        margin-top: var(--sd-spacing-2, 0.5rem) /* 8px */
+    color: var(--sd-color-text-primary, var(--sd-color-primary));
+  }
+@media (width >= 40rem) {
+.sd-2-0-0-next-0-headline sd-icon, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5) sd-icon {
+      margin-top: var(--sd-spacing-2)
+  }
     }
-}
-
-.sd-1-5-4-headline.sd-1-5-4-headline,
-  .sd-1-5-4-headline:is(h1):not(.sd-1-5-4-headline),
-  .sd-1-5-4-prose :is(h1, h2, h3, h4, h5).sd-1-5-4-headline,
-  .sd-1-5-4-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-5-4-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-1-5-4-headline.sd-1-5-4-headline,
-  .sd-1-5-4-headline:is(h1):not(.sd-1-5-4-headline),
-  .sd-1-5-4-prose :is(h1, h2, h3, h4, h5).sd-1-5-4-headline,
-  .sd-1-5-4-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-5-4-headline) {
-
-        font-size: var(--sd-font-size-4xl, 2.5rem) /* 40px */
+.sd-2-0-0-next-0-headline.sd-2-0-0-next-0-headline, .sd-2-0-0-next-0-headline:is(h1):not(.sd-2-0-0-next-0-headline), .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-0-headline, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-2-0-0-next-0-headline) {
+    gap: var(--sd-spacing-4);
+    font-size: var(--sd-text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
+    --tw-leading: var(--leading-tight, 1.25);
+    line-height: var(--leading-tight, 1.25);
+  }
+@media (width >= 40rem) {
+.sd-2-0-0-next-0-headline.sd-2-0-0-next-0-headline, .sd-2-0-0-next-0-headline:is(h1):not(.sd-2-0-0-next-0-headline), .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-0-headline, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-2-0-0-next-0-headline) {
+      font-size: var(--sd-text-4xl);
+      line-height: var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)))
+  }
     }
-}
-
-.sd-1-5-4-headline.sd-1-5-4-headline sd-icon, .sd-1-5-4-headline:is(h1):not(.sd-1-5-4-headline) sd-icon, .sd-1-5-4-prose :is(h1, h2, h3, h4, h5).sd-1-5-4-headline sd-icon, .sd-1-5-4-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-5-4-headline) sd-icon {
-
-    margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1)
-}
-
-@media (min-width: 640px) {
-
-    .sd-1-5-4-headline.sd-1-5-4-headline sd-icon, .sd-1-5-4-headline:is(h1):not(.sd-1-5-4-headline) sd-icon, .sd-1-5-4-prose :is(h1, h2, h3, h4, h5).sd-1-5-4-headline sd-icon, .sd-1-5-4-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-5-4-headline) sd-icon {
-
-        margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */
+.sd-2-0-0-next-0-headline.sd-2-0-0-next-0-headline sd-icon, .sd-2-0-0-next-0-headline:is(h1):not(.sd-2-0-0-next-0-headline) sd-icon, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-0-headline sd-icon, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-2-0-0-next-0-headline) sd-icon {
+      margin-top: calc(var(--sd-spacing-1) * -1);
     }
-}
-
-.sd-1-5-4-headline.sd-1-5-4-headline--size-3xl,
-  .sd-1-5-4-headline:is(h2):not(.sd-1-5-4-headline),
-  .sd-1-5-4-prose :is(h1, h2, h3, h4, h5).sd-1-5-4-headline--size-3xl,
-  .sd-1-5-4-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-5-4-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-1-5-4-headline.sd-1-5-4-headline--size-3xl,
-  .sd-1-5-4-headline:is(h2):not(.sd-1-5-4-headline),
-  .sd-1-5-4-prose :is(h1, h2, h3, h4, h5).sd-1-5-4-headline--size-3xl,
-  .sd-1-5-4-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-5-4-headline) {
-
-        font-size: var(--sd-font-size-3xl, 2rem) /* 32px */
+@media (width >= 40rem) {
+.sd-2-0-0-next-0-headline.sd-2-0-0-next-0-headline sd-icon, .sd-2-0-0-next-0-headline:is(h1):not(.sd-2-0-0-next-0-headline) sd-icon, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-0-headline sd-icon, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-2-0-0-next-0-headline) sd-icon {
+        margin-top: calc(var(--sd-spacing-1) * 0)
     }
-}
-
-.sd-1-5-4-headline.sd-1-5-4-headline--size-3xl sd-icon, .sd-1-5-4-headline:is(h2):not(.sd-1-5-4-headline) sd-icon, .sd-1-5-4-prose :is(h1, h2, h3, h4, h5).sd-1-5-4-headline--size-3xl sd-icon, .sd-1-5-4-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-5-4-headline) sd-icon {
-
-    margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1)
-}
-
-@media (min-width: 640px) {
-
-    .sd-1-5-4-headline.sd-1-5-4-headline--size-3xl sd-icon, .sd-1-5-4-headline:is(h2):not(.sd-1-5-4-headline) sd-icon, .sd-1-5-4-prose :is(h1, h2, h3, h4, h5).sd-1-5-4-headline--size-3xl sd-icon, .sd-1-5-4-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-5-4-headline) sd-icon {
-
-        margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */
+      }
+.sd-2-0-0-next-0-headline.sd-2-0-0-next-0-headline--size-3xl, .sd-2-0-0-next-0-headline:is(h2):not(.sd-2-0-0-next-0-headline), .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-0-headline--size-3xl, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-2-0-0-next-0-headline) {
+    gap: var(--sd-spacing-4);
+    font-size: var(--sd-text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
+    --tw-leading: var(--leading-tight, 1.25);
+    line-height: var(--leading-tight, 1.25);
+  }
+@media (width >= 40rem) {
+.sd-2-0-0-next-0-headline.sd-2-0-0-next-0-headline--size-3xl, .sd-2-0-0-next-0-headline:is(h2):not(.sd-2-0-0-next-0-headline), .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-0-headline--size-3xl, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-2-0-0-next-0-headline) {
+      font-size: var(--sd-text-3xl);
+      line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)))
+  }
     }
-}
-
-.sd-1-5-4-headline.sd-1-5-4-headline--size-xl,
-  .sd-1-5-4-headline.sd-1-5-4-headline--size-lg,
-  .sd-1-5-4-headline.sd-1-5-4-headline--size-base,
-  .sd-1-5-4-headline:is(h3, h4, h5):not(.sd-1-5-4-headline),
-  .sd-1-5-4-prose :is(h1, h2, h3, h4, h5).sd-1-5-4-headline--size-xl,
-  .sd-1-5-4-prose :is(h1, h2, h3, h4, h5).sd-1-5-4-headline--size-lg,
-  .sd-1-5-4-prose :is(h1, h2, h3, h4, h5).sd-1-5-4-headline--size-base,
-  .sd-1-5-4-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-1-5-4-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-1-5-4-headline.sd-1-5-4-headline--size-xl sd-icon, .sd-1-5-4-headline.sd-1-5-4-headline--size-lg sd-icon, .sd-1-5-4-headline.sd-1-5-4-headline--size-base sd-icon, .sd-1-5-4-headline:is(h3, h4, h5):not(.sd-1-5-4-headline) sd-icon, .sd-1-5-4-prose :is(h1, h2, h3, h4, h5).sd-1-5-4-headline--size-xl sd-icon, .sd-1-5-4-prose :is(h1, h2, h3, h4, h5).sd-1-5-4-headline--size-lg sd-icon, .sd-1-5-4-prose :is(h1, h2, h3, h4, h5).sd-1-5-4-headline--size-base sd-icon, .sd-1-5-4-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-1-5-4-headline) sd-icon {
-
-    font-size: 2rem
-}
-
-.sd-1-5-4-headline.sd-1-5-4-headline--size-xl,
-  .sd-1-5-4-headline:is(h3):not(.sd-1-5-4-headline),
-  .sd-1-5-4-prose :is(h1, h2, h3, h4, h5).sd-1-5-4-headline--size-xl,
-  .sd-1-5-4-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-5-4-headline) {
-
-    font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */
-}
-
-.sd-1-5-4-headline.sd-1-5-4-headline--size-xl sd-icon, .sd-1-5-4-headline:is(h3):not(.sd-1-5-4-headline) sd-icon, .sd-1-5-4-prose :is(h1, h2, h3, h4, h5).sd-1-5-4-headline--size-xl sd-icon, .sd-1-5-4-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-5-4-headline) sd-icon {
-
-    margin-top: var(--sd-spacing-0-5, 0.125rem) /* 2px */
-}
-
-@media (min-width: 640px) {
-
-    .sd-1-5-4-headline.sd-1-5-4-headline--size-xl sd-icon, .sd-1-5-4-headline:is(h3):not(.sd-1-5-4-headline) sd-icon, .sd-1-5-4-prose :is(h1, h2, h3, h4, h5).sd-1-5-4-headline--size-xl sd-icon, .sd-1-5-4-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-5-4-headline) sd-icon {
-
-        margin-top: var(--sd-spacing-0-5, 0.125rem) /* 2px */
+.sd-2-0-0-next-0-headline.sd-2-0-0-next-0-headline--size-3xl sd-icon, .sd-2-0-0-next-0-headline:is(h2):not(.sd-2-0-0-next-0-headline) sd-icon, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-0-headline--size-3xl sd-icon, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-2-0-0-next-0-headline) sd-icon {
+      margin-top: calc(var(--sd-spacing-1) * -1);
     }
-}
-
-.sd-1-5-4-headline.sd-1-5-4-headline--size-lg,
-  .sd-1-5-4-headline.sd-1-5-4-headline--size-base,
-  .sd-1-5-4-headline:is(h4, h5):not(.sd-1-5-4-headline),
-  .sd-1-5-4-prose :is(h1, h2, h3, h4, h5).sd-1-5-4-headline--size-lg,
-  .sd-1-5-4-prose :is(h1, h2, h3, h4, h5).sd-1-5-4-headline--size-base,
-  .sd-1-5-4-prose :is(h1, h2, h3, h4, h5):is(h4, h5):not(.sd-1-5-4-headline) {
-
-    line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */
-}
-
-.sd-1-5-4-headline.sd-1-5-4-headline--size-lg,
-  .sd-1-5-4-headline:is(h4),
-  .sd-1-5-4-prose :is(h1, h2, h3, h4, h5).sd-1-5-4-headline--size-lg,
-  .sd-1-5-4-prose :is(h1, h2, h3, h4, h5):is(h4) {
-
-    font-size: var(--sd-font-size-lg, 1.25rem) /* 20px */
-}
-
-.sd-1-5-4-headline.sd-1-5-4-headline--size-lg sd-icon, .sd-1-5-4-headline:is(h4) sd-icon, .sd-1-5-4-prose :is(h1, h2, h3, h4, h5).sd-1-5-4-headline--size-lg sd-icon, .sd-1-5-4-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-1-5-4-headline.sd-1-5-4-headline--size-lg sd-icon, .sd-1-5-4-headline:is(h4) sd-icon, .sd-1-5-4-prose :is(h1, h2, h3, h4, h5).sd-1-5-4-headline--size-lg sd-icon, .sd-1-5-4-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
-
-        margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */
+@media (width >= 40rem) {
+.sd-2-0-0-next-0-headline.sd-2-0-0-next-0-headline--size-3xl sd-icon, .sd-2-0-0-next-0-headline:is(h2):not(.sd-2-0-0-next-0-headline) sd-icon, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-0-headline--size-3xl sd-icon, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-2-0-0-next-0-headline) sd-icon {
+        margin-top: calc(var(--sd-spacing-1) * 0)
     }
-}
-
-.sd-1-5-4-headline.sd-1-5-4-headline--size-base,
-  .sd-1-5-4-headline:is(h5):not(.sd-1-5-4-headline),
-  .sd-1-5-4-prose :is(h1, h2, h3, h4, h5).sd-1-5-4-headline--size-base,
-  .sd-1-5-4-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-5-4-headline) {
-
-    font-size: var(--sd-font-size-base, 1rem) /* 16px */
-}
-
-.sd-1-5-4-headline.sd-1-5-4-headline--size-base sd-icon, .sd-1-5-4-headline:is(h5):not(.sd-1-5-4-headline) sd-icon, .sd-1-5-4-prose :is(h1, h2, h3, h4, h5).sd-1-5-4-headline--size-base sd-icon, .sd-1-5-4-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-5-4-headline) sd-icon {
-
-    margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1)
-}
-
-.sd-1-5-4-headline.sd-1-5-4-headline--size-base mark, .sd-1-5-4-headline:is(h5):not(.sd-1-5-4-headline) mark, .sd-1-5-4-prose :is(h1, h2, h3, h4, h5).sd-1-5-4-headline--size-base mark, .sd-1-5-4-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-5-4-headline) mark {
-
-    color: inherit
-}
-
-.sd-1-5-4-headline--inline {
-
-    display: inline-block
-}
-
-.sd-1-5-4-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-1-5-4-headline--inline:is(.sd-1-5-4-headline--size-xl, .sd-1-5-4-headline--size-lg, .sd-1-5-4-headline--size-base) sd-icon {
-
-    margin-right: var(--sd-spacing-0-5, 0.125rem) /* 2px */
-}
-
-.sd-1-5-4-headline--inverted:not(#_),
-.sd-1-5-4-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-1-5-4-headline):not(#_) {
-
-    
-
-    color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */
-}
-
-.sd-1-5-4-headline--inverted:not(#_) sd-icon, .sd-1-5-4-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-1-5-4-headline):not(#_) sd-icon {
-
-    
-
-    color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */
+      }
+.sd-2-0-0-next-0-headline.sd-2-0-0-next-0-headline--size-xl, .sd-2-0-0-next-0-headline.sd-2-0-0-next-0-headline--size-lg, .sd-2-0-0-next-0-headline.sd-2-0-0-next-0-headline--size-base, .sd-2-0-0-next-0-headline:is(h3, h4, h5):not(.sd-2-0-0-next-0-headline), .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-0-headline--size-xl, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-0-headline--size-lg, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-0-headline--size-base, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-2-0-0-next-0-headline) {
+    gap: var(--sd-spacing-2);
+    color: var(--sd-color-text-black, var(--sd-color-black));
+  }
+.sd-2-0-0-next-0-headline.sd-2-0-0-next-0-headline--size-xl sd-icon, .sd-2-0-0-next-0-headline.sd-2-0-0-next-0-headline--size-lg sd-icon, .sd-2-0-0-next-0-headline.sd-2-0-0-next-0-headline--size-base sd-icon, .sd-2-0-0-next-0-headline:is(h3, h4, h5):not(.sd-2-0-0-next-0-headline) sd-icon, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-0-headline--size-xl sd-icon, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-0-headline--size-lg sd-icon, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-0-headline--size-base sd-icon, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-2-0-0-next-0-headline) sd-icon {
+      font-size: 2rem;
+    }
+.sd-2-0-0-next-0-headline.sd-2-0-0-next-0-headline--size-xl, .sd-2-0-0-next-0-headline:is(h3):not(.sd-2-0-0-next-0-headline), .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-0-headline--size-xl, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-2-0-0-next-0-headline) {
+    font-size: var(--sd-text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
+  }
+.sd-2-0-0-next-0-headline.sd-2-0-0-next-0-headline--size-xl sd-icon, .sd-2-0-0-next-0-headline:is(h3):not(.sd-2-0-0-next-0-headline) sd-icon, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-0-headline--size-xl sd-icon, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-2-0-0-next-0-headline) sd-icon {
+      margin-top: var(--sd-spacing-0\.5);
+    }
+@media (width >= 40rem) {
+.sd-2-0-0-next-0-headline.sd-2-0-0-next-0-headline--size-xl sd-icon, .sd-2-0-0-next-0-headline:is(h3):not(.sd-2-0-0-next-0-headline) sd-icon, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-0-headline--size-xl sd-icon, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-2-0-0-next-0-headline) sd-icon {
+        margin-top: var(--sd-spacing-0\.5)
+    }
+      }
+.sd-2-0-0-next-0-headline.sd-2-0-0-next-0-headline--size-lg, .sd-2-0-0-next-0-headline.sd-2-0-0-next-0-headline--size-base, .sd-2-0-0-next-0-headline:is(h4, h5):not(.sd-2-0-0-next-0-headline), .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-0-headline--size-lg, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-0-headline--size-base, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5):is(h4, h5):not(.sd-2-0-0-next-0-headline) {
+    --tw-leading: var(--leading-normal, 1.5);
+    line-height: var(--leading-normal, 1.5);
+  }
+.sd-2-0-0-next-0-headline.sd-2-0-0-next-0-headline--size-lg, .sd-2-0-0-next-0-headline:is(h4), .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-0-headline--size-lg, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5):is(h4) {
+    font-size: var(--sd-text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
+  }
+.sd-2-0-0-next-0-headline.sd-2-0-0-next-0-headline--size-lg sd-icon, .sd-2-0-0-next-0-headline:is(h4) sd-icon, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-0-headline--size-lg sd-icon, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
+      margin-top: calc(var(--sd-spacing-1) * 0);
+    }
+@media (width >= 40rem) {
+.sd-2-0-0-next-0-headline.sd-2-0-0-next-0-headline--size-lg sd-icon, .sd-2-0-0-next-0-headline:is(h4) sd-icon, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-0-headline--size-lg sd-icon, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
+        margin-top: calc(var(--sd-spacing-1) * 0)
+    }
+      }
+.sd-2-0-0-next-0-headline.sd-2-0-0-next-0-headline--size-base, .sd-2-0-0-next-0-headline:is(h5):not(.sd-2-0-0-next-0-headline), .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-0-headline--size-base, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-2-0-0-next-0-headline) {
+    font-size: var(--sd-text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
+  }
+.sd-2-0-0-next-0-headline.sd-2-0-0-next-0-headline--size-base sd-icon, .sd-2-0-0-next-0-headline:is(h5):not(.sd-2-0-0-next-0-headline) sd-icon, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-0-headline--size-base sd-icon, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-2-0-0-next-0-headline) sd-icon {
+      margin-top: calc(var(--sd-spacing-1) * -1);
+    }
+.sd-2-0-0-next-0-headline.sd-2-0-0-next-0-headline--size-base mark, .sd-2-0-0-next-0-headline:is(h5):not(.sd-2-0-0-next-0-headline) mark, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5).sd-2-0-0-next-0-headline--size-base mark, .sd-2-0-0-next-0-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-2-0-0-next-0-headline) mark {
+      color: inherit;
+    }
+.sd-2-0-0-next-0-headline--inline {
+  display: inline-block;
+}
+.sd-2-0-0-next-0-headline--inline sd-icon {
+    margin-top: calc(var(--sd-spacing-1) * -1);
+    margin-right: var(--sd-spacing-2);
+    vertical-align: middle;
+  }
+.sd-2-0-0-next-0-headline--inline:is(.sd-2-0-0-next-0-headline--size-xl, .sd-2-0-0-next-0-headline--size-lg, .sd-2-0-0-next-0-headline--size-base) sd-icon {
+      margin-right: var(--sd-spacing-0\.5);
+    }
+.sd-2-0-0-next-0-headline--inverted:not(#_), .sd-2-0-0-next-0-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-2-0-0-next-0-headline):not(#_) {
+  color: var(--sd-color-text-white, var(--sd-color-white));
+}
+.sd-2-0-0-next-0-headline--inverted:not(#_) sd-icon, .sd-2-0-0-next-0-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-2-0-0-next-0-headline):not(#_) sd-icon {
+    color: var(--sd-color-text-white, var(--sd-color-white));
+  }
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-font-weight: initial;
+      --tw-leading: initial;
+    }
+  }
 }

package/dist-versioned/modules/hidden-links.css

@@ -1,57 +1,130 @@
-/**
- * Hidden links can be used to show links only for keyboard users.
- * @name sd-1-5-4-hidden-links
- * @status stable
- * @since 3.15.0
- * @boolean sd-1-5-4-hidden-links--multiple Adapts styling for multiple skip links.
- * @boolean sd-1-5-4-hidden-links--debug Always show the links for debugging purposes.
- */
-
+/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
+@layer properties;
 :lang(en) {
   --sd-hidden-links-title: 'Jump to';
 }
-
 :lang(de) {
   --sd-hidden-links-title: 'Springe zu';
 }
-
-.sd-1-5-4-hidden-links:not(:focus-within):not(.sd-1-5-4-hidden-links--debug) {
+.sd-2-0-0-next-0-hidden-links:not(:focus-within):not(.sd-2-0-0-next-0-hidden-links--debug) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+.sd-2-0-0-next-0-hidden-links{
   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-1-5-4-hidden-links {
-  position: absolute;
-  top: var(--sd-spacing-6, 1.5rem) /* 24px */;
-  left: var(--sd-spacing-6, 1.5rem) /* 24px */;
-}
-
-.sd-1-5-4-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-1-5-4-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;
+  top: var(--sd-spacing-6);
+  left: var(--sd-spacing-6);
+}
+.sd-2-0-0-next-0-hidden-links--multiple {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--sd-color-background-white, var(--sd-color-white));
+    padding-inline: var(--sd-spacing-2);
+    padding-block: var(--sd-spacing-4);
+    --tw-shadow: var(--sd-shadow);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+.sd-2-0-0-next-0-hidden-links--multiple:before {
+      padding-inline: var(--sd-spacing-4);
+      padding-block: var(--sd-spacing-2);
+      --tw-font-weight: var(--sd-font-weight-bold);
+      font-weight: var(--sd-font-weight-bold);
       content: var(--sd-hidden-links-title);
+    }
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-font-weight: initial;
+    }
+  }
 }