@askrjs/themes 0.0.6 → 0.0.7

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 { 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 content =\n    typeof children === \"function\" ? children(renderContext) : (children ?? themedIcon);\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 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, 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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"}

package/dist/controls.d.ts

@@ -7,4 +7,4 @@ import { Field, FieldError, FieldHint } from "./components/field/field.js";
 import { InputGroupOrientation, InputGroupProps, InputGroupTextAsChildProps, InputGroupTextProps } from "./components/input-group/input-group.types.js";
 import { InputGroup, InputGroupText } from "./components/input-group/input-group.js";
 import { Button, ButtonAsChildProps, ButtonNativeProps, ButtonOwnProps, ButtonProps } from "@askrjs/ui";
-export { Button, type ButtonAsChildProps, ButtonGroup, ButtonGroupOrientation, ButtonGroupProps, type ButtonNativeProps, type ButtonOwnProps, type ButtonProps, Close, CloseNativeProps, CloseOwnProps, Field, FieldError, FieldErrorProps, FieldHint, FieldHintProps, FieldProps, InputGroup, InputGroupOrientation, InputGroupProps, InputGroupText, InputGroupTextAsChildProps, InputGroupTextProps };
+export { Button, type ButtonAsChildProps, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonNativeProps, type ButtonOwnProps, type ButtonProps, Close, type CloseNativeProps, type CloseOwnProps, Field, FieldError, type FieldErrorProps, FieldHint, type FieldHintProps, type FieldProps, InputGroup, type InputGroupOrientation, type InputGroupProps, InputGroupText, type InputGroupTextAsChildProps, type InputGroupTextProps };

package/dist/feedback.d.ts

@@ -2,4 +2,4 @@ import { EmptyStateHeadingTag, EmptyStateProps } from "./components/empty-state/
 import { EmptyState } from "./components/empty-state/empty-state.js";
 import { SpinnerOwnProps, SpinnerProps } from "./components/spinner/spinner.types.js";
 import { Spinner } from "./components/spinner/spinner.js";
-export { EmptyState, EmptyStateHeadingTag, EmptyStateProps, Spinner, SpinnerOwnProps, SpinnerProps };
+export { EmptyState, type EmptyStateHeadingTag, type EmptyStateProps, Spinner, type SpinnerOwnProps, type SpinnerProps };

package/dist/layouts.d.ts

@@ -22,4 +22,4 @@ import { SPACER_A11Y_CONTRACT, SpacerA11yContract } from "./components/spacer/sp
 import { StackAsChildProps, StackDivProps, StackOwnProps, StackProps } from "./components/stack/stack.types.js";
 import { Stack } from "./components/stack/stack.js";
 import { STACK_A11Y_CONTRACT, StackA11yContract } from "./components/stack/stack.a11y.js";
