@askrjs/themes 0.0.8 → 0.0.10

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

@@ -0,0 +1,354 @@
+import { serializeCssDeclarations } from "./style";
+
+export type LayoutBreakpoint = "base" | "sm" | "md" | "lg" | "xl";
+export type ResponsiveValue<T> = T | Partial<Record<LayoutBreakpoint, T>>;
+
+export type BlockSpace = "0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "page";
+export type BlockMargin = BlockSpace | "auto";
+export type BlockSize =
+  | "auto"
+  | "full"
+  | "screen"
+  | "content"
+  | "sidebar"
+  | "page"
+  | "sm"
+  | "md"
+  | "lg"
+  | "xl";
+export type BlockDirection = "row" | "column" | "row-reverse" | "column-reverse";
+export type BlockRowFrom = Exclude<LayoutBreakpoint, "base">;
+export type BlockAlign = "start" | "end" | "center" | "stretch" | "baseline";
+export type BlockJustify = "start" | "end" | "center" | "between";
+export type BlockBackground =
+  | "surface"
+  | "muted"
+  | "selected"
+  | "canvas"
+  | "raised"
+  | "overlay"
+  | "transparent";
+export type BlockRadius = true | "sm" | "md" | "lg" | "xl" | "round";
+export type BlockShadow = true | "sm" | "md" | "lg";
+export type BlockZIndex =
+  | "header"
+  | "sticky"
+  | "fixed"
+  | "dropdown"
+  | "modal"
+  | "popover"
+  | "toast"
+  | "tooltip";
+
+export type BlockLayoutProps = {
+  padding?: ResponsiveValue<BlockSpace>;
+  paddingX?: ResponsiveValue<BlockSpace>;
+  paddingY?: ResponsiveValue<BlockSpace>;
+  margin?: ResponsiveValue<BlockMargin>;
+  marginX?: ResponsiveValue<BlockMargin>;
+  marginY?: ResponsiveValue<BlockMargin>;
+  width?: ResponsiveValue<BlockSize>;
+  minWidth?: ResponsiveValue<BlockSize>;
+  maxWidth?: ResponsiveValue<BlockSize>;
+  height?: ResponsiveValue<BlockSize>;
+  minHeight?: ResponsiveValue<BlockSize>;
+  maxHeight?: ResponsiveValue<BlockSize>;
+  rowFrom?: BlockRowFrom;
+  direction?: ResponsiveValue<BlockDirection>;
+  align?: ResponsiveValue<BlockAlign>;
+  justify?: ResponsiveValue<BlockJustify>;
+  gap?: ResponsiveValue<BlockSpace>;
+  grow?: ResponsiveValue<boolean | number>;
+  shrink?: ResponsiveValue<boolean | number>;
+  center?: ResponsiveValue<boolean>;
+  sticky?: boolean;
+  top?: ResponsiveValue<BlockSpace>;
+  zIndex?: ResponsiveValue<BlockZIndex>;
+  background?: ResponsiveValue<BlockBackground>;
+  border?: ResponsiveValue<boolean>;
+  borderBottom?: ResponsiveValue<boolean>;
+  borderRight?: ResponsiveValue<boolean>;
+  radius?: ResponsiveValue<BlockRadius>;
+  shadow?: ResponsiveValue<BlockShadow>;
+  hide?: ResponsiveValue<boolean>;
+};
+
+const BREAKPOINTS: readonly LayoutBreakpoint[] = ["base", "sm", "md", "lg", "xl"];
+
+const SPACE_TOKEN_MAP: Record<string, string> = {
+  "0": "0",
+  xs: "var(--ak-space-xs)",
+  sm: "var(--ak-space-sm)",
+  md: "var(--ak-space-md)",
+  lg: "var(--ak-space-lg)",
+  xl: "var(--ak-space-xl)",
+  "2xl": "var(--ak-space-2xl)",
+  "3xl": "var(--ak-space-3xl)",
+  page: "var(--ak-layout-page-gutter)",
+};
+
+const SIZE_TOKEN_MAP: Record<string, string> = {
+  auto: "auto",
+  full: "100%",
+  screen: "100dvh",
+  content: "min(60vh, 36rem)",
+  sidebar: "var(--ak-layout-sidebar-width)",
+  page: "var(--ak-layout-content-max-width)",
+  sm: "var(--ak-container-1)",
+  md: "var(--ak-container-2)",
+  lg: "var(--ak-container-3)",
+  xl: "var(--ak-container-4)",
+};
+
+const BACKGROUND_TOKEN_MAP: Record<string, string> = {
+  canvas: "var(--ak-color-bg)",
+  surface: "var(--ak-color-surface)",
+  muted: "var(--ak-color-surface-muted)",
+  raised: "var(--ak-color-surface-raised)",
+  overlay: "var(--ak-color-surface-overlay)",
+  selected: "var(--ak-color-selected)",
+  transparent: "transparent",
+};
+
+const RADIUS_TOKEN_MAP: Record<string, string> = {
+  sm: "var(--ak-radius-sm)",
+  md: "var(--ak-radius-md)",
+  lg: "var(--ak-radius-lg)",
+  xl: "var(--ak-radius-xl)",
+  round: "var(--ak-radius-round)",
+};
+
+const SHADOW_TOKEN_MAP: Record<string, string> = {
+  sm: "var(--ak-shadow-sm)",
+  md: "var(--ak-shadow-md)",
+  lg: "var(--ak-shadow-lg)",
+};
+
+const Z_INDEX_TOKEN_MAP: Record<string, string> = {
+  header: "var(--ak-z-sticky)",
+  sticky: "var(--ak-z-sticky)",
+  fixed: "var(--ak-z-fixed)",
+  dropdown: "var(--ak-z-dropdown)",
+  modal: "var(--ak-z-modal)",
+  popover: "var(--ak-z-popover)",
+  toast: "var(--ak-z-toast)",
+  tooltip: "var(--ak-z-tooltip)",
+};
+
+const BORDER_VALUE = "1px solid var(--ak-color-border-subtle)";
+
+const BLOCK_LAYOUT_KEYS = new Set<keyof BlockLayoutProps>([
+  "padding",
+  "paddingX",
+  "paddingY",
+  "margin",
+  "marginX",
+  "marginY",
+  "width",
+  "minWidth",
+  "maxWidth",
+  "height",
+  "minHeight",
+  "maxHeight",
+  "rowFrom",
+  "direction",
+  "align",
+  "justify",
+  "gap",
+  "grow",
+  "shrink",
+  "center",
+  "sticky",
+  "top",
+  "zIndex",
+  "background",
+  "border",
+  "borderBottom",
+  "borderRight",
+  "radius",
+  "shadow",
+  "hide",
+]);
+
+function isResponsiveValue<T>(
+  value: ResponsiveValue<T> | undefined,
+): value is Partial<Record<LayoutBreakpoint, T>> {
+  return Boolean(
+    value &&
+    typeof value === "object" &&
+    !Array.isArray(value) &&
+    BREAKPOINTS.some((breakpoint) => breakpoint in value),
+  );
+}
+
+function normalizeResponsiveValue<T>(
+  value: ResponsiveValue<T> | undefined,
+): Partial<Record<LayoutBreakpoint, T>> | undefined {
+  if (value === undefined) return undefined;
+  if (isResponsiveValue(value)) return value;
+  return { base: value };
+}
+
+function resolveTokenValue(
+  value: string | number,
+  tokens: Record<string, string>,
+): string | number {
+  if (typeof value === "number") return value;
+  const trimmed = value.trim();
+  return tokens[trimmed] ?? trimmed;
+}
+
+function resolveSpaceValue(value: string | number): string | number {
+  return resolveTokenValue(value, SPACE_TOKEN_MAP);
+}
+
+function resolveSizeValue(value: string): string {
+  return String(resolveTokenValue(value, SIZE_TOKEN_MAP));
+}
+
+function resolveAlignValue(value: BlockAlign): string {
+  if (value === "start") return "flex-start";
+  if (value === "end") return "flex-end";
+  return value;
+}
+
+function resolveJustifyValue(value: BlockJustify): string {
+  if (value === "start") return "flex-start";
+  if (value === "end") return "flex-end";
+  if (value === "between") return "space-between";
+  return value;
+}
+
+function resolveFlexFlag(value: boolean | number): string | number {
+  if (value === true) return 1;
+  if (value === false) return 0;
+  return value;
+}
+
+function resolveBorderValue(value: boolean): string | undefined {
+  if (value === false) return "0";
+  return BORDER_VALUE;
+}
+
+function resolveRadiusValue(value: BlockRadius): string | undefined {
+  if (value === true) return RADIUS_TOKEN_MAP.md;
+  return String(resolveTokenValue(value, RADIUS_TOKEN_MAP));
+}
+
+function resolveShadowValue(value: BlockShadow): string | undefined {
+  if (value === true) return SHADOW_TOKEN_MAP.sm;
+  return String(resolveTokenValue(value, SHADOW_TOKEN_MAP));
+}
+
+function setResponsiveVar<T>(
+  styles: Record<string, string | number>,
+  property: string,
+  value: ResponsiveValue<T> | undefined,
+  resolve: (value: T) => string | number | undefined,
+) {
+  const normalized = normalizeResponsiveValue(value);
+  if (!normalized) return;
+
+  for (const breakpoint of BREAKPOINTS) {
+    const breakpointValue = normalized[breakpoint];
+    if (breakpointValue === undefined) continue;
+    const resolved = resolve(breakpointValue);
+    if (resolved === undefined || resolved === "") continue;
+    styles[`--ak-${property}-${breakpoint}`] = resolved;
+  }
+}
+
+export function splitBlockLayoutProps<T extends Record<string, unknown>>(
+  props: T,
+): {
+  blockProps: Partial<BlockLayoutProps>;
+  rest: Omit<T, keyof BlockLayoutProps>;
+} {
+  const blockProps: Partial<BlockLayoutProps> = {};
+  const rest: Record<string, unknown> = {};
+
+  for (const [key, value] of Object.entries(props)) {
+    if (BLOCK_LAYOUT_KEYS.has(key as keyof BlockLayoutProps)) {
+      (blockProps as Record<string, unknown>)[key] = value;
+    } else {
+      rest[key] = value;
+    }
+  }
+
+  return { blockProps, rest: rest as Omit<T, keyof BlockLayoutProps> };
+}
+
+export function applyBlockLayoutStyles(
+  styles: Record<string, string | number>,
+  props: Partial<BlockLayoutProps>,
+) {
+  setResponsiveVar(styles, "p", props.padding, resolveSpaceValue);
+  setResponsiveVar(styles, "px", props.paddingX, resolveSpaceValue);
+  setResponsiveVar(styles, "py", props.paddingY, resolveSpaceValue);
+  setResponsiveVar(styles, "m", props.margin, resolveSpaceValue);
+  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);
+
+  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,
+    );
+    setResponsiveVar(styles, "justify-content", props.center, (value) =>
+      value ? "center" : undefined,
+    );
+  }
+
+  if (props.sticky) {
+    styles["--ak-position-base"] = "sticky";
+  }
+  setResponsiveVar(styles, "top", props.top, resolveSpaceValue);
+  setResponsiveVar(styles, "z-index", props.zIndex, (value) =>
+    String(resolveTokenValue(value, Z_INDEX_TOKEN_MAP)),
+  );
+
+  setResponsiveVar(styles, "background", props.background, (value) =>
+    String(resolveTokenValue(value, BACKGROUND_TOKEN_MAP)),
+  );
+  setResponsiveVar(styles, "border", props.border, resolveBorderValue);
+  setResponsiveVar(styles, "border-bottom", props.borderBottom, resolveBorderValue);
+  setResponsiveVar(styles, "border-right", props.borderRight, resolveBorderValue);
+  setResponsiveVar(styles, "border-radius", props.radius, resolveRadiusValue);
+  setResponsiveVar(styles, "box-shadow", props.shadow, resolveShadowValue);
+  setResponsiveVar(styles, "display", props.hide, (value) => (value ? "none" : "flex"));
+}
+
+export function mergeLayoutStyles(
+  layout: Record<string, string | number>,
+  user: unknown,
+): string | undefined {
+  const merged: Record<string, unknown> = { ...layout };
+
+  if (user !== null && user !== undefined && typeof user === "object") {
+    Object.assign(merged, user as Record<string, unknown>);
+  }
+
+  const mergedString = serializeCssDeclarations(merged);
+
+  if (typeof user === "string" && user.trim()) {
+    return mergedString ? `${mergedString};${user.trim()}` : user.trim();
+  }
+
+  return mergedString || undefined;
+}

