@askrjs/themes 0.0.16 → 0.0.17

package/dist/themes/default/index.css

@@ -160,7 +160,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(26.9% 0 0);
-  --ak-dark-color-primary-ink: oklch(20.5% 0 0);
+  --ak-dark-color-primary-ink: oklch(98.5% 0 0);
   --ak-dark-color-text: oklch(98.5% 0 0);
   --ak-dark-color-text-muted: oklch(70.8% 0 0);
   --ak-dark-color-text-subtle: oklch(55.6% 0 0);
@@ -573,19 +573,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"]) {
@@ -678,10 +678,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);
@@ -690,24 +692,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);
@@ -762,6 +772,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);
@@ -770,6 +786,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);
@@ -778,10 +795,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);
   flex-direction: var(--ak-flex-direction-base, column);
@@ -815,6 +834,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);
@@ -856,6 +876,7 @@
     overflow-x: var(--ak-overflow-x-sm, var(--ak-overflow-x-base, var(--ak-overflow-sm, var(--ak-overflow-base, visible))));
     overflow-y: var(--ak-overflow-y-sm, 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))));
     border-right: var(--ak-border-right-sm, var(--ak-border-right-base, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent))));
     border-radius: var(--ak-border-radius-sm, var(--ak-border-radius-base, 0));
@@ -877,6 +898,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(--ak-mx-md, var(--ak-mx-sm, var(--ak-mx-base, var(--ak-m-md, var(--ak-m-sm, var(--ak-m-base, 0))))));
@@ -888,6 +910,7 @@
     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(--ak-border-bottom-sm, var(--ak-border-bottom-base, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent))))));
     border-right: var(--ak-border-right-md, var(--ak-border-right-sm, var(--ak-border-right-base, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent))))));
     border-radius: var(--ak-border-radius-md, var(--ak-border-radius-sm, var(--ak-border-radius-base, 0)));
@@ -920,6 +943,7 @@
     top: var(--ak-top-lg, var(--ak-top-md, var(--ak-top-sm, var(--ak-top-base, auto))));
     z-index: var(--ak-z-index-lg, var(--ak-z-index-md, var(--ak-z-index-sm, var(--ak-z-index-base, auto))));
     border: var(--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(--ak-border-bottom-md, var(--ak-border-bottom-sm, var(--ak-border-bottom-base, var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent))))))));
     border-right: var(--ak-border-right-lg, var(--ak-border-right-md, var(--ak-border-right-sm, var(--ak-border-right-base, var(--ak-border-lg, var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent))))))));
     border-radius: var(--ak-border-radius-lg, var(--ak-border-radius-md, var(--ak-border-radius-sm, var(--ak-border-radius-base, 0))));
