@donotdev/ui 0.0.2 → 0.0.3

package/dist/dndev.css

@@ -539,7 +539,7 @@ a:not(.dndev-interactive):active {
 a:focus-visible {
     outline: 2px solid var(--ring);
     outline-offset: 2px;
-    border-radius: var(--radius-md);
+    border-radius: var(--radius-interactive);
   }
 
 /* ===========================
@@ -682,7 +682,7 @@ em {
 .dndev-input {
   display: flex;
   width: 100%;
-  border-radius: 0;
+  border-radius: var(--radius-interactive);
   border: var(--border-hairline) solid var(--line-2);
   background-color: transparent;
   color: var(--foreground);
@@ -944,15 +944,21 @@ em {
 
 .dndev-surface[data-role='card'] {
     padding: var(--gap-md);
-    border-radius: var(--radius-md);
+    border-radius: var(--radius-surface);
   }
 
 /* Elevated cards - stronger shadow */
 
-.dndev-surface[data-elevated='true'] {
+/* Apply if elevated=true OR (clickable=true AND elevated!=false) */
+
+.dndev-surface[data-elevated='true'],.dndev-surface[data-clickable='true']:not([data-elevated='false']) {
     box-shadow: var(--shadow-xl);
   }
 
+:is(.dndev-surface[data-elevated='true'],.dndev-surface[data-clickable='true']:not([data-elevated='false'])):dir(rtl) {
+      box-shadow: var(--shadow-xl-rtl);
+    }
+
 /* Clickable cards - hover effects */
 
 .dndev-surface[data-clickable='true'] {
@@ -1185,7 +1191,7 @@ em {
 
 .dndev-floating[data-role='card'] {
     padding: var(--gap-md);
-    border-radius: var(--radius-md);
+    border-radius: var(--radius-surface);
   }
 
 .dndev-floating[data-role='floating'] {
@@ -1647,6 +1653,38 @@ em {
     color: var(--background);
   }
 
+/* CONTROL GROUP - Shared pattern for grouped controls (RadioGroup, Checkbox groups) */
+
+.dndev-control-group {
+  display: grid;
+  gap: var(--gap-md); /* 16px - standard spacing between grouped items */
+
+  /* Control + label pattern - used by RadioGroup, CheckboxFieldComponent, etc. */
+}
+
+.dndev-control-group label {
+    display: flex;
+    align-items: center;
+    gap: var(--gap-sm); /* 8px - spacing between control and label */
+    font-size: var(--font-size-base);
+    color: var(--foreground);
+    cursor: pointer;
+    transition: color var(--transition-fast);
+
+    /* Subtle hover on label text */
+  }
+
+:is(.dndev-control-group label):hover {
+      color: var(--primary);
+    }
+
+/* Selected state - label color changes */
+
+:is(.dndev-control-group label):has([data-state='checked']),:is(.dndev-control-group label):has([data-state='on']) {
+      color: var(--primary);
+      font-weight: var(--font-weight-medium);
+    }
+
 /**
    * Variant system - 8 control variants
    * Variants override --control-border to use semantic colors
@@ -1654,37 +1692,37 @@ em {
    * On state: fills with variant color
    */
 
-.dndev-control[data-variant='primary'] {
+.dndev-control-group[data-variant='primary'] {
     --control-border: var(--primary);
   }
 
-.dndev-control[data-variant='secondary'] {
+.dndev-control-group[data-variant='secondary'] {
     --control-border: var(--secondary);
   }
 
-.dndev-control[data-variant='muted'] {
+.dndev-control-group[data-variant='muted'] {
     --control-border: var(--muted-foreground);
   }
 
-.dndev-control[data-variant='accent'] {
+.dndev-control-group[data-variant='accent'] {
     --control-border: var(--accent);
   }
 
-.dndev-control[data-variant='success'] {
+.dndev-control-group[data-variant='success'] {
     --control-border: var(--success);
   }
 
-.dndev-control[data-variant='warning'] {
+.dndev-control-group[data-variant='warning'] {
     --control-border: var(--warning);
   }
 
-.dndev-control[data-variant='destructive'] {
+.dndev-control-group[data-variant='destructive'] {
     --control-border: var(--destructive);
   }
 
 /* Default variant explicitly (same as base) */
 
-.dndev-control[data-variant='default'] {
+.dndev-control-group[data-variant='default'] {
     --control-border: color-mix(
       in oklab,
       var(--foreground) 70%,
@@ -1772,7 +1810,7 @@ em {
   display: grid;
   gap: var(--gap-sm);
   padding: var(--gap-md);
-  border-radius: var(--radius-none);
+  border-radius: var(--radius-floating);
   border: var(--border-hairline) solid var(--border);
   /* Inverted floating colors: popover-foreground as background, popover as foreground */
   background: color-mix(in oklab, var(--popover-foreground) 95%, transparent);
@@ -1917,7 +1955,7 @@ em {
   width: var(--icon-md);
   height: var(--icon-md);
   border: 2px solid currentColor;
-  border-radius: 50%;
+  border-radius: var(--radius-full);
   border-right-color: transparent;
   animation: spin 1s linear infinite;
 }
@@ -2054,7 +2092,7 @@ em {
   display: flex;
   flex-direction: column;
   padding: 0;
-  border-radius: 0;
+  border-radius: var(--radius-floating);
   min-width: 15ch; /* Character-based: scales with font size, ensures readable width */
   width: -moz-fit-content;
   width: fit-content; /* Stretch to fit children */
@@ -2408,7 +2446,7 @@ em {
 }
 
 .dndev-blockquote-content {
-  font-size: 1.125em; /* 1.125x body (18px on 16px base) */
+  font-size: var(--font-size-lg); /* 20px - emphasized text */
   line-height: 1.7; /* Industry standard for readability */
   font-weight: 400;
   color: inherit;
@@ -2442,10 +2480,14 @@ em {
  */
 
 .dndev-blockquote[data-variant='default'] blockquote {
-  padding: var(--gap-md) var(--gap-md) var(--gap-md) var(--gap-lg);
+  padding: var(--gap-md) calc(var(--gap-md) + 4px) var(--gap-md) var(--gap-lg);
   background: var(--muted);
   border-inline-start: 4px solid var(--primary);
-  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+  border-inline-end: none;
+  border-block-start: none;
+  border-block-end: none;
+  border-radius: var(--radius-interactive) var(--radius-surface) var(--radius-surface) var(--radius-interactive);
+  overflow: hidden;
 }
 
 .dndev-blockquote[data-variant='default'] .dndev-blockquote-content {
@@ -2466,7 +2508,7 @@ em {
 .dndev-blockquote[data-variant='editorial'] .dndev-blockquote-content {
   font-family: Georgia, 'Times New Roman', serif;
   font-style: italic;
-  font-size: 1.25em; /* Larger for editorial impact */
+  font-size: var(--font-size-xl); /* 25px - larger for editorial impact */
   color: inherit;
   opacity: 0.95;
 }
@@ -2484,7 +2526,7 @@ em {
 .dndev-blockquote[data-variant='testimonial'] {
   background: var(--card);
   border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-surface);
   padding: calc(var(--gap-lg) + var(--gap-md)); /* 2.5rem */
   box-shadow:
     0 1px 3px 0 hsl(var(--foreground-hsl) / 0.1),
@@ -2526,11 +2568,11 @@ em {
   }
 
   .dndev-blockquote-content {
-    font-size: 1.0625em; /* Slightly smaller on mobile (17px) */
+    font-size: var(--font-size-base); /* Slightly smaller on mobile */
   }
 
   .dndev-blockquote[data-variant='editorial'] .dndev-blockquote-content {
-    font-size: 1.125em;
+    font-size: var(--font-size-lg);
   }
 
   .dndev-blockquote[data-variant='testimonial'] {
@@ -2560,7 +2602,7 @@ em {
   color: var(--popover-foreground);
   background: var(--popover);
   border: var(--border-hairline) solid var(--border);
-  border-radius: var(--radius-interactive);
+  border-radius: var(--radius-floating);
   box-shadow: var(--shadow-md);
 }
 
@@ -3338,7 +3380,7 @@ em {
 
 .dndev-command-footer-key {
   padding: 0.125rem 0.375rem;
-  border-radius: calc(var(--radius-md) * 0.5);
+  border-radius: 2px;
   background: var(--muted);
   border: 1px solid var(--border);
   font-family: var(--font-mono);
@@ -3660,55 +3702,7 @@ em {
   width: 100%;
 }
 
-/* Columns */
-
-.dndev-grid-component[data-cols='1'] {
-  grid-template-columns: repeat(1, minmax(0, 1fr));
-}
-
-.dndev-grid-component[data-cols='2'] {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.dndev-grid-component[data-cols='3'] {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-.dndev-grid-component[data-cols='4'] {
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-
-.dndev-grid-component[data-cols='5'] {
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-}
-
-.dndev-grid-component[data-cols='6'] {
-  grid-template-columns: repeat(6, minmax(0, 1fr));
-}
-
-.dndev-grid-component[data-cols='10'] {
-  grid-template-columns: repeat(10, minmax(0, 1fr));
-}
-
-.dndev-grid-component[data-cols='12'] {
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-}
-
-/* Auto-fit/fill columns */
-
-.dndev-grid-component[data-cols='auto-fit'] {
-  grid-template-columns: repeat(
-    auto-fit,
-    minmax(min(100%, var(--min-col-width, 250px)), 1fr)
-  );
-}
-
-.dndev-grid-component[data-cols='auto-fill'] {
-  grid-template-columns: repeat(
-    auto-fill,
-    minmax(min(100%, var(--min-col-width, 250px)), 1fr)
-  );
-}
+/* Grid template columns are set via inline styles for maximum flexibility */
 
 /* Spacing from CSS variables */
 
@@ -3886,7 +3880,7 @@ em {
   height: var(--touch-target);
   padding: 0;
   border: 1px solid var(--card-foreground);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-surface);
   background: transparent;
   display: inline-flex;
   align-items: center;
@@ -4026,7 +4020,7 @@ em {
 
 .dndev-json-viewer-container {
   background-color: var(--muted);
-  border-radius: var(--radius);
+  border-radius: var(--radius-surface);
   padding: 1rem;
   overflow: auto;
   max-height: 600px;
@@ -4083,7 +4077,7 @@ em {
   align-items: flex-start;
   gap: 0.25rem;
   cursor: pointer;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-interactive);
   padding-inline-start: 0.25rem;
   padding-inline-end: 0.25rem;
   margin-inline-start: -0.25rem;
@@ -4444,7 +4438,7 @@ em {
   grid-row: span 3;
   height: 100%;
   padding: var(--gap-md);
-  border-radius: var(--radius);
+  border-radius: var(--radius-floating);
   background: linear-gradient(
     to bottom,
     color-mix(in oklab, var(--muted) 50%, transparent),
@@ -4468,7 +4462,7 @@ em {
 
 .dndev-nav-menu-item-container {
   padding: var(--gap-md);
-  border-radius: var(--radius);
+  border-radius: var(--radius-floating);
   text-decoration: none;
   outline: none;
 }
@@ -4603,27 +4597,37 @@ em {
 
 /* packages/components/src/atomic/RadioGroup/RadioGroup.css */
 
-.dndev-radio-group {
-  display: grid;
-  gap: var(--gap-sm);
+/* Uses shared .dndev-control-group pattern from patterns.css */
 
-  /* RadioGroup label styling - Stack as="label" now has dndev-text-base */
-}
+/* Root is display: grid - items are direct children */
 
-.dndev-radio-group label {
-    font-size: var(--font-size-base);
-    color: var(--foreground);
-    transition: color var(--dur-fast) var(--ease-in-out);
+/* Grid columns via data-cols attribute */
 
-    /* Label text when radio is checked */
+.dndev-radio-group[data-cols] {
+    width: -moz-fit-content;
+    width: fit-content;
+    margin-inline: auto; /* Self-center in parent */
   }
 
-:is(.dndev-radio-group label):has([data-state='checked']) {
-      color: var(--primary);
-      font-weight: var(--font-weight-medium);
-    }
+.dndev-radio-group[data-cols='2'] { grid-template-columns: repeat(2, auto); }
+
+.dndev-radio-group[data-cols='3'] { grid-template-columns: repeat(3, auto); }
+
+.dndev-radio-group[data-cols='4'] { grid-template-columns: repeat(4, auto); }
+
+.dndev-radio-group[data-cols='5'] { grid-template-columns: repeat(5, auto); }
+
+.dndev-radio-group[data-cols='6'] { grid-template-columns: repeat(6, auto); }
 
-/* Variant colors for checked labels */
+.dndev-radio-group[data-cols='10'] { grid-template-columns: repeat(10, auto); }
+
+.dndev-radio-group[data-cols='12'] { grid-template-columns: repeat(12, auto); }
+
+.dndev-radio-group[data-cols='auto-fit'] { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); width: 100%; }
+
+.dndev-radio-group[data-cols='auto-fill'] { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); width: 100%; }
+
+/* Variant colors for checked labels - override base pattern */
 
 .dndev-radio-group[data-variant='primary'] label:has([data-state='checked']) {
     color: var(--primary);
@@ -4866,6 +4870,12 @@ em {
 
 /* packages/components/src/atomic/Section/Section.css */
 
+/* Full-width section wrapper for tone backgrounds */
+
+.dndev-section-full-width {
+  width: 100%;
+}
+
 /* Content wrapper: constrained + centered + padded */
 
 .dndev-section-content {
@@ -4885,11 +4895,11 @@ em {
 }
   }
 
-/* Section title: XL, uppercase, accent, tracking */
+/* Section title: LG, uppercase, accent pop color, tracking */
 
 .dndev-section-title {
   display: block;
-  font-size: var(--font-size-xl);
+  font-size: var(--font-size-lg);
   font-weight: var(--font-weight-semibold);
   text-transform: uppercase;
   letter-spacing: 0.2em;
@@ -5330,7 +5340,7 @@ em {
   color: var(--foreground);
   background-color: var(--background);
   padding: 0.125rem 0.375rem;
-  border-radius: var(--radius);
+  border-radius: var(--radius-interactive);
   box-shadow: var(--shadow-sm);
   white-space: nowrap;
   pointer-events: none;
@@ -5784,7 +5794,7 @@ em {
   position: relative;
   width: 100%;
   overflow-y: auto;
-  border-radius: var(--radius-lg);
+  border-radius: 0;
   border: 1px solid var(--border);
 }
 
@@ -6200,7 +6210,7 @@ em {
   flex-shrink: 0;
   padding-inline-start: var(--gap-md);
   padding-inline-end: var(--gap-md);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-interactive);
   border: 1px solid var(--border);
   font-size: var(--font-size-sm);
 }
@@ -6357,7 +6367,7 @@ em {
   align-items: center;
   gap: 0;
   padding: 0.125rem;
-  border-radius: var(--radius);
+  border-radius: var(--radius-interactive);
   background-color: var(--muted);
   border: var(--border-width) solid var(--border);
 }
@@ -6451,7 +6461,7 @@ em {
   box-shadow: var(--shadow-lg); /* Stronger shadow for visibility */
   padding: 0.375rem 0.5rem; /* 6px 8px - industry standard */
   font-size: var(--font-size-xs); /* 12px */
-  border-radius: 0; /* Square, modern look */
+  border-radius: var(--radius-floating);
   max-width: 12.5rem; /* 200px */
 }
 
@@ -6529,6 +6539,16 @@ em {
   filter: drop-shadow(0 2px 8px rgb(from var(--background) r g b / 0.5));
 }
 
+/* Loading overlay - shown while iframe loads */
+
+.dndev-video-loading-overlay {
+  z-index: 1;
+}
+
+.dndev-video-loading-overlay .dndev-video-play-overlay {
+    background: rgb(from var(--background) r g b / 0.6);
+  }
+
 /* Modal dialog wrapper */
 
 .dndev-video-dialog {
@@ -7070,7 +7090,7 @@ em {
   }
 
 .dndev-section-full-width[data-tone='muted'] {
-    background: color-mix(in oklab, var(--muted) 50%, transparent);
+    background: var(--muted);
   }
 
 .dndev-section-full-width[data-tone='elevated'] {
@@ -7093,7 +7113,7 @@ em {
   }
 
 [data-tone='muted']:not(.dndev-section-full-width) {
-    background: color-mix(in oklab, var(--muted) 50%, transparent);
+    background: var(--muted);
   }
 
 [data-tone='elevated']:not(.dndev-section-full-width) {
@@ -7142,7 +7162,7 @@ code {
   line-height: 1.5;
   white-space: pre-wrap;
   word-break: break-all;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-interactive);
 }
 
 /* Code element + variant = semantic + visual (monospace + background) */
@@ -7157,7 +7177,7 @@ code[data-variant='code'] {
   line-height: 1.5;
   white-space: pre-wrap;
   word-break: break-all;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-interactive);
 }
 
 /* Heading + code variant = heading size/weight + code background */
@@ -7175,7 +7195,7 @@ h4[data-variant='code'] {
   line-height: 1.5;
   white-space: pre-wrap;
   word-break: break-all;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-interactive);
 }
 
 /* ===========================
@@ -7229,6 +7249,7 @@ h4[data-variant='code'] {
 
 .dndev-relative {
   position: relative;
+  min-width: 0; /* Allow flex items to shrink below content size */
 }
 
 .dndev-absolute {
@@ -7640,7 +7661,7 @@ h4[data-variant='code'] {
      =========================== */
 
   /* Single animation type (fade, slide, or none to disable) - app-wide */
-  --routing-animation: fade;
+  --routing-animation: none;
   --routing-default-duration: var(--dur-normal);
 
   /* Breakpoint-specific durations */
@@ -7720,24 +7741,26 @@ h4[data-variant='code'] {
 
 /* Routing animations - applied to main content area */
 
+/* Default: visible (progressive enhancement - content shows even if JS fails) */
+
 main[role='main'] {
-  opacity: 0;
+  opacity: 1;
 }
 
-/* Fade animation */
+/* Fade animation - keyframes handle opacity 0→1 */
 
 main[role='main'][data-routing-animation='fade'] {
   animation: routeFadeIn var(--routing-default-duration, 300ms) ease-in forwards;
 }
 
-/* Slide animation */
+/* Slide animation - keyframes handle opacity 0→1 */
 
 main[role='main'][data-routing-animation='slide'] {
   animation: routeSlideIn var(--routing-default-duration, 300ms) ease-in
     forwards;
 }
 
-/* No animation */
+/* No animation - already visible by default, explicit for clarity */
 
 main[role='main'][data-routing-animation='none'] {
   animation: none;
@@ -8146,13 +8169,6 @@ aside.sidebar[role='navigation'] .dndev-interactive-label {
       justify-content: center;
     }
 
-/* Sidebar navigation menu - 48px buttons/icons default */
-
-.dndev-sidebar-nav-menu[data-vertical='true'] .dndev-interactive[data-role='menu-item'],.dndev-sidebar-nav-menu[data-vertical='true'] .dndev-interactive[data-role='nav-trigger'] {
-    width: var(--touch-target);
-    height: var(--touch-target);
-  }
-
 /* Collapsed sidebar: hide labels, center icons */
 
 /* Hide all auto-display labels */
@@ -8266,7 +8282,7 @@ footer[role='contentinfo'] > * {
 
 footer[role='contentinfo'] .footer-copyright {
   color: var(--muted-foreground);
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-sm);
 }
 
 footer[role='contentinfo'] a:not(.dndev-interactive) {
@@ -8274,7 +8290,7 @@ footer[role='contentinfo'] a:not(.dndev-interactive) {
   text-decoration: underline;
   text-underline-offset: 2px;
   color: var(--muted-foreground);
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-sm);
   background: transparent;
 }
 
@@ -8673,6 +8689,7 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
 .dndev-container[data-centered='false'] {
     margin-inline-start: 0;
     margin-inline-end: 0;
+    justify-content: flex-start;
   }
 
 /* Full width - no constraints */