package/src/components/_internal/jsx.ts

@@ -53,9 +53,11 @@ export function collectJsxElements(
 ): JSXElement[] {
   const result: JSXElement[] = [];
 
-  const visit = (value: unknown) => {
+  function visit(value: unknown): void {
     if (Array.isArray(value)) {
-      value.forEach(visit);
+      for (let index = 0; index < value.length; index += 1) {
+        visit(value[index]);
+      }
       return;
     }
 
@@ -68,13 +70,23 @@ export function collectJsxElements(
     }
 
     visit(value.props?.children);
-  };
+  }
 
   visit(children);
 
   return result;
 }
 
+function isEventHandlerLikeKey(key: string): boolean {
+  return key.length >= 2 && key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110;
+}
+
+function compareKeys(left: string, right: string): number {
+  if (left < right) return -1;
+  if (left > right) return 1;
+  return 0;
+}
+
 function serializeArray(value: readonly unknown[]): string {
   if (value.length === 0) {
     return "";
@@ -101,7 +113,7 @@ 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")) {
+    if (key === "children" || key === "ref" || isEventHandlerLikeKey(key)) {
       continue;
     }
 
@@ -127,14 +139,14 @@ function serializeSerializableProps(props: Record<string, unknown>): string {
   }
 
   if (keys.length === 2) {
-    if (keys[1].localeCompare(keys[0]) < 0) {
+    if (keys[1] < keys[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));
+  keys.sort(compareKeys);
 
   let result = `${keys[0]}:${String(props[keys[0]])}`;
 

package/src/components/_internal/style.ts

@@ -1,3 +1,44 @@
+const cssPropertyNameCache = new Map<string, string>();
+
+function cssPropertyName(name: string): string {
+  let cached = cssPropertyNameCache.get(name);
+  if (cached !== undefined) {
+    return cached;
+  }
+
+  let result = "";
+
+  for (let index = 0; index < name.length; index += 1) {
+    const code = name.charCodeAt(index);
+
+    if (code >= 65 && code <= 90) {
+      result += `-${String.fromCharCode(code + 32)}`;
+    } else {
+      result += name[index];
+    }
+  }
+
+  cssPropertyNameCache.set(name, result);
+  return result;
+}
+
+export function serializeCssDeclarations(styles: Record<string, unknown>): string {
+  const keys = Object.keys(styles);
+  let result = "";
+
+  for (const key of keys) {
+    const value = styles[key];
+    if (value === undefined || value === null) {
+      continue;
+    }
+
+    const declaration = `${cssPropertyName(key)}:${String(value)}`;
+    result = result ? `${result};${declaration}` : declaration;
+  }
+
+  return result;
+}
+
 export function mergeCssVar(style: unknown, name: string, value: string): string {
   const decl = `${name}:${value}`;
 
@@ -7,10 +48,7 @@ export function mergeCssVar(style: unknown, name: string, value: string): string
   }
 
   if (style && typeof style === "object") {
-    const entries = Object.entries(style as Record<string, unknown>)
-      .filter(([, v]) => v !== undefined && v !== null)
-      .map(([k, v]) => `${k.replace(/([A-Z])/g, (c) => `-${c.toLowerCase()}`)}:${String(v)}`)
-      .join(";");
+    const entries = serializeCssDeclarations(style as Record<string, unknown>);
     return entries ? `${entries};${decl}` : decl;
   }
 

package/src/components/alert/alert.tsx

@@ -17,7 +17,6 @@ export function Alert(props: AlertProps): JSX.Element {
     class: className,
     description,
     dismissLabel = "Dismiss alert",
-    dismissible = false,
     icon,
     onDismiss,
     ref,
@@ -27,7 +26,7 @@ export function Alert(props: AlertProps): JSX.Element {
     role,
     ...rest
   } = props;
-  const shouldRenderDismiss = dismissible && onDismiss !== undefined;
+  const shouldRenderDismiss = onDismiss !== undefined;
   const resolvedRole = role ?? resolveAlertRole(variant);
   const hasVariant = variant !== "default";
 

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

@@ -10,7 +10,6 @@ export type AlertProps = DivProps & {
   children?: unknown;
   description?: unknown;
   dismissLabel?: string;
-  dismissible?: boolean;
   icon?: unknown;
   onDismiss?: () => void;
   title?: unknown;

package/src/components/aside/aside.tsx

@@ -0,0 +1,12 @@
+import { Block } from "../block";
+import type { AsideProps } from "./aside.types";
+
+export function Aside(props: AsideProps): JSX.Element {
+  const { children, ...rest } = props;
+
+  return (
+    <Block as="aside" {...rest} data-slot="aside">
+      {children}
+    </Block>
+  );
+}

package/src/components/aside/aside.types.ts

@@ -0,0 +1,3 @@
+import type { BlockElementProps } from "../block";
+
+export type AsideProps = Omit<BlockElementProps<"aside">, "as">;

package/src/components/aside/index.ts

@@ -0,0 +1,2 @@
+export { Aside } from "./aside";
+export type { AsideProps } from "./aside.types";

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

@@ -1,6 +1,6 @@
 import { Slot } from "@askrjs/askr/foundations";
 import { mergeProps } from "../_internal/merge-props";
-import { mergeLayoutStyles } from "../_internal/layout";
+import { mergeLayoutStyles } from "../_internal/block-layout";
 import { styleDeclarationsToClass } from "../_internal/style";
 import type { AspectRatioAsChildProps, AspectRatioProps } from "./aspect-ratio.types";
 

package/src/components/badge/index.ts

@@ -1,3 +1,2 @@
 export { Badge } from "./badge";
-export { BADGE_A11Y_CONTRACT, type BadgeA11yContract } from "./badge.a11y";
 export type { BadgeOwnProps, BadgeProps, BadgeAsChildProps } from "./badge.types";

package/src/components/block/block.a11y.ts

@@ -2,12 +2,6 @@ export const BLOCK_A11Y_CONTRACT = {
   DATA_ATTRIBUTES: {
     slot: "data-slot" as const,
     layout: "data-ak-layout" as const,
-    gap: "data-gap" as const,
-    gapX: "data-gap-x" as const,
-    gapY: "data-gap-y" as const,
-    align: "data-align" as const,
-    justify: "data-justify" as const,
-    size: "data-size" as const,
   },
   SLOT_VALUES: {
     root: "block" as const,

package/src/components/block/block.tsx

@@ -1,71 +1,55 @@
 import { Slot } from "@askrjs/askr/foundations";
+import { classes } from "../_internal/classes";
+import {
+  applyBlockLayoutStyles,
+  mergeLayoutStyles,
+  splitBlockLayoutProps,
+} from "../_internal/block-layout";
 import { mergeProps } from "../_internal/merge-props";
-import { serializeResponsiveValueIf } from "../_internal/layout";
-import type { BlockAsChildProps, BlockDivProps, BlockSpanProps } from "./block.types";
+import { styleDeclarationsToClass } from "../_internal/style";
+import type { BlockAsChildProps, BlockNativeProps } from "./block.types";
 
-const SPACE_TOKENS = new Set([
-  "1",
-  "2",
-  "3",
-  "4",
-  "5",
-  "6",
-  "7",
-  "8",
-  "9",
-  "xs",
-  "sm",
-  "md",
-  "lg",
-  "xl",
-  "2xl",
-  "3xl",
-]);
+const DEFAULT_ELEMENT = "div";
 
-export function Block(props: BlockDivProps): JSX.Element;
-export function Block(props: BlockSpanProps): JSX.Element;
+export function Block(props: BlockNativeProps): JSX.Element;
 export function Block(props: BlockAsChildProps): JSX.Element;
-export function Block(props: BlockDivProps | BlockSpanProps | BlockAsChildProps) {
-  const as = "as" in props ? props.as : "div";
-  const { asChild, children, gap, gapX, gapY, align, justify, size = "md", ref, ...rest } = props;
+export function Block(props: BlockNativeProps | BlockAsChildProps) {
+  const as = "as" in props ? props.as : DEFAULT_ELEMENT;
+  const {
+    asChild,
+    children,
+    ref,
+    class: classProp,
+    className,
+    style: userStyle,
+    ...rest
+  } = props as (BlockNativeProps | BlockAsChildProps) & {
+    class?: unknown;
+    className?: unknown;
+    style?: unknown;
+  };
+
+  const { blockProps, rest: passthroughProps } = splitBlockLayoutProps(rest);
+  const layoutStyle: Record<string, string | number> = {};
+  applyBlockLayoutStyles(layoutStyle, blockProps);
+
+  const layoutClass = styleDeclarationsToClass(mergeLayoutStyles(layoutStyle, userStyle));
+  const slot =
+    typeof (passthroughProps as Record<string, unknown>)["data-slot"] === "string"
+      ? String((passthroughProps as Record<string, unknown>)["data-slot"])
+      : "block";
 
-  const finalProps = mergeProps(rest, {
+  const finalProps = mergeProps(passthroughProps, {
     ref,
-    "data-slot": "block",
+    class: classes(classProp, className, layoutClass),
+    "data-slot": slot,
     "data-ak-layout": "true",
-    "data-gap": serializeResponsiveValueIf(
-      gap,
-      (value) => typeof value === "string" && SPACE_TOKENS.has(value.trim()),
-    ),
-    "data-gap-x": serializeResponsiveValueIf(
-      gapX,
-      (value) => typeof value === "string" && SPACE_TOKENS.has(value.trim()),
-    ),
-    "data-gap-y": serializeResponsiveValueIf(
-      gapY,
-      (value) => typeof value === "string" && SPACE_TOKENS.has(value.trim()),
-    ),
-    "data-align": serializeResponsiveValueIf(
-      align,
-      (value) =>
-        typeof value === "string" &&
-        ["start", "end", "center", "stretch", "baseline"].includes(value.trim()),
-    ),
-    "data-justify": serializeResponsiveValueIf(
-      justify,
-      (value) =>
-        typeof value === "string" && ["start", "end", "center", "between"].includes(value.trim()),
-    ),
-    "data-size": `initial:${size}`,
   });
 
   if (asChild) {
     return <Slot asChild {...finalProps} children={children as JSX.Element} />;
   }
 
-  if (as === "span") {
-    return <span {...finalProps}>{children}</span>;
-  }
-
-  return <div {...finalProps}>{children}</div>;
+  const Element = (as ?? DEFAULT_ELEMENT) as keyof JSX.IntrinsicElements;
+  return <Element {...finalProps}>{children}</Element>;
 }