@nocoo/basalt 3.2.0 → 3.2.4

package/dist/providers/accent.js.map

@@ -1 +1 @@
-{"version":3,"file":"accent.js","names":["ACCENT_SWATCHES","LEGACY_ACCENT_IDS","DEFAULT_ACCENT_ID","STORAGE_KEY","AccentContext","createContext","accentSwatchById","normalized","id","swatch","channel","c","parseHslChannels","hue","sat","light","hsl","hslToRgbChannels","k","n","h","a","s","l","f","relativeLuminance","rgb","wcagContrast","lA","rgbA","lB","rgbB","DARK_TEXT_RGB","WHITE_TEXT_RGB","LIGHT_SURFACES_RGB","DARK_SURFACES_RGB","compositeRgb","top","bottom","deriveSemanticPrimary","origL","dark","targetSurfaces","foreground","start","bg","hoverOk","accentForeground","contrastWhite","applyAccent","applySwatch","semanticPrimary","root","isValidAccentId","value","validHsl","isDarkMode","AccentProvider","controlledAccent","isControlled","swatches","useMemo","override","paletteOverrides","store","useState","createPreferenceStore","defaultAccent","storageKey","persist","getServerSnapshot","useCallback","storeAccent","useSyncExternalStore","currentAccent","applyToDocument","apply","observer","setAccent","validId","next","onAccentChange","useAccent","ctx","useContext"],"sources":["../../src/providers/accent.tsx"],"sourcesContent":["import {\n\tcreateContext,\n\ttype ReactNode,\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseState,\n\tuseSyncExternalStore,\n} from \"react\";\nimport { createPreferenceStore } from \"../utils/preference-store\";\n\nexport type AccentSwatch = {\n\tid: string;\n\tlabel: string;\n\ttoken: string;\n\tlight: string;\n\tdark: string;\n};\n\n/** Twelve candy accents inspired by the translucent iMac and iPhone 5C finishes. */\nexport const ACCENT_SWATCHES: readonly AccentSwatch[] = [\n\t{\n\t\tid: \"primary\",\n\t\tlabel: \"Blue\",\n\t\ttoken: \"--basalt-accent-1\",\n\t\tlight: \"204 88% 62%\",\n\t\tdark: \"204 90% 70%\",\n\t},\n\t{\n\t\tid: \"sky\",\n\t\tlabel: \"Ice\",\n\t\ttoken: \"--basalt-accent-2\",\n\t\tlight: \"191 79% 70%\",\n\t\tdark: \"191 79% 74%\",\n\t},\n\t{\n\t\tid: \"teal\",\n\t\tlabel: \"Bondi\",\n\t\ttoken: \"--basalt-accent-3\",\n\t\tlight: \"182 62% 47%\",\n\t\tdark: \"182 62% 63%\",\n\t},\n\t{\n\t\tid: \"green\",\n\t\tlabel: \"Green\",\n\t\ttoken: \"--basalt-accent-4\",\n\t\tlight: \"113 58% 62%\",\n\t\tdark: \"113 58% 70%\",\n\t},\n\t{\n\t\tid: \"lime\",\n\t\tlabel: \"Lime\",\n\t\ttoken: \"--basalt-accent-5\",\n\t\tlight: \"79 70% 64%\",\n\t\tdark: \"79 70% 70%\",\n\t},\n\t{\n\t\tid: \"amber\",\n\t\tlabel: \"Yellow\",\n\t\ttoken: \"--basalt-accent-6\",\n\t\tlight: \"49 100% 69%\",\n\t\tdark: \"49 100% 73%\",\n\t},\n\t{\n\t\tid: \"orange\",\n\t\tlabel: \"Tangerine\",\n\t\ttoken: \"--basalt-accent-7\",\n\t\tlight: \"27 95% 65%\",\n\t\tdark: \"27 95% 72%\",\n\t},\n\t{\n\t\tid: \"red\",\n\t\tlabel: \"Strawberry\",\n\t\ttoken: \"--basalt-accent-8\",\n\t\tlight: \"5 85% 66%\",\n\t\tdark: \"5 85% 73%\",\n\t},\n\t{\n\t\tid: \"rose\",\n\t\tlabel: \"Pink\",\n\t\ttoken: \"--basalt-accent-9\",\n\t\tlight: \"345 88% 72%\",\n\t\tdark: \"345 88% 77%\",\n\t},\n\t{\n\t\tid: \"purple\",\n\t\tlabel: \"Grape\",\n\t\ttoken: \"--basalt-accent-10\",\n\t\tlight: \"280 53% 71%\",\n\t\tdark: \"280 53% 77%\",\n\t},\n\t{\n\t\tid: \"indigo\",\n\t\tlabel: \"Blueberry\",\n\t\ttoken: \"--basalt-accent-11\",\n\t\tlight: \"237 66% 69%\",\n\t\tdark: \"237 66% 77%\",\n\t},\n\t{\n\t\tid: \"gray\",\n\t\tlabel: \"Pearl\",\n\t\ttoken: \"--basalt-accent-12\",\n\t\tlight: \"210 20% 87%\",\n\t\tdark: \"210 20% 88%\",\n\t},\n];\n\nconst LEGACY_ACCENT_IDS = new Map<string, string>([\n\t[\"jade\", \"teal\"],\n\t[\"vermilion\", \"red\"],\n\t[\"magenta\", \"rose\"],\n\t[\"orchid\", \"purple\"],\n\t[\"cobalt\", \"indigo\"],\n\t[\"steel\", \"primary\"],\n\t[\"cadet\", \"sky\"],\n\t[\"seafoam\", \"teal\"],\n\t[\"olive\", \"lime\"],\n\t[\"gold\", \"amber\"],\n\t[\"tangerine\", \"orange\"],\n\t[\"crimson\", \"red\"],\n]);\n\nexport const DEFAULT_ACCENT_ID = \"primary\";\nconst STORAGE_KEY = \"basalt-accent\";\n\ntype AccentContextValue = {\n\taccent: string;\n\tsetAccent: (id: string) => void;\n\tswatches: readonly AccentSwatch[];\n};\n\nconst AccentContext = createContext<AccentContextValue | null>(null);\n\nexport function accentSwatchById(id: string | null | undefined): AccentSwatch {\n\tconst normalized = LEGACY_ACCENT_IDS.get(id ?? \"\") ?? id;\n\treturn ACCENT_SWATCHES.find((swatch) => swatch.id === normalized) ?? ACCENT_SWATCHES[0];\n}\n\nfunction channel(c: number) {\n\treturn c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n}\n\nfunction parseHslChannels(hsl: string): [number, number, number] {\n\tconst [hue, sat, light] = hsl.trim().split(/\\s+/);\n\tconst h = Number(hue);\n\tconst s = Number(sat.replace(\"%\", \"\")) / 100;\n\tconst l = Number(light.replace(\"%\", \"\")) / 100;\n\treturn [h, s, l];\n}\n\nfunction hslToRgbChannels(h: number, s: number, l: number): [number, number, number] {\n\tconst k = (n: number) => (n + h / 30) % 12;\n\tconst a = s * Math.min(l, 1 - l);\n\tconst f = (n: number) => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));\n\treturn [255 * f(0), 255 * f(8), 255 * f(4)];\n}\n\nfunction relativeLuminance(rgb: [number, number, number]): number {\n\treturn (\n\t\t0.2126 * channel(rgb[0] / 255) + 0.7152 * channel(rgb[1] / 255) + 0.0722 * channel(rgb[2] / 255)\n\t);\n}\n\nfunction wcagContrast(rgbA: [number, number, number], rgbB: [number, number, number]): number {\n\tconst lA = relativeLuminance(rgbA);\n\tconst lB = relativeLuminance(rgbB);\n\treturn (Math.max(lA, lB) + 0.05) / (Math.min(lA, lB) + 0.05);\n}\n\nconst DARK_TEXT_RGB: [number, number, number] = [26, 26, 26]; // 0 0% 10%\nconst WHITE_TEXT_RGB: [number, number, number] = [255, 255, 255]; // 0 0% 100%\n\nconst LIGHT_SURFACES_RGB: [number, number, number][] = [\n\t[238, 239, 242], // background\n\t[246, 247, 248], // card\n\t[252, 252, 253], // secondary\n\t[255, 255, 255], // bright\n];\n\nconst DARK_SURFACES_RGB: [number, number, number][] = [\n\t[23, 23, 23], // background\n\t[27, 27, 27], // card\n\t[31, 31, 31], // secondary\n\t[36, 36, 36], // bright\n];\n\nfunction compositeRgb(\n\ttop: [number, number, number, number],\n\tbottom: [number, number, number],\n): [number, number, number] {\n\treturn [\n\t\ttop[0] * top[3] + bottom[0] * (1 - top[3]),\n\t\ttop[1] * top[3] + bottom[1] * (1 - top[3]),\n\t\ttop[2] * top[3] + bottom[2] * (1 - top[3]),\n\t];\n}\n\nfunction deriveSemanticPrimary(swatch: AccentSwatch, dark: boolean): string {\n\tconst [h, s, origL] = parseHslChannels(dark ? swatch.dark : swatch.light);\n\tconst targetSurfaces = dark ? DARK_SURFACES_RGB : LIGHT_SURFACES_RGB;\n\tconst foreground = dark ? DARK_TEXT_RGB : WHITE_TEXT_RGB;\n\tconst start = dark\n\t\t? Math.max(Math.round(origL * 100), 45)\n\t\t: Math.min(Math.round(origL * 100), 60);\n\n\tfor (let l = start; dark ? l <= 85 : l >= 15; l += dark ? 1 : -1) {\n\t\tconst rgb = hslToRgbChannels(h, s, l / 100);\n\t\tconst minTextR = Math.min(...targetSurfaces.map((bg) => wcagContrast(rgb, bg)));\n\t\tif (minTextR < 4.55) {\n\t\t\tcontinue;\n\t\t}\n\t\tif (wcagContrast(rgb, foreground) < 4.55) {\n\t\t\tcontinue;\n\t\t}\n\t\tlet hoverOk = true;\n\t\tfor (const bg of targetSurfaces) {\n\t\t\tconst hoverBg = compositeRgb([...rgb, 0.9], bg);\n\t\t\tif (wcagContrast(hoverBg, foreground) < 4.55) {\n\t\t\t\thoverOk = false;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t\tif (hoverOk) {\n\t\t\treturn `${h} ${Math.round(s * 100)}% ${l}%`;\n\t\t}\n\t}\n\treturn dark ? swatch.dark : swatch.light;\n}\n\nexport function accentForeground(hsl: string) {\n\tconst [h, s, l] = parseHslChannels(hsl);\n\tconst rgb = hslToRgbChannels(h, s, l);\n\tconst contrastWhite = wcagContrast(rgb, WHITE_TEXT_RGB);\n\tconst contrastDark = wcagContrast(rgb, DARK_TEXT_RGB);\n\treturn contrastDark >= contrastWhite ? (\"0 0% 10%\" as const) : (\"0 0% 100%\" as const);\n}\n\nexport function applyAccent(id: string, dark = false) {\n\tif (typeof document === \"undefined\") {\n\t\treturn;\n\t}\n\tapplySwatch(accentSwatchById(id), dark);\n}\n\nfunction applySwatch(swatch: AccentSwatch, dark: boolean) {\n\tconst semanticPrimary = deriveSemanticPrimary(swatch, dark);\n\tconst root = document.documentElement;\n\troot.style.setProperty(\"--basalt-primary\", semanticPrimary);\n\troot.style.setProperty(\"--basalt-primary-foreground\", accentForeground(semanticPrimary));\n\troot.style.setProperty(\"--basalt-ring\", semanticPrimary);\n\troot.dataset.accent = swatch.id;\n}\n\nexport interface AccentProviderProps {\n\t/** Color overrides for the twelve preset IDs, using HSL channels (for example `204 88% 62%`).\n\t * Invalid pairs and unknown IDs are ignored. Persistence belongs to the application.\n\t * Chart colors remain fixed. */\n\tpaletteOverrides?: Readonly<Record<string, { light: string; dark: string }>>;\n\t/**\n\t * Application components wrapped by the accent context.\n\t */\n\tchildren: ReactNode;\n\t/**\n\t * Storage key used for accent persistence.\n\t * @default \"basalt-accent\"\n\t */\n\tstorageKey?: string;\n\t/**\n\t * Initial accent identifier used when no stored preference exists or during SSR.\n\t * @default \"primary\"\n\t */\n\tdefaultAccent?: string;\n\t/**\n\t * Whether to persist accent changes to localStorage.\n\t * If false, localStorage is never read or written.\n\t * @default true\n\t */\n\tpersist?: boolean;\n\t/**\n\t * Controlled accent identifier. When provided, the provider acts as a controlled component\n\t * and internal state is driven by this prop.\n\t */\n\taccent?: string;\n\t/**\n\t * Callback fired when accent change is requested.\n\t * In controlled mode, callers are responsible for updating `accent`.\n\t */\n\tonAccentChange?: (accent: string) => void;\n\t/**\n\t * Whether to apply accent CSS variables and data-accent attribute to document.documentElement.\n\t * Set to false when a host theme system manages CSS variables directly.\n\t * @default true\n\t */\n\tapplyToDocument?: boolean;\n}\n\nfunction isValidAccentId(value: unknown): value is string {\n\treturn (\n\t\ttypeof value === \"string\" &&\n\t\t(ACCENT_SWATCHES.some((s) => s.id === value) || LEGACY_ACCENT_IDS.has(value))\n\t);\n}\n\nfunction validHsl(value: unknown): value is string {\n\tif (typeof value !== \"string\" || !/^\\d+(?:\\.\\d+)?\\s+\\d+(?:\\.\\d+)?%\\s+\\d+(?:\\.\\d+)?%$/.test(value))\n\t\treturn false;\n\tconst [h, s, l] = parseHslChannels(value);\n\treturn h <= 360 && s <= 1 && l <= 1;\n}\n\nfunction isDarkMode(): boolean {\n\tif (typeof document === \"undefined\") {\n\t\treturn false;\n\t}\n\treturn document.documentElement.classList.contains(\"dark\");\n}\n\nexport function AccentProvider({\n\tchildren,\n\tpaletteOverrides,\n\tstorageKey = STORAGE_KEY,\n\tdefaultAccent = DEFAULT_ACCENT_ID,\n\tpersist = true,\n\taccent: controlledAccent,\n\tonAccentChange,\n\tapplyToDocument = true,\n}: AccentProviderProps) {\n\tconst isControlled = controlledAccent !== undefined;\n\tconst swatches = useMemo(\n\t\t() =>\n\t\t\tACCENT_SWATCHES.map((swatch) => {\n\t\t\t\tconst override = paletteOverrides?.[swatch.id];\n\t\t\t\treturn override && validHsl(override.light) && validHsl(override.dark)\n\t\t\t\t\t? { ...swatch, light: override.light, dark: override.dark }\n\t\t\t\t\t: swatch;\n\t\t\t}),\n\t\t[paletteOverrides],\n\t);\n\n\tconst [store] = useState(() =>\n\t\tcreatePreferenceStore({\n\t\t\tstorageKey,\n\t\t\tdefaultValue: defaultAccent,\n\t\t\tpersist,\n\t\t\tisValid: isValidAccentId,\n\t\t\tnormalize: (value) => accentSwatchById(value).id,\n\t\t\teventName: \"basalt:accent-change\",\n\t\t}),\n\t);\n\n\tuseEffect(() => {\n\t\tstore.updateConfig({ storageKey, defaultValue: defaultAccent, persist });\n\t}, [store, storageKey, defaultAccent, persist]);\n\n\tconst getServerSnapshot = useCallback(() => accentSwatchById(defaultAccent).id, [defaultAccent]);\n\n\tconst storeAccent = useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot);\n\n\tconst currentAccent = isControlled ? accentSwatchById(controlledAccent).id : storeAccent;\n\n\tuseEffect(() => {\n\t\tif (!applyToDocument || typeof document === \"undefined\") {\n\t\t\treturn;\n\t\t}\n\t\tconst apply = () => {\n\t\t\tconst dark = isDarkMode();\n\t\t\tfor (const swatch of swatches)\n\t\t\t\tdocument.documentElement.style.setProperty(swatch.token, dark ? swatch.dark : swatch.light);\n\t\t\tapplySwatch(swatches.find((swatch) => swatch.id === currentAccent) ?? swatches[0], dark);\n\t\t};\n\t\tapply();\n\t\tconst observer = new MutationObserver(apply);\n\t\tobserver.observe(document.documentElement, { attributes: true, attributeFilter: [\"class\"] });\n\t\treturn () => observer.disconnect();\n\t}, [currentAccent, applyToDocument, swatches]);\n\n\tconst setAccent = useCallback(\n\t\t(next: string) => {\n\t\t\tconst validId = accentSwatchById(next).id;\n\t\t\tif (isControlled) {\n\t\t\t\tonAccentChange?.(validId);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tstore.setValue(validId);\n\t\t\tonAccentChange?.(validId);\n\t\t},\n\t\t[isControlled, onAccentChange, store],\n\t);\n\n\tconst value = useMemo(\n\t\t() => ({ accent: currentAccent, setAccent, swatches }),\n\t\t[currentAccent, setAccent, swatches],\n\t);\n\treturn <AccentContext.Provider value={value}>{children}</AccentContext.Provider>;\n}\n\nexport function useAccent() {\n\tconst ctx = useContext(AccentContext);\n\tif (!ctx) {\n\t\tthrow new Error(\"useAccent must be used within AccentProvider\");\n\t}\n\treturn ctx;\n}\n"],"mappings":"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"}
+{"version":3,"file":"accent.js","names":["ACCENT_SWATCHES","LEGACY_ACCENT_IDS","DEFAULT_ACCENT_ID","STORAGE_KEY","AccentContext","createContext","accentSwatchById","normalized","id","swatch","channel","c","parseHslChannels","hue","sat","light","hsl","hslToRgbChannels","k","n","h","a","s","l","f","relativeLuminance","rgb","wcagContrast","lA","rgbA","lB","rgbB","DARK_TEXT_RGB","WHITE_TEXT_RGB","LIGHT_SURFACES_RGB","DARK_SURFACES_RGB","compositeRgb","top","bottom","deriveSemanticPrimary","origL","dark","targetSurfaces","foreground","start","bg","hoverOk","accentForeground","contrastWhite","applyAccent","applySwatch","semanticPrimary","root","isValidAccentId","value","validHsl","isDarkMode","AccentProvider","controlledAccent","isControlled","swatches","useMemo","override","paletteOverrides","store","useState","createPreferenceStore","defaultAccent","storageKey","persist","getServerSnapshot","useCallback","storeAccent","useSyncExternalStore","currentAccent","applyToDocument","apply","observer","setAccent","validId","next","onAccentChange","useAccent","ctx","useContext"],"sources":["../../src/providers/accent.tsx"],"sourcesContent":["import {\n\tcreateContext,\n\ttype ReactNode,\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseState,\n\tuseSyncExternalStore,\n} from \"react\";\nimport { createPreferenceStore } from \"../utils/preference-store\";\n\nexport type AccentSwatch = {\n\tid: string;\n\tlabel: string;\n\ttoken: string;\n\tlight: string;\n\tdark: string;\n};\n\n/** Twelve candy accents inspired by the translucent iMac and iPhone 5C finishes. */\nexport const ACCENT_SWATCHES: readonly AccentSwatch[] = [\n\t{\n\t\tid: \"primary\",\n\t\tlabel: \"Blue\",\n\t\ttoken: \"--basalt-accent-1\",\n\t\tlight: \"204 88% 62%\",\n\t\tdark: \"204 90% 70%\",\n\t},\n\t{\n\t\tid: \"sky\",\n\t\tlabel: \"Ice\",\n\t\ttoken: \"--basalt-accent-2\",\n\t\tlight: \"191 79% 70%\",\n\t\tdark: \"191 79% 74%\",\n\t},\n\t{\n\t\tid: \"teal\",\n\t\tlabel: \"Bondi\",\n\t\ttoken: \"--basalt-accent-3\",\n\t\tlight: \"182 62% 47%\",\n\t\tdark: \"182 62% 63%\",\n\t},\n\t{\n\t\tid: \"green\",\n\t\tlabel: \"Green\",\n\t\ttoken: \"--basalt-accent-4\",\n\t\tlight: \"113 58% 62%\",\n\t\tdark: \"113 58% 70%\",\n\t},\n\t{\n\t\tid: \"lime\",\n\t\tlabel: \"Lime\",\n\t\ttoken: \"--basalt-accent-5\",\n\t\tlight: \"79 70% 64%\",\n\t\tdark: \"79 70% 70%\",\n\t},\n\t{\n\t\tid: \"amber\",\n\t\tlabel: \"Yellow\",\n\t\ttoken: \"--basalt-accent-6\",\n\t\tlight: \"49 100% 69%\",\n\t\tdark: \"49 100% 73%\",\n\t},\n\t{\n\t\tid: \"orange\",\n\t\tlabel: \"Tangerine\",\n\t\ttoken: \"--basalt-accent-7\",\n\t\tlight: \"27 95% 65%\",\n\t\tdark: \"27 95% 72%\",\n\t},\n\t{\n\t\tid: \"red\",\n\t\tlabel: \"Strawberry\",\n\t\ttoken: \"--basalt-accent-8\",\n\t\tlight: \"5 85% 66%\",\n\t\tdark: \"5 85% 73%\",\n\t},\n\t{\n\t\tid: \"rose\",\n\t\tlabel: \"Pink\",\n\t\ttoken: \"--basalt-accent-9\",\n\t\tlight: \"345 88% 72%\",\n\t\tdark: \"345 88% 77%\",\n\t},\n\t{\n\t\tid: \"purple\",\n\t\tlabel: \"Grape\",\n\t\ttoken: \"--basalt-accent-10\",\n\t\tlight: \"280 53% 71%\",\n\t\tdark: \"280 53% 77%\",\n\t},\n\t{\n\t\tid: \"indigo\",\n\t\tlabel: \"Blueberry\",\n\t\ttoken: \"--basalt-accent-11\",\n\t\tlight: \"237 66% 69%\",\n\t\tdark: \"237 66% 77%\",\n\t},\n\t{\n\t\tid: \"gray\",\n\t\tlabel: \"Pearl\",\n\t\ttoken: \"--basalt-accent-12\",\n\t\tlight: \"210 20% 87%\",\n\t\tdark: \"210 20% 88%\",\n\t},\n];\n\nconst LEGACY_ACCENT_IDS = new Map<string, string>([\n\t[\"jade\", \"teal\"],\n\t[\"vermilion\", \"red\"],\n\t[\"magenta\", \"rose\"],\n\t[\"orchid\", \"purple\"],\n\t[\"cobalt\", \"indigo\"],\n\t[\"steel\", \"primary\"],\n\t[\"cadet\", \"sky\"],\n\t[\"seafoam\", \"teal\"],\n\t[\"olive\", \"lime\"],\n\t[\"gold\", \"amber\"],\n\t[\"tangerine\", \"orange\"],\n\t[\"crimson\", \"red\"],\n]);\n\nexport const DEFAULT_ACCENT_ID = \"primary\";\nconst STORAGE_KEY = \"basalt-accent\";\n\ntype AccentContextValue = {\n\taccent: string;\n\tsetAccent: (id: string) => void;\n\tswatches: readonly AccentSwatch[];\n};\n\nconst AccentContext = createContext<AccentContextValue | null>(null);\n\nexport function accentSwatchById(id: string | null | undefined): AccentSwatch {\n\tconst normalized = LEGACY_ACCENT_IDS.get(id ?? \"\") ?? id;\n\treturn ACCENT_SWATCHES.find((swatch) => swatch.id === normalized) ?? ACCENT_SWATCHES[0];\n}\n\nfunction channel(c: number) {\n\treturn c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n}\n\nfunction parseHslChannels(hsl: string): [number, number, number] {\n\tconst [hue, sat, light] = hsl.trim().split(/\\s+/);\n\tconst h = Number(hue);\n\tconst s = Number(sat.replace(\"%\", \"\")) / 100;\n\tconst l = Number(light.replace(\"%\", \"\")) / 100;\n\treturn [h, s, l];\n}\n\nfunction hslToRgbChannels(h: number, s: number, l: number): [number, number, number] {\n\tconst k = (n: number) => (n + h / 30) % 12;\n\tconst a = s * Math.min(l, 1 - l);\n\tconst f = (n: number) => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));\n\treturn [255 * f(0), 255 * f(8), 255 * f(4)];\n}\n\nfunction relativeLuminance(rgb: [number, number, number]): number {\n\treturn (\n\t\t0.2126 * channel(rgb[0] / 255) + 0.7152 * channel(rgb[1] / 255) + 0.0722 * channel(rgb[2] / 255)\n\t);\n}\n\nfunction wcagContrast(rgbA: [number, number, number], rgbB: [number, number, number]): number {\n\tconst lA = relativeLuminance(rgbA);\n\tconst lB = relativeLuminance(rgbB);\n\treturn (Math.max(lA, lB) + 0.05) / (Math.min(lA, lB) + 0.05);\n}\n\nconst DARK_TEXT_RGB: [number, number, number] = [26, 26, 26]; // 0 0% 10%\nconst WHITE_TEXT_RGB: [number, number, number] = [255, 255, 255]; // 0 0% 100%\n\nconst LIGHT_SURFACES_RGB: [number, number, number][] = [\n\t[238, 239, 242], // background\n\t[246, 247, 248], // card\n\t[252, 252, 253], // secondary\n\t[255, 255, 255], // bright\n];\n\nconst DARK_SURFACES_RGB: [number, number, number][] = [\n\t[23, 23, 23], // background\n\t[27, 27, 27], // card\n\t[31, 31, 31], // secondary\n\t[36, 36, 36], // bright\n];\n\nfunction compositeRgb(\n\ttop: [number, number, number, number],\n\tbottom: [number, number, number],\n): [number, number, number] {\n\treturn [\n\t\ttop[0] * top[3] + bottom[0] * (1 - top[3]),\n\t\ttop[1] * top[3] + bottom[1] * (1 - top[3]),\n\t\ttop[2] * top[3] + bottom[2] * (1 - top[3]),\n\t];\n}\n\nfunction deriveSemanticPrimary(swatch: AccentSwatch, dark: boolean): string {\n\tconst [h, s, origL] = parseHslChannels(dark ? swatch.dark : swatch.light);\n\tconst targetSurfaces = dark ? DARK_SURFACES_RGB : LIGHT_SURFACES_RGB;\n\tconst foreground = dark ? DARK_TEXT_RGB : WHITE_TEXT_RGB;\n\tconst start = dark\n\t\t? Math.max(Math.round(origL * 100), 45)\n\t\t: Math.min(Math.round(origL * 100), 60);\n\n\tfor (let l = start; dark ? l <= 85 : l >= 15; l += dark ? 1 : -1) {\n\t\tconst rgb = hslToRgbChannels(h, s, l / 100);\n\t\tconst minTextR = Math.min(...targetSurfaces.map((bg) => wcagContrast(rgb, bg)));\n\t\tif (minTextR < 4.55) {\n\t\t\tcontinue;\n\t\t}\n\t\tif (wcagContrast(rgb, foreground) < 4.55) {\n\t\t\tcontinue;\n\t\t}\n\t\tlet hoverOk = true;\n\t\tfor (const bg of targetSurfaces) {\n\t\t\tconst hoverBg = compositeRgb([...rgb, 0.9], bg);\n\t\t\tif (wcagContrast(hoverBg, foreground) < 4.55) {\n\t\t\t\thoverOk = false;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t\tif (hoverOk) {\n\t\t\treturn `${h} ${Math.round(s * 100)}% ${l}%`;\n\t\t}\n\t}\n\treturn dark ? swatch.dark : swatch.light;\n}\n\nexport function accentForeground(hsl: string) {\n\tconst [h, s, l] = parseHslChannels(hsl);\n\tconst rgb = hslToRgbChannels(h, s, l);\n\tconst contrastWhite = wcagContrast(rgb, WHITE_TEXT_RGB);\n\tconst contrastDark = wcagContrast(rgb, DARK_TEXT_RGB);\n\treturn contrastDark >= contrastWhite ? (\"0 0% 10%\" as const) : (\"0 0% 100%\" as const);\n}\n\nexport function applyAccent(id: string, dark = false) {\n\tif (typeof document === \"undefined\") {\n\t\treturn;\n\t}\n\tapplySwatch(accentSwatchById(id), dark);\n}\n\nfunction applySwatch(swatch: AccentSwatch, dark: boolean) {\n\tconst semanticPrimary = deriveSemanticPrimary(swatch, dark);\n\tconst root = document.documentElement;\n\troot.style.setProperty(\"--basalt-primary\", semanticPrimary);\n\troot.style.setProperty(\"--basalt-primary-foreground\", accentForeground(semanticPrimary));\n\troot.style.setProperty(\"--basalt-ring\", semanticPrimary);\n\troot.dataset.accent = swatch.id;\n}\n\nexport interface AccentProviderProps {\n\t/** Color overrides for the twelve preset IDs, using HSL channels (for example `204 88% 62%`).\n\t * Invalid pairs and unknown IDs are ignored. Persistence belongs to the application.\n\t * Chart colors remain fixed. */\n\tpaletteOverrides?: Readonly<Record<string, { light: string; dark: string }>>;\n\t/**\n\t * Application components wrapped by the accent context.\n\t */\n\tchildren: ReactNode;\n\t/**\n\t * Storage key used for accent persistence.\n\t * @default \"basalt-accent\"\n\t */\n\tstorageKey?: string;\n\t/**\n\t * Initial accent identifier used when no stored preference exists or during SSR.\n\t * @default \"primary\"\n\t */\n\tdefaultAccent?: string;\n\t/**\n\t * Whether to persist accent changes to localStorage.\n\t * If false, localStorage is never read or written.\n\t * @default true\n\t */\n\tpersist?: boolean;\n\t/**\n\t * Controlled accent identifier. When provided, the provider acts as a controlled component\n\t * and internal state is driven by this prop.\n\t */\n\taccent?: string;\n\t/**\n\t * Callback fired when accent change is requested.\n\t * In controlled mode, callers are responsible for updating `accent`.\n\t */\n\tonAccentChange?: (accent: string) => void;\n\t/**\n\t * Whether to apply accent CSS variables and data-accent attribute to document.documentElement.\n\t * Set to false when a host theme system manages CSS variables directly.\n\t * @default true\n\t */\n\tapplyToDocument?: boolean;\n}\n\nfunction isValidAccentId(value: unknown): value is string {\n\treturn (\n\t\ttypeof value === \"string\" &&\n\t\t(ACCENT_SWATCHES.some((s) => s.id === value) || LEGACY_ACCENT_IDS.has(value))\n\t);\n}\n\nfunction validHsl(value: unknown): value is string {\n\tif (typeof value !== \"string\" || !/^\\d+(?:\\.\\d+)?\\s+\\d+(?:\\.\\d+)?%\\s+\\d+(?:\\.\\d+)?%$/.test(value))\n\t\treturn false;\n\tconst [h, s, l] = parseHslChannels(value);\n\treturn h <= 360 && s <= 1 && l <= 1;\n}\n\nfunction isDarkMode(): boolean {\n\tif (typeof document === \"undefined\") {\n\t\treturn false;\n\t}\n\treturn document.documentElement.classList.contains(\"dark\");\n}\n\nexport function AccentProvider({\n\tchildren,\n\tpaletteOverrides,\n\tstorageKey = STORAGE_KEY,\n\tdefaultAccent = DEFAULT_ACCENT_ID,\n\tpersist = true,\n\taccent: controlledAccent,\n\tonAccentChange,\n\tapplyToDocument = true,\n}: AccentProviderProps) {\n\tconst isControlled = controlledAccent !== undefined;\n\tconst swatches = useMemo(\n\t\t() =>\n\t\t\tACCENT_SWATCHES.map((swatch) => {\n\t\t\t\tconst override = paletteOverrides?.[swatch.id];\n\t\t\t\treturn override && validHsl(override.light) && validHsl(override.dark)\n\t\t\t\t\t? { ...swatch, light: override.light, dark: override.dark }\n\t\t\t\t\t: swatch;\n\t\t\t}),\n\t\t[paletteOverrides],\n\t);\n\n\tconst [store] = useState(() =>\n\t\tcreatePreferenceStore({\n\t\t\tstorageKey,\n\t\t\tdefaultValue: defaultAccent,\n\t\t\tpersist,\n\t\t\tisValid: isValidAccentId,\n\t\t\tnormalize: (value) => accentSwatchById(value).id,\n\t\t\teventName: \"basalt:accent-change\",\n\t\t}),\n\t);\n\n\tuseEffect(() => {\n\t\tstore.updateConfig({ storageKey, defaultValue: defaultAccent, persist });\n\t}, [store, storageKey, defaultAccent, persist]);\n\n\tconst getServerSnapshot = useCallback(() => accentSwatchById(defaultAccent).id, [defaultAccent]);\n\n\tconst storeAccent = useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot);\n\n\tconst currentAccent = isControlled ? accentSwatchById(controlledAccent).id : storeAccent;\n\n\tuseEffect(() => {\n\t\tif (!applyToDocument || typeof document === \"undefined\") {\n\t\t\treturn;\n\t\t}\n\t\tconst apply = () => {\n\t\t\tconst dark = isDarkMode();\n\t\t\tfor (const swatch of swatches)\n\t\t\t\tdocument.documentElement.style.setProperty(swatch.token, dark ? swatch.dark : swatch.light);\n\t\t\tapplySwatch(swatches.find((swatch) => swatch.id === currentAccent) ?? swatches[0], dark);\n\t\t};\n\t\tapply();\n\t\tconst observer = new MutationObserver(apply);\n\t\tobserver.observe(document.documentElement, { attributes: true, attributeFilter: [\"class\"] });\n\t\treturn () => observer.disconnect();\n\t}, [currentAccent, applyToDocument, swatches]);\n\n\tconst setAccent = useCallback(\n\t\t(next: string) => {\n\t\t\tconst validId = accentSwatchById(next).id;\n\t\t\tif (isControlled) {\n\t\t\t\tonAccentChange?.(validId);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tstore.setValue(validId);\n\t\t\tonAccentChange?.(validId);\n\t\t},\n\t\t[isControlled, onAccentChange, store],\n\t);\n\n\tconst value = useMemo(\n\t\t() => ({ accent: currentAccent, setAccent, swatches }),\n\t\t[currentAccent, setAccent, swatches],\n\t);\n\treturn <AccentContext.Provider value={value}>{children}</AccentContext.Provider>;\n}\n\nexport function useAccent() {\n\tconst ctx = useContext(AccentContext);\n\tif (!ctx) {\n\t\tthrow new Error(\"useAccent must be used within AccentProvider\");\n\t}\n\treturn ctx;\n}\n"],"mappings":"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"}

