@yuva-devlab/ui 1.4.4 → 2.0.0

package/dist/styles/components.css

@@ -1,11 +1,12 @@
 /**
  * @file components.css
- * @description Bundled modular dl-* component styles wrapped in @layer dl-components.
- * Pure CSS — zero Tailwind dependency. Scoped in @layer so consumer utilities take precedence.
+ * @description Bundled modular dl-* component and layout styles with native Cascade Layers (@layer).
  */
 
+@layer dl-reset, dl-tokens, dl-components, dl-layout, dl-utilities, dl-app;
+
 @layer dl-components {
-  /* ── accordion ── */
+  /* ── accordion/accordion.css ── */
   .dl-accordion-item {
     border-bottom: 1px solid var(--border);
   }
@@ -56,13 +57,13 @@
     padding-top: 0;
   }
 
-  /* ── alert ── */
+  /* ── alert/alert.css ── */
   .dl-alert {
     position: relative;
     width: 100%;
-    border-radius: var(--radius-lg, 0.5rem);
+    border-radius: var(--radius, 0.5rem);
     border: 1px solid var(--border);
-    padding: 0.875rem 1rem;
+    padding: var(--space-4, 0.875rem) var(--space-5, 1rem);
     font-size: 0.875rem;
     display: grid;
     grid-template-columns: 1fr;
@@ -121,7 +122,7 @@
     color: color-mix(in oklch, var(--destructive) 80%, var(--foreground));
   }
 
-  /* ── alert-dialog ── */
+  /* ── alert-dialog/alert-dialog.css ── */
   .dl-alert-dialog-overlay {
     position: fixed;
     inset: 0;
@@ -207,7 +208,7 @@
     line-height: 1.5;
   }
 
-  /* ── avatar ── */
+  /* ── avatar/avatar.css ── */
   .dl-avatar {
     position: relative;
     display: flex;
@@ -235,7 +236,7 @@
     font-weight: 500;
   }
 
-  /* ── badge ── */
+  /* ── badge/badge.css ── */
   .dl-badge {
     display: inline-flex;
     align-items: center;
@@ -313,7 +314,7 @@
     color: var(--muted-foreground);
   }
 
-  /* ── breadcrumb ── */
+  /* ── breadcrumb/breadcrumb.css ── */
   .dl-breadcrumb-list {
     display: flex;
     flex-wrap: wrap;
@@ -378,7 +379,7 @@
     height: 1rem;
   }
 
-  /* ── button ── */
+  /* ── button/button.css ── */
   .dl-btn {
     display: inline-flex;
     align-items: center;
@@ -486,39 +487,9 @@
     text-decoration: underline;
   }
 