@@ -935,9 +959,14 @@
     align-items: var(--ak-align-items-xl, var(--ak-align-items-lg, var(--ak-align-items-md, var(--ak-align-items-sm, var(--ak-align-items-base, stretch)))));
     justify-content: var(--ak-justify-content-xl, var(--ak-justify-content-lg, var(--ak-justify-content-md, var(--ak-justify-content-sm, var(--ak-justify-content-base, flex-start)))));
     gap: var(--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)))));
     max-width: var(--ak-max-width-xl, var(--ak-max-width-lg, var(--ak-max-width-md, var(--ak-max-width-sm, var(--ak-max-width-base, none)))));
     min-height: var(--ak-min-height-xl, var(--ak-min-height-lg, 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, var(--ak-mx-lg, var(--ak-mx-md, var(--ak-mx-sm, var(--ak-mx-base, var(--ak-m-xl, var(--ak-m-lg, var(--ak-m-md, var(--ak-m-sm, var(--ak-m-base, 0))))))))));
     margin-block: var(--ak-my-xl, var(--ak-my-lg, var(--ak-my-md, var(--ak-my-sm, var(--ak-my-base, var(--ak-m-xl, var(--ak-m-lg, var(--ak-m-md, var(--ak-m-sm, var(--ak-m-base, 0))))))))));
@@ -948,6 +977,7 @@
     top: var(--ak-top-xl, var(--ak-top-lg, var(--ak-top-md, var(--ak-top-sm, var(--ak-top-base, auto)))));
     z-index: var(--ak-z-index-xl, var(--ak-z-index-lg, var(--ak-z-index-md, var(--ak-z-index-sm, var(--ak-z-index-base, auto)))));
     border: var(--ak-border-xl, var(--ak-border-lg, 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(--ak-border-bottom-lg, var(--ak-border-bottom-md, var(--ak-border-bottom-sm, var(--ak-border-bottom-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-right: var(--ak-border-right-xl, var(--ak-border-right-lg, var(--ak-border-right-md, var(--ak-border-right-sm, var(--ak-border-right-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-radius: var(--ak-border-radius-xl, var(--ak-border-radius-lg, var(--ak-border-radius-md, var(--ak-border-radius-sm, var(--ak-border-radius-base, 0)))));
@@ -1421,7 +1451,7 @@
   display: inline-flex;
 }
 
-:where([data-slot="navbar"][data-collapse-at]) :where([data-slot="navbar-collapse"][open] [data-slot="navbar-content"]) {
+:where([data-slot="navbar"][data-collapse-at]) :where([data-slot="navbar-collapse"] [data-slot="navbar-content"][data-state="open"], [data-slot="navbar-collapse"][open] [data-slot="navbar-content"]) {
   display: flex;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@askrjs/themes",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "Default theme tokens, styles, and component presets for Askr apps.",
   "keywords": [
     "askr",
@@ -54,6 +54,10 @@
       "types": "./dist/theme.d.ts",
       "import": "./dist/theme.js"
     },
+    "./ssr": {
+      "types": "./dist/ssr.d.ts",
+      "import": "./dist/ssr.js"
+    },
     "./accordion": {
       "types": "./dist/components.d.ts",
       "import": "./dist/components.js"
@@ -329,7 +333,7 @@
   },
   "devDependencies": {
     "@askrjs/askr": ">=0.0.64 <0.1.0",
-    "@askrjs/ui": ">=0.0.12 <0.1.0",
+    "@askrjs/ui": ">=0.0.13 <0.1.0",
     "@askrjs/vite": ">=0.0.5 <0.1.0",
     "@tsdown/css": "0.22.8",
     "@types/node": "^26.0.0",
@@ -343,7 +347,7 @@
   },
   "peerDependencies": {
     "@askrjs/askr": ">=0.0.64 <0.1.0",
-    "@askrjs/ui": ">=0.0.12 <0.1.0"
+    "@askrjs/ui": ">=0.0.13 <0.1.0"
   },
   "engines": {
     "node": ">=18"

package/src/components/_internal/block-layout.ts

@@ -66,6 +66,7 @@ export type BlockLayoutProps = {
   zIndex?: ResponsiveValue<BlockZIndex>;
   background?: ResponsiveValue<BlockBackground>;
   border?: ResponsiveValue<boolean>;
+  borderTop?: ResponsiveValue<boolean>;
   borderBottom?: ResponsiveValue<boolean>;
   borderRight?: ResponsiveValue<boolean>;
   radius?: ResponsiveValue<BlockRadius>;
@@ -163,6 +164,7 @@ const BLOCK_LAYOUT_KEYS = new Set<keyof BlockLayoutProps>([
   "zIndex",
   "background",
   "border",
+  "borderTop",
   "borderBottom",
   "borderRight",
   "radius",
@@ -202,7 +204,8 @@ function resolveSpaceValue(value: string | number): string | number {
   return resolveTokenValue(value, SPACE_TOKEN_MAP);
 }
 
-function resolveSizeValue(value: string): string {
+function resolveSizeValue(value: string, axis: "inline" | "block"): string {
+  if (value === "screen") return axis === "inline" ? "100dvw" : "100dvh";
   return String(resolveTokenValue(value, SIZE_TOKEN_MAP));
 }
 
@@ -289,31 +292,38 @@ export function applyBlockLayoutStyles(
   setResponsiveVar(styles, "mx", props.marginX, resolveSpaceValue);
   setResponsiveVar(styles, "my", props.marginY, resolveSpaceValue);
 
-  setResponsiveVar(styles, "width", props.width, resolveSizeValue);
-  setResponsiveVar(styles, "min-width", props.minWidth, resolveSizeValue);
-  setResponsiveVar(styles, "max-width", props.maxWidth, resolveSizeValue);
-  setResponsiveVar(styles, "height", props.height, resolveSizeValue);
-  setResponsiveVar(styles, "min-height", props.minHeight, resolveSizeValue);
-  setResponsiveVar(styles, "max-height", props.maxHeight, resolveSizeValue);
+  setResponsiveVar(styles, "width", props.width, (value) => resolveSizeValue(value, "inline"));
+  setResponsiveVar(styles, "min-width", props.minWidth, (value) =>
+    resolveSizeValue(value, "inline"),
+  );
+  setResponsiveVar(styles, "max-width", props.maxWidth, (value) =>
+    resolveSizeValue(value, "inline"),
+  );
+  setResponsiveVar(styles, "height", props.height, (value) => resolveSizeValue(value, "block"));
+  setResponsiveVar(styles, "min-height", props.minHeight, (value) =>
+    resolveSizeValue(value, "block"),
+  );
+  setResponsiveVar(styles, "max-height", props.maxHeight, (value) =>
+    resolveSizeValue(value, "block"),
+  );
 
   if (props.rowFrom !== undefined) {
     styles[`--ak-flex-direction-${props.rowFrom}`] = "row";
   }
-  setResponsiveVar(styles, "flex-direction", props.direction, (value) => value);
-  setResponsiveVar(styles, "align-items", props.align, resolveAlignValue);
-  setResponsiveVar(styles, "justify-content", props.justify, resolveJustifyValue);
-  setResponsiveVar(styles, "gap", props.gap, resolveSpaceValue);
-  setResponsiveVar(styles, "flex-grow", props.grow, resolveFlexFlag);
-  setResponsiveVar(styles, "flex-shrink", props.shrink, resolveFlexFlag);
-
   if (props.center !== undefined) {
     setResponsiveVar(styles, "align-items", props.center, (value) =>
-      value ? "center" : undefined,
+      value ? "center" : "stretch",
     );
     setResponsiveVar(styles, "justify-content", props.center, (value) =>
-      value ? "center" : undefined,
+      value ? "center" : "flex-start",
     );
   }
+  setResponsiveVar(styles, "flex-direction", props.direction, (value) => value);
+  setResponsiveVar(styles, "align-items", props.align, resolveAlignValue);
+  setResponsiveVar(styles, "justify-content", props.justify, resolveJustifyValue);
+  setResponsiveVar(styles, "gap", props.gap, resolveSpaceValue);
+  setResponsiveVar(styles, "flex-grow", props.grow, resolveFlexFlag);
+  setResponsiveVar(styles, "flex-shrink", props.shrink, resolveFlexFlag);
 
   if (props.sticky) {
     styles["--ak-position-base"] = "sticky";
@@ -327,6 +337,7 @@ export function applyBlockLayoutStyles(
     String(resolveTokenValue(value, BACKGROUND_TOKEN_MAP)),
   );
   setResponsiveVar(styles, "border", props.border, resolveBorderValue);
+  setResponsiveVar(styles, "border-top", props.borderTop, resolveBorderValue);
   setResponsiveVar(styles, "border-bottom", props.borderBottom, resolveBorderValue);
   setResponsiveVar(styles, "border-right", props.borderRight, resolveBorderValue);
   setResponsiveVar(styles, "border-radius", props.radius, resolveRadiusValue);

package/src/components/_internal/classes.ts

@@ -1,5 +1,18 @@
-export function classes(...values: Array<unknown>): string | undefined {
-  const value = values.filter((item) => typeof item === "string" && item.trim()).join(" ");
+export type ClassAccessor = () => string | undefined;
 
+function readClassValue(value: unknown): string | undefined {
+  const resolved = typeof value === "function" ? (value as () => unknown)() : value;
+  return typeof resolved === "string" && resolved.trim() ? resolved.trim() : undefined;
+}
+
+export function classes(...values: Array<unknown>): string | ClassAccessor | undefined {
+  if (values.some((value) => typeof value === "function")) {
+    return () => {
+      const value = values.map(readClassValue).filter(Boolean).join(" ");
+      return value || undefined;
+    };
+  }
+
+  const value = values.map(readClassValue).filter(Boolean).join(" ");
   return value || undefined;
 }

package/src/components/_internal/jsx.ts

@@ -1,5 +1,5 @@
 import type { JSXElement } from "@askrjs/askr/foundations";
-import { jsx } from "@askrjs/askr/jsx-runtime";
+import { jsx, type JSX } from "@askrjs/askr/jsx-runtime";
 
 const renderIntrinsicElement = jsx as (type: string, props: Record<string, unknown>) => JSX.Element;
 

package/src/components/_internal/style.ts

@@ -1,6 +1,108 @@
-import { cspNonce } from "@askrjs/askr";
+import * as Askr from "@askrjs/askr";
 
 const cssPropertyNameCache = new Map<string, string>();
+const MAX_PROPERTY_CACHE = 256;
+
+const CSS_UNSAFE_RE = /[{}<>\\]/;
+const CSS_URI_SCHEME_RE = /(?:^|[\s(,])([a-z][a-z0-9+.-]*):/i;
+const CSS_FUNCTION_NAME_RE = /([a-z-][a-z0-9-]*)\s*\(/gi;
+const CSS_ALLOWED_FUNCTIONS = new Set([
+  "var",
+  "calc",
+  "min",
+  "max",
+  "clamp",
+  "rgb",
+  "rgba",
+  "hsl",
+  "hsla",
+  "lab",
+  "lch",
+  "oklab",
+  "oklch",
+  "color",
+  "color-mix",
+  "translate",
+  "translatex",
+  "translatey",
+  "translatez",
+  "scale",
+  "scalex",
+  "scaley",
+  "scalez",
+  "rotate",
+  "rotatex",
+  "rotatey",
+  "rotatez",
+  "skew",
+  "skewx",
+  "skewy",
+  "matrix",
+  "matrix3d",
+  "linear-gradient",
+  "radial-gradient",
+  "conic-gradient",
+  "repeating-linear-gradient",
+  "repeating-radial-gradient",
+  "repeating-conic-gradient",
+  "cubic-bezier",
+  "steps",
+]);
+
+function isSafeCssPropertyName(name: string): boolean {
+  if (name.startsWith("--")) return /^--[a-zA-Z0-9_-]+$/.test(name);
+  return /^[a-zA-Z_][a-zA-Z0-9_-]*$/.test(name);
+}
+
+function isSafeCssValue(value: string): boolean {
+  if (CSS_UNSAFE_RE.test(value) || CSS_URI_SCHEME_RE.test(value)) return false;
+
+  for (const match of value.matchAll(CSS_FUNCTION_NAME_RE)) {
+    if (!CSS_ALLOWED_FUNCTIONS.has(match[1]!.toLowerCase())) return false;
+  }
+
+  return true;
+}
+
+function splitCssDeclarations(value: string): string[] {
+  const declarations: string[] = [];
+  let start = 0;
+  let depth = 0;
+  let quote: string | undefined;
+
+  for (let index = 0; index < value.length; index += 1) {
+    const char = value[index]!;
+    if (quote) {
+      if (char === quote && value[index - 1] !== "\\") quote = undefined;
+      continue;
+    }
+    if (char === '"' || char === "'") {
+      quote = char;
+      continue;
+    }
+    if (char === "(") depth += 1;
+    if (char === ")" && depth > 0) depth -= 1;
+    if (char === ";" && depth === 0) {
+      declarations.push(value.slice(start, index));
+      start = index + 1;
+    }
+  }
+
+  declarations.push(value.slice(start));
+  return declarations;
+}
+
+function serializeCssString(value: string): string {
+  const entries: Array<[string, string]> = [];
+  for (const candidate of splitCssDeclarations(value)) {
+    const separator = candidate.indexOf(":");
+    if (separator <= 0) continue;
+    const key = candidate.slice(0, separator).trim();
+    const cssValue = candidate.slice(separator + 1).trim();
+    if (key && cssValue) entries.push([key, cssValue]);
+  }
+  return serializeCssDeclarations(Object.fromEntries(entries));
+}
 
 function cssPropertyName(name: string): string {
   let cached = cssPropertyNameCache.get(name);
@@ -20,7 +122,9 @@ function cssPropertyName(name: string): string {
     }
   }
 
-  cssPropertyNameCache.set(name, result);
+  if (cssPropertyNameCache.size < MAX_PROPERTY_CACHE) {
+    cssPropertyNameCache.set(name, result);
+  }
   return result;
 }
 
@@ -34,7 +138,17 @@ export function serializeCssDeclarations(styles: Record<string, unknown>): strin
       continue;
     }
 
-    const declaration = `${cssPropertyName(key)}:${String(value)}`;
+    const rawProperty = key.trim();
+    if (!isSafeCssPropertyName(rawProperty)) {
+      continue;
+    }
+    const property = cssPropertyName(rawProperty).trim();
+    const cssValue = String(value).trim();
+    if (!cssValue || !isSafeCssValue(cssValue)) {
+      continue;
+    }
+
+    const declaration = `${property}:${cssValue}`;
     result = result ? `${result};${declaration}` : declaration;
   }
 
@@ -59,16 +173,86 @@ export function mergeCssVar(style: unknown, name: string, value: string): string
 
 const STYLE_REGISTRY_ATTR = "data-askr-style-registry";
 const STYLE_CLASS_PREFIX = "ak-style-";
+const MAX_STYLE_RULES = 512;
+const MAX_SSR_STYLE_CACHE = 4096;
 
-const styleClassCache = new Map<string, string>();
+type StyleRule = {
+  className: string;
+  declarations: string;
+  rule: string;
+};
+
+const styleRulesByClass = new Map<string, StyleRule>();
 type StyleRegistry = {
   element: HTMLStyleElement;
-  rules: Map<string, { className: string; rule: string }>;
+  ruleCount: number;
+  rules: Map<string, StyleRule>;
 };
 const registries = new WeakMap<Document, Map<string, StyleRegistry>>();
-const MAX_STYLE_RULES = 512;
+function countRegisteredRules(value: string | null): number {
+  return value?.match(/\.ak-style-[a-z0-9]+\{/g)?.length ?? 0;
+}
+
+function styleClassName(declarations: string): string {
+  let first = 0xdeadbeef ^ declarations.length;
+  let second = 0x41c6ce57 ^ declarations.length;
+
+  for (let index = 0; index < declarations.length; index += 1) {
+    const code = declarations.charCodeAt(index);
+    first = Math.imul(first ^ code, 2_654_435_761);
+    second = Math.imul(second ^ code, 1_597_334_677);
+  }
+
+  first =
+    Math.imul(first ^ (first >>> 16), 2_246_822_507) ^
+    Math.imul(second ^ (second >>> 13), 3_266_489_909);
+  second =
+    Math.imul(second ^ (second >>> 16), 2_246_822_507) ^
+    Math.imul(first ^ (first >>> 13), 3_266_489_909);
+
+  return `${STYLE_CLASS_PREFIX}${(second >>> 0).toString(36)}${(first >>> 0).toString(36)}`;
+}
+
+function escapeStyleRawText(value: string): string {
+  return value.replace(/<\//g, "<\\/");
+}
+
+function styleRuleFor(declarations: string): StyleRule {
+  const className = styleClassName(declarations);
+  const existing = styleRulesByClass.get(className);
+  if (existing) {
+    if (existing.declarations !== declarations) {
+      throw new RangeError("Theme style class collision detected.");
+    }
+    return existing;
+  }
+
+  const entry = {
+    className,
+    declarations,
+    rule: `.${className}{${escapeStyleRawText(declarations)}}`,
+  };
+  return entry;
+}
+
+function rememberStyleRule(entry: StyleRule): void {
+  styleRulesByClass.delete(entry.className);
+  styleRulesByClass.set(entry.className, entry);
+  while (styleRulesByClass.size > MAX_SSR_STYLE_CACHE) {
+    const oldest = styleRulesByClass.keys().next().value;
+    if (oldest === undefined) break;
+    styleRulesByClass.delete(oldest);
+  }
+}
 
-let nextStyleClassId = 0;
+function registerSSRStyle(entry: StyleRule): void {
+  const register = (
+    Askr as typeof Askr & {
+      registerSSRStyle?: (id: string, cssText: string) => void;
+    }
+  ).registerSSRStyle;
+  register?.(entry.className, entry.rule);
+}
 
 function ensureStyleRegistry(nonce: string | undefined): StyleRegistry | null {
   if (typeof document === "undefined") return null;
@@ -81,17 +265,26 @@ function ensureStyleRegistry(nonce: string | undefined): StyleRegistry | null {
   const current = documentRegistries.get(key);
   if (current?.element.isConnected) return current;
 
-  const styleElement = document.createElement("style");
-  styleElement.setAttribute(STYLE_REGISTRY_ATTR, "true");
-  if (nonce !== undefined) styleElement.nonce = nonce;
-  (document.head ?? document.documentElement).append(styleElement);
-  const registry: StyleRegistry = { element: styleElement, rules: new Map() };
+  const styleElement =
+    Array.from(document.querySelectorAll<HTMLStyleElement>(`style[${STYLE_REGISTRY_ATTR}]`)).find(
+      (element) => (element.nonce || undefined) === nonce,
+    ) ?? document.createElement("style");
+  if (!styleElement.isConnected) {
+    styleElement.setAttribute(STYLE_REGISTRY_ATTR, "true");
+    if (nonce !== undefined) styleElement.nonce = nonce;
+    (document.head ?? document.documentElement).append(styleElement);
+  }
+  const registry: StyleRegistry = {
+    element: styleElement,
+    ruleCount: countRegisteredRules(styleElement.textContent),
+    rules: new Map(),
+  };
   documentRegistries.set(key, registry);
   return registry;
 }
 
 function normalizeDeclarations(declarations: string): string {
-  return declarations.trim().replace(/;+\s*$/, "");
+  return serializeCssString(declarations);
 }
 
 export function styleDeclarationsToClass(declarations: string | undefined): string | undefined {
@@ -100,27 +293,48 @@ export function styleDeclarationsToClass(declarations: string | undefined): stri
   const normalized = normalizeDeclarations(declarations);
   if (!normalized) return undefined;
 
-  const nonce = cspNonce();
+  const entry = styleRuleFor(normalized);
+  const nonce = Askr.cspNonce();
   const registry = ensureStyleRegistry(nonce);
   const registered = registry?.rules.get(normalized);
-  if (registered) return registered.className;
-
-  let className = styleClassCache.get(normalized);
-  if (className === undefined) {
-    className = `${STYLE_CLASS_PREFIX}${++nextStyleClassId}`;
-    styleClassCache.set(normalized, className);
+  if (registered) {
+    registerSSRStyle(registered);
+    return registered.className;
   }
 
   if (registry) {
-    const styleElement = registry.element;
-    if (styleElement) {
-      if (registry.rules.size >= MAX_STYLE_RULES)
+    if (!registry.rules.has(normalized) && !registry.element.textContent?.includes(entry.rule)) {
+      if (registry.ruleCount >= MAX_STYLE_RULES) {
+        throw new RangeError("Theme style registry capacity exceeded.");
+      }
+    }
+    if (!registry.element.textContent?.includes(entry.rule)) {
+      registry.element.append(entry.rule, "\n");
+      registry.ruleCount += 1;
+    }
+    registry.rules.set(normalized, entry);
+  }
+
+  rememberStyleRule(entry);
+  registerSSRStyle(entry);
+
+  return entry.className;
+}
+
+export function styleRulesForHtml(html: string): string[] {
+  const rules = new Map<string, string>();
+  const classAttributePattern = /\sclass=(?:"([^"]*)"|'([^']*)')/g;
+
+  for (const attribute of html.matchAll(classAttributePattern)) {
+    const value = attribute[1] ?? attribute[2] ?? "";
+    for (const className of value.split(/\s+/)) {
+      const entry = styleRulesByClass.get(className);
+      if (entry) rules.set(className, entry.rule);
+      if (rules.size > MAX_STYLE_RULES) {
         throw new RangeError("Theme style registry capacity exceeded.");
-      const rule = `.${className}{${normalized}}`;
-      registry.rules.set(normalized, { className, rule });
-      styleElement.append(rule, "\n");
+      }
     }
   }
 
-  return className;
+  return Array.from(rules.values());
 }

package/src/components/alert/alert.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { classes } from "../_internal/classes";
 import { Close } from "../close";
 import type { AlertProps } from "./alert.types";

package/src/components/alert/alert.types.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 
 export type AlertVariant = "default" | "info" | "success" | "warning" | "danger";