@askrjs/themes 0.0.16 → 0.0.17

package/src/components/theme/theme.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { defineScope, getSignal, readScope, state } from "@askrjs/askr";
 import type { JSXElement } from "@askrjs/askr/foundations/structures";
 import { Button } from "@askrjs/ui";
@@ -15,6 +16,7 @@ export type ThemeOption = {
 
 export type ThemeScopeValue = {
   theme: () => ThemeName;
+  resolvedSystemTheme: () => "light" | "dark";
   setTheme: (theme: ThemeName) => void;
   themes: readonly ThemeOption[];
   storageKey: string;
@@ -66,6 +68,7 @@ export const CAT_THEME_OPTIONS: readonly ThemeOption[] = [
 const DEFAULT_STORAGE_KEY = "askr-theme";
 const STATIC_CHILDREN = Symbol.for("askr.static-children");
 const STATIC_CHILD_SLOTS_CACHE = Symbol.for("__askrStaticChildSlots");
+const documentThemeCoordinators = new WeakMap<Document, ThemeCoordinator>();
 type ThemeCoordinator = ReturnType<typeof createThemeCoordinator>;
 type InternalThemeScopeValue = ThemeScopeValue & {
   readonly coordinator: ThemeCoordinator | null;
@@ -74,6 +77,7 @@ type InternalThemeScopeValue = ThemeScopeValue & {
 
 const ThemeScopeContext = defineScope<InternalThemeScopeValue>({
   theme: () => "system",
+  resolvedSystemTheme: () => "light",
   setTheme: () => undefined,
   themes: DEFAULT_THEME_OPTIONS,
   storageKey: DEFAULT_STORAGE_KEY,
@@ -99,10 +103,11 @@ export function ThemeScope(props: ThemeScopeProps): JSX.Element {
   // Browser persistence is adopted from the committed root ref, after Askr's
   // hydration verifier has accepted the server markup.
   const themeState = state<ThemeName>(defaultTheme);
+  const localResolvedSystemTheme = state<"light" | "dark">("light");
   const persistenceAdoption = state({ complete: false })();
   const currentTheme = themeState();
   const parentScope = readScope(ThemeScopeContext);
-  const ownedCoordinator = state<ThemeCoordinator>(createThemeCoordinator())();
+  const ownedCoordinator = state<ThemeCoordinator>(getDefaultThemeCoordinator())();
   const coordinator = parentScope.coordinator ?? ownedCoordinator;
   const scopeDepth = parentScope.depth + 1;
   coordinator.register(scopeId, scopeDepth, currentTheme, scopeSignal);
@@ -113,8 +118,12 @@ export function ThemeScope(props: ThemeScopeProps): JSX.Element {
     coordinator.activate(scopeId, nextTheme);
   };
 
+  const resolvedSystemTheme = parentScope.coordinator
+    ? parentScope.resolvedSystemTheme
+    : localResolvedSystemTheme;
   const value: InternalThemeScopeValue = {
     theme: themeState,
+    resolvedSystemTheme,
     setTheme,
     themes,
     storageKey,
@@ -129,7 +138,11 @@ export function ThemeScope(props: ThemeScopeProps): JSX.Element {
         ref={
           parentScope.coordinator === null
             ? (element: HTMLElement | null) => {
-                coordinator.attach(element);
+                coordinator.attach(
+                  element,
+                  (nextTheme) => localResolvedSystemTheme.set(nextTheme),
+                  scopeSignal,
+                );
                 if (!element || persistenceAdoption.complete) return;
                 persistenceAdoption.complete = true;
                 const storedTheme = readStoredTheme(storageKey);
@@ -147,6 +160,19 @@ export function ThemeScope(props: ThemeScopeProps): JSX.Element {
   );
 }
 
+function getDefaultThemeCoordinator(): ThemeCoordinator {
+  if (typeof document === "undefined") {
+    return createThemeCoordinator();
+  }
+
+  const existing = documentThemeCoordinators.get(document);
+  if (existing) return existing;
+
+  const coordinator = createThemeCoordinator();
+  documentThemeCoordinators.set(document, coordinator);
+  return coordinator;
+}
+
 function createThemeCoordinator() {
   const scopes = new Map<
     symbol,
@@ -191,8 +217,21 @@ function createThemeCoordinator() {
   };
 
   return Object.freeze({
-    attach(element: HTMLElement | null) {
+    attach(
+      element: HTMLElement | null,
+      onResolvedSystemTheme: (themeName: "light" | "dark") => void,
+      signal: AbortSignal,
+    ) {
       if (element) root = element.getRootNode();
+      if (element && typeof window !== "undefined" && typeof window.matchMedia === "function") {
+        const media = window.matchMedia("(prefers-color-scheme: dark)");
+        const update = () => onResolvedSystemTheme(media.matches ? "dark" : "light");
+        update();
+        media.addEventListener?.("change", update);
+        signal.addEventListener("abort", () => media.removeEventListener?.("change", update), {
+          once: true,
+        });
+      }
       schedule();
     },
     register(id: symbol, depth: number, themeName: ThemeName, signal: AbortSignal) {
@@ -282,7 +321,7 @@ export function ThemeToggle(props: ThemeToggleProps): JSX.Element {
   } = props;
 
   const currentTheme = activeTheme.theme();
-  const nextTheme = getNextTheme(currentTheme, themes, getResolvedSystemTheme());
+  const nextTheme = getNextTheme(currentTheme, themes, activeTheme.resolvedSystemTheme());
   const renderContext = { theme: currentTheme, nextTheme };
   const ariaLabel = (rest as Record<string, unknown>)["aria-label"];
   const themedIcon = resolveThemeToggleIcon(currentTheme, nextTheme, {
@@ -334,14 +373,6 @@ function getNextTheme(
   return themes[index >= 0 && index < themes.length - 1 ? index + 1 : 0]!;
 }
 
-function getResolvedSystemTheme(): "light" | "dark" {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
-    return "light";
-  }
-
-  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-}
-
 function getThemeIcon(
   theme: ThemeName,
   icons: Pick<ThemeToggleProps, "lightIcon" | "darkIcon" | "systemIcon">,

package/src/components/toolbar/toolbar.tsx

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

package/src/components.ts

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

package/src/ssr.ts

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

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

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

package/src/themes/default/styles/layout/layout.css

@@ -30,10 +30,12 @@
   --ak-flex-grow-sm: var(--ak-flex-grow-base);
   --ak-flex-grow-md: var(--ak-flex-grow-sm);
   --ak-flex-grow-lg: var(--ak-flex-grow-md);
+  --ak-flex-grow-xl: var(--ak-flex-grow-lg);
   --ak-flex-shrink-base: 1;
   --ak-flex-shrink-sm: var(--ak-flex-shrink-base);
   --ak-flex-shrink-md: var(--ak-flex-shrink-sm);
   --ak-flex-shrink-lg: var(--ak-flex-shrink-md);
+  --ak-flex-shrink-xl: var(--ak-flex-shrink-lg);
   --ak-flex-basis-base: auto;
   --ak-flex-basis-sm: var(--ak-flex-basis-base);
   --ak-flex-basis-md: var(--ak-flex-basis-sm);
@@ -42,24 +44,32 @@
   --ak-min-width-sm: var(--ak-min-width-base);
   --ak-min-width-md: var(--ak-min-width-sm);
   --ak-min-width-lg: var(--ak-min-width-md);
+  --ak-min-width-xl: var(--ak-min-width-lg);
   --ak-max-width-base: none;
   --ak-max-width-sm: var(--ak-max-width-base);
   --ak-max-width-md: var(--ak-max-width-sm);
   --ak-max-width-lg: var(--ak-max-width-md);
+  --ak-max-width-xl: var(--ak-max-width-lg);
   --ak-width-base: auto;
   --ak-width-sm: var(--ak-width-base);
   --ak-width-md: var(--ak-width-sm);
   --ak-width-lg: var(--ak-width-md);
+  --ak-width-xl: var(--ak-width-lg);
   --ak-min-height-base: auto;
   --ak-min-height-sm: var(--ak-min-height-base);
   --ak-min-height-md: var(--ak-min-height-sm);
   --ak-min-height-lg: var(--ak-min-height-md);
+  --ak-min-height-xl: var(--ak-min-height-lg);
   --ak-max-height-base: none;
   --ak-max-height-sm: var(--ak-max-height-base);
+  --ak-max-height-md: var(--ak-max-height-sm);
+  --ak-max-height-lg: var(--ak-max-height-md);
+  --ak-max-height-xl: var(--ak-max-height-lg);
   --ak-height-base: auto;
   --ak-height-sm: var(--ak-height-base);
   --ak-height-md: var(--ak-height-sm);
   --ak-height-lg: var(--ak-height-md);
+  --ak-height-xl: var(--ak-height-lg);
   --ak-m-base: 0;
   --ak-m-sm: var(--ak-m-base);
   --ak-m-md: var(--ak-m-sm);
@@ -114,6 +124,12 @@
   --ak-border-sm: var(--ak-border-base);
   --ak-border-md: var(--ak-border-sm);
   --ak-border-lg: var(--ak-border-md);
+  --ak-border-xl: var(--ak-border-lg);
+  --ak-border-top-base: var(--ak-border-base);
+  --ak-border-top-sm: var(--ak-border-top-base);
+  --ak-border-top-md: var(--ak-border-top-sm);
+  --ak-border-top-lg: var(--ak-border-top-md);
+  --ak-border-top-xl: var(--ak-border-top-lg);
   --ak-border-bottom-base: var(--ak-border-base);
   --ak-border-bottom-sm: var(--ak-border-bottom-base);
   --ak-border-bottom-md: var(--ak-border-bottom-sm);
@@ -122,6 +138,7 @@
   --ak-border-right-sm: var(--ak-border-right-base);
   --ak-border-right-md: var(--ak-border-right-sm);
   --ak-border-right-lg: var(--ak-border-right-md);
+  --ak-border-right-xl: var(--ak-border-right-lg);
   --ak-border-radius-base: 0;
   --ak-border-radius-sm: var(--ak-border-radius-base);
   --ak-border-radius-md: var(--ak-border-radius-sm);
@@ -130,10 +147,12 @@
   --ak-background-sm: var(--ak-background-base);
   --ak-background-md: var(--ak-background-sm);
   --ak-background-lg: var(--ak-background-md);
+  --ak-background-xl: var(--ak-background-lg);
   --ak-box-shadow-base: none;
   --ak-box-shadow-sm: var(--ak-box-shadow-base);
   --ak-box-shadow-md: var(--ak-box-shadow-sm);
   --ak-box-shadow-lg: var(--ak-box-shadow-md);
+  --ak-box-shadow-xl: var(--ak-box-shadow-lg);
 
   box-sizing: border-box;
   display: var(--ak-display-base, flex);
@@ -168,6 +187,7 @@
   overflow-x: var(--ak-overflow-x-base, var(--ak-overflow-base, visible));
   overflow-y: var(--ak-overflow-y-base, var(--ak-overflow-base, visible));
   border: var(--ak-border-base, 0 solid transparent);
+  border-top: var(--ak-border-top-base, var(--ak-border-base, 0 solid transparent));
   border-bottom: var(--ak-border-bottom-base, var(--ak-border-base, 0 solid transparent));
   border-right: var(--ak-border-right-base, var(--ak-border-base, 0 solid transparent));
   border-radius: var(--ak-border-radius-base, 0);
@@ -215,6 +235,10 @@
       var(--ak-overflow-y-base, var(--ak-overflow-sm, var(--ak-overflow-base, visible)))
     );
     border: var(--ak-border-sm, var(--ak-border-base, 0 solid transparent));
+    border-top: var(
+      --ak-border-top-sm,
+      var(--ak-border-top-base, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
+    );
     border-bottom: var(
       --ak-border-bottom-sm,
       var(--ak-border-bottom-base, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
@@ -251,6 +275,7 @@
     max-width: var(--ak-max-width-md, var(--ak-max-width-sm, var(--ak-max-width-base, none)));
     width: var(--ak-width-md, var(--ak-width-sm, var(--ak-width-base, auto)));
     min-height: var(--ak-min-height-md, var(--ak-min-height-sm, var(--ak-min-height-base, auto)));
+    max-height: var(--ak-max-height-md, var(--ak-max-height-sm, var(--ak-max-height-base, none)));
     height: var(--ak-height-md, var(--ak-height-sm, var(--ak-height-base, auto)));
     margin: var(--ak-m-md, var(--ak-m-sm, var(--ak-m-base, 0)));
     margin-inline: var(
@@ -274,6 +299,16 @@
     top: var(--ak-top-md, var(--ak-top-sm, var(--ak-top-base, auto)));
     z-index: var(--ak-z-index-md, var(--ak-z-index-sm, var(--ak-z-index-base, auto)));
     border: var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)));
+    border-top: var(
+      --ak-border-top-md,
+      var(
+        --ak-border-top-sm,
+        var(
+          --ak-border-top-base,
+          var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
+        )
+      )
+    );
     border-bottom: var(
       --ak-border-bottom-md,
       var(
@@ -411,6 +446,22 @@
       --ak-border-lg,
       var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
     );
+    border-top: var(
+      --ak-border-top-lg,
+      var(
+        --ak-border-top-md,
+        var(
+          --ak-border-top-sm,
+          var(
+            --ak-border-top-base,
+            var(
+              --ak-border-lg,
+              var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
+            )
+          )
+        )
+      )
+    );
     border-bottom: var(
       --ak-border-bottom-lg,
       var(
@@ -495,6 +546,27 @@
       --ak-gap-xl,
       var(--ak-gap-lg, var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-base, 0))))
     );
+    flex-grow: var(
+      --ak-flex-grow-xl,
+      var(
+        --ak-flex-grow-lg,
+        var(--ak-flex-grow-md, var(--ak-flex-grow-sm, var(--ak-flex-grow-base, 0)))
+      )
+    );
+    flex-shrink: var(
+      --ak-flex-shrink-xl,
+      var(
+        --ak-flex-shrink-lg,
+        var(--ak-flex-shrink-md, var(--ak-flex-shrink-sm, var(--ak-flex-shrink-base, 1)))
+      )
+    );
+    min-width: var(
+      --ak-min-width-xl,
+      var(
+        --ak-min-width-lg,
+        var(--ak-min-width-md, var(--ak-min-width-sm, var(--ak-min-width-base, 0)))
+      )
+    );
     width: var(
       --ak-width-xl,
       var(--ak-width-lg, var(--ak-width-md, var(--ak-width-sm, var(--ak-width-base, auto))))
@@ -513,6 +585,17 @@
         var(--ak-min-height-md, var(--ak-min-height-sm, var(--ak-min-height-base, auto)))
       )
     );
+    max-height: var(
+      --ak-max-height-xl,
+      var(
+        --ak-max-height-lg,
+        var(--ak-max-height-md, var(--ak-max-height-sm, var(--ak-max-height-base, none)))
+      )
+    );
+    height: var(
+      --ak-height-xl,
+      var(--ak-height-lg, var(--ak-height-md, var(--ak-height-sm, var(--ak-height-base, auto))))
+    );
     margin: var(--ak-m-xl, var(--ak-m-lg, var(--ak-m-md, var(--ak-m-sm, var(--ak-m-base, 0)))));
     margin-inline: var(
       --ak-mx-xl,
@@ -601,6 +684,31 @@
         var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
       )
     );
+    border-top: var(
+      --ak-border-top-xl,
+      var(
+        --ak-border-top-lg,
+        var(
+          --ak-border-top-md,
+          var(
+            --ak-border-top-sm,
+            var(
+              --ak-border-top-base,
+              var(
+                --ak-border-xl,
+                var(
+                  --ak-border-lg,
+                  var(
+                    --ak-border-md,
+                    var(--ak-border-sm, var(--ak-border-base, 0 solid transparent))
+                  )
+                )
+              )
+            )
+          )
+        )
+      )
+    );
     border-bottom: var(
       --ak-border-bottom-xl,
       var(

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

@@ -145,7 +145,10 @@
 }
 
 :where([data-slot="navbar"][data-collapse-at])
-  :where([data-slot="navbar-collapse"][open] [data-slot="navbar-content"]) {
+  :where(
+    [data-slot="navbar-collapse"] [data-slot="navbar-content"][data-state="open"],
+    [data-slot="navbar-collapse"][open] [data-slot="navbar-content"]
+  ) {
   display: flex;
 }
 

package/src/themes/default/tokens.css

@@ -174,7 +174,7 @@
   --ak-dark-color-primary-hover: color-mix(in oklch, var(--ak-dark-color-primary) 90%, transparent);
   --ak-dark-color-primary-active: color-mix(in oklch, var(--ak-dark-color-primary) 84%, black);
   --ak-dark-color-primary-soft: oklch(0.269 0 0);
-  --ak-dark-color-primary-ink: oklch(0.205 0 0);
+  --ak-dark-color-primary-ink: oklch(0.985 0 0);
 
   --ak-dark-color-text: oklch(0.985 0 0);
   --ak-dark-color-text-muted: oklch(0.708 0 0);

package/src/themes/presets/ginger.css

@@ -1,7 +1,7 @@
 [data-theme="ginger"] {
-  --ak-color-primary: #c65f1a;
-  --ak-color-primary-hover: #a94c12;
-  --ak-color-primary-active: #8f3d0d;
+  --ak-color-primary: #a8440e;
+  --ak-color-primary-hover: #8f3708;
+  --ak-color-primary-active: #763006;
   --ak-color-primary-soft: #ffe2c5;
   --ak-color-primary-ink: #74300c;
   --ak-color-text: #2e251f;

package/templates/theme/styles/base/text.css

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

package/templates/theme/styles/display/progress-circle.css

@@ -12,6 +12,8 @@
 }
 
 :where([data-slot="progress-circle-indicator"]) {
+  display: grid;
+  place-items: center;
   inline-size: 1.9rem;
   block-size: 1.9rem;
   border-radius: 999px;

package/templates/theme/styles/forms/input-group.css

@@ -1,7 +1,7 @@
 :where(.input-group, [data-slot="input-group"]) {
   display: flex;
   align-items: stretch;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   width: 100%;
   gap: 0;
 }
@@ -11,6 +11,7 @@
 }
 
 :where(.input-group[data-attached="false"], [data-slot="input-group"][data-attached="false"]) {
+  flex-wrap: wrap;
   gap: var(--ak-space-xs);
 }