livemark 0.25.0 → 0.26.0

package/source/components/Sidebar.tsx

@@ -1,4 +1,5 @@
 import { config } from "livemark:virtual"
+import { useState } from "react"
 import { useLocation, useMatch } from "@tanstack/react-router"
 import { useHotkey } from "@tanstack/react-hotkeys"
 import { currentSection } from "../content/article.ts"
@@ -6,7 +7,6 @@ import { activeSiteLink } from "../helpers/section.ts"
 import {
   Sidebar as SidebarRoot,
   SidebarContent,
-  SidebarFooter,
   SidebarHeader,
   SidebarMenu,
   SidebarMenuButton,
@@ -14,15 +14,15 @@ import {
   SidebarRail,
   useSidebar,
 } from "../elements/sidebar.tsx"
-import { Search } from "./Search.tsx"
 import { SidebarArticles } from "./SidebarArticles.tsx"
 import { SidebarLinks } from "./SidebarLinks.tsx"
 import { SidebarPosts } from "./SidebarPosts.tsx"
 import { SidebarReleases } from "./SidebarReleases.tsx"
+import { SidebarSectionPicker } from "./SidebarSectionPicker.tsx"
 import { SidebarSections } from "./SidebarSections.tsx"
 import { SiteLink } from "./SiteLink.tsx"
 import { SiteTitle } from "./SiteTitle.tsx"
-import { Theme } from "./Theme.tsx"
+import type { RoutedSection } from "../models/section.ts"
 
 /** Application sidebar shell: header, body slot picked by section.type, footer */
 export function Sidebar(props: { withSidebar?: boolean }) {
@@ -30,13 +30,19 @@ export function Sidebar(props: { withSidebar?: boolean }) {
   const articleRoute = useMatch({ from: "/$", shouldThrow: false })
   const { toggleSidebar, isMobile } = useSidebar()
 
-  useHotkey("S", () => {
+  useHotkey("L", () => {
     if (props.withSidebar || isMobile) toggleSidebar()
   })
 
-  const section = articleRoute
+  const [browsed, setBrowsed] = useState<{ section: RoutedSection; pathname: string }>()
+
+  const routeSection = articleRoute
     ? currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
     : undefined
+  const picking = isMobile && routeSection !== undefined
+  // Browsing is scoped to the page it started on, so navigating resets it
+  const section =
+    picking && browsed?.pathname === pathname ? browsed.section : routeSection
   const siteLinkTarget = activeSiteLink(pathname, config.sections ?? [])
 
   return (
@@ -51,18 +57,25 @@ export function Sidebar(props: { withSidebar?: boolean }) {
         </SidebarMenu>
       </SidebarHeader>
       <SidebarContent>
-        <SidebarSections />
-        {props.withSidebar && section?.type === "blog" && <SidebarPosts />}
-        {props.withSidebar && section?.type === "changelog" && <SidebarReleases />}
+        {picking && section ? (
+          <SidebarSectionPicker
+            section={section}
+            onSelect={picked => setBrowsed({ section: picked, pathname })}
+          />
+        ) : (
+          <SidebarSections />
+        )}
+        {props.withSidebar && section?.type === "blog" && (
+          <SidebarPosts section={section} />
+        )}
+        {props.withSidebar && section?.type === "changelog" && (
+          <SidebarReleases section={section} />
+        )}
         {props.withSidebar &&
           section?.type !== "blog" &&
-          section?.type !== "changelog" && <SidebarArticles />}
-        <SidebarLinks />
+          section?.type !== "changelog" && <SidebarArticles section={section} />}
+        <SidebarLinks section={section} />
       </SidebarContent>
-      <SidebarFooter className="p-4 space-y-2">
-        <Search />
-        <Theme />
-      </SidebarFooter>
       <SidebarRail />
     </SidebarRoot>
   )

package/source/components/SidebarArticles.tsx

@@ -20,13 +20,14 @@ import {
 } from "../elements/sidebar.tsx"
 import { resolveArticleIcon } from "../helpers/article-icon.ts"
 import type { ArticleNode } from "../models/article.ts"
+import type { RoutedSection } from "../models/section.ts"
 
 /** Article-tree body slot for the Sidebar shell */
-export function SidebarArticles() {
+export function SidebarArticles(props: { section?: RoutedSection }) {
   const pathname = useLocation({ select: l => l.pathname })
 
   const configSections = config.sections
-  const section = currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
+  const section = props.section ?? currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
   const tree = configSections?.length
     ? (sectionArticleTrees.get(section?.prefix ?? "__default__") ?? articleTree)
     : articleTree
@@ -88,7 +89,7 @@ function NavNode(props: { node: ArticleNode; currentPath: string; depth?: number
         </Button>
         <CollapsibleTrigger
           aria-label={`Toggle ${node.label ?? node.title} submenu`}
-          className="absolute right-1 top-1.5 p-1 rounded-md hover:bg-sidebar-accent"
+          className="absolute right-1 top-1.5 p-1 rounded-control hover:bg-sidebar-accent"
         >
           <ChevronRight className="size-3.5 transition-transform group-data-[open]/collapsible:rotate-90" />
         </CollapsibleTrigger>

package/source/components/SidebarLinks.tsx

@@ -11,13 +11,14 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
 } from "../elements/sidebar.tsx"
+import type { RoutedSection } from "../models/section.ts"
 
 /** Shared Links group. Renders sidebar-positioned links always, and
  * header-positioned links only on mobile (mobile collapses all chrome
  * links into the sidebar since the header strip is hidden below `md`). */
-export function SidebarLinks() {
+export function SidebarLinks(props: { section?: RoutedSection }) {
   const pathname = useLocation({ select: l => l.pathname })
-  const section = currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
+  const section = props.section ?? currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
   const links =
     config.links?.filter(link => !link.prefix || link.prefix === section?.prefix) ?? []
 

package/source/components/SidebarPosts.tsx

@@ -17,12 +17,13 @@ import {
   SidebarMenuSubButton,
   SidebarMenuSubItem,
 } from "../elements/sidebar.tsx"
+import type { RoutedSection } from "../models/section.ts"
 
 /** Blog body slot for the Sidebar shell: All Posts / Recent Posts / RSS / Tags */
-export function SidebarPosts() {
+export function SidebarPosts(props: { section?: RoutedSection }) {
   const pathname = useLocation({ select: l => l.pathname })
 
-  const section = currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
+  const section = props.section ?? currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
   const flat = section ? (sectionFlatArticles.get(section.prefix) ?? []) : []
   const posts = flat
     .map(p => sortedArticles.find(a => a.path === p))

package/source/components/SidebarReleases.tsx

@@ -16,12 +16,13 @@ import {
   SidebarMenuSubButton,
   SidebarMenuSubItem,
 } from "../elements/sidebar.tsx"
+import type { RoutedSection } from "../models/section.ts"
 
 /** Changelog body slot for the Sidebar shell: All Releases / Recent Releases */
-export function SidebarReleases() {
+export function SidebarReleases(props: { section?: RoutedSection }) {
   const pathname = useLocation({ select: l => l.pathname })
 
-  const section = currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
+  const section = props.section ?? currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
   const flat = section ? (sectionFlatArticles.get(section.prefix) ?? []) : []
   const entries = flat
     .map(p => sortedArticles.find(a => a.path === p))

package/source/components/SidebarSectionPicker.tsx

@@ -0,0 +1,70 @@
+import { config } from "livemark:virtual"
+import { ChevronDownIcon } from "lucide-react"
+import { DynamicIcon } from "../helpers/dynamic-icon.tsx"
+import { prefixUrl } from "../helpers/prefix-url.ts"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+} from "../elements/sidebar.tsx"
+import type { RoutedSection, Section } from "../models/section.ts"
+import { MenuSheet } from "./MenuSheet.tsx"
+
+/** Mobile Sections group: a select-like trigger opening a bottom sheet that swaps the
+ * sidebar body to another section without navigating; custom sections still navigate
+ * to their URL. */
+export function SidebarSectionPicker(props: {
+  section: RoutedSection
+  onSelect: (section: RoutedSection) => void
+}) {
+  const sections = config.sections ?? []
+
+  const selectSection = (picked: Section) => {
+    if (picked.type === "custom") {
+      window.location.assign(prefixUrl(picked.url, config.base))
+      return
+    }
+    props.onSelect(picked)
+  }
+
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel className="uppercase font-mono text-xs tracking-widest">
+        Sections
+      </SidebarGroupLabel>
+      <SidebarGroupContent>
+        <MenuSheet
+          title="Choose section"
+          items={sections.map(s => ({
+            id: sectionKey(s),
+            label: s.title,
+            icon: s.icon ? <DynamicIcon name={s.icon} className="size-4" /> : undefined,
+            active: s.type !== "custom" && s.prefix === props.section.prefix,
+            onSelect: () => selectSection(s),
+          }))}
+          trigger={
+            <button
+              type="button"
+              aria-label="Section"
+              aria-haspopup="dialog"
+              className="flex h-9 w-full min-w-0 cursor-pointer items-center gap-2 rounded-control border border-input bg-transparent px-3 text-left text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 dark:bg-input/30 dark:hover:bg-input/50"
+            />
+          }
+        >
+          {props.section.icon && (
+            <DynamicIcon name={props.section.icon} className="size-4 shrink-0" />
+          )}
+          <span className="flex-1 truncate">{props.section.title}</span>
+          <ChevronDownIcon
+            className="size-4 shrink-0 text-muted-foreground"
+            aria-hidden="true"
+          />
+        </MenuSheet>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
+
+function sectionKey(section: Section) {
+  return section.type === "custom" ? `url:${section.url}` : section.prefix
+}

package/source/components/SiteTitle.tsx

@@ -14,11 +14,11 @@ export function SiteTitle() {
   const description = section?.siteDescription ?? config.description
   const logo = prefixUrl(config.logo ?? defaultLogo, config.base)
   return (
-    <div className="flex items-end gap-2.5 text-sm">
-      <img src={logo} alt={title} className="size-6.5 mb-1.25" />
-      <div className="flex flex-col gap-0.5 leading-none">
-        <span className="font-semibold">{title}</span>
-        <span className="text-xs opacity-80">{description}</span>
+    <div className="flex min-w-0 items-end gap-2.5 text-sm">
+      <img src={logo} alt={title} className="size-6.5 mb-1.25 shrink-0" />
+      <div className="flex min-w-0 flex-col gap-0.5 leading-none">
+        <span className="truncate font-semibold">{title}</span>
+        <span className="truncate text-xs opacity-80">{description}</span>
       </div>
     </div>
   )

package/source/components/SoundCloud.tsx

@@ -3,7 +3,7 @@ export function SoundCloud(props: { url: string }) {
   const src = `https://w.soundcloud.com/player/?url=${encodeURIComponent(props.url)}&color=%23ff5500&auto_play=false&hide_related=true&show_comments=false&show_user=true&show_reposts=false&show_teaser=false`
 
   return (
-    <div className="not-prose my-4 overflow-hidden rounded-lg border">
+    <div className="not-prose my-4 overflow-hidden rounded-card border">
       <iframe
         className="w-full"
         height={166}

package/source/components/TagIndex.tsx

@@ -39,7 +39,7 @@ export function TagIndex(props: { sectionPrefix: string; tag: string }) {
 
   return (
     <TocContext.Provider value={tocItems}>
-      <MobileToc items={tocItems}>
+      <MobileToc items={tocItems} title={title}>
         <PageToolbar content={content} />
       </MobileToc>
       <div className="flex flex-1 gap-10 p-4 pt-8 md:p-10">

package/source/components/Theme.tsx

@@ -1,39 +1,65 @@
-import { Moon, Sun } from "lucide-react"
+import { Moon, Sun, SunMoon } from "lucide-react"
 import { useHotkey } from "@tanstack/react-hotkeys"
+import { useState } from "react"
 import { Button } from "../elements/button.tsx"
-import { getCurrentTheme, setTheme } from "../helpers/theme.ts"
+import type { ThemePref } from "../helpers/theme.ts"
+import { getCurrentTheme, getThemePref, setTheme } from "../helpers/theme.ts"
+import { MenuSheet } from "./MenuSheet.tsx"
 
+/** Header menu choosing light, dark or system theme; "T" flips light and dark */
 export function Theme() {
-  const handleToggle = () => {
-    const oldTheme = getCurrentTheme()
-    const newTheme = oldTheme === "light" ? "dark" : "light"
-    setTheme(newTheme)
-  }
+  // Read as the menu opens: on the server there is no stored preference to read.
+  const [current, setCurrent] = useState<ThemePref>("system")
+
+  useHotkey("T", () => setTheme(getCurrentTheme() === "light" ? "dark" : "light"))
 
-  useHotkey("T", handleToggle)
+  const choose = (pref: ThemePref) => {
+    setCurrent(pref)
+    setTheme(pref)
+  }
 
   return (
-    <Button
-      variant="ghost"
-      size="sm"
-      onClick={handleToggle}
-      title="Change Theme"
-      className="w-full h-auto rounded-xl cursor-pointer text-xs font-normal justify-start text-muted-foreground bg-sidebar-accent/70 border border-border shadow-xs hover:!bg-background px-3 py-2"
+    <MenuSheet
+      title="Change theme"
+      onOpenChange={open => open && setCurrent(getThemePref())}
+      items={[
+        {
+          id: "light",
+          label: "Light",
+          icon: <Sun className="size-4 shrink-0" />,
+          active: current === "light",
+          onSelect: () => choose("light"),
+        },
+        {
+          id: "dark",
+          label: "Dark",
+          icon: <Moon className="size-4 shrink-0" />,
+          active: current === "dark",
+          onSelect: () => choose("dark"),
+        },
+        {
+          id: "system",
+          label: "System",
+          icon: <SunMoon className="size-4 shrink-0" />,
+          active: current === "system",
+          onSelect: () => choose("system"),
+        },
+      ]}
+      trigger={
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          title="Change theme"
+          aria-label="Change theme"
+          aria-keyshortcuts="T"
+          className="cursor-pointer text-muted-foreground"
+        />
+      }
     >
-      <div className="flex flex-1 gap-2 items-center dark:hidden">
-        <Sun className="size-4" />
-        <span className="flex-1 text-left">Light Theme</span>
-        <kbd className="rounded border border-border bg-muted px-1.5 py-0.5 text-[10px] font-mono">
-          T
-        </kbd>
-      </div>
-      <div className="flex-1 gap-2 items-center hidden dark:flex">
-        <Moon className="size-4" />
-        <span className="flex-1 text-left">Dark Theme</span>
-        <kbd className="rounded border border-border bg-muted px-1.5 py-0.5 text-[10px] font-mono">
-          T
-        </kbd>
-      </div>
-    </Button>
+      {/* Swapped on the `.dark` class rather than on state, so the server render
+          matches: no hydration mismatch, no wrong-icon flash. */}
+      <Sun className="size-4 dark:hidden" />
+      <Moon className="hidden size-4 dark:block" />
+    </MenuSheet>
   )
 }

package/source/components/Toc.tsx

@@ -1,6 +1,9 @@
-import { ChevronDown } from "lucide-react"
-import { useEffect, useRef, useState, type ReactNode } from "react"
+import { ChevronUp } from "lucide-react"
+import { useEffect, useRef, useState, type MouseEvent, type ReactNode } from "react"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../elements/tabs.tsx"
 import type { TocItem } from "../models/toc.ts"
+import { ChoiceList, type Choice } from "./ChoiceList.tsx"
+import { SheetPanel } from "./SheetPanel.tsx"
 
 export function Toc(props: { items: TocItem[]; children?: ReactNode }) {
   const activeId = useActiveHeading(props.items)
@@ -10,7 +13,12 @@ export function Toc(props: { items: TocItem[]; children?: ReactNode }) {
   return (
     <aside className="hidden xl:block w-56 shrink-0">
       <div className="sticky top-20 max-h-[calc(100vh-5rem)] overflow-auto [scrollbar-width:none]">
-        {props.children}
+        {props.children && (
+          <div className="mb-6">
+            <p className="text-sm font-medium mb-3">Actions</p>
+            {props.children}
+          </div>
+        )}
         {props.items.length > 0 && (
           <nav>
             <p className="text-sm font-medium mb-3">Contents</p>
@@ -34,74 +42,87 @@ export function Toc(props: { items: TocItem[]; children?: ReactNode }) {
   )
 }
 
-/** Mobile-only sticky secondary bar showing the active heading and an
- * overlay dropdown with the Contents + page Actions. */
-export function MobileToc(props: { items: TocItem[]; children?: ReactNode }) {
+const SHEET_ACTIONS =
+  "[&_[data-slot=page-toolbar]]:-mx-2 [&_[data-slot=page-toolbar]]:gap-0.5 [&_[data-slot=page-action]]:h-10 [&_[data-slot=page-action]]:gap-2.5 [&_[data-slot=page-action]]:rounded-control [&_[data-slot=page-action]]:px-2 [&_[data-slot=page-action]]:text-base [&_[data-slot=page-action]]:text-foreground [&_[data-slot=page-action]:hover]:bg-muted [&_[data-slot=page-action]_svg]:size-[18px]"
+
+/** Mobile-only sticky secondary bar showing the active heading; it opens a
+ * bottom sheet with the Contents and page Actions as two tabs. */
+export function MobileToc(props: {
+  items: TocItem[]
+  title?: string
+  children?: ReactNode
+}) {
   const activeId = useActiveHeading(props.items)
   const [open, setOpen] = useState(false)
-  const wrapperRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (!open) return
-    const onPointerDown = (event: MouseEvent) => {
-      if (!wrapperRef.current?.contains(event.target as Node)) setOpen(false)
-    }
-    const onKey = (event: KeyboardEvent) => {
-      if (event.key === "Escape") setOpen(false)
-    }
-    document.addEventListener("mousedown", onPointerDown)
-    document.addEventListener("keydown", onKey)
-    return () => {
-      document.removeEventListener("mousedown", onPointerDown)
-      document.removeEventListener("keydown", onKey)
-    }
-  }, [open])
+  const [tab, setTab] = useState(props.items.length > 0 ? "contents" : "actions")
+  const pendingUrl = useRef<string | null>(null)
 
   if (props.items.length === 0 && !props.children) return null
 
   const active = props.items.find(item => item.url.slice(1) === activeId)
   const title = active?.title ?? props.items[0]?.title ?? "Contents"
+  const choices: Choice[] = props.items.map(item => ({
+    id: item.url.slice(1),
+    label: item.title,
+    href: item.url,
+    depth: Math.max(0, item.depth - 2),
+  }))
+
+  // The sheet locks page scroll until it has closed, which swallows a native hash
+  // jump made from inside it; navigate once the close has finished.
+  const handleSelect = (choice: Choice, event: MouseEvent<HTMLElement>) => {
+    event.preventDefault()
+    pendingUrl.current = choice.href ?? null
+    setOpen(false)
+  }
+
+  const handleOpenChangeComplete = (isOpen: boolean) => {
+    const url = pendingUrl.current
+    if (isOpen || !url) return
+    pendingUrl.current = null
+    history.pushState(null, "", url)
+    document.getElementById(url.slice(1))?.scrollIntoView()
+  }
+
+  const contents = (
+    <ChoiceList choices={choices} selectedId={activeId} onSelect={handleSelect} />
+  )
 
   return (
-    <div ref={wrapperRef} className="xl:hidden sticky top-16 z-20 border-b bg-background">
+    <div className="xl:hidden sticky top-16 z-20 border-b bg-background">
       <button
         type="button"
-        onClick={() => setOpen(v => !v)}
-        aria-expanded={open}
+        onClick={() => setOpen(true)}
+        aria-haspopup="dialog"
         className="flex w-full items-center gap-3 px-4 py-3 text-sm text-muted-foreground"
       >
         <ScrollProgressRing />
         <span className="truncate flex-1 text-left">{title}</span>
-        <ChevronDown
-          className={`size-4 shrink-0 transition-transform ${open ? "rotate-180" : ""}`}
-        />
+        <ChevronUp className="size-4 shrink-0" />
       </button>
-      {open && (
-        <div className="absolute top-full left-0 right-0 mt-px max-h-[calc(100vh-8rem)] overflow-auto border-b bg-background shadow-md animate-in slide-in-from-top-2 fade-in-0 duration-200">
-          <div className="space-y-4 px-4 pt-4 pb-4">
-            {props.children}
-            {props.items.length > 0 && (
-              <nav>
-                <p className="mb-2 text-sm font-medium">Contents</p>
-                <ul className="border-l border-border text-sm">
-                  {props.items.map(item => (
-                    <li key={item.url}>
-                      <a
-                        href={item.url}
-                        data-active={activeId === item.url.slice(1) || undefined}
-                        onClick={() => setOpen(false)}
-                        className={`-ms-px block border-l border-transparent py-1.5 text-muted-foreground transition-colors hover:text-foreground data-[active]:border-primary data-[active]:font-medium data-[active]:text-primary ${item.depth <= 2 ? "ps-3" : item.depth === 3 ? "ps-6" : "ps-8"}`}
-                      >
-                        {item.title}
-                      </a>
-                    </li>
-                  ))}
-                </ul>
-              </nav>
-            )}
-          </div>
-        </div>
-      )}
+      <SheetPanel
+        open={open}
+        onOpenChange={setOpen}
+        onOpenChangeComplete={handleOpenChangeComplete}
+        title={props.title ?? "On this page"}
+      >
+        {props.children && props.items.length > 0 ? (
+          <Tabs value={tab} onValueChange={value => setTab(String(value))}>
+            <TabsList className="mb-2 w-full">
+              <TabsTrigger value="contents">Contents</TabsTrigger>
+              <TabsTrigger value="actions">Actions</TabsTrigger>
+            </TabsList>
+            <TabsContent value="contents">{contents}</TabsContent>
+            <TabsContent value="actions" className={SHEET_ACTIONS}>
+              {props.children}
+            </TabsContent>
+          </Tabs>
+        ) : props.children ? (
+          <div className={SHEET_ACTIONS}>{props.children}</div>
+        ) : (
+          contents
+        )}
+      </SheetPanel>
     </div>
   )
 }

package/source/components/YouTube.tsx

@@ -1,7 +1,7 @@
 /** Renders a responsive YouTube iframe embed */
 export function YouTube(props: { id: string }) {
   return (
-    <div className="not-prose my-4 overflow-hidden rounded-lg border">
+    <div className="not-prose my-4 overflow-hidden rounded-card border">
       <div className="aspect-video">
         <iframe
           className="h-full w-full"

package/source/content-collections.ts

@@ -183,6 +183,10 @@ const articles = defineCollection({
                 light: config.codeThemeLight,
                 dark: config.codeThemeDark,
               },
+              // A fence with no or an unknown lang is otherwise skipped by Shiki and
+              // renders without line padding, theme colours or transformers.
+              defaultLanguage: "text",
+              fallbackLanguage: "text",
               // Darken catppuccin-latte's green (the colour used for strings and
               // some comments) — the theme default #40A02B lands at 3.2:1 on the
               // code-block background, below the WCAG AA 4.5:1 threshold.

package/source/elements/alert-dialog.tsx

@@ -46,7 +46,7 @@ function AlertDialogContent({
         data-slot="alert-dialog-content"
         data-size={size}
         className={cn(
-          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl bg-popover p-6 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-panel bg-popover p-6 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className,
         )}
         {...props}

package/source/elements/alert.tsx

@@ -2,7 +2,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "cn"
 
 const alertVariants = cva(
-  "grid gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
+  "grid gap-0.5 rounded-card border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
   {
     variants: {
       variant: {

package/source/elements/badge.tsx

@@ -12,6 +12,10 @@ const badgeVariants = cva(
         secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
         destructive:
           "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+        positive:
+          "bg-positive/10 [a]:hover:bg-positive/20 focus-visible:ring-positive/20 dark:focus-visible:ring-positive/40 text-positive-tint-foreground dark:bg-positive/20",
+        warning:
+          "bg-warning/10 [a]:hover:bg-warning/20 focus-visible:ring-warning/20 dark:focus-visible:ring-warning/40 text-warning-tint-foreground dark:bg-warning/20",
         outline:
           "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
         ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",

package/source/elements/button-group.tsx

@@ -6,14 +6,14 @@ import { cn } from "cn"
 import { Separator } from "./separator.tsx"
 
 const buttonGroupVariants = cva(
-  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-control [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
   {
     variants: {
       orientation: {
         horizontal:
-          "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
+          "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-control! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
         vertical:
-          "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
+          "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-control! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
       },
     },
     defaultVariants: {
@@ -48,7 +48,7 @@ function ButtonGroupText({
     props: mergeProps<"div">(
       {
         className: cn(
-          "flex items-center gap-2 rounded-md border bg-muted px-2.5 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+          "flex items-center gap-2 rounded-control border bg-muted px-2.5 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
           className,
         ),
       },