-export { AspectRatio, AspectRatioAsChildProps, AspectRatioProps, BLOCK_A11Y_CONTRACT, BOX_A11Y_CONTRACT, Block, BlockA11yContract, BlockAsChildProps, BlockDivProps, BlockNativeProps, BlockOwnProps, BlockProps, BlockSize, BlockSpanProps, Box, BoxA11yContract, BoxAsChildProps, BoxDivProps, BoxLayoutOwnProps, BoxOwnProps, BoxProps, BoxSpanProps, CONTAINER_A11Y_CONTRACT, Container, ContainerA11yContract, ContainerAsChildProps, ContainerNativeProps, ContainerOwnProps, ContainerProps, ContainerVariant, FLEX_A11Y_CONTRACT, Flex, FlexA11yContract, FlexAsChildProps, FlexDivProps, FlexNativeProps, FlexOwnProps, FlexProps, FlexSpanProps, FLEX_A11Y_CONTRACT as INLINE_A11Y_CONTRACT, Inline, FlexA11yContract as InlineA11yContract, FlexAsChildProps as InlineAsChildProps, FlexDivProps as InlineDivProps, FlexNativeProps as InlineNativeProps, FlexOwnProps as InlineOwnProps, FlexProps as InlineProps, FlexSpanProps as InlineSpanProps, LayoutResponsive, SECTION_A11Y_CONTRACT, SPACER_A11Y_CONTRACT, STACK_A11Y_CONTRACT, Section, SectionA11yContract, SectionAsChildProps, SectionElementProps, SectionOwnProps, SectionProps, Spacer, SpacerA11yContract, SpacerAsChildProps, SpacerAxis, SpacerNativeProps, SpacerOwnProps, SpacerProps, Stack, StackA11yContract, StackAsChildProps, StackDivProps, StackOwnProps, StackProps };
+export { AspectRatio, type AspectRatioAsChildProps, type AspectRatioProps, type BLOCK_A11Y_CONTRACT, type BOX_A11Y_CONTRACT, Block, type BlockA11yContract, type BlockAsChildProps, type BlockDivProps, type BlockNativeProps, type BlockOwnProps, type BlockProps, type BlockSize, type BlockSpanProps, Box, type BoxA11yContract, type BoxAsChildProps, type BoxDivProps, type BoxLayoutOwnProps, type BoxOwnProps, type BoxProps, type BoxSpanProps, type CONTAINER_A11Y_CONTRACT, Container, type ContainerA11yContract, type ContainerAsChildProps, type ContainerNativeProps, type ContainerOwnProps, type ContainerProps, type ContainerVariant, type FLEX_A11Y_CONTRACT, Flex, type FlexA11yContract, type FlexAsChildProps, type FlexDivProps, type FlexNativeProps, type FlexOwnProps, type FlexProps, type FlexSpanProps, type FLEX_A11Y_CONTRACT as INLINE_A11Y_CONTRACT, Inline, type FlexA11yContract as InlineA11yContract, type FlexAsChildProps as InlineAsChildProps, type FlexDivProps as InlineDivProps, type FlexNativeProps as InlineNativeProps, type FlexOwnProps as InlineOwnProps, type FlexProps as InlineProps, type FlexSpanProps as InlineSpanProps, type LayoutResponsive, type SECTION_A11Y_CONTRACT, type SPACER_A11Y_CONTRACT, type STACK_A11Y_CONTRACT, Section, type SectionA11yContract, type SectionAsChildProps, type SectionElementProps, type SectionOwnProps, type SectionProps, Spacer, type SpacerA11yContract, type SpacerAsChildProps, type SpacerAxis, type SpacerNativeProps, type SpacerOwnProps, type SpacerProps, Stack, type StackA11yContract, type StackAsChildProps, type StackDivProps, type StackOwnProps, type StackProps };

package/dist/navs.d.ts

@@ -12,4 +12,4 @@ import { SidebarPanel } from "./components/sidebar/sidebar-panel.js";
 import { SidebarToggle } from "./components/sidebar/sidebar-toggle.js";
 import { PaginationEllipsisProps, PaginationItemAsChildProps, PaginationItemProps, PaginationLinkProps, PaginationProps } from "./components/pagination/pagination.types.js";
 import { Pagination, PaginationEllipsis, PaginationItem, PaginationLink } from "./components/pagination/pagination.js";
-export { BREADCRUMB_A11Y_CONTRACT, Breadcrumb, BreadcrumbA11yContract, BreadcrumbAsChildProps, BreadcrumbCurrent, BreadcrumbCurrentAsChildProps, BreadcrumbCurrentProps, BreadcrumbItem, BreadcrumbItemAsChildProps, BreadcrumbItemProps, BreadcrumbLink, BreadcrumbLinkAsChildProps, BreadcrumbLinkProps, BreadcrumbList, BreadcrumbListAsChildProps, BreadcrumbListProps, BreadcrumbOwnProps, BreadcrumbProps, BreadcrumbSeparator, BreadcrumbSeparatorAsChildProps, BreadcrumbSeparatorProps, CollapseBreakpoint, CollapseIconPlacement, Collapsible, Nav, NavAsChildProps, NavBrand, NavBrandProps, NavDivProps, NavGroup, NavGroupProps, NavItem, NavItemAsChildProps, NavItemProps, NavItemVariant, NavLink, NavLinkProps, NavListProps, NavNavProps, NavOrientation, NavProps, NavToggle, NavToggleProps, NavVariant, Navbar, NavbarProps, Pagination, PaginationEllipsis, PaginationEllipsisProps, PaginationItem, PaginationItemAsChildProps, PaginationItemProps, PaginationLink, PaginationLinkProps, PaginationProps, Sidebar, SidebarPanel, SidebarPanelProps, SidebarProps, SidebarToggle, SidebarToggleProps };
+export { BREADCRUMB_A11Y_CONTRACT, Breadcrumb, type BreadcrumbA11yContract, type BreadcrumbAsChildProps, BreadcrumbCurrent, type BreadcrumbCurrentAsChildProps, type BreadcrumbCurrentProps, BreadcrumbItem, type BreadcrumbItemAsChildProps, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkAsChildProps, type BreadcrumbLinkProps, BreadcrumbList, type BreadcrumbListAsChildProps, type BreadcrumbListProps, type BreadcrumbOwnProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorAsChildProps, type BreadcrumbSeparatorProps, type CollapseBreakpoint, type CollapseIconPlacement, type Collapsible, Nav, type NavAsChildProps, NavBrand, type NavBrandProps, type NavDivProps, NavGroup, type NavGroupProps, NavItem, type NavItemAsChildProps, type NavItemProps, type NavItemVariant, NavLink, type NavLinkProps, type NavListProps, type NavNavProps, type NavOrientation, type NavProps, NavToggle, type NavToggleProps, type NavVariant, Navbar, type NavbarProps, Pagination, PaginationEllipsis, type PaginationEllipsisProps, PaginationItem, type PaginationItemAsChildProps, type PaginationItemProps, PaginationLink, type PaginationLinkProps, type PaginationProps, Sidebar, SidebarPanel, type SidebarPanelProps, type SidebarProps, type SidebarToggle, type SidebarToggleProps };

