@donotdev/ui 0.0.7 → 0.0.9

package/dist/dndev.css

@@ -157,7 +157,7 @@
   --font-headline: var(--font-sans);
 
   --font-mono:
-    ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Consolas, Monaco,
+    ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, Monaco,
     'Liberation Mono', monospace;
 
   /* Typography Scale - Musical Scale System (STANDARD density defaults - Major Third 1.25×) */
@@ -714,6 +714,16 @@ em {
 
 /* packages/components/src/styles/patterns.css */
 
+/* Menu scroll area pattern - shared by DropdownMenu, Select, Combobox */
+
+.dndev-menu-scroll-area {
+  max-height: 50dvh;
+}
+
+.dndev-menu-scroll-area .dndev-scroll-area-viewport {
+  max-height: 50dvh;
+}
+
 /* ===========================
          FORM COMPONENTS (BASE)
          =========================== */
@@ -908,6 +918,9 @@ em {
   border-radius: var(--radius-surface);
   box-shadow: var(--shadow-md);
   padding: var(--gap-md); /* 1rem / 16px default */
+  padding-block-start: calc(
+    var(--gap-md) + var(--gap-sm)
+  ); /* Extra top padding for FloatingLabels */
   position: relative;
   overflow: hidden;
   contain: layout style;
@@ -1158,6 +1171,9 @@ em {
   border-radius: var(--radius-floating);
   box-shadow: var(--shadow-md);
   padding: var(--gap-md); /* 1rem / 16px default */
+  padding-block-start: calc(
+    var(--gap-md) + var(--gap-sm)
+  ); /* Extra top padding for FloatingLabels */
   position: relative;
   overflow: hidden;
   contain: layout style;
@@ -2088,8 +2104,9 @@ em {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
-  overflow-x: hidden;
+  overflow-x: visible;
   min-height: 0;
+  padding-block-start: var(--gap-sm);
 }
 
 .dndev-modal-title {
@@ -2148,6 +2165,60 @@ em {
   flex-direction: column;
 }
 
+/* ===========================
+         AUTH FORM PATTERNS
+         =========================== */
+
+/* Auth form step indicator */
+
+.dndev-auth-step {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.5em;
+  padding: var(--gap-sm);
+  border-radius: var(--radius-sm);
+  font-weight: var(--font-weight-semibold);
+  transition: all var(--dur-fast) var(--ease-in-out);
+}
+
+.dndev-auth-step[data-state='active'] {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+  }
+
+.dndev-auth-step[data-state='pending'] {
+    background-color: var(--muted);
+    color: var(--muted-foreground);
+  }
+
+.dndev-auth-step[data-state='completed'] {
+    background-color: var(--success);
+    color: var(--success-foreground);
+  }
+
+/* Opacity data attribute */
+
+[data-opacity='50'] {
+  opacity: 0.5;
+}
+
+[data-opacity='70'] {
+  opacity: 0.7;
+}
+
+/* Inset data attribute - indent content */
+
+[data-inset='true'] {
+  padding-inline-start: var(--gap-md);
+}
+
+/* Password strength bar height override */
+
+.dndev-password-strength-bar {
+  height: 4px;
+}
+
 /* 5. Individual Component Styles */
 
 /* packages/components/src/atomic/Accordion/Accordion.css */
@@ -2194,21 +2265,46 @@ em {
   flex-shrink: 0;
   width: var(--icon-md);
   height: var(--icon-md);
-  transition: transform var(--dur-fast) var(--ease-in-out);
+  transition: transform var(--dur-normal) var(--ease-in-out);
 }
 
 .dndev-accordion-content {
   overflow: hidden;
   font-size: var(--font-size-base);
-  transition: all var(--dur-fast) var(--ease-in-out);
   width: 100%;
   min-width: 0;
   text-align: start;
 }
 
+.dndev-accordion-content[data-state='open'] {
+  animation: slideDown var(--dur-normal) var(--ease-in-out);
+}
+
 .dndev-accordion-content[data-state='closed'] {
-    display: none;
+  animation: slideUp var(--dur-normal) var(--ease-in-out);
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+    opacity: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--radix-collapsible-content-height);
+    opacity: 1;
+  }
+  to {
+    height: 0;
+    opacity: 0;
   }
+}
 
 .dndev-accordion-content-inner {
   padding-bottom: var(--gap-md);
@@ -2632,6 +2728,34 @@ em {
 
 /* Label styling moved to patterns.css (.dndev-interactive-label) */
 
+/* Loading state */
+
+[data-loading] {
+  cursor: wait;
+  pointer-events: none;
+}
+
+/* Button spinner - inherits size from button font-size */
+
+.dndev-button-spinner {
+  flex-shrink: 0;
+}
+
+/* Progress ring for upload percentage */
+
+.dndev-button-progress {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.dndev-progress-ring {
+  width: 1em;
+  height: 1em;
+  transform: rotate(-90deg);
+}
+
 /* packages/components/src/atomic/Calendar/Calendar.css */
 
 /**
@@ -3199,21 +3323,58 @@ em {
 @keyframes slideDown {
   from {
     height: 0;
+    opacity: 0;
   }
   to {
     height: var(--radix-collapsible-content-height);
+    opacity: 1;
   }
 }
 
 @keyframes slideUp {
   from {
     height: var(--radix-collapsible-content-height);
+    opacity: 1;
   }
   to {
     height: 0;
+    opacity: 0;
   }
 }
 
+.dndev-collapsible-trigger {
+  width: 100%;
+  cursor: pointer;
+  transition: opacity var(--dur-fast) var(--ease-in-out);
+}
+
+.dndev-collapsible-trigger:hover {
+  opacity: var(--opacity-strong);
+}
+
+.dndev-collapsible-trigger:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+  border-radius: var(--radius-interactive);
+}
+
+.dndev-collapsible-icon {
+  width: var(--size-md);
+  height: var(--size-md);
+  flex-shrink: 0;
+  color: var(--accent);
+  transition: transform var(--dur-normal) var(--ease-in-out);
+}
+
+.dndev-collapsible-chevron {
+  transform: rotate(0deg);
+  transition: transform var(--dur-normal) var(--ease-in-out);
+}
+
+.dndev-collapsible[data-state='open'] .dndev-collapsible-chevron {
+  transform: rotate(180deg);
+}
+
 /* packages/components/src/atomic/Combobox/Combobox.css */
 
 .dndev-combobox-trigger {
@@ -3293,7 +3454,7 @@ em {
 .dndev-combobox-content {
   width: var(--radix-popover-trigger-width);
   min-width: var(--radix-popover-trigger-width);
-  max-height: 300px;
+  max-width: var(--radix-popover-trigger-width);
   display: flex;
   flex-direction: column;
   padding: 0;
@@ -3308,14 +3469,6 @@ em {
   width: 100%;
 }
 
-.dndev-combobox-list {
-  overflow-y: auto;
-  padding: var(--gap-tight);
-  display: flex;
-  flex-direction: column;
-  gap: var(--gap-none);
-}
-
 .dndev-combobox-option {
   all: unset;
   display: flex;
@@ -3372,6 +3525,30 @@ em {
   color: var(--muted-foreground);
 }
 
+/* Creatable option styling */
+
+.dndev-combobox-option-create {
+  color: var(--primary);
+  font-style: italic;
+}
+
+.dndev-combobox-option-create-icon {
+  width: var(--icon-md);
+  height: var(--icon-md);
+  margin-inline-end: var(--gap-sm);
+  flex-shrink: 0;
+}
+
+.dndev-combobox-open .dndev-input-with-trailing-icon .dndev-input-icon svg,
+.dndev-combobox-open .dndev-input-with-trailing-icon .dndev-input-icon > * {
+  transform: rotate(180deg);
+}
+
+.dndev-input-with-trailing-icon .dndev-input-icon svg,
+.dndev-input-with-trailing-icon .dndev-input-icon > * {
+  transition: transform var(--dur-fast) var(--ease-in-out);
+}
+
 /* packages/components/src/atomic/DualCard/DualCard.css */
 
 .dndev-dual-card {
@@ -3558,13 +3735,15 @@ em {
   text-align: start;
   display: block;
   line-height: 1.5; /* Match line numbers */
+  font-size: var(--font-size-sm); /* Explicit match with line numbers */
 }
 
-/* Ensure shiki-generated code respects line-height */
+/* Ensure shiki-generated code respects line-height AND font-size */
 
 .dndev-code-code pre,
 .dndev-code-code code {
   line-height: inherit;
+  font-size: inherit; /* Match parent font-size */
 }
 
 /* packages/components/src/atomic/Command/Command.css */
@@ -3942,16 +4121,6 @@ em {
   padding: var(--gap-sm);
 }
 
-/* Dropdown scroll area - constrain height to 50dvh */
-
-.dndev-dropdown-scroll-area {
-  max-height: 50dvh;
-}
-
-.dndev-dropdown-scroll-area .dndev-scroll-area-viewport {
-  max-height: 50dvh;
-}
-
 /* Checked state styling */
 
 .dndev-interactive[data-role='menu-item'][data-state='checked'] {
@@ -4475,6 +4644,81 @@ em {
     margin-inline-start: var(--gap-sm);
   }
 
+/* Floating Fieldset - native border-cutting via legend */
+
+.dndev-floating-fieldset {
+  position: relative;
+  border: var(--border-hairline) solid var(--line-2);
+  border-radius: var(--radius-interactive);
+  margin: 0;
+  padding: 0;
+  background-color: transparent;
+  transition: all var(--dur-normal) var(--ease-in-out);
+  text-align: start;
+}
+
+.dndev-floating-fieldset:hover {
+  border-color: var(--ring);
+}
+
+.dndev-floating-fieldset:focus-within {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 2px var(--ring);
+}
+
+.dndev-floating-fieldset[data-disabled='true'] {
+  opacity: var(--opacity-muted);
+  cursor: not-allowed;
+}
+
+/* Legend sits on border - browser natively cuts border */
+
+.dndev-floating-legend {
+  margin-inline-start: var(--gap-sm);
+  padding: 0 var(--gap-sm);
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+  line-height: 1;
+  color: var(--foreground);
+}
+
+.dndev-floating-legend label {
+  cursor: default;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-tight);
+}
+
+.dndev-floating-fieldset[data-disabled='true'] .dndev-floating-legend {
+  color: var(--muted-foreground);
+}
+
+.dndev-floating-legend[data-truncate='true'] {
+  max-width: calc(100% - var(--gap-md) * 2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Remove border from inner input since fieldset has it */
+
+.dndev-floating-fieldset .dndev-input {
+  border: none;
+  border-radius: var(--radius-interactive);
+  box-shadow: none;
+}
+
+.dndev-floating-fieldset .dndev-input:hover {
+  border-color: transparent;
+}
+
+.dndev-floating-fieldset .dndev-input:focus,
+.dndev-floating-fieldset .dndev-input:focus-visible {
+  border-color: transparent;
+  box-shadow: none;
+  outline: none;
+}
+
 /* packages/components/src/atomic/List/List.css */
 
 .dndev-list {
@@ -4783,20 +5027,41 @@ em {
 /* packages/components/src/atomic/PasswordInput/PasswordInput.css */
 
 .dndev-password-input-with-toggle {
-  padding-inline-end: var(--gap-lg);
+  padding-inline-end: calc(var(--gap-xl) + var(--gap-md)) !important;
 }
 
+/* Eye icon toggle - ALWAYS at end, cannot be overridden */
+
 .dndev-password-toggle-button {
-  position: absolute;
-  inset-inline-end: 0;
-  top: 0;
-  height: 100%;
-  padding-inline-start: var(--gap-md);
-  padding-inline-end: var(--gap-md);
+  position: absolute !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+  inset-inline-end: var(--gap-sm) !important;
+  inset-inline-start: unset !important;
+  background: none !important;
+  border: none !important;
+  cursor: pointer !important;
+  padding: var(--gap-tight) !important;
+  display: flex !important;
+  align-items: center !important;
+  opacity: var(--opacity-muted) !important;
+  transition: opacity var(--dur-fast) var(--ease-in-out) !important;
+  -webkit-user-select: none !important;
+     -moz-user-select: none !important;
+          user-select: none !important;
+  z-index: 1 !important;
+}
+
+.dndev-password-toggle-button:hover,
+.dndev-password-toggle-button:focus {
+  opacity: 1 !important;
+  outline: none !important;
 }
 
 .dndev-password-toggle-icon {
   color: var(--muted-foreground);
+  width: var(--icon-sm);
+  height: var(--icon-sm);
 }
 
 /* packages/components/src/atomic/Pagination/Pagination.css */
@@ -4888,9 +5153,32 @@ em {
   height: 100%;
   width: 100%;
   flex: 1;
+  background-color: var(--primary);
   transition: transform var(--dur-normal) var(--ease-in-out);
+
+  /* Variant colors */
 }
 
+[data-variant='default']:is(.dndev-progress [data-radix-progress-indicator]) {
+    background-color: var(--primary);
+  }
+
+[data-variant='accent']:is(.dndev-progress [data-radix-progress-indicator]) {
+    background-color: var(--accent);
+  }
+
+[data-variant='success']:is(.dndev-progress [data-radix-progress-indicator]) {
+    background-color: var(--success);
+  }
+
+[data-variant='warning']:is(.dndev-progress [data-radix-progress-indicator]) {
+    background-color: var(--warning);
+  }
+
+[data-variant='destructive']:is(.dndev-progress [data-radix-progress-indicator]) {
+    background-color: var(--destructive);
+  }
+
 /* packages/components/src/atomic/RadioGroup/RadioGroup.css */
 
 /* Uses shared .dndev-control-group pattern from patterns.css */
@@ -5096,7 +5384,6 @@ em {
   display: flex;
   flex-direction: column;
   padding: 0;
-  overflow-y: auto;
 }
 
 .dndev-interactive[data-radix-select-item] {
@@ -5218,6 +5505,7 @@ em {
   letter-spacing: 0.2em;
   color: var(--accent) !important;
   margin-block-end: var(--gap-md);
+  text-align: center; /* DEFAULT - works without attribute selector */
 }
 
 .dndev-section-full-width[data-text-align='start'] .dndev-section-title {
@@ -5232,26 +5520,71 @@ em {
   text-align: end;
 }
 
-/* packages/components/src/atomic/Separator/Separator.css */
+/* Collapsible title trigger */
 
-.dndev-separator {
-  flex-shrink: 0;
-  background-color: var(--line-2);
-  margin-inline: auto;
+.dndev-section-title-trigger {
+  width: 100%;
+  cursor: pointer;
+  transition: opacity var(--dur-fast) var(--ease-in-out);
+  margin-block-end: var(--gap-md);
 }
 
-.dndev-separator[data-orientation='horizontal'] {
-    height: 2px;
-    width: 80%;
-
-    /* Inside Section: cap to content width */
-  }
+.dndev-section-title-trigger .dndev-section-title {
+  margin-block-end: 0;
+}
 
-.dndev-section .dndev-separator[data-orientation='horizontal'] {
-      max-width: calc(var(--content-width) * 0.8);
-    }
+.dndev-section-title-trigger:hover {
+  opacity: var(--opacity-strong);
+}
 
-.dndev-separator[data-orientation='vertical'] {
+.dndev-section-title-trigger:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+  border-radius: var(--radius-interactive);
+}
+
+.dndev-section-icon {
+  width: var(--size-md);
+  height: var(--size-md);
+  flex-shrink: 0;
+  color: var(--accent);
+  transition: transform var(--dur-normal) var(--ease-in-out);
+}
+
+.dndev-section-full-width[data-text-align='start']
+  .dndev-section-title-trigger {
+  justify-content: flex-start;
+}
+
+.dndev-section-full-width[data-text-align='center']
+  .dndev-section-title-trigger {
+  justify-content: center;
+}
+
+.dndev-section-full-width[data-text-align='end'] .dndev-section-title-trigger {
+  justify-content: flex-end;
+}
+
+/* packages/components/src/atomic/Separator/Separator.css */
+
+.dndev-separator {
+  flex-shrink: 0;
+  background-color: var(--line-2);
+  margin-inline: auto;
+}
+
+.dndev-separator[data-orientation='horizontal'] {
+    height: 2px;
+    width: 80%;
+
+    /* Inside Section: cap to content width */
+  }
+
+.dndev-section .dndev-separator[data-orientation='horizontal'] {
+      max-width: calc(var(--content-width) * 0.8);
+    }
+
+.dndev-separator[data-orientation='vertical'] {
     width: 1px;
     height: 100%;
   }
@@ -5373,50 +5706,210 @@ em {
   display: flex;
   flex-direction: column;
   z-index: var(--z-modal);
-  border-radius: var(--radius-floating); /* Square like floating panels */
+  background: var(--card);
+  /* Ensure background is opaque */
+  color: var(--card-foreground);
+  box-shadow: var(--shadow-xl);
+  /* Focus Tunnel: Deep elevation */
+  overflow: hidden;
+  /* Scroll Trap: Container clips overflow */
+
+  /* Motion Physics: Base state */
+  will-change: transform, opacity;
 
-  /* Sheet positioning by side */
+  /* Open state animation - "Heavy" ease for premium feel */
 }
 
+.dndev-sheet-content[data-state='open'] {
+    animation: sheet-slide-in var(--dur-heavy) var(--ease-heavy);
+  }
+
+/* Closed state animation */
+
+.dndev-sheet-content[data-state='closed'] {
+    animation: sheet-slide-out var(--dur-normal) var(--ease-in-out);
+  }
+
+/* Sheet positioning by side - SPATIAL METAPHOR */
+
+/* RIGHT / LEFT (Desktop Panels) */
+
 .dndev-sheet-content[data-side='right'],.dndev-sheet-content[data-side='left'] {
     top: 0;
     bottom: 0;
     width: 80%;
     max-width: 56rem;
+    /* Standard panel width */
+    height: 100%;
+    /* Full height */
+    border-radius: 0;
+    /* Square edges for panel metaphor */
   }
 
 .dndev-sheet-content[data-side='right'] {
+    /* Physical positioning: right edge */
     right: 0;
+    left: auto;
+    /* Border on logical start (left in LTR, right in RTL) */
+    border-inline-start: var(--border-hairline) solid var(--line-1);
   }
 
 .dndev-sheet-content[data-side='left'] {
+    /* Physical positioning: left edge */
     left: 0;
+    right: auto;
+    /* Border on logical end (right in LTR, left in RTL) */
+    border-inline-end: var(--border-hairline) solid var(--line-1);
   }
 
+/* TOP / BOTTOM (Mobile Cards) */
+
 .dndev-sheet-content[data-side='top'],.dndev-sheet-content[data-side='bottom'] {
     left: 0;
     right: 0;
-    height: 80%;
-    max-height: 56rem;
-    overflow: hidden;
+    /* Card metaphor: Detached from opposite edge */
+    height: auto;
+    max-height: 92dvh;
+    /* Never touch top edge */
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+
+    /* On larger screens, constrain width */
   }
 
+@media (width >=768px) {
+
+.dndev-sheet-content[data-side='top'],.dndev-sheet-content[data-side='bottom'] {
+      max-width: 56rem;
+      width: 90%;
+      border-radius: var(--radius-lg);
+      /* Fully rounded card on desktop */
+  }
+    }
+
 .dndev-sheet-content[data-side='top'] {
     top: 0;
+    border-bottom: var(--border-hairline) solid var(--line-1);
+    /* Rounded bottom corners only */
+    border-bottom-left-radius: var(--radius-lg);
+    border-bottom-right-radius: var(--radius-lg);
   }
 
 .dndev-sheet-content[data-side='bottom'] {
     bottom: 0;
+    border-top: var(--border-hairline) solid var(--line-1);
+    /* Rounded top corners only */
+    border-top-left-radius: var(--radius-lg);
+    border-top-right-radius: var(--radius-lg);
   }
 
+/* DRAG HANDLE PILL - Visual affordance for draggable sheets */
+
+.dndev-sheet-drag-handle {
+  width: 2.5rem;
+  height: 0.25rem;
+  background: var(--line-2);
+  border-radius: var(--radius-full);
+  margin: var(--gap-sm) auto 0;
+  flex-shrink: 0;
+  cursor: grab;
+  transition: background-color var(--dur-fast) var(--ease-in-out);
+}
+
+.dndev-sheet-drag-handle:active {
+    cursor: grabbing;
+  }
+
+/* Positioning for bottom sheets */
+
+.dndev-sheet-content[data-side='bottom'] > .dndev-sheet-drag-handle {
+  margin-top: var(--gap-sm);
+  margin-bottom: 0;
+}
+
+/* Positioning for top sheets */
+
+.dndev-sheet-content[data-side='top'] > .dndev-sheet-drag-handle {
+  margin-top: max(var(--gap-sm), env(safe-area-inset-top));
+  margin-bottom: 0;
+}
+
+/* HEADER - Pinned, No Padding (Tight Layout) */
+
+/* Industry standard: Title always on start, X always on end (consistent across all sides) */
+
 .dndev-sheet-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--gap-md);
   flex-shrink: 0;
+  /* Never shrink */
   min-height: var(--touch-target);
-  margin-bottom: var(--gap-md);
+  /* No padding - tight layout: [ Title               X ] */
+  padding-block: 0;
+  /* RTL-aware: padding on logical start only */
+  padding-inline-start: var(--gap-md);
+  padding-inline-end: 0; /* X button has its own spacing */
+  border-bottom: var(--border-hairline) solid var(--line-1);
+  /* Separator */
+
+  /* Thumb Ergonomics: Top Safe Area (only for top sheets) */
+}
+
+.dndev-sheet-content[data-side='top'] .dndev-sheet-header {
+    padding-top: max(0, env(safe-area-inset-top));
+  }
+
+/* Adjust header padding when drag handle is present (sibling selector) */
+
+.dndev-sheet-content[data-side='bottom'] .dndev-sheet-drag-handle ~ .dndev-sheet-header,
+.dndev-sheet-content[data-side='top'] .dndev-sheet-drag-handle ~ .dndev-sheet-header {
+  padding-top: 0;
+}
+
+/* BODY - Scrollable */
+
+.dndev-sheet-body {
+  flex: 1;
+  /* Consumes available space */
+  overflow-y: auto;
+  /* Independent scroll */
+  overflow-x: hidden;
+  padding: var(--gap-md);
+  overscroll-behavior: contain;
+  /* Prevent body scroll chaining */
+}
+
+/* FOOTER - Pinned */
+
+.dndev-sheet-footer {
+  flex-shrink: 0;
+  /* Never shrink */
+  padding: var(--gap-md);
+  border-top: var(--border-hairline) solid var(--line-1);
+  /* Separator */
+  display: flex;
+  flex-direction: column-reverse;
+  /* Mobile-first stacking */
+  gap: var(--gap-sm);
+
+  /* Desktop: Row layout */
+}
+
+@media (width >=640px) {
+
+.dndev-sheet-footer {
+    flex-direction: row;
+    justify-content: flex-end;
+}
+  }
+
+.dndev-sheet-footer {
+
+  /* Thumb Ergonomics: Bottom Safe Area (Home Indicator) */
+  padding-bottom: max(var(--gap-md), env(safe-area-inset-bottom));
 }
 
 .dndev-sheet-title {
@@ -5426,19 +5919,72 @@ em {
 }
 
 .dndev-sheet-close {
-  position: absolute;
-  top: var(--gap-md);
-  inset-inline-end: var(--gap-md);
+  /* Position relative - flex handles alignment */
+  position: relative;
+  margin-inline-start: auto;
+  /* Push to end (RTL-aware: end = right in LTR, left in RTL) */
   opacity: var(--opacity-muted);
+  /* No padding - tight spacing */
+  padding: 0;
+  /* RTL-aware: padding on logical end only */
+  padding-inline-end: var(--gap-md);
+  padding-inline-start: 0;
 }
 
 .dndev-sheet-close:hover {
     opacity: 1;
   }
 
-.dndev-sheet-footer {
-  flex-shrink: 0;
-  margin-top: var(--gap-md);
+/* ===========================
+   ANIMATIONS (Motion Physics)
+   =========================== */
+
+/* Slide In/Out Keyframes - Context Aware */
+
+@keyframes sheet-slide-in {
+  from {
+    opacity: 0;
+    transform: var(--slide-enter-transform);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+}
+
+@keyframes sheet-slide-out {
+  from {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+
+  to {
+    opacity: 0;
+    transform: var(--slide-exit-transform);
+  }
+}
+
+/* Define Transforms based on Side */
+
+.dndev-sheet-content[data-side='right'] {
+  --slide-enter-transform: translateX(100%);
+  --slide-exit-transform: translateX(100%);
+}
+
+.dndev-sheet-content[data-side='left'] {
+  --slide-enter-transform: translateX(-100%);
+  --slide-exit-transform: translateX(-100%);
+}
+
+.dndev-sheet-content[data-side='bottom'] {
+  --slide-enter-transform: translateY(100%);
+  --slide-exit-transform: translateY(100%);
+}
+
+.dndev-sheet-content[data-side='top'] {
+  --slide-enter-transform: translateY(-100%);
+  --slide-exit-transform: translateY(-100%);
 }
 
 /* packages/components/src/atomic/Skeleton/Skeleton.css */
@@ -6094,6 +6640,61 @@ em {
   transform: translateX(calc(2.75rem - 1.25rem - 0.125rem));
 }
 
+/* Switch with labels container */
+
+.dndev-switch-with-labels {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-sm);
+  flex-wrap: wrap;
+}
+
+/* Labels - keep switch and its labels on one line when possible */
+
+.dndev-switch-with-labels > .dndev-switch {
+  flex-shrink: 0;
+}
+
+.dndev-switch-label {
+  font-size: var(--font-size-sm);
+  transition:
+    color var(--dur-normal) var(--ease-in-out),
+    font-weight var(--dur-normal) var(--ease-in-out);
+  white-space: nowrap;
+}
+
+/* Unchecked label - active when switch is unchecked */
+
+.dndev-switch-with-labels:not(:has(.dndev-switch[data-state='checked']))
+  .dndev-switch-label-unchecked,
+.dndev-switch-with-labels[data-checked='false'] .dndev-switch-label-unchecked {
+  color: var(--foreground);
+  font-weight: var(--font-weight-medium);
+}
+
+.dndev-switch-with-labels:has(.dndev-switch[data-state='checked'])
+  .dndev-switch-label-unchecked,
+.dndev-switch-with-labels[data-checked='true'] .dndev-switch-label-unchecked {
+  color: var(--muted-foreground);
+  font-weight: var(--font-weight-normal);
+}
+
+/* Checked label - active when switch is checked */
+
+.dndev-switch-with-labels:has(.dndev-switch[data-state='checked'])
+  .dndev-switch-label-checked,
+.dndev-switch-with-labels[data-checked='true'] .dndev-switch-label-checked {
+  color: var(--foreground);
+  font-weight: var(--font-weight-medium);
+}
+
+.dndev-switch-with-labels:not(:has(.dndev-switch[data-state='checked']))
+  .dndev-switch-label-checked,
+.dndev-switch-with-labels[data-checked='false'] .dndev-switch-label-checked {
+  color: var(--muted-foreground);
+  font-weight: var(--font-weight-normal);
+}
+
 /* packages/components/src/atomic/Table/Table.css */
 
 .dndev-table-wrapper {
@@ -6130,6 +6731,12 @@ em {
     background-color: color-mix(in oklab, var(--accent) 15%, transparent);
   }
 
+/* Cursor pointer for clickable rows */
+
+.dndev-table-row.dndev-cursor-pointer {
+  cursor: pointer;
+}
+
 /* Zebra striping for data tables */
 
 .dndev-table-body .dndev-table-row:nth-child(even) {
@@ -6159,7 +6766,7 @@ em {
 /* Table head (th) styles */
 
 .dndev-table-head {
-  text-align: left;
+  text-align: start;
   vertical-align: middle;
   font-weight: 500;
   color: var(--muted-foreground);
@@ -6176,12 +6783,12 @@ em {
     text-align: center;
   }
 
-.dndev-table-head[data-align='right'] {
-    text-align: right;
+.dndev-table-head[data-align='end'] {
+    text-align: end;
   }
 
-.dndev-table-head[data-align='left'] {
-    text-align: left;
+.dndev-table-head[data-align='start'] {
+    text-align: start;
   }
 
 /* Table cell (td) styles */
@@ -6197,14 +6804,48 @@ em {
     text-align: center;
   }
 
-.dndev-table-cell[data-align='right'] {
-    text-align: right;
+.dndev-table-cell[data-align='end'] {
+    text-align: end;
   }
 
-.dndev-table-cell[data-align='left'] {
-    text-align: left;
+.dndev-table-cell[data-align='start'] {
+    text-align: start;
   }
 
+/* Excel-like grid lines variant */
+
+.dndev-table-grid .dndev-table-head,
+.dndev-table-grid .dndev-table-cell {
+  border: 1px solid var(--border);
+  padding: 0;
+}
+
+.dndev-table-grid .dndev-table-row {
+  border-bottom: 1px solid var(--border);
+}
+
+.dndev-table-grid .dndev-table-row:last-child {
+  border-bottom: 1px solid var(--border);
+}
+
+/* Input components inside grid cells should be borderless and fit snugly */
+
+.dndev-table-grid .dndev-table-cell .dndev-input,
+.dndev-table-grid .dndev-table-cell input[type='text'],
+.dndev-table-grid .dndev-table-cell input[type='number'] {
+  border: none;
+  background: transparent;
+  width: 100%;
+  height: 100%;
+  box-shadow: none;
+}
+
+.dndev-table-grid .dndev-table-cell .dndev-input:focus,
+.dndev-table-grid .dndev-table-cell input:focus {
+  outline: 2px solid var(--primary);
+  outline-offset: -2px;
+}
+
 /* Table caption styles */
 
 .dndev-table-caption {
@@ -6221,7 +6862,7 @@ em {
 
 .dndev-table-search-icon {
   position: absolute;
-  left: var(--gap-md);
+  inset-inline-start: var(--gap-md);
   top: 50%;
   transform: translateY(-50%);
   width: var(--icon-md);
@@ -6388,7 +7029,7 @@ em {
 .dndev-tag {
   display: inline-flex;
   align-items: center;
-  gap: var(--gap-xs);
+  gap: var(--gap-sm);
   border-radius: var(--radius-full);
   border: 1px solid transparent;
   font-size: var(--font-size-sm);
@@ -6518,8 +7159,18 @@ em {
   font-weight: var(--font-weight-medium);
   line-height: var(--line-height);
   background-color: transparent; /* Text never has background, only color changes */
+
+  /* Respect semantic HTML elements */
 }
 
+.dndev-text-base:is(strong) {
+    font-weight: var(--font-weight-semibold);
+  }
+
+.dndev-text-base:is(em) {
+    font-style: italic;
+  }
+
 .dndev-text-base[data-variant='default'] {
     color: inherit;
   }
@@ -7467,7 +8118,7 @@ em {
   align-items: stretch;
 }
 
-@media (width <= 699px) {
+@media (width <=699px) {
 
 [data-cols='2'] {
     grid-template-columns: repeat(1, minmax(350px, 1fr));
@@ -7479,14 +8130,14 @@ em {
   align-items: stretch;
 }
 
-@media (width <= 1049px) {
+@media (width <=1049px) {
 
 [data-cols='3'] {
     grid-template-columns: repeat(2, minmax(350px, 1fr));
 }
   }
 
-@media (width <= 699px) {
+@media (width <=699px) {
 
 [data-cols='3'] {
     grid-template-columns: repeat(1, minmax(350px, 1fr));
@@ -7500,21 +8151,21 @@ em {
   /* Responsive: reduce columns when container is narrow */
 }
 
-@media (width <= 1399px) {
+@media (width <=1399px) {
 
 [data-cols='4'] {
     grid-template-columns: repeat(3, minmax(0, 1fr));
 }
   }
 
-@media (width <= 1049px) {
+@media (width <=1049px) {
 
 [data-cols='4'] {
     grid-template-columns: repeat(2, minmax(0, 1fr));
 }
   }
 
-@media (width <= 699px) {
+@media (width <=699px) {
 
 [data-cols='4'] {
     grid-template-columns: repeat(1, minmax(0, 1fr));
@@ -7581,18 +8232,22 @@ em {
 
 code {
   font-family: var(--font-mono);
-  font-size: inherit; /* Inherit parent size */
-  font-weight: inherit; /* Inherit parent weight */
+  font-size: inherit;
+  /* Inherit parent size */
+  font-weight: inherit;
+  /* Inherit parent weight */
   line-height: inherit;
   color: inherit;
-  background: transparent; /* No background by default */
+  background: transparent;
+  /* No background by default */
 }
 
 /* Code variant - visual styling (background, padding, can apply to any element) */
 
 [data-variant='code'] {
   font-family: var(--font-mono);
-  font-size: var(--font-size-sm); /* Default small size */
+  font-size: var(--font-size-sm);
+  /* Default small size */
   background: var(--muted);
   color: var(--muted-foreground);
   padding: var(--gap-sm) var(--gap-md);
@@ -7687,7 +8342,8 @@ h4[data-variant='code'] {
 
 .dndev-relative {
   position: relative;
-  min-width: 0; /* Allow flex items to shrink below content size */
+  min-width: 0;
+  /* Allow flex items to shrink below content size */
 }
 
 .dndev-absolute {
@@ -7779,6 +8435,10 @@ h4[data-variant='code'] {
   pointer-events: auto;
 }
 
+.dndev-cursor-pointer {
+  cursor: pointer;
+}
+
 .dndev-aspect-video {
   aspect-ratio: 16 / 9;
 }
@@ -7792,7 +8452,7 @@ h4[data-variant='code'] {
    RESPONSIVE DISPLAY
    =========================== */
 
-@media (width >= 768px) {
+@media (width >=768px) {
   .dndev-md\:block {
     display: block;
   }
@@ -7818,7 +8478,7 @@ h4[data-variant='code'] {
   }
 }
 
-@media (width >= 1024px) {
+@media (width >=1024px) {
   .dndev-lg\:block {
     display: block;
   }
@@ -7878,6 +8538,10 @@ h4[data-variant='code'] {
    Components are unaffected - they own their own spacing
    =========================== */
 
+.prose {
+  text-align: start;
+}
+
 .prose h1,.prose h2,.prose h3,.prose h4,.prose h5,.prose h6 {
     margin-block: var(--gap-md);
   }
@@ -8341,10 +9005,7 @@ main[role='main'][data-routing-animation='none'] {
   max-height: 100dvh;
   overflow: hidden;
   display: grid;
-  /* ONE DRY grid structure: 3 rows, 2 columns */
-  /* Footer starts at sidebar edge (column 2) - when sidebar-width is 0px, footer starts at left edge */
-  /* Footer grows with content wrapping. For pixel-perfect calc() accuracy when footer wraps,
-     implement ResizeObserver to update --footer-height dynamically. */
+  /* Grid structure: 3 rows, 2 columns */
   grid-template-areas:
     'header header'
     'sidebar main'
@@ -8355,16 +9016,62 @@ main[role='main'][data-routing-animation='none'] {
     );
   grid-template-columns: var(--sidebar-width) 1fr;
 
-  /* Game layout: Grid rows adjust based on breakpoint (footer hidden on tablet/mobile) */
+  /* Mobile: No footer grid row - footer is inside main */
+  /* When mergedBar is shown, header is hidden but grid still needs space for mergedBar */
 }
 
-[data-layout='game']:root .dndev-layout {
-    grid-template-rows: var(--header-height) 1fr minmax(
-        var(--footer-height),
-        auto
-      );
+@media (width <= 1023px) {
+
+.dndev-layout {
+    grid-template-areas:
+      'header header'
+      'sidebar main';
+    grid-template-rows: var(--header-height) 1fr;
+
+    /* Presets with mergedBar: header is hidden, but grid still allocates space for mergedBar */
+    /* No extra padding needed - grid spacing is sufficient */
+}
+    .dndev-layout[data-layout='admin'],.dndev-layout[data-layout='moolti'],.dndev-layout[data-layout='game'],.dndev-layout[data-layout='docs'] {
+      /* Grid already accounts for header-height, mergedBar is fixed and doesn't need extra padding */
+    }
+  }
+
+/* Footer containers: show/hide based on breakpoint */
+
+.footer-mobile {
+  display: none;
+  /* No margin-top: auto - footer scrolls with content on mobile */
+  /* No flex-shrink: 0 - footer is in normal flow, not stuck at bottom */
+}
+
+.footer-desktop {
+  display: contents; /* Children (footer element) participate in grid */
+}
+
+@media (width <= 1023px) {
+  .footer-mobile {
+    display: block;
+  }
+
+  .footer-desktop {
+    display: none;
   }
 
+  /* Game: No mobile footer - navigation in MergedBar */
+  [data-layout='game'] .footer-mobile {
+    display: none;
+  }
+}
+
+/* Presets with no footer at all */
+
+[data-layout='moolti'] .footer-mobile,
+[data-layout='moolti'] .footer-desktop,
+[data-layout='plain'] .footer-mobile,
+[data-layout='plain'] .footer-desktop {
+  display: none;
+}
+
 /* ===========================
    LAYOUT ZONE POSITIONING RULES
    Follows logical flow: Header → Sidebar → Main → Footer
@@ -8378,6 +9085,8 @@ header[role='banner'] {
   grid-area: header;
   box-sizing: border-box;
   height: var(--header-height);
+  min-height: var(--header-height);
+  max-height: var(--header-height);
   position: relative;
   z-index: var(--z-header);
   contain: layout style;
@@ -8404,7 +9113,9 @@ header[role='banner'] {
   align-items: center;
   flex-shrink: 0;
   height: 100%;
+  max-height: 100%;
   gap: var(--gap-sm);
+  overflow: hidden;
 }
 
 .header-end {
@@ -8412,8 +9123,11 @@ header[role='banner'] {
   align-items: center;
   justify-content: flex-end;
   flex-shrink: 0;
+  height: 100%;
+  max-height: 100%;
   margin-inline-start: auto;
   gap: var(--gap-sm);
+  overflow: hidden;
 }
 
 /* Viewport-centered center content - absolutely positioned overlay */
@@ -8705,11 +9419,17 @@ main[role='main'] > *:not(.breadcrumbs-container):first-of-type,main[role='main'
     /* Page content grows */
   }
 
-main[role='main'] > *:last-child {
-    flex-shrink: 0;
-    /* Footer stays at bottom */
+/* Desktop: Footer stays at bottom of viewport */
+
+@media (width > 1023px) {
+    main[role='main'] > *:last-child {
+      flex-shrink: 0;
+      /* Footer stays at bottom */
+    }
   }
 
+/* Mobile: Footer scrolls with content (no flex-shrink needed) */
+
 /* Footer: Full width by default, app presets start after sidebar */
 
 /* box-sizing: border-box ensures borders are included in height */
@@ -8742,26 +9462,6 @@ footer[role='contentinfo'] > * {
     padding-inline-end: var(--content-padding);
   }
 
-/* Game: Hide footer on tablet/mobile - merged into GameMergedBar */
-
-@media (width <= 1023px) {
-    [data-layout='game']:root footer[role='contentinfo'] {
-      display: none;
-    }
-  }
-
-/* Moolti: No footer (built into sidebar) */
-
-[data-layout='moolti']:root footer[role='contentinfo'] {
-    display: none;
-  }
-
-/* Plain: No footer (full-screen apps) */
-
-[data-layout='plain']:root footer[role='contentinfo'] {
-    display: none;
-  }
-
 /* Footer text styles */
 
 footer[role='contentinfo'] .footer-copyright {
@@ -8806,7 +9506,7 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
 
 .merged-bar[data-position='top'] {
   top: 0;
-  height: 64px;
+  height: var(--header-height);
   border-bottom: 2px solid var(--border);
   padding-top: env(safe-area-inset-top);
 }
@@ -8834,7 +9534,7 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
   min-height: 0;
 }
 
-/* Mobile (<1024px): Show merged-bar, hide zones, add padding */
+/* Mobile (<1024px): Show merged-bar, hide zones */
 
 @media (width <= 1023px) {
   /* Presets with mergedBar: top (admin, moolti, game, docs) */
@@ -8849,7 +9549,8 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
   [data-layout='moolti'] .dndev-layout,
   [data-layout='game'] .dndev-layout,
   [data-layout='docs'] .dndev-layout {
-    padding-top: calc(64px + env(safe-area-inset-top));
+    /* Remove padding-top - grid already accounts for header-height, mergedBar is fixed and doesn't affect grid flow */
+    /* Content won't go under mergedBar because grid positions main after header row */
   }
 
   [data-layout='admin'] header[role='banner'],
@@ -9081,7 +9782,7 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
 .breadcrumb-item {
   display: inline-flex;
   align-items: center;
-  gap: var(--gap-xs);
+  gap: var(--gap-sm);
 }
 
 .breadcrumbs .separator,
@@ -9158,7 +9859,7 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
   min-height: 0;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: flex-start;
   gap: var(--gap-lg);
   /* Controlled by density system */
   /* Default: centered */
@@ -9445,7 +10146,7 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
   font-family: Roboto;
   font-style: normal;
   font-weight: 400;
-  font-display: optional;
+  font-display: swap;
   src: url('/fonts/Roboto-400-latin.woff2') format('woff2');
   unicode-range: U+0000-00FF; /* Basic Latin - loads first for performance */
 }
@@ -9454,7 +10155,7 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
   font-family: Roboto;
   font-style: normal;
   font-weight: 700;
-  font-display: optional;
+  font-display: swap;
   src: url('/fonts/Roboto-700-latin.woff2') format('woff2');
   unicode-range: U+0000-00FF; /* Basic Latin - loads first for performance */
 }
@@ -9602,7 +10303,7 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
   font-family: Inter;
   font-style: normal;
   font-weight: 400 700;
-  font-display: optional;
+  font-display: swap; /* Changed from optional to swap - we preload this font */
   src: url('/fonts/Inter-latin.woff2') format('woff2');
   unicode-range:
     U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
@@ -9635,7 +10336,7 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
   font-family: 'Playfair Display';
   font-style: normal;
   font-weight: 400 700;
-  font-display: optional;
+  font-display: swap;
   src: url('/fonts/PlayfairDisplay-latin.woff2') format('woff2');
   unicode-range:
     U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,