@askrjs/themes 0.0.7 → 0.0.9

package/dist/components/theme/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":[],"sources":["../../../src/components/theme/theme.tsx"],"sourcesContent":["import { defineContext, readContext, state } from \"@askrjs/askr\";\nimport type { JSXElement } from \"@askrjs/askr/foundations/structures\";\nimport { resource } from \"@askrjs/askr/resources\";\nimport { Button } from \"@askrjs/ui\";\nimport type { ButtonNativeProps, PressEvent } from \"@askrjs/ui\";\n\nexport const CAT_THEME_NAMES = [\"tabby\", \"ginger\", \"tuxedo\", \"calico\", \"torty\"] as const;\n\nexport type CatThemeName = (typeof CAT_THEME_NAMES)[number];\nexport type ThemeName = \"light\" | \"dark\" | \"system\" | CatThemeName | (string & {});\n\nexport type ThemeOption = {\n  value: ThemeName;\n  label: string;\n};\n\nexport type ThemeContextValue = {\n  theme: () => ThemeName;\n  setTheme: (theme: ThemeName) => void;\n  themes: readonly ThemeOption[];\n  storageKey: string;\n};\n\nexport type ThemeProviderProps = {\n  children?: unknown;\n  defaultTheme?: ThemeName;\n  themes?: readonly ThemeOption[];\n  storageKey?: string;\n};\n\nexport type ThemePickerProps = Omit<\n  JSX.IntrinsicElements[\"select\"],\n  \"children\" | \"value\" | \"defaultValue\" | \"onChange\"\n> & {\n  themes?: readonly ThemeOption[];\n  label?: string;\n};\n\nexport type ThemeToggleRenderContext = {\n  theme: ThemeName;\n  nextTheme: ThemeName;\n};\n\nexport type ThemeToggleProps = Omit<ButtonNativeProps, \"children\" | \"onPress\"> & {\n  children?: unknown | ((context: ThemeToggleRenderContext) => unknown);\n  lightIcon?: unknown;\n  darkIcon?: unknown;\n  systemIcon?: unknown;\n  themes?: readonly ThemeName[];\n  onPress?: (event: PressEvent) => void;\n};\n\nexport const DEFAULT_THEME_OPTIONS: readonly ThemeOption[] = [\n  { value: \"system\", label: \"System\" },\n  { value: \"light\", label: \"Light\" },\n  { value: \"dark\", label: \"Dark\" },\n];\n\nexport const CAT_THEME_OPTIONS: readonly ThemeOption[] = [\n  { value: \"tabby\", label: \"Tabby\" },\n  { value: \"ginger\", label: \"Ginger\" },\n  { value: \"tuxedo\", label: \"Tuxedo\" },\n  { value: \"calico\", label: \"Calico\" },\n  { value: \"torty\", label: \"Torty\" },\n];\n\nconst DEFAULT_STORAGE_KEY = \"askr-theme\";\n\nconst ThemeContext = defineContext<ThemeContextValue>({\n  theme: () => \"system\",\n  setTheme: () => undefined,\n  themes: DEFAULT_THEME_OPTIONS,\n  storageKey: DEFAULT_STORAGE_KEY,\n});\n\nexport function useTheme(): ThemeContextValue {\n  return readContext(ThemeContext);\n}\n\nexport function ThemeProvider(props: ThemeProviderProps): JSX.Element {\n  const {\n    children,\n    defaultTheme = \"system\",\n    themes = DEFAULT_THEME_OPTIONS,\n    storageKey = DEFAULT_STORAGE_KEY,\n  } = props;\n\n  const themeState = state<ThemeName>(readStoredTheme(storageKey) ?? defaultTheme);\n\n  const setTheme = (nextTheme: ThemeName) => {\n    themeState.set(nextTheme);\n    writeStoredTheme(storageKey, nextTheme);\n    syncThemeRoot(nextTheme);\n  };\n\n  const value: ThemeContextValue = {\n    theme: themeState,\n    setTheme,\n    themes,\n    storageKey,\n  };\n\n  const currentTheme = themeState();\n\n  return (\n    <ThemeContext.Scope value={value}>\n      <ThemeRootSync theme={currentTheme} />\n      <div data-slot=\"theme-provider\">{children}</div>\n    </ThemeContext.Scope>\n  );\n}\n\nfunction ThemeRootSync(props: { theme: ThemeName }): JSX.Element | null {\n  const { theme } = props;\n\n  resource(\n    ({ signal }: { signal: AbortSignal }) => {\n      if (typeof window === \"undefined\") {\n        syncThemeRoot(theme);\n        return null;\n      }\n\n      const timeoutId = window.setTimeout(() => {\n        if (!signal.aborted) {\n          syncThemeRoot(theme);\n        }\n      }, 0);\n\n      signal.addEventListener(\n        \"abort\",\n        () => {\n          window.clearTimeout(timeoutId);\n        },\n        { once: true },\n      );\n\n      return null;\n    },\n    [theme],\n  );\n\n  return null;\n}\n\nexport function ThemePicker(props: ThemePickerProps): JSX.Element {\n  const theme = useTheme();\n  const { themes = theme.themes, label = \"Theme\", ...rest } = props;\n\n  return (\n    <select\n      {...rest}\n      aria-label={rest[\"aria-label\"] ?? label}\n      data-slot=\"theme-picker\"\n      value={theme.theme()}\n      onChange={(event: Event) => {\n        const target = event.currentTarget as HTMLSelectElement;\n        theme.setTheme(target.value as ThemeName);\n      }}\n    >\n      {themes.map((option) => (\n        <option key={option.value} value={option.value}>\n          {option.label}\n        </option>\n      ))}\n    </select>\n  );\n}\n\nexport function ThemeToggle(props: ThemeToggleProps): JSX.Element {\n  const theme = useTheme();\n  const {\n    children,\n    lightIcon,\n    darkIcon,\n    systemIcon,\n    themes = [\"light\", \"dark\"],\n    onPress,\n    ...rest\n  } = props;\n\n  const currentTheme = theme.theme();\n  const nextTheme = getNextTheme(currentTheme, themes);\n  const renderContext = { theme: currentTheme, nextTheme };\n  const ariaLabel = (rest as Record<string, unknown>)[\"aria-label\"];\n  const themedIcon = resolveThemeToggleIcon(currentTheme, nextTheme, {\n    lightIcon,\n    darkIcon,\n    systemIcon,\n  });\n  const renderedIcon = cloneThemeToggleIcon(themedIcon);\n  const content =\n    typeof children === \"function\" ? children(renderContext) : (children ?? renderedIcon);\n\n  return (\n    <Button\n      {...(rest as ButtonNativeProps)}\n      aria-label={typeof ariaLabel === \"string\" ? ariaLabel : `Switch to ${nextTheme} theme`}\n      data-theme-control=\"toggle\"\n      data-theme-choice={currentTheme}\n      data-next-theme={nextTheme}\n      onPress={(event) => {\n        onPress?.(event);\n        if (!event.defaultPrevented) theme.setTheme(nextTheme);\n      }}\n    >\n      {content}\n    </Button>\n  );\n}\n\nfunction getNextTheme(currentTheme: ThemeName, themes: readonly ThemeName[]): ThemeName {\n  if (themes.length === 0) return currentTheme;\n  const index = themes.indexOf(currentTheme);\n  return themes[index >= 0 && index < themes.length - 1 ? index + 1 : 0]!;\n}\n\nfunction getThemeIcon(\n  theme: ThemeName,\n  icons: Pick<ThemeToggleProps, \"lightIcon\" | \"darkIcon\" | \"systemIcon\">,\n): unknown {\n  if (theme === \"light\") return icons.lightIcon;\n  if (theme === \"dark\") return icons.darkIcon;\n  if (theme === \"system\") return icons.systemIcon;\n  return undefined;\n}\n\nexport function resolveThemeToggleIcon(\n  theme: ThemeName,\n  nextTheme: ThemeName,\n  icons: Pick<ThemeToggleProps, \"lightIcon\" | \"darkIcon\" | \"systemIcon\">,\n): unknown {\n  return getThemeIcon(theme, icons) ?? getThemeIcon(nextTheme, icons);\n}\n\nfunction isJSXElement(value: unknown): value is JSXElement {\n  return (\n    typeof value === \"object\" &&\n    value !== null &&\n    \"$$typeof\" in value &&\n    \"type\" in value &&\n    \"props\" in value\n  );\n}\n\nfunction cloneThemeToggleIcon(icon: unknown): unknown {\n  if (!isJSXElement(icon)) return icon;\n\n  return {\n    ...icon,\n    props: { ...(icon.props as Record<string, unknown> | undefined) },\n  };\n}\n\nfunction syncThemeRoot(themeChoice: ThemeName | null | undefined): void {\n  if (typeof document === \"undefined\") {\n    return;\n  }\n\n  const html = document.documentElement;\n\n  if (themeChoice == null) {\n    html.removeAttribute(\"data-theme\");\n    html.removeAttribute(\"data-theme-choice\");\n    return;\n  }\n\n  html.setAttribute(\"data-theme-choice\", themeChoice);\n\n  if (themeChoice === \"system\") {\n    html.removeAttribute(\"data-theme\");\n  } else {\n    html.setAttribute(\"data-theme\", themeChoice);\n  }\n}\n\nfunction readStoredTheme(storageKey: string): ThemeName | undefined {\n  if (typeof window === \"undefined\") return undefined;\n  try {\n    return (window.localStorage.getItem(storageKey) as ThemeName | null) ?? undefined;\n  } catch {\n    return undefined;\n  }\n}\n\nfunction writeStoredTheme(storageKey: string, theme: ThemeName): void {\n  if (typeof window === \"undefined\") return;\n  try {\n    window.localStorage.setItem(storageKey, theme);\n  } catch {\n    // Storage can be unavailable in private or locked-down browser contexts.\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"theme.js","names":[],"sources":["../../../src/components/theme/theme.tsx"],"sourcesContent":["import { defineContext, getSignal, readContext, state } from \"@askrjs/askr\";\nimport type { JSXElement } from \"@askrjs/askr/foundations/structures\";\nimport { resource } from \"@askrjs/askr/resources\";\nimport { Button } from \"@askrjs/ui\";\nimport type { ButtonNativeProps, PressEvent } from \"@askrjs/ui\";\n\nexport const CAT_THEME_NAMES = [\"tabby\", \"ginger\", \"tuxedo\", \"calico\", \"torty\"] as const;\n\nexport type CatThemeName = (typeof CAT_THEME_NAMES)[number];\nexport type ThemeName = \"light\" | \"dark\" | \"system\" | CatThemeName | (string & {});\n\nexport type ThemeOption = {\n  value: ThemeName;\n  label: string;\n};\n\nexport type ThemeContextValue = {\n  theme: () => ThemeName;\n  setTheme: (theme: ThemeName) => void;\n  themes: readonly ThemeOption[];\n  storageKey: string;\n};\n\nexport type ThemeProviderProps = {\n  children?: unknown;\n  defaultTheme?: ThemeName;\n  themes?: readonly ThemeOption[];\n  storageKey?: string;\n};\n\nexport type ThemePickerProps = Omit<\n  JSX.IntrinsicElements[\"select\"],\n  \"children\" | \"value\" | \"defaultValue\" | \"onChange\"\n> & {\n  themes?: readonly ThemeOption[];\n  label?: string;\n};\n\nexport type ThemeToggleRenderContext = {\n  theme: ThemeName;\n  nextTheme: ThemeName;\n};\n\nexport type ThemeToggleProps = Omit<ButtonNativeProps, \"children\" | \"onPress\"> & {\n  children?: unknown | ((context: ThemeToggleRenderContext) => unknown);\n  lightIcon?: unknown;\n  darkIcon?: unknown;\n  systemIcon?: unknown;\n  themes?: readonly ThemeName[];\n  onPress?: (event: PressEvent) => void;\n};\n\nexport const DEFAULT_THEME_OPTIONS: readonly ThemeOption[] = [\n  { value: \"system\", label: \"System\" },\n  { value: \"light\", label: \"Light\" },\n  { value: \"dark\", label: \"Dark\" },\n];\n\nexport const CAT_THEME_OPTIONS: readonly ThemeOption[] = [\n  { value: \"tabby\", label: \"Tabby\" },\n  { value: \"ginger\", label: \"Ginger\" },\n  { value: \"tuxedo\", label: \"Tuxedo\" },\n  { value: \"calico\", label: \"Calico\" },\n  { value: \"torty\", label: \"Torty\" },\n];\n\nconst DEFAULT_STORAGE_KEY = \"askr-theme\";\n// Passive mount sync should not overwrite a newer user/provider-initiated change.\nlet rootThemeRevision = 0;\nlet explicitRootThemeOwner: symbol | undefined;\nconst registeredProviderSignals = new WeakSet<AbortSignal>();\n\nconst ThemeContext = defineContext<ThemeContextValue>({\n  theme: () => \"system\",\n  setTheme: () => undefined,\n  themes: DEFAULT_THEME_OPTIONS,\n  storageKey: DEFAULT_STORAGE_KEY,\n});\n\nexport function useTheme(): ThemeContextValue {\n  return readContext(ThemeContext);\n}\n\nexport function ThemeProvider(props: ThemeProviderProps): JSX.Element {\n  const {\n    children,\n    defaultTheme = \"system\",\n    themes = DEFAULT_THEME_OPTIONS,\n    storageKey = DEFAULT_STORAGE_KEY,\n  } = props;\n\n  const providerId = state<symbol>(Symbol(\"ThemeProvider\"))();\n  const providerSignal = getSignal();\n  const themeState = state<ThemeName>(readStoredTheme(storageKey) ?? defaultTheme);\n  const currentTheme = themeState();\n\n  if (!registeredProviderSignals.has(providerSignal)) {\n    registeredProviderSignals.add(providerSignal);\n    providerSignal.addEventListener(\n      \"abort\",\n      () => {\n        if (explicitRootThemeOwner === providerId) {\n          explicitRootThemeOwner = undefined;\n        }\n      },\n      { once: true },\n    );\n  }\n\n  const setTheme = (nextTheme: ThemeName) => {\n    themeState.set(nextTheme);\n    writeStoredTheme(storageKey, nextTheme);\n    explicitRootThemeOwner = providerId;\n    rootThemeRevision += 1;\n    syncThemeRoot(nextTheme);\n  };\n\n  const value: ThemeContextValue = {\n    theme: themeState,\n    setTheme,\n    themes,\n    storageKey,\n  };\n\n  return (\n    <ThemeContext.Scope value={value}>\n      <ThemeRootSync providerId={providerId} theme={currentTheme} />\n      <div data-slot=\"theme-provider\">{children}</div>\n    </ThemeContext.Scope>\n  );\n}\n\nfunction ThemeRootSync(props: { providerId: symbol; theme: ThemeName }): JSX.Element | null {\n  const { providerId, theme } = props;\n  const expectedRootThemeRevision = rootThemeRevision;\n\n  resource(\n    ({ signal }: { signal: AbortSignal }) => {\n      if (typeof window === \"undefined\") {\n        syncThemeRoot(theme);\n        return null;\n      }\n\n      const timeoutId = window.setTimeout(() => {\n        if (!signal.aborted) {\n          syncThemeRoot(theme, {\n            expectedRevision: expectedRootThemeRevision,\n            passive: true,\n            providerId,\n          });\n        }\n      }, 0);\n\n      signal.addEventListener(\n        \"abort\",\n        () => {\n          window.clearTimeout(timeoutId);\n        },\n        { once: true },\n      );\n\n      return null;\n    },\n    [theme],\n  );\n\n  return null;\n}\n\nexport function ThemePicker(props: ThemePickerProps): JSX.Element {\n  const theme = useTheme();\n  const { themes = theme.themes, label = \"Theme\", ...rest } = props;\n  const currentTheme = theme.theme();\n\n  return (\n    <select\n      {...rest}\n      aria-label={rest[\"aria-label\"] ?? label}\n      data-slot=\"theme-picker\"\n      value={currentTheme}\n      onChange={(event: Event) => {\n        const target = getThemePickerTarget(event);\n        if (target) {\n          theme.setTheme(target.value as ThemeName);\n        }\n      }}\n    >\n      {themes.map((option) => (\n        <option key={option.value} value={option.value} selected={option.value === currentTheme}>\n          {option.label}\n        </option>\n      ))}\n    </select>\n  );\n}\n\nfunction getThemePickerTarget(event: Event): HTMLSelectElement | null {\n  if (typeof HTMLSelectElement === \"undefined\") {\n    return null;\n  }\n\n  const path = typeof event.composedPath === \"function\" ? event.composedPath() : [];\n  const candidates = [event.target, event.currentTarget, ...path];\n\n  for (const candidate of candidates) {\n    if (candidate instanceof HTMLSelectElement) {\n      return candidate;\n    }\n  }\n\n  return null;\n}\n\nexport function ThemeToggle(props: ThemeToggleProps): JSX.Element {\n  const theme = useTheme();\n  const {\n    children,\n    lightIcon,\n    darkIcon,\n    systemIcon,\n    themes = [\"light\", \"dark\"],\n    onPress,\n    ...rest\n  } = props;\n\n  const currentTheme = theme.theme();\n  const nextTheme = getNextTheme(currentTheme, themes);\n  const renderContext = { theme: currentTheme, nextTheme };\n  const ariaLabel = (rest as Record<string, unknown>)[\"aria-label\"];\n  const themedIcon = resolveThemeToggleIcon(currentTheme, nextTheme, {\n    lightIcon,\n    darkIcon,\n    systemIcon,\n  });\n  const renderedIcon = cloneThemeToggleIcon(themedIcon);\n  const content =\n    typeof children === \"function\" ? children(renderContext) : (children ?? renderedIcon);\n\n  return (\n    <Button\n      {...(rest as ButtonNativeProps)}\n      aria-label={typeof ariaLabel === \"string\" ? ariaLabel : `Switch to ${nextTheme} theme`}\n      data-theme-control=\"toggle\"\n      data-theme-choice={currentTheme}\n      data-next-theme={nextTheme}\n      onPress={(event) => {\n        onPress?.(event);\n        if (!event.defaultPrevented && !Object.is(nextTheme, currentTheme)) {\n          theme.setTheme(nextTheme);\n        }\n      }}\n    >\n      <span data-slot=\"theme-toggle-content\">{content}</span>\n    </Button>\n  );\n}\n\nfunction getNextTheme(currentTheme: ThemeName, themes: readonly ThemeName[]): ThemeName {\n  if (themes.length === 0) return currentTheme;\n  const index = themes.indexOf(currentTheme);\n  return themes[index >= 0 && index < themes.length - 1 ? index + 1 : 0]!;\n}\n\nfunction getThemeIcon(\n  theme: ThemeName,\n  icons: Pick<ThemeToggleProps, \"lightIcon\" | \"darkIcon\" | \"systemIcon\">,\n): unknown {\n  if (theme === \"light\") return icons.lightIcon;\n  if (theme === \"dark\") return icons.darkIcon;\n  if (theme === \"system\") return icons.systemIcon;\n  return undefined;\n}\n\nexport function resolveThemeToggleIcon(\n  theme: ThemeName,\n  nextTheme: ThemeName,\n  icons: Pick<ThemeToggleProps, \"lightIcon\" | \"darkIcon\" | \"systemIcon\">,\n): unknown {\n  return getThemeIcon(theme, icons) ?? getThemeIcon(nextTheme, icons);\n}\n\nfunction isJSXElement(value: unknown): value is JSXElement {\n  return (\n    typeof value === \"object\" &&\n    value !== null &&\n    \"$$typeof\" in value &&\n    \"type\" in value &&\n    \"props\" in value\n  );\n}\n\nfunction cloneThemeToggleIcon(icon: unknown): unknown {\n  if (!isJSXElement(icon)) return icon;\n\n  const props = icon.props as Record<string, unknown> | undefined;\n  if (!props || Object.keys(props).length === 0) {\n    return icon;\n  }\n\n  return {\n    ...icon,\n    props: { ...props },\n  };\n}\n\nfunction syncThemeRoot(\n  themeChoice: ThemeName | null | undefined,\n  options?: { expectedRevision?: number; passive?: boolean; providerId?: symbol },\n): void {\n  if (typeof document === \"undefined\") {\n    return;\n  }\n\n  const html = document.documentElement;\n\n  if (\n    options?.passive &&\n    options.expectedRevision !== undefined &&\n    options.expectedRevision !== rootThemeRevision\n  ) {\n    return;\n  }\n\n  if (\n    options?.passive &&\n    explicitRootThemeOwner !== undefined &&\n    explicitRootThemeOwner !== options.providerId\n  ) {\n    return;\n  }\n\n  if (themeChoice == null) {\n    html.removeAttribute(\"data-theme\");\n    html.removeAttribute(\"data-theme-choice\");\n    return;\n  }\n\n  html.setAttribute(\"data-theme-choice\", themeChoice);\n\n  if (themeChoice === \"system\") {\n    html.removeAttribute(\"data-theme\");\n  } else {\n    html.setAttribute(\"data-theme\", themeChoice);\n  }\n}\n\nfunction readStoredTheme(storageKey: string): ThemeName | undefined {\n  if (typeof window === \"undefined\") return undefined;\n  try {\n    const storedTheme = window.localStorage.getItem(storageKey);\n    return storedTheme ? (storedTheme as ThemeName) : undefined;\n  } catch {\n    return undefined;\n  }\n}\n\nfunction writeStoredTheme(storageKey: string, theme: ThemeName): void {\n  if (typeof window === \"undefined\") return;\n  try {\n    window.localStorage.setItem(storageKey, theme);\n  } catch {\n    // Storage can be unavailable in private or locked-down browser contexts.\n  }\n}\n"],"mappings":"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"}