-  /* ── calendar ── */
-  .dl-calendar {
-    --cell-size: 2rem;
-    display: inline-block;
-    width: fit-content;
-    max-width: 100%;
-    padding: 0.75rem;
-    box-sizing: border-box;
-    color: var(--foreground);
-  }
-
-  .dl-calendar .rdp-root {
-    width: fit-content;
-    margin: 0 auto;
-  }
-
-  .dl-calendar .rdp-months {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    width: calc(var(--cell-size, 2rem) * 7);
-    box-sizing: border-box;
-  }
-
-  .dl-calendar .rdp-month {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-    width: 100%;
-  }
-
-  .dl-calendar .rdp-month_caption {
+  /* ── calendar/calendar-nav.css ── */
+  .dl-calendar .rdp-month_caption,
+  .dl-calendar .dl-calendar__month-caption {
     position: relative;
     display: flex;
     height: var(--cell-size, 2rem);
@@ -532,19 +503,54 @@
     box-sizing: border-box;
   }
 
-  .dl-calendar .rdp-caption_label {
+  .dl-calendar .rdp-caption_label,
+  .dl-calendar .dl-calendar__caption-label {
     font-size: 0.875rem;
     font-weight: 600;
     color: var(--foreground);
     line-height: 1;
+    user-select: none;
+  }
+
+  .dl-calendar .dl-calendar__caption-label--interactive {
+    display: flex;
+    height: var(--control-height-sm, 2rem);
+    align-items: center;
+    gap: 0.25rem;
+    border-radius: var(--radius-md, 0.375rem);
+    padding-inline: 0.5rem 0.25rem;
+  }
+
+  .dl-calendar .dl-calendar__dropdowns {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    gap: 0.375rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+
+  .dl-calendar .dl-calendar__dropdown-root {
+    position: relative;
+    border-radius: var(--radius-md, 0.375rem);
+    border: 1px solid var(--border);
+    box-shadow: var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+  }
+
+  .dl-calendar .dl-calendar__dropdown {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    background: var(--popover);
+    cursor: pointer;
   }
 
-  /* Navigation prev / next arrows */
-  .dl-calendar .rdp-nav {
+  .dl-calendar .rdp-nav,
+  .dl-calendar .dl-calendar__nav {
     position: absolute;
     top: 0;
-    left: 0;
-    right: 0;
+    inset-inline: 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -554,7 +560,8 @@
   }
 
   .dl-calendar .rdp-button_previous,
-  .dl-calendar .rdp-button_next {
+  .dl-calendar .rdp-button_next,
+  .dl-calendar .dl-calendar__nav-button {
     pointer-events: auto;
     width: var(--cell-size, 2rem) !important;
     height: var(--cell-size, 2rem) !important;
@@ -568,24 +575,74 @@
     background: var(--background);
     color: var(--muted-foreground);
     cursor: pointer;
+    user-select: none;
     transition: all 0.15s ease;
   }
 
   .dl-calendar .rdp-button_previous:hover,
-  .dl-calendar .rdp-button_next:hover {
+  .dl-calendar .rdp-button_next:hover,
+  .dl-calendar .dl-calendar__nav-button:hover {
     background-color: var(--accent);
     color: var(--accent-foreground);
   }
 
+  .dl-calendar .rdp-button_previous[aria-disabled="true"],
+  .dl-calendar .rdp-button_next[aria-disabled="true"] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
   .dl-calendar .rdp-button_previous svg,
-  .dl-calendar .rdp-button_next svg {
+  .dl-calendar .rdp-button_next svg,
+  .dl-calendar .dl-calendar__chevron {
     width: 1rem;
     height: 1rem;
     flex-shrink: 0;
   }
 
-  /* Grid Table */
+  /* ── calendar/calendar.css ── */
+  .dl-calendar {
+    --cell-size: var(--control-height-sm, 2rem);
+    display: inline-block;
+    width: fit-content;
+    max-width: 100%;
+    padding: var(--space-3, 0.75rem);
+    box-sizing: border-box;
+    color: var(--foreground);
+  }
+
+  .dl-calendar .rdp-root {
+    width: fit-content;
+    margin: 0 auto;
+  }
+
+  .dl-calendar .rdp-months,
+  .dl-calendar .dl-calendar__months {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: calc(var(--cell-size, 2rem) * 7);
+    box-sizing: border-box;
+  }
+
+  @media (min-width: 768px) {
+    .dl-calendar .rdp-months,
+    .dl-calendar .dl-calendar__months {
+      flex-direction: row;
+    }
+  }
+
+  .dl-calendar .rdp-month,
+  .dl-calendar .dl-calendar__month {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    width: 100%;
+  }
+
   .dl-calendar table.rdp-month_grid,
+  .dl-calendar table.dl-calendar__table,
   .dl-calendar table {
     width: 100%;
     border-collapse: collapse;
@@ -593,7 +650,6 @@
     margin: 0;
   }
 
-  /* Weekday header cells */
   .dl-calendar th.rdp-weekday,
   .dl-calendar th {
     width: calc(100% / 7);
@@ -608,7 +664,6 @@
     box-sizing: border-box;
   }
 
-  /* Day table cells */
   .dl-calendar td.rdp-day,
   .dl-calendar td {
     width: calc(100% / 7);
@@ -618,12 +673,19 @@
     text-align: center;
     vertical-align: middle;
     background: transparent !important;
-    background-color: transparent !important;
     border: none !important;
     box-sizing: border-box;
   }
 
-  /* Day Button inside td */
+  .dl-calendar .dl-calendar__week-number {
+    display: flex;
+    width: var(--cell-size, 2rem);
+    height: var(--cell-size, 2rem);
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+
   .dl-calendar button.rdp-day_button,
   .dl-calendar .dl-calendar__day-button {
     width: 100% !important;
@@ -635,10 +697,12 @@
     display: inline-flex !important;
     align-items: center;
     justify-content: center;
+    aspect-ratio: 1 / 1;
     border-radius: var(--radius-md, 0.375rem) !important;
     border: none !important;
     font-size: 0.875rem;
     font-weight: 400;
+    line-height: 1;
     color: var(--foreground);
     background: transparent;
     cursor: pointer;
@@ -651,7 +715,6 @@
     color: var(--accent-foreground) !important;
   }
 
-  /* Selected Date Highlight */
   .dl-calendar td[aria-selected="true"] button.rdp-day_button,
   .dl-calendar td.rdp-selected button.rdp-day_button,
   .dl-calendar button.rdp-day_button[data-selected="true"],
@@ -671,7 +734,6 @@
     color: var(--primary-foreground) !important;
   }
 
-  /* Today indicator (when not selected) */
   .dl-calendar
     td.rdp-today:not([aria-selected="true"]):not(.rdp-selected)
     button.rdp-day_button {
@@ -685,11 +747,9 @@
     border: 1px solid var(--border) !important;
   }
 
-  /* Range selection styles */
   .dl-calendar td.rdp-range_start {
     background-color: var(--accent) !important;
-    border-top-left-radius: var(--radius-md, 0.375rem) !important;
-    border-bottom-left-radius: var(--radius-md, 0.375rem) !important;
+    border-radius: var(--radius-md, 0.375rem) 0 0 var(--radius-md, 0.375rem) !important;
   }
 
   .dl-calendar td.rdp-range_middle {
@@ -705,8 +765,7 @@
 
   .dl-calendar td.rdp-range_end {
     background-color: var(--accent) !important;
-    border-top-right-radius: var(--radius-md, 0.375rem) !important;
-    border-bottom-right-radius: var(--radius-md, 0.375rem) !important;
+    border-radius: 0 var(--radius-md, 0.375rem) var(--radius-md, 0.375rem) !important;
   }
 
   .dl-calendar td.rdp-outside button.rdp-day_button {
@@ -726,9 +785,9 @@
     pointer-events: none;
   }
 
-  /* ── card ── */
+  /* ── card/card.css ── */
   .dl-card {
-    border-radius: var(--radius-lg, 0.5rem);
+    border-radius: var(--radius, 0.75rem);
     border: 1px solid var(--border);
     background-color: var(--card);
     color: var(--card-foreground);
@@ -738,7 +797,7 @@
     display: flex;
     flex-direction: column;
     gap: 0.375rem;
-    padding: 1.5rem;
+    padding: var(--card-padding, 1.5rem);
   }
   .dl-card__title {
     font-weight: 600;
@@ -750,15 +809,15 @@
     color: var(--muted-foreground);
   }
   .dl-card__content {
-    padding: 1.5rem;
+    padding: var(--card-padding, 1.5rem);
   }
   .dl-card__footer {
     display: flex;
     align-items: center;
-    padding: 1.5rem;
+    padding: var(--card-padding, 1.5rem);
   }
 
-  /* ── carousel ── */
+  /* ── carousel/carousel.css ── */
   .dl-carousel {
     position: relative;
   }
@@ -788,18 +847,18 @@
   }
 
   .dl-carousel-item--horizontal {
-    padding-left: 1rem;
+    padding-left: var(--space-4, 1rem);
   }
 
   .dl-carousel-item--vertical {
-    padding-top: 1rem;
+    padding-top: var(--space-4, 1rem);
   }
 
   .dl-carousel-btn {
     position: absolute;
     border-radius: 9999px;
-    width: 2rem;
-    height: 2rem;
+    width: var(--control-height-sm, 2rem);
+    height: var(--control-height-sm, 2rem);
     padding: 0;
   }
 
@@ -827,7 +886,7 @@
     transform: translateX(-50%) rotate(90deg);
   }
 
-  /* ── chart ── */
+  /* ── chart/chart.css ── */
   .dl-chart-container {
     display: flex;
     aspect-ratio: 16 / 9;
@@ -860,14 +919,100 @@
     box-shadow: 0 8px 32px rgb(0 0 0 / 0.18);
   }
 
+  .dl-chart-tooltip__label {
+    font-weight: 500;
+  }
+  .dl-chart-tooltip__grid {
+    display: grid;
+    gap: 0.375rem;
+  }
+  .dl-chart-tooltip__item {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    gap: 0.5rem;
+  }
+  .dl-chart-tooltip__item--center {
+    align-items: center;
+  }
+  .dl-chart-tooltip__item svg {
+    color: var(--muted-foreground);
+    width: 0.625rem;
+    height: 0.625rem;
+  }
+
+  .dl-chart-tooltip__indicator {
+    flex-shrink: 0;
+    border-radius: var(--radius-xs, 0.125rem);
+    background-color: var(--color-bg);
+  }
+  .dl-chart-tooltip__indicator--dot {
+    width: 0.625rem;
+    height: 0.625rem;
+  }
+  .dl-chart-tooltip__indicator--line {
+    width: 0.25rem;
+  }
+  .dl-chart-tooltip__indicator--dashed {
+    width: 0;
+    border: 1.5px dashed var(--color-border);
+    background: transparent;
+  }
+  .dl-chart-tooltip__indicator--nested {
+    margin-block: 0.125rem;
+  }
+
+  .dl-chart-tooltip__row {
+    display: flex;
+    flex: 1 1 0%;
+    justify-content: space-between;
+    align-items: center;
+    line-height: 1;
+  }
+  .dl-chart-tooltip__row--end {
+    align-items: flex-end;
+  }
+  .dl-chart-tooltip__item-label {
+    color: var(--muted-foreground);
+  }
+  .dl-chart-tooltip__item-value {
+    font-family: var(--font-mono, monospace);
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+    color: var(--foreground);
+  }
+
   .dl-chart-legend {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 1rem;
   }
+  .dl-chart-legend--top {
+    padding-bottom: 0.75rem;
+  }
+  .dl-chart-legend--bottom {
+    padding-top: 0.75rem;
+  }
+
+  .dl-chart-legend__item {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+  }
+  .dl-chart-legend__item svg {
+    color: var(--muted-foreground);
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .dl-chart-legend__indicator {
+    flex-shrink: 0;
+    border-radius: var(--radius-xs, 0.125rem);
+    width: 0.5rem;
+    height: 0.5rem;
+  }
 
-  /* ── checkbox ── */
+  /* ── checkbox/checkbox.css ── */
   .dl-checkbox {
     display: flex;
     height: 1rem;
@@ -896,7 +1041,18 @@
     color: var(--primary-foreground);
   }
 
-  /* ── command ── */
+  .dl-checkbox-indicator {
+    display: grid;
+    place-content: center;
+    color: currentColor;
+  }
+
+  .dl-checkbox-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+  /* ── command/command.css ── */
   .dl-command {
     display: flex;
     flex-direction: column;
@@ -917,11 +1073,11 @@
     display: flex;
     align-items: center;
     border-bottom: 1px solid var(--border);
-    padding-inline: 0.75rem;
+    padding-inline: var(--space-3, 0.75rem);
   }
 
   .dl-command-input-icon {
-    margin-inline-end: 0.5rem;
+    margin-inline-end: var(--space-2, 0.5rem);
     width: 1rem;
     height: 1rem;
     flex-shrink: 0;
@@ -930,7 +1086,7 @@
 
   .dl-command-input {
     display: flex;
-    height: 2.5rem;
+    height: var(--control-height-lg, 2.5rem);
     width: 100%;
     border-radius: var(--radius-md, 0.375rem);
     background-color: transparent;
@@ -1023,7 +1179,7 @@
     color: var(--muted-foreground);
   }
 
-  /* ── context-menu ── */
+  /* ── context-menu/context-menu.css ── */
   .dl-context-menu-content {
     z-index: 50;
     min-width: 8rem;
@@ -1044,7 +1200,7 @@
     animation: dl-fade-out 100ms ease;
   }
 
-  /* ── copy-button ── */
+  /* ── copy-button/copy-button.css ── */
   .dl-copy-button {
     display: inline-flex;
     align-items: center;
@@ -1080,13 +1236,13 @@
     flex-shrink: 0;
   }
 
-  /* ── date-picker ── */
+  /* ── date-picker/date-picker.css ── */
   .dl-date-picker-trigger {
     width: 100%;
     justify-content: flex-start;
     text-align: left;
     font-weight: 400;
-    height: 2.25rem;
+    height: var(--control-height-md, 2.25rem);
     border-color: var(--border);
     background-color: color-mix(in oklch, var(--secondary) 40%, transparent);
   }
@@ -1101,7 +1257,7 @@
   }
 
   .dl-date-picker-icon {
-    margin-inline-end: 0.5rem;
+    margin-inline-end: var(--space-2, 0.5rem);
     width: 1rem;
     height: 1rem;
     flex-shrink: 0;
@@ -1118,7 +1274,7 @@
     background-color: var(--popover);
   }
 
-  /* ── dialog ── */
+  /* ── dialog/dialog.css ── */
   .dl-dialog-overlay {
     position: fixed;
     inset: 0;
@@ -1149,7 +1305,7 @@
     padding: 0;
     gap: 0;
     box-shadow: 0 16px 48px rgb(0 0 0 / 0.24);
-    border-radius: var(--radius-lg, 0.75rem);
+    border-radius: var(--radius, 0.75rem);
     overflow: hidden;
     overscroll-behavior: contain;
   }
@@ -1233,8 +1389,8 @@
   .dl-dialog__header {
     display: flex;
     flex-direction: column;
-    gap: 0.375rem;
-    padding: 1.25rem 1.5rem;
+    gap: var(--form-field-gap, 0.375rem);
+    padding: var(--dialog-padding, 1.25rem 1.5rem);
     padding-right: 3.5rem;
     border-bottom: 1px solid var(--border);
     flex-shrink: 0;
@@ -1243,14 +1399,14 @@
     flex: 1 1 auto;
     min-height: 0;
     overflow-y: auto;
-    padding: 1.25rem 1.5rem;
+    padding: var(--dialog-padding, 1.25rem 1.5rem);
   }
   .dl-dialog__footer {
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
-    gap: 0.5rem;
-    padding: 0.875rem 1.5rem;
+    gap: var(--form-field-gap, 0.5rem);
+    padding: var(--dialog-padding, 0.875rem 1.5rem);
     border-top: 1px solid var(--border);
     background-color: color-mix(in srgb, var(--muted) 35%, transparent);
     flex-shrink: 0;
@@ -1266,7 +1422,7 @@
     color: var(--muted-foreground);
   }
 
-  /* ── drawer ── */
+  /* ── drawer/drawer.css ── */
   .dl-drawer-overlay {
     position: fixed;
     inset: 0;
@@ -1332,7 +1488,7 @@
     color: var(--muted-foreground);
   }
 
-  /* ── dropdown-menu ── */
+  /* ── dropdown-menu/dropdown-menu.css ── */
   .dl-menu-content {
     z-index: 50;
     min-width: 8rem;
@@ -1386,6 +1542,24 @@
     font-weight: 600;
     color: var(--muted-foreground);
   }
+  .dl-menu-item--inset,
+  .dl-menu-label--inset {
+    padding-left: 2rem;
+  }
+  .dl-menu-item__chevron {
+    margin-left: auto;
+    width: 1rem;
+    height: 1rem;
+  }
+  .dl-menu-item__icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .dl-menu-item__radio-dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    fill: currentColor;
+  }
   .dl-menu-separator {
     margin: 0.25rem -0.25rem;
     height: 1px;
@@ -1416,7 +1590,76 @@
     height: 0.875rem;
   }
 
-  /* ── form ── */
+  /* ── empty-state/empty-state.css ── */
+  /**
+   * @file empty-state.css
+   * @description Scoped styles for the EmptyState component.
+   * Governed by semantic design tokens.
+   */
+
+  .dl-empty-state {
+    position: relative;
+    display: flex;
+    min-height: 14rem;
+    width: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    border-radius: var(--radius, 0.5rem);
+    border: 1px dashed var(--border);
+    background-color: color-mix(in oklab, var(--card) 40%, transparent);
+    padding: var(--card-padding, var(--space-6, 1.5rem));
+    text-align: center;
+    backdrop-filter: blur(8px);
+  }
+
+  .dl-empty-state__icon-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--control-height-lg, 2.5rem);
+    height: var(--control-height-lg, 2.5rem);
+    border-radius: var(--radius-md, 0.375rem);
+    border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
+    background-color: color-mix(in oklab, var(--primary) 10%, transparent);
+    color: var(--primary);
+    margin-bottom: var(--space-3, 0.75rem);
+  }
+
+  .dl-empty-state__icon-box svg {
+    width: var(--icon-md, 1.25rem);
+    height: var(--icon-md, 1.25rem);
+  }
+
+  .dl-empty-state__title {
+    font-family: var(--theme-font-display, var(--theme-font-sans, inherit));
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1.25;
+    letter-spacing: -0.01em;
+    color: var(--foreground);
+    margin: 0;
+  }
+
+  .dl-empty-state__description {
+    margin: 0;
+    margin-top: var(--space-1, 0.25rem);
+    max-width: 24rem;
+    font-size: 0.75rem;
+    line-height: 1.5;
+    color: var(--muted-foreground);
+  }
+
+  .dl-empty-state__actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2, 0.5rem);
+    margin-top: var(--space-4, 1rem);
+  }
+
+  /* ── form/form.css ── */
   .dl-form-item {
     display: flex;
     flex-direction: column;
@@ -1435,7 +1678,7 @@
     color: var(--destructive);
   }
 
-  /* ── hover-card ── */
+  /* ── hover-card/hover-card.css ── */
   .dl-hover-card {
     z-index: 50;
     width: 16rem;
@@ -1460,7 +1703,7 @@
       dl-zoom-out 150ms ease;
   }
 
-  /* ── input ── */
+  /* ── input/input.css ── */
   .dl-input-wrapper {
     position: relative;
     display: inline-flex;
@@ -1551,7 +1794,7 @@
     -webkit-appearance: none;
   }
 
-  /* ── input-otp ── */
+  /* ── input-otp/input-otp.css ── */
   .dl-input-otp-container {
     display: flex;
     align-items: center;
@@ -1623,7 +1866,7 @@
     animation: dl-pulse 1s infinite;
   }
 
-  /* ── label ── */
+  /* ── label/label.css ── */
   .dl-label {
     font-size: 0.75rem;
     font-weight: 500;
@@ -1638,7 +1881,7 @@
     margin-inline-start: 0.25rem;
   }
 
-  /* ── loading-state ── */
+  /* ── loading-state/loading-state.css ── */
   .dl-loading {
     display: flex;
     flex-direction: column;
@@ -1666,16 +1909,27 @@
     gap: 0.5rem;
   }
 
-  /* ── menubar ── */
+  .dl-loading-skeleton__header {
+    height: 2rem;
+    width: 33.333%;
+  }
+
+  .dl-loading-skeleton__row {
+    height: 4rem;
+    width: 100%;
+    border-radius: var(--radius-lg, 0.75rem);
+  }
+
+  /* ── menubar/menubar.css ── */
   .dl-menubar {
     display: flex;
-    height: 2.25rem;
+    height: var(--control-height-md, 2.25rem);
     align-items: center;
-    gap: 0.25rem;
+    gap: var(--space-1, 0.25rem);
     border-radius: var(--radius-md, 0.375rem);
     border: 1px solid var(--border);
     background-color: var(--background);
-    padding: 0.25rem;
+    padding: var(--space-1, 0.25rem);
     box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
   }
 
@@ -1685,7 +1939,7 @@
     user-select: none;
     align-items: center;
     border-radius: var(--radius-sm, 0.25rem);
-    padding: 0.25rem 0.75rem;
+    padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
     font-size: 0.875rem;
     font-weight: 500;
     outline: none;
@@ -1704,7 +1958,7 @@
     color: var(--accent-foreground);
   }
 
-  /* ── metric-card ── */
+  /* ── metric-card/metric-card.css ── */
   .dl-metrics-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
@@ -1774,7 +2028,7 @@
     color: var(--destructive);
   }
 
