@revotech-group/revotech-ui-kit 0.2.5 → 0.2.6

package/dist/library.css

@@ -317,6 +317,8 @@
  * ===========================================================================
  */
 :root {
+  --sb-ref-space-width-auto: auto;
+
   --sb-ref-space-fit: fit-content;
   --sb-ref-space-full: 100%;
   --sb-ref-space-auto: auto;
@@ -398,6 +400,23 @@
   --sb-ref-width-2: 2px;
   --sb-ref-width-3: 3px;
 }
+/*
+ * ===========================================================================
+ *  BREAKPOINT REFERENCE TOKENS
+ *  sb-ref-breakpoint-*
+ * ===========================================================================
+ */
+:root {
+  /*
+   * BASE BREAKPOINTS — following Tailwind defaults
+   */
+
+  --sb-ref-breakpoint-sm: 40rem; /* Tailwind “sm” */
+  --sb-ref-breakpoint-md: 48rem; /* Tailwind “md” */
+  --sb-ref-breakpoint-lg: 64rem; /* Tailwind “lg” */
+  --sb-ref-breakpoint-xl: 80rem; /* Tailwind “xl” */
+  --sb-ref-breakpoint-2xl: 96rem; /* Tailwind “2xl” */
+}
 /*
  * ===========================================================================
  *  SEMANTIC TOKENS INDEX
@@ -419,7 +438,7 @@
  *  ROLE
  * --------------------------------------------------
  */
-[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);
@@ -444,7 +463,7 @@
  *  BACKGROUND (bg)
  * --------------------------------------------------
  */
-[data-theme='light'] {
+:root {
   --sb-sem-color-bg: var(--sb-sem-color-role-bg);
 }
 /*
@@ -452,41 +471,51 @@
  *  BACKGROUND SCRIM (bg-scrim)
  * --------------------------------------------------
  */
-[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);
 }
 /*
  * --------------------------------------------------
  *  BACKGROUND SURFACE (bg-surface)
  * --------------------------------------------------
  */
-[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);
 }
 /*
  * --------------------------------------------------
  *  BACKGROUND FILL (bg-fill)
  * --------------------------------------------------
  */
-[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);
@@ -499,42 +528,56 @@
 
   /* 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);
 }
 /*
  * --------------------------------------------------
  *  TEXT
  * --------------------------------------------------
  */
-[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);
 
@@ -542,39 +585,50 @@
   --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);
 }
 /*
  * --------------------------------------------------
  *  BORDER
  * --------------------------------------------------
  */
-[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);
@@ -587,38 +641,52 @@
   --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);
 }
 /*
  * --------------------------------------------------
  *  RING
  * --------------------------------------------------
  */
-[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 */
@@ -668,7 +736,8 @@
  * --------------------------------------------------
  */
 [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);
 }
 /*
  * --------------------------------------------------
@@ -679,13 +748,19 @@
   --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);
 }
 /*
  * --------------------------------------------------
@@ -693,50 +768,72 @@
  * --------------------------------------------------
  */
 [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);
 }
 /*
  * --------------------------------------------------
@@ -757,32 +854,43 @@
   --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);
 }
 /*
  * --------------------------------------------------
@@ -793,30 +901,46 @@
   --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);
 }
 /*
  * --------------------------------------------------
@@ -824,16 +948,19 @@
  * --------------------------------------------------
  */
 [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 */
@@ -2233,6 +2360,7 @@
  * --------------------------------------------------
  */
 :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);
 
@@ -2273,8 +2401,12 @@
 :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);
 }
 /*
@@ -2284,7 +2416,9 @@
  */
 :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));
 }
 /*
@@ -4822,16 +4956,24 @@
  * --------------------------------------------------
  */
 :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 */
@@ -4839,7 +4981,9 @@
   --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);
@@ -4849,13 +4993,17 @@
   --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);
 }
 /*
@@ -4872,6 +5020,7 @@
   --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);
@@ -4890,9 +5039,13 @@
   --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));
 }
 /*
@@ -4917,8 +5070,12 @@
   --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);
@@ -4927,7 +5084,9 @@
   --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
+  );
 }
 /*
  * --------------------------------------------------
@@ -4956,12 +5115,16 @@
   --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));
 
@@ -5829,7 +5992,11 @@ rtg-button > [data-slot="button"][data-size="icon"] svg {
  *  CARD
  * --------------------------------------------------
  */
