@askrjs/themes 0.0.7 → 0.0.9

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/sidebar/sidebar.tsx

@@ -19,7 +19,10 @@ import type { CollapseIconPlacement } from "../shell/shell-nav.types";
 
 type SidebarChildren = {
   brand?: unknown;
-  items: unknown[];
+  drawerItems: unknown[];
+  drawerSourceItems: unknown[];
+  explicitPanelItems: unknown[];
+  toggle?: SidebarToggleConfig;
 };
 
 type SidebarToggleConfig = {
@@ -27,38 +30,49 @@ type SidebarToggleConfig = {
   expandedIcon?: unknown;
 };
 
+function isSidebarToggleChild(child: unknown): boolean {
+  return isJsxElement(child) && child.type === SidebarToggle;
+}
+
 function splitSidebarChildren(children: unknown[]): SidebarChildren {
-  const brandIndex = children.findIndex((child) => isJsxElement(child) && child.type === NavBrand);
+  const explicitPanelItems: unknown[] = [];
+  const drawerSourceItems: unknown[] = [];
+  let drawerItems: unknown[] | undefined;
+  let brand: unknown;
+  let hasBrand = false;
+  let hasToggle = false;
+  let toggle: SidebarToggleConfig | undefined;
 
-  if (brandIndex === -1) {
-    return { items: children };
-  }
+  for (const child of children) {
+    if (isShellPanelChild(child, SidebarPanel)) {
+      explicitPanelItems.push(child);
+      continue;
+    }
 
-  return {
-    brand: children[brandIndex],
-    items: children.filter((_, index) => index !== brandIndex),
-  };
-}
+    if (!hasToggle && isSidebarToggleChild(child)) {
+      hasToggle = true;
+      toggle = (child as { props?: SidebarToggleConfig } | undefined)?.props;
+      continue;
+    }
 
-function isSidebarToggleChild(child: unknown): boolean {
-  return isJsxElement(child) && child.type === SidebarToggle;
-}
+    drawerSourceItems.push(child);
 
-function splitSidebarToggle(children: unknown[]): {
-  items: unknown[];
-  toggle?: SidebarToggleConfig;
-} {
-  const toggleIndex = children.findIndex((child) => isSidebarToggleChild(child));
+    if (!hasBrand && isJsxElement(child) && child.type === NavBrand) {
+      brand = child;
+      hasBrand = true;
+      drawerItems ??= drawerSourceItems.slice(0, drawerSourceItems.length - 1);
+      continue;
+    }
 
-  if (toggleIndex === -1) {
-    return { items: children };
+    drawerItems?.push(child);
   }
 
-  const toggleChild = children[toggleIndex] as { props?: SidebarToggleConfig } | undefined;
-
   return {
-    items: children.filter((_, index) => index !== toggleIndex),
-    toggle: toggleChild?.props,
+    brand: hasBrand ? brand : undefined,
+    drawerItems: drawerItems ?? drawerSourceItems,
+    drawerSourceItems,
+    explicitPanelItems,
+    toggle,
   };
 }
 
@@ -152,8 +166,7 @@ export function Sidebar(props: SidebarProps): JSX.Element {
   const effectiveCollapseLabel =
     collapseLabel ?? (typeof ariaLabel === "string" ? ariaLabel : undefined) ?? "Menu";
   const childItems = toChildArray(children);
-  const explicitPanelItems = childItems.filter((child) => isShellPanelChild(child, SidebarPanel));
-  const contentItems = childItems.filter((child) => !isShellPanelChild(child, SidebarPanel));
+  const sidebarChildren = splitSidebarChildren(childItems);
   const isResponsive = breakpoint !== undefined;
   const responsiveCollapsedState = state(isResponsive ? isSidebarCollapsed(breakpoint) : false);
   const drawerOpenState = state(false);
@@ -202,10 +215,11 @@ export function Sidebar(props: SidebarProps): JSX.Element {
 
     setRailCollapsed(!isRailCollapsed);
   };
-  const { items: drawerSourceItems, toggle: railToggleConfig } = splitSidebarToggle(contentItems);
-  const { brand: drawerBrand, items: drawerItems } = splitSidebarChildren(drawerSourceItems);
-  const desktopChildren = renderKeyedShellChildren(drawerSourceItems, "sidebar-desktop");
-  const drawerChildren = renderKeyedShellChildren(drawerItems, "sidebar-drawer");
+  const desktopChildren = renderKeyedShellChildren(
+    sidebarChildren.drawerSourceItems,
+    "sidebar-desktop",
+  );
+  const drawerChildren = renderKeyedShellChildren(sidebarChildren.drawerItems, "sidebar-drawer");
 
   const contextValue = {
     active: () => isResponsive,
@@ -227,12 +241,16 @@ export function Sidebar(props: SidebarProps): JSX.Element {
     panelId,
   };
   const panels =
-    explicitPanelItems.length > 0 ? (
-      renderKeyedShellPanelChildren(explicitPanelItems, "sidebar-panel", panelContext)
+    sidebarChildren.explicitPanelItems.length > 0 ? (
+      renderKeyedShellPanelChildren(
+        sidebarChildren.explicitPanelItems,
+        "sidebar-panel",
+        panelContext,
+      )
     ) : isResponsive ? (
       <SidebarPanel
         active={isResponsive}
-        brand={drawerBrand}
+        brand={sidebarChildren.brand}
         collapseLabel={effectiveCollapseLabel}
         onClose={closeDrawer}
         onClick={closeDrawerOnNavActivation}
@@ -305,7 +323,7 @@ export function Sidebar(props: SidebarProps): JSX.Element {
                   {renderSidebarRailContents(
                     effectiveCollapseLabel,
                     isRailCollapsed,
-                    railToggleConfig,
+                    sidebarChildren.toggle,
                   )}
                 </button>
               </div>

package/src/components/theme/theme.tsx

@@ -1,4 +1,4 @@
-import { defineContext, readContext, state } from "@askrjs/askr";
+import { defineContext, getSignal, readContext, state } from "@askrjs/askr";
 import type { JSXElement } from "@askrjs/askr/foundations/structures";
 import { resource } from "@askrjs/askr/resources";
 import { Button } from "@askrjs/ui";
@@ -65,6 +65,10 @@ export const CAT_THEME_OPTIONS: readonly ThemeOption[] = [
 ];
 
 const DEFAULT_STORAGE_KEY = "askr-theme";
+// Passive mount sync should not overwrite a newer user/provider-initiated change.
+let rootThemeRevision = 0;
+let explicitRootThemeOwner: symbol | undefined;
+const registeredProviderSignals = new WeakSet<AbortSignal>();
 
 const ThemeContext = defineContext<ThemeContextValue>({
   theme: () => "system",
@@ -85,11 +89,29 @@ export function ThemeProvider(props: ThemeProviderProps): JSX.Element {
     storageKey = DEFAULT_STORAGE_KEY,
   } = props;
 
+  const providerId = state<symbol>(Symbol("ThemeProvider"))();
+  const providerSignal = getSignal();
   const themeState = state<ThemeName>(readStoredTheme(storageKey) ?? defaultTheme);
+  const currentTheme = themeState();
+
+  if (!registeredProviderSignals.has(providerSignal)) {
+    registeredProviderSignals.add(providerSignal);
+    providerSignal.addEventListener(
+      "abort",
+      () => {
+        if (explicitRootThemeOwner === providerId) {
+          explicitRootThemeOwner = undefined;
+        }
+      },
+      { once: true },
+    );
+  }
 
   const setTheme = (nextTheme: ThemeName) => {
     themeState.set(nextTheme);
     writeStoredTheme(storageKey, nextTheme);
+    explicitRootThemeOwner = providerId;
+    rootThemeRevision += 1;
     syncThemeRoot(nextTheme);
   };
 
@@ -100,18 +122,17 @@ export function ThemeProvider(props: ThemeProviderProps): JSX.Element {
     storageKey,
   };
 
-  const currentTheme = themeState();
-
   return (
     <ThemeContext.Scope value={value}>
-      <ThemeRootSync theme={currentTheme} />
+      <ThemeRootSync providerId={providerId} theme={currentTheme} />
       <div data-slot="theme-provider">{children}</div>
     </ThemeContext.Scope>
   );
 }
 
-function ThemeRootSync(props: { theme: ThemeName }): JSX.Element | null {
-  const { theme } = props;
+function ThemeRootSync(props: { providerId: symbol; theme: ThemeName }): JSX.Element | null {
+  const { providerId, theme } = props;
+  const expectedRootThemeRevision = rootThemeRevision;
 
   resource(
     ({ signal }: { signal: AbortSignal }) => {
@@ -122,7 +143,11 @@ function ThemeRootSync(props: { theme: ThemeName }): JSX.Element | null {
 
       const timeoutId = window.setTimeout(() => {
         if (!signal.aborted) {
-          syncThemeRoot(theme);
+          syncThemeRoot(theme, {
+            expectedRevision: expectedRootThemeRevision,
+            passive: true,
+            providerId,
+          });
         }
       }, 0);
 
@@ -145,20 +170,23 @@ function ThemeRootSync(props: { theme: ThemeName }): JSX.Element | null {
 export function ThemePicker(props: ThemePickerProps): JSX.Element {
   const theme = useTheme();
   const { themes = theme.themes, label = "Theme", ...rest } = props;
+  const currentTheme = theme.theme();
 
   return (
     <select
       {...rest}
       aria-label={rest["aria-label"] ?? label}
       data-slot="theme-picker"
-      value={theme.theme()}
+      value={currentTheme}
       onChange={(event: Event) => {
-        const target = event.currentTarget as HTMLSelectElement;
-        theme.setTheme(target.value as ThemeName);
+        const target = getThemePickerTarget(event);
+        if (target) {
+          theme.setTheme(target.value as ThemeName);
+        }
       }}
     >
       {themes.map((option) => (
-        <option key={option.value} value={option.value}>
+        <option key={option.value} value={option.value} selected={option.value === currentTheme}>
           {option.label}
         </option>
       ))}
@@ -166,6 +194,23 @@ export function ThemePicker(props: ThemePickerProps): JSX.Element {
   );
 }
 
+function getThemePickerTarget(event: Event): HTMLSelectElement | null {
+  if (typeof HTMLSelectElement === "undefined") {
+    return null;
+  }
+
+  const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+  const candidates = [event.target, event.currentTarget, ...path];
+
+  for (const candidate of candidates) {
+    if (candidate instanceof HTMLSelectElement) {
+      return candidate;
+    }
+  }
+
+  return null;
+}
+
 export function ThemeToggle(props: ThemeToggleProps): JSX.Element {
   const theme = useTheme();
   const {
@@ -200,10 +245,12 @@ export function ThemeToggle(props: ThemeToggleProps): JSX.Element {
       data-next-theme={nextTheme}
       onPress={(event) => {
         onPress?.(event);
-        if (!event.defaultPrevented) theme.setTheme(nextTheme);
+        if (!event.defaultPrevented && !Object.is(nextTheme, currentTheme)) {
+          theme.setTheme(nextTheme);
+        }
       }}
     >
-      {content}
+      <span data-slot="theme-toggle-content">{content}</span>
     </Button>
   );
 }
@@ -245,19 +292,43 @@ function isJSXElement(value: unknown): value is JSXElement {
 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: { ...(icon.props as Record<string, unknown> | undefined) },
+    props: { ...props },
   };
 }
 
-function syncThemeRoot(themeChoice: ThemeName | null | undefined): void {
+function syncThemeRoot(
+  themeChoice: ThemeName | null | undefined,
+  options?: { expectedRevision?: number; passive?: boolean; providerId?: symbol },
+): void {
   if (typeof document === "undefined") {
     return;
   }
 
   const html = document.documentElement;
 
+  if (
+    options?.passive &&
+    options.expectedRevision !== undefined &&
+    options.expectedRevision !== rootThemeRevision
+  ) {
+    return;
+  }
+
+  if (
+    options?.passive &&
+    explicitRootThemeOwner !== undefined &&
+    explicitRootThemeOwner !== options.providerId
+  ) {
+    return;
+  }
+
   if (themeChoice == null) {
     html.removeAttribute("data-theme");
     html.removeAttribute("data-theme-choice");
@@ -276,7 +347,8 @@ function syncThemeRoot(themeChoice: ThemeName | null | undefined): void {
 function readStoredTheme(storageKey: string): ThemeName | undefined {
   if (typeof window === "undefined") return undefined;
   try {
-    return (window.localStorage.getItem(storageKey) as ThemeName | null) ?? undefined;
+    const storedTheme = window.localStorage.getItem(storageKey);
+    return storedTheme ? (storedTheme as ThemeName) : undefined;
   } catch {
     return undefined;
   }

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/display/avatar.css

@@ -19,12 +19,18 @@
 }
 
 :where(.avatar-fallback, [data-slot="avatar-fallback"]) {
+  box-sizing: border-box;
   display: inline-grid;
   place-items: center;
   inline-size: 100%;
   block-size: 100%;
+  min-inline-size: 0;
+  max-inline-size: 100%;
   font-size: var(--ak-font-size-sm);
   font-weight: var(--ak-font-weight-semibold);
   line-height: 1;
-  overflow-wrap: anywhere;
+  overflow: hidden;
+  overflow-wrap: normal;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

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

@@ -15,7 +15,8 @@
   font-weight: var(--ak-font-weight-semibold);
   line-height: 1;
   letter-spacing: 0;
-  overflow-wrap: anywhere;
+  overflow-wrap: normal;
+  word-break: normal;
 }
 
 :where(.badge, [data-slot="badge"]) > :where([data-slot="icon"]) {

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

@@ -57,7 +57,9 @@
   color: var(--ak-color-text-muted);
   font-weight: var(--ak-font-weight-semibold);
   letter-spacing: 0.04em;
+  overflow-wrap: normal;
   text-transform: uppercase;
+  word-break: normal;
   white-space: normal;
 }
 

package/src/themes/default/styles/forms/select.css

@@ -125,16 +125,22 @@
 }
 
 :where(.select-item, [data-slot="select-item"]) {
+  appearance: none;
   display: flex;
   align-items: center;
+  inline-size: 100%;
   min-height: var(--ak-density-control-height-md);
   padding: 0 var(--ak-density-control-padding-x-md);
+  border: 0;
   border-radius: var(--ak-radius-md);
+  background: transparent;
   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);

package/src/themes/default/styles/shell/navbar.css

@@ -1,6 +1,7 @@
 @layer components {
   :where(.navbar, [data-slot="navbar"]) {
     position: relative;
+    container-type: inline-size;
     display: flex;
     flex-direction: column;
     align-items: stretch;
@@ -157,7 +158,7 @@
     min-inline-size: 0;
   }
 
-  @media (min-width: 48rem) {
+  @container (min-width: 48rem) {
     :where(.navbar-shell, [data-slot="navbar-shell"]):has(
       > :where(.navbar-group[data-align="center"], [data-slot="navbar-group"][data-align="center"])
     ) {

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;

package/templates/theme/styles/display/avatar.css

@@ -19,12 +19,18 @@
 }
 
 :where(.avatar-fallback, [data-slot="avatar-fallback"]) {
+  box-sizing: border-box;
   display: inline-grid;
   place-items: center;
   inline-size: 100%;
   block-size: 100%;
+  min-inline-size: 0;
+  max-inline-size: 100%;
   font-size: var(--ak-font-size-sm);
   font-weight: var(--ak-font-weight-semibold);
   line-height: 1;
-  overflow-wrap: anywhere;
+  overflow: hidden;
+  overflow-wrap: normal;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

package/templates/theme/styles/display/badge.css

@@ -15,7 +15,8 @@
   font-weight: var(--ak-font-weight-semibold);
   line-height: 1;
   letter-spacing: 0;
-  overflow-wrap: anywhere;
+  overflow-wrap: normal;
+  word-break: normal;
 }
 
 :where(.badge, [data-slot="badge"]) > :where([data-slot="icon"]) {

package/templates/theme/styles/display/table.css

@@ -57,7 +57,9 @@
   color: var(--ak-color-text-muted);
   font-weight: var(--ak-font-weight-semibold);
   letter-spacing: 0.04em;
+  overflow-wrap: normal;
   text-transform: uppercase;
+  word-break: normal;
   white-space: normal;
 }
 

package/templates/theme/styles/forms/select.css

@@ -125,16 +125,22 @@
 }
 
 :where(.select-item, [data-slot="select-item"]) {
+  appearance: none;
   display: flex;
   align-items: center;
+  inline-size: 100%;
   min-height: var(--ak-density-control-height-md);
   padding: 0 var(--ak-density-control-padding-x-md);
+  border: 0;
   border-radius: var(--ak-radius-md);
+  background: transparent;
   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);

package/templates/theme/styles/shell/navbar.css

@@ -1,6 +1,7 @@
 @layer components {
   :where(.navbar, [data-slot="navbar"]) {
     position: relative;
+    container-type: inline-size;
     display: flex;
     flex-direction: column;
     align-items: stretch;
@@ -157,7 +158,7 @@
     min-inline-size: 0;
   }
 
-  @media (min-width: 48rem) {
+  @container (min-width: 48rem) {
     :where(.navbar-shell, [data-slot="navbar-shell"]):has(
       > :where(.navbar-group[data-align="center"], [data-slot="navbar-group"][data-align="center"])
     ) {