-  /* ── navigation-menu ── */
+  /* ── navigation-menu/navigation-menu.css ── */
   .dl-navigation-menu {
     position: relative;
     z-index: 10;
@@ -1798,13 +2052,13 @@
 
   .dl-navigation-menu-trigger {
     display: inline-flex;
-    height: 2.25rem;
+    height: var(--control-height-md, 2.25rem);
     width: max-content;
     align-items: center;
     justify-content: center;
     border-radius: var(--radius-md, 0.375rem);
     background-color: var(--background);
-    padding: 0.5rem 1rem;
+    padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
     font-size: 0.875rem;
     font-weight: 500;
     cursor: pointer;
@@ -1913,7 +2167,7 @@
     box-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
   }
 
-  /* ── pagination ── */
+  /* ── pagination/pagination.css ── */
   .dl-pagination {
     margin-inline: auto;
     display: flex;
@@ -1945,12 +2199,18 @@
     padding-inline-end: 0.625rem;
   }
 
+  .dl-pagination-icon {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+  }
+
   .dl-pagination-ellipsis {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 2.25rem;
-    height: 2.25rem;
+    width: var(--control-height-md, 2.25rem);
+    height: var(--control-height-md, 2.25rem);
   }
 
   .dl-pagination-ellipsis svg {
@@ -1958,7 +2218,7 @@
     height: 1rem;
   }
 
-  /* ── panel ── */
+  /* ── panel/panel.css ── */
   .dl-panel {
     border-radius: var(--radius-lg, 0.5rem);
     border: 1px solid var(--border);
@@ -1984,15 +2244,15 @@
     color: var(--muted-foreground);
   }
 
-  /* ── popover ── */
+  /* ── popover/popover.css ── */
   .dl-popover {
     z-index: 50;
     width: 18rem;
-    border-radius: var(--radius-lg, 0.5rem);
+    border-radius: var(--radius, 0.5rem);
     border: 1px solid var(--border);
     background-color: var(--popover);
     color: var(--popover-foreground);
-    padding: 1rem;
+    padding: var(--space-4, 1rem);
     box-shadow: 0 4px 24px rgb(0 0 0/0.12);
     outline: none;
   }
@@ -2008,7 +2268,7 @@
     padding: 0;
   }
 
