@askrjs/themes 0.0.4 → 0.0.6

package/dist/components/_internal/layout.js

@@ -34,7 +34,8 @@ const CONTAINER_SIZE_MAP = {
 	sm: "var(--ak-container-1)",
 	md: "var(--ak-container-2)",
 	lg: "var(--ak-container-3)",
-	xl: "var(--ak-container-4)"
+	xl: "var(--ak-container-4)",
+	fluid: "100%"
 };
 /**
 * Returns true when `value` is a concrete CSS length/size that can be serialized

package/dist/components/_internal/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","names":[],"sources":["../../../src/components/_internal/layout.ts"],"sourcesContent":["/**\n * Layout helpers shared by headless layout primitives.\n */\n\nexport type LayoutBreakpoint = \"initial\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\nexport type ResponsiveValue<T> = T | Partial<Record<LayoutBreakpoint, T>>;\n\nconst BREAKPOINTS: readonly LayoutBreakpoint[] = [\"initial\", \"sm\", \"md\", \"lg\", \"xl\"];\n\n/** Units and patterns that identify a concrete CSS length value. */\nconst CSS_UNIT_RE =\n  /^-?[\\d.]+(%|px|em|rem|ex|ch|ic|lh|rlh|vw|vh|vmin|vmax|svw|svh|dvw|dvh|cqw|cqh|cqi|cqb|fr|cm|mm|in|pt|pc|Q)$/;\n\nconst SPACE_TOKEN_MAP: Record<string, string> = {\n  \"1\": \"var(--ak-space-1)\",\n  \"2\": \"var(--ak-space-2)\",\n  \"3\": \"var(--ak-space-3)\",\n  \"4\": \"var(--ak-space-4)\",\n  \"5\": \"var(--ak-space-5)\",\n  \"6\": \"var(--ak-space-6)\",\n  \"7\": \"var(--ak-space-7)\",\n  \"8\": \"var(--ak-space-8)\",\n  \"9\": \"var(--ak-space-9)\",\n  xs: \"var(--ak-space-xs)\",\n  sm: \"var(--ak-space-sm)\",\n  md: \"var(--ak-space-md)\",\n  lg: \"var(--ak-space-lg)\",\n  xl: \"var(--ak-space-xl)\",\n  \"2xl\": \"var(--ak-space-2xl)\",\n  \"3xl\": \"var(--ak-space-3xl)\",\n};\n\nconst CONTAINER_SIZE_MAP: Record<string, string> = {\n  \"1\": \"var(--ak-container-1)\",\n  \"2\": \"var(--ak-container-2)\",\n  \"3\": \"var(--ak-container-3)\",\n  \"4\": \"var(--ak-container-4)\",\n  sm: \"var(--ak-container-1)\",\n  md: \"var(--ak-container-2)\",\n  lg: \"var(--ak-container-3)\",\n  xl: \"var(--ak-container-4)\",\n};\n\nconst SECTION_SIZE_MAP: Record<string, string> = {\n  \"1\": \"var(--ak-section-1)\",\n  \"2\": \"var(--ak-section-2)\",\n  \"3\": \"var(--ak-section-3)\",\n  \"4\": \"var(--ak-section-4)\",\n};\n\n/**\n * Returns true when `value` is a concrete CSS length/size that can be serialized\n * into a CSS declaration without token translation.\n */\nexport function isCssLength(value: unknown): value is string {\n  if (typeof value !== \"string\") return false;\n  const v = value.trim();\n  if (v === \"0\") return true;\n  if (CSS_UNIT_RE.test(v)) return true;\n  // CSS functions: calc(), min(), max(), clamp(), fit-content(), env(), var()\n  if (/^[a-z][a-z-]*\\(/.test(v)) return true;\n  return false;\n}\n\nexport function isResponsiveValue<T>(\n  value: ResponsiveValue<T> | undefined,\n): value is Partial<Record<LayoutBreakpoint, T>> {\n  if (!value || typeof value !== \"object\" || Array.isArray(value)) return false;\n  return BREAKPOINTS.some((breakpoint) => breakpoint in value);\n}\n\nexport function normalizeResponsiveValue<T>(\n  value: ResponsiveValue<T> | undefined,\n): Partial<Record<LayoutBreakpoint, T>> | undefined {\n  if (value === undefined) return undefined;\n  if (isResponsiveValue(value)) return value;\n  return { initial: value };\n}\n\nexport function serializeResponsiveValue<T>(\n  value: ResponsiveValue<T> | undefined,\n): string | undefined {\n  const normalized = normalizeResponsiveValue(value);\n  if (!normalized) return undefined;\n\n  return BREAKPOINTS.map((breakpoint) => {\n    const breakpointValue = normalized[breakpoint];\n    if (breakpointValue === undefined) return \"\";\n    return `${breakpoint}:${String(breakpointValue)}`;\n  })\n    .filter(Boolean)\n    .join(\"|\");\n}\n\nexport function serializeResponsiveValueIf<T>(\n  value: ResponsiveValue<T> | undefined,\n  predicate: (value: T) => boolean,\n): string | undefined {\n  const normalized = normalizeResponsiveValue(value);\n  if (!normalized) return undefined;\n\n  for (const breakpoint of BREAKPOINTS) {\n    const breakpointValue = normalized[breakpoint];\n    if (breakpointValue === undefined) continue;\n    if (!predicate(breakpointValue)) return undefined;\n  }\n\n  return serializeResponsiveValue(value);\n}\n\nexport function serializeValueIf<T>(\n  value: T | undefined,\n  predicate: (value: T) => boolean,\n): string | undefined {\n  if (value === undefined || !predicate(value)) return undefined;\n  return String(value);\n}\n\nexport function setResponsiveStyleVar<T>(\n  styles: Record<string, string | number>,\n  variable: string,\n  value: ResponsiveValue<T> | undefined,\n  resolve: (value: T) => string | number | undefined = (input) =>\n    input as string | number | undefined,\n) {\n  const normalized = normalizeResponsiveValue(value);\n  if (!normalized) return;\n\n  for (const breakpoint of BREAKPOINTS) {\n    const breakpointValue = normalized[breakpoint];\n    if (breakpointValue === undefined) continue;\n    const resolved = resolve(breakpointValue);\n    if (resolved === undefined || resolved === null || resolved === \"\") continue;\n    styles[`--ak-${variable}-${breakpoint}`] = resolved;\n  }\n}\n\nexport function resolveSpaceValue(value: string | number): string | number {\n  if (typeof value === \"number\") return String(value);\n  const trimmed = value.trim();\n  return SPACE_TOKEN_MAP[trimmed] ?? trimmed;\n}\n\nexport function resolveContainerSizeValue(value: string): string {\n  const trimmed = value.trim();\n  return CONTAINER_SIZE_MAP[trimmed] ?? trimmed;\n}\n\nexport function resolveSectionSizeValue(value: string): string {\n  const trimmed = value.trim();\n  return SECTION_SIZE_MAP[trimmed] ?? trimmed;\n}\n\nexport function resolveJustifyValue(value: string): string {\n  const trimmed = value.trim();\n  if (trimmed === \"between\") return \"space-between\";\n  if (trimmed === \"start\") return \"flex-start\";\n  if (trimmed === \"end\") return \"flex-end\";\n  return trimmed;\n}\n\nexport function resolveAlignValue(value: string): string {\n  const trimmed = value.trim();\n  if (trimmed === \"start\") return \"flex-start\";\n  if (trimmed === \"end\") return \"flex-end\";\n  return trimmed;\n}\n\nexport function resolveInlineAlignValue(value: \"left\" | \"center\" | \"right\"): {\n  marginLeft?: string;\n  marginRight?: string;\n} {\n  if (value === \"left\") return { marginLeft: \"0\", marginRight: \"auto\" };\n  if (value === \"right\") return { marginLeft: \"auto\", marginRight: \"0\" };\n  return { marginLeft: \"auto\", marginRight: \"auto\" };\n}\n\n/**\n * Merges a record of computed layout declarations with a user-supplied style\n * value. The user's declarations take precedence for conflicting keys.\n */\nexport function mergeLayoutStyles(\n  layout: Record<string, string | number>,\n  user: unknown,\n): string | undefined {\n  const merged: Record<string, unknown> = { ...layout };\n\n  if (user !== null && user !== undefined && typeof user === \"object\") {\n    Object.assign(merged, user as Record<string, unknown>);\n  }\n\n  const mergedString = objectToCssString(merged);\n\n  if (typeof user === \"string\" && user.trim()) {\n    return mergedString ? `${mergedString};${user.trim()}` : user.trim();\n  }\n\n  return mergedString || undefined;\n}\n\nfunction camelToKebab(s: string): string {\n  return s.replace(/([A-Z])/g, (c) => `-${c.toLowerCase()}`);\n}\n\nfunction objectToCssString(styles: Record<string, unknown>): string {\n  return Object.entries(styles)\n    .filter(([, value]) => value !== undefined && value !== null)\n    .map(([key, value]) => `${camelToKebab(key)}:${String(value)}`)\n    .join(\";\");\n}\n"],"mappings":"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"}
+{"version":3,"file":"layout.js","names":[],"sources":["../../../src/components/_internal/layout.ts"],"sourcesContent":["/**\n * Layout helpers shared by headless layout primitives.\n */\n\nexport type LayoutBreakpoint = \"initial\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\nexport type ResponsiveValue<T> = T | Partial<Record<LayoutBreakpoint, T>>;\n\nconst BREAKPOINTS: readonly LayoutBreakpoint[] = [\"initial\", \"sm\", \"md\", \"lg\", \"xl\"];\n\n/** Units and patterns that identify a concrete CSS length value. */\nconst CSS_UNIT_RE =\n  /^-?[\\d.]+(%|px|em|rem|ex|ch|ic|lh|rlh|vw|vh|vmin|vmax|svw|svh|dvw|dvh|cqw|cqh|cqi|cqb|fr|cm|mm|in|pt|pc|Q)$/;\n\nconst SPACE_TOKEN_MAP: Record<string, string> = {\n  \"1\": \"var(--ak-space-1)\",\n  \"2\": \"var(--ak-space-2)\",\n  \"3\": \"var(--ak-space-3)\",\n  \"4\": \"var(--ak-space-4)\",\n  \"5\": \"var(--ak-space-5)\",\n  \"6\": \"var(--ak-space-6)\",\n  \"7\": \"var(--ak-space-7)\",\n  \"8\": \"var(--ak-space-8)\",\n  \"9\": \"var(--ak-space-9)\",\n  xs: \"var(--ak-space-xs)\",\n  sm: \"var(--ak-space-sm)\",\n  md: \"var(--ak-space-md)\",\n  lg: \"var(--ak-space-lg)\",\n  xl: \"var(--ak-space-xl)\",\n  \"2xl\": \"var(--ak-space-2xl)\",\n  \"3xl\": \"var(--ak-space-3xl)\",\n};\n\nconst CONTAINER_SIZE_MAP: Record<string, string> = {\n  \"1\": \"var(--ak-container-1)\",\n  \"2\": \"var(--ak-container-2)\",\n  \"3\": \"var(--ak-container-3)\",\n  \"4\": \"var(--ak-container-4)\",\n  sm: \"var(--ak-container-1)\",\n  md: \"var(--ak-container-2)\",\n  lg: \"var(--ak-container-3)\",\n  xl: \"var(--ak-container-4)\",\n  fluid: \"100%\",\n};\n\nconst SECTION_SIZE_MAP: Record<string, string> = {\n  \"1\": \"var(--ak-section-1)\",\n  \"2\": \"var(--ak-section-2)\",\n  \"3\": \"var(--ak-section-3)\",\n  \"4\": \"var(--ak-section-4)\",\n};\n\n/**\n * Returns true when `value` is a concrete CSS length/size that can be serialized\n * into a CSS declaration without token translation.\n */\nexport function isCssLength(value: unknown): value is string {\n  if (typeof value !== \"string\") return false;\n  const v = value.trim();\n  if (v === \"0\") return true;\n  if (CSS_UNIT_RE.test(v)) return true;\n  // CSS functions: calc(), min(), max(), clamp(), fit-content(), env(), var()\n  if (/^[a-z][a-z-]*\\(/.test(v)) return true;\n  return false;\n}\n\nexport function isResponsiveValue<T>(\n  value: ResponsiveValue<T> | undefined,\n): value is Partial<Record<LayoutBreakpoint, T>> {\n  if (!value || typeof value !== \"object\" || Array.isArray(value)) return false;\n  return BREAKPOINTS.some((breakpoint) => breakpoint in value);\n}\n\nexport function normalizeResponsiveValue<T>(\n  value: ResponsiveValue<T> | undefined,\n): Partial<Record<LayoutBreakpoint, T>> | undefined {\n  if (value === undefined) return undefined;\n  if (isResponsiveValue(value)) return value;\n  return { initial: value };\n}\n\nexport function serializeResponsiveValue<T>(\n  value: ResponsiveValue<T> | undefined,\n): string | undefined {\n  const normalized = normalizeResponsiveValue(value);\n  if (!normalized) return undefined;\n\n  return BREAKPOINTS.map((breakpoint) => {\n    const breakpointValue = normalized[breakpoint];\n    if (breakpointValue === undefined) return \"\";\n    return `${breakpoint}:${String(breakpointValue)}`;\n  })\n    .filter(Boolean)\n    .join(\"|\");\n}\n\nexport function serializeResponsiveValueIf<T>(\n  value: ResponsiveValue<T> | undefined,\n  predicate: (value: T) => boolean,\n): string | undefined {\n  const normalized = normalizeResponsiveValue(value);\n  if (!normalized) return undefined;\n\n  for (const breakpoint of BREAKPOINTS) {\n    const breakpointValue = normalized[breakpoint];\n    if (breakpointValue === undefined) continue;\n    if (!predicate(breakpointValue)) return undefined;\n  }\n\n  return serializeResponsiveValue(value);\n}\n\nexport function serializeValueIf<T>(\n  value: T | undefined,\n  predicate: (value: T) => boolean,\n): string | undefined {\n  if (value === undefined || !predicate(value)) return undefined;\n  return String(value);\n}\n\nexport function setResponsiveStyleVar<T>(\n  styles: Record<string, string | number>,\n  variable: string,\n  value: ResponsiveValue<T> | undefined,\n  resolve: (value: T) => string | number | undefined = (input) =>\n    input as string | number | undefined,\n) {\n  const normalized = normalizeResponsiveValue(value);\n  if (!normalized) return;\n\n  for (const breakpoint of BREAKPOINTS) {\n    const breakpointValue = normalized[breakpoint];\n    if (breakpointValue === undefined) continue;\n    const resolved = resolve(breakpointValue);\n    if (resolved === undefined || resolved === null || resolved === \"\") continue;\n    styles[`--ak-${variable}-${breakpoint}`] = resolved;\n  }\n}\n\nexport function resolveSpaceValue(value: string | number): string | number {\n  if (typeof value === \"number\") return String(value);\n  const trimmed = value.trim();\n  return SPACE_TOKEN_MAP[trimmed] ?? trimmed;\n}\n\nexport function resolveContainerSizeValue(value: string): string {\n  const trimmed = value.trim();\n  return CONTAINER_SIZE_MAP[trimmed] ?? trimmed;\n}\n\nexport function resolveSectionSizeValue(value: string): string {\n  const trimmed = value.trim();\n  return SECTION_SIZE_MAP[trimmed] ?? trimmed;\n}\n\nexport function resolveJustifyValue(value: string): string {\n  const trimmed = value.trim();\n  if (trimmed === \"between\") return \"space-between\";\n  if (trimmed === \"start\") return \"flex-start\";\n  if (trimmed === \"end\") return \"flex-end\";\n  return trimmed;\n}\n\nexport function resolveAlignValue(value: string): string {\n  const trimmed = value.trim();\n  if (trimmed === \"start\") return \"flex-start\";\n  if (trimmed === \"end\") return \"flex-end\";\n  return trimmed;\n}\n\nexport function resolveInlineAlignValue(value: \"left\" | \"center\" | \"right\"): {\n  marginLeft?: string;\n  marginRight?: string;\n} {\n  if (value === \"left\") return { marginLeft: \"0\", marginRight: \"auto\" };\n  if (value === \"right\") return { marginLeft: \"auto\", marginRight: \"0\" };\n  return { marginLeft: \"auto\", marginRight: \"auto\" };\n}\n\n/**\n * Merges a record of computed layout declarations with a user-supplied style\n * value. The user's declarations take precedence for conflicting keys.\n */\nexport function mergeLayoutStyles(\n  layout: Record<string, string | number>,\n  user: unknown,\n): string | undefined {\n  const merged: Record<string, unknown> = { ...layout };\n\n  if (user !== null && user !== undefined && typeof user === \"object\") {\n    Object.assign(merged, user as Record<string, unknown>);\n  }\n\n  const mergedString = objectToCssString(merged);\n\n  if (typeof user === \"string\" && user.trim()) {\n    return mergedString ? `${mergedString};${user.trim()}` : user.trim();\n  }\n\n  return mergedString || undefined;\n}\n\nfunction camelToKebab(s: string): string {\n  return s.replace(/([A-Z])/g, (c) => `-${c.toLowerCase()}`);\n}\n\nfunction objectToCssString(styles: Record<string, unknown>): string {\n  return Object.entries(styles)\n    .filter(([, value]) => value !== undefined && value !== null)\n    .map(([key, value]) => `${camelToKebab(key)}:${String(value)}`)\n    .join(\";\");\n}\n"],"mappings":"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"}