package/dist/shells.d.ts

@@ -13,4 +13,4 @@ import { HEADER_A11Y_CONTRACT, HeaderA11yContract } from "./components/header/he
 import { ShellAsChildProps, ShellDivProps, ShellMainAsChildProps, ShellMainDivProps, ShellMainMainProps, ShellMainProps, ShellNavAsChildProps, ShellNavDivProps, ShellNavProps, ShellOwnProps, ShellProps, ShellVariant } from "./components/shell/shell.types.js";
 import { Shell, ShellMain, ShellNav } from "./components/shell/shell.js";
 import { SHELL_A11Y_CONTRACT, ShellA11yContract } from "./components/shell/shell.a11y.js";
-export { CollapseBreakpoint, CollapseIconPlacement, Collapsible, HEADER_A11Y_CONTRACT, Header, HeaderA11yContract, HeaderPosition, HeaderProps, NavBrand, NavBrandProps, NavGroup, NavGroupProps, NavItem, NavItemAsChildProps, NavItemProps, NavItemVariant, NavLink, NavLinkProps, NavToggle, NavToggleProps, Navbar, NavbarProps, SHELL_A11Y_CONTRACT, Shell, ShellA11yContract, ShellAsChildProps, ShellDivProps, ShellMain, ShellMainAsChildProps, ShellMainDivProps, ShellMainMainProps, ShellMainProps, ShellNav, ShellNavAsChildProps, ShellNavDivProps, ShellNavProps, ShellOwnProps, ShellProps, ShellVariant, Sidebar, SidebarPanel, SidebarPanelProps, SidebarProps, SidebarToggle, SidebarToggleProps };
+export { type CollapseBreakpoint, type CollapseIconPlacement, type Collapsible, HEADER_A11Y_CONTRACT, Header, type HeaderA11yContract, type HeaderPosition, type HeaderProps, NavBrand, type NavBrandProps, NavGroup, type NavGroupProps, NavItem, type NavItemAsChildProps, type NavItemProps, type NavItemVariant, NavLink, type NavLinkProps, NavToggle, type NavToggleProps, Navbar, type NavbarProps, SHELL_A11Y_CONTRACT, Shell, type ShellA11yContract, type ShellAsChildProps, type ShellDivProps, ShellMain, type ShellMainAsChildProps, type ShellMainDivProps, type ShellMainMainProps, type ShellMainProps, ShellNav, type ShellNavAsChildProps, type ShellNavDivProps, type ShellNavProps, type ShellOwnProps, type ShellProps, type ShellVariant, Sidebar, SidebarPanel, type SidebarPanelProps, type SidebarProps, SidebarToggle, type SidebarToggleProps };

package/dist/surfaces.d.ts

@@ -13,4 +13,4 @@ import { SEPARATOR_A11Y_CONTRACT, SeparatorA11yContract } from "./components/sep
 import { SkeletonAsChildProps, SkeletonOwnProps, SkeletonProps } from "./components/skeleton/skeleton.types.js";
 import { Skeleton } from "./components/skeleton/skeleton.js";
 import { SKELETON_A11Y_CONTRACT, SkeletonA11yContract } from "./components/skeleton/skeleton.a11y.js";
