@nocoo/basalt 2.2.0 → 3.0.0

package/dist/styles/tokens.css

@@ -1,3 +1,130 @@
+:root {
+	--basalt-space-xs: 0.125rem;
+	--basalt-space-sm: 0.25rem;
+	--basalt-space-md: 0.375rem;
+	--basalt-space-lg: 0.5rem;
+	--basalt-space-default: var(--basalt-space-lg);
+	--basalt-text-xs: 0.6875rem;
+	--basalt-text-sm: 0.75rem;
+	--basalt-text-code: 0.8125rem;
+	--basalt-text-base: 0.875rem;
+	--basalt-text-lg: 1rem;
+	--basalt-text-xl: 1.125rem;
+	--basalt-text-2xl: 1.25rem;
+	--basalt-text-3xl: 1.5rem;
+	--basalt-text-4xl: 1.875rem;
+	--basalt-text-5xl: 2.25rem;
+	--basalt-text-6xl: 3rem;
+	--basalt-text-7xl: 3.75rem;
+	--basalt-text-8xl: 4.5rem;
+	--basalt-text-9xl: 6rem;
+	--basalt-text-10xl: 8rem;
+	--basalt-leading-tight: 1.2;
+	--basalt-leading-body: 1.4285714286;
+	--basalt-leading-relaxed: 1.5;
+	--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-banner: calc(22 / 14);
+	--basalt-radius-sm: 0.25rem;
+	--basalt-radius-md: 0.5rem;
+	--basalt-radius-lg: 0.75rem;
+	--basalt-radius-full: 999rem;
+	--basalt-border-width: 0.0625rem;
+	--basalt-on-solid: 0 0% 100%;
+	--basalt-backdrop: 0 0% 0%;
+	--basalt-motion-fast: 120ms;
+	--basalt-motion-loader: 800ms;
+	--basalt-motion-normal: 180ms;
+	--basalt-motion-slow: 280ms;
+	--basalt-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
+
+	--basalt-line-compact: 1rem;
+	--basalt-line-body: 1.25rem;
+	--basalt-line-row: 1.375rem;
+	--basalt-line-relaxed: 1.5rem;
+	--basalt-space-unit: 0.25rem;
+	--basalt-space-0_5: calc(var(--basalt-space-unit) * 0.5);
+	--basalt-space-1: calc(var(--basalt-space-unit) * 1);
+	--basalt-space-1_5: calc(var(--basalt-space-unit) * 1.5);
+	--basalt-space-2: calc(var(--basalt-space-unit) * 2);
+	--basalt-space-2_5: calc(var(--basalt-space-unit) * 2.5);
+	--basalt-space-3: calc(var(--basalt-space-unit) * 3);
+	--basalt-space-3_5: calc(var(--basalt-space-unit) * 3.5);
+	--basalt-space-4: calc(var(--basalt-space-unit) * 4);
+	--basalt-space-5: calc(var(--basalt-space-unit) * 5);
+	--basalt-space-6: calc(var(--basalt-space-unit) * 6);
+	--basalt-space-7: calc(var(--basalt-space-unit) * 7);
+	--basalt-space-8: calc(var(--basalt-space-unit) * 8);
+	--basalt-space-9: calc(var(--basalt-space-unit) * 9);
+	--basalt-space-10: calc(var(--basalt-space-unit) * 10);
+	--basalt-space-11: calc(var(--basalt-space-unit) * 11);
+	--basalt-space-12: calc(var(--basalt-space-unit) * 12);
+	--basalt-space-14: calc(var(--basalt-space-unit) * 14);
+	--basalt-space-16: calc(var(--basalt-space-unit) * 16);
+	--basalt-space-28: calc(var(--basalt-space-unit) * 28);
+	--basalt-space-36: calc(var(--basalt-space-unit) * 36);
+	--basalt-space-40: calc(var(--basalt-space-unit) * 40);
+	--basalt-space-56: calc(var(--basalt-space-unit) * 56);
+	--basalt-space-60: calc(var(--basalt-space-unit) * 60);
+	--basalt-space-64: calc(var(--basalt-space-unit) * 64);
+	--basalt-space-72: calc(var(--basalt-space-unit) * 72);
+	--basalt-space-80: calc(var(--basalt-space-unit) * 80);
+	--basalt-space-96: calc(var(--basalt-space-unit) * 96);
+	--basalt-size-control: 2.125rem;
+	--basalt-size-control-sm: 1.75rem;
+	--basalt-size-control-lg: 2.5rem;
+	--basalt-size-control-inset: 1.75rem;
+	--basalt-size-icon: 0.875rem;
+	--basalt-size-icon-sm: 0.75rem;
+	--basalt-size-icon-lg: 1rem;
+	--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-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-y: var(--basalt-space-sm);
+	--basalt-space-control-gap: var(--basalt-space-lg);
+	--basalt-space-menu-inset: var(--basalt-space-lg);
+	--basalt-space-menu-x: var(--basalt-space-lg);
+	--basalt-space-menu-y: var(--basalt-space-md);
+	--basalt-space-card-sm: 0.75rem;
+	--basalt-space-card: 1rem;
+	--basalt-space-card-lg: 1.5rem;
+	--basalt-space-card-xl: 2rem;
+	--basalt-space-layout-sm: 0.75rem;
+	--basalt-space-layout: 1rem;
+	--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-overlay: var(--basalt-space-lg);
+	--basalt-space-panel-x: var(--basalt-space-card);
+	--basalt-space-panel-y: var(--basalt-space-card-sm);
+	--basalt-space-content-gap: var(--basalt-space-lg);
+	--basalt-space-row-x: var(--basalt-space-lg);
+	--basalt-space-row-y: var(--basalt-space-md);
+	--basalt-space-row-gap: var(--basalt-space-lg);
+	--basalt-space-row-content: calc(
+		var(--basalt-space-row-x) +
+		var(--basalt-size-icon-lg) +
+		var(--basalt-space-row-gap)
+	);
+	--basalt-size-action: var(--basalt-size-control);
+	--basalt-space-nav-inset: var(--basalt-space-lg);
+	--basalt-space-nav-gap: var(--basalt-space-xs);
+	--basalt-size-rail: 4.25rem;
+}
+
 :root,
 .light,
 [data-mode="light"] {
@@ -31,11 +158,36 @@
 	--basalt-input: 220 13% 88%;
 	--basalt-ring: var(--basalt-primary);
 	--basalt-control-fill: hsl(var(--basalt-secondary));
+	--basalt-hover: color-mix(in srgb, hsl(var(--basalt-primary)) 9.6%, hsl(var(--basalt-popover)));
+	--basalt-hover-end: color-mix(
+		in srgb,
+		hsl(var(--basalt-primary)) 4.8%,
+		hsl(var(--basalt-popover))
+	);
+	--basalt-selected: 0 0% 100%;
+	--basalt-selected-foreground: var(--basalt-foreground);
+	--basalt-primary-hover: color-mix(
+		in srgb,
+		hsl(var(--basalt-primary)) 90%,
+		hsl(var(--basalt-background))
+	);
+	--basalt-destructive-hover: color-mix(
+		in srgb,
+		hsl(var(--basalt-destructive)) 90%,
+		hsl(var(--basalt-background))
+	);
 	--basalt-zebra-fill: hsl(var(--basalt-bright));
-	--basalt-radius: 0.75rem;
-	--basalt-radius-island: 20px;
-	--basalt-radius-card: 14px;
-	--basalt-radius-widget: 10px;
+	--basalt-radius: var(--basalt-radius-lg);
+	--basalt-radius-island: var(--basalt-radius-lg);
+	--basalt-radius-card: var(--basalt-radius-lg);
+	--basalt-radius-widget: var(--basalt-radius-md);
+	--basalt-motion-ease-enter: cubic-bezier(0.25, 1, 0.5, 1);
+	--basalt-motion-ease-exit: cubic-bezier(0.5, 0, 0.75, 0);
+	--basalt-sheet-duration-enter: 350ms;
+	--basalt-sheet-duration-exit: 250ms;
+	--basalt-sheet-backdrop-blur: 6px;
+	--basalt-floating-duration-enter: 200ms;
+	--basalt-floating-duration-exit: 150ms;
 	--basalt-font-sans: "Inter", system-ui, -apple-system, sans-serif;
 	--basalt-font-display: "DM Sans", system-ui, sans-serif;
 	/* Match the classic candy swatches; gray and preference ownership stay independent. */
@@ -81,9 +233,10 @@
 	--basalt-accent-10: 280 53% 71%;
 	--basalt-accent-11: 237 66% 69%;
 	--basalt-accent-12: 210 20% 87%;
+	--basalt-badge-green: 113 60% 30%;
 	--basalt-badge-green-foreground: 0 0% 100%;
-	--basalt-badge-teal: var(--basalt-accent-3);
-	--basalt-badge-purple: var(--basalt-accent-10);
+	--basalt-badge-teal: 182 62% 30%;
+	--basalt-badge-purple: 280 53% 40%;
 	--basalt-badge-teal-foreground: 0 0% 100%;
 	--basalt-badge-purple-foreground: 0 0% 100%;
 	--basalt-chart-axis: 0 0% 40%;
@@ -134,15 +287,34 @@
 	--basalt-danger-tint: 0 40% 16%;
 	--basalt-info-foreground: 0 0% 10%;
 	--basalt-warning-foreground: 0 0% 10%;
-	--basalt-badge-green-foreground: 0 0% 100%;
+	--basalt-badge-green: 113 55% 62%;
+	--basalt-badge-green-foreground: 0 0% 10%;
 	--basalt-badge-teal: var(--basalt-accent-3);
 	--basalt-badge-purple: var(--basalt-accent-10);
-	--basalt-badge-teal-foreground: 0 0% 100%;
-	--basalt-badge-purple-foreground: 0 0% 100%;
+	--basalt-badge-teal-foreground: 0 0% 10%;
+	--basalt-badge-purple-foreground: 0 0% 10%;
 	--basalt-border: 0 0% 16%;
 	--basalt-input: 0 0% 18%;
 	--basalt-ring: var(--basalt-primary);
 	--basalt-control-fill: hsl(var(--basalt-secondary));
+	--basalt-hover: color-mix(in srgb, hsl(var(--basalt-primary)) 16%, hsl(var(--basalt-popover)));
+	--basalt-hover-end: color-mix(
+		in srgb,
+		hsl(var(--basalt-primary)) 9.6%,
+		hsl(var(--basalt-popover))
+	);
+	--basalt-selected: 0 0% 22%;
+	--basalt-selected-foreground: var(--basalt-foreground);
+	--basalt-primary-hover: color-mix(
+		in srgb,
+		hsl(var(--basalt-primary)) 90%,
+		hsl(var(--basalt-background))
+	);
+	--basalt-destructive-hover: color-mix(
+		in srgb,
+		hsl(var(--basalt-destructive)) 90%,
+		hsl(var(--basalt-background))
+	);
 	--basalt-zebra-fill: hsl(var(--basalt-bright));
 	/* Match the classic candy swatches; gray and preference ownership stay independent. */
 	--basalt-chart-blue: 204 90% 70%;
@@ -216,6 +388,16 @@
 [data-basalt-surface-root] [data-basalt-surface] {
 	background: hsl(var(--basalt-secondary));
 	--basalt-control-fill: hsl(var(--basalt-secondary));
+	--basalt-primary-hover: color-mix(
+		in srgb,
+		hsl(var(--basalt-primary)) 90%,
+		hsl(var(--basalt-background))
+	);
+	--basalt-destructive-hover: color-mix(
+		in srgb,
+		hsl(var(--basalt-destructive)) 90%,
+		hsl(var(--basalt-background))
+	);
 	--basalt-zebra-fill: hsl(var(--basalt-bright));
 }
 
@@ -241,6 +423,16 @@
 [data-basalt-surface]:not([data-basalt-surface-root] *) [data-basalt-surface] {
 	background: hsl(var(--basalt-secondary));
 	--basalt-control-fill: hsl(var(--basalt-secondary));
+	--basalt-primary-hover: color-mix(
+		in srgb,
+		hsl(var(--basalt-primary)) 90%,
+		hsl(var(--basalt-background))
+	);
+	--basalt-destructive-hover: color-mix(
+		in srgb,
+		hsl(var(--basalt-destructive)) 90%,
+		hsl(var(--basalt-background))
+	);
 	--basalt-zebra-fill: hsl(var(--basalt-bright));
 }
 
@@ -262,17 +454,387 @@
 }
 
 [data-basalt-table] tbody tr[aria-selected="true"] td {
-	background: hsl(var(--basalt-accent));
+	background: hsl(var(--basalt-selected));
+	color: hsl(var(--basalt-selected-foreground));
 }
 
 [data-basalt-table] tbody tr:hover:not([aria-selected="true"]) td {
-	background: color-mix(in oklab, hsl(var(--basalt-primary)) 3%, var(--basalt-control-fill));
+	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]
+	tbody
+	tr[data-diff-change="remove"][data-included="true"][aria-selected="true"]
+	td {
+	background: hsl(var(--basalt-danger-tint));
+	color: hsl(var(--basalt-danger));
+}
+
+[data-basalt-table]
+	tbody
+	tr[data-diff-change="add"][data-included="true"][aria-selected="true"]
+	td {
+	background: hsl(var(--basalt-info-tint));
+	color: hsl(var(--basalt-info));
+}
+
+/* Persistent selection is independent of the moving pointer/keyboard highlight. */
+:is(.basalt-choice, [data-basalt-hover-item]):is(
+	[data-hover-selected="true"],
+	[aria-pressed="true"],
+	[aria-current="page"],
+	[aria-current="true"],
+	[data-state="checked"]
+) {
+	background-color: hsl(var(--basalt-selected));
+	color: hsl(var(--basalt-selected-foreground));
+}
+
+.basalt-nav-item[data-hover-selected="true"] {
+	font-weight: 500;
+}
+
+.basalt-nav-item .basalt-choice[aria-current] {
+	background-color: transparent;
+}
+
+@layer components {
+	.basalt-action {
+		border: var(--basalt-border-width) solid transparent;
+		padding: var(--basalt-space-control-y) var(--basalt-space-control-x);
+		font-size: var(--basalt-text-base);
+		line-height: var(--basalt-leading-action);
+	}
+	.basalt-action-sm {
+		padding-inline: var(--basalt-space-control-x-sm);
+		font-size: var(--basalt-text-sm);
+		line-height: var(--basalt-leading-action-sm);
+	}
+	.basalt-action-lg {
+		padding-block: var(--basalt-space-lg);
+		padding-inline: var(--basalt-space-control-x-lg);
+		font-size: var(--basalt-text-lg);
+		line-height: var(--basalt-leading-action-lg);
+	}
+	.basalt-action-icon {
+		min-inline-size: var(--basalt-size-control);
+		min-block-size: calc(1lh + 2 * var(--basalt-space-control-y) + 2 * var(--basalt-border-width));
+		padding-inline: var(--basalt-space-sm);
+	}
+	.basalt-action-inset {
+		border-width: 0;
+		min-block-size: calc(1lh + 2 * var(--basalt-space-control-y));
+	}
+	.basalt-inline {
+		padding: var(--basalt-space-xs) var(--basalt-space-default);
+		font-size: var(--basalt-text-sm);
+		line-height: var(--basalt-leading-inline);
+	}
+	.basalt-banner {
+		padding: var(--basalt-space-panel-y) var(--basalt-space-panel-x);
+		font-size: var(--basalt-text-base);
+		line-height: var(--basalt-leading-banner);
+	}
+	.basalt-motion {
+		transition-duration: var(--basalt-motion-normal);
+		transition-timing-function: var(--basalt-motion-ease);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.basalt-motion {
+			transition: none;
+		}
+	}
+	.basalt-selection-motion {
+		transition:
+			transform var(--basalt-motion-normal) var(--basalt-motion-ease),
+			width var(--basalt-motion-normal) var(--basalt-motion-ease);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.basalt-selection-motion {
+			transition: none;
+		}
+	}
+
+	.basalt-nav-item {
+		position: relative;
+		cursor: pointer;
+		color: hsl(var(--basalt-muted-foreground));
+		transition:
+			color var(--basalt-motion-normal) var(--basalt-motion-ease),
+			background-color var(--basalt-motion-normal) var(--basalt-motion-ease);
+	}
+	.basalt-nav-item:is(:hover, :focus-visible) {
+		background-color: var(--basalt-hover);
+		color: hsl(var(--basalt-foreground));
+	}
+	.basalt-hover-list[data-hover-visible="true"] .basalt-nav-item:not([data-hover-selected="true"]) {
+		background-color: transparent;
+	}
+	.basalt-nav-item:is(:disabled, [aria-disabled="true"]) {
+		pointer-events: none;
+		opacity: 0.5;
+	}
+	[data-basalt-sidebar][data-collapsed]
+		:is([data-slot="sidebar-header"], [data-slot="sidebar-footer"]) {
+		justify-content: center;
+	}
+	[data-basalt-sidebar][data-collapsed] [data-slot="sidebar-footer"] {
+		align-items: center;
+	}
+	[data-basalt-sidebar][data-collapsed] [data-slot="sidebar-nav"] .basalt-nav-item {
+		margin-inline: auto;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.basalt-nav-item {
+			transition: none;
+		}
+	}
+	.basalt-chat-input {
+		field-sizing: content;
+		min-height: calc(1lh + var(--basalt-space-2));
+		max-height: calc(5lh + var(--basalt-space-2));
+		overscroll-behavior: contain;
+	}
+	.basalt-hover-list {
+		position: relative;
+		isolation: isolate;
+	}
+	.basalt-hover-list::before {
+		content: "";
+		position: absolute;
+		pointer-events: none;
+		left: 0;
+		top: 0;
+		z-index: -1;
+		width: var(--basalt-hover-width, 0px);
+		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));
+		opacity: 0;
+	}
+	.basalt-hover-list[data-hover-visible="true"]::before {
+		opacity: 1;
+	}
+	.basalt-hover-list[data-hover-animated="true"]::before {
+		transition:
+			transform var(--basalt-motion-normal) var(--basalt-motion-ease),
+			opacity var(--basalt-motion-fast) var(--basalt-motion-ease);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.basalt-hover-list[data-hover-animated]::before {
+			transition: none;
+		}
+	}
+	.basalt-agent-reveal {
+		animation: basalt-tab-in var(--basalt-motion-normal) var(--basalt-motion-ease-enter);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.basalt-agent-reveal {
+			animation: none;
+		}
+	}
+	[data-basalt-loader] > span {
+		opacity: 0.18;
+	}
+	[data-basalt-loader][data-animated="true"] > span {
+		animation: basalt-pixel-orbit var(--basalt-motion-loader) linear var(--basalt-pixel-delay)
+			infinite;
+	}
+	.basalt-shimmer-label {
+		color: transparent;
+		background: linear-gradient(
+			90deg,
+			hsl(var(--basalt-muted-foreground)) 35%,
+			hsl(var(--basalt-foreground)) 50%,
+			hsl(var(--basalt-muted-foreground)) 65%
+		);
+		background-size: 200% 100%;
+		background-clip: text;
+		animation: basalt-label-shimmer 1.4s linear infinite;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		[data-basalt-loader][data-animated] > span,
+		.basalt-shimmer-label {
+			animation: none;
+		}
+		.basalt-shimmer-label {
+			color: hsl(var(--basalt-muted-foreground));
+			background: none;
+		}
+	}
+	.basalt-command-list::before {
+		content: "";
+		position: absolute;
+		pointer-events: none;
+		left: 0;
+		top: 0;
+		transform: translate(var(--basalt-command-left), var(--basalt-command-top));
+		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));
+	}
+
+	.basalt-command-list[data-basalt-command-animated="true"]::before {
+		transition: transform var(--basalt-motion-normal) var(--basalt-motion-ease);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.basalt-command-list[data-basalt-command-animated]::before {
+			transition: none;
+		}
+	}
+
+	.basalt-floating {
+		transform-origin: var(--radix-popper-transform-origin, center);
+	}
+
+	.basalt-floating:is(
+		[data-state="open"],
+		[data-state="delayed-open"],
+		[data-state="instant-open"]
+	) {
+		animation: basalt-floating-in var(--basalt-floating-duration-enter)
+			var(--basalt-motion-ease-enter);
+	}
+
+	.basalt-floating[data-state="closed"] {
+		animation: basalt-floating-out var(--basalt-floating-duration-exit)
+			var(--basalt-motion-ease-exit) forwards;
+	}
+
+	[data-basalt-sheet] {
+		--basalt-sheet-x: 0%;
+		--basalt-sheet-y: 0%;
+	}
+
+	[data-basalt-sheet][data-side="right"] {
+		--basalt-sheet-x: 100%;
+	}
+
+	[data-basalt-sheet][data-side="left"] {
+		--basalt-sheet-x: -100%;
+	}
+
+	[data-basalt-sheet][data-side="top"] {
+		--basalt-sheet-y: -100%;
+	}
+
+	[data-basalt-sheet][data-side="bottom"] {
+		--basalt-sheet-y: 100%;
+	}
+
+	[data-basalt-sheet][data-state="open"] {
+		animation: basalt-sheet-in var(--basalt-sheet-duration-enter) var(--basalt-motion-ease-enter);
+	}
+
+	[data-basalt-sheet][data-state="closed"] {
+		animation: basalt-sheet-out var(--basalt-sheet-duration-exit) var(--basalt-motion-ease-exit)
+			forwards;
+	}
+
+	.basalt-sheet-overlay {
+		backdrop-filter: blur(var(--basalt-sheet-backdrop-blur));
+	}
+
+	.basalt-sheet-overlay[data-state="open"] {
+		animation: basalt-sheet-backdrop-in var(--basalt-sheet-duration-enter)
+			var(--basalt-motion-ease-enter);
+	}
+
+	/* A closing backdrop must never swallow clicks for the content already revealed. */
+	.basalt-sheet-overlay[data-state="closed"] {
+		animation: basalt-sheet-backdrop-out var(--basalt-sheet-duration-exit)
+			var(--basalt-motion-ease-exit) forwards;
+		pointer-events: none;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:is(.basalt-floating, [data-basalt-sheet], .basalt-sheet-overlay)[data-state] {
+			animation: none;
+		}
+	}
+}
+
+/* Sonner owns stack geometry; Basalt owns presentation and timing. */
+[data-sonner-toast].basalt-toast {
+	transition-duration: var(--basalt-motion-normal);
+	transition-timing-function: var(--basalt-motion-ease);
+	font-family: var(--basalt-font-sans);
+}
+@media (prefers-reduced-motion: reduce) {
+	[data-sonner-toast].basalt-toast {
+		transition: none;
+	}
+}
+
+@keyframes basalt-floating-in {
+	from {
+		opacity: 0;
+		scale: 0.95;
+	}
+	to {
+		opacity: 1;
+		scale: 1;
+	}
+}
+
+@keyframes basalt-floating-out {
+	from {
+		opacity: 1;
+		scale: 1;
+	}
+	to {
+		opacity: 0;
+		scale: 0.95;
+	}
+}
+
+@keyframes basalt-sheet-in {
+	from {
+		transform: translate(var(--basalt-sheet-x), var(--basalt-sheet-y));
+	}
+	to {
+		transform: translate(0, 0);
+	}
+}
+
+@keyframes basalt-sheet-out {
+	from {
+		transform: translate(0, 0);
+	}
+	to {
+		transform: translate(var(--basalt-sheet-x), var(--basalt-sheet-y));
+	}
+}
+
+@keyframes basalt-sheet-backdrop-in {
+	from {
+		opacity: 0;
+		backdrop-filter: blur(0);
+	}
+	to {
+		opacity: 1;
+		backdrop-filter: blur(var(--basalt-sheet-backdrop-blur));
+	}
+}
+
+@keyframes basalt-sheet-backdrop-out {
+	from {
+		opacity: 1;
+		backdrop-filter: blur(var(--basalt-sheet-backdrop-blur));
+	}
+	to {
+		opacity: 0;
+		backdrop-filter: blur(0);
+	}
+}
+
 @keyframes basalt-accordion-down {
 	from {
 		height: 0;
@@ -297,18 +859,26 @@
 	}
 }
 