-  /* ── progress ── */
+  /* ── progress/progress.css ── */
   .dl-progress {
     position: relative;
     height: 0.5rem;
@@ -2025,7 +2285,7 @@
     transform-origin: left;
   }
 
-  /* ── radio-group ── */
+  /* ── radio-group/radio-group.css ── */
   .dl-radio-group {
     display: grid;
     gap: 0.5rem;
@@ -2064,7 +2324,7 @@
     height: 0.5625rem;
   }
 
-  /* ── resizable ── */
+  /* ── resizable/resizable.css ── */
   .dl-resizable-group {
     display: flex;
     width: 100%;
@@ -2133,7 +2393,7 @@
     height: 0.625rem;
   }
 
-  /* ── scroll-area ── */
+  /* ── scroll-area/scroll-area.css ── */
   .dl-scroll-area {
     position: relative;
     overflow: hidden;
@@ -2167,7 +2427,7 @@
     background-color: var(--border);
   }
 
-  /* ── searchable-select ── */
+  /* ── searchable-select/searchable-select.css ── */
   .dl-searchable-select-trigger {
     width: 100%;
     justify-content: space-between;
@@ -2192,7 +2452,7 @@
     align-items: center;
     gap: 0.5rem;
     border-bottom: 1px solid var(--border);
-    padding: 0.5rem;
+    padding: var(--space-2, 0.5rem);
   }
 
   .dl-searchable-select-search-icon {
@@ -2204,10 +2464,10 @@
   }
 
   .dl-searchable-select-search-input {
-    height: 2rem;
+    height: var(--control-height-sm, 2rem);
     border: none;
     background: transparent;
-    padding-inline: 0.25rem;
+    padding-inline: var(--space-1, 0.25rem);
     font-size: 0.875rem;
     box-shadow: none;
   }
@@ -2234,6 +2494,10 @@
     color: var(--muted-foreground);
   }
 
+  .dl-searchable-select-group {
+    padding-block: 0.25rem;
+  }
+
   .dl-searchable-select-group-header {
     padding-inline: 0.5rem;
     padding-block: 0.25rem;
@@ -2271,6 +2535,19 @@
     font-weight: 500;
   }
 
