@askrjs/themes 0.0.6 → 0.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@askrjs/themes",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "Default theme tokens, styles, and themed layout wrappers for Askr apps.",
   "keywords": [
     "askr",
@@ -129,33 +129,35 @@
     "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.1 <0.1.0",
+    "@tsdown/css": "0.22.3",
+    "@types/node": "^25.9.3",
+    "@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.22"
+    "vite-plus": "^0.2.0"
   },
   "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.15.0"
+  "packageManager": "npm@11.17.0"
 }

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/shell/shell-responsive.tsx

@@ -47,16 +47,20 @@ export function isShellPanelChild(child: unknown, panelComponent: unknown): chil
 }
 
 export function renderKeyedShellChildren(children: unknown, keyPrefix: string): JSX.Element {
-  const keyedChildren = toChildArray(children).map((child, index) => {
-    if (!isJsxElement(child) || child.key != null) {
-      return child;
-    }
+  const childList = toChildArray(children);
+  const needsKeying = childList.some((child) => isJsxElement(child) && child.key == null);
+  const keyedChildren = needsKeying
+    ? childList.map((child, index) => {
+        if (!isJsxElement(child) || child.key != null) {
+          return child;
+        }
 
-    return {
-      ...child,
-      key: `${keyPrefix}-${index}`,
-    };
-  });
+        return {
+          ...child,
+          key: `${keyPrefix}-${index}`,
+        };
+      })
+    : childList;
 
   return (
     <For
@@ -75,24 +79,54 @@ export function renderKeyedShellPanelChildren(
   keyPrefix: string,
   panelProps: ShellResponsivePanelProps,
 ): JSX.Element {
-  const keyedChildren = toChildArray(children).map((child, index) => {
+  const childList = toChildArray(children);
+  const needsPanelProps = childList.some((child) => {
     if (!isJsxElement(child)) {
-      return child;
+      return false;
     }
 
-    return {
-      ...child,
-      key: child.key != null ? child.key : `${keyPrefix}-${index}`,
-      props: {
-        ...child.props,
-        active: panelProps.active,
-        collapseLabel: panelProps.collapseLabel,
-        onClose: panelProps.onClose,
-        open: panelProps.open,
-        panelId: panelProps.panelId,
-      },
-    };
+    const props = child.props as Record<string, unknown> | undefined;
+
+    return (
+      props?.active !== panelProps.active ||
+      props?.collapseLabel !== panelProps.collapseLabel ||
+      props?.onClose !== panelProps.onClose ||
+      props?.open !== panelProps.open ||
+      props?.panelId !== panelProps.panelId
+    );
   });
+  const keyedChildren = needsPanelProps
+    ? childList.map((child, index) => {
+        if (!isJsxElement(child)) {
+          return child;
+        }
+
+        const props = child.props as Record<string, unknown> | undefined;
+
+        if (
+          props?.active === panelProps.active &&
+          props?.collapseLabel === panelProps.collapseLabel &&
+          props?.onClose === panelProps.onClose &&
+          props?.open === panelProps.open &&
+          props?.panelId === panelProps.panelId
+        ) {
+          return child;
+        }
+
+        return {
+          ...child,
+          key: child.key != null ? child.key : `${keyPrefix}-${index}`,
+          props: {
+            ...props,
+            active: panelProps.active,
+            collapseLabel: panelProps.collapseLabel,
+            onClose: panelProps.onClose,
+            open: panelProps.open,
+            panelId: panelProps.panelId,
+          },
+        };
+      })
+    : childList;
 
   return (
     <For

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

@@ -3,6 +3,19 @@ import { renderShellPanel } from "../shell/shell-panel";
 import { SidebarResponsiveContext } from "./sidebar.context";
 import type { SidebarPanelProps } from "./sidebar.types";
 
+const DEFAULT_SIDEBAR_RESPONSIVE_CONTEXT = {
+  active: () => false,
+  collapseLabel: () => "Menu",
+  closePanel: () => undefined,
+  iconCollapsed: () => false,
+  isRailCollapsible: () => false,
+  orientation: () => "vertical" as const,
+  panelId: () => undefined,
+  panelOpen: () => false,
+  togglePanel: () => undefined,
+  toggleRail: () => undefined,
+};
+
 export function SidebarPanel(props: SidebarPanelProps): JSX.Element | null {
   const {
     active: activeProp,
@@ -27,32 +40,10 @@ export function SidebarPanel(props: SidebarPanelProps): JSX.Element | null {
         try {
           return readContext(SidebarResponsiveContext);
         } catch {
-          return {
-            active: () => false,
-            collapseLabel: () => "Menu",
-            closePanel: () => undefined,
-            iconCollapsed: () => false,
-            isRailCollapsible: () => false,
-            orientation: () => "vertical" as const,
-            panelId: () => undefined,
-            panelOpen: () => false,
-            togglePanel: () => undefined,
-            toggleRail: () => undefined,
-          };
+          return DEFAULT_SIDEBAR_RESPONSIVE_CONTEXT;
         }
       })()
-    : {
-        active: () => false,
-        collapseLabel: () => "Menu",
-        closePanel: () => undefined,
-        iconCollapsed: () => false,
-        isRailCollapsible: () => false,
-        orientation: () => "vertical" as const,
-        panelId: () => undefined,
-        panelOpen: () => false,
-        togglePanel: () => undefined,
-        toggleRail: () => undefined,
-      };
+    : DEFAULT_SIDEBAR_RESPONSIVE_CONTEXT;
   const active = activeProp ?? responsive.active();
   const open = openProp ?? responsive.panelOpen();
   const panelId = panelIdProp ?? responsive.panelId();

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";
@@ -85,6 +86,7 @@ export function ThemeProvider(props: ThemeProviderProps): JSX.Element {
   } = props;
 
   const themeState = state<ThemeName>(readStoredTheme(storageKey) ?? defaultTheme);
+  const currentTheme = themeState();
 
   const setTheme = (nextTheme: ThemeName) => {
     themeState.set(nextTheme);
@@ -99,8 +101,6 @@ export function ThemeProvider(props: ThemeProviderProps): JSX.Element {
     storageKey,
   };
 
-  const currentTheme = themeState();
-
   return (
     <ThemeContext.Scope value={value}>
       <ThemeRootSync theme={currentTheme} />
@@ -186,8 +186,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
@@ -201,7 +202,7 @@ export function ThemeToggle(props: ThemeToggleProps): JSX.Element {
         if (!event.defaultPrevented) theme.setTheme(nextTheme);
       }}
     >
-      {content}
+      <span data-slot="theme-toggle-content">{content}</span>
     </Button>
   );
 }
@@ -230,6 +231,30 @@ 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;
+
+  const props = icon.props as Record<string, unknown> | undefined;
+  if (!props || Object.keys(props).length === 0) {
+    return icon;
+  }
+
+  return {
+    ...icon,
+    props: { ...props },
+  };
+}
+
 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/actions/button.css

@@ -35,6 +35,22 @@
     opacity var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
+:where([data-slot="theme-toggle-content"]) {
+  --_ak-theme-toggle-icon-size: var(--ak-theme-toggle-icon-size, var(--ak-icon-size, 1em));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  min-inline-size: 0;
+}
+
+:where([data-slot="theme-toggle-content"]) > :where([data-slot="icon"], svg) {
+  flex: none;
+  inline-size: var(--_ak-theme-toggle-icon-size);
+  block-size: var(--_ak-theme-toggle-icon-size);
+  color: currentColor;
+}
+
 :where(.btn) > :where([data-slot="icon"], svg),
 :where([data-slot="button"]) > :where([data-slot="icon"], svg) {
   flex: none;

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";

package/templates/theme/styles/actions/button.css

@@ -35,6 +35,22 @@
     opacity var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
+:where([data-slot="theme-toggle-content"]) {
+  --_ak-theme-toggle-icon-size: var(--ak-theme-toggle-icon-size, var(--ak-icon-size, 1em));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  min-inline-size: 0;
+}
+
+:where([data-slot="theme-toggle-content"]) > :where([data-slot="icon"], svg) {
+  flex: none;
+  inline-size: var(--_ak-theme-toggle-icon-size);
+  block-size: var(--_ak-theme-toggle-icon-size);
+  color: currentColor;
+}
+
 :where(.btn) > :where([data-slot="icon"], svg),
 :where([data-slot="button"]) > :where([data-slot="icon"], svg) {
   flex: none;