@askrjs/themes 0.2.0 → 0.2.2

package/THEMING.md

@@ -147,7 +147,7 @@ giving up the canonical `data-slot` contract.
 Responsive rules:
 
 - Build mobile first. Base selectors must work on narrow screens; larger layouts are additive via `min-width` media queries.
-- `Block` is the only layout engine. Responsive layout props use `base`, `sm`, `md`, `lg`, and `xl`.
+- `Block` is the only layout engine. Responsive layout props, including boolean `wrap`, use `base`, `sm`, `md`, `lg`, and `xl`; omitted `wrap` retains `nowrap`.
 - The default theme uses semantic breakpoints `sm`, `md`, `lg`, and `xl` for layout variables.
 - Keep breakpoint values centralized in theme tokens so the default theme and generated themes stay aligned.
 - Responsive behavior must target only public hooks and Block-owned CSS variables.

package/dist/components/_internal/block-layout.d.ts

@@ -30,6 +30,7 @@ type BlockLayoutProps = {
   align?: ResponsiveValue<BlockAlign>;
   justify?: ResponsiveValue<BlockJustify>;
   gap?: ResponsiveValue<BlockSpace>;
+  wrap?: ResponsiveValue<boolean>;
   grow?: ResponsiveValue<boolean | number>;
   shrink?: ResponsiveValue<boolean | number>;
   center?: ResponsiveValue<boolean>;

package/dist/components/_internal/block-layout.js

@@ -80,6 +80,7 @@ const BLOCK_LAYOUT_KEYS = /* @__PURE__ */ new Set([
 	"align",
 	"justify",
 	"gap",
+	"wrap",
 	"grow",
 	"shrink",
 	"center",
@@ -186,6 +187,7 @@ function applyBlockLayoutStyles(styles, props) {
 	setResponsiveVar(styles, "align-items", props.align, resolveAlignValue);
 	setResponsiveVar(styles, "justify-content", props.justify, resolveJustifyValue);
 	setResponsiveVar(styles, "gap", props.gap, resolveSpaceValue);
+	setResponsiveVar(styles, "flex-wrap", props.wrap, (value) => value ? "wrap" : "nowrap");
 	setResponsiveVar(styles, "flex-grow", props.grow, resolveFlexFlag);
 	setResponsiveVar(styles, "flex-shrink", props.shrink, resolveFlexFlag);
 	if (props.sticky) styles["--ak-position-base"] = "sticky";

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

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

package/dist/components/catalog.d.ts

@@ -1,3 +1,6 @@
+import { BlockLayoutProps, BlockSpace, ResponsiveValue } from "./_internal/block-layout.js";
+import { BlockDivProps, BlockElement } from "./block/block.types.js";
+import "./block/index.js";
 import { JSX } from "@askrjs/askr/jsx-runtime";
 import { Ref } from "@askrjs/askr/foundations/utilities";
 //#region src/components/catalog.d.ts
@@ -13,20 +16,35 @@ type CatalogComponentProps = Record<string, unknown> & {
   class?: string;
   ref?: Ref<HTMLElement>;
 };
-/** Legacy `Box` layout alias for {@link Block} with no default direction. */
-declare function Box(props: CatalogComponentProps): JSX.Element;
-/** Legacy `Stack` layout alias for {@link Block} that defaults to a column direction. */
-declare function Stack(props: CatalogComponentProps): JSX.Element;
-/** Legacy `Inline` layout alias for {@link Block} that defaults to a row direction. */
-declare function Inline(props: CatalogComponentProps): JSX.Element;
-/** Legacy `Shell` layout alias for {@link Block}; the `variant` prop is accepted but ignored. */
-declare function Shell(props: CatalogComponentProps & {
-  variant?: unknown;
+type LegacySpace = BlockSpace | "none" | "1" | "2" | "3" | "4" | "5" | "6" | "8";
+type LegacyWrap = boolean | "wrap" | "nowrap";
+type LegacyLayoutConveniences = {
+  gap?: ResponsiveValue<LegacySpace>;
+  p?: ResponsiveValue<LegacySpace>;
+  padding?: ResponsiveValue<LegacySpace>;
+  wrap?: ResponsiveValue<LegacyWrap>;
+};
+type LegacyStructuralProps = Partial<Pick<BlockDivProps, "children" | "class" | "className" | "style" | "ref" | "id" | "title" | "role" | "tabIndex" | "hidden" | "dir" | "lang" | "onAbort" | "onBlur" | "onChange" | "onClick" | "onDblClick" | "onFocus" | "onInput" | "onKeyDown" | "onKeyUp" | "onMouseDown" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onMouseUp" | "onPointerDown" | "onPointerDownCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerMove" | "onPointerUp" | "onScroll" | "onSubmit" | "onTouchEnd" | "onTouchStart" | "onWheel">> & {
+  as?: BlockElement;
+  asChild?: boolean;
+  [attribute: `aria-${string}`]: BlockDivProps[`aria-${string}`];
+  [attribute: `data-${string}`]: BlockDivProps[`data-${string}`];
+};
+type LegacyLayoutProps = Omit<BlockLayoutProps, "gap" | "padding" | "wrap"> & LegacyStructuralProps & LegacyLayoutConveniences;
+/** @deprecated Use {@link Block} directly. */
+declare function Box(props: LegacyLayoutProps): JSX.Element;
+/** @deprecated Use `<Block direction="column">`. */
+declare function Stack(props: LegacyLayoutProps): JSX.Element;
+/** @deprecated Use `<Block direction="row">`. */
+declare function Inline(props: LegacyLayoutProps): JSX.Element;
+/** @deprecated Compose semantic {@link Block} primitives instead. */
+declare function Shell(props: LegacyLayoutProps & {
+  variant?: string;
 }): JSX.Element;
-/** Legacy `ShellNav` layout alias for {@link Block}. */
-declare function ShellNav(props: CatalogComponentProps): JSX.Element;
-/** Legacy `ShellMain` layout alias for {@link Block} that renders a growing `<main>` element. */
-declare function ShellMain(props: CatalogComponentProps): JSX.Element;
+/** @deprecated Use `<Block as="nav">`. */
+declare function ShellNav(props: LegacyLayoutProps): JSX.Element;
+/** @deprecated Use `<Block as="main" grow>`. */
+declare function ShellMain(props: LegacyLayoutProps): JSX.Element;
 /** Renders the `alert-title` part of the shadcn-compatible catalog primitives. */
 declare function AlertTitle(props: CatalogComponentProps): JSX.Element;
 /** Renders the `alert-description` part of the shadcn-compatible catalog primitives. */
@@ -89,7 +107,7 @@ declare function CarouselPrevious(props: CatalogComponentProps): JSX.Element;
 declare function CarouselNext(props: CatalogComponentProps): JSX.Element;
 /** Renders the `combobox` part of the shadcn-compatible catalog primitives. */
 declare function Combobox(props: CatalogComponentProps): JSX.Element;
-/** Renders the combobox's text input, wired up with `role="combobox"`. */
+/** Styling-only combobox input; consumers supplying behavior also own its complete ARIA contract. */
 declare function ComboboxInput(props: CatalogComponentProps): JSX.Element;
 /** Renders the `combobox-list` part of the shadcn-compatible catalog primitives. */
 declare function ComboboxList(props: CatalogComponentProps): JSX.Element;
@@ -280,4 +298,4 @@ declare function TypographyLead(props: CatalogComponentProps): JSX.Element;
 /** Renders the `typography-muted` part of the shadcn-compatible catalog primitives. */
 declare function TypographyMuted(props: CatalogComponentProps): JSX.Element;
 //#endregion
-export { AlertDescription, AlertTitle, Box, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Calendar, CalendarBody, CalendarCaption, CalendarCell, CalendarDay, CalendarGrid, CalendarHead, CalendarHeader, CalendarNav, CalendarNextButton, CalendarPreviousButton, CalendarRow, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CatalogComponentProps, Combobox, ComboboxInput, ComboboxList, ComboboxOption, Command, CommandDialog, CommandEmpty, CommandGroup, CommandGroupHeading, CommandHeader, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DataTable, DatePicker, DatePickerInput, Direction, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FieldContent, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Inline, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemTitle, Kbd, NativeSelect, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, ResizableHandle, ResizablePanel, ResizablePanelGroup, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, Shell, ShellMain, ShellNav, Sonner, Stack, TabsContent, TabsList, TabsTrigger, Toaster, Typography, TypographyBlockquote, TypographyH1, TypographyH2, TypographyH3, TypographyH4, TypographyLead, TypographyList, TypographyMuted, TypographyP };
+export { AlertDescription, AlertTitle, Box, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Calendar, CalendarBody, CalendarCaption, CalendarCell, CalendarDay, CalendarGrid, CalendarHead, CalendarHeader, CalendarNav, CalendarNextButton, CalendarPreviousButton, CalendarRow, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CatalogComponentProps, Combobox, ComboboxInput, ComboboxList, ComboboxOption, Command, CommandDialog, CommandEmpty, CommandGroup, CommandGroupHeading, CommandHeader, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DataTable, DatePicker, DatePickerInput, Direction, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FieldContent, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Inline, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemTitle, Kbd, LegacyLayoutProps, NativeSelect, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, ResizableHandle, ResizablePanel, ResizablePanelGroup, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, Shell, ShellMain, ShellNav, Sonner, Stack, TabsContent, TabsList, TabsTrigger, Toaster, Typography, TypographyBlockquote, TypographyH1, TypographyH2, TypographyH3, TypographyH4, TypographyLead, TypographyList, TypographyMuted, TypographyP };

package/dist/components/catalog.js

@@ -56,45 +56,59 @@ function normalizeLegacySpace(value) {
 	if (value === "8") return "2xl";
 	return value;
 }
-function layoutAlias(props, defaults) {
-	const { gap, p, padding, style, wrap, ...rest } = props;
-	const BlockComponent = Block;
-	const wrapStyle = wrap ? {
-		...style,
-		flexWrap: "wrap"
-	} : style;
-	return /* @__PURE__ */ jsx(BlockComponent, {
+function normalizeLegacyResponsiveSpace(value) {
+	if (value === void 0) return void 0;
+	if (typeof value === "object") return Object.fromEntries(Object.entries(value).map(([breakpoint, space]) => [breakpoint, normalizeLegacySpace(space)]));
+	return normalizeLegacySpace(value);
+}
+function normalizeLegacyWrap(value) {
+	if (value === "wrap") return true;
+	if (value === "nowrap") return false;
+	return value;
+}
+function normalizeLegacyResponsiveWrap(value) {
+	if (value === void 0) return void 0;
+	if (typeof value === "object") return Object.fromEntries(Object.entries(value).map(([breakpoint, wrap]) => [breakpoint, normalizeLegacyWrap(wrap)]));
+	return normalizeLegacyWrap(value);
+}
+const warnedLegacyLayouts = /* @__PURE__ */ new Set();
+function warnDeprecatedLayout(component, replacement) {
+	const metaEnvironment = import.meta.env;
+	const nodeEnvironment = globalThis.process?.env?.NODE_ENV;
+	if (metaEnvironment?.DEV !== true && nodeEnvironment !== "development") return;
+	if (warnedLegacyLayouts.has(component)) return;
+	warnedLegacyLayouts.add(component);
+	console.warn(`[askr-themes] ${component} is deprecated. ${replacement}`);
+}
+function layoutAlias(component, replacement, props, defaults) {
+	warnDeprecatedLayout(component, replacement);
+	const { gap, p, padding, wrap, ...rest } = props;
+	return /* @__PURE__ */ jsx(Block, {
 		...defaults,
 		...rest,
-		gap: normalizeLegacySpace(gap),
-		padding: padding ?? normalizeLegacySpace(p),
-		style: wrapStyle
+		gap: normalizeLegacyResponsiveSpace(gap),
+		padding: normalizeLegacyResponsiveSpace(padding ?? p),
+		wrap: normalizeLegacyResponsiveWrap(wrap)
 	});
 }
-/** Legacy `Box` layout alias for {@link Block} with no default direction. */
 function Box(props) {
-	return layoutAlias(props, {});
+	return layoutAlias("Box", "Use Block directly.", props, {});
 }
-/** Legacy `Stack` layout alias for {@link Block} that defaults to a column direction. */
 function Stack(props) {
-	return layoutAlias(props, { direction: "column" });
+	return layoutAlias("Stack", "Use <Block direction=\"column\">.", props, { direction: "column" });
 }
-/** Legacy `Inline` layout alias for {@link Block} that defaults to a row direction. */
 function Inline(props) {
-	return layoutAlias(props, { direction: "row" });
+	return layoutAlias("Inline", "Use <Block direction=\"row\">.", props, { direction: "row" });
 }
-/** Legacy `Shell` layout alias for {@link Block}; the `variant` prop is accepted but ignored. */
 function Shell(props) {
 	const { variant: _variant, ...rest } = props;
-	return layoutAlias(rest, {});
+	return layoutAlias("Shell", "Compose semantic Block primitives instead.", rest, {});
 }
-/** Legacy `ShellNav` layout alias for {@link Block}. */
 function ShellNav(props) {
-	return layoutAlias(props, {});
+	return layoutAlias("ShellNav", "Use <Block as=\"nav\">.", props, {});
 }
-/** Legacy `ShellMain` layout alias for {@link Block} that renders a growing `<main>` element. */
 function ShellMain(props) {
-	return layoutAlias(props, {
+	return layoutAlias("ShellMain", "Use <Block as=\"main\" grow>.", props, {
 		as: "main",
 		grow: true
 	});
@@ -117,7 +131,10 @@ function AlertDescription(props) {
 }
 /** Renders the `breadcrumb` part of the shadcn-compatible catalog primitives. */
 function Breadcrumb(props) {
-	return catalogPart(props, {
+	return catalogPart({
+		"aria-label": "Breadcrumb",
+		...props
+	}, {
 		slot: "breadcrumb",
 		element: "nav",
 		role: "navigation"
@@ -214,17 +231,11 @@ function CalendarNextButton(props) {
 }
 /** Renders the `calendar-grid` part of the shadcn-compatible catalog primitives. */
 function CalendarGrid(props) {
-	return catalogPart(props, {
-		slot: "calendar-grid",
-		role: "grid"
-	});
+	return catalogPart(props, { slot: "calendar-grid" });
 }
 /** Renders the `calendar-head` part of the shadcn-compatible catalog primitives. */
 function CalendarHead(props) {
-	return catalogPart(props, {
-		slot: "calendar-head",
-		role: "row"
-	});
+	return catalogPart(props, { slot: "calendar-head" });
 }
 /** Renders the `calendar-body` part of the shadcn-compatible catalog primitives. */
 function CalendarBody(props) {
@@ -232,17 +243,11 @@ function CalendarBody(props) {
 }
 /** Renders the `calendar-row` part of the shadcn-compatible catalog primitives. */
 function CalendarRow(props) {
-	return catalogPart(props, {
-		slot: "calendar-row",
-		role: "row"
-	});
+	return catalogPart(props, { slot: "calendar-row" });
 }
 /** Renders the `calendar-cell` part of the shadcn-compatible catalog primitives. */
 function CalendarCell(props) {
-	return catalogPart(props, {
-		slot: "calendar-cell",
-		role: "gridcell"
-	});
+	return catalogPart(props, { slot: "calendar-cell" });
 }
 /** Renders a single selectable day cell in the calendar grid, with selection/range/today state exposed as data attributes. */
 function CalendarDay(props) {
@@ -250,7 +255,6 @@ function CalendarDay(props) {
 	return buttonPart({
 		disabled,
 		"aria-disabled": disabled ? "true" : void 0,
-		"aria-selected": selected ? "true" : void 0,
 		"data-disabled": disabled ? "" : void 0,
 		"data-outside": outside ? "true" : void 0,
 		"data-range-end": rangeEnd ? "true" : void 0,
@@ -293,30 +297,23 @@ function CarouselNext(props) {
 function Combobox(props) {
 	return catalogPart(props, { slot: "combobox" });
 }
-/** Renders the combobox's text input, wired up with `role="combobox"`. */
+/** Styling-only combobox input; consumers supplying behavior also own its complete ARIA contract. */
 function ComboboxInput(props) {
 	const { ref, class: className, ...rest } = props;
 	const finalProps = mergeProps(rest, {
 		ref,
 		class: classes("input", className),
-		"data-slot": "combobox-input",
-		role: "combobox"
+		"data-slot": "combobox-input"
 	});
 	return /* @__PURE__ */ jsx("input", { ...finalProps });
 }
 /** Renders the `combobox-list` part of the shadcn-compatible catalog primitives. */
 function ComboboxList(props) {
-	return catalogPart(props, {
-		slot: "combobox-list",
-		role: "listbox"
-	});
+	return catalogPart(props, { slot: "combobox-list" });
 }
 /** Renders the `combobox-option` part of the shadcn-compatible catalog primitives. */
 function ComboboxOption(props) {
-	return catalogPart(props, {
-		slot: "combobox-option",
-		role: "option"
-	});
+	return catalogPart(props, { slot: "combobox-option" });
 }
 /** Renders the `command` part of the shadcn-compatible catalog primitives. */
 function Command(props) {
@@ -342,10 +339,7 @@ function CommandHeader(props) {
 }
 /** Renders the `command-list` part of the shadcn-compatible catalog primitives. */
 function CommandList(props) {
-	return catalogPart(props, {
-		slot: "command-list",
-		role: "listbox"
-	});
+	return catalogPart(props, { slot: "command-list" });
 }
 /** Renders the `command-empty` part of the shadcn-compatible catalog primitives. */
 function CommandEmpty(props) {
@@ -370,14 +364,10 @@ function CommandItem(props) {
 	const { active, disabled, selected, ...rest } = props;
 	return catalogPart({
 		"aria-disabled": disabled ? "true" : void 0,
-		"aria-selected": selected || active ? "true" : void 0,
 		"data-disabled": disabled ? "" : void 0,
 		"data-selected": selected || active ? "true" : void 0,
 		...rest
-	}, {
-		slot: "command-item",
-		role: "option"
-	});
+	}, { slot: "command-item" });
 }
 /** Renders the `command-separator` part of the shadcn-compatible catalog primitives. */
 function CommandSeparator(props) {
@@ -649,7 +639,10 @@ function NavigationMenuIndicator(props) {
 }
 /** Renders the `pagination` part of the shadcn-compatible catalog primitives. */
 function Pagination(props) {
-	return catalogPart(props, {
+	return catalogPart({
+		"aria-label": "Pagination",
+		...props
+	}, {
 		slot: "pagination",
 		element: "nav",
 		role: "navigation"
@@ -728,17 +721,11 @@ function ResizablePanel(props) {
 }
 /** Styling-only separator slot; it does not implement resizing, pointer dragging, or keyboard controls. */
 function ResizableHandle(props) {
-	return catalogPart(props, {
-		slot: "resizable-handle",
-		role: "separator"
-	});
+	return catalogPart(props, { slot: "resizable-handle" });
 }
 /** Renders the `tabs-list` part of the shadcn-compatible catalog primitives. */
 function TabsList(props) {
-	return catalogPart(props, {
-		slot: "tabs-list",
-		role: "tablist"
-	});
+	return catalogPart(props, { slot: "tabs-list" });
 }
 /** Renders the `tabs-content` part of the shadcn-compatible catalog primitives. */
 function TabsTrigger(props) {
@@ -746,10 +733,7 @@ function TabsTrigger(props) {
 }
 /** Renders the `tabs-content` part of the shadcn-compatible catalog primitives. */
 function TabsContent(props) {
-	return catalogPart(props, {
-		slot: "tabs-content",
-		role: "tabpanel"
-	});
+	return catalogPart(props, { slot: "tabs-content" });
 }
 /** Sheet variant of the dialog content part; defaults to sliding in from the right. */
 function SheetContent(props) {