-rtg-card > [data-slot="card"] {
+rtg-card {
+  width: var(--rtg-card-space-width);
+}
+rtg-card > [data-slot='card'] {
+  width: 100%;
   display: flex;
   overflow: hidden;
 
@@ -5854,23 +6021,23 @@ rtg-card > [data-slot="card"] {
     0 0 0 var(--rtg-card-width-ring) var(--rtg-card-color-ring),
     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);
 }
@@ -5879,7 +6046,7 @@ rtg-card [data-slot="card"] > img:last-child {
  *  CARD HEADER
  * --------------------------------------------------
  */
-rtg-card-header > [data-slot="card-header"] {
+rtg-card-header > [data-slot='card-header'] {
   display: grid;
   grid-auto-rows: min-content;
   align-items: start;
@@ -5888,21 +6055,28 @@ rtg-card-header > [data-slot="card-header"] {
   padding-left: var(--rtg-card-space-px);
   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;
 }
 /*
@@ -5910,12 +6084,15 @@ rtg-card-header > [data-slot="card-header"]:has(> rtg-card-action) {
  *  CARD TITLE
  * --------------------------------------------------
  */
-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);
 }
@@ -5924,7 +6101,7 @@ rtg-card > [data-slot="card"][data-size="sm"] rtg-card-title > [data-slot="card-
  *  CARD DESCRIPTION
  * --------------------------------------------------
  */
-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);
@@ -5946,11 +6123,14 @@ rtg-card-action {
  *  CARD CONTENT
  * --------------------------------------------------
  */
-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);
 }
@@ -5959,23 +6139,30 @@ rtg-card > [data-slot="card"][data-size="sm"] > rtg-card-content > [data-slot="c
  *  CARD FOOTER
  * --------------------------------------------------
  */
-rtg-card-footer > [data-slot="card-footer"] {
+rtg-card-footer > [data-slot='card-footer'] {
   display: flex;
   align-items: center;
 
   padding-left: var(--rtg-card-space-px);
   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);
 }
 /*
@@ -7708,8 +7895,9 @@ rtg-textarea > [data-slot=textarea]::placeholder {
  *  TYPOGRAPHY H
  * --------------------------------------------------
  */
-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);
@@ -7717,38 +7905,42 @@ rtg-typography-h > [data-slot=typography-h] {
 }
 /* * LEVELS * */
 /* 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);
   text-wrap: balance;
 }
 /* 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);
 }
 /*
@@ -7756,22 +7948,23 @@ rtg-typography-h:not(:first-child) > [data-slot=typography-h][data-level=h4] {
  *  TYPOGRAPHY P
  * --------------------------------------------------
  */
-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;
@@ -7782,7 +7975,7 @@ rtg-typography-p > [data-slot=typography-p] > a {
  *  TYPOGRAPHY BLOCKQUOTE
  * --------------------------------------------------
  */
-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);
@@ -7792,13 +7985,15 @@ 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);
   }
 }
@@ -7823,7 +8018,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) {
   color: var(--rtg-typography-table-row-color-text-even);
@@ -7841,7 +8037,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) {
   rtg-typography-table :is(th, td) {
@@ -7857,28 +8054,28 @@ rtg-typography-table th {
  *  TYPOGRAPHY LIST
  * --------------------------------------------------
  */
-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);
   font-weight: var(--rtg-typography-list-font-weight);
   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);
   }
 }
@@ -7887,7 +8084,7 @@ rtg-typography-list > [data-slot=typography-list] > li:not(:first-child) {
  *  TYPOGRAPHY CODE
  * --------------------------------------------------
  */
-rtg-typography-code > [data-slot=typography-code] {
+rtg-typography-code > [data-slot='typography-code'] {
   position: relative;
 
   padding-inline: var(--rtg-typography-code-space-px);
@@ -7908,7 +8105,7 @@ rtg-typography-code > [data-slot=typography-code] {
  *  TYPOGRAPHY LEAD
  * --------------------------------------------------
  */
-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);
@@ -7916,7 +8113,7 @@ rtg-typography-lead > [data-slot=typography-lead] {
   font-weight: var(--rtg-typography-lead-font-weight);
   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);
 }
 /*
@@ -7924,7 +8121,7 @@ rtg-typography-lead:not(:first-child) > [data-slot=typography-lead] {
  *  TYPOGRAPHY LARGE
  * --------------------------------------------------
  */
-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);
@@ -7936,7 +8133,7 @@ rtg-typography-large > [data-slot=typography-large] {
  *  TYPOGRAPHY SMALL
  * --------------------------------------------------
  */
-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);
@@ -7948,7 +8145,7 @@ rtg-typography-small > [data-slot=typography-small] {
  *  TYPOGRAPHY MUTED
  * --------------------------------------------------
  */
-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

@@ -3,7 +3,7 @@
   "description": "Webcomponent wc-ui following open-wc recommendations",
   "license": "MIT",
   "author": "wc-ui",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "type": "module",
   "main": "dist/rtg-ui-kit.umd.cjs",
   "module": "./dist/rtg-ui-kit.js",