+  .dl-searchable-select-item-text {
+    flex: 1 1 0%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .dl-searchable-select-truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   .dl-searchable-select-add {
     border-top: 1px solid var(--border);
     background-color: color-mix(in oklch, var(--muted) 30%, transparent);
@@ -2297,7 +2574,13 @@
     background-color: color-mix(in oklch, var(--primary) 10%, transparent);
   }
 
-  /* ── secret-reveal-card ── */
+  .dl-searchable-select-add-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+    flex-shrink: 0;
+  }
+
+  /* ── secret-reveal-card/secret-reveal-card.css ── */
   .dl-secret-reveal {
     border-radius: var(--radius, 0.5rem);
     border: 1px solid var(--border);
@@ -2317,6 +2600,12 @@
     line-height: 1.4;
   }
 
+  .dl-secret-reveal__warning svg {
+    flex-shrink: 0;
+    width: 1rem;
+    height: 1rem;
+  }
+
   .dl-secret-reveal__code-wrap {
     display: flex;
     align-items: center;
@@ -2339,7 +2628,7 @@
     flex: 1;
   }
 
-  /* ── select ── */
+  /* ── select/select.css ── */
   .dl-select-trigger {
     display: inline-flex;
     width: 100%;
@@ -2374,12 +2663,23 @@
     opacity: 0.5;
     cursor: not-allowed;
   }
-  .dl-select-trigger > svg {
+  .dl-select-trigger svg {
     opacity: 0.5;
     width: 1rem;
     height: 1rem;
     flex-shrink: 0;
   }
+  .dl-select-scroll-btn {
+    display: flex;
+    cursor: default;
+    align-items: center;
+    justify-content: center;
+    padding-block: 0.25rem;
+  }
+  .dl-select-scroll-btn svg {
+    width: 1rem;
+    height: 1rem;
+  }
 
   /* Sizes */
   .dl-select-trigger--sm {
@@ -2454,6 +2754,10 @@
     width: 0.875rem;
     height: 0.875rem;
   }
+  .dl-select-item__indicator svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
   .dl-select-label {
     padding: 0.25rem 0.5rem;
     font-size: 0.6875rem;
@@ -2466,7 +2770,7 @@
     background-color: var(--border);
   }
 
-  /* ── separator ── */
+  /* ── separator/separator.css ── */
   .dl-separator {
     background-color: var(--border);
     flex-shrink: 0;
@@ -2482,7 +2786,7 @@
     margin: 0 0.25rem;
   }
 
-  /* ── sheet ── */
+  /* ── sheet/sheet.css ── */
   /* ═══════════════════════════════════════════════════════════════════════
      SHEET (side drawer)
      ═══════════════════════════════════════════════════════════════════════ */
@@ -2491,7 +2795,7 @@
     z-index: 50;
     gap: 1rem;
     background-color: var(--background);
-    padding: 1.5rem;
+    padding: var(--dialog-padding, 1.5rem);
     box-shadow: 0 8px 40px rgb(0 0 0/0.2);
   }
   .dl-sheet-content--right {
@@ -2548,6 +2852,10 @@
     outline: 2px solid var(--ring);
     outline-offset: 2px;
   }
+  .dl-sheet-close svg {
+    width: 1rem;
+    height: 1rem;
+  }
   .dl-sheet__header {
     display: flex;
     flex-direction: column;
@@ -2567,19 +2875,276 @@
     color: var(--muted-foreground);
   }
 
-  /* ── sidebar ── */
-  .dl-sidebar-wrapper {
+  /* ── sidebar/sidebar-menu.css ── */
+  .dl-sidebar-group {
+    position: relative;
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    flex-direction: column;
+    padding: var(--space-2, 0.5rem);
+  }
+  .dl-sidebar-group-label {
+    display: flex;
+    height: var(--control-height-sm, 2rem);
+    flex-shrink: 0;
+    align-items: center;
+    border-radius: var(--radius-md, 0.375rem);
+    padding-inline: var(--space-2, 0.5rem);
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: color-mix(in oklch, var(--sidebar-foreground) 70%, transparent);
+    outline: none;
+    transition:
+      margin 0.2s ease-linear,
+      opacity 0.2s ease-linear;
+  }
+  .dl-sidebar-group-label svg {
+    width: 1rem;
+    height: 1rem;
+  }
+  [data-collapsible="icon"] .dl-sidebar-group-label {
+    margin-top: -2rem;
+    opacity: 0;
+  }
+
+  .dl-sidebar-group-action {
+    position: absolute;
+    right: 0.75rem;
+    top: 0.875rem;
     display: flex;
-    min-height: 100vh;
+    aspect-ratio: 1 / 1;
+    width: 1.25rem;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-md, 0.375rem);
+    padding: 0;
+    background: transparent;
+    border: none;
+    color: var(--sidebar-foreground);
+    outline: none;
+    cursor: pointer;
+  }
+  .dl-sidebar-group-action:hover {
+    background-color: var(--sidebar-accent);
+    color: var(--sidebar-accent-foreground);
+  }
+  [data-collapsible="icon"] .dl-sidebar-group-action {
+    display: none;
+  }
+  .dl-sidebar-group-content {
     width: 100%;
+    font-size: 0.875rem;
+  }
+
+  .dl-sidebar-menu {
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    flex-direction: column;
+    gap: 0.25rem;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  .dl-sidebar-menu-item {
+    position: relative;
+    list-style: none;
+  }
+
+  .dl-sidebar-menu-button {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    gap: 0.5rem;
+    overflow: hidden;
+    border-radius: var(--radius-md, 0.375rem);
+    padding: 0.5rem;
+    text-align: left;
+    outline: none;
+    border: none;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    text-decoration: none;
+    box-sizing: border-box;
+    transition:
+      width 0.15s ease,
+      height 0.15s ease,
+      padding 0.15s ease,
+      background-color 0.15s ease,
+      color 0.15s ease;
+  }
+  .dl-sidebar-menu-button:hover,
+  .dl-sidebar-menu-button[data-state="open"] {
+    background-color: var(--sidebar-accent);
+    color: var(--sidebar-accent-foreground);
+  }
+  .dl-sidebar-menu-button:active,
+  .dl-sidebar-menu-button[data-active="true"] {
+    background-color: var(--sidebar-accent);
+    color: var(--sidebar-accent-foreground);
+    font-weight: 500;
+  }
+  .dl-sidebar-menu-button:disabled,
+  .dl-sidebar-menu-button[aria-disabled="true"] {
+    pointer-events: none;
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .dl-sidebar-menu-button svg {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+  }
+  .dl-sidebar-menu-button > span:last-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .dl-sidebar-menu-button[data-size="default"] {
+    height: var(--control-height-sm, 2rem);
+    font-size: 0.875rem;
+  }
+  .dl-sidebar-menu-button[data-size="sm"] {
+    height: var(--control-height-xs, 1.75rem);
+    font-size: 0.75rem;
+  }
+  .dl-sidebar-menu-button[data-size="lg"] {
+    height: var(--control-height-xl, 3rem);
+    font-size: 0.875rem;
+  }
+  .dl-sidebar-menu-button[data-variant="outline"] {
+    background-color: var(--background);
+    box-shadow: 0 0 0 1px var(--sidebar-border);
+  }
+  .dl-sidebar-menu-button[data-variant="outline"]:hover {
+    box-shadow: 0 0 0 1px var(--sidebar-accent);
+  }
+  [data-collapsible="icon"] .dl-sidebar-menu-button {
+    width: var(--control-height-sm, 2rem) !important;
+    height: var(--control-height-sm, 2rem) !important;
+    padding: var(--space-2, 0.5rem) !important;
+  }
+  [data-collapsible="icon"] .dl-sidebar-menu-button[data-size="lg"] {
+    padding: 0 !important;
+  }
+
+  .dl-sidebar-menu-action {
+    position: absolute;
+    right: 0.25rem;
+    top: 0.375rem;
+    display: flex;
+    aspect-ratio: 1 / 1;
+    width: 1.25rem;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-md, 0.375rem);
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: var(--sidebar-foreground);
+    cursor: pointer;
+    outline: none;
+  }
+  .dl-sidebar-menu-action:hover {
+    background-color: var(--sidebar-accent);
+    color: var(--sidebar-accent-foreground);
+  }
+  .dl-sidebar-menu-action svg {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+  }
+  [data-collapsible="icon"] .dl-sidebar-menu-action {
+    display: none;
+  }
+
+  /* ── sidebar/sidebar-submenu.css ── */
+  .dl-sidebar-menu-badge {
+    pointer-events: none;
+    position: absolute;
+    right: 0.25rem;
+    display: flex;
+    height: 1.25rem;
+    min-width: 1.25rem;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-md, 0.375rem);
+    padding-inline: 0.25rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+    color: var(--sidebar-foreground);
+  }
+  [data-collapsible="icon"] .dl-sidebar-menu-badge {
+    display: none;
+  }
+
+  .dl-sidebar-menu-skeleton {
+    display: flex;
+    height: var(--control-height-sm, 2rem);
+    align-items: center;
+    gap: var(--space-2, 0.5rem);
+    border-radius: var(--radius-md, 0.375rem);
+    padding-inline: var(--space-2, 0.5rem);
+  }
+
+  .dl-sidebar-menu-sub {
+    margin-inline: 0.875rem;
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    gap: var(--space-1, 0.25rem);
+    border-left: 1px solid var(--sidebar-border);
+    padding-inline: 0.625rem;
+    padding-block: 0.125rem;
+    list-style: none;
+  }
+  [data-collapsible="icon"] .dl-sidebar-menu-sub {
+    display: none;
   }
 
