@scalepad/ui 0.1.1 → 0.2.1

package/scripts/verify-consumption.mjs

@@ -0,0 +1,275 @@
+#!/usr/bin/env node
+/**
+ * verify-consumption
+ *
+ * Smoke test that catches the class of bug a colleague hit when consuming
+ * `@scalepad/ui` from a fresh project:
+ *
+ *   - Missing transitive peer dependencies (e.g. @tiptap/core, @tiptap/extensions)
+ *   - Vite setup gaps (vanilla-extract plugin not wired up, optimizeDeps not configured)
+ *
+ * What it does:
+ *   1. `pnpm pack` the local `@scalepad/ui` and `@scalepad/ui-utils` workspaces.
+ *   2. Create a temp Vite + React 19 project in the OS temp dir.
+ *   3. Install the local tarballs plus the required peers from the README.
+ *   4. Write a minimal `App.tsx` that imports `ThemeProvider`, `Button`,
+ *      `showToast`, and `SlashRichTextEditor` (so all the optional-peer
+ *      code paths are exercised).
+ *   5. Run `vite build`. If exit code is non-zero, this script fails.
+ *
+ * Intended use:
+ *   `pnpm --filter @scalepad/ui run verify:consumption` before publishing
+ *   a new version. Not wired into CI yet; we'll iterate on speed first.
+ */
+import { spawnSync } from 'node:child_process';
+import { existsSync, mkdirSync, mkdtempSync, readdirSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const pkgRoot = resolve(__dirname, '..');
+const monorepoRoot = resolve(pkgRoot, '..', '..');
+const utilsRoot = resolve(monorepoRoot, 'packages', 'utils');
+
+const log = (msg) => console.log(`[verify-consumption] ${msg}`);
+const die = (msg) => {
+  console.error(`[verify-consumption] FAIL: ${msg}`);
+  process.exit(1);
+};
+
+function run(cmd, args, opts = {}) {
+  const display = `${cmd} ${args.join(' ')}`;
+  log(`$ ${display} (cwd=${opts.cwd ?? process.cwd()})`);
+  const result = spawnSync(cmd, args, {
+    stdio: 'inherit',
+    encoding: 'utf8',
+    ...opts,
+  });
+  if (result.status !== 0) {
+    die(`${display} exited with status ${result.status}`);
+  }
+  return result;
+}
+
+function runCapture(cmd, args, opts = {}) {
+  const display = `${cmd} ${args.join(' ')}`;
+  log(`$ ${display} (cwd=${opts.cwd ?? process.cwd()})`);
+  const result = spawnSync(cmd, args, {
+    stdio: ['inherit', 'pipe', 'pipe'],
+    encoding: 'utf8',
+    ...opts,
+  });
+  process.stdout.write(result.stdout ?? '');
+  process.stderr.write(result.stderr ?? '');
+  if (result.status !== 0) {
+    die(`${display} exited with status ${result.status}`);
+  }
+  return result;
+}
+
+function findTarball(dir, prefix) {
+  const matches = readdirSync(dir).filter(
+    (f) => f.startsWith(prefix) && f.endsWith('.tgz'),
+  );
+  if (matches.length === 0) {
+    die(`no ${prefix}*.tgz produced in ${dir}`);
+  }
+  if (matches.length > 1) {
+    log(`warning: multiple ${prefix}*.tgz found, using newest`);
+  }
+  // sort by mtime via spawnSync(ls -t) would be heavier; for two same-run packs,
+  // alphabetical reverse-sort gets the higher version number.
+  matches.sort().reverse();
+  return join(dir, matches[0]);
+}
+
+// 1. Pack both workspaces.
+log('packing @scalepad/ui and @scalepad/ui-utils...');
+run('pnpm', ['pack', '--pack-destination', pkgRoot], { cwd: pkgRoot });
+run('pnpm', ['pack', '--pack-destination', utilsRoot], { cwd: utilsRoot });
+
+const uiTarball = findTarball(pkgRoot, 'scalepad-ui-');
+const utilsTarball = findTarball(utilsRoot, 'scalepad-ui-utils-');
+log(`ui tarball   = ${uiTarball}`);
+log(`utils tarball= ${utilsTarball}`);
+
+// 2. Make a temp project.
+const projectDir = mkdtempSync(join(tmpdir(), 'scalepad-ui-verify-'));
+log(`temp project = ${projectDir}`);
+mkdirSync(join(projectDir, 'src'), { recursive: true });
+
+// 3. Write package.json with the README's required + optional peers.
+const projectPkg = {
+  name: 'scalepad-ui-verify',
+  private: true,
+  version: '0.0.0',
+  type: 'module',
+  scripts: {
+    build: 'vite build',
+  },
+  // Required peers only. Mantine, recharts, clsx, react-intersection-observer
+  // come in as runtime deps of @scalepad/ui — consumers do NOT install them.
+  // Tiptap is an optional peer; this smoke test exercises the rich-text editor
+  // entry points, so we install the full Tiptap set here.
+  dependencies: {
+    '@scalepad/ui': `file:${uiTarball}`,
+    '@scalepad/ui-utils': `file:${utilsTarball}`,
+    '@tanstack/react-query': '^5.0.0',
+    '@tanstack/react-table': '^8.21.3',
+    '@vanilla-extract/css': '^1.16.2',
+    dayjs: '^1.11.19',
+    'lucide-react': '^0.469.0',
+    react: '^19.0.0',
+    'react-dom': '^19.0.0',
+    '@tiptap/core': '^3.22.3',
+    '@tiptap/extensions': '^3.22.3',
+    '@tiptap/pm': '^3.22.3',
+    '@tiptap/react': '^3.22.3',
+    '@tiptap/starter-kit': '^3.22.3',
+    '@tiptap/suggestion': '^3.22.3',
+    '@tiptap/extension-blockquote': '^3.22.3',
+    '@tiptap/extension-bold': '^3.22.3',
+    '@tiptap/extension-bubble-menu': '^3.22.3',
+    '@tiptap/extension-bullet-list': '^3.22.3',
+    '@tiptap/extension-code': '^3.22.3',
+    '@tiptap/extension-code-block': '^3.22.3',
+    '@tiptap/extension-document': '^3.22.3',
+    '@tiptap/extension-dropcursor': '^3.22.3',
+    '@tiptap/extension-gapcursor': '^3.22.3',
+    '@tiptap/extension-hard-break': '^3.22.3',
+    '@tiptap/extension-heading': '^3.22.3',
+    '@tiptap/extension-horizontal-rule': '^3.22.3',
+    '@tiptap/extension-image': '^3.22.3',
+    '@tiptap/extension-italic': '^3.22.3',
+    '@tiptap/extension-link': '^3.22.3',
+    '@tiptap/extension-list': '^3.22.3',
+    '@tiptap/extension-list-item': '^3.22.3',
+    '@tiptap/extension-list-keymap': '^3.22.3',
+    '@tiptap/extension-ordered-list': '^3.22.3',
+    '@tiptap/extension-paragraph': '^3.22.3',
+    '@tiptap/extension-placeholder': '^3.22.3',
+    '@tiptap/extension-strike': '^3.22.3',
+    '@tiptap/extension-text': '^3.22.3',
+    '@tiptap/extension-underline': '^3.22.3',
+  },
+  devDependencies: {
+    '@vitejs/plugin-react': '^5.0.4',
+    '@types/react': '^19.2.2',
+    '@types/react-dom': '^19.2.1',
+    typescript: '^6.0.3',
+    vite: '^7.1.9',
+  },
+};
+writeFileSync(
+  join(projectDir, 'package.json'),
+  JSON.stringify(projectPkg, null, 2),
+);
+
+writeFileSync(
+  join(projectDir, 'tsconfig.json'),
+  JSON.stringify(
+    {
+      compilerOptions: {
+        target: 'ES2022',
+        lib: ['ES2022', 'DOM', 'DOM.Iterable'],
+        jsx: 'react-jsx',
+        module: 'ESNext',
+        moduleResolution: 'bundler',
+        strict: true,
+        esModuleInterop: true,
+        skipLibCheck: true,
+        noEmit: true,
+        resolveJsonModule: true,
+        isolatedModules: true,
+      },
+      include: ['src'],
+    },
+    null,
+    2,
+  ),
+);
+
+writeFileSync(
+  join(projectDir, 'vite.config.ts'),
+  `import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import { scalepadUi } from '@scalepad/ui/vite';
+
+export default defineConfig({
+  plugins: [react(), scalepadUi()],
+});
+`,
+);
+
+writeFileSync(
+  join(projectDir, 'index.html'),
+  `<!doctype html>
+<html>
+  <head><meta charset="utf-8" /><title>verify</title></head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+`,
+);
+
+writeFileSync(
+  join(projectDir, 'src', 'main.tsx'),
+  `import '@mantine/core/styles.css';
+import { createRoot } from 'react-dom/client';
+import {
+  Button,
+  Notifications,
+  showSuccessToast,
+  SlashRichTextEditor,
+  ThemeProvider,
+} from '@scalepad/ui';
+
+function App() {
+  return (
+    <ThemeProvider>
+      <Notifications />
+      <Button onClick={() => showSuccessToast({ title: 'hi', message: 'world' })}>
+        Click
+      </Button>
+      <SlashRichTextEditor commands={[]} placeholder="type" />
+    </ThemeProvider>
+  );
+}
+
+createRoot(document.getElementById('root')!).render(<App />);
+`,
+);
+
+// 4. Install. Use npm so we don't depend on the user's pnpm workspace config;
+//    file: deps work cleanly under npm and don't leak the monorepo's hoisting.
+log('installing in temp project (this is slow on cold cache)...');
+run('npm', ['install', '--no-audit', '--no-fund', '--legacy-peer-deps=false'], {
+  cwd: projectDir,
+});
+
+// 5. Build. Capture output so we can assert no known-problematic Vite warnings
+//    snuck back in (they don't fail the build by default, so a plain run won't
+//    catch a regression).
+log('building...');
+const buildResult = runCapture('npx', ['vite', 'build'], { cwd: projectDir });
+const buildOutput = `${buildResult.stdout ?? ''}\n${buildResult.stderr ?? ''}`;
+
+// Regression guard for the rrule / @mantine/schedule warning. The
+// `scalepadUi()` preset aliases `rrule` to its CJS UMD entry so this warning
+// shouldn't appear. See README → Troubleshooting → IMPORT_IS_UNDEFINED.
+if (
+  buildOutput.includes('IMPORT_IS_UNDEFINED') ||
+  /node_modules\/rrule\/dist\/esm\/index\.js/.test(buildOutput)
+) {
+  die(
+    'detected rrule IMPORT_IS_UNDEFINED warning in build output — the ' +
+      'scalepadUi() preset should be aliasing rrule to rrule/dist/es5/rrule.js. ' +
+      'See packages/ui/src/vite.js.',
+  );
+}
+
+log('OK — built successfully (no known-problematic warnings).');
+log(`(temp project left at ${projectDir} for inspection; delete when done)`);

package/src/ThemeProvider.tsx

@@ -9,9 +9,14 @@ import '@mantine/schedule/styles.css';
 // oxlint-disable-next-line import/no-unassigned-import
 import './inter-font';
 
-import type { ReactNode } from 'react';
+import { useMemo, type ReactNode } from 'react';
 
-import { MantineProvider, type MantineThemeOverride } from '@mantine/core';
+import {
+  localStorageColorSchemeManager,
+  MantineProvider,
+  type MantineColorScheme,
+  type MantineThemeOverride,
+} from '@mantine/core';
 
 import { mantineTheme } from './theme';
 import { semanticColorsCss } from './tokens/semantic-colors';
@@ -20,15 +25,58 @@ import { semanticTokensCss } from './tokens/semantic-tokens-css';
 export interface ThemeProviderProps {
   children: ReactNode;
   theme?: MantineThemeOverride;
+  /**
+   * Initial color scheme used when no persisted value is found. Defaults to
+   * `'auto'` so a fresh visitor follows their OS appearance preference.
+   */
+  defaultColorScheme?: MantineColorScheme;
+  /**
+   * localStorage key used to persist the user's color scheme choice. Apps that
+   * embed ThemeProvider can namespace this to keep multiple apps from sharing
+   * a key on the same origin.
+   */
+  colorSchemeStorageKey?: string;
 }
 
-export function ThemeProvider({ children, theme }: ThemeProviderProps) {
+export function ThemeProvider({
+  children,
+  theme,
+  defaultColorScheme = 'auto',
+  colorSchemeStorageKey = 'scalepad-ui.color-scheme',
+}: ThemeProviderProps) {
+  const colorSchemeManager = useMemo(
+    () => localStorageColorSchemeManager({ key: colorSchemeStorageKey }),
+    [colorSchemeStorageKey],
+  );
+
   return (
-    <MantineProvider theme={theme || mantineTheme}>
+    <MantineProvider
+      theme={theme || mantineTheme}
+      defaultColorScheme={defaultColorScheme}
+      colorSchemeManager={colorSchemeManager}
+    >
       {/* Inject Figma semantic color tokens as CSS custom properties */}
       <style dangerouslySetInnerHTML={{ __html: semanticColorsCss }} />
       {/* Inject semantic radius, spacing, shadows, z-index, font-family */}
       <style dangerouslySetInnerHTML={{ __html: semanticTokensCss }} />
+      {/*
+        Global font / glyph rendering. macOS defaults to subpixel
+        antialiasing which makes light text on dark surfaces look
+        bolded/blurry, and Mantine's reset sometimes overrides body-level
+        inline styles. Forcing grayscale antialiasing + optimizeLegibility
+        keeps text crisp in both light and dark mode.
+      */}
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
+            html, body {
+              -webkit-font-smoothing: antialiased;
+              -moz-osx-font-smoothing: grayscale;
+              text-rendering: optimizeLegibility;
+            }
+          `,
+        }}
+      />
       {/* Override Mantine Table hover to use semantic primary light */}
       <style
         dangerouslySetInnerHTML={{

package/src/components/Anchor/Anchor.css.ts

@@ -53,7 +53,7 @@ export const root = style({
  * drift.
  */
 export const variant = styleVariants(textStyleVariants, styles => ({
-  fontFamily: styles.fontFamily,
+  ...(styles.fontFamily != null && { fontFamily: styles.fontFamily }),
   fontWeight: styles.fontWeight,
   fontSize: styles.fontSize,
   lineHeight: styles.lineHeight,

package/src/components/ColorInput/ColorInput.figma.tsx

@@ -0,0 +1,32 @@
+import figma from '@figma/code-connect';
+
+import { ColorInput } from './ColorInput';
+
+/**
+ * Code Connect mapping for the LM Design System `ColorInput` (node 4265:237).
+ *
+ * The Figma component_set has `Size` (Small / Regular / Large) and `State`
+ * (Empty / Value / Focus / Error / Error Focus / Disabled) axes. We
+ * intentionally don't map the size axis: in code the component follows the
+ * `TextInput` chrome (single default size, overridable via `size`), and
+ * Figma will be re-aligned to match later. Only the boolean-ish state axes
+ * map cleanly today (`disabled`, `error`).
+ */
+figma.connect(
+  ColorInput,
+  'https://www.figma.com/design/VCLfybgU3OaUUPrQdBaVmP/LM-Design-System?node-id=4265%3A237',
+  {
+    props: {
+      disabled: figma.enum('State', {
+        Disabled: true,
+      }),
+      error: figma.enum('State', {
+        Error: 'Invalid color',
+        'Error Focus': 'Invalid color',
+      }),
+    },
+    example: props => (
+      <ColorInput disabled={props.disabled} error={props.error} />
+    ),
+  },
+);

package/src/components/ColorInput/ColorInput.tsx

@@ -0,0 +1,94 @@
+/**
+ * ColorInput component
+ *
+ * Thin wrapper around Mantine's `ColorInput` that mirrors the conventions of
+ * our `TextInput` wrapper (`size='sm'`, `radius='lg'`, `format='hex'`) and
+ * pre-loads the swatch grid with `AVATAR_PALETTE` — the 50-color list
+ * `@scalepad/ui` already uses for identity chips. Reusing the same palette
+ * here keeps every "pick a color" surface in the app consistent without
+ * making consumers wire `swatches` themselves.
+ *
+ * Visual chrome (height, padding, radius, focus ring, error state, disabled
+ * state) intentionally follows `TextInput` rather than the standalone Figma
+ * ColorInput frame. Figma will be aligned later.
+ *
+ * @example
+ * ```tsx
+ * <ColorInput
+ *   label="Brand color"
+ *   value={color}
+ *   onChange={setColor}
+ * />
+ * ```
+ *
+ * @example Custom swatches
+ * ```tsx
+ * <ColorInput
+ *   swatches={['#ff0000', '#00ff00', '#0000ff']}
+ *   swatchesPerRow={3}
+ * />
+ * ```
+ */
+
+import { forwardRef, useMemo } from 'react';
+
+import {
+  ColorInput as MantineColorInput,
+  type ColorInputProps as MantineColorInputProps,
+} from '@mantine/core';
+
+import { AVATAR_PALETTE } from '../../utils/avatar';
+
+/**
+ * Default swatch grid for `ColorInput`. Mirrors `AVATAR_PALETTE` and is
+ * exported so consumers can compose it with extra brand-specific swatches
+ * (`swatches={[...DEFAULT_COLOR_INPUT_SWATCHES, '#abc123']}`).
+ */
+export const DEFAULT_COLOR_INPUT_SWATCHES: readonly string[] = AVATAR_PALETTE;
+
+/**
+ * Default number of swatches per row. 10 columns × 5 rows fits the 50-entry
+ * `AVATAR_PALETTE` cleanly without forcing the popover wider than the input.
+ */
+export const DEFAULT_COLOR_INPUT_SWATCHES_PER_ROW = 10;
+
+export interface ColorInputProps extends MantineColorInputProps {}
+
+export const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(
+  (
+    {
+      className,
+      size = 'sm',
+      radius = 'lg',
+      format = 'hex',
+      swatches,
+      swatchesPerRow = DEFAULT_COLOR_INPUT_SWATCHES_PER_ROW,
+      ...props
+    },
+    ref,
+  ) => {
+    // `swatches` is mutated by Mantine internals in some flows, so feed it a
+    // fresh array (not the frozen palette constant) when defaulting.
+    const resolvedSwatches = useMemo(
+      () => swatches ?? [...DEFAULT_COLOR_INPUT_SWATCHES],
+      [swatches],
+    );
+
+    return (
+      <MantineColorInput
+        ref={ref}
+        size={size}
+        radius={radius}
+        format={format}
+        swatches={resolvedSwatches}
+        swatchesPerRow={swatchesPerRow}
+        classNames={{
+          input: className,
+        }}
+        {...props}
+      />
+    );
+  },
+);
+
+ColorInput.displayName = 'ColorInput';

package/src/components/ColorInput/index.ts

@@ -0,0 +1,6 @@
+export {
+  ColorInput,
+  DEFAULT_COLOR_INPUT_SWATCHES,
+  DEFAULT_COLOR_INPUT_SWATCHES_PER_ROW,
+} from './ColorInput';
+export type { ColorInputProps } from './ColorInput';

package/src/components/IconButton/IconButton.tsx

@@ -18,11 +18,58 @@ export interface IconButtonProps extends MantineActionIconProps {
   variant?: IconButtonVariant;
 }
 
+/**
+ * Mantine's ActionIcon resolves `--ai-color`, `--ai-bg`, `--ai-hover`, and
+ * `--ai-hover-color` to the variant resolver's output and applies them as
+ * inline `style="..."` on the rendered button. Inline styles win over our
+ * vanilla-extract class CSS, so a class-level `color: tokens.color.text.*`
+ * can be silently overridden by Mantine's resolved variant color (especially
+ * in dark mode where `subtle + primary` resolves to a pale green that reads
+ * as washed out or "black" against the dark surface).
+ *
+ * Returning a `vars` *function* here pins the CSS variables to our semantic
+ * tokens at the same level Mantine writes them — instance vars merge into
+ * (and override) the varsResolver output, so `color: var(--ai-color)` in
+ * Mantine's class rule picks up our token instead. Mantine 8 invokes the
+ * `vars` prop as a function (`vars(theme, props)`), so it must be callable —
+ * passing a plain object throws "vars is not a function" at render time.
+ */
+type ActionIconVarsFn = MantineActionIconProps['vars'];
+
+const ghostVars: ActionIconVarsFn = () => ({
+  root: {
+    '--ai-color': 'var(--color-text-default)',
+    '--ai-bg': 'transparent',
+    '--ai-hover': 'var(--color-background-primary-light)',
+    '--ai-hover-color': 'var(--color-text-primary-default)',
+  },
+});
+
+const ghostMutedVars: ActionIconVarsFn = () => ({
+  root: {
+    '--ai-color': 'var(--color-text-subdued-strong)',
+    '--ai-bg': 'transparent',
+    '--ai-hover': 'var(--color-background-primary-light)',
+    '--ai-hover-color': 'var(--color-text-primary-default)',
+  },
+});
+
+const outlineVars: ActionIconVarsFn = () => ({
+  root: {
+    '--ai-color': 'var(--color-text-default)',
+    '--ai-bg': 'var(--color-background-default)',
+    '--ai-bd': '1px solid var(--color-stroke-default)',
+    '--ai-hover': 'var(--color-background-primary-light)',
+    '--ai-hover-color': 'var(--color-text-primary-default)',
+  },
+});
+
 const IconButtonBase = forwardRef<HTMLButtonElement, IconButtonProps>(
   ({ variant = 'outline', className, ...props }, ref) => {
     let mantineVariant: 'outline' | 'subtle' | 'filled' = 'outline';
     let mantineColor = props.color;
     let customClassName = className;
+    let customVars: ActionIconVarsFn | undefined;
 
     if (variant === 'primary') {
       mantineVariant = 'filled';
@@ -40,6 +87,7 @@ const IconButtonBase = forwardRef<HTMLButtonElement, IconButtonProps>(
     } else if (variant === 'outline') {
       mantineVariant = 'outline';
       customClassName = `${iconButtonStyles.outlineIconButton}${className ? ` ${className}` : ''}`;
+      customVars = outlineVars;
     } else if (variant === 'outline-inverse') {
       mantineVariant = 'outline';
       mantineColor = 'white';
@@ -47,9 +95,11 @@ const IconButtonBase = forwardRef<HTMLButtonElement, IconButtonProps>(
     } else if (variant === 'ghost') {
       mantineVariant = 'subtle';
       customClassName = `${iconButtonStyles.ghostIconButton}${className ? ` ${className}` : ''}`;
+      customVars = ghostVars;
     } else if (variant === 'ghost-muted') {
       mantineVariant = 'subtle';
       customClassName = `${iconButtonStyles.ghostMutedIconButton}${className ? ` ${className}` : ''}`;
+      customVars = ghostMutedVars;
     }
 
     return (
@@ -58,6 +108,7 @@ const IconButtonBase = forwardRef<HTMLButtonElement, IconButtonProps>(
         variant={mantineVariant}
         color={mantineColor}
         className={customClassName}
+        vars={customVars}
         {...props}
         radius={props.radius ?? 'lg'}
       />

package/src/components/Select/Select.css.ts

@@ -36,13 +36,18 @@ export const selectButton = style({
   overflow: 'hidden',
   transition: 'border-color 0.15s ease',
   selectors: {
-    '&:hover': {
+    '&:hover:not(:disabled)': {
       borderColor: tokens.color.stroke.subduedStrong,
     },
-    '&:focus': focusRing,
-    '&:active': {
+    '&:focus:not(:disabled)': focusRing,
+    '&:active:not(:disabled)': {
       borderColor: tokens.color.stroke.strong,
     },
+    '&:disabled': {
+      cursor: 'not-allowed',
+      opacity: 0.6,
+      backgroundColor: tokens.color.background.disabledDefault,
+    },
     [`${mantineVars.darkSelector} &`]: {
       borderColor: tokens.color.stroke.default,
       backgroundColor: tokens.color.background.default,

package/src/components/Select/Select.tsx

@@ -35,6 +35,11 @@ export interface SelectProps {
    * Validation error message displayed below the select
    */
   error?: string;
+  /**
+   * Disable the select trigger. When disabled, the dropdown cannot be opened
+   * and the button is excluded from the focus order.
+   */
+  disabled?: boolean;
 }
 
 /**
@@ -55,7 +60,10 @@ export interface SelectProps {
  * ```
  */
 export const Select = forwardRef<HTMLButtonElement, SelectProps>(
-  ({ labelPrefix, data, value, onChange, placeholder, w, error }, ref) => {
+  (
+    { labelPrefix, data, value, onChange, placeholder, w, error, disabled },
+    ref,
+  ) => {
     const id = useId();
     const errorId = error ? `${id}-error` : undefined;
     const combobox = useCombobox({
@@ -88,11 +96,13 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
             <button
               ref={ref}
               type="button"
+              disabled={disabled}
               className={styles.selectButton}
               onClick={() => combobox.toggleDropdown()}
               aria-haspopup="listbox"
               aria-expanded={combobox.dropdownOpened}
               aria-invalid={!!error}
+              aria-disabled={disabled || undefined}
               aria-describedby={errorId}
               style={
                 w ? { width: typeof w === 'number' ? `${w}px` : w } : undefined

package/src/components/SubNavigation/SubNavigation.css.ts

@@ -1,5 +1,6 @@
 import { style } from '@vanilla-extract/css';
 
+import { mantineVars } from '../../theme/mantineVars';
 import { tokens } from '../../theme/themeContract.css';
 import { textStyleVariants } from '../../tokens/text-styles';
 
@@ -59,6 +60,25 @@ export const itemActive = style({
       backgroundColor: tokens.color.background.primaryLightHover,
       color: tokens.color.text.primaryDefault,
     },
+    // Dark mode: the global `primaryLight` (greenAlpha 12%) reads as a barely
+    // perceivable wash and `primaryDefault` (green[3]) is too pale to register
+    // as "selected". The 25-35% tint we initially tried still composited to a
+    // dim teal over the dark canvas (≈#243B3B over #161B24). Push the green
+    // wash to ~50% / 60% so the active tab reads as a clearly saturated
+    // brand surface, and pair with near-white text for a strong "selected"
+    // affordance.
+    //
+    // `mantineVars.darkSelector` already ends in ` &`, so we use it raw
+    // rather than appending another ` &` (which would produce an invalid
+    // self-descendant selector and silently fail to apply).
+    [mantineVars.darkSelector]: {
+      backgroundColor: 'rgba(77, 155, 127, 0.5)',
+      color: tokens.color.text.title,
+    },
+    [`${mantineVars.darkSelector}:hover`]: {
+      backgroundColor: 'rgba(77, 155, 127, 0.6)',
+      color: tokens.color.text.title,
+    },
   },
 });