@donotdev/ui 0.0.5 → 0.0.7

package/dist/dndev.css

@@ -22,9 +22,9 @@
      Used by: CSS @media queries, JavaScript hooks, responsive components
      Note: CSS variables don't work in @media, so we use hardcoded px values
      =========================== */
-  --breakpoint-mobile: 768px;   /* < 768 = mobile */
-  --breakpoint-tablet: 1024px;  /* 768-1023 = tablet */
-  --breakpoint-laptop: 1440px;  /* 1024-1439 = laptop (key layout split) */
+  --breakpoint-mobile: 768px; /* < 768 = mobile */
+  --breakpoint-tablet: 1024px; /* 768-1023 = tablet */
+  --breakpoint-laptop: 1440px; /* 1024-1439 = laptop (key layout split) */
   --breakpoint-desktop: 1920px; /* 1440+ = desktop */
 
   /* ===========================
@@ -291,23 +291,39 @@
 
 [data-density='compact'] {
   /* Base sizes: Fluid responsiveness for all text, zoom-safe */
-  --font-size-base: clamp(0.875rem, 0.8125rem + 0.25vw, 0.9375rem); /* 14-15px fluid */
-  --font-size-lg: clamp(1.05rem, 0.9375rem + 0.5vw, 1.125rem); /* 17-18px fluid */
-  --font-size-xl: clamp(1.26rem, 1.125rem + 0.75vw, 1.375rem); /* 20-22px fluid */
+  --font-size-base: clamp(
+    0.875rem,
+    0.8125rem + 0.25vw,
+    0.9375rem
+  ); /* 14-15px fluid */
+  --font-size-lg: clamp(
+    1.05rem,
+    0.9375rem + 0.5vw,
+    1.125rem
+  ); /* 17-18px fluid */
+  --font-size-xl: clamp(
+    1.26rem,
+    1.125rem + 0.75vw,
+    1.375rem
+  ); /* 20-22px fluid */
   /* Display sizes: Musical scale + fluid responsiveness */
   --font-size-2xl: clamp(
     1.512rem,
     1.375rem + 0.75vw,
     1.625rem
   ); /* 24-26px fluid */
-  --font-size-3xl: clamp(
-    1.814rem,
-    1.625rem + 1vw,
-    2rem
-  ); /* 29-32px fluid */
+  --font-size-3xl: clamp(1.814rem, 1.625rem + 1vw, 2rem); /* 29-32px fluid */
   --gap-sm: clamp(0.375rem, 0.3125rem + 0.25vw, 0.5rem); /* 6-8px fluid */
-  --gap-md: clamp(0.75rem, 0.625rem + 0.5vw, 0.875rem); /* 12-14px fluid, zoom-safe */
-  --gap-lg: clamp(1.5rem, 1.25rem + 1vw, 1.75rem); /* 24-28px fluid, zoom-safe */
+  --gap-md: clamp(
+    0.75rem,
+    0.625rem + 0.5vw,
+    0.875rem
+  ); /* 12-14px fluid, zoom-safe */
+  --gap-lg: clamp(
+    1.5rem,
+    1.25rem + 1vw,
+    1.75rem
+  ); /* 24-28px fluid, zoom-safe */
   --line-height: 1.2; /* Minor Third - All text */
 }
 
@@ -315,22 +331,34 @@
 
 [data-density='standard'] {
   /* Base sizes: Fluid responsiveness for all text, zoom-safe */
-  --font-size-base: clamp(1rem, 0.9375rem + 0.25vw, 1.0625rem); /* 16-17px fluid */
-  --font-size-lg: clamp(1.25rem, 1.125rem + 0.5vw, 1.375rem); /* 20-22px fluid */
-  --font-size-xl: clamp(1.563rem, 1.375rem + 0.75vw, 1.75rem); /* 25-28px fluid */
+  --font-size-base: clamp(
+    1rem,
+    0.9375rem + 0.25vw,
+    1.0625rem
+  ); /* 16-17px fluid */
+  --font-size-lg: clamp(
+    1.25rem,
+    1.125rem + 0.5vw,
+    1.375rem
+  ); /* 20-22px fluid */
+  --font-size-xl: clamp(
+    1.563rem,
+    1.375rem + 0.75vw,
+    1.75rem
+  ); /* 25-28px fluid */
   /* Display sizes: Musical scale + fluid responsiveness */
-  --font-size-2xl: clamp(
-    1.953rem,
-    1.75rem + 1vw,
-    2.25rem
-  ); /* 31-36px fluid */
+  --font-size-2xl: clamp(1.953rem, 1.75rem + 1vw, 2.25rem); /* 31-36px fluid */
   --font-size-3xl: clamp(
     2.441rem,
     2rem + 1.5vw,
     3rem
   ); /* 39-48px fluid - hero text */
   --gap-sm: clamp(0.5rem, 0.4375rem + 0.25vw, 0.625rem); /* 8-10px fluid */
-  --gap-md: clamp(1rem, 0.875rem + 0.5vw, 1.25rem); /* 16-20px fluid, zoom-safe */
+  --gap-md: clamp(
+    1rem,
+    0.875rem + 0.5vw,
+    1.25rem
+  ); /* 16-20px fluid, zoom-safe */
   --gap-lg: clamp(2rem, 1.75rem + 1vw, 2.5rem); /* 32-40px fluid, zoom-safe */
   --line-height: 1.25; /* Major Third - All text */
 }