+  .dl-sidebar-menu-sub-button {
+    display: flex;
+    height: var(--control-height-xs, 1.75rem);
+    min-width: 0;
+    align-items: center;
+    gap: var(--space-2, 0.5rem);
+    overflow: hidden;
+    border-radius: var(--radius-md, 0.375rem);
+    padding-inline: var(--space-2, 0.5rem);
+    color: var(--sidebar-foreground);
+    cursor: pointer;
+    text-decoration: none;
+    font-size: 0.875rem;
+  }
+  .dl-sidebar-menu-sub-button[data-size="sm"] {
+    font-size: 0.75rem;
+  }
+  .dl-sidebar-menu-sub-button:hover,
+  .dl-sidebar-menu-sub-button[data-active="true"] {
+    background-color: var(--sidebar-accent);
+    color: var(--sidebar-accent-foreground);
+  }
+  [data-collapsible="icon"] .dl-sidebar-menu-sub-button {
+    display: none;
+  }
+
+  /* ── sidebar/sidebar.css ── */
+  .dl-sidebar-wrapper {
+    display: flex;
+    min-height: 100svh;
+    width: 100%;
+  }
+  .dl-sidebar-wrapper[data-has-inset="true"] {
+    background-color: var(--sidebar);
+  }
   .dl-sidebar-input {
-    height: 2rem;
+    height: var(--control-height-sm, 2rem);
     background-color: var(--background);
     box-shadow: none;
   }
-
   .dl-sidebar-input:focus,
   .dl-sidebar-input:focus-visible {
     border-color: var(--sidebar-ring);
@@ -2587,14 +3152,180 @@
       color-mix(in oklch, var(--sidebar-ring) 25%, transparent);
   }
 
-  /* ── skeleton ── */
+  .dl-sidebar-desktop-spacer {
+    position: relative;
+    width: var(--sidebar-width, 16rem);
+    background-color: transparent;
+    transition: width 0.2s linear;
+  }
+  [data-collapsible="offcanvas"] .dl-sidebar-desktop-spacer {
+    width: 0;
+  }
+  [data-side="right"] .dl-sidebar-desktop-spacer {
+    transform: rotate(180deg);
+  }
+  [data-variant="floating"][data-collapsible="icon"] .dl-sidebar-desktop-spacer,
+  [data-variant="inset"][data-collapsible="icon"] .dl-sidebar-desktop-spacer {
+    width: calc(var(--sidebar-width-icon, 3rem) + 1rem);
+  }
+  [data-collapsible="icon"] .dl-sidebar-desktop-spacer {
+    width: var(--sidebar-width-icon, 3rem);
+  }
+
+  .dl-sidebar-fixed {
+    position: fixed;
+    inset-block: 0;
+    z-index: 10;
+    display: none;
+    height: 100svh;
+    width: var(--sidebar-width, 16rem);
+    transition:
+      left 0.2s linear,
+      right 0.2s linear,
+      width 0.2s linear;
+  }
+  @media (min-width: 768px) {
+    .dl-sidebar-fixed {
+      display: flex;
+    }
+  }
+  [data-side="left"] .dl-sidebar-fixed {
+    left: 0;
+    border-right: 1px solid var(--sidebar-border);
+  }
+  [data-side="left"][data-state="collapsed"][data-collapsible="offcanvas"]
+    .dl-sidebar-fixed {
+    left: calc(-1 * var(--sidebar-width, 16rem));
+  }
+  [data-side="right"] .dl-sidebar-fixed {
+    right: 0;
+    border-left: 1px solid var(--sidebar-border);
+  }
+  [data-side="right"][data-state="collapsed"][data-collapsible="offcanvas"]
+    .dl-sidebar-fixed {
+    right: calc(-1 * var(--sidebar-width, 16rem));
+  }
+  [data-variant="floating"] .dl-sidebar-fixed,
+  [data-variant="inset"] .dl-sidebar-fixed {
+    padding: var(--space-2, 0.5rem);
+    border: none;
+  }
+  [data-variant="floating"][data-collapsible="icon"] .dl-sidebar-fixed,
+  [data-variant="inset"][data-collapsible="icon"] .dl-sidebar-fixed {
+    width: calc(var(--sidebar-width-icon, 3rem) + 1rem + 2px);
+  }
+  [data-collapsible="icon"] .dl-sidebar-fixed {
+    width: var(--sidebar-width-icon, 3rem);
+  }
+
+  .dl-sidebar-inner {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background-color: var(--sidebar);
+    color: var(--sidebar-foreground);
+  }
+  [data-variant="floating"] .dl-sidebar-inner {
+    border-radius: var(--radius-lg, 0.5rem);
+    border: 1px solid var(--sidebar-border);
+    box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+  }
+
+  .dl-sidebar-mobile-content {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+  }
+  .dl-sidebar-trigger {
+    width: var(--control-height-xs, 1.75rem);
+    height: var(--control-height-xs, 1.75rem);
+    padding: 0;
+  }
+
+  .dl-sidebar-rail {
+    position: absolute;
+    inset-block: 0;
+    z-index: 20;
+    display: none;
+    width: 1rem;
+    transform: translateX(-50%);
+    background: transparent;
+    border: none;
+    cursor: col-resize;
+    padding: 0;
+    transition: all 0.2s linear;
+  }
+  @media (min-width: 640px) {
+    .dl-sidebar-rail {
+      display: flex;
+    }
+  }
+  .dl-sidebar-rail::after {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    left: 50%;
+    width: 2px;
+  }
+  .dl-sidebar-rail:hover::after {
+    background-color: var(--sidebar-border);
+  }
+  [data-side="left"] .dl-sidebar-rail {
+    right: -1rem;
+  }
+  [data-side="right"] .dl-sidebar-rail {
+    left: 0;
+  }
+
+  .dl-sidebar-inset {
+    position: relative;
+    display: flex;
+    width: 100%;
+    flex: 1 1 0%;
+    flex-direction: column;
+    background-color: var(--background);
+  }
+  @media (min-width: 768px) {
+    .dl-sidebar[data-variant="inset"] ~ .dl-sidebar-inset,
+    [data-variant="inset"] .dl-sidebar-inset {
+      margin: var(--space-2, 0.5rem);
+      margin-left: 0;
+      border-radius: var(--radius-xl, 0.75rem);
+      box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+    }
+  }
+
+  .dl-sidebar-header,
+  .dl-sidebar-footer {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2, 0.5rem);
+    padding: var(--space-2, 0.5rem);
+  }
+  .dl-sidebar-separator {
+    margin-inline: var(--space-2, 0.5rem);
+    width: auto;
+    background-color: var(--sidebar-border);
+  }
+  .dl-sidebar-content {
+    display: flex;
+    min-height: 0;
+    flex: 1 1 0%;
+    flex-direction: column;
+    gap: var(--space-2, 0.5rem);
+    overflow: auto;
+  }
+
+  /* ── skeleton/skeleton.css ── */
   .dl-skeleton {
     border-radius: var(--radius-md, 0.375rem);
     background-color: color-mix(in oklch, var(--primary) 10%, var(--muted));
     animation: dl-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   }
 