-export { Alert, AlertHeadingTag, AlertProps, AlertVariant, BADGE_A11Y_CONTRACT, Badge, BadgeA11yContract, BadgeAsChildProps, BadgeOwnProps, BadgeProps, Card, CardActions, CardActionsProps, CardContent, CardContentProps, CardDescription, CardDescriptionProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardPadding, CardProps, CardTitle, CardTitleProps, CardVariant, Separator as Divider, SeparatorAsChildProps as DividerAsChildProps, SeparatorNativeProps as DividerNativeProps, SeparatorOwnProps as DividerOwnProps, SeparatorProps as DividerProps, ListGroup, ListGroupItem, ListGroupItemAsChildProps, ListGroupItemProps, ListGroupOrientation, ListGroupProps, SEPARATOR_A11Y_CONTRACT, SKELETON_A11Y_CONTRACT, Separator, SeparatorA11yContract, SeparatorAsChildProps, SeparatorNativeProps, SeparatorOwnProps, SeparatorProps, Skeleton, SkeletonA11yContract, SkeletonAsChildProps, SkeletonOwnProps, SkeletonProps };
+export { Alert, type AlertHeadingTag, type AlertProps, type AlertVariant, type BADGE_A11Y_CONTRACT, Badge, type BadgeA11yContract, type BadgeAsChildProps, type BadgeOwnProps, type BadgeProps, Card, CardActions, type CardActionsProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardPadding, type CardProps, CardTitle, type CardTitleProps, type CardVariant, Separator as Divider, type SeparatorAsChildProps as DividerAsChildProps, type SeparatorNativeProps as DividerNativeProps, type SeparatorOwnProps as DividerOwnProps, type SeparatorProps as DividerProps, ListGroup, ListGroupItem, type ListGroupItemAsChildProps, type ListGroupItemProps, type ListGroupOrientation, type ListGroupProps, SEPARATOR_A11Y_CONTRACT, type SKELETON_A11Y_CONTRACT, Separator, type SeparatorA11yContract, type SeparatorAsChildProps, type SeparatorNativeProps, type SeparatorOwnProps, type SeparatorProps, Skeleton, type SkeletonA11yContract, type SkeletonAsChildProps, type SkeletonOwnProps, type SkeletonProps };

package/dist/themes/default/index.css

@@ -595,142 +595,6 @@
   speak: none;
 }
 
