@askrjs/themes 0.0.3 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@askrjs/themes",
-  "version": "0.0.3",
+  "version": "0.0.6",
   "description": "Default theme tokens, styles, and themed layout wrappers for Askr apps.",
   "keywords": [
     "askr",
@@ -36,9 +36,39 @@
   "exports": {
     ".": "./src/index.css",
     "./default": "./src/themes/default/index.css",
-    "./components": {
-      "types": "./dist/components/index.d.ts",
-      "import": "./dist/components/index.js"
+    "./presets": "./src/themes/presets/index.css",
+    "./cat-presets": "./src/themes/presets/index.css",
+    "./theme": {
+      "types": "./dist/theme.d.ts",
+      "import": "./dist/theme.js"
+    },
+    "./layouts": {
+      "types": "./dist/layouts.d.ts",
+      "import": "./dist/layouts.js"
+    },
+    "./controls": {
+      "types": "./dist/controls.d.ts",
+      "import": "./dist/controls.js"
+    },
+    "./surfaces": {
+      "types": "./dist/surfaces.d.ts",
+      "import": "./dist/surfaces.js"
+    },
+    "./feedback": {
+      "types": "./dist/feedback.d.ts",
+      "import": "./dist/feedback.js"
+    },
+    "./shells": {
+      "types": "./dist/shells.d.ts",
+      "import": "./dist/shells.js"
+    },
+    "./navs": {
+      "types": "./dist/navs.d.ts",
+      "import": "./dist/navs.js"
+    },
+    "./overlays": {
+      "types": "./dist/overlays.d.ts",
+      "import": "./dist/overlays.js"
     },
     "./default/card.css": "./src/themes/default/styles/display/card.css",
     "./default/tokens.css": "./src/themes/default/tokens.css",
@@ -48,20 +78,26 @@
     "./default/badge.css": "./src/themes/default/styles/display/badge.css",
     "./default/breadcrumb.css": "./src/themes/default/styles/navigation/breadcrumb.css",
     "./default/button.css": "./src/themes/default/styles/actions/button.css",
+    "./default/button-group.css": "./src/themes/default/styles/actions/button-group.css",
+    "./default/nav.css": "./src/themes/default/styles/navigation/nav.css",
+    "./default/block.css": "./src/themes/default/styles/layout/block.css",
     "./default/checkbox.css": "./src/themes/default/styles/forms/checkbox.css",
     "./default/collapsible.css": "./src/themes/default/styles/disclosure/collapsible.css",
+    "./default/alert.css": "./src/themes/default/styles/display/alert.css",
     "./default/coverage.css": "./src/themes/default/styles/display/coverage.css",
     "./default/table.css": "./src/themes/default/styles/display/table.css",
-    "./default/dashboard-layout.css": "./src/themes/default/styles/layout/dashboard-layout.css",
     "./default/dialog.css": "./src/themes/default/styles/overlays/dialog.css",
-    "./default/docs-layout.css": "./src/themes/default/styles/layout/docs-layout.css",
-    "./default/dropdown-menu.css": "./src/themes/default/styles/overlays/dropdown-menu.css",
+    "./default/dropdown.css": "./src/themes/default/styles/overlays/dropdown.css",
     "./default/input.css": "./src/themes/default/styles/forms/input.css",
+    "./default/input-group.css": "./src/themes/default/styles/forms/input-group.css",
+    "./default/field.css": "./src/themes/default/styles/forms/field.css",
     "./default/label.css": "./src/themes/default/styles/forms/label.css",
+    "./default/list-group.css": "./src/themes/default/styles/display/list-group.css",
+    "./default/virtual-list.css": "./src/themes/default/styles/display/virtual-list.css",
     "./default/menu.css": "./src/themes/default/styles/navigation/menu.css",
     "./default/menubar.css": "./src/themes/default/styles/navigation/menubar.css",
+    "./default/pagination.css": "./src/themes/default/styles/navigation/pagination.css",
     "./default/navbar.css": "./src/themes/default/styles/shell/navbar.css",
-    "./default/navigation-menu.css": "./src/themes/default/styles/navigation/navigation-menu.css",
     "./default/patterns.css": "./src/themes/default/styles/layout/patterns.css",
     "./default/popover.css": "./src/themes/default/styles/overlays/popover.css",
     "./default/progress.css": "./src/themes/default/styles/display/progress.css",
@@ -70,17 +106,16 @@
     "./default/responsive-layout.css": "./src/themes/default/styles/layout/responsive-layout.css",
     "./default/select.css": "./src/themes/default/styles/forms/select.css",
     "./default/separator.css": "./src/themes/default/styles/display/separator.css",
-    "./default/sidebar.css": "./src/themes/default/styles/layout/sidebar.css",
     "./default/skeleton.css": "./src/themes/default/styles/display/skeleton.css",
     "./default/slider.css": "./src/themes/default/styles/forms/slider.css",
     "./default/spinner.css": "./src/themes/default/styles/display/spinner.css",
     "./default/switch.css": "./src/themes/default/styles/forms/switch.css",
-    "./default/tabs.css": "./src/themes/default/styles/navigation/tabs.css",
     "./default/textarea.css": "./src/themes/default/styles/forms/textarea.css",
     "./default/toast.css": "./src/themes/default/styles/overlays/toast.css",
     "./default/toggle.css": "./src/themes/default/styles/actions/toggle.css",
     "./default/toggle-group.css": "./src/themes/default/styles/actions/toggle-group.css",
     "./default/tooltip.css": "./src/themes/default/styles/overlays/tooltip.css",
+    "./default/virtual-table.css": "./src/themes/default/styles/display/virtual-table.css",
     "./templates/*": "./templates/*"
   },
   "publishConfig": {
@@ -88,29 +123,32 @@
   },
   "scripts": {
     "new:theme": "node ./scripts/new-theme.js",
-    "verify:token-contract": "node ./scripts/verify-token-contract.js",
-    "verify:responsive": "node ./scripts/verify-responsive-theme.js",
-    "verify:slots": "node ./scripts/verify-slot-coverage.js",
+    "clean": "npx --yes rimraf dist node_modules",
+    "bench": "npm run bench:tier2",
+    "bench:tier1": "cross-env NODE_ENV=production vp test bench --run --reporter=default --config vitest.bench.tier1.config.ts",
+    "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:unit": "vp test run -c vitest.node.config.ts",
-    "test:jsdom": "vp test run -c vitest.jsdom.config.ts",
-    "test:browser": "vp test run -c vitest.browser.config.ts",
+    "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:types": "tsc -p tsconfig.pack.json --emitDeclarationOnly --outDir dist",
-    "build": "vp pack && npm run build:types && npm run verify:token-contract && npm run verify:responsive && npm run verify:slots",
+    "build": "vp pack",
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {
-    "@askrjs/askr": "^0.0.34",
-    "@askrjs/ui": "^0.0.5",
+    "@askrjs/askr": "^0.0.39",
+    "@askrjs/ui": "^0.0.7",
     "@askrjs/vite": "^0.0.2",
     "@tsdown/css": "0.22.0",
-    "@types/node": "^25.6.0",
+    "@types/node": "^25.9.1",
+    "cross-env": "^10.1.0",
     "jsdom": "^29.1.1",
-    "playwright": "^1.59.1",
+    "playwright": "^1.60.0",
     "typescript": "^6.0.3",
-    "vite-plus": "^0.1.20"
+    "vite-plus": "^0.1.22"
   },
   "peerDependencies": {
     "@askrjs/askr": ">=0.0.1 <0.1.0",
@@ -118,5 +156,6 @@
   },
   "engines": {
     "node": ">=18"
-  }
+  },
+  "packageManager": "npm@11.15.0"
 }

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

@@ -1,4 +1,5 @@
 import { mergeLayoutStyles, resolveSpaceValue, setResponsiveStyleVar } from "./layout";
+import { styleDeclarationsToClass } from "./style";
 import type { BoxLayoutOwnProps } from "../box/box.types";
 
 const SPACE_PROP_KEYS = new Set([
@@ -154,3 +155,10 @@ export function withBoxLayoutStyle(
 ): string | undefined {
   return mergeLayoutStyles(styles, userStyle);
 }
+
+export function withBoxLayoutClass(
+  styles: Record<string, string | number>,
+  userStyle: unknown,
+): string | undefined {
+  return styleDeclarationsToClass(mergeLayoutStyles(styles, userStyle));
+}

package/src/components/_internal/jsx.ts

@@ -75,6 +75,86 @@ export function collectJsxElements(
   return result;
 }
 
+function serializeArray(value: readonly unknown[]): string {
+  if (value.length === 0) {
+    return "";
+  }
+
+  if (value.length === 1) {
+    return serializeForId(value[0]);
+  }
+
+  if (value.length === 2) {
+    return `${serializeForId(value[0])}|${serializeForId(value[1])}`;
+  }
+
+  let result = serializeForId(value[0]);
+
+  for (let index = 1; index < value.length; index += 1) {
+    result += `|${serializeForId(value[index])}`;
+  }
+
+  return result;
+}
+
+function serializeSerializableProps(props: Record<string, unknown>): string {
+  const keys: string[] = [];
+
+  for (const key of Object.keys(props)) {
+    if (key === "children" || key === "ref" || key.startsWith("on")) {
+      continue;
+    }
+
+    const entryValue = props[key];
+
+    if (
+      typeof entryValue === "string" ||
+      typeof entryValue === "number" ||
+      typeof entryValue === "boolean"
+    ) {
+      keys.push(key);
+    }
+  }
+
+  if (keys.length === 0) {
+    return "";
+  }
+
+  if (keys.length === 1) {
+    const key = keys[0];
+
+    return `${key}:${String(props[key])}`;
+  }
+
+  if (keys.length === 2) {
+    if (keys[1].localeCompare(keys[0]) < 0) {
+      [keys[0], keys[1]] = [keys[1], keys[0]];
+    }
+
+    return `${keys[0]}:${String(props[keys[0]])},${keys[1]}:${String(props[keys[1]])}`;
+  }
+
+  keys.sort((left, right) => left.localeCompare(right));
+
+  let result = `${keys[0]}:${String(props[keys[0]])}`;
+
+  for (let index = 1; index < keys.length; index += 1) {
+    const key = keys[index];
+    result += `,${key}:${String(props[key])}`;
+  }
+
+  return result;
+}
+
+function hasEmptyJsxChildren(children: unknown): boolean {
+  return (
+    children === undefined ||
+    children === null ||
+    typeof children === "boolean" ||
+    (Array.isArray(children) && children.length === 0)
+  );
+}
+
 export function extractTextContent(value: unknown): string {
   if (Array.isArray(value)) {
     return value.map((entry) => extractTextContent(entry)).join("");
@@ -102,7 +182,7 @@ export function extractTextContent(value: unknown): string {
 
 export function serializeForId(value: unknown): string {
   if (Array.isArray(value)) {
-    return value.map((item) => serializeForId(item)).join("|");
+    return serializeArray(value);
   }
 
   if (value === undefined || value === null || typeof value === "boolean") {
@@ -120,21 +200,16 @@ export function serializeForId(value: unknown): string {
         : typeof value.type === "function"
           ? value.type.name || "component"
           : "component";
-    const propEntries = Object.entries(value.props ?? {})
-      .filter(
-        ([key, entryValue]) =>
-          key !== "children" &&
-          key !== "ref" &&
-          !key.startsWith("on") &&
-          (typeof entryValue === "string" ||
-            typeof entryValue === "number" ||
-            typeof entryValue === "boolean"),
-      )
-      .sort(([left], [right]) => left.localeCompare(right))
-      .map(([key, entryValue]) => `${key}:${String(entryValue)}`)
-      .join(",");
-
-    return `${typeName}[${propEntries}](${serializeForId(value.props?.children)})`;
+    const props = (value.props ?? {}) as Record<string, unknown>;
+    const propEntries = serializeSerializableProps(props);
+    const children = props.children;
+    const propsPrefix = propEntries === "" ? `${typeName}[]` : `${typeName}[${propEntries}]`;
+
+    if (hasEmptyJsxChildren(children)) {
+      return `${propsPrefix}()`;
+    }
+
+    return `${propsPrefix}(${serializeForId(children)})`;
   }
 
   return typeof value;

package/src/components/_internal/layout.ts

@@ -39,6 +39,7 @@ const CONTAINER_SIZE_MAP: Record<string, string> = {
   md: "var(--ak-container-2)",
   lg: "var(--ak-container-3)",
   xl: "var(--ak-container-4)",
+  fluid: "100%",
 };
 
 const SECTION_SIZE_MAP: Record<string, string> = {
@@ -49,8 +50,8 @@ const SECTION_SIZE_MAP: Record<string, string> = {
 };
 
 /**
- * Returns true when `value` is a concrete CSS length/size that can be applied
- * directly as an inline style.
+ * Returns true when `value` is a concrete CSS length/size that can be serialized
+ * into a CSS declaration without token translation.
  */
 export function isCssLength(value: unknown): value is string {
   if (typeof value !== "string") return false;
@@ -151,19 +152,6 @@ export function resolveSectionSizeValue(value: string): string {
   return SECTION_SIZE_MAP[trimmed] ?? trimmed;
 }
 
-export function resolveGridTrackValue(value: string | number): string {
-  if (typeof value === "number") {
-    return `repeat(${value}, minmax(0, 1fr))`;
-  }
-
-  const trimmed = value.trim();
-  if (/^\d+$/.test(trimmed)) {
-    return `repeat(${trimmed}, minmax(0, 1fr))`;
-  }
-
-  return trimmed;
-}
-
 export function resolveJustifyValue(value: string): string {
   const trimmed = value.trim();
   if (trimmed === "between") return "space-between";
@@ -189,8 +177,8 @@ export function resolveInlineAlignValue(value: "left" | "center" | "right"): {
 }
 
 /**
- * Merges a record of computed layout styles with a user-supplied `style` prop.
- * The user's styles take precedence for conflicting keys.
+ * Merges a record of computed layout declarations with a user-supplied style
+ * value. The user's declarations take precedence for conflicting keys.
  */
 export function mergeLayoutStyles(
   layout: Record<string, string | number>,

package/src/components/_internal/merge-props.ts

@@ -1,3 +1,5 @@
+import { classes } from "./classes";
+
 type Handler = (...args: readonly unknown[]) => void;
 type Ref<T> = { current: T | null } | ((value: T | null) => void) | null | undefined;
 
@@ -16,6 +18,8 @@ function isDefaultPrevented(value: unknown): value is { defaultPrevented: true }
 
 function composeHandlers(first: Handler, second: Handler): Handler {
   return (...args) => {
+    // Internal composition runs first so wrappers can normalize state or stop
+    // follow-on handlers when the event has already been consumed.
     first(...args);
 
     if (isDefaultPrevented(args[0])) {
@@ -82,6 +86,11 @@ export function mergeProps<TBase extends object, TInjected extends object>(
       continue;
     }
 
+    if (key === "class") {
+      (out as Record<string, unknown>)[key] = classes(injectedValue, baseValue);
+      continue;
+    }
+
     (out as Record<string, unknown>)[key] = baseValue;
   }
 

package/src/components/_internal/pathname.ts

@@ -0,0 +1,67 @@
+function normalizePathname(pathname: string): string {
+  return pathname.endsWith("/") && pathname !== "/" ? pathname.slice(0, -1) : pathname;
+}
+
+function getWindowLocation(): Location | null {
+  return typeof window === "undefined" ? null : window.location;
+}
+
+export function resolvePathname(href: string): string | null {
+  if (href.startsWith("#")) {
+    return null;
+  }
+
+  const location = getWindowLocation();
+
+  if (href.startsWith("/") && !href.startsWith("//")) {
+    const queryIndex = href.indexOf("?");
+    const hashIndex = href.indexOf("#");
+    let pathEnd = href.length;
+
+    if (queryIndex !== -1) {
+      pathEnd = Math.min(pathEnd, queryIndex);
+    }
+
+    if (hashIndex !== -1) {
+      pathEnd = Math.min(pathEnd, hashIndex);
+    }
+
+    const pathname = normalizePathname(href.slice(0, pathEnd));
+
+    if (location && hashIndex !== -1) {
+      const searchEnd = hashIndex === -1 ? href.length : hashIndex;
+      const search = queryIndex === -1 ? "" : href.slice(queryIndex, searchEnd);
+      const locationPathname = normalizePathname(location.pathname || "/");
+
+      if (pathname === locationPathname && search === location.search) {
+        return null;
+      }
+    }
+
+    return pathname;
+  }
+
+  const baseHref = location?.href ?? "http://localhost/";
+  const baseOrigin = location?.origin ?? "http://localhost";
+
+  try {
+    const target = new URL(href, baseHref);
+
+    if (target.origin !== baseOrigin) {
+      return null;
+    }
+
+    if (
+      location &&
+      target.hash &&
+      normalizePathname(target.pathname) === normalizePathname(location.pathname || "/") &&
+      target.search === location.search
+    ) {
+      return null;
+    }
+
+    return normalizePathname(target.pathname);
+  } catch {
+    return null;
+  }
+}

package/src/components/_internal/style.ts

@@ -16,3 +16,54 @@ export function mergeCssVar(style: unknown, name: string, value: string): string
 
   return decl;
 }
+
+const STYLE_REGISTRY_ATTR = "data-askr-style-registry";
+const STYLE_CLASS_PREFIX = "ak-style-";
+
+const styleClassCache = new Map<string, string>();
+const registeredDeclarations = new Set<string>();
+
+let nextStyleClassId = 0;
+
+function ensureStyleElement(): HTMLStyleElement | null {
+  if (typeof document === "undefined") return null;
+
+  const existing = document.querySelector(`style[${STYLE_REGISTRY_ATTR}]`);
+  if (existing instanceof HTMLStyleElement) {
+    return existing;
+  }
+
+  const styleElement = document.createElement("style");
+  styleElement.setAttribute(STYLE_REGISTRY_ATTR, "true");
+  (document.head ?? document.documentElement).append(styleElement);
+
+  return styleElement;
+}
+
+function normalizeDeclarations(declarations: string): string {
+  return declarations.trim().replace(/;+\s*$/, "");
+}
+
+export function styleDeclarationsToClass(declarations: string | undefined): string | undefined {
+  if (typeof declarations !== "string") return undefined;
+
+  const normalized = normalizeDeclarations(declarations);
+  if (!normalized) return undefined;
+
+  let className = styleClassCache.get(normalized);
+  if (className === undefined) {
+    className = `${STYLE_CLASS_PREFIX}${++nextStyleClassId}`;
+    styleClassCache.set(normalized, className);
+  }
+
+  if (!registeredDeclarations.has(normalized)) {
+    const styleElement = ensureStyleElement();
+    if (styleElement) {
+      const rule = `.${className}{${normalized}}`;
+      styleElement.textContent = `${styleElement.textContent ?? ""}\n${rule}`;
+      registeredDeclarations.add(normalized);
+    }
+  }
+
+  return className;
+}

package/src/components/alert/alert.tsx

@@ -0,0 +1,84 @@
+import { classes } from "../_internal/classes";
+import { Close } from "../close";
+import type { AlertProps } from "./alert.types";
+
+function resolveAlertRole(variant: AlertProps["variant"] | undefined): "alert" | "status" {
+  if (variant === "danger" || variant === "warning") {
+    return "alert";
+  }
+
+  return "status";
+}
+
+export function Alert(props: AlertProps): JSX.Element {
+  const {
+    actions,
+    children,
+    class: className,
+    description,
+    dismissLabel = "Dismiss alert",
+    dismissible = false,
+    icon,
+    onDismiss,
+    ref,
+    title,
+    titleAs: TitleTag = "h3",
+    variant = "default",
+    role,
+    ...rest
+  } = props;
+  const shouldRenderDismiss = dismissible && onDismiss !== undefined;
+  const resolvedRole = role ?? resolveAlertRole(variant);
+  const hasVariant = variant !== "default";
+
+  return (
+    <div
+      {...rest}
+      ref={ref}
+      class={classes(
+        "alert",
+        hasVariant ? `alert-${variant}` : undefined,
+        shouldRenderDismiss ? "alert-dismissible" : undefined,
+        className,
+      )}
+      data-dismissible={shouldRenderDismiss ? "true" : undefined}
+      data-slot="alert"
+      data-variant={hasVariant ? variant : undefined}
+      role={resolvedRole}
+    >
+      {icon !== undefined ? (
+        <div aria-hidden="true" class="alert-icon" data-slot="alert-icon">
+          {icon}
+        </div>
+      ) : null}
+
+      <div class="alert-content" data-slot="alert-content">
+        {title !== undefined ? (
+          <TitleTag class="alert-title" data-slot="alert-title">
+            {title}
+          </TitleTag>
+        ) : null}
+
+        {description !== undefined ? (
+          <p class="alert-description" data-slot="alert-description">
+            {description}
+          </p>
+        ) : null}
+
+        {children}
+
+        {actions !== undefined ? (
+          <div class="alert-actions" data-slot="alert-actions">
+            {actions}
+          </div>
+        ) : null}
+      </div>
+
+      {shouldRenderDismiss ? (
+        <div class="alert-close" data-slot="alert-close">
+          <Close label={dismissLabel} onPress={onDismiss} />
+        </div>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,20 @@
+import type { Ref } from "@askrjs/askr/foundations/utilities";
+
+export type AlertVariant = "default" | "info" | "success" | "warning" | "danger";
+export type AlertHeadingTag = "h2" | "h3" | "h4" | "h5" | "h6";
+
+type DivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref">;
+
+export type AlertProps = DivProps & {
+  actions?: unknown;
+  children?: unknown;
+  description?: unknown;
+  dismissLabel?: string;
+  dismissible?: boolean;
+  icon?: unknown;
+  onDismiss?: () => void;
+  title?: unknown;
+  titleAs?: AlertHeadingTag;
+  variant?: AlertVariant;
+  ref?: Ref<HTMLDivElement>;
+};

package/src/components/alert/index.ts

@@ -0,0 +1,2 @@
+export { Alert } from "./alert";
+export type { AlertHeadingTag, AlertProps, AlertVariant } from "./alert.types";

package/src/components/aspect-ratio/aspect-ratio.tsx

@@ -1,35 +1,15 @@
 import { Slot } from "@askrjs/askr/foundations";
 import { mergeProps } from "../_internal/merge-props";
+import { mergeLayoutStyles } from "../_internal/layout";
+import { styleDeclarationsToClass } from "../_internal/style";
 import type { AspectRatioAsChildProps, AspectRatioProps } from "./aspect-ratio.types";
 
-function serializeStyle(base: Record<string, string | number>, user: unknown): string {
-  const merged: Record<string, unknown> = { ...base };
-
-  if (user && typeof user === "object") {
-    Object.assign(merged, user as Record<string, unknown>);
-  }
-
-  if (typeof user === "string" && user.trim()) {
-    return `${Object.entries(merged)
-      .filter(([, value]) => value !== undefined && value !== null)
-      .map(([key, value]) => key.replace(/([A-Z])/g, "-$1").toLowerCase() + ":" + String(value))
-      .join(";")};${user.trim()}`;
-  }
-
-  return Object.entries(merged)
-    .filter(([, value]) => value !== undefined && value !== null)
-    .map(([key, value]) => key.replace(/([A-Z])/g, "-$1").toLowerCase() + ":" + String(value))
-    .join(";");
-}
-
 export function AspectRatio(props: AspectRatioProps): JSX.Element;
 export function AspectRatio(props: AspectRatioAsChildProps): JSX.Element;
 export function AspectRatio(props: AspectRatioProps | AspectRatioAsChildProps) {
   const { asChild, children, ratio = 1, ref, style, ...rest } = props;
-  const finalProps = mergeProps(rest, {
-    ref,
-    "data-slot": "aspect-ratio",
-    style: serializeStyle(
+  const layoutClass = styleDeclarationsToClass(
+    mergeLayoutStyles(
       {
         display: "block",
         width: "100%",
@@ -38,6 +18,12 @@ export function AspectRatio(props: AspectRatioProps | AspectRatioAsChildProps) {
       },
       style,
     ),
+  );
+
+  const finalProps = mergeProps(rest, {
+    ref,
+    "data-slot": "aspect-ratio",
+    ...(layoutClass ? { class: layoutClass } : {}),
   });
 
   if (asChild) {

package/src/components/aspect-ratio/aspect-ratio.types.ts

@@ -1,4 +1,5 @@
-import type { JSXElement, Ref } from "@askrjs/askr/foundations";
+import type { JSXElement } from "@askrjs/askr/foundations";
+import type { Ref } from "@askrjs/askr/foundations/utilities";
 
 export type AspectRatioOwnProps = {
   children?: unknown;