@@ -585,6 +613,7 @@ h6 {
   line-height: var(--line-height);
   color: var(--foreground);
   background: transparent;
+  text-wrap: balance; /* Equalize line lengths, prevent orphans */
 }
 
 h1 {
@@ -622,6 +651,7 @@ p {
   line-height: var(--line-height);
   color: var(--foreground);
   background: transparent;
+  text-wrap: pretty; /* Optimize last line, avoid orphans */
 }
 
 ul,
@@ -631,6 +661,7 @@ ol {
   color: var(--foreground);
   background: transparent;
   list-style-position: outside;
+  text-wrap: pretty;
 }
 
 ul {
@@ -1074,8 +1105,10 @@ em {
     -webkit-backdrop-filter: blur(20px) saturate(180%);
     border: var(--border-hairline) solid
       color-mix(in oklab, var(--card-foreground) 25%, transparent);
-    box-shadow: var(--shadow-lg),
-      inset 0 1px 0 0 color-mix(in oklab, var(--card-foreground) 10%, transparent);
+    box-shadow:
+      var(--shadow-lg),
+      inset 0 1px 0 0
+        color-mix(in oklab, var(--card-foreground) 10%, transparent);
   }
 
 /* Separator style */
@@ -2976,10 +3009,14 @@ em {
   flex-direction: column;
   gap: var(--gap-md);
   justify-content: center;
-
-  /* Button contrast overrides */
 }
 
+.dndev-cta-actions .dndev-interactive {
+    min-width: 150px;
+  }
+
+/* Button contrast overrides */
+
 .dndev-cta-actions .dndev-interactive[data-variant='primary'] {
     background: var(--foreground);
     color: var(--background);
@@ -6045,7 +6082,7 @@ em {
   display: block;
   width: 1.25rem;
   height: 1.25rem;
-  background-color: var(--background);
+  background-color: var(--foreground);
   border-radius: 9999px;
   box-shadow: var(--shadow-md);
   transition: transform var(--dur-normal) var(--ease-in-out);
@@ -6767,7 +6804,7 @@ em {
 
 .dndev-toggle-group .dndev-interactive {
     border: none;
-    border-radius: calc(var(--radius) - 2px);
+    border-radius: var(--radius-interactive);
     background-color: transparent !important;
     min-height: auto;
     padding: var(--gap-sm) var(--gap-md);
@@ -8312,14 +8349,20 @@ main[role='main'][data-routing-animation='none'] {
     'header header'
     'sidebar main'
     'footer footer';
-  grid-template-rows: var(--header-height) 1fr minmax(var(--footer-height), auto);
+  grid-template-rows: var(--header-height) 1fr minmax(
+      var(--footer-height),
+      auto
+    );
   grid-template-columns: var(--sidebar-width) 1fr;
 
   /* Game layout: Grid rows adjust based on breakpoint (footer hidden on tablet/mobile) */
 }
 
 [data-layout='game']:root .dndev-layout {
-    grid-template-rows: var(--header-height) 1fr minmax(var(--footer-height), auto);
+    grid-template-rows: var(--header-height) 1fr minmax(
+        var(--footer-height),
+        auto
+      );
   }
 
 /* ===========================
@@ -8575,10 +8618,14 @@ aside[role='navigation'].sidebar[data-collapsed='true'] .dndev-interactive kbd {
 
 /* Force sidebar children to shrink - no blocking resize */
 
-aside.sidebar[role='navigation'] .sidebar-content,aside.sidebar[role='navigation'] .sidebar-top,aside.sidebar[role='navigation'] .sidebar-bottom {
+aside.sidebar[role='navigation'] .sidebar-top,aside.sidebar[role='navigation'] .sidebar-bottom {
     overflow: hidden;
   }
 
+aside.sidebar[role='navigation'] .sidebar-content {
+    overflow-x: hidden; /* Prevent horizontal scroll, allow vertical */
+  }
+
 aside.sidebar[role='navigation'] .dndev-interactive {
     overflow: hidden;
   }