-:where(.text-muted) {
-  color: var(--ak-color-text-muted);
-}
-
-:where(.text-bold) {
-  font-weight: var(--ak-font-weight-bold);
-}
-
-:where(.sr-only) {
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  position: absolute;
-  overflow: hidden;
-}
-
-:where(.gap-1, [data-slot="flex"][data-gap="initial:1"], [data-slot="block"][data-gap="initial:1"], [data-slot="shell"][data-gap="initial:1"]) {
-  gap: var(--ak-space-1);
-}
-
-:where(.gap-2, [data-slot="flex"][data-gap="initial:2"], [data-slot="block"][data-gap="initial:2"], [data-slot="shell"][data-gap="initial:2"]) {
-  gap: var(--ak-space-2);
-}
-
-:where(.gap-3, [data-slot="flex"][data-gap="initial:3"], [data-slot="block"][data-gap="initial:3"], [data-slot="shell"][data-gap="initial:3"]) {
-  gap: var(--ak-space-3);
-}
-
-:where(.gap-4, [data-slot="flex"][data-gap="initial:4"], [data-slot="block"][data-gap="initial:4"], [data-slot="shell"][data-gap="initial:4"]) {
-  gap: var(--ak-space-4);
-}
-
-:where(.gap-xs, [data-slot="flex"][data-gap="initial:xs"], [data-slot="block"][data-gap="initial:xs"], [data-slot="shell"][data-gap="initial:xs"]) {
-  gap: var(--ak-space-xs);
-}
-
-:where(.gap-sm, [data-slot="flex"][data-gap="initial:sm"], [data-slot="block"][data-gap="initial:sm"], [data-slot="shell"][data-gap="initial:sm"]) {
-  gap: var(--ak-space-sm);
-}
-
-:where(.gap-md, [data-slot="flex"][data-gap="initial:md"], [data-slot="block"][data-gap="initial:md"], [data-slot="shell"][data-gap="initial:md"]) {
-  gap: var(--ak-space-md);
-}
-
-:where(.gap-lg, [data-slot="flex"][data-gap="initial:lg"], [data-slot="block"][data-gap="initial:lg"], [data-slot="shell"][data-gap="initial:lg"]) {
-  gap: var(--ak-space-lg);
-}
-
-:where(.gap-xl, [data-slot="flex"][data-gap="initial:xl"], [data-slot="block"][data-gap="initial:xl"], [data-slot="shell"][data-gap="initial:xl"]) {
-  gap: var(--ak-space-xl);
-}
-
-:where(.gap-x-sm, [data-slot="flex"][data-gap-x="initial:sm"], [data-slot="block"][data-gap-x="initial:sm"]) {
-  column-gap: var(--ak-space-sm);
-}
-
-:where(.gap-x-md, [data-slot="flex"][data-gap-x="initial:md"], [data-slot="block"][data-gap-x="initial:md"]) {
-  column-gap: var(--ak-space-md);
-}
-
-:where(.gap-x-lg, [data-slot="flex"][data-gap-x="initial:lg"], [data-slot="block"][data-gap-x="initial:lg"]) {
-  column-gap: var(--ak-space-lg);
-}
-
-:where(.gap-y-sm, [data-slot="flex"][data-gap-y="initial:sm"], [data-slot="block"][data-gap-y="initial:sm"]) {
-  row-gap: var(--ak-space-sm);
-}
-
-:where(.gap-y-md, [data-slot="flex"][data-gap-y="initial:md"], [data-slot="block"][data-gap-y="initial:md"]) {
-  row-gap: var(--ak-space-md);
-}
-
-:where(.gap-y-lg, [data-slot="flex"][data-gap-y="initial:lg"], [data-slot="block"][data-gap-y="initial:lg"]) {
-  row-gap: var(--ak-space-lg);
-}
-
-:where(.flex-col, [data-slot="flex"][data-direction="initial:column"]) {
-  flex-direction: column;
-}
-
-:where(.flex-row-reverse, [data-slot="flex"][data-direction="initial:row-reverse"]) {
-  flex-direction: row-reverse;
-}
-
-:where(.flex-col-reverse, [data-slot="flex"][data-direction="initial:column-reverse"]) {
-  flex-direction: column-reverse;
-}
-
-:where(.items-start, [data-slot="flex"][data-align="initial:start"], [data-slot="block"][data-align="initial:start"]) {
-  align-items: flex-start;
-}
-
-:where(.items-end, [data-slot="flex"][data-align="initial:end"], [data-slot="block"][data-align="initial:end"]) {
-  align-items: flex-end;
-}
-
-:where(.items-center, [data-slot="flex"][data-align="initial:center"], [data-slot="block"][data-align="initial:center"]) {
-  align-items: center;
-}
-
-:where(.items-stretch, [data-slot="flex"][data-align="initial:stretch"], [data-slot="block"][data-align="initial:stretch"]) {
-  align-items: stretch;
-}
-
-:where(.items-baseline, [data-slot="flex"][data-align="initial:baseline"], [data-slot="block"][data-align="initial:baseline"]) {
-  align-items: baseline;
-}
-
-:where(.justify-start, [data-slot="flex"][data-justify="initial:start"], [data-slot="block"][data-justify="initial:start"]) {
-  justify-content: flex-start;
-}
-
-:where(.justify-end, [data-slot="flex"][data-justify="initial:end"], [data-slot="block"][data-justify="initial:end"]) {
-  justify-content: flex-end;
-}
-
-:where(.justify-center, [data-slot="flex"][data-justify="initial:center"], [data-slot="block"][data-justify="initial:center"]) {
-  justify-content: center;
-}
-
-:where(.justify-between, [data-slot="flex"][data-justify="initial:between"], [data-slot="block"][data-justify="initial:between"]) {
-  justify-content: space-between;
-}
-
-:where(.flex-nowrap, [data-slot="flex"][data-wrap="initial:nowrap"]) {
-  flex-wrap: nowrap;
-}
-
-:where(.flex-wrap-reverse, [data-slot="flex"][data-wrap="initial:wrap-reverse"]) {
-  flex-wrap: wrap-reverse;
-}
-
 :where([data-ak-layout="true"]) {
   display: var(--ak-display-initial);
   margin: var(--ak-m-initial);
@@ -1321,6 +1185,142 @@
   }
 }
 