-@keyframes basalt-loader-spin {
-	0% {
-		transform: rotate(0deg);
+@keyframes basalt-pixel-orbit {
+	0%,
+	100% {
+		opacity: 1;
 	}
-	12% {
-		transform: rotate(18deg);
+	33% {
+		opacity: 0.35;
 	}
-	55% {
-		transform: rotate(300deg);
+	66%,
+	99% {
+		opacity: 0.18;
 	}
-	100% {
-		transform: rotate(360deg);
+}
+
+@keyframes basalt-label-shimmer {
+	from {
+		background-position: 200% 0;
+	}
+	to {
+		background-position: -200% 0;
 	}
 }
 
@@ -399,3 +969,92 @@
 		transform: translateY(0);
 	}
 }
+
+.basalt-chat-word {
+	animation: basalt-chat-word-in var(--basalt-motion-normal) var(--basalt-motion-ease) both;
+}
+
+@keyframes basalt-chat-word-in {
+	from {
+		opacity: 0;
+		filter: blur(3px);
+	}
+	to {
+		opacity: 1;
+		filter: blur(0);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.basalt-chat-word {
+		animation: none;
+	}
+}
+
+:root,
+.light,
+[data-mode="light"] {
+	--basalt-tag-slate: oklch(96.8% 0.007 247.896);
+	--basalt-tag-slate-foreground: oklch(27.9% 0.041 260.031);
+	--basalt-tag-slate-border: oklch(86.9% 0.022 252.894);
+	--basalt-tag-blue: oklch(97% 0.014 254.604);
+	--basalt-tag-blue-foreground: oklch(42.4% 0.199 265.638);
+	--basalt-tag-blue-border: oklch(80.9% 0.105 251.813);
+	--basalt-tag-violet: oklch(96.9% 0.016 293.756);
+	--basalt-tag-violet-foreground: oklch(43.2% 0.232 292.759);
+	--basalt-tag-violet-border: oklch(81.1% 0.111 293.571);
+	--basalt-tag-teal: oklch(98.4% 0.014 180.72);
+	--basalt-tag-teal-foreground: oklch(43.7% 0.078 188.216);
+	--basalt-tag-teal-border: oklch(85.5% 0.138 181.071);
+	--basalt-tag-amber: oklch(98.7% 0.022 95.277);
+	--basalt-tag-amber-foreground: oklch(41.4% 0.112 45.904);
+	--basalt-tag-amber-border: oklch(87.9% 0.169 91.605);
+	--basalt-tag-rose: oklch(96.9% 0.015 12.422);
+	--basalt-tag-rose-foreground: oklch(45.5% 0.188 13.697);
+	--basalt-tag-rose-border: oklch(81% 0.117 11.638);
+	--basalt-tag-success: oklch(97.9% 0.021 166.113);
+	--basalt-tag-success-foreground: oklch(43.2% 0.095 166.913);
+	--basalt-tag-success-border: oklch(84.5% 0.143 164.978);
+	--basalt-tag-warning: oklch(98.7% 0.022 95.277);
+	--basalt-tag-warning-foreground: oklch(41.4% 0.112 45.904);
+	--basalt-tag-warning-border: oklch(87.9% 0.169 91.605);
+	--basalt-tag-danger: oklch(97.1% 0.013 17.38);
+	--basalt-tag-danger-foreground: oklch(44.4% 0.177 26.899);
+	--basalt-tag-danger-border: oklch(80.8% 0.114 19.571);
+	--basalt-tag-info: oklch(97.7% 0.013 236.62);
+	--basalt-tag-info-foreground: oklch(44.3% 0.11 240.79);
+	--basalt-tag-info-border: oklch(82.8% 0.111 230.318);
+}
+.dark,
+[data-mode="dark"] {
+	--basalt-tag-slate: oklch(27.9% 0.041 260.031);
+	--basalt-tag-slate-foreground: oklch(96.8% 0.007 247.896);
+	--basalt-tag-slate-border: oklch(44.6% 0.043 257.281);
+	--basalt-tag-blue: oklch(28.2% 0.091 267.935);
+	--basalt-tag-blue-foreground: oklch(88.2% 0.059 254.128);
+	--basalt-tag-blue-border: oklch(48.8% 0.243 264.376);
+	--basalt-tag-violet: oklch(28.3% 0.141 291.089);
+	--basalt-tag-violet-foreground: oklch(89.4% 0.057 293.283);
+	--basalt-tag-violet-border: oklch(49.1% 0.27 292.581);
+	--basalt-tag-teal: oklch(27.7% 0.046 192.524);
+	--basalt-tag-teal-foreground: oklch(91% 0.096 180.426);
+	--basalt-tag-teal-border: oklch(51.1% 0.096 186.391);
+	--basalt-tag-amber: oklch(27.9% 0.077 45.635);
+	--basalt-tag-amber-foreground: oklch(92.4% 0.12 95.746);
+	--basalt-tag-amber-border: oklch(55.5% 0.163 48.998);
+	--basalt-tag-rose: oklch(27.1% 0.105 12.094);
+	--basalt-tag-rose-foreground: oklch(89.2% 0.058 10.001);
+	--basalt-tag-rose-border: oklch(51.4% 0.222 16.935);
+	--basalt-tag-success: oklch(26.2% 0.051 172.552);
+	--basalt-tag-success-foreground: oklch(90.5% 0.093 164.15);
+	--basalt-tag-success-border: oklch(50.8% 0.118 165.612);
+	--basalt-tag-warning: oklch(27.9% 0.077 45.635);
+	--basalt-tag-warning-foreground: oklch(92.4% 0.12 95.746);
+	--basalt-tag-warning-border: oklch(55.5% 0.163 48.998);
+	--basalt-tag-danger: oklch(25.8% 0.092 26.042);
+	--basalt-tag-danger-foreground: oklch(88.5% 0.062 18.334);
+	--basalt-tag-danger-border: oklch(50.5% 0.213 27.518);
+	--basalt-tag-info: oklch(29.3% 0.066 243.157);
+	--basalt-tag-info-foreground: oklch(90.1% 0.058 230.902);
+	--basalt-tag-info-border: oklch(50% 0.134 242.749);
+}