package/dist/providers/link.js

@@ -1,7 +1,7 @@
 "use client";
 import { createContext as e, useContext as t } from "react";
 import { jsx as n } from "react/jsx-runtime";
-//#region src/providers/link.tsx
+// src/providers/link.tsx
 var r = e("a");
 function i({ render: e, children: t }) {
 	return /* @__PURE__ */ n(r.Provider, {
@@ -12,7 +12,6 @@ function i({ render: e, children: t }) {
 function a() {
 	return t(r);
 }
-//#endregion
 export { i as LinkProvider, a as useLinkComponent };
 
 //# sourceMappingURL=link.js.map

package/dist/providers/theme.js

@@ -2,7 +2,7 @@
 import { createPreferenceStore as e } from "../utils/preference-store.js";
 import { createContext as t, useCallback as n, useContext as r, useEffect as i, useMemo as a, useState as o, useSyncExternalStore as s } from "react";
 import { jsx as c } from "react/jsx-runtime";
-//#region src/providers/theme.tsx
+// src/providers/theme.tsx
 var l = "theme", u = t(null);
 function d(e) {
 	if (typeof document > "u") return;
@@ -49,11 +49,7 @@ function p({ children: t, storageKey: r = l, defaultTheme: p = "system", persist
 		}
 	}, [S, _]);
 	let C = n((e) => {
-		if (v) {
-			g?.(e);
-			return;
-		}
-		y.setValue(e), g?.(e);
+		v || y.setValue(e), g?.(e);
 	}, [
 		v,
 		g,
@@ -72,7 +68,6 @@ function m() {
 	if (!e) throw Error("useTheme must be used within ThemeProvider");
 	return e;
 }
-//#endregion
 export { p as ThemeProvider, m as useTheme };
 
 //# sourceMappingURL=theme.js.map

package/dist/providers/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":["STORAGE_KEY","ThemeContext","createContext","applyTheme","root","systemDark","dark","theme","isValidTheme","value","ThemeProvider","controlledTheme","isControlled","store","useState","createPreferenceStore","defaultTheme","storageKey","persist","getServerSnapshot","useCallback","storeTheme","useSyncExternalStore","currentTheme","applyToDocument","mq","onChange","setTheme","next","onThemeChange","useMemo","useTheme","ctx","useContext"],"sources":["../../src/providers/theme.tsx"],"sourcesContent":["import {\n\tcreateContext,\n\ttype ReactNode,\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseState,\n\tuseSyncExternalStore,\n} from \"react\";\nimport { createPreferenceStore } from \"../utils/preference-store\";\n\nexport type BasaltTheme = \"light\" | \"dark\" | \"system\";\n\nconst STORAGE_KEY = \"theme\";\n\ntype ThemeContextValue = {\n\ttheme: BasaltTheme;\n\tsetTheme: (theme: BasaltTheme) => void;\n};\n\nconst ThemeContext = createContext<ThemeContextValue | null>(null);\n\nfunction applyTheme(theme: BasaltTheme) {\n\tif (typeof document === \"undefined\") {\n\t\treturn;\n\t}\n\tconst root = document.documentElement;\n\tlet systemDark = false;\n\ttry {\n\t\tif (typeof window !== \"undefined\" && typeof window.matchMedia === \"function\") {\n\t\t\tsystemDark = window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n\t\t}\n\t} catch {\n\t\tsystemDark = false;\n\t}\n\tconst dark = theme === \"dark\" || (theme === \"system\" && systemDark);\n\troot.classList.toggle(\"dark\", dark);\n\troot.classList.toggle(\"light\", !dark);\n\troot.dataset.mode = dark ? \"dark\" : \"light\";\n}\n\nexport interface ThemeProviderProps {\n\t/**\n\t * Application components wrapped by the theme context.\n\t */\n\tchildren: ReactNode;\n\t/**\n\t * Storage key used for theme persistence.\n\t * @default \"theme\"\n\t */\n\tstorageKey?: string;\n\t/**\n\t * Initial theme used when no stored preference exists or during SSR.\n\t * @default \"system\"\n\t */\n\tdefaultTheme?: BasaltTheme;\n\t/**\n\t * Whether to persist theme changes to localStorage.\n\t * If false, localStorage is never read or written.\n\t * @default true\n\t */\n\tpersist?: boolean;\n\t/**\n\t * Controlled theme value. When provided, the provider acts as a controlled component\n\t * and internal state is driven by this prop.\n\t */\n\ttheme?: BasaltTheme;\n\t/**\n\t * Callback fired when theme change is requested.\n\t * In controlled mode, callers are responsible for updating `theme`.\n\t */\n\tonThemeChange?: (theme: BasaltTheme) => void;\n\t/**\n\t * Whether to apply mode classes and data-mode attribute to document.documentElement.\n\t * Set to false when a host theme system manages the document root.\n\t * @default true\n\t */\n\tapplyToDocument?: boolean;\n}\n\nfunction isValidTheme(value: unknown): value is BasaltTheme {\n\treturn value === \"light\" || value === \"dark\" || value === \"system\";\n}\n\nexport function ThemeProvider({\n\tchildren,\n\tstorageKey = STORAGE_KEY,\n\tdefaultTheme = \"system\",\n\tpersist = true,\n\ttheme: controlledTheme,\n\tonThemeChange,\n\tapplyToDocument = true,\n}: ThemeProviderProps) {\n\tconst isControlled = controlledTheme !== undefined;\n\n\tconst [store] = useState(() =>\n\t\tcreatePreferenceStore({\n\t\t\tstorageKey,\n\t\t\tdefaultValue: defaultTheme,\n\t\t\tpersist,\n\t\t\tisValid: isValidTheme,\n\t\t\tnormalize: (value) => value,\n\t\t\teventName: \"basalt:theme-change\",\n\t\t}),\n\t);\n\n\tuseEffect(() => {\n\t\tstore.updateConfig({ storageKey, defaultValue: defaultTheme, persist });\n\t}, [store, storageKey, defaultTheme, persist]);\n\n\tconst getServerSnapshot = useCallback(() => defaultTheme, [defaultTheme]);\n\n\tconst storeTheme = useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot);\n\n\tconst currentTheme = isControlled ? controlledTheme : storeTheme;\n\n\tuseEffect(() => {\n\t\tif (!applyToDocument || typeof window === \"undefined\") {\n\t\t\treturn;\n\t\t}\n\t\tapplyTheme(currentTheme);\n\t\tif (currentTheme !== \"system\") {\n\t\t\treturn;\n\t\t}\n\t\ttry {\n\t\t\tconst mq = window.matchMedia(\"(prefers-color-scheme: dark)\");\n\t\t\tconst onChange = () => applyTheme(\"system\");\n\t\t\tmq.addEventListener(\"change\", onChange);\n\t\t\treturn () => mq.removeEventListener(\"change\", onChange);\n\t\t} catch {\n\t\t\t// matchMedia not supported or restricted\n\t\t\treturn;\n\t\t}\n\t}, [currentTheme, applyToDocument]);\n\n\tconst setTheme = useCallback(\n\t\t(next: BasaltTheme) => {\n\t\t\tif (isControlled) {\n\t\t\t\tonThemeChange?.(next);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tstore.setValue(next);\n\t\t\tonThemeChange?.(next);\n\t\t},\n\t\t[isControlled, onThemeChange, store],\n\t);\n\n\tconst value = useMemo(() => ({ theme: currentTheme, setTheme }), [currentTheme, setTheme]);\n\n\treturn <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n}\n\nexport function useTheme() {\n\tconst ctx = useContext(ThemeContext);\n\tif (!ctx) {\n\t\tthrow new Error(\"useTheme must be used within ThemeProvider\");\n\t}\n\treturn ctx;\n}\n"],"mappings":";;;;;AAcA,IAAMA,IAAc,SAOdC,IAAeC,EAAwC,IAAI;AAEjE,SAASC,EAAW,GAAoB;CACvC,IAAI,OAAO,WAAa,KACvB;CAED,IAAMC,IAAO,SAAS,iBAClBC,IAAa;CACjB,IAAI;EACH,AAAI,OAAO,SAAW,OAAe,OAAO,OAAO,cAAe,eACjE,IAAa,OAAO,WAAW,8BAA8B,CAAC,CAAC;CAEjE,QAAQ;EACP,IAAa;CACd;CACA,IAAMC,IAAOC,MAAU,UAAWA,MAAU,YAAYF;CAGxD,AAFAD,EAAK,UAAU,OAAO,QAAQE,CAAI,GAClCF,EAAK,UAAU,OAAO,SAAS,CAACE,CAAI,GACpC,EAAK,QAAQ,OAAOA,IAAO,SAAS;AACrC;AAyCA,SAASE,EAAa,GAAsC;CAC3D,OAAOC,MAAU,WAAWA,MAAU,UAAUA,MAAU;AAC3D;AAEA,SAAgBC,EAAc,EAC7B,aACA,gBAAaV,GACb,kBAAe,UACf,aAAU,IACV,OAAOW,GACP,kBACA,qBAAkB,MACI;CACtB,IAAMC,IAAeD,MAAoB,KAAA,GAEnC,CAACE,KAASC,QACfC,EAAsB;EACrB;EACA,cAAcC;EACd;EACA,SAASR;EACT,YAAY,MAAUC;EACtB,WAAW;CACZ,CAAC,CACF;CAEA,QAAgB;EACf,EAAM,aAAa;GAAE;GAAY,cAAcO;GAAc;EAAQ,CAAC;CACvE,GAAG;EAACH;EAAOI;EAAYD;EAAcE;CAAO,CAAC;CAE7C,IAAMC,IAAoBC,QAAkBJ,GAAc,CAACA,CAAY,CAAC,GAElEK,IAAaC,EAAqBT,EAAM,WAAWA,EAAM,aAAaM,CAAiB,GAEvFI,IAAeX,IAAeD,IAAkBU;CAEtD,QAAgB;EACf,IAAKG,KAAmB,OAAO,SAAW,QAG1CrB,EAAWoB,CAAY,GACnBA,MAAiB,WAGrB,IAAI;GACH,IAAME,IAAK,OAAO,WAAW,8BAA8B,GACrDC,UAAiBvB,EAAW,QAAQ;GAE1C,OADAsB,EAAG,iBAAiB,UAAUC,CAAQ,SACzBD,EAAG,oBAAoB,UAAUC,CAAQ;EACvD,QAAQ;GAEP;EACD;CACD,GAAG,CAACH,GAAcC,CAAe,CAAC;CAElC,IAAMG,IAAWP,GACf,MAAsB;EACtB,IAAIR,GAAc;GACjB,IAAgBgB,CAAI;GACpB;EACD;EAEA,AADAf,EAAM,SAASe,CAAI,GACnBC,IAAgBD,CAAI;CACrB,GACA;EAAChB;EAAciB;EAAehB;CAAK,CACpC,GAEMJ,IAAQqB,SAAe;EAAE,OAAOP;EAAc;CAAS,IAAI,CAACA,GAAcI,CAAQ,CAAC;CAEzF,OAAO,kBAAC1B,EAAa,UAAd;EAA8B;EAAQ;CAAgC,CAAA;AAC9E;AAEA,SAAgB8B,IAAW;CAC1B,IAAMC,IAAMC,EAAWhC,CAAY;CACnC,IAAI,CAAC+B,GACJ,MAAU,MAAM,4CAA4C;CAE7D,OAAOA;AACR"}
+{"version":3,"file":"theme.js","names":["STORAGE_KEY","ThemeContext","createContext","applyTheme","root","systemDark","dark","theme","isValidTheme","value","ThemeProvider","controlledTheme","isControlled","store","useState","createPreferenceStore","defaultTheme","storageKey","persist","getServerSnapshot","useCallback","storeTheme","useSyncExternalStore","currentTheme","applyToDocument","mq","onChange","setTheme","next","onThemeChange","useMemo","useTheme","ctx","useContext"],"sources":["../../src/providers/theme.tsx"],"sourcesContent":["import {\n\tcreateContext,\n\ttype ReactNode,\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseState,\n\tuseSyncExternalStore,\n} from \"react\";\nimport { createPreferenceStore } from \"../utils/preference-store\";\n\nexport type BasaltTheme = \"light\" | \"dark\" | \"system\";\n\nconst STORAGE_KEY = \"theme\";\n\ntype ThemeContextValue = {\n\ttheme: BasaltTheme;\n\tsetTheme: (theme: BasaltTheme) => void;\n};\n\nconst ThemeContext = createContext<ThemeContextValue | null>(null);\n\nfunction applyTheme(theme: BasaltTheme) {\n\tif (typeof document === \"undefined\") {\n\t\treturn;\n\t}\n\tconst root = document.documentElement;\n\tlet systemDark = false;\n\ttry {\n\t\tif (typeof window !== \"undefined\" && typeof window.matchMedia === \"function\") {\n\t\t\tsystemDark = window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n\t\t}\n\t} catch {\n\t\tsystemDark = false;\n\t}\n\tconst dark = theme === \"dark\" || (theme === \"system\" && systemDark);\n\troot.classList.toggle(\"dark\", dark);\n\troot.classList.toggle(\"light\", !dark);\n\troot.dataset.mode = dark ? \"dark\" : \"light\";\n}\n\nexport interface ThemeProviderProps {\n\t/**\n\t * Application components wrapped by the theme context.\n\t */\n\tchildren: ReactNode;\n\t/**\n\t * Storage key used for theme persistence.\n\t * @default \"theme\"\n\t */\n\tstorageKey?: string;\n\t/**\n\t * Initial theme used when no stored preference exists or during SSR.\n\t * @default \"system\"\n\t */\n\tdefaultTheme?: BasaltTheme;\n\t/**\n\t * Whether to persist theme changes to localStorage.\n\t * If false, localStorage is never read or written.\n\t * @default true\n\t */\n\tpersist?: boolean;\n\t/**\n\t * Controlled theme value. When provided, the provider acts as a controlled component\n\t * and internal state is driven by this prop.\n\t */\n\ttheme?: BasaltTheme;\n\t/**\n\t * Callback fired when theme change is requested.\n\t * In controlled mode, callers are responsible for updating `theme`.\n\t */\n\tonThemeChange?: (theme: BasaltTheme) => void;\n\t/**\n\t * Whether to apply mode classes and data-mode attribute to document.documentElement.\n\t * Set to false when a host theme system manages the document root.\n\t * @default true\n\t */\n\tapplyToDocument?: boolean;\n}\n\nfunction isValidTheme(value: unknown): value is BasaltTheme {\n\treturn value === \"light\" || value === \"dark\" || value === \"system\";\n}\n\nexport function ThemeProvider({\n\tchildren,\n\tstorageKey = STORAGE_KEY,\n\tdefaultTheme = \"system\",\n\tpersist = true,\n\ttheme: controlledTheme,\n\tonThemeChange,\n\tapplyToDocument = true,\n}: ThemeProviderProps) {\n\tconst isControlled = controlledTheme !== undefined;\n\n\tconst [store] = useState(() =>\n\t\tcreatePreferenceStore({\n\t\t\tstorageKey,\n\t\t\tdefaultValue: defaultTheme,\n\t\t\tpersist,\n\t\t\tisValid: isValidTheme,\n\t\t\tnormalize: (value) => value,\n\t\t\teventName: \"basalt:theme-change\",\n\t\t}),\n\t);\n\n\tuseEffect(() => {\n\t\tstore.updateConfig({ storageKey, defaultValue: defaultTheme, persist });\n\t}, [store, storageKey, defaultTheme, persist]);\n\n\tconst getServerSnapshot = useCallback(() => defaultTheme, [defaultTheme]);\n\n\tconst storeTheme = useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot);\n\n\tconst currentTheme = isControlled ? controlledTheme : storeTheme;\n\n\tuseEffect(() => {\n\t\tif (!applyToDocument || typeof window === \"undefined\") {\n\t\t\treturn;\n\t\t}\n\t\tapplyTheme(currentTheme);\n\t\tif (currentTheme !== \"system\") {\n\t\t\treturn;\n\t\t}\n\t\ttry {\n\t\t\tconst mq = window.matchMedia(\"(prefers-color-scheme: dark)\");\n\t\t\tconst onChange = () => applyTheme(\"system\");\n\t\t\tmq.addEventListener(\"change\", onChange);\n\t\t\treturn () => mq.removeEventListener(\"change\", onChange);\n\t\t} catch {\n\t\t\t// matchMedia not supported or restricted\n\t\t\treturn;\n\t\t}\n\t}, [currentTheme, applyToDocument]);\n\n\tconst setTheme = useCallback(\n\t\t(next: BasaltTheme) => {\n\t\t\tif (isControlled) {\n\t\t\t\tonThemeChange?.(next);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tstore.setValue(next);\n\t\t\tonThemeChange?.(next);\n\t\t},\n\t\t[isControlled, onThemeChange, store],\n\t);\n\n\tconst value = useMemo(() => ({ theme: currentTheme, setTheme }), [currentTheme, setTheme]);\n\n\treturn <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n}\n\nexport function useTheme() {\n\tconst ctx = useContext(ThemeContext);\n\tif (!ctx) {\n\t\tthrow new Error(\"useTheme must be used within ThemeProvider\");\n\t}\n\treturn ctx;\n}\n"],"mappings":";;;;;AAcA,IAAMA,IAAc,SAOdC,IAAeC,EAAwC,IAAI;AAEjE,SAASC,EAAW,GAAoB;CACvC,IAAI,OAAO,WAAa,KACvB;CAED,IAAMC,IAAO,SAAS,iBAClBC,IAAa;CACjB,IAAI;EACH,AAAI,OAAO,SAAW,OAAe,OAAO,OAAO,cAAe,eACjE,IAAa,OAAO,WAAW,8BAA8B,CAAC,CAAC;CAEjE,QAAQ;EACP,IAAa;CACd;CACA,IAAMC,IAAOC,MAAU,UAAWA,MAAU,YAAYF;CAGxD,AAFAD,EAAK,UAAU,OAAO,QAAQE,CAAI,GAClCF,EAAK,UAAU,OAAO,SAAS,CAACE,CAAI,GACpC,EAAK,QAAQ,OAAOA,IAAO,SAAS;AACrC;AAyCA,SAASE,EAAa,GAAsC;CAC3D,OAAOC,MAAU,WAAWA,MAAU,UAAUA,MAAU;AAC3D;AAEA,SAAgBC,EAAc,EAC7B,aACA,gBAAaV,GACb,kBAAe,UACf,aAAU,IACV,OAAOW,GACP,kBACA,qBAAkB,MACI;CACtB,IAAMC,IAAeD,MAAoB,KAAA,GAEnC,CAACE,KAASC,QACfC,EAAsB;EACrB;EACA,cAAcC;EACd;EACA,SAASR;EACT,YAAY,MAAUC;EACtB,WAAW;CACZ,CAAC,CACF;CAEA,QAAgB;EACf,EAAM,aAAa;GAAE;GAAY,cAAcO;GAAc;EAAQ,CAAC;CACvE,GAAG;EAACH;EAAOI;EAAYD;EAAcE;CAAO,CAAC;CAE7C,IAAMC,IAAoBC,QAAkBJ,GAAc,CAACA,CAAY,CAAC,GAElEK,IAAaC,EAAqBT,EAAM,WAAWA,EAAM,aAAaM,CAAiB,GAEvFI,IAAeX,IAAeD,IAAkBU;CAEtD,QAAgB;EACf,IAAKG,KAAmB,OAAO,SAAW,QAG1CrB,EAAWoB,CAAY,GACnBA,MAAiB,WAGrB,IAAI;GACH,IAAME,IAAK,OAAO,WAAW,8BAA8B,GACrDC,UAAiBvB,EAAW,QAAQ;GAE1C,OADAsB,EAAG,iBAAiB,UAAUC,CAAQ,SACzBD,EAAG,oBAAoB,UAAUC,CAAQ;EACvD,QAAQ;GAEP;EACD;CACD,GAAG,CAACH,GAAcC,CAAe,CAAC;CAElC,IAAMG,IAAWP,GACf,MAAsB;EACtB,AAAIR,KAIJC,EAAM,SAASe,CAAI,GACnBC,IAAgBD,CAAI;CACrB,GACA;EAAChB;EAAciB;EAAehB;CAAK,CACpC,GAEMJ,IAAQqB,SAAe;EAAE,OAAOP;EAAc;CAAS,IAAI,CAACA,GAAcI,CAAQ,CAAC;CAEzF,OAAO,kBAAC1B,EAAa,UAAd;EAA8B;EAAQ;CAAgC,CAAA;AAC9E;AAEA,SAAgB8B,IAAW;CAC1B,IAAMC,IAAMC,EAAWhC,CAAY;CACnC,IAAI,CAAC+B,GACJ,MAAU,MAAM,4CAA4C;CAE7D,OAAOA;AACR"}

package/dist/styles/base.css

@@ -202,6 +202,63 @@
 }
 
 @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"]) {
@@ -209,3 +266,17 @@
 		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));
+}