+:where(.text-muted) {
+  color: var(--ak-color-text-muted);
+}
+
+:where(.text-bold) {
+  font-weight: var(--ak-font-weight-bold);
+}
+
+:where(.sr-only) {
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+:where(.gap-1, [data-slot="flex"][data-gap="initial:1"], [data-slot="block"][data-gap="initial:1"], [data-slot="shell"][data-gap="initial:1"]) {
+  gap: var(--ak-space-1);
+}
+
+:where(.gap-2, [data-slot="flex"][data-gap="initial:2"], [data-slot="block"][data-gap="initial:2"], [data-slot="shell"][data-gap="initial:2"]) {
+  gap: var(--ak-space-2);
+}
+
+:where(.gap-3, [data-slot="flex"][data-gap="initial:3"], [data-slot="block"][data-gap="initial:3"], [data-slot="shell"][data-gap="initial:3"]) {
+  gap: var(--ak-space-3);
+}
+
+:where(.gap-4, [data-slot="flex"][data-gap="initial:4"], [data-slot="block"][data-gap="initial:4"], [data-slot="shell"][data-gap="initial:4"]) {
+  gap: var(--ak-space-4);
+}
+
+:where(.gap-xs, [data-slot="flex"][data-gap="initial:xs"], [data-slot="block"][data-gap="initial:xs"], [data-slot="shell"][data-gap="initial:xs"]) {
+  gap: var(--ak-space-xs);
+}
+
+:where(.gap-sm, [data-slot="flex"][data-gap="initial:sm"], [data-slot="block"][data-gap="initial:sm"], [data-slot="shell"][data-gap="initial:sm"]) {
+  gap: var(--ak-space-sm);
+}
+
+:where(.gap-md, [data-slot="flex"][data-gap="initial:md"], [data-slot="block"][data-gap="initial:md"], [data-slot="shell"][data-gap="initial:md"]) {
+  gap: var(--ak-space-md);
+}
+
+:where(.gap-lg, [data-slot="flex"][data-gap="initial:lg"], [data-slot="block"][data-gap="initial:lg"], [data-slot="shell"][data-gap="initial:lg"]) {
+  gap: var(--ak-space-lg);
+}
+
+:where(.gap-xl, [data-slot="flex"][data-gap="initial:xl"], [data-slot="block"][data-gap="initial:xl"], [data-slot="shell"][data-gap="initial:xl"]) {
+  gap: var(--ak-space-xl);
+}
+
+:where(.gap-x-sm, [data-slot="flex"][data-gap-x="initial:sm"], [data-slot="block"][data-gap-x="initial:sm"]) {
+  column-gap: var(--ak-space-sm);
+}
+
+:where(.gap-x-md, [data-slot="flex"][data-gap-x="initial:md"], [data-slot="block"][data-gap-x="initial:md"]) {
+  column-gap: var(--ak-space-md);
+}
+
+:where(.gap-x-lg, [data-slot="flex"][data-gap-x="initial:lg"], [data-slot="block"][data-gap-x="initial:lg"]) {
+  column-gap: var(--ak-space-lg);
+}
+
+:where(.gap-y-sm, [data-slot="flex"][data-gap-y="initial:sm"], [data-slot="block"][data-gap-y="initial:sm"]) {
+  row-gap: var(--ak-space-sm);
+}
+
+:where(.gap-y-md, [data-slot="flex"][data-gap-y="initial:md"], [data-slot="block"][data-gap-y="initial:md"]) {
+  row-gap: var(--ak-space-md);
+}
+
+:where(.gap-y-lg, [data-slot="flex"][data-gap-y="initial:lg"], [data-slot="block"][data-gap-y="initial:lg"]) {
+  row-gap: var(--ak-space-lg);
+}
+
+:where(.flex-col, [data-slot="flex"][data-direction="initial:column"], [data-slot="inline"][data-direction="initial:column"]) {
+  flex-direction: column;
+}
+
+:where(.flex-row-reverse, [data-slot="flex"][data-direction="initial:row-reverse"], [data-slot="inline"][data-direction="initial:row-reverse"]) {
+  flex-direction: row-reverse;
+}
+
+:where(.flex-col-reverse, [data-slot="flex"][data-direction="initial:column-reverse"], [data-slot="inline"][data-direction="initial:column-reverse"]) {
+  flex-direction: column-reverse;
+}
+
+:where(.items-start, [data-slot="flex"][data-align="initial:start"], [data-slot="inline"][data-align="initial:start"], [data-slot="block"][data-align="initial:start"]) {
+  align-items: flex-start;
+}
+
+:where(.items-end, [data-slot="flex"][data-align="initial:end"], [data-slot="inline"][data-align="initial:end"], [data-slot="block"][data-align="initial:end"]) {
+  align-items: flex-end;
+}
+
+:where(.items-center, [data-slot="flex"][data-align="initial:center"], [data-slot="inline"][data-align="initial:center"], [data-slot="block"][data-align="initial:center"]) {
+  align-items: center;
+}
+
+:where(.items-stretch, [data-slot="flex"][data-align="initial:stretch"], [data-slot="inline"][data-align="initial:stretch"], [data-slot="block"][data-align="initial:stretch"]) {
+  align-items: stretch;
+}
+
+:where(.items-baseline, [data-slot="flex"][data-align="initial:baseline"], [data-slot="inline"][data-align="initial:baseline"], [data-slot="block"][data-align="initial:baseline"]) {
+  align-items: baseline;
+}
+
+:where(.justify-start, [data-slot="flex"][data-justify="initial:start"], [data-slot="inline"][data-justify="initial:start"], [data-slot="block"][data-justify="initial:start"]) {
+  justify-content: flex-start;
+}
+
+:where(.justify-end, [data-slot="flex"][data-justify="initial:end"], [data-slot="inline"][data-justify="initial:end"], [data-slot="block"][data-justify="initial:end"]) {
+  justify-content: flex-end;
+}
+
+:where(.justify-center, [data-slot="flex"][data-justify="initial:center"], [data-slot="inline"][data-justify="initial:center"], [data-slot="block"][data-justify="initial:center"]) {
+  justify-content: center;
+}
+
+:where(.justify-between, [data-slot="flex"][data-justify="initial:between"], [data-slot="inline"][data-justify="initial:between"], [data-slot="block"][data-justify="initial:between"]) {
+  justify-content: space-between;
+}
+
+:where(.flex-nowrap, [data-slot="flex"][data-wrap="initial:nowrap"], [data-slot="inline"][data-wrap="initial:nowrap"]) {
+  flex-wrap: nowrap;
+}
+
+:where(.flex-wrap-reverse, [data-slot="flex"][data-wrap="initial:wrap-reverse"], [data-slot="inline"][data-wrap="initial:wrap-reverse"]) {
+  flex-wrap: wrap-reverse;
+}
+
 :where([data-slot="block"]) {
   display: grid;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@askrjs/themes",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Default theme tokens, styles, and themed layout wrappers for Askr apps.",
   "keywords": [
     "askr",
@@ -129,26 +129,27 @@
     "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",
-    "test": "npm run test:unit && npm run test:jsdom && npm run test:browser",
+    "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",
     "test:browser": "vp test run -c vitest.test.browser.config.ts --mode production",
     "fmt": "vp fmt .",
     "lint": "vp lint .",
     "build": "vp pack",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "test:checks": "vp test run -c vitest.test.checks.config.ts"
   },
   "devDependencies": {
-    "@askrjs/askr": "^0.0.39",
-    "@askrjs/ui": "^0.0.7",
-    "@askrjs/vite": "^0.0.2",
-    "@tsdown/css": "0.22.0",
-    "@types/node": "^25.9.1",
+    "@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",
     "cross-env": "^10.1.0",
     "jsdom": "^29.1.1",
     "playwright": "^1.60.0",
     "typescript": "^6.0.3",
-    "vite-plus": "^0.1.22"
+    "vite-plus": "^0.1.24"
   },
   "peerDependencies": {
     "@askrjs/askr": ">=0.0.1 <0.1.0",
@@ -157,5 +158,5 @@
   "engines": {
     "node": ">=18"
   },
-  "packageManager": "npm@11.15.0"
+  "packageManager": "npm@11.16.0"
 }

package/src/components/theme/theme.tsx

@@ -1,4 +1,5 @@
 import { defineContext, readContext, state } from "@askrjs/askr";
+import type { JSXElement } from "@askrjs/askr/foundations/structures";
 import { resource } from "@askrjs/askr/resources";
 import { Button } from "@askrjs/ui";
 import type { ButtonNativeProps, PressEvent } from "@askrjs/ui";
@@ -186,8 +187,9 @@ export function ThemeToggle(props: ThemeToggleProps): JSX.Element {
     darkIcon,
     systemIcon,
   });
+  const renderedIcon = cloneThemeToggleIcon(themedIcon);
   const content =
-    typeof children === "function" ? children(renderContext) : (children ?? themedIcon);
+    typeof children === "function" ? children(renderContext) : (children ?? renderedIcon);
 
   return (
     <Button
@@ -230,6 +232,25 @@ export function resolveThemeToggleIcon(
   return getThemeIcon(theme, icons) ?? getThemeIcon(nextTheme, icons);
 }
 
+function isJSXElement(value: unknown): value is JSXElement {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "$$typeof" in value &&
+    "type" in value &&
+    "props" in value
+  );
+}
+
+function cloneThemeToggleIcon(icon: unknown): unknown {
+  if (!isJSXElement(icon)) return icon;
+
+  return {
+    ...icon,
+    props: { ...(icon.props as Record<string, unknown> | undefined) },
+  };
+}
+
 function syncThemeRoot(themeChoice: ThemeName | null | undefined): void {
   if (typeof document === "undefined") {
     return;

package/src/themes/default/index.css

@@ -2,9 +2,9 @@
 @import "./styles/base/reset.css";
 @import "./styles/base/typography.css";
 @import "./styles/base/icon.css";
-@import "./styles/base/utilities.css";
 @import "./styles/layout/layout.css";
 @import "./styles/layout/responsive-layout.css";
+@import "./styles/base/utilities.css";
 @import "./styles/layout/block.css";
 @import "./styles/layout/patterns.css";
 @import "./styles/layout/aspect-ratio.css";

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

@@ -147,21 +147,34 @@
   row-gap: var(--ak-space-lg);
 }
 
-:where(.flex-col, [data-slot="flex"][data-direction="initial:column"]) {
+:where(
+  .flex-col,
+  [data-slot="flex"][data-direction="initial:column"],
+  [data-slot="inline"][data-direction="initial:column"]
+) {
   flex-direction: column;
 }
 
-:where(.flex-row-reverse, [data-slot="flex"][data-direction="initial:row-reverse"]) {
+:where(
+  .flex-row-reverse,
+  [data-slot="flex"][data-direction="initial:row-reverse"],
+  [data-slot="inline"][data-direction="initial:row-reverse"]
+) {
   flex-direction: row-reverse;
 }
 
-:where(.flex-col-reverse, [data-slot="flex"][data-direction="initial:column-reverse"]) {
+:where(
+  .flex-col-reverse,
+  [data-slot="flex"][data-direction="initial:column-reverse"],
+  [data-slot="inline"][data-direction="initial:column-reverse"]
+) {
   flex-direction: column-reverse;
 }
 
 :where(
   .items-start,
   [data-slot="flex"][data-align="initial:start"],
+  [data-slot="inline"][data-align="initial:start"],
   [data-slot="block"][data-align="initial:start"]
 ) {
   align-items: flex-start;
@@ -170,6 +183,7 @@
 :where(
   .items-end,
   [data-slot="flex"][data-align="initial:end"],
+  [data-slot="inline"][data-align="initial:end"],
   [data-slot="block"][data-align="initial:end"]
 ) {
   align-items: flex-end;
@@ -178,6 +192,7 @@
 :where(
   .items-center,
   [data-slot="flex"][data-align="initial:center"],
+  [data-slot="inline"][data-align="initial:center"],
   [data-slot="block"][data-align="initial:center"]
 ) {
   align-items: center;
@@ -186,6 +201,7 @@
 :where(
   .items-stretch,
   [data-slot="flex"][data-align="initial:stretch"],
+  [data-slot="inline"][data-align="initial:stretch"],
   [data-slot="block"][data-align="initial:stretch"]
 ) {
   align-items: stretch;
@@ -194,6 +210,7 @@
 :where(
   .items-baseline,
   [data-slot="flex"][data-align="initial:baseline"],
+  [data-slot="inline"][data-align="initial:baseline"],
   [data-slot="block"][data-align="initial:baseline"]
 ) {
   align-items: baseline;
@@ -202,6 +219,7 @@
 :where(
   .justify-start,
   [data-slot="flex"][data-justify="initial:start"],
+  [data-slot="inline"][data-justify="initial:start"],
   [data-slot="block"][data-justify="initial:start"]
 ) {
   justify-content: flex-start;
@@ -210,6 +228,7 @@
 :where(
   .justify-end,
   [data-slot="flex"][data-justify="initial:end"],
+  [data-slot="inline"][data-justify="initial:end"],
   [data-slot="block"][data-justify="initial:end"]
 ) {
   justify-content: flex-end;
@@ -218,6 +237,7 @@
 :where(
   .justify-center,
   [data-slot="flex"][data-justify="initial:center"],
+  [data-slot="inline"][data-justify="initial:center"],
   [data-slot="block"][data-justify="initial:center"]
 ) {
   justify-content: center;
@@ -226,15 +246,24 @@
 :where(
   .justify-between,
   [data-slot="flex"][data-justify="initial:between"],
+  [data-slot="inline"][data-justify="initial:between"],
   [data-slot="block"][data-justify="initial:between"]
 ) {
   justify-content: space-between;
 }
 
-:where(.flex-nowrap, [data-slot="flex"][data-wrap="initial:nowrap"]) {
+:where(
+  .flex-nowrap,
+  [data-slot="flex"][data-wrap="initial:nowrap"],
+  [data-slot="inline"][data-wrap="initial:nowrap"]
+) {
   flex-wrap: nowrap;
 }
 
-:where(.flex-wrap-reverse, [data-slot="flex"][data-wrap="initial:wrap-reverse"]) {
+:where(
+  .flex-wrap-reverse,
+  [data-slot="flex"][data-wrap="initial:wrap-reverse"],
+  [data-slot="inline"][data-wrap="initial:wrap-reverse"]
+) {
   flex-wrap: wrap-reverse;
 }

package/templates/theme/index.css

@@ -2,9 +2,9 @@
 @import "./styles/base/reset.css";
 @import "./styles/base/typography.css";
 @import "./styles/base/icon.css";
-@import "./styles/base/utilities.css";
 @import "./styles/layout/layout.css";
 @import "./styles/layout/responsive-layout.css";
+@import "./styles/base/utilities.css";
 @import "./styles/layout/block.css";
 @import "./styles/layout/patterns.css";
 @import "./styles/layout/aspect-ratio.css";