package/dist/themes/default/index.css

@@ -1648,6 +1648,7 @@
     display: flex;
     position: relative;
     overflow: hidden;
+    container-type: inline-size;
   }
 
   :where(.navbar-shell, [data-slot="navbar-shell"]) {
@@ -1779,7 +1780,7 @@
     margin-inline-start: 0;
   }
 
-  @media (width >= 48rem) {
+  @container (width >= 48rem) {
     :where(.navbar-shell, [data-slot="navbar-shell"]):has( > :where(.navbar-group[data-align="center"], [data-slot="navbar-group"][data-align="center"])) {
       align-items: center;
       column-gap: var(--ak-space-md);
@@ -2628,6 +2629,22 @@
   display: inline-flex;
 }
 
+:where([data-slot="theme-toggle-content"]) {
+  --_ak-theme-toggle-icon-size: var(--ak-theme-toggle-icon-size, var(--ak-icon-size, 1em));
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  min-inline-size: 0;
+  display: inline-flex;
+}
+
+:where([data-slot="theme-toggle-content"]) > :where([data-slot="icon"], svg) {
+  inline-size: var(--_ak-theme-toggle-icon-size);
+  block-size: var(--_ak-theme-toggle-icon-size);
+  color: currentColor;
+  flex: none;
+}
+
 :where(.btn) > :where([data-slot="icon"], svg), :where([data-slot="button"]) > :where([data-slot="icon"], svg) {
   color: currentColor;
   flex: none;
@@ -3663,16 +3680,22 @@
 }
 
 :where(.select-item, [data-slot="select-item"]) {
+  appearance: none;
+  inline-size: 100%;
   min-height: var(--ak-density-control-height-md);
   padding: 0 var(--ak-density-control-padding-x-md);
   border-radius: var(--ak-radius-md);
   color: var(--ak-color-text);
   cursor: pointer;
+  font-family: inherit;
   font-size: var(--ak-font-size-sm);
   font-weight: var(--ak-font-weight-medium);
   overflow-wrap: anywhere;
+  text-align: start;
   transition: background var(--ak-duration-fast) var(--ak-ease-standard),
     color var(--ak-duration-fast) var(--ak-ease-standard);
+  background: none;
+  border: 0;
   align-items: center;
   display: flex;
 }
@@ -4049,7 +4072,8 @@
   font-size: var(--ak-font-size-xs);
   font-weight: var(--ak-font-weight-semibold);
   letter-spacing: 0;
-  overflow-wrap: anywhere;
+  overflow-wrap: normal;
+  word-break: normal;
   align-items: center;
   gap: .35rem;
   padding: 0 .55rem;
@@ -4148,14 +4172,20 @@
 }
 
 :where(.avatar-fallback, [data-slot="avatar-fallback"]) {
+  box-sizing: border-box;
   block-size: 100%;
   inline-size: 100%;
+  min-inline-size: 0;
+  max-inline-size: 100%;
   font-size: var(--ak-font-size-sm);
   font-weight: var(--ak-font-weight-semibold);
-  overflow-wrap: anywhere;
+  overflow-wrap: normal;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   place-items: center;
   line-height: 1;
   display: inline-grid;
+  overflow: hidden;
 }
 
 :where([data-slot="separator"]) {
@@ -4232,7 +4262,9 @@
   color: var(--ak-color-text-muted);
   font-weight: var(--ak-font-weight-semibold);
   letter-spacing: .04em;
+  overflow-wrap: normal;
   text-transform: uppercase;
+  word-break: normal;
   white-space: normal;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@askrjs/themes",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "Default theme tokens, styles, and themed layout wrappers for Askr apps.",
   "keywords": [
     "askr",
@@ -124,11 +124,11 @@
   "scripts": {
     "new:theme": "node ./scripts/new-theme.js",
     "clean": "npx --yes rimraf dist node_modules",
-    "bench": "npm run bench:tier2",
+    "bench": "npm run bench:tier1 && npm run bench:tier2 && npm run bench:tier3 && npm run bench:tier4",
     "bench:tier1": "cross-env NODE_ENV=production vp test bench --run --reporter=default --config vitest.bench.tier1.config.ts",
     "bench:tier2": "cross-env NODE_ENV=production vp test bench --run --reporter=default --config vitest.bench.tier2.config.ts",
     "bench:tier3": "cross-env NODE_ENV=production vp test bench --run --reporter=default --config vitest.bench.tier3.config.ts",
-    "bench:tier4": "cross-env NODE_ENV=production vp test bench --run --reporter=default --config vitest.bench.tier4.config.ts",
+    "bench:tier4": "cross-env NODE_ENV=production vp test bench --run --reporter=default --config vitest.bench.tier4.config.ts --mode production",
     "test": "npm run test:unit && npm run test:checks && npm run test:jsdom && npm run test:browser",
     "test:unit": "vp test run -c vitest.test.unit.config.ts",
     "test:jsdom": "cross-env NODE_ENV=production vp test run -c vitest.test.jsdom.config.ts",
@@ -142,21 +142,22 @@
   "devDependencies": {
     "@askrjs/askr": ">=0.0.1 <0.1.0",
     "@askrjs/ui": ">=0.0.1 <0.1.0",
-    "@askrjs/vite": ">=0.0.2 <0.1.0",
-    "@tsdown/css": "0.22.2",
-    "@types/node": "^25.9.2",
+    "@askrjs/vite": ">=0.0.1 <0.1.0",
+    "@tsdown/css": "0.22.3",
+    "@types/node": "^26.0.0",
+    "@vitest/browser-playwright": "^4.1.9",
     "cross-env": "^10.1.0",
     "jsdom": "^29.1.1",
-    "playwright": "^1.60.0",
+    "playwright": "^1.61.0",
     "typescript": "^6.0.3",
-    "vite-plus": "^0.1.24"
+    "vite-plus": "^0.2.1"
   },
   "peerDependencies": {
     "@askrjs/askr": ">=0.0.1 <0.1.0",
-    "@askrjs/ui": ">=0.0.1 <0.1.0"
+    "@askrjs/ui": ">=0.0.10 <0.1.0"
   },
   "engines": {
     "node": ">=18"
   },
-  "packageManager": "npm@11.16.0"
+  "packageManager": "npm@11.17.0"
 }

package/src/components/_internal/jsx.ts

@@ -53,9 +53,11 @@ export function collectJsxElements(
 ): JSXElement[] {
   const result: JSXElement[] = [];
 
-  const visit = (value: unknown) => {
+  function visit(value: unknown): void {
     if (Array.isArray(value)) {
-      value.forEach(visit);
+      for (let index = 0; index < value.length; index += 1) {
+        visit(value[index]);
+      }
       return;
     }
 
@@ -68,13 +70,23 @@ export function collectJsxElements(
     }
 
     visit(value.props?.children);
-  };
+  }
 
   visit(children);
 
   return result;
 }
 
+function isEventHandlerLikeKey(key: string): boolean {
+  return key.length >= 2 && key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110;
+}
+
+function compareKeys(left: string, right: string): number {
+  if (left < right) return -1;
+  if (left > right) return 1;
+  return 0;
+}
+
 function serializeArray(value: readonly unknown[]): string {
   if (value.length === 0) {
     return "";
@@ -101,7 +113,7 @@ function serializeSerializableProps(props: Record<string, unknown>): string {
   const keys: string[] = [];
 
   for (const key of Object.keys(props)) {
-    if (key === "children" || key === "ref" || key.startsWith("on")) {
+    if (key === "children" || key === "ref" || isEventHandlerLikeKey(key)) {
       continue;
     }
 
@@ -127,14 +139,14 @@ function serializeSerializableProps(props: Record<string, unknown>): string {
   }
 
   if (keys.length === 2) {
-    if (keys[1].localeCompare(keys[0]) < 0) {
+    if (keys[1] < keys[0]) {
       [keys[0], keys[1]] = [keys[1], keys[0]];
     }
 
     return `${keys[0]}:${String(props[keys[0]])},${keys[1]}:${String(props[keys[1]])}`;
   }
 
-  keys.sort((left, right) => left.localeCompare(right));
+  keys.sort(compareKeys);
 
   let result = `${keys[0]}:${String(props[keys[0]])}`;
 

package/src/components/_internal/layout.ts

@@ -1,3 +1,5 @@
+import { serializeCssDeclarations } from "./style";
+
 /**
  * Layout helpers shared by headless layout primitives.
  */
@@ -190,7 +192,7 @@ export function mergeLayoutStyles(
     Object.assign(merged, user as Record<string, unknown>);
   }
 
-  const mergedString = objectToCssString(merged);
+  const mergedString = serializeCssDeclarations(merged);
 
   if (typeof user === "string" && user.trim()) {
     return mergedString ? `${mergedString};${user.trim()}` : user.trim();
@@ -198,14 +200,3 @@ export function mergeLayoutStyles(
 
   return mergedString || undefined;
 }
-
-function camelToKebab(s: string): string {
-  return s.replace(/([A-Z])/g, (c) => `-${c.toLowerCase()}`);
-}
-
-function objectToCssString(styles: Record<string, unknown>): string {
-  return Object.entries(styles)
-    .filter(([, value]) => value !== undefined && value !== null)
-    .map(([key, value]) => `${camelToKebab(key)}:${String(value)}`)
-    .join(";");
-}

package/src/components/_internal/style.ts

@@ -1,3 +1,44 @@
+const cssPropertyNameCache = new Map<string, string>();
+
+function cssPropertyName(name: string): string {
+  let cached = cssPropertyNameCache.get(name);
+  if (cached !== undefined) {
+    return cached;
+  }
+
+  let result = "";
+
+  for (let index = 0; index < name.length; index += 1) {
+    const code = name.charCodeAt(index);
+
+    if (code >= 65 && code <= 90) {
+      result += `-${String.fromCharCode(code + 32)}`;
+    } else {
+      result += name[index];
+    }
+  }
+
+  cssPropertyNameCache.set(name, result);
+  return result;
+}
+
+export function serializeCssDeclarations(styles: Record<string, unknown>): string {
+  const keys = Object.keys(styles);
+  let result = "";
+
+  for (const key of keys) {
+    const value = styles[key];
+    if (value === undefined || value === null) {
+      continue;
+    }
+
+    const declaration = `${cssPropertyName(key)}:${String(value)}`;
+    result = result ? `${result};${declaration}` : declaration;
+  }
+
+  return result;
+}
+
 export function mergeCssVar(style: unknown, name: string, value: string): string {
   const decl = `${name}:${value}`;
 
@@ -7,10 +48,7 @@ export function mergeCssVar(style: unknown, name: string, value: string): string
   }
 
   if (style && typeof style === "object") {
-    const entries = Object.entries(style as Record<string, unknown>)
-      .filter(([, v]) => v !== undefined && v !== null)
-      .map(([k, v]) => `${k.replace(/([A-Z])/g, (c) => `-${c.toLowerCase()}`)}:${String(v)}`)
-      .join(";");
+    const entries = serializeCssDeclarations(style as Record<string, unknown>);
     return entries ? `${entries};${decl}` : decl;
   }
 

package/src/components/navbar/navbar-panel.tsx

@@ -3,6 +3,15 @@ import { renderShellPanel } from "../shell/shell-panel";
 import { NavbarResponsiveContext } from "./navbar.context";
 import type { NavbarPanelProps } from "./navbar.types";
 
+const DEFAULT_NAVBAR_RESPONSIVE_CONTEXT = {
+  active: () => false,
+  collapseLabel: () => "Menu",
+  closePanel: () => undefined,
+  panelId: () => undefined,
+  panelOpen: () => false,
+  togglePanel: () => undefined,
+};
+
 export function NavbarPanel(props: NavbarPanelProps): JSX.Element | null {
   const {
     active: activeProp,
@@ -27,24 +36,10 @@ export function NavbarPanel(props: NavbarPanelProps): JSX.Element | null {
         try {
           return readContext(NavbarResponsiveContext);
         } catch {
-          return {
-            active: () => false,
-            collapseLabel: () => "Menu",
-            closePanel: () => undefined,
-            panelId: () => undefined,
-            panelOpen: () => false,
-            togglePanel: () => undefined,
-          };
+          return DEFAULT_NAVBAR_RESPONSIVE_CONTEXT;
         }
       })()
-    : {
-        active: () => false,
-        collapseLabel: () => "Menu",
-        closePanel: () => undefined,
-        panelId: () => undefined,
-        panelOpen: () => false,
-        togglePanel: () => undefined,
-      };
+    : DEFAULT_NAVBAR_RESPONSIVE_CONTEXT;
   const active = activeProp ?? responsive.active();
   const open = openProp ?? responsive.panelOpen();
   const panelId = panelIdProp ?? responsive.panelId();

package/src/components/navbar/navbar.tsx

@@ -13,18 +13,36 @@ import { NavbarResponsiveContext } from "./navbar.context";
 import { isNavbarCollapsed, resolveNavGroupAlign } from "./navbar.shared";
 import type { NavBrandProps, NavGroupProps, NavToggleProps, NavbarProps } from "./navbar.types";
 
-/**
- * Extracts the first NavBrand child to display in the mobile panel.
- * NavBrand should be the first child of Navbar for it to appear in the mobile menu.
- */
-function findNavbarBrand(children: unknown): unknown {
-  return toChildArray(children).find((child) => isJsxElement(child) && child.type === NavBrand);
-}
+type NavbarChildren = {
+  brand?: unknown;
+  panelItems: unknown[];
+};
 
-function withoutNavbarBrand(children: unknown): unknown[] {
-  return toChildArray(children).filter(
-    (child) => !(isJsxElement(child) && child.type === NavBrand),
-  );
+function splitNavbarChildren(children: unknown[]): NavbarChildren {
+  let brand: unknown;
+  let hasBrand = false;
+  let panelItems: unknown[] | undefined;
+
+  for (let index = 0; index < children.length; index += 1) {
+    const child = children[index];
+
+    if (isJsxElement(child) && child.type === NavBrand) {
+      if (!hasBrand) {
+        brand = child;
+        hasBrand = true;
+      }
+
+      panelItems ??= children.slice(0, index);
+      continue;
+    }
+
+    panelItems?.push(child);
+  }
+
+  return {
+    brand: hasBrand ? brand : undefined,
+    panelItems: panelItems ?? children,
+  };
 }
 
 /**
@@ -59,11 +77,9 @@ export function Navbar(props: NavbarProps): JSX.Element {
   } = props;
   const effectiveCollapseLabel = collapseLabel ?? "Menu";
   const responsiveChildren = toChildArray(children);
+  const navbarChildren = splitNavbarChildren(responsiveChildren);
   const desktopChildren = renderKeyedShellChildren(responsiveChildren, "navbar-desktop");
-  const panelChildren = renderKeyedShellChildren(
-    withoutNavbarBrand(responsiveChildren),
-    "navbar-panel",
-  );
+  const panelChildren = renderKeyedShellChildren(navbarChildren.panelItems, "navbar-panel");
   // Extract brand to display in mobile panel header
   const responsiveCollapsedState =
     breakpoint !== undefined ? state(isNavbarCollapsed(breakpoint)) : undefined;
@@ -95,7 +111,6 @@ export function Navbar(props: NavbarProps): JSX.Element {
     panelOpen: () => Boolean(responsiveCollapsedState?.() && mobileMenuOpen),
     togglePanel,
   };
-  const panelBrand = findNavbarBrand(responsiveChildren);
   const finalProps = mergeProps(rest, {
     "aria-label": ariaLabel,
     ref,
@@ -131,7 +146,7 @@ export function Navbar(props: NavbarProps): JSX.Element {
         {breakpoint !== undefined ? (
           <NavbarPanel
             active={breakpoint !== undefined}
-            brand={panelBrand}
+            brand={navbarChildren.brand}
             collapseLabel={effectiveCollapseLabel}
             onClose={closePanel}
             onClick={closePanelOnNavActivation}

package/src/components/shell/shell-responsive.tsx

@@ -46,60 +46,110 @@ export function isShellPanelChild(child: unknown, panelComponent: unknown): chil
   return isJsxElement(child) && child.type === panelComponent;
 }
 
-export function renderKeyedShellChildren(children: unknown, keyPrefix: string): JSX.Element {
-  const keyedChildren = toChildArray(children).map((child, index) => {
-    if (!isJsxElement(child) || child.key != null) {
-      return child;
+function renderShellChildKey(child: unknown, index: number, keyPrefix: string): string {
+  return isJsxElement(child) && child.key != null ? String(child.key) : `${keyPrefix}-${index}`;
+}
+
+function keyMissingShellChildren(children: unknown[], keyPrefix: string): unknown[] {
+  let keyedChildren: unknown[] | undefined;
+
+  for (let index = 0; index < children.length; index += 1) {
+    const child = children[index];
+
+    if (isJsxElement(child) && child.key == null) {
+      keyedChildren ??= children.slice(0, index);
+      keyedChildren.push({
+        ...child,
+        key: `${keyPrefix}-${index}`,
+      });
+      continue;
     }
 
-    return {
-      ...child,
-      key: `${keyPrefix}-${index}`,
-    };
-  });
+    keyedChildren?.push(child);
+  }
+
+  return keyedChildren ?? children;
+}
 
+function hasPanelProps(
+  props: Record<string, unknown> | undefined,
+  panelProps: ShellResponsivePanelProps,
+): boolean {
   return (
-    <For
-      each={() => keyedChildren}
-      by={(child, index) =>
-        isJsxElement(child) && child.key != null ? String(child.key) : `${keyPrefix}-${index}`
-      }
-    >
-      {(child) => child as never}
-    </For>
+    props?.active === panelProps.active &&
+    props?.collapseLabel === panelProps.collapseLabel &&
+    props?.onClose === panelProps.onClose &&
+    props?.open === panelProps.open &&
+    props?.panelId === panelProps.panelId
   );
 }
 
-export function renderKeyedShellPanelChildren(
-  children: unknown,
+function applyShellPanelProps(
+  children: unknown[],
   keyPrefix: string,
   panelProps: ShellResponsivePanelProps,
-): JSX.Element {
-  const keyedChildren = toChildArray(children).map((child, index) => {
+): unknown[] {
+  let panelChildren: unknown[] | undefined;
+
+  for (let index = 0; index < children.length; index += 1) {
+    const child = children[index];
+
     if (!isJsxElement(child)) {
-      return child;
+      panelChildren?.push(child);
+      continue;
     }
 
-    return {
+    const props = child.props as Record<string, unknown> | undefined;
+
+    if (hasPanelProps(props, panelProps)) {
+      panelChildren?.push(child);
+      continue;
+    }
+
+    panelChildren ??= children.slice(0, index);
+    panelChildren.push({
       ...child,
       key: child.key != null ? child.key : `${keyPrefix}-${index}`,
       props: {
-        ...child.props,
+        ...props,
         active: panelProps.active,
         collapseLabel: panelProps.collapseLabel,
         onClose: panelProps.onClose,
         open: panelProps.open,
         panelId: panelProps.panelId,
       },
-    };
-  });
+    });
+  }
+
+  return panelChildren ?? children;
+}
+
+export function renderKeyedShellChildren(children: unknown, keyPrefix: string): JSX.Element {
+  const childList = toChildArray(children);
+  const keyedChildren = keyMissingShellChildren(childList, keyPrefix);
 
   return (
     <For
       each={() => keyedChildren}
-      by={(child, index) =>
-        isJsxElement(child) && child.key != null ? String(child.key) : `${keyPrefix}-${index}`
-      }
+      by={(child, index) => renderShellChildKey(child, index, keyPrefix)}
+    >
+      {(child) => child as never}
+    </For>
+  );
+}
+
+export function renderKeyedShellPanelChildren(
+  children: unknown,
+  keyPrefix: string,
+  panelProps: ShellResponsivePanelProps,
+): JSX.Element {
+  const childList = toChildArray(children);
+  const keyedChildren = applyShellPanelProps(childList, keyPrefix, panelProps);
+
+  return (
+    <For
+      each={() => keyedChildren}
+      by={(child, index) => renderShellChildKey(child, index, keyPrefix)}
     >
       {(child) => child as never}
     </For>