package/dist/components/container/container.a11y.d.ts

@@ -4,7 +4,6 @@ declare const CONTAINER_A11Y_CONTRACT: {
     readonly slot: "data-slot";
     readonly layout: "data-ak-layout";
     readonly variant: "data-variant";
-    readonly fluid: "data-fluid";
     readonly maxWidth: "data-max-width";
     readonly padding: "data-padding";
     readonly size: "data-size";

package/dist/components/container/container.js

@@ -12,7 +12,8 @@ const CONTAINER_WIDTH_TOKENS = new Set([
 	"sm",
 	"md",
 	"lg",
-	"xl"
+	"xl",
+	"fluid"
 ]);
 function isContainerWidthToken(value) {
 	return typeof value === "string" && CONTAINER_WIDTH_TOKENS.has(value.trim());
@@ -33,15 +34,15 @@ function isStaticValue(value) {
 	return !isResponsiveValue(value);
 }
 function Container(props) {
-	const { asChild, children, variant, fluid = false, maxWidth, padding, size, align = "center", ref, style: userStyle, ...rest } = props;
-	const responsiveVariant = fluid || size === void 0 && maxWidth === void 0 ? fluid ? "fluid" : variant ?? "default" : void 0;
+	const { asChild, children, variant, maxWidth, padding, size, align = "center", ref, style: userStyle, ...rest } = props;
+	const responsiveVariant = size === void 0 && maxWidth === void 0 ? variant ?? "default" : void 0;
 	const { boxProps, rest: passthroughProps } = splitBoxLayoutProps(rest);
 	const layoutStyle = {
 		boxSizing: "border-box",
 		width: "100%"
 	};
 	applyBoxLayoutStyles(layoutStyle, boxProps);
-	const widthValue = fluid ? void 0 : maxWidth ?? size;
+	const widthValue = maxWidth ?? size;
 	if (boxProps.maxWidth === void 0 && widthValue !== void 0 && (isResponsiveValue(widthValue) || !isContainerWidthToken(widthValue))) setResponsiveStyleVar(layoutStyle, "max-width", widthValue, (value) => typeof value === "string" && isContainerWidthToken(value) ? resolveContainerSizeValue(value) : value);
 	if (padding !== void 0 && boxProps.px === void 0 && boxProps.pl === void 0 && boxProps.pr === void 0) setResponsiveStyleVar(layoutStyle, "px", padding, resolveSpaceValue);
 	const applyAlign = (side, value) => {
@@ -60,10 +61,9 @@ function Container(props) {
 		"data-slot": "container",
 		"data-ak-layout": "true",
 		"data-variant": responsiveVariant,
-		"data-fluid": fluid ? "true" : void 0,
-		"data-size": fluid ? void 0 : isStaticValue(size) ? serializeResponsiveValueIf(size, isContainerWidthToken) : void 0,
+		"data-size": isStaticValue(size) ? serializeResponsiveValueIf(size, isContainerWidthToken) : void 0,
 		"data-align": isStaticValue(align) ? serializeResponsiveValueIf(align, isContainerAlignToken) : void 0,
-		"data-max-width": fluid ? void 0 : isStaticValue(maxWidth) ? serializeResponsiveValueIf(maxWidth, isContainerWidthToken) : void 0,
+		"data-max-width": isStaticValue(maxWidth) ? serializeResponsiveValueIf(maxWidth, isContainerWidthToken) : void 0,
 		...layoutClass ? { class: layoutClass } : {}
 	});
 	if (asChild) return /* @__PURE__ */ jsx(Slot, {

package/dist/components/container/container.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.js","names":[],"sources":["../../../src/components/container/container.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport {\n  applyBoxLayoutStyles,\n  splitBoxLayoutProps,\n  withBoxLayoutClass,\n} from \"../_internal/box-layout\";\nimport {\n  isResponsiveValue,\n  resolveContainerSizeValue,\n  resolveInlineAlignValue,\n  resolveSpaceValue,\n  serializeResponsiveValueIf,\n  setResponsiveStyleVar,\n} from \"../_internal/layout\";\nimport type { ContainerAsChildProps, ContainerNativeProps } from \"./container.types\";\n\nconst CONTAINER_WIDTH_TOKENS = new Set([\"1\", \"2\", \"3\", \"4\", \"sm\", \"md\", \"lg\", \"xl\"]);\n\nfunction isContainerWidthToken(value: unknown): value is string {\n  return typeof value === \"string\" && CONTAINER_WIDTH_TOKENS.has(value.trim());\n}\n\nfunction isContainerAlignToken(value: unknown): value is \"left\" | \"center\" | \"right\" {\n  return typeof value === \"string\" && [\"left\", \"center\", \"right\"].includes(value.trim());\n}\n\nfunction hasStyleValue(value: unknown): boolean {\n  if (typeof value === \"string\") return value.trim().length > 0;\n  if (value && typeof value === \"object\") {\n    return Object.keys(value as Record<string, unknown>).length > 0;\n  }\n\n  return false;\n}\n\nfunction isStaticValue(value: unknown): boolean {\n  return !isResponsiveValue(value as Record<string, unknown> | undefined);\n}\n\nexport function Container(props: ContainerNativeProps): JSX.Element;\nexport function Container(props: ContainerAsChildProps): JSX.Element;\nexport function Container(props: ContainerNativeProps | ContainerAsChildProps) {\n  const {\n    asChild,\n    children,\n    variant,\n    fluid = false,\n    maxWidth,\n    padding,\n    size,\n    align = \"center\",\n    ref,\n    style: userStyle,\n    ...rest\n  } = props;\n\n  const responsiveVariant =\n    fluid || (size === undefined && maxWidth === undefined)\n      ? fluid\n        ? \"fluid\"\n        : (variant ?? \"default\")\n      : undefined;\n\n  const { boxProps, rest: passthroughProps } = splitBoxLayoutProps(rest);\n  const layoutStyle: Record<string, string | number> = {\n    boxSizing: \"border-box\",\n    width: \"100%\",\n  };\n  applyBoxLayoutStyles(layoutStyle, boxProps);\n\n  const widthValue = fluid ? undefined : (maxWidth ?? size);\n  const usesInlineMaxWidth =\n    boxProps.maxWidth === undefined &&\n    widthValue !== undefined &&\n    (isResponsiveValue(widthValue) || !isContainerWidthToken(widthValue));\n\n  if (usesInlineMaxWidth) {\n    setResponsiveStyleVar(layoutStyle, \"max-width\", widthValue, (value) =>\n      typeof value === \"string\" && isContainerWidthToken(value)\n        ? resolveContainerSizeValue(value)\n        : value,\n    );\n  }\n\n  if (\n    padding !== undefined &&\n    boxProps.px === undefined &&\n    boxProps.pl === undefined &&\n    boxProps.pr === undefined\n  ) {\n    setResponsiveStyleVar(layoutStyle, \"px\", padding, resolveSpaceValue);\n  }\n\n  const applyAlign = (side: \"marginLeft\" | \"marginRight\", value: typeof align) => {\n    setResponsiveStyleVar(layoutStyle, side === \"marginLeft\" ? \"ml\" : \"mr\", value, (input) => {\n      const margins = resolveInlineAlignValue(input);\n      return side === \"marginLeft\" ? margins.marginLeft : margins.marginRight;\n    });\n  };\n\n  if (boxProps.ml === undefined && boxProps.mr === undefined && isResponsiveValue(align)) {\n    applyAlign(\"marginLeft\", align);\n    applyAlign(\"marginRight\", align);\n  }\n\n  const layoutClass =\n    Object.keys(layoutStyle).length > 2 || hasStyleValue(userStyle)\n      ? withBoxLayoutClass(layoutStyle, userStyle)\n      : undefined;\n\n  const finalProps = mergeProps(passthroughProps, {\n    ref,\n    \"data-slot\": \"container\",\n    \"data-ak-layout\": \"true\",\n    \"data-variant\": responsiveVariant,\n    \"data-fluid\": fluid ? \"true\" : undefined,\n    \"data-size\": fluid\n      ? undefined\n      : isStaticValue(size)\n        ? serializeResponsiveValueIf(size, isContainerWidthToken)\n        : undefined,\n    \"data-align\": isStaticValue(align)\n      ? serializeResponsiveValueIf(align, isContainerAlignToken)\n      : undefined,\n    \"data-max-width\": fluid\n      ? undefined\n      : isStaticValue(maxWidth)\n        ? serializeResponsiveValueIf(maxWidth, isContainerWidthToken)\n        : undefined,\n    ...(layoutClass ? { class: layoutClass } : {}),\n  });\n\n  if (asChild) {\n    return <Slot asChild {...finalProps} children={children} />;\n  }\n\n  return <div {...finalProps}>{children}</div>;\n}\n"],"mappings":";;;;;;AAiBA,MAAM,yBAAyB,IAAI,IAAI;CAAC;CAAK;CAAK;CAAK;CAAK;CAAM;CAAM;CAAM;CAAK,CAAC;AAEpF,SAAS,sBAAsB,OAAiC;CAC9D,OAAO,OAAO,UAAU,YAAY,uBAAuB,IAAI,MAAM,MAAM,CAAC;;AAG9E,SAAS,sBAAsB,OAAsD;CACnF,OAAO,OAAO,UAAU,YAAY;EAAC;EAAQ;EAAU;EAAQ,CAAC,SAAS,MAAM,MAAM,CAAC;;AAGxF,SAAS,cAAc,OAAyB;CAC9C,IAAI,OAAO,UAAU,UAAU,OAAO,MAAM,MAAM,CAAC,SAAS;CAC5D,IAAI,SAAS,OAAO,UAAU,UAC5B,OAAO,OAAO,KAAK,MAAiC,CAAC,SAAS;CAGhE,OAAO;;AAGT,SAAS,cAAc,OAAyB;CAC9C,OAAO,CAAC,kBAAkB,MAA6C;;AAKzE,SAAgB,UAAU,OAAqD;CAC7E,MAAM,EACJ,SACA,UACA,SACA,QAAQ,OACR,UACA,SACA,MACA,QAAQ,UACR,KACA,OAAO,WACP,GAAG,SACD;CAEJ,MAAM,oBACJ,SAAU,SAAS,KAAA,KAAa,aAAa,KAAA,IACzC,QACE,UACC,WAAW,YACd,KAAA;CAEN,MAAM,EAAE,UAAU,MAAM,qBAAqB,oBAAoB,KAAK;CACtE,MAAM,cAA+C;EACnD,WAAW;EACX,OAAO;EACR;CACD,qBAAqB,aAAa,SAAS;CAE3C,MAAM,aAAa,QAAQ,KAAA,IAAa,YAAY;CAMpD,IAJE,SAAS,aAAa,KAAA,KACtB,eAAe,KAAA,MACd,kBAAkB,WAAW,IAAI,CAAC,sBAAsB,WAAW,GAGpE,sBAAsB,aAAa,aAAa,aAAa,UAC3D,OAAO,UAAU,YAAY,sBAAsB,MAAM,GACrD,0BAA0B,MAAM,GAChC,MACL;CAGH,IACE,YAAY,KAAA,KACZ,SAAS,OAAO,KAAA,KAChB,SAAS,OAAO,KAAA,KAChB,SAAS,OAAO,KAAA,GAEhB,sBAAsB,aAAa,MAAM,SAAS,kBAAkB;CAGtE,MAAM,cAAc,MAAoC,UAAwB;EAC9E,sBAAsB,aAAa,SAAS,eAAe,OAAO,MAAM,QAAQ,UAAU;GACxF,MAAM,UAAU,wBAAwB,MAAM;GAC9C,OAAO,SAAS,eAAe,QAAQ,aAAa,QAAQ;IAC5D;;CAGJ,IAAI,SAAS,OAAO,KAAA,KAAa,SAAS,OAAO,KAAA,KAAa,kBAAkB,MAAM,EAAE;EACtF,WAAW,cAAc,MAAM;EAC/B,WAAW,eAAe,MAAM;;CAGlC,MAAM,cACJ,OAAO,KAAK,YAAY,CAAC,SAAS,KAAK,cAAc,UAAU,GAC3D,mBAAmB,aAAa,UAAU,GAC1C,KAAA;CAEN,MAAM,aAAa,WAAW,kBAAkB;EAC9C;EACA,aAAa;EACb,kBAAkB;EAClB,gBAAgB;EAChB,cAAc,QAAQ,SAAS,KAAA;EAC/B,aAAa,QACT,KAAA,IACA,cAAc,KAAK,GACjB,2BAA2B,MAAM,sBAAsB,GACvD,KAAA;EACN,cAAc,cAAc,MAAM,GAC9B,2BAA2B,OAAO,sBAAsB,GACxD,KAAA;EACJ,kBAAkB,QACd,KAAA,IACA,cAAc,SAAS,GACrB,2BAA2B,UAAU,sBAAsB,GAC3D,KAAA;EACN,GAAI,cAAc,EAAE,OAAO,aAAa,GAAG,EAAE;EAC9C,CAAC;CAEF,IAAI,SACF,OAAO,oBAAC,MAAD;EAAM,SAAA;EAAQ,GAAI;EAAsB;EAAY,CAAA;CAG7D,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAa;EAAe,CAAA"}
+{"version":3,"file":"container.js","names":[],"sources":["../../../src/components/container/container.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport {\n  applyBoxLayoutStyles,\n  splitBoxLayoutProps,\n  withBoxLayoutClass,\n} from \"../_internal/box-layout\";\nimport {\n  isResponsiveValue,\n  resolveContainerSizeValue,\n  resolveInlineAlignValue,\n  resolveSpaceValue,\n  serializeResponsiveValueIf,\n  setResponsiveStyleVar,\n} from \"../_internal/layout\";\nimport type { ContainerAsChildProps, ContainerNativeProps } from \"./container.types\";\n\nconst CONTAINER_WIDTH_TOKENS = new Set([\"1\", \"2\", \"3\", \"4\", \"sm\", \"md\", \"lg\", \"xl\", \"fluid\"]);\n\nfunction isContainerWidthToken(value: unknown): value is string {\n  return typeof value === \"string\" && CONTAINER_WIDTH_TOKENS.has(value.trim());\n}\n\nfunction isContainerAlignToken(value: unknown): value is \"left\" | \"center\" | \"right\" {\n  return typeof value === \"string\" && [\"left\", \"center\", \"right\"].includes(value.trim());\n}\n\nfunction hasStyleValue(value: unknown): boolean {\n  if (typeof value === \"string\") return value.trim().length > 0;\n  if (value && typeof value === \"object\") {\n    return Object.keys(value as Record<string, unknown>).length > 0;\n  }\n\n  return false;\n}\n\nfunction isStaticValue(value: unknown): boolean {\n  return !isResponsiveValue(value as Record<string, unknown> | undefined);\n}\n\nexport function Container(props: ContainerNativeProps): JSX.Element;\nexport function Container(props: ContainerAsChildProps): JSX.Element;\nexport function Container(props: ContainerNativeProps | ContainerAsChildProps) {\n  const {\n    asChild,\n    children,\n    variant,\n    maxWidth,\n    padding,\n    size,\n    align = \"center\",\n    ref,\n    style: userStyle,\n    ...rest\n  } = props;\n\n  const responsiveVariant =\n    size === undefined && maxWidth === undefined ? (variant ?? \"default\") : undefined;\n\n  const { boxProps, rest: passthroughProps } = splitBoxLayoutProps(rest);\n  const layoutStyle: Record<string, string | number> = {\n    boxSizing: \"border-box\",\n    width: \"100%\",\n  };\n  applyBoxLayoutStyles(layoutStyle, boxProps);\n\n  const widthValue = maxWidth ?? size;\n  const usesInlineMaxWidth =\n    boxProps.maxWidth === undefined &&\n    widthValue !== undefined &&\n    (isResponsiveValue(widthValue) || !isContainerWidthToken(widthValue));\n\n  if (usesInlineMaxWidth) {\n    setResponsiveStyleVar(layoutStyle, \"max-width\", widthValue, (value) =>\n      typeof value === \"string\" && isContainerWidthToken(value)\n        ? resolveContainerSizeValue(value)\n        : value,\n    );\n  }\n\n  if (\n    padding !== undefined &&\n    boxProps.px === undefined &&\n    boxProps.pl === undefined &&\n    boxProps.pr === undefined\n  ) {\n    setResponsiveStyleVar(layoutStyle, \"px\", padding, resolveSpaceValue);\n  }\n\n  const applyAlign = (side: \"marginLeft\" | \"marginRight\", value: typeof align) => {\n    setResponsiveStyleVar(layoutStyle, side === \"marginLeft\" ? \"ml\" : \"mr\", value, (input) => {\n      const margins = resolveInlineAlignValue(input);\n      return side === \"marginLeft\" ? margins.marginLeft : margins.marginRight;\n    });\n  };\n\n  if (boxProps.ml === undefined && boxProps.mr === undefined && isResponsiveValue(align)) {\n    applyAlign(\"marginLeft\", align);\n    applyAlign(\"marginRight\", align);\n  }\n\n  const layoutClass =\n    Object.keys(layoutStyle).length > 2 || hasStyleValue(userStyle)\n      ? withBoxLayoutClass(layoutStyle, userStyle)\n      : undefined;\n\n  const finalProps = mergeProps(passthroughProps, {\n    ref,\n    \"data-slot\": \"container\",\n    \"data-ak-layout\": \"true\",\n    \"data-variant\": responsiveVariant,\n    \"data-size\": isStaticValue(size)\n      ? serializeResponsiveValueIf(size, isContainerWidthToken)\n      : undefined,\n    \"data-align\": isStaticValue(align)\n      ? serializeResponsiveValueIf(align, isContainerAlignToken)\n      : undefined,\n    \"data-max-width\": isStaticValue(maxWidth)\n      ? serializeResponsiveValueIf(maxWidth, isContainerWidthToken)\n      : undefined,\n    ...(layoutClass ? { class: layoutClass } : {}),\n  });\n\n  if (asChild) {\n    return <Slot asChild {...finalProps} children={children} />;\n  }\n\n  return <div {...finalProps}>{children}</div>;\n}\n"],"mappings":";;;;;;AAiBA,MAAM,yBAAyB,IAAI,IAAI;CAAC;CAAK;CAAK;CAAK;CAAK;CAAM;CAAM;CAAM;CAAM;CAAQ,CAAC;AAE7F,SAAS,sBAAsB,OAAiC;CAC9D,OAAO,OAAO,UAAU,YAAY,uBAAuB,IAAI,MAAM,MAAM,CAAC;;AAG9E,SAAS,sBAAsB,OAAsD;CACnF,OAAO,OAAO,UAAU,YAAY;EAAC;EAAQ;EAAU;EAAQ,CAAC,SAAS,MAAM,MAAM,CAAC;;AAGxF,SAAS,cAAc,OAAyB;CAC9C,IAAI,OAAO,UAAU,UAAU,OAAO,MAAM,MAAM,CAAC,SAAS;CAC5D,IAAI,SAAS,OAAO,UAAU,UAC5B,OAAO,OAAO,KAAK,MAAiC,CAAC,SAAS;CAGhE,OAAO;;AAGT,SAAS,cAAc,OAAyB;CAC9C,OAAO,CAAC,kBAAkB,MAA6C;;AAKzE,SAAgB,UAAU,OAAqD;CAC7E,MAAM,EACJ,SACA,UACA,SACA,UACA,SACA,MACA,QAAQ,UACR,KACA,OAAO,WACP,GAAG,SACD;CAEJ,MAAM,oBACJ,SAAS,KAAA,KAAa,aAAa,KAAA,IAAa,WAAW,YAAa,KAAA;CAE1E,MAAM,EAAE,UAAU,MAAM,qBAAqB,oBAAoB,KAAK;CACtE,MAAM,cAA+C;EACnD,WAAW;EACX,OAAO;EACR;CACD,qBAAqB,aAAa,SAAS;CAE3C,MAAM,aAAa,YAAY;CAM/B,IAJE,SAAS,aAAa,KAAA,KACtB,eAAe,KAAA,MACd,kBAAkB,WAAW,IAAI,CAAC,sBAAsB,WAAW,GAGpE,sBAAsB,aAAa,aAAa,aAAa,UAC3D,OAAO,UAAU,YAAY,sBAAsB,MAAM,GACrD,0BAA0B,MAAM,GAChC,MACL;CAGH,IACE,YAAY,KAAA,KACZ,SAAS,OAAO,KAAA,KAChB,SAAS,OAAO,KAAA,KAChB,SAAS,OAAO,KAAA,GAEhB,sBAAsB,aAAa,MAAM,SAAS,kBAAkB;CAGtE,MAAM,cAAc,MAAoC,UAAwB;EAC9E,sBAAsB,aAAa,SAAS,eAAe,OAAO,MAAM,QAAQ,UAAU;GACxF,MAAM,UAAU,wBAAwB,MAAM;GAC9C,OAAO,SAAS,eAAe,QAAQ,aAAa,QAAQ;IAC5D;;CAGJ,IAAI,SAAS,OAAO,KAAA,KAAa,SAAS,OAAO,KAAA,KAAa,kBAAkB,MAAM,EAAE;EACtF,WAAW,cAAc,MAAM;EAC/B,WAAW,eAAe,MAAM;;CAGlC,MAAM,cACJ,OAAO,KAAK,YAAY,CAAC,SAAS,KAAK,cAAc,UAAU,GAC3D,mBAAmB,aAAa,UAAU,GAC1C,KAAA;CAEN,MAAM,aAAa,WAAW,kBAAkB;EAC9C;EACA,aAAa;EACb,kBAAkB;EAClB,gBAAgB;EAChB,aAAa,cAAc,KAAK,GAC5B,2BAA2B,MAAM,sBAAsB,GACvD,KAAA;EACJ,cAAc,cAAc,MAAM,GAC9B,2BAA2B,OAAO,sBAAsB,GACxD,KAAA;EACJ,kBAAkB,cAAc,SAAS,GACrC,2BAA2B,UAAU,sBAAsB,GAC3D,KAAA;EACJ,GAAI,cAAc,EAAE,OAAO,aAAa,GAAG,EAAE;EAC9C,CAAC;CAEF,IAAI,SACF,OAAO,oBAAC,MAAD;EAAM,SAAA;EAAQ,GAAI;EAAsB;EAAY,CAAA;CAG7D,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAa;EAAe,CAAA"}

package/dist/components/container/container.types.d.ts

@@ -5,9 +5,8 @@ import { Ref } from "@askrjs/askr/foundations/utilities";
 //#region src/components/container/container.types.d.ts
 type ContainerVariant = "default" | "sm" | "md" | "lg" | "xl" | "xxl" | "fluid";
 type ContainerOwnProps = BoxLayoutOwnProps & {
-  /** Bootstrap-like responsive container variant. */variant?: ContainerVariant; /** Makes the container span the full available width while preserving gutters. */
-  fluid?: boolean; /** Radix-style container size token. */
-  size?: LayoutResponsive<"1" | "2" | "3" | "4" | "sm" | "md" | "lg" | "xl">; /** Horizontal alignment of the constrained container. */
+  /** Bootstrap-like responsive container variant. */variant?: ContainerVariant; /** Radix-style container size token. */
+  size?: LayoutResponsive<"1" | "2" | "3" | "4" | "sm" | "md" | "lg" | "xl" | "fluid">; /** Horizontal alignment of the constrained container. */
   align?: LayoutResponsive<"left" | "center" | "right">; /** Compatibility max-width override. */
   maxWidth?: LayoutResponsive<string>; /** Compatibility horizontal padding override. */
   padding?: LayoutResponsive<string | number>;

package/dist/themes/default/index.css

@@ -797,7 +797,7 @@
   display: block;
 }
 
-:where([data-slot="container"][data-fluid="true"]), :where([data-slot="container"][data-variant="default"]), :where([data-slot="container"][data-variant="sm"]), :where([data-slot="container"][data-variant="md"]), :where([data-slot="container"][data-variant="lg"]), :where([data-slot="container"][data-variant="xl"]), :where([data-slot="container"][data-variant="xxl"]), :where([data-slot="container"][data-variant="fluid"]) {
+:where([data-slot="container"][data-size="initial:fluid"]), :where([data-slot="container"][data-variant="default"]), :where([data-slot="container"][data-variant="sm"]), :where([data-slot="container"][data-variant="md"]), :where([data-slot="container"][data-variant="lg"]), :where([data-slot="container"][data-variant="xl"]), :where([data-slot="container"][data-variant="xxl"]), :where([data-slot="container"][data-variant="fluid"]) {
   --ak-container-inline-size: 100%;
 }
 
@@ -1159,11 +1159,13 @@
 }
 
 :where([data-slot="shell"][data-variant="sidebar"], [data-slot="shell"][data-variant="rail"]) > :where([data-slot="shell-nav"]) {
+  min-block-size: 100vh;
   padding: var(--ak-layout-page-gutter);
   background: color-mix(in srgb, var(--ak-color-surface-muted) 92%, var(--ak-color-surface));
   border-inline-end: 0;
   border-block-end: 1px solid var(--ak-color-border);
-  align-content: start;
+  flex: 0 0 100vh;
+  align-content: stretch;
   inline-size: 100%;
   min-inline-size: 0;
   max-inline-size: 100%;
@@ -2162,11 +2164,17 @@
   }
 
   :where(.sidebar-shell, [data-slot="sidebar-shell"], .sidebar-panel, [data-slot="sidebar-panel"]) :where(.navbar-group[data-align="center"], [data-slot="navbar-group"][data-align="center"], .sidebar-group[data-align="center"], [data-slot="sidebar-group"][data-align="center"]) {
-    justify-items: stretch;
+    justify-items: center;
   }
 
   :where(.sidebar-shell, [data-slot="sidebar-shell"], .sidebar-panel, [data-slot="sidebar-panel"]) :where(.navbar-group[data-align="center"], [data-slot="navbar-group"][data-align="center"], .sidebar-group[data-align="center"], [data-slot="sidebar-group"][data-align="center"]) > :where(.navbar-group-label, [data-slot="navbar-group-label"], .sidebar-group-label, [data-slot="sidebar-group-label"]) {
     text-align: center;
+    inline-size: 100%;
+  }
+
+  :where(.sidebar-shell, [data-slot="sidebar-shell"], .sidebar-panel, [data-slot="sidebar-panel"]) :where(.navbar-group[data-align="center"], [data-slot="navbar-group"][data-align="center"], .sidebar-group[data-align="center"], [data-slot="sidebar-group"][data-align="center"]) > :where(.navbar-group-body, [data-slot="navbar-group-body"], .sidebar-group-body, [data-slot="sidebar-group-body"]) {
+    justify-items: center;
+    inline-size: 100%;
   }
 
   :where(.sidebar-shell, [data-slot="sidebar-shell"], .sidebar-panel, [data-slot="sidebar-panel"]) :where(.navbar-group[data-align="end"], [data-slot="navbar-group"][data-align="end"], .sidebar-group[data-align="end"], [data-slot="sidebar-group"][data-align="end"]) {
@@ -2207,6 +2215,9 @@
 
   :where(.sidebar-shell, [data-slot="sidebar-shell"], .sidebar-panel, [data-slot="sidebar-panel"]) :where(.navbar-group[data-align="center"], [data-slot="navbar-group"][data-align="center"], .sidebar-group[data-align="center"], [data-slot="sidebar-group"][data-align="center"]) :where(.nav-item, .navbar-item, [data-slot="nav-item"], [data-slot="nav-link"], .sidebar-item) {
     justify-content: center;
+    justify-self: center;
+    inline-size: auto;
+    max-inline-size: 100%;
   }
 
   :where(.sidebar-shell, [data-slot="sidebar-shell"], .sidebar-panel, [data-slot="sidebar-panel"]) :where(.nav-item, .navbar-item, [data-slot="nav-item"], [data-slot="nav-link"], .sidebar-item) > :where([data-slot="icon"], svg) {
@@ -4362,12 +4373,80 @@
   display: flex;
 }
 
-[data-slot="flex"] {
+[data-slot="flex"], [data-slot="inline"] {
   gap: var(--ak-space-md);
   flex-wrap: wrap;
   display: flex;
 }
 
+[data-slot="flex"][data-gap="initial:1"], [data-slot="inline"][data-gap="initial:1"] {
+  gap: var(--ak-space-1);
+}
+
+[data-slot="flex"][data-gap="initial:2"], [data-slot="inline"][data-gap="initial:2"] {
+  gap: var(--ak-space-2);
+}
+
+[data-slot="flex"][data-gap="initial:3"], [data-slot="inline"][data-gap="initial:3"] {
+  gap: var(--ak-space-3);
+}
+
+[data-slot="flex"][data-gap="initial:4"], [data-slot="inline"][data-gap="initial:4"] {
+  gap: var(--ak-space-4);
+}
+
+[data-slot="flex"][data-gap="initial:xs"], [data-slot="inline"][data-gap="initial:xs"] {
+  gap: var(--ak-space-xs);
+}
+
+[data-slot="flex"][data-gap="initial:sm"], [data-slot="inline"][data-gap="initial:sm"] {
+  gap: var(--ak-space-sm);
+}
+
+[data-slot="flex"][data-gap="initial:md"], [data-slot="inline"][data-gap="initial:md"] {
+  gap: var(--ak-space-md);
+}
+
+[data-slot="flex"][data-gap="initial:lg"], [data-slot="inline"][data-gap="initial:lg"] {
+  gap: var(--ak-space-lg);
+}
+
+[data-slot="flex"][data-gap="initial:xl"], [data-slot="inline"][data-gap="initial:xl"] {
+  gap: var(--ak-space-xl);
+}
+
+[data-slot="flex"][data-gap-x="initial:sm"], [data-slot="inline"][data-gap-x="initial:sm"] {
+  column-gap: var(--ak-space-sm);
+}
+
+[data-slot="flex"][data-gap-x="initial:md"], [data-slot="inline"][data-gap-x="initial:md"] {
+  column-gap: var(--ak-space-md);
+}
+
+[data-slot="flex"][data-gap-x="initial:lg"], [data-slot="inline"][data-gap-x="initial:lg"] {
+  column-gap: var(--ak-space-lg);
+}
+
+[data-slot="flex"][data-gap-y="initial:sm"], [data-slot="inline"][data-gap-y="initial:sm"] {
+  row-gap: var(--ak-space-sm);
+}
+
+[data-slot="flex"][data-gap-y="initial:md"], [data-slot="inline"][data-gap-y="initial:md"] {
+  row-gap: var(--ak-space-md);
+}
+
+[data-slot="flex"][data-gap-y="initial:lg"], [data-slot="inline"][data-gap-y="initial:lg"] {
+  row-gap: var(--ak-space-lg);
+}
+
+[data-slot="flex"][data-wrap="initial:nowrap"], [data-slot="inline"][data-wrap="initial:nowrap"] {
+  flex-wrap: nowrap;
+}
+
+[data-slot="flex"][data-wrap="initial:wrap-reverse"], [data-slot="inline"][data-wrap="initial:wrap-reverse"] {
+  flex-wrap: wrap-reverse;
+}
+
 [data-slot="section"] {
   display: block;
 }
@@ -4512,7 +4591,7 @@
   --ak-state-unchecked: 1;
 }
 
-[data-accordion], [data-accordion-header], [data-active-item], [data-align], [data-askr-visually-hidden], [data-auto-fit], [data-avatar], [data-avatar-fallback], [data-avatar-image], [data-axis], [data-badge], [data-basis], [data-breadcrumb], [data-breadcrumb-current], [data-breadcrumb-item], [data-breadcrumb-link], [data-breadcrumb-list], [data-breadcrumb-separator], [data-centered], [data-collapse-below], [data-columns], [data-dialog-overlay], [data-dismissable-layer], [data-dropdown-label], [data-fluid], [data-focus-ring], [data-focus-scope], [data-gap], [data-grow], [data-inline], [data-justify], [data-max], [data-max-width], [data-menubar], [data-menubar-label], [data-min-height], [data-min-item-width], [data-padding], [data-percentage], [data-progress], [data-progress-circle], [data-progress-circle-indicator], [data-progress-indicator], [data-required], [data-select-item-text], [data-select-label], [data-shrink], [data-side], [data-side-offset], [data-size], [data-skeleton], [data-slider], [data-slider-range], [data-slider-thumb], [data-slider-track], [data-toast], [data-toast-action], [data-toast-close], [data-toast-description], [data-toast-provider], [data-toast-title], [data-toast-viewport], [data-toggle-group], [data-value], [data-wrap] {
+[data-accordion], [data-accordion-header], [data-active-item], [data-align], [data-askr-visually-hidden], [data-auto-fit], [data-avatar], [data-avatar-fallback], [data-avatar-image], [data-axis], [data-badge], [data-basis], [data-breadcrumb], [data-breadcrumb-current], [data-breadcrumb-item], [data-breadcrumb-link], [data-breadcrumb-list], [data-breadcrumb-separator], [data-centered], [data-collapse-below], [data-columns], [data-dialog-overlay], [data-dismissable-layer], [data-dropdown-label], [data-focus-ring], [data-focus-scope], [data-gap], [data-grow], [data-inline], [data-justify], [data-max], [data-max-width], [data-menubar], [data-menubar-label], [data-min-height], [data-min-item-width], [data-padding], [data-percentage], [data-progress], [data-progress-circle], [data-progress-circle-indicator], [data-progress-indicator], [data-required], [data-select-item-text], [data-select-label], [data-shrink], [data-side], [data-side-offset], [data-size], [data-skeleton], [data-slider], [data-slider-range], [data-slider-thumb], [data-slider-track], [data-toast], [data-toast-action], [data-toast-close], [data-toast-description], [data-toast-provider], [data-toast-title], [data-toast-viewport], [data-toggle-group], [data-value], [data-wrap] {
   --ak-contract-covered: 1;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@askrjs/themes",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Default theme tokens, styles, and themed layout wrappers for Askr apps.",
   "keywords": [
     "askr",
@@ -139,7 +139,7 @@
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {
-    "@askrjs/askr": "^0.0.37",
+    "@askrjs/askr": "^0.0.39",
     "@askrjs/ui": "^0.0.7",
     "@askrjs/vite": "^0.0.2",
     "@tsdown/css": "0.22.0",

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> = {

package/src/components/container/container.a11y.ts

@@ -3,7 +3,6 @@ export const CONTAINER_A11Y_CONTRACT = {
     slot: "data-slot" as const,
     layout: "data-ak-layout" as const,
     variant: "data-variant" as const,
-    fluid: "data-fluid" as const,
     maxWidth: "data-max-width" as const,
     padding: "data-padding" as const,
     size: "data-size" as const,

package/src/components/container/container.tsx

@@ -15,7 +15,7 @@ import {
 } from "../_internal/layout";
 import type { ContainerAsChildProps, ContainerNativeProps } from "./container.types";
 
-const CONTAINER_WIDTH_TOKENS = new Set(["1", "2", "3", "4", "sm", "md", "lg", "xl"]);
+const CONTAINER_WIDTH_TOKENS = new Set(["1", "2", "3", "4", "sm", "md", "lg", "xl", "fluid"]);
 
 function isContainerWidthToken(value: unknown): value is string {
   return typeof value === "string" && CONTAINER_WIDTH_TOKENS.has(value.trim());
@@ -45,7 +45,6 @@ export function Container(props: ContainerNativeProps | ContainerAsChildProps) {
     asChild,
     children,
     variant,
-    fluid = false,
     maxWidth,
     padding,
     size,
@@ -56,11 +55,7 @@ export function Container(props: ContainerNativeProps | ContainerAsChildProps) {
   } = props;
 
   const responsiveVariant =
-    fluid || (size === undefined && maxWidth === undefined)
-      ? fluid
-        ? "fluid"
-        : (variant ?? "default")
-      : undefined;
+    size === undefined && maxWidth === undefined ? (variant ?? "default") : undefined;
 
   const { boxProps, rest: passthroughProps } = splitBoxLayoutProps(rest);
   const layoutStyle: Record<string, string | number> = {
@@ -69,7 +64,7 @@ export function Container(props: ContainerNativeProps | ContainerAsChildProps) {
   };
   applyBoxLayoutStyles(layoutStyle, boxProps);
 
-  const widthValue = fluid ? undefined : (maxWidth ?? size);
+  const widthValue = maxWidth ?? size;
   const usesInlineMaxWidth =
     boxProps.maxWidth === undefined &&
     widthValue !== undefined &&
@@ -114,20 +109,15 @@ export function Container(props: ContainerNativeProps | ContainerAsChildProps) {
     "data-slot": "container",
     "data-ak-layout": "true",
     "data-variant": responsiveVariant,
-    "data-fluid": fluid ? "true" : undefined,
-    "data-size": fluid
-      ? undefined
-      : isStaticValue(size)
-        ? serializeResponsiveValueIf(size, isContainerWidthToken)
-        : undefined,
+    "data-size": isStaticValue(size)
+      ? serializeResponsiveValueIf(size, isContainerWidthToken)
+      : undefined,
     "data-align": isStaticValue(align)
       ? serializeResponsiveValueIf(align, isContainerAlignToken)
       : undefined,
-    "data-max-width": fluid
-      ? undefined
-      : isStaticValue(maxWidth)
-        ? serializeResponsiveValueIf(maxWidth, isContainerWidthToken)
-        : undefined,
+    "data-max-width": isStaticValue(maxWidth)
+      ? serializeResponsiveValueIf(maxWidth, isContainerWidthToken)
+      : undefined,
     ...(layoutClass ? { class: layoutClass } : {}),
   });
 

package/src/components/container/container.types.ts

@@ -7,10 +7,8 @@ export type ContainerVariant = "default" | "sm" | "md" | "lg" | "xl" | "xxl" | "
 export type ContainerOwnProps = BoxLayoutOwnProps & {
   /** Bootstrap-like responsive container variant. */
   variant?: ContainerVariant;
-  /** Makes the container span the full available width while preserving gutters. */
-  fluid?: boolean;
   /** Radix-style container size token. */
-  size?: LayoutResponsive<"1" | "2" | "3" | "4" | "sm" | "md" | "lg" | "xl">;
+  size?: LayoutResponsive<"1" | "2" | "3" | "4" | "sm" | "md" | "lg" | "xl" | "fluid">;
   /** Horizontal alignment of the constrained container. */
   align?: LayoutResponsive<"left" | "center" | "right">;
   /** Compatibility max-width override. */

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

@@ -19,6 +19,97 @@
   gap: var(--ak-space-md);
 }
 
+[data-slot="inline"] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ak-space-md);
+}
+
+[data-slot="flex"][data-gap="initial:1"],
+[data-slot="inline"][data-gap="initial:1"] {
+  gap: var(--ak-space-1);
+}
+
+[data-slot="flex"][data-gap="initial:2"],
+[data-slot="inline"][data-gap="initial:2"] {
+  gap: var(--ak-space-2);
+}
+
+[data-slot="flex"][data-gap="initial:3"],
+[data-slot="inline"][data-gap="initial:3"] {
+  gap: var(--ak-space-3);
+}
+
+[data-slot="flex"][data-gap="initial:4"],
+[data-slot="inline"][data-gap="initial:4"] {
+  gap: var(--ak-space-4);
+}
+
+[data-slot="flex"][data-gap="initial:xs"],
+[data-slot="inline"][data-gap="initial:xs"] {
+  gap: var(--ak-space-xs);
+}
+
+[data-slot="flex"][data-gap="initial:sm"],
+[data-slot="inline"][data-gap="initial:sm"] {
+  gap: var(--ak-space-sm);
+}
+
+[data-slot="flex"][data-gap="initial:md"],
+[data-slot="inline"][data-gap="initial:md"] {
+  gap: var(--ak-space-md);
+}
+
+[data-slot="flex"][data-gap="initial:lg"],
+[data-slot="inline"][data-gap="initial:lg"] {
+  gap: var(--ak-space-lg);
+}
+
+[data-slot="flex"][data-gap="initial:xl"],
+[data-slot="inline"][data-gap="initial:xl"] {
+  gap: var(--ak-space-xl);
+}
+
+[data-slot="flex"][data-gap-x="initial:sm"],
+[data-slot="inline"][data-gap-x="initial:sm"] {
+  column-gap: var(--ak-space-sm);
+}
+
+[data-slot="flex"][data-gap-x="initial:md"],
+[data-slot="inline"][data-gap-x="initial:md"] {
+  column-gap: var(--ak-space-md);
+}
+
+[data-slot="flex"][data-gap-x="initial:lg"],
+[data-slot="inline"][data-gap-x="initial:lg"] {
+  column-gap: var(--ak-space-lg);
+}
+
+[data-slot="flex"][data-gap-y="initial:sm"],
+[data-slot="inline"][data-gap-y="initial:sm"] {
+  row-gap: var(--ak-space-sm);
+}
+
+[data-slot="flex"][data-gap-y="initial:md"],
+[data-slot="inline"][data-gap-y="initial:md"] {
+  row-gap: var(--ak-space-md);
+}
+
+[data-slot="flex"][data-gap-y="initial:lg"],
+[data-slot="inline"][data-gap-y="initial:lg"] {
+  row-gap: var(--ak-space-lg);
+}
+
+[data-slot="flex"][data-wrap="initial:nowrap"],
+[data-slot="inline"][data-wrap="initial:nowrap"] {
+  flex-wrap: nowrap;
+}
+
+[data-slot="flex"][data-wrap="initial:wrap-reverse"],
+[data-slot="inline"][data-wrap="initial:wrap-reverse"] {
+  flex-wrap: wrap-reverse;
+}
+
 [data-slot="section"] {
   display: block;
 }
@@ -191,7 +282,6 @@
 [data-dialog-overlay],
 [data-dismissable-layer],
 [data-dropdown-label],
-[data-fluid],
 [data-focus-ring],
 [data-focus-scope],
 [data-gap],

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

@@ -64,7 +64,7 @@
   padding-right: var(--ak-pr-initial, var(--ak-px-initial, var(--ak-layout-page-gutter)));
 }
 
-:where([data-slot="container"][data-fluid="true"]) {
+:where([data-slot="container"][data-size="initial:fluid"]) {
   --ak-container-inline-size: 100%;
 }
 

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

@@ -36,7 +36,9 @@
 :where([data-slot="shell"][data-variant="sidebar"], [data-slot="shell"][data-variant="rail"])
   > :where([data-slot="shell-nav"]) {
   display: grid;
-  align-content: start;
+  align-content: stretch;
+  flex: 0 0 100vh;
+  min-block-size: 100vh;
   padding: var(--ak-layout-page-gutter);
   inline-size: 100%;
   max-inline-size: 100%;

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

@@ -125,7 +125,7 @@
       .sidebar-group[data-align="center"],
       [data-slot="sidebar-group"][data-align="center"]
     ) {
-    justify-items: stretch;
+    justify-items: center;
   }
 
   :where(.sidebar-shell, [data-slot="sidebar-shell"], .sidebar-panel, [data-slot="sidebar-panel"])
@@ -141,9 +141,27 @@
       .sidebar-group-label,
       [data-slot="sidebar-group-label"]
     ) {
+    inline-size: 100%;
     text-align: center;
   }
 
+  :where(.sidebar-shell, [data-slot="sidebar-shell"], .sidebar-panel, [data-slot="sidebar-panel"])
+    :where(
+      .navbar-group[data-align="center"],
+      [data-slot="navbar-group"][data-align="center"],
+      .sidebar-group[data-align="center"],
+      [data-slot="sidebar-group"][data-align="center"]
+    )
+    > :where(
+      .navbar-group-body,
+      [data-slot="navbar-group-body"],
+      .sidebar-group-body,
+      [data-slot="sidebar-group-body"]
+    ) {
+    inline-size: 100%;
+    justify-items: center;
+  }
+
   :where(.sidebar-shell, [data-slot="sidebar-shell"], .sidebar-panel, [data-slot="sidebar-panel"])
     :where(
       .navbar-group[data-align="end"],
@@ -207,7 +225,10 @@
       [data-slot="sidebar-group"][data-align="center"]
     )
     :where(.nav-item, .navbar-item, [data-slot="nav-item"], [data-slot="nav-link"], .sidebar-item) {
+    inline-size: auto;
+    max-inline-size: 100%;
     justify-content: center;
+    justify-self: center;
   }
 
   :where(.sidebar-shell, [data-slot="sidebar-shell"], .sidebar-panel, [data-slot="sidebar-panel"])

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

@@ -19,6 +19,97 @@
   gap: var(--ak-space-md);
 }
 
+[data-slot="inline"] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ak-space-md);
+}
+
+[data-slot="flex"][data-gap="initial:1"],
+[data-slot="inline"][data-gap="initial:1"] {
+  gap: var(--ak-space-1);
+}
+
+[data-slot="flex"][data-gap="initial:2"],
+[data-slot="inline"][data-gap="initial:2"] {
+  gap: var(--ak-space-2);
+}
+
+[data-slot="flex"][data-gap="initial:3"],
+[data-slot="inline"][data-gap="initial:3"] {
+  gap: var(--ak-space-3);
+}
+
+[data-slot="flex"][data-gap="initial:4"],
+[data-slot="inline"][data-gap="initial:4"] {
+  gap: var(--ak-space-4);
+}
+
+[data-slot="flex"][data-gap="initial:xs"],
+[data-slot="inline"][data-gap="initial:xs"] {
+  gap: var(--ak-space-xs);
+}
+
+[data-slot="flex"][data-gap="initial:sm"],
+[data-slot="inline"][data-gap="initial:sm"] {
+  gap: var(--ak-space-sm);
+}
+
+[data-slot="flex"][data-gap="initial:md"],
+[data-slot="inline"][data-gap="initial:md"] {
+  gap: var(--ak-space-md);
+}
+
+[data-slot="flex"][data-gap="initial:lg"],
+[data-slot="inline"][data-gap="initial:lg"] {
+  gap: var(--ak-space-lg);
+}
+
+[data-slot="flex"][data-gap="initial:xl"],
+[data-slot="inline"][data-gap="initial:xl"] {
+  gap: var(--ak-space-xl);
+}
+
+[data-slot="flex"][data-gap-x="initial:sm"],
+[data-slot="inline"][data-gap-x="initial:sm"] {
+  column-gap: var(--ak-space-sm);
+}
+
+[data-slot="flex"][data-gap-x="initial:md"],
+[data-slot="inline"][data-gap-x="initial:md"] {
+  column-gap: var(--ak-space-md);
+}
+
+[data-slot="flex"][data-gap-x="initial:lg"],
+[data-slot="inline"][data-gap-x="initial:lg"] {
+  column-gap: var(--ak-space-lg);
+}
+
+[data-slot="flex"][data-gap-y="initial:sm"],
+[data-slot="inline"][data-gap-y="initial:sm"] {
+  row-gap: var(--ak-space-sm);
+}
+
+[data-slot="flex"][data-gap-y="initial:md"],
+[data-slot="inline"][data-gap-y="initial:md"] {
+  row-gap: var(--ak-space-md);
+}
+
+[data-slot="flex"][data-gap-y="initial:lg"],
+[data-slot="inline"][data-gap-y="initial:lg"] {
+  row-gap: var(--ak-space-lg);
+}
+
+[data-slot="flex"][data-wrap="initial:nowrap"],
+[data-slot="inline"][data-wrap="initial:nowrap"] {
+  flex-wrap: nowrap;
+}
+
+[data-slot="flex"][data-wrap="initial:wrap-reverse"],
+[data-slot="inline"][data-wrap="initial:wrap-reverse"] {
+  flex-wrap: wrap-reverse;
+}
+
 [data-slot="section"] {
   display: block;
 }
@@ -191,7 +282,6 @@
 [data-dialog-overlay],
 [data-dismissable-layer],
 [data-dropdown-label],
-[data-fluid],
 [data-focus-ring],
 [data-focus-scope],
 [data-gap],

package/templates/theme/styles/layout/responsive-layout.css

@@ -36,7 +36,9 @@
 :where([data-slot="shell"][data-variant="sidebar"], [data-slot="shell"][data-variant="rail"])
   > :where([data-slot="shell-nav"]) {
   display: grid;
-  align-content: start;
+  align-content: stretch;
+  flex: 0 0 100vh;
+  min-block-size: 100vh;
   padding: var(--ak-layout-page-gutter);
   inline-size: 100%;
   max-inline-size: 100%;