-  /* ── slider ── */
+  /* ── slider/slider.css ── */
   .dl-slider {
     position: relative;
     display: flex;
@@ -2633,7 +3364,7 @@
     box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 30%, transparent);
   }
 
-  /* ── sonner ── */
+  /* ── sonner/sonner.css ── */
   .dl-toaster {
     font-family: inherit;
     --normal-bg: var(--card, var(--background));
@@ -2689,7 +3420,7 @@
     color: var(--card-foreground, var(--foreground));
   }
 
-  /* ── status-badge ── */
+  /* ── status-badge/status-badge.css ── */
   .dl-status-badge {
     display: inline-flex;
     align-items: center;
@@ -2744,7 +3475,7 @@
     border-color: var(--border);
   }
 
-  /* ── status-chip ── */
+  /* ── status-chip/status-chip.css ── */
   .dl-status-chip {
     display: inline-flex;
     align-items: center;
@@ -2790,7 +3521,7 @@
     color: var(--muted-foreground);
   }
 
-  /* ── switch ── */
+  /* ── switch/switch.css ── */
   .dl-switch {
     display: inline-flex;
     height: 1.25rem;
@@ -2837,7 +3568,7 @@
     transform: translateX(0);
   }
 
-  /* ── table ── */
+  /* ── table/table.css ── */
   .dl-table-wrapper {
     position: relative;
     width: 100%;
@@ -2868,15 +3599,17 @@
     transition: background-color 0.1s;
   }
   .dl-table__head-cell {
-    height: 2.5rem;
-    padding: 0 0.5rem;
+    height: var(--control-height-md, 2.5rem);
+    padding: var(--table-row-padding-y, 0.5rem)
+      var(--table-row-padding-x, 0.75rem);
     text-align: left;
     font-weight: 500;
     color: var(--muted-foreground);
     white-space: nowrap;
   }
   .dl-table__cell {
-    padding: 0.75rem 0.5rem;
+    padding: var(--table-row-padding-y, 0.75rem)
+      var(--table-row-padding-x, 0.75rem);
     vertical-align: middle;
   }
   .dl-table__caption {
@@ -2885,13 +3618,13 @@
     color: var(--muted-foreground);
   }
 
-  /* ── tabs ── */
+  /* ── tabs/tabs.css ── */
   .dl-tabs-list {
     display: inline-flex;
-    height: 2.25rem;
+    height: var(--control-height-md, 2.25rem);
     align-items: center;
     justify-content: center;
-    border-radius: var(--radius-lg, 0.5rem);
+    border-radius: var(--radius, 0.5rem);
     background-color: var(--muted);
     padding: 0.25rem;
     color: var(--muted-foreground);
@@ -2901,7 +3634,7 @@
     align-items: center;
     justify-content: center;
     white-space: nowrap;
-    border-radius: var(--radius-md, 0.375rem);
+    border-radius: calc(var(--radius, 0.5rem) - 2px);
     padding: 0.25rem 0.75rem;
     font-size: 0.875rem;
     font-weight: 500;
@@ -2933,16 +3666,16 @@
     outline-offset: 2px;
   }
 
-  /* ── textarea ── */
+  /* ── textarea/textarea.css ── */
   .dl-textarea {
     display: block;
     min-height: 4rem;
     width: 100%;
-    border-radius: var(--radius-md, 0.375rem);
+    border-radius: var(--radius, 0.375rem);
     border: 1px solid var(--input);
     background-color: transparent;
-    padding-block: 0.5rem;
-    padding-inline: 0.75rem;
+    padding-block: var(--space-2, 0.5rem);
+    padding-inline: var(--space-3, 0.75rem);
     font-size: 0.75rem;
     font-family: inherit;
     color: var(--foreground);
@@ -2965,7 +3698,7 @@
     opacity: 0.5;
   }
 
-  /* ── toggle ── */
+  /* ── toggle/toggle.css ── */
   .dl-toggle {
     display: inline-flex;
     align-items: center;
@@ -3033,21 +3766,21 @@
 
   /* Sizes */
   .dl-toggle--size-default {
-    height: 2.25rem;
-    padding-inline: 0.5rem;
-    min-width: 2.25rem;
+    height: var(--control-height-md, 2.25rem);
+    padding-inline: var(--space-2, 0.5rem);
+    min-width: var(--control-height-md, 2.25rem);
   }
 
   .dl-toggle--size-sm {
-    height: 2rem;
-    padding-inline: 0.375rem;
-    min-width: 2rem;
+    height: var(--control-height-sm, 2rem);
+    padding-inline: calc(var(--space-2, 0.5rem) - 2px);
+    min-width: var(--control-height-sm, 2rem);
   }
 
   .dl-toggle--size-lg {
-    height: 2.5rem;
-    padding-inline: 0.625rem;
-    min-width: 2.5rem;
+    height: var(--control-height-lg, 2.5rem);
+    padding-inline: var(--space-3, 0.75rem);
+    min-width: var(--control-height-lg, 2.5rem);
   }
 
   /* Group */
@@ -3058,7 +3791,7 @@
     gap: 0.25rem;
   }
 
