@nocoo/basalt 3.1.0 → 3.2.1

package/dist/styles/standalone.css

@@ -27,15 +27,18 @@
   --basalt-space-md: 0.375rem;
   --basalt-space-lg: 0.5rem;
   --basalt-space-default: var(--basalt-space-lg);
-  --basalt-text-xs: 0.6875rem;
+  --basalt-focus-width: 0.0625rem;
+  --basalt-focus-offset: 0.125rem;
+  --basalt-focus-clearance: var(--basalt-space-sm);
+  --basalt-text-xs: 0.75rem;
   --basalt-text-sm: 0.75rem;
-  --basalt-text-code: 0.8125rem;
+  --basalt-text-code: 0.875rem;
   --basalt-text-base: 0.875rem;
-  --basalt-text-lg: 1rem;
+  --basalt-text-lg: 1.125rem;
   --basalt-text-xl: 1.125rem;
-  --basalt-text-2xl: 1.25rem;
+  --basalt-text-2xl: 1.125rem;
   --basalt-text-3xl: 1.5rem;
-  --basalt-text-4xl: 1.875rem;
+  --basalt-text-4xl: 1.5rem;
   --basalt-text-5xl: 2.25rem;
   --basalt-text-6xl: 3rem;
   --basalt-text-7xl: 3.75rem;
@@ -48,7 +51,7 @@
   --basalt-leading-inline: calc(16 / 12);
   --basalt-leading-action: calc(24 / 14);
   --basalt-leading-action-sm: 1.5;
-  --basalt-leading-action-lg: 1.375;
+  --basalt-leading-action-lg: calc(22 / 14);
   --basalt-leading-banner: calc(22 / 14);
   --basalt-radius-sm: 0.25rem;
   --basalt-radius-md: 0.5rem;
@@ -104,15 +107,15 @@
   --basalt-size-icon-display: 1.5rem;
   --basalt-size-touch: 2.75rem;
   --basalt-size-menu-row: var(--basalt-size-control);
-  --basalt-size-table-row: 2.25rem;
+  --basalt-size-table-row: 2.5rem;
   --basalt-size-check: 1rem;
   --basalt-size-check-sm: 0.75rem;
   --basalt-size-textarea: 5rem;
   --basalt-size-textarea-sm: 4rem;
   --basalt-size-textarea-lg: 6rem;
-  --basalt-space-control-x: var(--basalt-space-lg);
-  --basalt-space-control-x-sm: var(--basalt-space-md);
-  --basalt-space-control-x-lg: var(--basalt-space-lg);
+  --basalt-space-control-x: 0.75rem;
+  --basalt-space-control-x-sm: 0.625rem;
+  --basalt-space-control-x-lg: 1rem;
   --basalt-space-control-y: var(--basalt-space-sm);
   --basalt-space-control-gap: var(--basalt-space-lg);
   --basalt-space-menu-inset: var(--basalt-space-lg);
@@ -127,8 +130,8 @@
   --basalt-space-layout-lg: 1.5rem;
   --basalt-space-layout-xl: 2rem;
   --basalt-space-field-gap: var(--basalt-space-lg);
-  --basalt-space-table-x: var(--basalt-space-lg);
-  --basalt-space-table-y: var(--basalt-space-md);
+  --basalt-space-table-x: 0.75rem;
+  --basalt-space-table-y: var(--basalt-space-lg);
   --basalt-space-overlay: var(--basalt-space-lg);
   --basalt-space-panel-x: var(--basalt-space-card);
   --basalt-space-panel-y: var(--basalt-space-card-sm);
@@ -144,7 +147,7 @@
 	);
   --basalt-size-action: var(--basalt-size-control);
   --basalt-space-nav-inset: var(--basalt-space-lg);