package/dist/styles/standalone.css

@@ -27,6 +27,9 @@
   --basalt-space-md: 0.375rem;
   --basalt-space-lg: 0.5rem;
   --basalt-space-default: var(--basalt-space-lg);
+  --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.875rem;
@@ -144,8 +147,14 @@
 	);
   --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-sidebar-inset: var(--basalt-space-layout);
+  --basalt-space-nav-gap: var(--basalt-space-sm);
   --basalt-size-rail: 4.25rem;
+  --basalt-size-sidebar-brand-slot: calc(
+		var(--basalt-size-rail) -
+		2 *
+		var(--basalt-space-layout-lg)
+	);
 }
 :root, .light, [data-mode="light"] {
   --basalt-background: 220 14% 94%;
@@ -581,6 +590,38 @@
     min-block-size: calc(1lh + 2 * var(--basalt-space-control-y) + 2 * var(--basalt-border-width));
     padding-inline: var(--basalt-space-sm);
   }
+  .basalt-action-icon-sm {
+    inline-size: var(--basalt-size-control-sm);
+    max-inline-size: var(--basalt-size-control-sm);
+    min-inline-size: var(--basalt-size-control-sm);
+    block-size: var(--basalt-size-control-sm);
+    max-block-size: var(--basalt-size-control-sm);
+    min-block-size: var(--basalt-size-control-sm);
+    padding: 0;
+  }
+  .basalt-nav-list {
+    padding: var(--basalt-space-nav-inset);
+  }
+  .basalt-sidebar-nav {
+    padding-inline: var(--basalt-space-sidebar-inset);
+  }
+  .basalt-sidebar-brand-action {
+    flex-shrink: 0;
+    margin-inline-end: calc(-1 * var(--basalt-space-md));
+  }
+  .p-basalt-nav-inset {
+    padding: var(--basalt-space-nav-inset);
+  }
+  .px-basalt-nav-inset {
+    padding-inline: var(--basalt-space-nav-inset);
+  }
+  .px-basalt-sidebar-inset {
+    padding-inline: var(--basalt-space-sidebar-inset);
+  }
+  .size-basalt-sidebar-brand-slot {
+    inline-size: var(--basalt-size-sidebar-brand-slot);
+    block-size: var(--basalt-size-sidebar-brand-slot);
+  }
   .basalt-action-inset {
     border-width: 0;
     min-block-size: calc(1lh + 2 * var(--basalt-space-control-y));
@@ -629,14 +670,19 @@
     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;
+  [data-basalt-sidebar][data-collapsed] [data-slot="sidebar-nav"] {
+    padding-inline: calc((var(--basalt-size-rail) - var(--basalt-size-control)) / 2);
+    padding-block-start: calc(var(--basalt-size-control-sm) + var(--basalt-space-lg));
+  }
+  [data-basalt-sidebar][data-collapsed] [data-slot="sidebar-brand-action"] {
+    position: absolute;
+    inset-block-start: 100%;
+    inset-inline-start: calc(	(var(--basalt-size-sidebar-brand-slot) - var(--basalt-size-control-sm)) /	2	);
+    z-index: 1;
+    margin: 0;
   }
   @media (prefers-reduced-motion: reduce) {
     .basalt-nav-item {
@@ -1194,17 +1240,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 {
@@ -1547,6 +1636,10 @@
     width: var(--basalt-size-icon-sm);
     height: var(--basalt-size-icon-sm);
   }
+  .size-basalt-sidebar-brand-slot {
+    width: var(--basalt-size-sidebar-brand-slot);
+    height: var(--basalt-size-sidebar-brand-slot);
+  }
   .size-full {
     width: 100%;
     height: 100%;
@@ -1800,6 +1893,9 @@
   .w-basalt-rail {
     width: var(--basalt-size-rail);
   }
+  .w-basalt-sidebar-brand-slot {
+    width: var(--basalt-size-sidebar-brand-slot);
+  }
   .w-fit {
     width: fit-content;
   }
@@ -1924,6 +2020,9 @@
   .resize-none {
     resize: none;
   }
+  .scroll-p-basalt-space-sm {
+    scroll-padding: var(--basalt-space-sm);
+  }
   .list-decimal {
     list-style-type: decimal;
   }
@@ -2268,6 +2367,10 @@
   .rounded-none {
     border-radius: 0;
   }
+  .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);
     border-bottom-left-radius: var(--basalt-radius-md);
@@ -2592,9 +2695,6 @@
   .p-basalt-menu-inset {
     padding: var(--basalt-space-menu-inset);
   }
-  .p-basalt-nav-inset {
-    padding: var(--basalt-space-nav-inset);
-  }
   .p-basalt-space-lg {
     padding: var(--basalt-space-lg);
   }
@@ -2643,9 +2743,6 @@
   .px-basalt-menu-x {
     padding-inline: var(--basalt-space-menu-x);
   }
-  .px-basalt-nav-inset {
-    padding-inline: var(--basalt-space-nav-inset);
-  }
   .px-basalt-panel-x {
     padding-inline: var(--basalt-space-panel-x);
   }
@@ -2694,9 +2791,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);
   }
@@ -2745,6 +2839,9 @@
   .pt-basalt-nav-gap {
     padding-top: var(--basalt-space-nav-gap);
   }
+  .pt-basalt-space-lg {
+    padding-top: var(--basalt-space-lg);
+  }
   .pr-basalt-row-x {
     padding-right: var(--basalt-space-row-x);
   }
@@ -2757,6 +2854,9 @@
   .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);
   }
@@ -2766,9 +2866,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));
   }
@@ -3242,15 +3339,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;
@@ -3344,63 +3439,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;
   }
@@ -3515,9 +3556,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);
@@ -3530,6 +3568,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));
   }
@@ -3542,9 +3584,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);
@@ -3661,8 +3700,8 @@
     .md\:p-basalt-layout-lg {
       padding: var(--basalt-space-layout-lg);
     }
-    .md\:px-basalt-space-lg {
-      padding-inline: var(--basalt-space-lg);
+    .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));
@@ -3692,16 +3731,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);
   }