@saasbase-io/core-elements 1.16.0 → 1.17.0

package/dist/styles.css

@@ -1614,6 +1614,8 @@ body {
  */
 
 :root {
+  --sb-ref-space-width-auto: auto;
+
   --sb-ref-space-fit: fit-content;
   --sb-ref-space-full: 100%;
   --sb-ref-space-auto: auto;
@@ -1698,6 +1700,23 @@ body {
   --sb-ref-width-3: 3px;
 }
 
+/*
+ * ===========================================================================
+ *  BREAKPOINT REFERENCE TOKENS
+ *  sb-ref-breakpoint-*
+ * ===========================================================================
+ */
+
+@custom-media --sb-ref-breakpoint-sm (width >= 40rem);
+
+@custom-media --sb-ref-breakpoint-md (width >= 48rem);
+
+@custom-media --sb-ref-breakpoint-lg (width >= 64rem);
+
+@custom-media --sb-ref-breakpoint-xl (width >= 80rem);
+
+@custom-media --sb-ref-breakpoint-2xl (width >= 96rem);
+
 /*
  * ===========================================================================
  *  SEMANTIC TOKENS INDEX
@@ -1723,7 +1742,7 @@ body {
  * --------------------------------------------------
  */
 
-[data-theme='light'] {
+:root {
   --sb-sem-color-role-bg: var(--sb-ref-color-white);
   --sb-sem-color-role-text: var(--sb-ref-color-base-950);
   --sb-sem-color-role-focus: var(--sb-ref-color-brand-400);
@@ -1750,7 +1769,7 @@ body {
  * --------------------------------------------------
  */
 
-[data-theme='light'] {
+:root {
   --sb-sem-color-bg: var(--sb-sem-color-role-bg);
 }
 
@@ -1760,8 +1779,9 @@ body {
  * --------------------------------------------------
  */
 
-[data-theme='light'] {
-  --sb-sem-color-bg-scrim: var(--sb-ref-color-black) / var(--sb-sem-opacity-scrim);
+:root {
+  --sb-sem-color-bg-scrim: var(--sb-ref-color-black) /
+    var(--sb-sem-opacity-scrim);
 }
 
 /*
@@ -1770,17 +1790,23 @@ body {
  * --------------------------------------------------
  */
 
-[data-theme='light'] {
+:root {
   --sb-sem-color-bg-surface: var(--sb-sem-color-role-bg);
   --sb-sem-color-bg-surface-secondary: var(--sb-ref-color-white);
   --sb-sem-color-bg-surface-tertiary: var(--sb-ref-color-base-100);
-  --sb-sem-color-bg-surface-quaternary: var(--sb-ref-color-base-100) / var(--sb-ref-opacity-50);
+  --sb-sem-color-bg-surface-quaternary: var(--sb-ref-color-base-100) /
+    var(--sb-ref-opacity-50);
 
-  --sb-sem-color-bg-surface-brand: var(--sb-sem-color-role-brand) / var(--sb-sem-opacity-surface);
-  --sb-sem-color-bg-surface-destructive: var(--sb-sem-color-role-destructive) / var(--sb-sem-opacity-surface);
-  --sb-sem-color-bg-surface-warning: var(--sb-sem-color-role-warning) / var(--sb-sem-opacity-surface);
-  --sb-sem-color-bg-surface-success: var(--sb-sem-color-role-success) / var(--sb-sem-opacity-surface);
-  --sb-sem-color-bg-surface-info: var(--sb-sem-color-role-info) / var(--sb-sem-opacity-surface);
+  --sb-sem-color-bg-surface-brand: var(--sb-sem-color-role-brand) /
+    var(--sb-sem-opacity-surface);
+  --sb-sem-color-bg-surface-destructive: var(--sb-sem-color-role-destructive) /
+    var(--sb-sem-opacity-surface);
+  --sb-sem-color-bg-surface-warning: var(--sb-sem-color-role-warning) /
+    var(--sb-sem-opacity-surface);
+  --sb-sem-color-bg-surface-success: var(--sb-sem-color-role-success) /
+    var(--sb-sem-opacity-surface);
+  --sb-sem-color-bg-surface-info: var(--sb-sem-color-role-info) /
+    var(--sb-sem-opacity-surface);
 }
 
 /*
@@ -1789,16 +1815,19 @@ body {
  * --------------------------------------------------
  */
 
-[data-theme='light'] {
-  --sb-sem-color-bg-fill-disabled: var(--sb-ref-color-base-200) / var(--sb-ref-opacity-50);
+:root {
+  --sb-sem-color-bg-fill-disabled: var(--sb-ref-color-base-200) /
+    var(--sb-ref-opacity-50);
 
   --sb-sem-color-bg-fill-unchecked: var(--sb-ref-color-base-200);
   --sb-sem-color-bg-fill-on-fill-unchecked: var(--sb-ref-color-white);
 
   --sb-sem-color-bg-fill-secondary: var(--sb-ref-color-base-100);
-  --sb-sem-color-bg-fill-secondary-hover: var(--sb-ref-color-base-100) / var(--sb-sem-opacity-secondary-hover);
+  --sb-sem-color-bg-fill-secondary-hover: var(--sb-ref-color-base-100) /
+    var(--sb-sem-opacity-secondary-hover);
   /* Secondary badge hover bg */
-  --sb-sem-color-bg-fill-secondary-alt-hover: var(--sb-ref-color-base-100) / var(--sb-sem-opacity-hover);
+  --sb-sem-color-bg-fill-secondary-alt-hover: var(--sb-ref-color-base-100) /
+    var(--sb-sem-opacity-hover);
 
   --sb-sem-color-bg-fill-tertiary: var(--sb-ref-color-white);
   --sb-sem-color-bg-fill-tertiary-hover: var(--sb-ref-color-base-100);
@@ -1811,29 +1840,42 @@ body {
 
   /* BRAND */
   --sb-sem-color-bg-fill-brand: var(--sb-sem-color-role-brand);
-  --sb-sem-color-bg-fill-brand-hover: var(--sb-sem-color-role-brand) / var(--sb-sem-opacity-hover);
+  --sb-sem-color-bg-fill-brand-hover: var(--sb-sem-color-role-brand) /
+    var(--sb-sem-opacity-hover);
 
   --sb-sem-color-bg-fill-brand-on-fill: var(--sb-ref-color-white);
 
   /* DESTRUCTIVE */
   --sb-sem-color-bg-fill-destructive: var(--sb-sem-color-role-destructive);
-  --sb-sem-color-bg-fill-destructive-hover: var(--sb-sem-color-role-destructive) / var(--sb-sem-opacity-hover);
-  --sb-sem-color-bg-fill-destructive-secondary: var(--sb-sem-color-role-destructive) / var(--sb-ref-opacity-10);
-  --sb-sem-color-bg-fill-destructive-secondary-hover: var(--sb-sem-color-role-destructive) / var(--sb-ref-opacity-20);
+  --sb-sem-color-bg-fill-destructive-hover: var(
+      --sb-sem-color-role-destructive
+    ) /
+    var(--sb-sem-opacity-hover);
+  --sb-sem-color-bg-fill-destructive-secondary: var(
+      --sb-sem-color-role-destructive
+    ) /
+    var(--sb-ref-opacity-10);
+  --sb-sem-color-bg-fill-destructive-secondary-hover: var(
+      --sb-sem-color-role-destructive
+    ) /
+    var(--sb-ref-opacity-20);
 
   --sb-sem-color-bg-fill-transparent: var(--sb-ref-color-transparent);
 
   /* WARNING */
   --sb-sem-color-bg-fill-warning: var(--sb-sem-color-role-warning);
-  --sb-sem-color-bg-fill-warning-hover: var(--sb-sem-color-role-warning) / var(--sb-sem-opacity-hover);
+  --sb-sem-color-bg-fill-warning-hover: var(--sb-sem-color-role-warning) /
+    var(--sb-sem-opacity-hover);
 
   /* SUCCESS */
   --sb-sem-color-bg-fill-success: var(--sb-sem-color-role-success);
-  --sb-sem-color-bg-fill-success-hover: var(--sb-sem-color-role-success) / var(--sb-sem-opacity-hover);
+  --sb-sem-color-bg-fill-success-hover: var(--sb-sem-color-role-success) /
+    var(--sb-sem-opacity-hover);
 
   /* INFO */
   --sb-sem-color-bg-fill-info: var(--sb-sem-color-role-info);
-  --sb-sem-color-bg-fill-info-hover: var(--sb-sem-color-role-info) / var(--sb-sem-opacity-hover);
+  --sb-sem-color-bg-fill-info-hover: var(--sb-sem-color-role-info) /
+    var(--sb-sem-opacity-hover);
 }
 
 /*
@@ -1842,13 +1884,14 @@ body {
  * --------------------------------------------------
  */
 
-[data-theme='light'] {
+:root {
   --sb-sem-color-text: var(--sb-sem-color-role-text);
 
   --sb-sem-color-text-secondary: var(--sb-ref-color-base-500);
   --sb-sem-color-text-secondary-on-fill: var(--sb-ref-color-base-900);
 
-  --sb-sem-color-text-tertiary: var(--sb-ref-color-base-950) / var(--sb-ref-opacity-60);
+  --sb-sem-color-text-tertiary: var(--sb-ref-color-base-950) /
+    var(--sb-ref-opacity-60);
 
   --sb-sem-color-text-inverse: var(--sb-sem-color-role-bg);
 
@@ -1856,32 +1899,43 @@ body {
   --sb-sem-color-text-brand: var(--sb-sem-color-role-brand);
   --sb-sem-color-text-brand-on-fill: var(--sb-sem-color-role-on-brand);
 
-  --sb-sem-color-text-brand-secondary: var(--sb-sem-color-role-brand) / var(--sb-sem-opacity-text-secondary);
+  --sb-sem-color-text-brand-secondary: var(--sb-sem-color-role-brand) /
+    var(--sb-sem-opacity-text-secondary);
 
   /* DESTRUCTIVE */
   --sb-sem-color-text-destructive: var(--sb-sem-color-role-destructive);
-  --sb-sem-color-text-destructive-on-fill: var(--sb-sem-color-role-on-destructive);
+  --sb-sem-color-text-destructive-on-fill: var(
+    --sb-sem-color-role-on-destructive
+  );
 
-  --sb-sem-color-text-destructive-secondary: var(--sb-sem-color-role-destructive) / var(--sb-ref-opacity-90);
-  --sb-sem-color-text-destructive-secondary-on-fill: var(--sb-sem-color-role-destructive);
+  --sb-sem-color-text-destructive-secondary: var(
+      --sb-sem-color-role-destructive
+    ) /
+    var(--sb-ref-opacity-90);
+  --sb-sem-color-text-destructive-secondary-on-fill: var(
+    --sb-sem-color-role-destructive
+  );
 
   /* WARNING */
   --sb-sem-color-text-warning: var(--sb-sem-color-role-warning);
   --sb-sem-color-text-warning-on-fill: var(--sb-sem-color-role-on-warning);
 
-  --sb-sem-color-text-warning-secondary: var(--sb-sem-color-role-warning) / var(--sb-sem-opacity-text-secondary);
+  --sb-sem-color-text-warning-secondary: var(--sb-sem-color-role-warning) /
+    var(--sb-sem-opacity-text-secondary);
 
   /* SUCCESS */
   --sb-sem-color-text-success: var(--sb-sem-color-role-success);
   --sb-sem-color-text-success-on-fill: var(--sb-sem-color-role-on-success);
 
-  --sb-sem-color-text-success-secondary: var(--sb-sem-color-role-success) / var(--sb-sem-opacity-text-secondary);
+  --sb-sem-color-text-success-secondary: var(--sb-sem-color-role-success) /
+    var(--sb-sem-opacity-text-secondary);
 
   /* INFO */
   --sb-sem-color-text-info: var(--sb-sem-color-role-info);
   --sb-sem-color-text-info-on-fill: var(--sb-sem-color-role-on-info);
 
-  --sb-sem-color-text-info-secondary: var(--sb-sem-color-role-info) / var(--sb-sem-opacity-text-secondary);
+  --sb-sem-color-text-info-secondary: var(--sb-sem-color-role-info) /
+    var(--sb-sem-opacity-text-secondary);
 }
 
 /*
@@ -1890,7 +1944,7 @@ body {
  * --------------------------------------------------
  */
 
-[data-theme='light'] {
+:root {
   --sb-sem-color-border: var(--sb-ref-color-base-200);
   --sb-sem-color-border-focus: var(--sb-sem-color-role-focus);
   --sb-sem-color-border-invalid: var(--sb-sem-color-role-destructive);
@@ -1903,21 +1957,32 @@ body {
   --sb-sem-color-border-transparent: var(--sb-ref-color-transparent);
 
   --sb-sem-color-border-brand: var(--sb-sem-color-role-brand);
-  --sb-sem-color-border-brand-secondary: var(--sb-sem-color-role-brand) / var(--sb-sem-opacity-border-secondary);
-  --sb-sem-color-border-brand-tertiary: var(--sb-sem-color-role-brand) / var(--sb-ref-opacity-30);
+  --sb-sem-color-border-brand-secondary: var(--sb-sem-color-role-brand) /
+    var(--sb-sem-opacity-border-secondary);
+  --sb-sem-color-border-brand-tertiary: var(--sb-sem-color-role-brand) /
+    var(--sb-ref-opacity-30);
 
   --sb-sem-color-border-destructive: var(--sb-sem-color-role-destructive);
-  --sb-sem-color-border-destructive-secondary: var(--sb-sem-color-role-destructive) / var(--sb-sem-opacity-border-secondary);
-  --sb-sem-color-border-destructive-focus: var(--sb-sem-color-role-destructive) / var(--sb-ref-opacity-40);
+  --sb-sem-color-border-destructive-secondary: var(
+      --sb-sem-color-role-destructive
+    ) /
+    var(--sb-sem-opacity-border-secondary);
+  --sb-sem-color-border-destructive-focus: var(
+      --sb-sem-color-role-destructive
+    ) /
+    var(--sb-ref-opacity-40);
 
   --sb-sem-color-border-warning: var(--sb-sem-color-role-warning);
-  --sb-sem-color-border-warning-secondary: var(--sb-sem-color-role-warning) / var(--sb-sem-opacity-border-secondary);
+  --sb-sem-color-border-warning-secondary: var(--sb-sem-color-role-warning) /
+    var(--sb-sem-opacity-border-secondary);
 
   --sb-sem-color-border-success: var(--sb-sem-color-role-success);
-  --sb-sem-color-border-success-secondary: var(--sb-sem-color-role-success) / var(--sb-sem-opacity-border-secondary);
+  --sb-sem-color-border-success-secondary: var(--sb-sem-color-role-success) /
+    var(--sb-sem-opacity-border-secondary);
 
   --sb-sem-color-border-info: var(--sb-sem-color-role-info);
-  --sb-sem-color-border-info-secondary: var(--sb-sem-color-role-info) / var(--sb-sem-opacity-border-secondary);
+  --sb-sem-color-border-info-secondary: var(--sb-sem-color-role-info) /
+    var(--sb-sem-opacity-border-secondary);
 }
 
 /*
@@ -1926,17 +1991,20 @@ body {
  * --------------------------------------------------
  */
 
-[data-theme='light'] {
-  --sb-sem-color-ring-focus: var(--sb-sem-color-role-focus) / var(--sb-sem-opacity-ring);
+:root {
+  --sb-sem-color-ring-focus: var(--sb-sem-color-role-focus) /
+    var(--sb-sem-opacity-ring);
 
-  --sb-sem-color-ring-destructive: var(--sb-sem-color-role-destructive) / var(--sb-sem-opacity-ring-secondary);
+  --sb-sem-color-ring-destructive: var(--sb-sem-color-role-destructive) /
+    var(--sb-sem-opacity-ring-secondary);
 
   /* Ring color used on elements which use a box shadow to create whitespace
   (e.g. avatar) */
   --sb-sem-color-ring-whitespace: var(--sb-sem-color-role-bg);
 
   /* Weak ring color used for decorative box shadows (e.g. card) */
-  --sb-sem-color-ring-secondary: var(--sb-sem-color-role-text) / var(--sb-ref-opacity-10);
+  --sb-sem-color-ring-secondary: var(--sb-sem-color-role-text) /
+    var(--sb-ref-opacity-10);
 
   /* * RING OFFSET * */
   /* Used for dialog close */
@@ -1993,7 +2061,8 @@ body {
  */
 
 [data-theme='dark'] {
-  --sb-sem-color-bg-scrim: var(--sb-ref-color-black) / var(--sb-sem-opacity-scrim);
+  --sb-sem-color-bg-scrim: var(--sb-ref-color-black) /
+    var(--sb-sem-opacity-scrim);
 }
 
 /*
@@ -2006,13 +2075,19 @@ body {
   --sb-sem-color-bg-surface: var(--sb-sem-color-role-bg);
   --sb-sem-color-bg-surface-secondary: var(--sb-ref-color-base-900);
   --sb-sem-color-bg-surface-tertiary: var(--sb-ref-color-base-800);
-  --sb-sem-color-bg-surface-quaternary: var(--sb-ref-color-base-800) / var(--sb-ref-opacity-50);
+  --sb-sem-color-bg-surface-quaternary: var(--sb-ref-color-base-800) /
+    var(--sb-ref-opacity-50);
 
-  --sb-sem-color-bg-surface-brand: var(--sb-sem-color-role-brand) / var(--sb-sem-opacity-surface);
-  --sb-sem-color-bg-surface-destructive: var(--sb-sem-color-role-destructive) / var(--sb-sem-opacity-surface);
-  --sb-sem-color-bg-surface-warning: var(--sb-sem-color-role-warning) / var(--sb-sem-opacity-surface);
-  --sb-sem-color-bg-surface-success: var(--sb-sem-color-role-success) / var(--sb-sem-opacity-surface);
-  --sb-sem-color-bg-surface-info: var(--sb-sem-color-role-info) / var(--sb-sem-opacity-surface);
+  --sb-sem-color-bg-surface-brand: var(--sb-sem-color-role-brand) /
+    var(--sb-sem-opacity-surface);
+  --sb-sem-color-bg-surface-destructive: var(--sb-sem-color-role-destructive) /
+    var(--sb-sem-opacity-surface);
+  --sb-sem-color-bg-surface-warning: var(--sb-sem-color-role-warning) /
+    var(--sb-sem-opacity-surface);
+  --sb-sem-color-bg-surface-success: var(--sb-sem-color-role-success) /
+    var(--sb-sem-opacity-surface);
+  --sb-sem-color-bg-surface-info: var(--sb-sem-color-role-info) /
+    var(--sb-sem-opacity-surface);
 }
 
 /*
@@ -2022,50 +2097,72 @@ body {
  */
 
 [data-theme='dark'] {
-  --sb-sem-color-bg-fill-disabled: var(--sb-ref-color-white) / var(--sb-ref-opacity-12);
+  --sb-sem-color-bg-fill-disabled: var(--sb-ref-color-white) /
+    var(--sb-ref-opacity-12);
 
-  --sb-sem-color-bg-fill-unchecked: var(--sb-ref-color-white) / var(--sb-ref-opacity-12);
+  --sb-sem-color-bg-fill-unchecked: var(--sb-ref-color-white) /
+    var(--sb-ref-opacity-12);
   --sb-sem-color-bg-fill-on-fill-unchecked: var(--sb-ref-color-base-50);
 
   --sb-sem-color-bg-fill-secondary: var(--sb-ref-color-base-800);
-  --sb-sem-color-bg-fill-secondary-hover: var(--sb-ref-color-base-800) / var(--sb-sem-opacity-secondary-hover);
+  --sb-sem-color-bg-fill-secondary-hover: var(--sb-ref-color-base-800) /
+    var(--sb-sem-opacity-secondary-hover);
   /* Secondary badge hover bg */
-  --sb-sem-color-bg-fill-secondary-alt-hover: var(--sb-ref-color-base-800) / var(--sb-sem-opacity-hover);
+  --sb-sem-color-bg-fill-secondary-alt-hover: var(--sb-ref-color-base-800) /
+    var(--sb-sem-opacity-hover);
 
-  --sb-sem-color-bg-fill-tertiary: var(--sb-ref-color-white) / var(--sb-ref-opacity-4-5);
-  --sb-sem-color-bg-fill-tertiary-hover: var(--sb-ref-color-white) / var(--sb-ref-opacity-7-5);
+  --sb-sem-color-bg-fill-tertiary: var(--sb-ref-color-white) /
+    var(--sb-ref-opacity-4-5);
+  --sb-sem-color-bg-fill-tertiary-hover: var(--sb-ref-color-white) /
+    var(--sb-ref-opacity-7-5);
 
   /* Used for select */
-  --sb-sem-color-bg-fill-quaternary: var(--sb-ref-color-white) / var(--sb-ref-opacity-4-5);
-  --sb-sem-color-bg-fill-quaternary-hover: var(--sb-ref-color-white) / var(--sb-ref-opacity-7-5);
+  --sb-sem-color-bg-fill-quaternary: var(--sb-ref-color-white) /
+    var(--sb-ref-opacity-4-5);
+  --sb-sem-color-bg-fill-quaternary-hover: var(--sb-ref-color-white) /
+    var(--sb-ref-opacity-7-5);
 
   --sb-sem-color-bg-fill-inverse: var(--sb-sem-color-role-text);
 
   /* BRAND */
   --sb-sem-color-bg-fill-brand: var(--sb-sem-color-role-brand);
-  --sb-sem-color-bg-fill-brand-hover: var(--sb-sem-color-role-brand) / var(--sb-sem-opacity-hover);
+  --sb-sem-color-bg-fill-brand-hover: var(--sb-sem-color-role-brand) /
+    var(--sb-sem-opacity-hover);
 
   --sb-sem-color-bg-fill-brand-on-fill: var(--sb-sem-color-role-on-brand);
 
   /* DESTRUCTIVE */
-  --sb-sem-color-bg-fill-destructive: var(--sb-sem-color-role-destructive) / var(--sb-ref-opacity-60);
-  --sb-sem-color-bg-fill-destructive-hover: var(--sb-sem-color-role-destructive) / var(--sb-sem-opacity-hover);
-  --sb-sem-color-bg-fill-destructive-secondary: var(--sb-sem-color-role-destructive) / var(--sb-ref-opacity-20);
-  --sb-sem-color-bg-fill-destructive-secondary-hover: var(--sb-sem-color-role-destructive) / var(--sb-ref-opacity-30);
+  --sb-sem-color-bg-fill-destructive: var(--sb-sem-color-role-destructive) /
+    var(--sb-ref-opacity-60);
+  --sb-sem-color-bg-fill-destructive-hover: var(
+      --sb-sem-color-role-destructive
+    ) /
+    var(--sb-sem-opacity-hover);
+  --sb-sem-color-bg-fill-destructive-secondary: var(
+      --sb-sem-color-role-destructive
+    ) /
+    var(--sb-ref-opacity-20);
+  --sb-sem-color-bg-fill-destructive-secondary-hover: var(
+      --sb-sem-color-role-destructive
+    ) /
+    var(--sb-ref-opacity-30);
 
   --sb-sem-color-bg-fill-transparent: var(--sb-ref-color-transparent);
 
   /* WARNING */
   --sb-sem-color-bg-fill-warning: var(--sb-sem-color-role-warning);
-  --sb-sem-color-bg-fill-warning-hover: var(--sb-sem-color-role-warning) / var(--sb-sem-opacity-hover);
+  --sb-sem-color-bg-fill-warning-hover: var(--sb-sem-color-role-warning) /
+    var(--sb-sem-opacity-hover);
 
   /* SUCCESS */
   --sb-sem-color-bg-fill-success: var(--sb-sem-color-role-success);
-  --sb-sem-color-bg-fill-success-hover: var(--sb-sem-color-role-success) / var(--sb-sem-opacity-hover);
+  --sb-sem-color-bg-fill-success-hover: var(--sb-sem-color-role-success) /
+    var(--sb-sem-opacity-hover);
 
   /* INFO */
   --sb-sem-color-bg-fill-info: var(--sb-sem-color-role-info);
-  --sb-sem-color-bg-fill-info-hover: var(--sb-sem-color-role-info) / var(--sb-sem-opacity-hover);
+  --sb-sem-color-bg-fill-info-hover: var(--sb-sem-color-role-info) /
+    var(--sb-sem-opacity-hover);
 }
 
 /*
@@ -2088,32 +2185,43 @@ body {
   --sb-sem-color-text-brand: var(--sb-sem-color-role-brand);
   --sb-sem-color-text-brand-on-fill: var(--sb-sem-color-role-on-brand);
 
-  --sb-sem-color-text-brand-secondary: var(--sb-sem-color-role-brand) / var(--sb-sem-opacity-text-secondary);
+  --sb-sem-color-text-brand-secondary: var(--sb-sem-color-role-brand) /
+    var(--sb-sem-opacity-text-secondary);
 
   /* DESTRUCTIVE */
   --sb-sem-color-text-destructive: var(--sb-sem-color-role-destructive);
-  --sb-sem-color-text-destructive-on-fill: var(--sb-sem-color-role-on-destructive);
+  --sb-sem-color-text-destructive-on-fill: var(
+    --sb-sem-color-role-on-destructive
+  );
 
-  --sb-sem-color-text-destructive-secondary: var(--sb-sem-color-role-destructive) / var(--sb-ref-opacity-90);
-  --sb-sem-color-text-destructive-secondary-on-fill: var(--sb-sem-color-role-destructive);
+  --sb-sem-color-text-destructive-secondary: var(
+      --sb-sem-color-role-destructive
+    ) /
+    var(--sb-ref-opacity-90);
+  --sb-sem-color-text-destructive-secondary-on-fill: var(
+    --sb-sem-color-role-destructive
+  );
 
   /* WARNING */
   --sb-sem-color-text-warning: var(--sb-sem-color-role-warning);
   --sb-sem-color-text-warning-on-fill: var(--sb-sem-color-role-on-warning);
 
-  --sb-sem-color-text-warning-secondary: var(--sb-sem-color-role-warning) / var(--sb-sem-opacity-text-secondary);
+  --sb-sem-color-text-warning-secondary: var(--sb-sem-color-role-warning) /
+    var(--sb-sem-opacity-text-secondary);
 
   /* SUCCESS */
   --sb-sem-color-text-success: var(--sb-sem-color-role-success);
   --sb-sem-color-text-success-on-fill: var(--sb-sem-color-role-on-success);
 
-  --sb-sem-color-text-success-secondary: var(--sb-sem-color-role-success) / var(--sb-sem-opacity-text-secondary);
+  --sb-sem-color-text-success-secondary: var(--sb-sem-color-role-success) /
+    var(--sb-sem-opacity-text-secondary);
 
   /* INFO */
   --sb-sem-color-text-info: var(--sb-sem-color-role-info);
   --sb-sem-color-text-info-on-fill: var(--sb-sem-color-role-on-info);
 
-  --sb-sem-color-text-info-secondary: var(--sb-sem-color-role-info) / var(--sb-sem-opacity-text-secondary);
+  --sb-sem-color-text-info-secondary: var(--sb-sem-color-role-info) /
+    var(--sb-sem-opacity-text-secondary);
 }
 
 /*
@@ -2126,30 +2234,46 @@ body {
   --sb-sem-color-border: var(--sb-ref-color-white) / var(--sb-ref-opacity-10);
   --sb-sem-color-border-focus: var(--sb-sem-color-role-focus);
   --sb-sem-color-border-invalid: var(--sb-sem-color-role-destructive);
-  --sb-sem-color-border-invalid-secondary: var(--sb-sem-color-role-destructive) / var(--sb-ref-opacity-50);
+  --sb-sem-color-border-invalid-secondary: var(
+      --sb-sem-color-role-destructive
+    ) /
+    var(--sb-ref-opacity-50);
 
-  --sb-sem-color-border-secondary: var(--sb-ref-color-white) / var(--sb-ref-opacity-15);
+  --sb-sem-color-border-secondary: var(--sb-ref-color-white) /
+    var(--sb-ref-opacity-15);
 
-  --sb-sem-color-border-tertiary: var(--sb-ref-color-white) / var(--sb-ref-opacity-15);
+  --sb-sem-color-border-tertiary: var(--sb-ref-color-white) /
+    var(--sb-ref-opacity-15);
 
   --sb-sem-color-border-transparent: var(--sb-ref-color-transparent);
 
   --sb-sem-color-border-brand: var(--sb-sem-color-role-brand);
-  --sb-sem-color-border-brand-secondary: var(--sb-sem-color-role-brand) / var(--sb-sem-opacity-border-secondary);
-  --sb-sem-color-border-brand-tertiary: var(--sb-sem-color-role-brand) / var(--sb-ref-opacity-20);
+  --sb-sem-color-border-brand-secondary: var(--sb-sem-color-role-brand) /
+    var(--sb-sem-opacity-border-secondary);
+  --sb-sem-color-border-brand-tertiary: var(--sb-sem-color-role-brand) /
+    var(--sb-ref-opacity-20);
 
   --sb-sem-color-border-destructive: var(--sb-sem-color-role-destructive);
-  --sb-sem-color-border-destructive-secondary: var(--sb-sem-color-role-destructive) / var(--sb-sem-opacity-border-secondary);
-  --sb-sem-color-border-destructive-focus: var(--sb-sem-color-role-destructive) / var(--sb-ref-opacity-40);
+  --sb-sem-color-border-destructive-secondary: var(
+      --sb-sem-color-role-destructive
+    ) /
+    var(--sb-sem-opacity-border-secondary);
+  --sb-sem-color-border-destructive-focus: var(
+      --sb-sem-color-role-destructive
+    ) /
+    var(--sb-ref-opacity-40);
 
   --sb-sem-color-border-warning: var(--sb-sem-color-role-warning);
-  --sb-sem-color-border-warning-secondary: var(--sb-sem-color-role-warning) / var(--sb-sem-opacity-border-secondary);
+  --sb-sem-color-border-warning-secondary: var(--sb-sem-color-role-warning) /
+    var(--sb-sem-opacity-border-secondary);
 
   --sb-sem-color-border-success: var(--sb-sem-color-role-success);
-  --sb-sem-color-border-success-secondary: var(--sb-sem-color-role-success) / var(--sb-sem-opacity-border-secondary);
+  --sb-sem-color-border-success-secondary: var(--sb-sem-color-role-success) /
+    var(--sb-sem-opacity-border-secondary);
 
   --sb-sem-color-border-info: var(--sb-sem-color-role-info);
-  --sb-sem-color-border-info-secondary: var(--sb-sem-color-role-info) / var(--sb-sem-opacity-border-secondary);
+  --sb-sem-color-border-info-secondary: var(--sb-sem-color-role-info) /
+    var(--sb-sem-opacity-border-secondary);
 }
 
 /*
@@ -2159,16 +2283,19 @@ body {
  */
 
 [data-theme='dark'] {
-  --sb-sem-color-ring-focus: var(--sb-sem-color-role-focus) / var(--sb-sem-opacity-ring);
+  --sb-sem-color-ring-focus: var(--sb-sem-color-role-focus) /
+    var(--sb-sem-opacity-ring);
 
-  --sb-sem-color-ring-destructive: var(--sb-sem-color-role-destructive) / var(--sb-sem-opacity-ring-secondary);
+  --sb-sem-color-ring-destructive: var(--sb-sem-color-role-destructive) /
+    var(--sb-sem-opacity-ring-secondary);
 
   /* Ring color used on elements which use a box shadow to create whitespace
   (e.g. avatar) */
   --sb-sem-color-ring-whitespace: var(--sb-sem-color-role-bg);
 
   /* Weak ring color used for decorative box shadows (e.g. card) */
-  --sb-sem-color-ring-secondary: var(--sb-sem-color-role-text) / var(--sb-ref-opacity-10);
+  --sb-sem-color-ring-secondary: var(--sb-sem-color-role-text) /
+    var(--sb-ref-opacity-10);
 
   /* * RING OFFSET * */
   /* Used for dialog close */
@@ -3669,6 +3796,7 @@ body {
  */
 
 :root {
+  --rtg-card-space-width: var(--sb-ref-space-width-auto);
   --rtg-card-space-gap: var(--sb-sem-space-layout-gap);
   --rtg-card-space-gap-sm: var(--sb-sem-space-layout-gap-sm);
 
@@ -3713,8 +3841,12 @@ body {
 :root {
   --rtg-card-title-font-size: var(--sb-sem-font-content-heading-size-sm);
   --rtg-card-title-font-size-sm: var(--sb-sem-font-content-heading-size-xs);
-  --rtg-card-title-font-line-height: var(--sb-sem-font-content-heading-line-height-sm);
-  --rtg-card-title-font-line-height-sm: var(--sb-sem-font-content-heading-line-height-xs);
+  --rtg-card-title-font-line-height: var(
+    --sb-sem-font-content-heading-line-height-sm
+  );
+  --rtg-card-title-font-line-height-sm: var(
+    --sb-sem-font-content-heading-line-height-xs
+  );
   --rtg-card-title-font-weight: var(--sb-sem-font-content-heading-weight-sm);
 }
 
@@ -3726,7 +3858,9 @@ body {
 
 :root {
   --rtg-card-description-font-size: var(--sb-sem-font-content-body-size);
-  --rtg-card-description-font-line-height: var(--sb-sem-font-content-body-line-height);
+  --rtg-card-description-font-line-height: var(
+    --sb-sem-font-content-body-line-height
+  );
   --rtg-card-description-color-text: hsl(var(--sb-sem-color-text-secondary));
 }
 
@@ -6518,16 +6652,24 @@ body {
  */
 
 :root {
-  --rtg-typography-h-space-scroll-m: var(--sb-sem-space-typography-heading-scroll-m);
+  --rtg-typography-h-color-text: inherit;
+
+  --rtg-typography-h-space-scroll-m: var(
+    --sb-sem-space-typography-heading-scroll-m
+  );
   --rtg-typography-h-font-family: var(--sb-sem-font-heading-family);
   --rtg-typography-h-font-weight: var(--sb-sem-font-heading-weight);
-  --rtg-typography-h-font-letter-spacing: var(--sb-sem-font-heading-letter-spacing);
+  --rtg-typography-h-font-letter-spacing: var(
+    --sb-sem-font-heading-letter-spacing
+  );
 
   /* * LEVELS * */
 
   /* LEVEL 1 */
   --rtg-typography-h-h1-font-size: var(--sb-sem-font-heading-size-h1);
-  --rtg-typography-h-h1-font-line-height: var(--sb-sem-font-heading-line-height-h1);
+  --rtg-typography-h-h1-font-line-height: var(
+    --sb-sem-font-heading-line-height-h1
+  );
   --rtg-typography-h-h1-font-weight: var(--sb-sem-font-heading-weight-h1);
 
   /* LEVEL 2 */
@@ -6535,7 +6677,9 @@ body {
   --rtg-typography-h-h2-space-mt: var(--sb-sem-space-typography-xl);
 
   --rtg-typography-h-h2-font-size: var(--sb-sem-font-heading-size-h2);
-  --rtg-typography-h-h2-font-line-height: var(--sb-sem-font-heading-line-height-h2);
+  --rtg-typography-h-h2-font-line-height: var(
+    --sb-sem-font-heading-line-height-h2
+  );
   --rtg-typography-h-h2-font-weight: var(--sb-sem-font-heading-weight);
 
   --rtg-typography-h-h2-width-border: var(--sb-sem-width-border);
@@ -6545,13 +6689,17 @@ body {
   --rtg-typography-h-h3-space-mt: var(--sb-sem-space-typography-lg);
 
   --rtg-typography-h-h3-font-size: var(--sb-sem-font-heading-size-h3);
-  --rtg-typography-h-h3-font-line-height: var(--sb-sem-font-heading-line-height-h3);
+  --rtg-typography-h-h3-font-line-height: var(
+    --sb-sem-font-heading-line-height-h3
+  );
 
   /* LEVEL 4 */
   --rtg-typography-h-h4-space-mt: var(--sb-sem-space-typography);
 
   --rtg-typography-h-h4-font-size: var(--sb-sem-font-heading-size-h4);
-  --rtg-typography-h-h4-font-line-height: var(--sb-sem-font-heading-line-height-h4);
+  --rtg-typography-h-h4-font-line-height: var(
+    --sb-sem-font-heading-line-height-h4
+  );
   --rtg-typography-h-h4-font-weight: var(--sb-sem-font-heading-weight);
 }
 
@@ -6570,6 +6718,7 @@ body {
   --rtg-typography-p-font-line-height: var(--sb-sem-font-paragraph-line-height);
   --rtg-typography-p-font-weight: var(--sb-sem-font-weight);
   --rtg-typography-p-font-letter-spacing: var(--sb-sem-font-letter-spacing);
+  --rtg-typography-p-color-text: inherit;
 
   --rtg-typography-p-link-color-text: hsl(var(--sb-sem-color-text-brand));
   --rtg-typography-p-link-font-weight: var(--sb-sem-font-link-weight);
@@ -6590,9 +6739,13 @@ body {
   --rtg-typography-blockquote-font-size-vw-sm: var(--sb-sem-font-size-vw-sm);
   --rtg-typography-blockquote-font-line-height: var(--sb-sem-font-line-height);
   --rtg-typography-blockquote-font-weight: var(--sb-sem-font-weight);
-  --rtg-typography-blockquote-font-letter-spacing: var(--sb-sem-font-letter-spacing);
+  --rtg-typography-blockquote-font-letter-spacing: var(
+    --sb-sem-font-letter-spacing
+  );
 
-  --rtg-typography-blockquote-width-border: var(--sb-sem-width-border-decorative);
+  --rtg-typography-blockquote-width-border: var(
+    --sb-sem-width-border-decorative
+  );
   --rtg-typography-blockquote-color-border: hsl(var(--sb-sem-color-border));
 }
 
@@ -6619,8 +6772,12 @@ body {
   --rtg-typography-table-row-width-border: var(--sb-sem-width-border);
   --rtg-typography-table-row-color-border: hsl(var(--sb-sem-color-border));
 
-  --rtg-typography-table-row-color-text-even: hsl(var(--sb-sem-color-text-secondary-on-fill));
-  --rtg-typography-table-row-color-bg-even: hsl(var(--sb-sem-color-bg-fill-secondary));
+  --rtg-typography-table-row-color-text-even: hsl(
+    var(--sb-sem-color-text-secondary-on-fill)
+  );
+  --rtg-typography-table-row-color-bg-even: hsl(
+    var(--sb-sem-color-bg-fill-secondary)
+  );
 
   /* * TABLE CELL * */
   --rtg-typography-table-cell-space-px: var(--sb-sem-space-typography-sm);
@@ -6629,7 +6786,9 @@ body {
   --rtg-typography-table-cell-width-border: var(--sb-sem-width-border);
   --rtg-typography-table-cell-color-border: hsl(var(--sb-sem-color-border));
 
-  --rtg-typography-table-cell-header-font-weight: var(--sb-ref-font-weight-bold);
+  --rtg-typography-table-cell-header-font-weight: var(
+    --sb-ref-font-weight-bold
+  );
 }
 
 /*
@@ -6662,12 +6821,16 @@ body {
   --rtg-typography-code-space-px: var(--sb-sem-space-typography-xs);
   --rtg-typography-code-space-py: var(--sb-sem-space-typography-2xs);
 
-  --rtg-typography-code-color-text: hsl(var(--sb-sem-color-text-secondary-on-fill));
+  --rtg-typography-code-color-text: hsl(
+    var(--sb-sem-color-text-secondary-on-fill)
+  );
   --rtg-typography-code-font-family: var(--sb-sem-font-code-family);
   --rtg-typography-code-font-size: var(--sb-sem-font-code-size);
   --rtg-typography-code-font-line-height: var(--sb-sem-font-code-line-height);
   --rtg-typography-code-font-weight: var(--sb-sem-font-code-weight);
-  --rtg-typography-code-font-letter-spacing: var(--sb-sem-font-code-letter-spacing);
+  --rtg-typography-code-font-letter-spacing: var(
+    --sb-sem-font-code-letter-spacing
+  );
 
   --rtg-typography-code-color-bg: hsl(var(--sb-sem-color-bg-fill-secondary));
 
@@ -7739,7 +7902,12 @@ rtg-button > [data-slot="button"][data-size="icon"] svg {
  * --------------------------------------------------
  */
 
-rtg-card > [data-slot="card"] {
+rtg-card {
+  width: var(--rtg-card-space-width);
+}
+
+rtg-card > [data-slot='card'] {
+  width: 100%;
   display: flex;
   overflow: hidden;
 
@@ -7765,27 +7933,27 @@ rtg-card > [data-slot="card"] {
     0 0 rgb(0 0 0);
 }
 
-rtg-card > [data-slot="card"][data-size="sm"] {
+rtg-card > [data-slot='card'][data-size='sm'] {
   gap: var(--rtg-card-space-gap-sm);
 
   padding-top: var(--rtg-card-space-py-sm);
   padding-bottom: var(--rtg-card-space-py-sm);
 }
 
-rtg-card > [data-slot=card]:has([data-slot=card-footer][data-border]) {
+rtg-card > [data-slot='card']:has([data-slot='card-footer'][data-border]) {
   padding-bottom: 0;
 }
 
-rtg-card > [data-slot="card"]:has(> img:first-child) {
+rtg-card > [data-slot='card']:has(> img:first-child) {
   padding-top: 0;
 }
 
-rtg-card [data-slot="card"] > img:first-child {
+rtg-card [data-slot='card'] > img:first-child {
   border-top-left-radius: var(--rtg-card-radius);
   border-top-right-radius: var(--rtg-card-radius);
 }
 
-rtg-card [data-slot="card"] > img:last-child {
+rtg-card [data-slot='card'] > img:last-child {
   border-bottom-left-radius: var(--rtg-card-radius);
   border-bottom-right-radius: var(--rtg-card-radius);
 }
@@ -7796,7 +7964,7 @@ rtg-card [data-slot="card"] > img:last-child {
  * --------------------------------------------------
  */
 
-rtg-card-header > [data-slot="card-header"] {
+rtg-card-header > [data-slot='card-header'] {
   display: grid;
   grid-auto-rows: min-content;
   align-items: start;
@@ -7806,25 +7974,32 @@ rtg-card-header > [data-slot="card-header"] {
   padding-right: var(--rtg-card-space-px);
 }
 
-rtg-card > [data-slot="card"][data-size="sm"] > rtg-card-header > [data-slot="card-header"] {
+rtg-card
+  > [data-slot='card'][data-size='sm']
+  > rtg-card-header
+  > [data-slot='card-header'] {
   padding-left: var(--rtg-card-space-px-sm);
   padding-right: var(--rtg-card-space-px-sm);
 }
 
-rtg-card-header > [data-slot="card-header"][data-border] {
+rtg-card-header > [data-slot='card-header'][data-border] {
   padding-bottom: var(--rtg-card-space-py);
-  border-bottom: var(--rtg-card-header-width-border) solid var(--rtg-card-header-color-border);
+  border-bottom: var(--rtg-card-header-width-border) solid
+    var(--rtg-card-header-color-border);
 }
 
-rtg-card > [data-slot="card"][data-size="sm"] > rtg-card-header > [data-slot="card-header"][data-border] {
+rtg-card
+  > [data-slot='card'][data-size='sm']
+  > rtg-card-header
+  > [data-slot='card-header'][data-border] {
   padding-bottom: var(--rtg-card-space-py-sm);
 }
 
-rtg-card-header > [data-slot="card-header"]:has(> rtg-card-description) {
+rtg-card-header > [data-slot='card-header']:has(> rtg-card-description) {
   grid-template-rows: auto auto;
 }
 
-rtg-card-header > [data-slot="card-header"]:has(> rtg-card-action) {
+rtg-card-header > [data-slot='card-header']:has(> rtg-card-action) {
   grid-template-columns: 1fr auto;
 }
 
@@ -7834,13 +8009,16 @@ rtg-card-header > [data-slot="card-header"]:has(> rtg-card-action) {
  * --------------------------------------------------
  */
 
-rtg-card-title > [data-slot="card-title"] {
+rtg-card-title > [data-slot='card-title'] {
   font-size: var(--rtg-card-title-font-size);
   line-height: var(--rtg-card-title-font-line-height);
   font-weight: var(--rtg-card-title-font-weight);
 }
 
-rtg-card > [data-slot="card"][data-size="sm"] rtg-card-title > [data-slot="card-title"] {
+rtg-card
+  > [data-slot='card'][data-size='sm']
+  rtg-card-title
+  > [data-slot='card-title'] {
   font-size: var(--rtg-card-title-font-size-sm);
   line-height: var(--rtg-card-title-font-line-height-sm);
 }
@@ -7851,7 +8029,7 @@ rtg-card > [data-slot="card"][data-size="sm"] rtg-card-title > [data-slot="card-
  * --------------------------------------------------
  */
 
-rtg-card-description > [data-slot="card-description"] {
+rtg-card-description > [data-slot='card-description'] {
   font-size: var(--rtg-card-description-font-size);
   line-height: var(--rtg-card-description-font-line-height);
   color: var(--rtg-card-description-color-text);
@@ -7877,12 +8055,15 @@ rtg-card-action {
  * --------------------------------------------------
  */
 
-rtg-card-content > [data-slot="card-content"] {
+rtg-card-content > [data-slot='card-content'] {
   padding-left: var(--rtg-card-space-px);
   padding-right: var(--rtg-card-space-px);
 }
 
-rtg-card > [data-slot="card"][data-size="sm"] > rtg-card-content > [data-slot="card-content"] {
+rtg-card
+  > [data-slot='card'][data-size='sm']
+  > rtg-card-content
+  > [data-slot='card-content'] {
   padding-left: var(--rtg-card-space-px-sm);
   padding-right: var(--rtg-card-space-px-sm);
 }
@@ -7893,7 +8074,7 @@ rtg-card > [data-slot="card"][data-size="sm"] > rtg-card-content > [data-slot="c
  * --------------------------------------------------
  */
 
-rtg-card-footer > [data-slot="card-footer"] {
+rtg-card-footer > [data-slot='card-footer'] {
   display: flex;
   align-items: center;
 
@@ -7901,18 +8082,25 @@ rtg-card-footer > [data-slot="card-footer"] {
   padding-right: var(--rtg-card-space-px);
 }
 
-rtg-card > [data-slot="card"][data-size="sm"] > rtg-card-footer > [data-slot="card-footer"] {
+rtg-card
+  > [data-slot='card'][data-size='sm']
+  > rtg-card-footer
+  > [data-slot='card-footer'] {
   padding-left: var(--rtg-card-space-px-sm);
   padding-right: var(--rtg-card-space-px-sm);
 }
 
-rtg-card-footer > [data-slot="card-footer"][data-border] {
+rtg-card-footer > [data-slot='card-footer'][data-border] {
   padding-block: var(--rtg-card-space-py);
   background-color: hsl(var(--sb-sem-color-bg-surface-quaternary));
-  border-top: var(--rtg-card-footer-width-border) solid var(--rtg-card-footer-color-border);
+  border-top: var(--rtg-card-footer-width-border) solid
+    var(--rtg-card-footer-color-border);
 }
 
-rtg-card > [data-slot="card"][data-size="sm"] > rtg-card-footer > [data-slot="card-footer"][data-border] {
+rtg-card
+  > [data-slot='card'][data-size='sm']
+  > rtg-card-footer
+  > [data-slot='card-footer'][data-border] {
   padding-block: var(--rtg-card-space-py-sm);
 }
 
@@ -10000,8 +10188,9 @@ rtg-textarea > [data-slot=textarea]::placeholder {
  * --------------------------------------------------
  */
 
-rtg-typography-h > [data-slot=typography-h] {
+rtg-typography-h > [data-slot='typography-h'] {
   scroll-margin: var(--rtg-typography-h-space-scroll-m);
+  color: var(--rtg-typography-h-color-text);
 
   font-family: var(--rtg-typography-h-font-family);
   font-weight: var(--rtg-typography-h-font-weight);
@@ -10012,7 +10201,7 @@ rtg-typography-h > [data-slot=typography-h] {
 
 /* LEVEL 1 */
 
-rtg-typography-h > [data-slot=typography-h][data-level=h1] {
+rtg-typography-h > [data-slot='typography-h'][data-level='h1'] {
   font-size: var(--rtg-typography-h-h1-font-size);
   line-height: var(--rtg-typography-h-h1-font-line-height);
   font-weight: var(--rtg-typography-h-h1-font-weight);
@@ -10021,38 +10210,42 @@ rtg-typography-h > [data-slot=typography-h][data-level=h1] {
 
 /* LEVEL 2 */
 
-rtg-typography-h > [data-slot=typography-h][data-level=h2] {
+rtg-typography-h > [data-slot='typography-h'][data-level='h2'] {
   padding-bottom: var(--rtg-typography-h-h2-space-pb);
 
   font-size: var(--rtg-typography-h-h2-font-size);
   line-height: var(--rtg-typography-h-h2-font-line-height);
 
-  border-bottom: var(--rtg-typography-h-h2-width-border) solid var(--rtg-typography-h-h2-color-border);
+  border-bottom: var(--rtg-typography-h-h2-width-border) solid
+    var(--rtg-typography-h-h2-color-border);
 }
 
-rtg-typography-h:not(:first-child) > [data-slot=typography-h][data-level=h2] {
+rtg-typography-h:not(:first-child)
+  > [data-slot='typography-h'][data-level='h2'] {
   margin-top: var(--rtg-typography-h-h2-space-mt);
 }
 
 /* LEVEL 3 */
 
-rtg-typography-h > [data-slot=typography-h][data-level=h3] {
+rtg-typography-h > [data-slot='typography-h'][data-level='h3'] {
   font-size: var(--rtg-typography-h-h3-font-size);
   line-height: var(--rtg-typography-h-h3-font-line-height);
 }
 
-rtg-typography-h:not(:first-child) > [data-slot=typography-h][data-level=h3] {
+rtg-typography-h:not(:first-child)
+  > [data-slot='typography-h'][data-level='h3'] {
   margin-top: var(--rtg-typography-h-h3-space-mt);
 }
 
 /* LEVEL 4 */
 
-rtg-typography-h > [data-slot=typography-h][data-level=h4] {
+rtg-typography-h > [data-slot='typography-h'][data-level='h4'] {
   font-size: var(--rtg-typography-h-h4-font-size);
   line-height: var(--rtg-typography-h-h4-font-line-height);
 }
 
-rtg-typography-h:not(:first-child) > [data-slot=typography-h][data-level=h4] {
+rtg-typography-h:not(:first-child)
+  > [data-slot='typography-h'][data-level='h4'] {
   margin-top: var(--rtg-typography-h-h4-space-mt);
 }
 
@@ -10062,25 +10255,26 @@ rtg-typography-h:not(:first-child) > [data-slot=typography-h][data-level=h4] {
  * --------------------------------------------------
  */
 
-rtg-typography-p > [data-slot=typography-p] {
+rtg-typography-p > [data-slot='typography-p'] {
   font-family: var(--rtg-typography-p-font-family);
   font-size: var(--rtg-typography-p-font-size-vw-sm);
   line-height: var(--rtg-typography-p-font-line-height);
   font-weight: var(--rtg-typography-p-font-weight);
   letter-spacing: var(--rtg-typography-p-font-letter-spacing);
+  color: var(--rtg-typography-p-color-text);
 }
 
-rtg-typography-p:not(:first-child) > [data-slot=typography-p] {
+rtg-typography-p:not(:first-child) > [data-slot='typography-p'] {
   margin-top: var(--rtg-typography-p-space-mt);
 }
 
 @media (width >= 48rem) {
-  rtg-typography-p > [data-slot=typography-p] {
+  rtg-typography-p > [data-slot='typography-p'] {
     font-size: var(--rtg-typography-p-font-size);
   }
 }
 
-rtg-typography-p > [data-slot=typography-p] > a {
+rtg-typography-p > [data-slot='typography-p'] > a {
   color: var(--rtg-typography-p-link-color-text);
   font-weight: var(--rtg-typography-p-link-font-weight);
   text-decoration-line: underline;
@@ -10093,7 +10287,7 @@ rtg-typography-p > [data-slot=typography-p] > a {
  * --------------------------------------------------
  */
 
-rtg-typography-blockquote > [data-slot=typography-blockquote] {
+rtg-typography-blockquote > [data-slot='typography-blockquote'] {
   padding-left: var(--rtg-typography-blockquote-space-pl);
 
   font-family: var(--rtg-typography-blockquote-font-family);
@@ -10103,15 +10297,17 @@ rtg-typography-blockquote > [data-slot=typography-blockquote] {
   letter-spacing: var(--rtg-typography-blockquote-font-letter-spacing);
   font-style: italic;
 
-  border-left: var(--rtg-typography-blockquote-width-border) solid var(--rtg-typography-blockquote-color-border);
+  border-left: var(--rtg-typography-blockquote-width-border) solid
+    var(--rtg-typography-blockquote-color-border);
 }
 
-rtg-typography-blockquote:not(:first-child) > [data-slot=typography-blockquote] {
+rtg-typography-blockquote:not(:first-child)
+  > [data-slot='typography-blockquote'] {
   margin-top: var(--rtg-typography-blockquote-space-mt);
 }
 
 @media (width >= 48rem) {
-  rtg-typography-blockquote > [data-slot=typography-blockquote] {
+  rtg-typography-blockquote > [data-slot='typography-blockquote'] {
     font-size: var(--rtg-typography-blockquote-font-size);
   }
 }
@@ -10142,7 +10338,8 @@ rtg-typography-table tr {
   padding: var(--rtg-typography-table-row-space-p);
   margin: var(--rtg-typography-table-row-space-m);
 
-  border-top: var(--rtg-typography-table-row-width-border) solid var(--rtg-typography-table-row-color-border);
+  border-top: var(--rtg-typography-table-row-width-border) solid
+    var(--rtg-typography-table-row-color-border);
 }
 
 rtg-typography-table tr:nth-child(2n) {
@@ -10163,7 +10360,8 @@ rtg-typography-table :is(th, td) {
   letter-spacing: var(--rtg-typography-table-font-letter-spacing);
   text-align: left;
 
-  border: var(--rtg-typography-table-cell-width-border) solid var(--rtg-typography-table-cell-color-border);
+  border: var(--rtg-typography-table-cell-width-border) solid
+    var(--rtg-typography-table-cell-color-border);
 }
 
 @media (width >= 48rem) {
@@ -10184,20 +10382,20 @@ rtg-typography-table th {
  * --------------------------------------------------
  */
 
-rtg-typography-list > [data-slot=typography-list] {
+rtg-typography-list > [data-slot='typography-list'] {
   margin-left: var(--rtg-typography-list-space-ml);
   margin-bottom: var(--rtg-typography-list-space-my);
 
   list-style-type: disc;
 }
 
-rtg-typography-list:not(:first-child) > [data-slot=typography-list] {
+rtg-typography-list:not(:first-child) > [data-slot='typography-list'] {
   margin-top: var(--rtg-typography-list-space-my);
 }
 
 /* * LIST ITEM * */
 
-rtg-typography-list > [data-slot=typography-list] > li {
+rtg-typography-list > [data-slot='typography-list'] > li {
   font-family: var(--rtg-typography-list-font-family);
   font-size: var(--rtg-typography-list-font-size-vw-sm);
   line-height: var(--rtg-typography-list-font-line-height);
@@ -10205,12 +10403,12 @@ rtg-typography-list > [data-slot=typography-list] > li {
   letter-spacing: var(--rtg-typography-list-font-letter-spacing);
 }
 
-rtg-typography-list > [data-slot=typography-list] > li:not(:first-child) {
+rtg-typography-list > [data-slot='typography-list'] > li:not(:first-child) {
   margin-top: var(--rtg-typography-list-item-space-mt);
 }
 
 @media (width >= 48rem) {
-  rtg-typography-list > [data-slot=typography-list] > li {
+  rtg-typography-list > [data-slot='typography-list'] > li {
     font-size: var(--rtg-typography-list-font-size);
   }
 }
@@ -10221,7 +10419,7 @@ rtg-typography-list > [data-slot=typography-list] > li:not(:first-child) {
  * --------------------------------------------------
  */
 
-rtg-typography-code > [data-slot=typography-code] {
+rtg-typography-code > [data-slot='typography-code'] {
   position: relative;
 
   padding-inline: var(--rtg-typography-code-space-px);
@@ -10244,7 +10442,7 @@ rtg-typography-code > [data-slot=typography-code] {
  * --------------------------------------------------
  */
 
-rtg-typography-lead > [data-slot=typography-lead] {
+rtg-typography-lead > [data-slot='typography-lead'] {
   color: var(--rtg-typography-lead-color-text);
   font-family: var(--rtg-typography-lead-font-family);
   font-size: var(--rtg-typography-lead-font-size);
@@ -10253,7 +10451,7 @@ rtg-typography-lead > [data-slot=typography-lead] {
   letter-spacing: var(--rtg-typography-lead-font-letter-spacing);
 }
 
-rtg-typography-lead:not(:first-child) > [data-slot=typography-lead] {
+rtg-typography-lead:not(:first-child) > [data-slot='typography-lead'] {
   margin-top: var(--rtg-typography-lead-space-mt);
 }
 
@@ -10263,7 +10461,7 @@ rtg-typography-lead:not(:first-child) > [data-slot=typography-lead] {
  * --------------------------------------------------
  */
 
-rtg-typography-large > [data-slot=typography-large] {
+rtg-typography-large > [data-slot='typography-large'] {
   font-family: var(--rtg-typography-large-font-family);
   font-size: var(--rtg-typography-large-font-size);
   line-height: var(--rtg-typography-large-font-line-height);
@@ -10277,7 +10475,7 @@ rtg-typography-large > [data-slot=typography-large] {
  * --------------------------------------------------
  */
 
-rtg-typography-small > [data-slot=typography-small] {
+rtg-typography-small > [data-slot='typography-small'] {
   font-family: var(--rtg-typography-small-font-family);
   font-size: var(--rtg-typography-small-font-size);
   line-height: var(--rtg-typography-small-font-line-height);
@@ -10291,7 +10489,7 @@ rtg-typography-small > [data-slot=typography-small] {
  * --------------------------------------------------
  */
 
-rtg-typography-muted > [data-slot=typography-muted] {
+rtg-typography-muted > [data-slot='typography-muted'] {
   color: var(--rtg-typography-muted-color-text);
   font-family: var(--rtg-typography-muted-font-family);
   font-size: var(--rtg-typography-muted-font-size);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasbase-io/core-elements",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "license": "MIT",
   "description": "A collection saas based related components",
   "main": "dist/index.js",
@@ -64,7 +64,7 @@
     "@lit/context": "^1.1.0",
     "@lit/react": "^1.0.8",
     "@lit/reactive-element": "^2.1.0",
-    "@revotech-group/revotech-ui-kit": "^0.2.5",
+    "@revotech-group/revotech-ui-kit": "^0.2.7",
     "@saasbase-io/loginflow-websdk": "^1.10.5",
     "@storybook/web-components": "^10.3.6",
     "jsoneditor": "^10.2.0",