-  --basalt-space-nav-gap: var(--basalt-space-xs);
+  --basalt-space-nav-gap: var(--basalt-space-sm);
   --basalt-size-rail: 4.25rem;
 }
 :root, .light, [data-mode="light"] {
@@ -178,16 +181,15 @@
   --basalt-input: 220 13% 88%;
   --basalt-ring: var(--basalt-primary);
   --basalt-control-fill: hsl(var(--basalt-secondary));
+  --basalt-surface-current: var(--basalt-card);
+  --basalt-surface-elevated: var(--basalt-secondary);
+  --basalt-hover-weight: 18%;
   --basalt-hover: hsl(var(--basalt-primary));
   @supports (color: color-mix(in lab, red, red)) {
-    --basalt-hover: color-mix(in srgb, hsl(var(--basalt-primary)) 9.6%, hsl(var(--basalt-popover)));
-  }
-  --basalt-hover-end: hsl(var(--basalt-primary));
-  @supports (color: color-mix(in lab, red, red)) {
-    --basalt-hover-end: color-mix(
+    --basalt-hover: color-mix(
 		in srgb,
-		hsl(var(--basalt-primary)) 4.8%,
-		hsl(var(--basalt-popover))
+		hsl(var(--basalt-primary)) 18%,
+		hsl(var(--basalt-surface-elevated))
 	);
   }
   --basalt-selected: 0 0% 100%;
@@ -228,13 +230,13 @@
   --basalt-chart-yellow: 49 100% 69%;
   --basalt-chart-pearl: 215 12% 48%;
   --basalt-chart-1: var(--basalt-chart-blue);
-  --basalt-chart-2: var(--basalt-chart-blue);
-  --basalt-chart-3: var(--basalt-chart-green);
-  --basalt-chart-4: var(--basalt-chart-green);
+  --basalt-chart-2: var(--basalt-chart-pink);
+  --basalt-chart-3: 182 38% 48%;
+  --basalt-chart-4: 280 32% 62%;
   --basalt-chart-5: var(--basalt-chart-green);
-  --basalt-chart-6: var(--basalt-chart-green);
+  --basalt-chart-6: 27 54% 62%;
   --basalt-chart-7: var(--basalt-chart-yellow);
-  --basalt-chart-8: var(--basalt-chart-yellow);
+  --basalt-chart-8: 237 36% 62%;
   --basalt-chart-9: var(--basalt-chart-pink);
   --basalt-chart-10: var(--basalt-chart-pink);
   --basalt-chart-11: var(--basalt-chart-pink);
@@ -263,6 +265,7 @@
   --basalt-accent-10: 280 53% 71%;
   --basalt-accent-11: 237 66% 69%;
   --basalt-accent-12: 210 20% 87%;
+  --basalt-success: var(--basalt-tag-success-foreground);
   --basalt-badge-green: 113 60% 30%;
   --basalt-badge-green-foreground: 0 0% 100%;
   --basalt-badge-teal: 182 62% 30%;
@@ -315,6 +318,7 @@
   --basalt-danger-tint: 0 40% 16%;
   --basalt-info-foreground: 0 0% 10%;
   --basalt-warning-foreground: 0 0% 10%;
+  --basalt-success: var(--basalt-tag-success-foreground);
   --basalt-badge-green: 113 55% 62%;
   --basalt-badge-green-foreground: 0 0% 10%;
   --basalt-badge-teal: var(--basalt-accent-3);
@@ -325,16 +329,15 @@
   --basalt-input: 0 0% 18%;
   --basalt-ring: var(--basalt-primary);
   --basalt-control-fill: hsl(var(--basalt-secondary));
+  --basalt-surface-current: var(--basalt-card);
+  --basalt-surface-elevated: var(--basalt-secondary);
+  --basalt-hover-weight: 18%;
   --basalt-hover: hsl(var(--basalt-primary));
   @supports (color: color-mix(in lab, red, red)) {
-    --basalt-hover: color-mix(in srgb, hsl(var(--basalt-primary)) 16%, hsl(var(--basalt-popover)));
-  }
-  --basalt-hover-end: hsl(var(--basalt-primary));
-  @supports (color: color-mix(in lab, red, red)) {
-    --basalt-hover-end: color-mix(
+    --basalt-hover: color-mix(
 		in srgb,
-		hsl(var(--basalt-primary)) 9.6%,
-		hsl(var(--basalt-popover))
+		hsl(var(--basalt-primary)) 18%,
+		hsl(var(--basalt-surface-elevated))
 	);
   }
   --basalt-selected: 0 0% 22%;
@@ -362,13 +365,13 @@
   --basalt-chart-yellow: 49 100% 73%;
   --basalt-chart-pearl: 210 20% 86%;
   --basalt-chart-1: var(--basalt-chart-blue);
-  --basalt-chart-2: var(--basalt-chart-blue);
-  --basalt-chart-3: var(--basalt-chart-green);
-  --basalt-chart-4: var(--basalt-chart-green);
+  --basalt-chart-2: var(--basalt-chart-pink);
+  --basalt-chart-3: 182 38% 64%;
+  --basalt-chart-4: 280 32% 74%;
   --basalt-chart-5: var(--basalt-chart-green);
-  --basalt-chart-6: var(--basalt-chart-green);
+  --basalt-chart-6: 27 54% 72%;
   --basalt-chart-7: var(--basalt-chart-yellow);
-  --basalt-chart-8: var(--basalt-chart-yellow);
+  --basalt-chart-8: 237 36% 74%;
   --basalt-chart-9: var(--basalt-chart-pink);
   --basalt-chart-10: var(--basalt-chart-pink);
   --basalt-chart-11: var(--basalt-chart-pink);
@@ -418,12 +421,24 @@
 }
 [data-basalt-surface-root] {
   background: hsl(var(--basalt-card));
-  --basalt-control-fill: hsl(var(--basalt-card));
+  --basalt-surface-current: var(--basalt-card);
+  --basalt-surface-elevated: var(--basalt-secondary);
+  --basalt-control-fill: hsl(var(--basalt-secondary));
   --basalt-zebra-fill: hsl(var(--basalt-secondary));
 }
 [data-basalt-surface-root] [data-basalt-surface] {
   background: hsl(var(--basalt-secondary));
-  --basalt-control-fill: hsl(var(--basalt-secondary));
+  --basalt-surface-current: var(--basalt-secondary);
+  --basalt-surface-elevated: var(--basalt-bright);
+  --basalt-control-fill: hsl(var(--basalt-bright));
+  --basalt-hover: hsl(var(--basalt-primary));
+  @supports (color: color-mix(in lab, red, red)) {
+    --basalt-hover: color-mix(
+		in srgb,
+		hsl(var(--basalt-primary)) var(--basalt-hover-weight),
+		hsl(var(--basalt-surface-elevated))
+	);
+  }
   --basalt-primary-hover: hsl(var(--basalt-primary));
   @supports (color: color-mix(in lab, red, red)) {
     --basalt-primary-hover: color-mix(
@@ -444,6 +459,7 @@
 }
 [data-basalt-surface-root] [data-basalt-surface] [data-basalt-surface] {
   background: hsl(var(--basalt-bright));
+  --basalt-surface-current: var(--basalt-bright);
   --basalt-control-fill: hsl(var(--basalt-bright));
   --basalt-zebra-fill: transparent;
 }
@@ -454,12 +470,31 @@
 }
 [data-basalt-surface]:not([data-basalt-surface-root] *):not([data-basalt-surface] *) {
   background: hsl(var(--basalt-card));
-  --basalt-control-fill: hsl(var(--basalt-card));
+  --basalt-surface-current: var(--basalt-card);
+  --basalt-surface-elevated: var(--basalt-bright);
+  --basalt-control-fill: hsl(var(--basalt-bright));
+  --basalt-hover: hsl(var(--basalt-primary));
+  @supports (color: color-mix(in lab, red, red)) {
+    --basalt-hover: color-mix(
+		in srgb,
+		hsl(var(--basalt-primary)) var(--basalt-hover-weight),
+		hsl(var(--basalt-surface-elevated))
+	);
+  }
   --basalt-zebra-fill: hsl(var(--basalt-secondary));
 }
 [data-basalt-surface]:not([data-basalt-surface-root] *) [data-basalt-surface] {
   background: hsl(var(--basalt-secondary));
-  --basalt-control-fill: hsl(var(--basalt-secondary));
+  --basalt-surface-current: var(--basalt-secondary);
+  --basalt-control-fill: hsl(var(--basalt-bright));
+  --basalt-hover: hsl(var(--basalt-primary));
+  @supports (color: color-mix(in lab, red, red)) {
+    --basalt-hover: color-mix(
+		in srgb,
+		hsl(var(--basalt-primary)) var(--basalt-hover-weight),
+		hsl(var(--basalt-surface-elevated))
+	);
+  }
   --basalt-primary-hover: hsl(var(--basalt-primary));
   @supports (color: color-mix(in lab, red, red)) {
     --basalt-primary-hover: color-mix(
@@ -480,6 +515,7 @@
 }
 [data-basalt-surface]:not([data-basalt-surface-root] *)	[data-basalt-surface]	[data-basalt-surface] {
   background: hsl(var(--basalt-bright));
+  --basalt-surface-current: var(--basalt-bright);
   --basalt-control-fill: hsl(var(--basalt-bright));
   --basalt-zebra-fill: transparent;
 }
@@ -488,6 +524,9 @@
   --basalt-control-fill: hsl(var(--basalt-bright));
   --basalt-zebra-fill: transparent;
 }
+[data-basalt-table] tbody tr:not(:last-child), [data-basalt-table] tbody tr:not(:last-child) > td {
+  border-bottom: 1px solid hsl(var(--basalt-border) / 0.5);
+}
 [data-basalt-table] tbody tr[aria-selected="true"] td {
   background: hsl(var(--basalt-selected));
   color: hsl(var(--basalt-selected-foreground));
@@ -495,8 +534,14 @@
 [data-basalt-table] tbody tr:hover:not([aria-selected="true"]) td {
   background: var(--basalt-hover);
 }
-[data-basalt-table] tbody tr:nth-child(even):not([aria-selected="true"]):not(:hover) td {
-  background: var(--basalt-zebra-fill);
+[data-basalt-table][data-striped="true"] tbody tr:nth-child(even) {
+  background-color: hsl(var(--basalt-surface-current));
+}
+[data-basalt-table-container][data-edge="attached"] :where(th, td):first-child {
+  padding-inline-start: var(--basalt-space-card);
+}
+[data-basalt-table-container][data-edge="attached"] :where(th, td):last-child {
+  padding-inline-end: var(--basalt-space-card);
 }
 [data-basalt-table]	tbody	tr[data-diff-change="remove"][data-included="true"][aria-selected="true"]	td {
   background: hsl(var(--basalt-danger-tint));
@@ -531,7 +576,7 @@
   .basalt-action-lg {
     padding-block: var(--basalt-space-lg);
     padding-inline: var(--basalt-space-control-x-lg);
-    font-size: var(--basalt-text-lg);
+    font-size: var(--basalt-text-base);
     line-height: var(--basalt-leading-action-lg);
   }
   .basalt-action-icon {
@@ -622,7 +667,7 @@
     height: var(--basalt-hover-height, 0px);
     transform: translate(var(--basalt-hover-x, 0px), var(--basalt-hover-y, 0px));
     border-radius: var(--basalt-radius-md);
-    background: linear-gradient(90deg, var(--basalt-hover), var(--basalt-hover-end));
+    background: var(--basalt-hover);
     opacity: 0;
     transition: none;
   }
@@ -677,7 +722,7 @@
     width: var(--basalt-command-width);
     height: var(--basalt-command-height);
     border-radius: var(--basalt-radius-md);
-    background: linear-gradient(90deg, var(--basalt-hover), var(--basalt-hover-end));
+    background: var(--basalt-hover);
   }
   .basalt-command-list[data-basalt-command-animated="true"]::before {
     transition: transform var(--basalt-motion-normal) var(--basalt-motion-ease);
@@ -1152,17 +1197,60 @@
   }
 }
 @layer components {
+  :is(.basalt-focus, .basalt-action) {
+    scroll-margin: var(--basalt-focus-clearance);
+  }
+  :is(.basalt-focus, .basalt-action):focus:not(:focus-visible) {
+    outline: none;
+  }
+  :is(.basalt-focus, .basalt-action):focus-visible,	.basalt-nav-actions :focus-visible,	.basalt-focus-frame:has(> .basalt-focus:focus-visible)::after,	.basalt-focus-group:has(:is(input, textarea):focus-visible):not(	:has(.basalt-focus-group :focus-visible)	) {
+    outline: var(--basalt-focus-width) solid hsl(var(--basalt-ring));
+    outline-offset: var(--basalt-focus-offset);
+  }
+  .basalt-focus-inset:focus-visible,	.basalt-focus-frame:has(> .basalt-focus:focus-visible)::after,	.basalt-focus-group.basalt-focus-inset:has(:is(input, textarea):focus-visible):not(	:has(.basalt-focus-group :focus-visible)	),	.basalt-focus-group .basalt-choice:focus-visible,	.basalt-nav-actions .basalt-choice:focus-visible {
+    outline-offset: calc(-1 * var(--basalt-focus-offset));
+  }
+  .basalt-focus-group :is(input, textarea):focus-visible,	.basalt-focus-frame > .basalt-focus:focus-visible {
+    outline: none;
+  }
+  .basalt-focus-frame:has(> .basalt-focus:focus-visible)::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    border-radius: inherit;
+    pointer-events: none;
+  }
+  @media (forced-colors: active) {
+    :is(.basalt-focus, .basalt-action):focus-visible,	.basalt-nav-actions :focus-visible,	.basalt-focus-frame:has(> .basalt-focus:focus-visible)::after,	.basalt-focus-group:has(:is(input, textarea):focus-visible):not(	:has(.basalt-focus-group :focus-visible)	) {
+      outline: 2px solid Highlight;
+    }
+    .basalt-focus-group :is(input, textarea):focus-visible {
+      outline: none;
+    }
+  }
   [data-basalt-header][data-density="compact"]	:where([data-basalt-header-leading], [data-basalt-header-actions])	:where(button, a, [role="button"]) {
     min-height: var(--basalt-size-touch);
     min-width: var(--basalt-size-touch);
   }
 }
+:is(.basalt-focus, .basalt-action):focus-visible, .basalt-nav-actions :focus-visible, .basalt-focus-group:has(:is(input, textarea):focus-visible):not(	:has(.basalt-focus-group :focus-visible) ), .basalt-chart :focus-visible {
+  transition: none;
+}
+.basalt-focus-swatch:focus-visible {
+  box-shadow: inset 0 0 0 calc(var(--basalt-focus-offset) + var(--basalt-focus-width))	hsl(var(--basalt-background));
+}
 .basalt-chart .recharts-sector:focus:not(:focus-visible), .basalt-chart .recharts-rectangle:focus:not(:focus-visible), .basalt-chart .recharts-layer:focus:not(:focus-visible), .basalt-chart .recharts-surface:focus:not(:focus-visible) {
   outline: none;
 }
 .basalt-chart :focus-visible {
-  outline: 2px solid hsl(var(--basalt-ring));
-  outline-offset: 2px;
+  outline: var(--basalt-focus-width) solid hsl(var(--basalt-ring));
+  outline-offset: var(--basalt-focus-offset);
+}
+@media (forced-colors: active) {
+  .basalt-chart :focus-visible {
+    outline: 2px solid Highlight;
+  }
 }
 @layer utilities {
   .pointer-events-none {
@@ -1347,6 +1435,9 @@
   .-my-basalt-space-lg {
     margin-block: calc(var(--basalt-space-lg) * -1);
   }
+  .-my-basalt-space-sm {
+    margin-block: calc(var(--basalt-space-sm) * -1);
+  }
   .my-basalt-card {
     margin-block: var(--basalt-space-card);
   }
@@ -1371,9 +1462,6 @@
   .my-basalt-layout-xl {
     margin-block: var(--basalt-space-layout-xl);
   }
-  .ms-auto {
-    margin-inline-start: auto;
-  }
   .mt-auto {
     margin-top: auto;
   }
@@ -1395,6 +1483,9 @@
   .-mr-\[calc\(\(var\(--basalt-size-action\)-var\(--basalt-size-icon\)\)\/2\)\] {
     margin-right: calc(calc((var(--basalt-size-action) - var(--basalt-size-icon)) / 2) * -1);
   }
+  .-mr-basalt-space-sm {
+    margin-right: calc(var(--basalt-space-sm) * -1);
+  }
   .mr-basalt-space-lg {
     margin-right: var(--basalt-space-lg);
   }
@@ -1879,6 +1970,9 @@
   .resize-none {
     resize: none;
   }
+  .scroll-p-basalt-space-sm {
+    scroll-padding: var(--basalt-space-sm);
+  }
   .list-decimal {
     list-style-type: decimal;
   }
@@ -2223,9 +2317,9 @@
   .rounded-none {
     border-radius: 0;
   }
-  .rounded-t-basalt-md {
-    border-top-left-radius: var(--basalt-radius-md);
-    border-top-right-radius: var(--basalt-radius-md);
+  .rounded-t-basalt-lg {
+    border-top-left-radius: var(--basalt-radius-lg);
+    border-top-right-radius: var(--basalt-radius-lg);
   }
   .rounded-l-basalt-md {
     border-top-left-radius: var(--basalt-radius-md);
@@ -2500,10 +2594,10 @@
     --tw-gradient-from: transparent;
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
-  .via-basalt-backdrop\/10 {
-    --tw-gradient-via: hsl(var(--basalt-backdrop));
+  .via-basalt-foreground\/10 {
+    --tw-gradient-via: hsl(var(--basalt-foreground));
     @supports (color: color-mix(in lab, red, red)) {
-      --tw-gradient-via: color-mix(in oklab, hsl(var(--basalt-backdrop)) 10%, transparent);
+      --tw-gradient-via: color-mix(in oklab, hsl(var(--basalt-foreground)) 10%, transparent);
     }
     --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
     --tw-gradient-stops: var(--tw-gradient-via-stops);
@@ -2653,9 +2747,6 @@
   .py-basalt-menu-y {
     padding-block: var(--basalt-space-menu-y);
   }
-  .py-basalt-nav-inset {
-    padding-block: var(--basalt-space-nav-inset);
-  }
   .py-basalt-panel-y {
     padding-block: var(--basalt-space-panel-y);
   }
@@ -2689,6 +2780,12 @@
   .pe-basalt-table-x {
     padding-inline-end: var(--basalt-space-table-x);
   }
+  .pt-basalt-card {
+    padding-top: var(--basalt-space-card);
+  }
+  .pt-basalt-card-sm {
+    padding-top: var(--basalt-space-card-sm);
+  }
   .pt-basalt-layout {
     padding-top: var(--basalt-space-layout);
   }
@@ -2710,6 +2807,12 @@
   .pr-basalt-space-sm {
     padding-right: var(--basalt-space-sm);
   }
+  .pb-0 {
+    padding-bottom: 0px;
+  }
+  .pb-basalt-layout {
+    padding-bottom: var(--basalt-space-layout);
+  }
   .pb-basalt-panel-y {
     padding-bottom: var(--basalt-space-panel-y);
   }
@@ -2719,9 +2822,6 @@
   .pb-basalt-space-lg {
     padding-bottom: var(--basalt-space-lg);
   }
-  .pb-basalt-space-sm {
-    padding-bottom: var(--basalt-space-sm);
-  }
   .pl-\[calc\(var\(--basalt-size-icon-lg\)\/2\+var\(--basalt-space-row-gap\)\)\] {
     padding-left: calc(var(--basalt-size-icon-lg) / 2 + var(--basalt-space-row-gap));
   }
@@ -2758,30 +2858,14 @@
   .font-mono {
     font-family: var(--font-mono);
   }
-  .text-basalt-2xl {
-    font-size: var(--basalt-text-2xl);
-    line-height: var(--tw-leading, var(--basalt-leading-body));
-  }
   .text-basalt-3xl {
     font-size: var(--basalt-text-3xl);
     line-height: var(--tw-leading, var(--basalt-leading-body));
   }
-  .text-basalt-4xl {
-    font-size: var(--basalt-text-4xl);
-    line-height: var(--tw-leading, var(--basalt-leading-body));
-  }
   .text-basalt-base {
     font-size: var(--basalt-text-base);
     line-height: var(--tw-leading, var(--basalt-leading-body));
   }
-  .text-basalt-code {
-    font-size: var(--basalt-text-code);
-    line-height: var(--tw-leading, var(--basalt-leading-body));
-  }
-  .text-basalt-lg {
-    font-size: var(--basalt-text-lg);
-    line-height: var(--tw-leading, var(--basalt-leading-body));
-  }
   .text-basalt-sm {
     font-size: var(--basalt-text-sm);
     line-height: var(--tw-leading, var(--basalt-leading-body));
@@ -2810,10 +2894,6 @@
     --tw-leading: var(--basalt-line-relaxed);
     line-height: var(--basalt-line-relaxed);
   }
-  .leading-\[var\(--basalt-line-row\)\] {
-    --tw-leading: var(--basalt-line-row);
-    line-height: var(--basalt-line-row);
-  }
   .leading-basalt-relaxed {
     --tw-leading: var(--basalt-leading-relaxed);
     line-height: var(--basalt-leading-relaxed);
@@ -2838,6 +2918,10 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
+  .tracking-\[0\.04em\] {
+    --tw-tracking: 0.04em;
+    letter-spacing: 0.04em;
+  }
   .tracking-tight {
     --tw-tracking: var(--tracking-tight);
     letter-spacing: var(--tracking-tight);
@@ -2944,6 +3028,9 @@
       color: color-mix(in oklab, hsl(var(--basalt-primary-foreground)) 80%, transparent);
     }
   }
+  .text-basalt-success {
+    color: var(--basalt-success);
+  }
   .text-basalt-tag-amber-foreground {
     color: var(--basalt-tag-amber-foreground);
   }
@@ -3208,15 +3295,13 @@
     border-top-right-radius: var(--basalt-radius-md);
     border-bottom-right-radius: var(--basalt-radius-md);
   }
+  .last\:rounded-b-basalt-lg:last-child {
+    border-bottom-right-radius: var(--basalt-radius-lg);
+    border-bottom-left-radius: var(--basalt-radius-lg);
+  }
   .focus-within\:z-2:focus-within {
     z-index: 2;
   }
-  .focus-within\:border-basalt-ring:focus-within {
-    border-color: hsl(var(--basalt-ring));
-  }
-  .focus-within\:ring-basalt-ring:focus-within {
-    --tw-ring-color: hsl(var(--basalt-ring));
-  }
   @media (hover: hover) {
     .hover\:scale-\[1\.03\]:hover {
       scale: 1.03;
@@ -3310,63 +3395,9 @@
   .focus-visible\:z-2:focus-visible {
     z-index: 2;
   }
-  .focus-visible\:border-basalt-ring:focus-visible {
-    border-color: hsl(var(--basalt-ring));
-  }
-  .focus-visible\:border-transparent:focus-visible {
-    border-color: transparent;
-  }
   .focus-visible\:bg-basalt-hover:focus-visible {
     background-color: var(--basalt-hover);
   }
-  .focus-visible\:ring-0:focus-visible {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .focus-visible\:ring-1:focus-visible {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .focus-visible\:ring-2:focus-visible {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .focus-visible\:ring-basalt-ring:focus-visible {
-    --tw-ring-color: hsl(var(--basalt-ring));
-  }
-  .focus-visible\:ring-offset-0:focus-visible {
-    --tw-ring-offset-width: 0px;
-    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  }
-  .focus-visible\:ring-offset-2:focus-visible {
-    --tw-ring-offset-width: 2px;
-    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  }
-  .focus-visible\:ring-offset-basalt-background:focus-visible {
-    --tw-ring-offset-color: hsl(var(--basalt-background));
-  }
-  .focus-visible\:outline-2:focus-visible {
-    outline-style: var(--tw-outline-style);
-    outline-width: 2px;
-  }
-  .focus-visible\:-outline-offset-2:focus-visible {
-    outline-offset: calc(2px * -1);
-  }
-  .focus-visible\:outline-offset-1:focus-visible {
-    outline-offset: 1px;
-  }
-  .focus-visible\:outline-offset-2:focus-visible {
-    outline-offset: 2px;
-  }
-  .focus-visible\:outline-basalt-primary:focus-visible {
-    outline-color: hsl(var(--basalt-primary));
-  }
-  .focus-visible\:outline-basalt-ring:focus-visible {
-    outline-color: hsl(var(--basalt-ring));
-  }
-  .focus-visible\:ring-inset:focus-visible {
-    --tw-ring-inset: inset;
-  }
   .active\:scale-\[0\.98\]:active {
     scale: 0.98;
   }
@@ -3464,9 +3495,6 @@
   .data-\[state\=active\]\:animate-basalt-tab-in[data-state="active"] {
     animation: basalt-tab-in var(--basalt-motion-normal) var(--basalt-motion-ease);
   }
-  .data-\[state\=active\]\:bg-basalt-selected[data-state="active"] {
-    background-color: hsl(var(--basalt-selected));
-  }
   .data-\[state\=active\]\:text-basalt-selected-foreground[data-state="active"] {
     color: hsl(var(--basalt-selected-foreground));
   }
@@ -3484,9 +3512,6 @@
   .data-\[state\=checked\]\:text-basalt-primary-foreground[data-state="checked"] {
     color: hsl(var(--basalt-primary-foreground));
   }
-  .data-\[state\=checked\]\:focus-visible\:ring-basalt-primary-foreground[data-state="checked"]:focus-visible {
-    --tw-ring-color: hsl(var(--basalt-primary-foreground));
-  }
   .data-\[state\=closed\]\:animate-basalt-collapsible-up[data-state="closed"] {
     animation: basalt-collapsible-up var(--basalt-motion-fast)
 		var(--basalt-motion-ease);
@@ -3499,6 +3524,10 @@
     animation: basalt-overlay-out var(--basalt-floating-duration-exit)
 		var(--basalt-motion-ease-exit) forwards;
   }
+  .data-\[state\=closed\]\:rounded-b-basalt-lg[data-state="closed"] {
+    border-bottom-right-radius: var(--basalt-radius-lg);
+    border-bottom-left-radius: var(--basalt-radius-lg);
+  }
   .data-\[state\=indeterminate\]\:bg-basalt-primary[data-state="indeterminate"] {
     background-color: hsl(var(--basalt-primary));
   }
@@ -3511,9 +3540,6 @@
   .data-\[state\=on\]\:text-basalt-primary-foreground[data-state="on"] {
     color: hsl(var(--basalt-primary-foreground));
   }
-  .data-\[state\=on\]\:focus-visible\:ring-basalt-primary-foreground[data-state="on"]:focus-visible {
-    --tw-ring-color: hsl(var(--basalt-primary-foreground));
-  }
   .data-\[state\=open\]\:animate-basalt-collapsible-down[data-state="open"] {
     animation: basalt-collapsible-down var(--basalt-motion-normal)
 		var(--basalt-motion-ease);
@@ -3526,6 +3552,13 @@
     animation: basalt-overlay-in var(--basalt-floating-duration-enter)
 		var(--basalt-motion-ease-enter);
   }
+  .data-\[state\=open\]\:border-b[data-state="open"] {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+  .data-\[state\=open\]\:border-basalt-border[data-state="open"] {
+    border-color: hsl(var(--basalt-border));
+  }
   .data-\[state\=open\]\:bg-basalt-selected[data-state="open"] {
     background-color: hsl(var(--basalt-selected));
   }
@@ -3623,12 +3656,8 @@
     .md\:p-basalt-layout-lg {
       padding: var(--basalt-space-layout-lg);
     }
-    .md\:px-basalt-space-lg {
-      padding-inline: var(--basalt-space-lg);
-    }
-    .md\:text-basalt-5xl {
-      font-size: var(--basalt-text-5xl);
-      line-height: var(--tw-leading, var(--basalt-leading-body));
+    .md\:px-basalt-layout-sm {
+      padding-inline: var(--basalt-space-layout-sm);
     }
     .md\:shadow-sm {
       --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
@@ -3658,16 +3687,6 @@
       padding-inline: var(--basalt-space-layout-xl);
     }
   }
-  .\[\&_\.recharts-surface\:focus-visible\]\:outline-2 .recharts-surface:focus-visible {
-    outline-style: var(--tw-outline-style);
-    outline-width: 2px;
-  }
-  .\[\&_\.recharts-surface\:focus-visible\]\:outline-offset-2 .recharts-surface:focus-visible {
-    outline-offset: 2px;
-  }
-  .\[\&_\.recharts-surface\:focus-visible\]\:outline-basalt-ring .recharts-surface:focus-visible {
-    outline-color: hsl(var(--basalt-ring));
-  }
   .\[\&_\[cmdk-group-heading\]\]\:px-basalt-space-lg [cmdk-group-heading] {
     padding-inline: var(--basalt-space-lg);
   }