@askrjs/themes 0.0.16 → 0.0.19

package/src/components/nav/nav.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Slot } from "@askrjs/askr/foundations";
 import { currentRoute, Link, navigate } from "@askrjs/askr/router";
 import { Block } from "../block";
@@ -103,13 +104,17 @@ function renderRoutedLink(
     children,
     href: suppliedHref,
     to,
+    onPress,
     onClick,
     ref,
     class: className,
     match = "prefix",
     target,
     ...rest
-  } = props as NavLinkProps & { onClick?: (event: MouseEvent) => void };
+  } = props as NavLinkProps & {
+    onPress?: (event: Event) => void;
+    onClick?: (event: MouseEvent) => void;
+  };
   const href = to?.href ?? suppliedHref;
   if (!href) {
     throw new Error("Nav link requires href or to.");
@@ -124,6 +129,7 @@ function renderRoutedLink(
     slot === "nav-item" && resolvedSlot !== "nav-item" ? "nav-item" : undefined;
   const { "data-slot": _dataSlot, ...childRest } = rest as Record<string, unknown>;
   void _dataSlot;
+  const hasDownload = (rest as Record<string, unknown>).download !== undefined;
   const currentPathname = getReactiveCurrentPathname();
   const targetPathname = resolvePathname(href);
   const routeActive =
@@ -139,12 +145,20 @@ function renderRoutedLink(
     : {
         "data-active": undefined,
       };
-  const rendersRouterLink = targetPathname !== null && !target && typeof onClick !== "function";
+  const rendersRouterLink =
+    targetPathname !== null &&
+    !target &&
+    !hasDownload &&
+    typeof onClick !== "function" &&
+    typeof onPress !== "function";
   const childProps: NavLinkProps = to
     ? ({ ...childRest, to, target } as NavLinkProps)
     : ({ ...childRest, href, target } as NavLinkProps);
   const handleClick = (event: MouseEvent) => {
+    onPress?.(event);
+    if (event.defaultPrevented) return;
     onClick?.(event);
+    if (hasDownload) return;
 
     if (!shouldHandleClientNavigation(event, target, targetPathname)) {
       return;

package/src/components/nav/nav.types.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { JSXElement } from "@askrjs/askr/foundations";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 import type { LinkProps } from "@askrjs/askr/router";
@@ -58,6 +59,7 @@ export type NavItemAsChildProps = Omit<JSX.IntrinsicElements["a"], "children" |
 
 export type NavLinkOwnProps = NavItemOwnProps & {
   match?: NavLinkMatch;
+  onPress?: (event: Event) => void;
 };
 
 export type NavLinkProps = LinkProps & NavLinkOwnProps;

package/src/components/navbar/navbar.tsx

@@ -1,4 +1,11 @@
-import { Dropdown, DropdownTrigger } from "@askrjs/ui";
+import type { JSX } from "@askrjs/askr/jsx-runtime";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  Dropdown,
+  DropdownTrigger,
+} from "@askrjs/ui";
 import { Block } from "../block";
 import { classes } from "../_internal/classes";
 import { isJsxElement, toChildArray } from "../_internal/jsx";
@@ -70,13 +77,17 @@ export function Navbar(props: NavbarProps): JSX.Element {
     </LayoutBlock>
   );
   const collapse = hasNavContent ? (
-    <details data-slot="navbar-collapse">
-      <summary aria-label={collapseLabel} data-slot="navbar-toggle">
-        {collapseIcon}
-        <span data-slot="navbar-toggle-label">{collapseLabel}</span>
-      </summary>
-      {content}
-    </details>
+    <div data-slot="navbar-collapse">
+      <Collapsible>
+        <CollapsibleTrigger aria-label={collapseLabel} data-slot="navbar-toggle">
+          {collapseIcon}
+          <span data-slot="navbar-toggle-label">{collapseLabel}</span>
+        </CollapsibleTrigger>
+        <CollapsibleContent forceMount asChild data-slot="navbar-content">
+          {content}
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
   ) : null;
 
   return (

package/src/components/overlays/dropdown-content.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { DropdownContent as UiDropdownContent } from "@askrjs/ui";
 import type { DropdownContentAsChildProps, DropdownContentProps } from "@askrjs/ui";
 

package/src/components/page/page.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Block } from "../block";
 import { Container } from "../container";
 import type { PageProps } from "./page.types";

package/src/components/page-header/page-header.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Block } from "../block";
 import type { PageHeaderProps } from "./page-header.types";
 

package/src/components/section/section.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Block } from "../block";
 import type { SectionProps } from "./section.types";
 

package/src/components/separator/separator.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Slot } from "@askrjs/askr/foundations";
 import { mergeProps } from "../_internal/merge-props";
 import { intrinsicElement } from "../_internal/jsx";

package/src/components/separator/separator.types.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { JSXElement } from "@askrjs/askr/foundations";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 

package/src/components/sidebar/index.ts

@@ -21,6 +21,7 @@ export type {
   SidebarCollapsible,
   SidebarPartProps,
   SidebarProps,
+  SidebarRailProps,
   SidebarSide,
   SidebarTooltipSide,
   SidebarVariant,

package/src/components/sidebar/sidebar.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Slot } from "@askrjs/askr/foundations";
 import { Block } from "../block";
 import { classes } from "../_internal/classes";
@@ -143,16 +144,23 @@ export function SidebarMenuButton(props: SidebarButtonProps): JSX.Element {
 }
 
 export function SidebarMenuAction(props: SidebarButtonProps): JSX.Element {
-  const { children, class: className, tooltip, tooltipSide, type = "button", ...rest } = props;
+  const {
+    asChild,
+    children,
+    class: className,
+    tooltip,
+    tooltipSide,
+    type = "button",
+    ...rest
+  } = props;
+  const finalProps = mergeProps(rest, {
+    class: classes(className),
+    "data-slot": "sidebar-menu-action",
+    ...sidebarTooltipProps(tooltip, tooltipSide),
+  });
+  if (asChild) return <Slot asChild {...finalProps} children={children as JSX.Element} />;
   return (
-    <button
-      type={type as "button" | "submit" | "reset" | undefined}
-      {...mergeProps(rest, {
-        class: classes(className),
-        "data-slot": "sidebar-menu-action",
-        ...sidebarTooltipProps(tooltip, tooltipSide),
-      })}
-    >
+    <button type={type as "button" | "submit" | "reset" | undefined} {...finalProps}>
       {children}
     </button>
   );
@@ -162,21 +170,38 @@ export function SidebarMenuBadge(props: SidebarPartProps): JSX.Element {
   return sidebarPart(props, "sidebar-menu-badge", "span");
 }
 
-export function SidebarRail(props: SidebarPartProps): JSX.Element {
-  return sidebarPart(props, "sidebar-rail", "button");
+export function SidebarRail(props: SidebarButtonProps): JSX.Element {
+  const { asChild, children, class: className, type = "button", ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    class: classes(className),
+    "data-slot": "sidebar-rail",
+  });
+  if (asChild) return <Slot asChild {...finalProps} children={children as JSX.Element} />;
+  return (
+    <button type={type as "button" | "submit" | "reset" | undefined} {...finalProps}>
+      {children}
+    </button>
+  );
 }
 
 export function SidebarTrigger(props: SidebarButtonProps): JSX.Element {
-  const { children, class: className, tooltip, tooltipSide, type = "button", ...rest } = props;
+  const {
+    asChild,
+    children,
+    class: className,
+    tooltip,
+    tooltipSide,
+    type = "button",
+    ...rest
+  } = props;
+  const finalProps = mergeProps(rest, {
+    class: classes("btn btn-ghost btn-icon", className),
+    "data-slot": "sidebar-trigger",
+    ...sidebarTooltipProps(tooltip, tooltipSide),
+  });
+  if (asChild) return <Slot asChild {...finalProps} children={children as JSX.Element} />;
   return (
-    <button
-      type={type as "button" | "submit" | "reset" | undefined}
-      {...mergeProps(rest, {
-        class: classes("btn btn-ghost btn-icon", className),
-        "data-slot": "sidebar-trigger",
-        ...sidebarTooltipProps(tooltip, tooltipSide),
-      })}
-    >
+    <button type={type as "button" | "submit" | "reset" | undefined} {...finalProps}>
       {children}
     </button>
   );

package/src/components/sidebar/sidebar.types.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { BlockElementProps } from "../block";
 
 export type SidebarCollapsible = "offcanvas" | "icon" | "none";
@@ -26,3 +27,5 @@ export type SidebarButtonProps = JSX.IntrinsicElements["button"] & {
   tooltipSide?: SidebarTooltipSide;
   variant?: "default" | "outline";
 };
+
+export type SidebarRailProps = SidebarButtonProps;

package/src/components/skeleton/skeleton.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Slot } from "@askrjs/askr/foundations";
 import { mergeLayoutStyles } from "../_internal/block-layout";
 import { classes } from "../_internal/classes";

package/src/components/skeleton/skeleton.types.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { JSXElement } from "@askrjs/askr/foundations";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 

package/src/components/spinner/spinner.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { ProgressCircle, ProgressCircleIndicator } from "@askrjs/ui";
 import type { SpinnerProps } from "./spinner.types";
 

package/src/components/stat/stat.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { classes } from "../_internal/classes";
 import { mergeProps } from "../_internal/merge-props";
 import type { StatDescriptionProps, StatLabelProps, StatProps, StatValueProps } from "./stat.types";

package/src/components/stat/stat.types.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 
 type DivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref">;

package/src/components/text/text.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { classes } from "../_internal/classes";
 import { mergeProps } from "../_internal/merge-props";
 import { intrinsicElement } from "../_internal/jsx";

package/src/components/text/text.types.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 
 export type TextElement = "p" | "span" | "div" | "strong";

package/src/components/theme/theme.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { defineScope, getSignal, readScope, state } from "@askrjs/askr";
 import type { JSXElement } from "@askrjs/askr/foundations/structures";
 import { Button } from "@askrjs/ui";
@@ -15,6 +16,7 @@ export type ThemeOption = {
 
 export type ThemeScopeValue = {
   theme: () => ThemeName;
+  resolvedSystemTheme: () => "light" | "dark";
   setTheme: (theme: ThemeName) => void;
   themes: readonly ThemeOption[];
   storageKey: string;
@@ -66,6 +68,7 @@ export const CAT_THEME_OPTIONS: readonly ThemeOption[] = [
 const DEFAULT_STORAGE_KEY = "askr-theme";
 const STATIC_CHILDREN = Symbol.for("askr.static-children");
 const STATIC_CHILD_SLOTS_CACHE = Symbol.for("__askrStaticChildSlots");
+const documentThemeCoordinators = new WeakMap<Document, ThemeCoordinator>();
 type ThemeCoordinator = ReturnType<typeof createThemeCoordinator>;
 type InternalThemeScopeValue = ThemeScopeValue & {
   readonly coordinator: ThemeCoordinator | null;
@@ -74,6 +77,7 @@ type InternalThemeScopeValue = ThemeScopeValue & {
 
 const ThemeScopeContext = defineScope<InternalThemeScopeValue>({
   theme: () => "system",
+  resolvedSystemTheme: () => "light",
   setTheme: () => undefined,
   themes: DEFAULT_THEME_OPTIONS,
   storageKey: DEFAULT_STORAGE_KEY,
@@ -99,13 +103,16 @@ export function ThemeScope(props: ThemeScopeProps): JSX.Element {
   // Browser persistence is adopted from the committed root ref, after Askr's
   // hydration verifier has accepted the server markup.
   const themeState = state<ThemeName>(defaultTheme);
+  const localResolvedSystemTheme = state<"light" | "dark">("light");
   const persistenceAdoption = state({ complete: false })();
   const currentTheme = themeState();
   const parentScope = readScope(ThemeScopeContext);
-  const ownedCoordinator = state<ThemeCoordinator>(createThemeCoordinator())();
+  const ownedCoordinator = state<ThemeCoordinator>(getDefaultThemeCoordinator())();
   const coordinator = parentScope.coordinator ?? ownedCoordinator;
   const scopeDepth = parentScope.depth + 1;
-  coordinator.register(scopeId, scopeDepth, currentTheme, scopeSignal);
+  coordinator.register(scopeId, scopeDepth, currentTheme, scopeSignal, (nextTheme) => {
+    if (themeState() !== nextTheme) themeState.set(nextTheme);
+  });
 
   const setTheme = (nextTheme: ThemeName) => {
     themeState.set(nextTheme);
@@ -113,8 +120,12 @@ export function ThemeScope(props: ThemeScopeProps): JSX.Element {
     coordinator.activate(scopeId, nextTheme);
   };
 
+  const resolvedSystemTheme = parentScope.coordinator
+    ? parentScope.resolvedSystemTheme
+    : localResolvedSystemTheme;
   const value: InternalThemeScopeValue = {
     theme: themeState,
+    resolvedSystemTheme,
     setTheme,
     themes,
     storageKey,
@@ -129,7 +140,34 @@ export function ThemeScope(props: ThemeScopeProps): JSX.Element {
         ref={
           parentScope.coordinator === null
             ? (element: HTMLElement | null) => {
-                coordinator.attach(element);
+                coordinator.attach(
+                  element,
+                  (nextTheme) => localResolvedSystemTheme.set(nextTheme),
+                  scopeSignal,
+                );
+                if (element && typeof window !== "undefined") {
+                  const onStorage = (event: StorageEvent) => {
+                    let storageMatches = event.storageArea == null;
+                    try {
+                      storageMatches ||= event.storageArea === window.localStorage;
+                    } catch {
+                      // Locked-down/private contexts may deny access to localStorage.
+                    }
+                    if (!storageMatches || event.key !== storageKey) {
+                      return;
+                    }
+                    const nextTheme = event.newValue as ThemeName | null;
+                    if (!nextTheme) return;
+                    themeState.set(nextTheme);
+                    coordinator.activate(scopeId, nextTheme);
+                  };
+                  window.addEventListener("storage", onStorage);
+                  scopeSignal.addEventListener(
+                    "abort",
+                    () => window.removeEventListener("storage", onStorage),
+                    { once: true },
+                  );
+                }
                 if (!element || persistenceAdoption.complete) return;
                 persistenceAdoption.complete = true;
                 const storedTheme = readStoredTheme(storageKey);
@@ -147,6 +185,19 @@ export function ThemeScope(props: ThemeScopeProps): JSX.Element {
   );
 }
 
+function getDefaultThemeCoordinator(): ThemeCoordinator {
+  if (typeof document === "undefined") {
+    return createThemeCoordinator();
+  }
+
+  const existing = documentThemeCoordinators.get(document);
+  if (existing) return existing;
+
+  const coordinator = createThemeCoordinator();
+  documentThemeCoordinators.set(document, coordinator);
+  return coordinator;
+}
+
 function createThemeCoordinator() {
   const scopes = new Map<
     symbol,
@@ -155,6 +206,7 @@ function createThemeCoordinator() {
       sequence: number;
       theme: ThemeName;
       signal: AbortSignal;
+      onThemeChange: (themeName: ThemeName) => void;
     }
   >();
   let nextSequence = 0;
@@ -191,17 +243,37 @@ function createThemeCoordinator() {
   };
 
   return Object.freeze({
-    attach(element: HTMLElement | null) {
+    attach(
+      element: HTMLElement | null,
+      onResolvedSystemTheme: (themeName: "light" | "dark") => void,
+      signal: AbortSignal,
+    ) {
       if (element) root = element.getRootNode();
+      if (element && typeof window !== "undefined" && typeof window.matchMedia === "function") {
+        const media = window.matchMedia("(prefers-color-scheme: dark)");
+        const update = () => onResolvedSystemTheme(media.matches ? "dark" : "light");
+        update();
+        media.addEventListener?.("change", update);
+        signal.addEventListener("abort", () => media.removeEventListener?.("change", update), {
+          once: true,
+        });
+      }
       schedule();
     },
-    register(id: symbol, depth: number, themeName: ThemeName, signal: AbortSignal) {
+    register(
+      id: symbol,
+      depth: number,
+      themeName: ThemeName,
+      signal: AbortSignal,
+      onThemeChange: (themeName: ThemeName) => void,
+    ) {
       const existing = scopes.get(id);
       scopes.set(id, {
         depth,
         sequence: existing?.sequence ?? nextSequence++,
         theme: themeName,
         signal,
+        onThemeChange,
       });
       if (!existing) {
         signal.addEventListener(
@@ -220,6 +292,13 @@ function createThemeCoordinator() {
       const scope = scopes.get(id);
       if (scope) scope.theme = themeName;
       explicitOwner = id;
+      const ownerDepth = scope?.depth;
+      for (const [scopeId, registered] of scopes) {
+        if (scopeId !== id && registered.depth === ownerDepth) {
+          registered.theme = themeName;
+          registered.onThemeChange(themeName);
+        }
+      }
       syncThemeTarget(target(), themeName);
     },
   });
@@ -282,7 +361,7 @@ export function ThemeToggle(props: ThemeToggleProps): JSX.Element {
   } = props;
 
   const currentTheme = activeTheme.theme();
-  const nextTheme = getNextTheme(currentTheme, themes, getResolvedSystemTheme());
+  const nextTheme = getNextTheme(currentTheme, themes, activeTheme.resolvedSystemTheme());
   const renderContext = { theme: currentTheme, nextTheme };
   const ariaLabel = (rest as Record<string, unknown>)["aria-label"];
   const themedIcon = resolveThemeToggleIcon(currentTheme, nextTheme, {
@@ -334,14 +413,6 @@ function getNextTheme(
   return themes[index >= 0 && index < themes.length - 1 ? index + 1 : 0]!;
 }
 
-function getResolvedSystemTheme(): "light" | "dark" {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
-    return "light";
-  }
-
-  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-}
-
 function getThemeIcon(
   theme: ThemeName,
   icons: Pick<ThemeToggleProps, "lightIcon" | "darkIcon" | "systemIcon">,

package/src/components/toolbar/toolbar.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Block } from "../block";
 import type { ToolbarProps } from "./toolbar.types";
 

package/src/components.ts

@@ -1,4 +1,11 @@
 import "./themes/default/index.css";
+import "./components/jsx-types";
+
+// Keep the UI type surface explicit. A wildcard type re-export makes the
+// generated declaration bundle claim ownership of UI-only catalog values
+// (for example DataTable), which are intentionally sourced from our catalog
+// wrappers instead.
+export type { DialogProps } from "@askrjs/ui";
 
 export {
   Accordion,
@@ -271,6 +278,7 @@ export type * from "./components/container";
 export type * from "./components/empty-state";
 export type * from "./components/field";
 export type * from "./components/footer";
+export type * from "./components/grid";
 export type * from "./components/header";
 export type * from "./components/input-group";
 export type * from "./components/main";
@@ -286,4 +294,5 @@ export type * from "./components/skeleton";
 export type * from "./components/spinner";
 export type * from "./components/toolbar";
 export type * from "./components/theme";
+export type * from "./components/text";
 export type * from "./components/catalog";

package/src/ssr.ts

@@ -0,0 +1,102 @@
+import { styleRulesForHtml } from "./components/_internal/style";
+
+const STYLE_REGISTRY_ATTR = "data-askr-style-registry";
+
+type DocumentRenderArgsLike = {
+  appHtml: string;
+  context: {
+    cspNonce?: string;
+    styles?: readonly { id: string; cssText: string }[];
+  };
+};
+
+function escapeHtmlAttribute(value: string): string {
+  return value
+    .replace(/&/g, "&")
+    .replace(/"/g, """)
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+}
+
+function escapeStyleRawText(value: string): string {
+  return value.replace(/<\/style/gi, "<\\/style");
+}
+
+function findHeadEnd(html: string): number {
+  let index = 0;
+  while (index < html.length) {
+    if (html.startsWith("<!--", index)) {
+      const commentEnd = html.indexOf("-->", index + 4);
+      index = commentEnd < 0 ? html.length : commentEnd + 3;
+      continue;
+    }
+
+    const rawTextStart = html.slice(index).match(/^<\s*(script|style|title|textarea)(?:\s|>)/i);
+    if (rawTextStart) {
+      const rawTextEndPattern = new RegExp(`</\\s*${rawTextStart[1]}\\s*>`, "ig");
+      rawTextEndPattern.lastIndex = index + rawTextStart[0].length;
+      const rawTextEnd = rawTextEndPattern.exec(html);
+      if (!rawTextEnd) return -1;
+      index = rawTextEnd.index + rawTextEnd[0].length;
+      continue;
+    }
+
+    const headEnd = html.slice(index).match(/^<\/\s*head\s*>/i);
+    if (headEnd) return index;
+    index += 1;
+  }
+  return -1;
+}
+
+function injectIntoHead(html: string, content: string): string {
+  const headEnd = findHeadEnd(html);
+  if (headEnd >= 0) {
+    return `${html.slice(0, headEnd)}${content}${html.slice(headEnd)}`;
+  }
+
+  const bodyStart = html.search(/<body(?:\s[^>]*)?>/i);
+  if (bodyStart >= 0) {
+    return `${html.slice(0, bodyStart)}<head>${content}</head>${html.slice(bodyStart)}`;
+  }
+
+  return `${content}${html}`;
+}
+
+/**
+ * Wrap an Askr SSR/SSG document renderer so generated theme rules used by the
+ * rendered app are available before hydration.
+ */
+export function withThemeStyles<TArgs extends DocumentRenderArgsLike>(
+  documentRenderer: (args: TArgs) => string,
+): (args: TArgs) => string {
+  return (args) => {
+    const documentHtml = documentRenderer(args);
+    const registeredStyles = args.context.styles;
+    const rules = registeredStyles
+      ? (() => {
+          const styles = new Map<string, string>();
+          for (const style of registeredStyles) {
+            if (!style.id || !style.cssText) {
+              throw new TypeError("Invalid SSR theme style registration.");
+            }
+            const existing = styles.get(style.id);
+            if (existing !== undefined && existing !== style.cssText) {
+              throw new RangeError(
+                `SSR style registration collision for ${JSON.stringify(style.id)}.`,
+              );
+            }
+            styles.set(style.id, style.cssText);
+          }
+          return Array.from(styles.values());
+        })()
+      : styleRulesForHtml(args.appHtml);
+    if (rules.length === 0) return documentHtml;
+
+    const nonce =
+      args.context.cspNonce === undefined
+        ? ""
+        : ` nonce="${escapeHtmlAttribute(args.context.cspNonce)}"`;
+    const registry = `<style ${STYLE_REGISTRY_ATTR}="true"${nonce}>${escapeStyleRawText(rules.join("\n"))}\n</style>`;
+    return injectIntoHead(documentHtml, registry);
+  };
+}

package/src/themes/default/styles/base/text.css

@@ -26,19 +26,19 @@
 }
 
 :where([data-slot="text"][data-tone="success"]) {
-  color: var(--ak-color-success);
+  color: var(--ak-color-success-ink);
 }
 
 :where([data-slot="text"][data-tone="warning"]) {
-  color: var(--ak-color-warning);
+  color: var(--ak-color-warning-ink);
 }
 
 :where([data-slot="text"][data-tone="danger"]) {
-  color: var(--ak-color-danger);
+  color: var(--ak-color-danger-ink);
 }
 
 :where([data-slot="text"][data-tone="info"]) {
-  color: var(--ak-color-info);
+  color: var(--ak-color-info-ink);
 }
 
 :where([data-slot="text"][data-weight="normal"]) {

package/src/themes/default/styles/display/coverage.css

@@ -6,8 +6,10 @@
 }
 
 :where([data-slot="theme-picker"]) {
+  appearance: none;
   display: inline-flex;
-  min-block-size: var(--ak-density-control-height-md);
+  block-size: var(--ak-density-control-height-md, 2.25rem);
+  min-block-size: var(--ak-density-control-height-md, 2.25rem);
   min-inline-size: min(8rem, 100%);
   max-inline-size: 100%;
   padding-inline: var(--ak-density-control-padding-x-md) 2.1rem;