-  /* ── tooltip ── */
+  /* ── tooltip/tooltip.css ── */
   .dl-tooltip {
     z-index: 50;
     overflow: hidden;
@@ -3076,4 +3809,263 @@
   .dl-tooltip[data-state="closed"] {
     animation: dl-fade-out 100ms ease;
   }
+
+  /* ── typography/typography.css ── */
+  /**
+   * @file typography.css
+   * @description Typography primitive styling and modifier attributes.
+   * Governed by W3C Cascade Layers.
+   */
+
+  @layer dl-components {
+    /* ── Color Modifiers ───────────────────────────────────────────────────── */
+    .dl-heading[data-typography-color="default"],
+    .dl-text[data-typography-color="default"] {
+      color: var(--foreground);
+    }
+
+    .dl-heading[data-typography-color="muted"],
+    .dl-text[data-typography-color="muted"] {
+      color: var(--muted-foreground);
+    }
+
+    .dl-heading[data-typography-color="subtle"],
+    .dl-text[data-typography-color="subtle"] {
+      color: color-mix(in oklch, var(--muted-foreground) 80%, transparent);
+    }
+
+    .dl-heading[data-typography-color="primary"],
+    .dl-text[data-typography-color="primary"] {
+      color: var(--primary);
+    }
+
+    .dl-heading[data-typography-color="destructive"],
+    .dl-text[data-typography-color="destructive"] {
+      color: var(--destructive);
+    }
+
+    .dl-heading[data-typography-color="warning"],
+    .dl-text[data-typography-color="warning"] {
+      color: var(--warning);
+    }
+
+    .dl-heading[data-typography-color="success"],
+    .dl-text[data-typography-color="success"] {
+      color: var(--success);
+    }
+
+    .dl-heading[data-typography-color="info"],
+    .dl-text[data-typography-color="info"] {
+      color: var(--info);
+    }
+
+    /* ── Alignment Modifiers ───────────────────────────────────────────────── */
+    .dl-heading[data-typography-align="left"],
+    .dl-text[data-typography-align="left"] {
+      text-align: left;
+    }
+
+    .dl-heading[data-typography-align="center"],
+    .dl-text[data-typography-align="center"] {
+      text-align: center;
+    }
+
+    .dl-heading[data-typography-align="right"],
+    .dl-text[data-typography-align="right"] {
+      text-align: right;
+    }
+
+    /* ── Truncation Modifier ───────────────────────────────────────────────── */
+    .dl-heading[data-typography-truncate="true"],
+    .dl-text[data-typography-truncate="true"] {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    /* ── Weight Overrides ──────────────────────────────────────────────────── */
+    .dl-heading[data-typography-weight="normal"],
+    .dl-text[data-typography-weight="normal"] {
+      font-weight: 400;
+    }
+
+    .dl-heading[data-typography-weight="medium"],
+    .dl-text[data-typography-weight="medium"] {
+      font-weight: 500;
+    }
+
+    .dl-heading[data-typography-weight="semibold"],
+    .dl-text[data-typography-weight="semibold"] {
+      font-weight: 600;
+    }
+
+    .dl-heading[data-typography-weight="bold"],
+    .dl-text[data-typography-weight="bold"] {
+      font-weight: 700;
+    }
+
+    .dl-heading[data-typography-weight="extrabold"],
+    .dl-text[data-typography-weight="extrabold"] {
+      font-weight: 800;
+    }
+  }
+}
+
+/**
+ * @file layout.css
+ * @description Layout primitive styles wrapped in @layer dl-layout.
+ * Governed by semantic design tokens.
+ */
+
+@layer dl-layout {
+  /* ── Box ───────────────────────────────────────────────────────────── */
+  .dl-box {
+    box-sizing: border-box;
+  }
+
+  /* ── Flex ──────────────────────────────────────────────────────────── */
+  .dl-flex {
+    display: flex;
+    box-sizing: border-box;
+  }
+  .dl-flex--inline {
+    display: inline-flex;
+  }
+
+  .dl-flex--row {
+    flex-direction: row;
+  }
+  .dl-flex--row-reverse {
+    flex-direction: row-reverse;
+  }
+  .dl-flex--col {
+    flex-direction: column;
+  }
+  .dl-flex--col-reverse {
+    flex-direction: column-reverse;
+  }
+
+  .dl-flex--justify-start {
+    justify-content: flex-start;
+  }
+  .dl-flex--justify-center {
+    justify-content: center;
+  }
+  .dl-flex--justify-end {
+    justify-content: flex-end;
+  }
+  .dl-flex--justify-between {
+    justify-content: space-between;
+  }
+  .dl-flex--justify-around {
+    justify-content: space-around;
+  }
+  .dl-flex--justify-evenly {
+    justify-content: space-evenly;
+  }
+
+  .dl-flex--align-start {
+    align-items: flex-start;
+  }
+  .dl-flex--align-center {
+    align-items: center;
+  }
+  .dl-flex--align-end {
+    align-items: flex-end;
+  }
+  .dl-flex--align-stretch {
+    align-items: stretch;
+  }
+  .dl-flex--align-baseline {
+    align-items: baseline;
+  }
+
+  .dl-flex--wrap {
+    flex-wrap: wrap;
+  }
+  .dl-flex--nowrap {
+    flex-wrap: nowrap;
+  }
+  .dl-flex--wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+
+  /* ── Stack ─────────────────────────────────────────────────────────── */
+  .dl-stack {
+    display: flex;
+    box-sizing: border-box;
+  }
+  .dl-stack--col {
+    flex-direction: column;
+  }
+  .dl-stack--row {
+    flex-direction: row;
+  }
+
+  /* ── Grid ──────────────────────────────────────────────────────────── */
+  .dl-grid {
+    display: grid;
+    box-sizing: border-box;
+  }
+  .dl-grid--inline {
+    display: inline-grid;
+  }
+
+  /* ── Container ─────────────────────────────────────────────────────── */
+  .dl-container {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    box-sizing: border-box;
+    padding-left: var(--space-4, 1rem);
+    padding-right: var(--space-4, 1rem);
+  }
+
+  .dl-container--sm {
+    max-width: 640px;
+  }
+  .dl-container--md {
+    max-width: 768px;
+  }
+  .dl-container--lg {
+    max-width: 1024px;
+  }
+  .dl-container--xl {
+    max-width: 1280px;
+  }
+  .dl-container--2xl {
+    max-width: 1536px;
+  }
+  .dl-container--fluid {
+    max-width: 100%;
+  }
+
+  /* ── Token Gaps ────────────────────────────────────────────────────── */
+  .dl-gap-0 {
+    gap: 0;
+  }
+  .dl-gap-1 {
+    gap: var(--space-1, 0.25rem);
+  }
+  .dl-gap-2 {
+    gap: var(--space-2, 0.5rem);
+  }
+  .dl-gap-3 {
+    gap: var(--space-3, 0.75rem);
+  }
+  .dl-gap-4 {
+    gap: var(--space-4, 1rem);
+  }
+  .dl-gap-5 {
+    gap: var(--space-5, 1.25rem);
+  }
+  .dl-gap-6 {
+    gap: var(--space-6, 1.5rem);
+  }
+  .dl-gap-8 {
+    gap: var(--space-8, 2rem);
+  }
+  .dl-gap-10 {
+    gap: var(--space-10, 2.5rem);
+  }
 }