@askrjs/themes 0.0.8 → 0.0.9

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

@@ -1,5 +1,5 @@
-import { mergeLayoutStyles, resolveSpaceValue, setResponsiveStyleVar } from "./layout.js";
 import { styleDeclarationsToClass } from "./style.js";
+import { mergeLayoutStyles, resolveSpaceValue, setResponsiveStyleVar } from "./layout.js";
 //#region src/components/_internal/box-layout.ts
 const SPACE_PROP_KEYS = new Set([
 	"m",

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

@@ -1 +1 @@
-{"version":3,"file":"jsx.js","names":[],"sources":["../../../src/components/_internal/jsx.ts"],"sourcesContent":["import type { JSXElement } from \"@askrjs/askr/foundations\";\n\nexport function isJsxElement(value: unknown): value is JSXElement {\n  return typeof value === \"object\" && value !== null && \"$$typeof\" in value && \"props\" in value;\n}\n\nexport function hasJsxIntrinsicType(value: unknown, expectedType: string): value is JSXElement {\n  return isJsxElement(value) && value.type === expectedType;\n}\n\nexport function toChildArray(children: unknown): unknown[] {\n  if (Array.isArray(children)) {\n    return children;\n  }\n\n  return children === undefined || children === null ? [] : [children];\n}\n\nexport function mapJsxTree(children: unknown, mapper: (element: JSXElement) => unknown): unknown {\n  if (Array.isArray(children)) {\n    return children.map((child) => mapJsxTree(child, mapper));\n  }\n\n  if (!isJsxElement(children)) {\n    return children;\n  }\n\n  const mapped = mapper(children);\n\n  if (!isJsxElement(mapped)) {\n    return mapped;\n  }\n\n  const currentChildren = mapped.props?.children;\n  const nextChildren = mapJsxTree(currentChildren, mapper);\n\n  if (nextChildren === currentChildren) {\n    return mapped;\n  }\n\n  return {\n    ...mapped,\n    props: {\n      ...mapped.props,\n      children: nextChildren,\n    },\n  };\n}\n\nexport function collectJsxElements(\n  children: unknown,\n  predicate?: (element: JSXElement) => boolean,\n): JSXElement[] {\n  const result: JSXElement[] = [];\n\n  const visit = (value: unknown) => {\n    if (Array.isArray(value)) {\n      value.forEach(visit);\n      return;\n    }\n\n    if (!isJsxElement(value)) {\n      return;\n    }\n\n    if (!predicate || predicate(value)) {\n      result.push(value);\n    }\n\n    visit(value.props?.children);\n  };\n\n  visit(children);\n\n  return result;\n}\n\nfunction serializeArray(value: readonly unknown[]): string {\n  if (value.length === 0) {\n    return \"\";\n  }\n\n  if (value.length === 1) {\n    return serializeForId(value[0]);\n  }\n\n  if (value.length === 2) {\n    return `${serializeForId(value[0])}|${serializeForId(value[1])}`;\n  }\n\n  let result = serializeForId(value[0]);\n\n  for (let index = 1; index < value.length; index += 1) {\n    result += `|${serializeForId(value[index])}`;\n  }\n\n  return result;\n}\n\nfunction serializeSerializableProps(props: Record<string, unknown>): string {\n  const keys: string[] = [];\n\n  for (const key of Object.keys(props)) {\n    if (key === \"children\" || key === \"ref\" || key.startsWith(\"on\")) {\n      continue;\n    }\n\n    const entryValue = props[key];\n\n    if (\n      typeof entryValue === \"string\" ||\n      typeof entryValue === \"number\" ||\n      typeof entryValue === \"boolean\"\n    ) {\n      keys.push(key);\n    }\n  }\n\n  if (keys.length === 0) {\n    return \"\";\n  }\n\n  if (keys.length === 1) {\n    const key = keys[0];\n\n    return `${key}:${String(props[key])}`;\n  }\n\n  if (keys.length === 2) {\n    if (keys[1].localeCompare(keys[0]) < 0) {\n      [keys[0], keys[1]] = [keys[1], keys[0]];\n    }\n\n    return `${keys[0]}:${String(props[keys[0]])},${keys[1]}:${String(props[keys[1]])}`;\n  }\n\n  keys.sort((left, right) => left.localeCompare(right));\n\n  let result = `${keys[0]}:${String(props[keys[0]])}`;\n\n  for (let index = 1; index < keys.length; index += 1) {\n    const key = keys[index];\n    result += `,${key}:${String(props[key])}`;\n  }\n\n  return result;\n}\n\nfunction hasEmptyJsxChildren(children: unknown): boolean {\n  return (\n    children === undefined ||\n    children === null ||\n    typeof children === \"boolean\" ||\n    (Array.isArray(children) && children.length === 0)\n  );\n}\n\nexport function extractTextContent(value: unknown): string {\n  if (Array.isArray(value)) {\n    return value.map((entry) => extractTextContent(entry)).join(\"\");\n  }\n\n  if (\n    value === undefined ||\n    value === null ||\n    typeof value === \"boolean\" ||\n    typeof value === \"function\"\n  ) {\n    return \"\";\n  }\n\n  if (typeof value === \"string\" || typeof value === \"number\") {\n    return String(value);\n  }\n\n  if (isJsxElement(value)) {\n    return extractTextContent(value.props?.children);\n  }\n\n  return \"\";\n}\n\nexport function serializeForId(value: unknown): string {\n  if (Array.isArray(value)) {\n    return serializeArray(value);\n  }\n\n  if (value === undefined || value === null || typeof value === \"boolean\") {\n    return \"\";\n  }\n\n  if (typeof value === \"string\" || typeof value === \"number\") {\n    return String(value);\n  }\n\n  if (isJsxElement(value)) {\n    const typeName =\n      typeof value.type === \"string\"\n        ? value.type\n        : typeof value.type === \"function\"\n          ? value.type.name || \"component\"\n          : \"component\";\n    const props = (value.props ?? {}) as Record<string, unknown>;\n    const propEntries = serializeSerializableProps(props);\n    const children = props.children;\n    const propsPrefix = propEntries === \"\" ? `${typeName}[]` : `${typeName}[${propEntries}]`;\n\n    if (hasEmptyJsxChildren(children)) {\n      return `${propsPrefix}()`;\n    }\n\n    return `${propsPrefix}(${serializeForId(children)})`;\n  }\n\n  return typeof value;\n}\n"],"mappings":";AAEA,SAAgB,aAAa,OAAqC;CAChE,OAAO,OAAO,UAAU,YAAY,UAAU,QAAQ,cAAc,SAAS,WAAW;AAC1F;AAMA,SAAgB,aAAa,UAA8B;CACzD,IAAI,MAAM,QAAQ,QAAQ,GACxB,OAAO;CAGT,OAAO,aAAa,KAAA,KAAa,aAAa,OAAO,CAAC,IAAI,CAAC,QAAQ;AACrE"}
+{"version":3,"file":"jsx.js","names":[],"sources":["../../../src/components/_internal/jsx.ts"],"sourcesContent":["import type { JSXElement } from \"@askrjs/askr/foundations\";\n\nexport function isJsxElement(value: unknown): value is JSXElement {\n  return typeof value === \"object\" && value !== null && \"$$typeof\" in value && \"props\" in value;\n}\n\nexport function hasJsxIntrinsicType(value: unknown, expectedType: string): value is JSXElement {\n  return isJsxElement(value) && value.type === expectedType;\n}\n\nexport function toChildArray(children: unknown): unknown[] {\n  if (Array.isArray(children)) {\n    return children;\n  }\n\n  return children === undefined || children === null ? [] : [children];\n}\n\nexport function mapJsxTree(children: unknown, mapper: (element: JSXElement) => unknown): unknown {\n  if (Array.isArray(children)) {\n    return children.map((child) => mapJsxTree(child, mapper));\n  }\n\n  if (!isJsxElement(children)) {\n    return children;\n  }\n\n  const mapped = mapper(children);\n\n  if (!isJsxElement(mapped)) {\n    return mapped;\n  }\n\n  const currentChildren = mapped.props?.children;\n  const nextChildren = mapJsxTree(currentChildren, mapper);\n\n  if (nextChildren === currentChildren) {\n    return mapped;\n  }\n\n  return {\n    ...mapped,\n    props: {\n      ...mapped.props,\n      children: nextChildren,\n    },\n  };\n}\n\nexport function collectJsxElements(\n  children: unknown,\n  predicate?: (element: JSXElement) => boolean,\n): JSXElement[] {\n  const result: JSXElement[] = [];\n\n  function visit(value: unknown): void {\n    if (Array.isArray(value)) {\n      for (let index = 0; index < value.length; index += 1) {\n        visit(value[index]);\n      }\n      return;\n    }\n\n    if (!isJsxElement(value)) {\n      return;\n    }\n\n    if (!predicate || predicate(value)) {\n      result.push(value);\n    }\n\n    visit(value.props?.children);\n  }\n\n  visit(children);\n\n  return result;\n}\n\nfunction isEventHandlerLikeKey(key: string): boolean {\n  return key.length >= 2 && key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110;\n}\n\nfunction compareKeys(left: string, right: string): number {\n  if (left < right) return -1;\n  if (left > right) return 1;\n  return 0;\n}\n\nfunction serializeArray(value: readonly unknown[]): string {\n  if (value.length === 0) {\n    return \"\";\n  }\n\n  if (value.length === 1) {\n    return serializeForId(value[0]);\n  }\n\n  if (value.length === 2) {\n    return `${serializeForId(value[0])}|${serializeForId(value[1])}`;\n  }\n\n  let result = serializeForId(value[0]);\n\n  for (let index = 1; index < value.length; index += 1) {\n    result += `|${serializeForId(value[index])}`;\n  }\n\n  return result;\n}\n\nfunction serializeSerializableProps(props: Record<string, unknown>): string {\n  const keys: string[] = [];\n\n  for (const key of Object.keys(props)) {\n    if (key === \"children\" || key === \"ref\" || isEventHandlerLikeKey(key)) {\n      continue;\n    }\n\n    const entryValue = props[key];\n\n    if (\n      typeof entryValue === \"string\" ||\n      typeof entryValue === \"number\" ||\n      typeof entryValue === \"boolean\"\n    ) {\n      keys.push(key);\n    }\n  }\n\n  if (keys.length === 0) {\n    return \"\";\n  }\n\n  if (keys.length === 1) {\n    const key = keys[0];\n\n    return `${key}:${String(props[key])}`;\n  }\n\n  if (keys.length === 2) {\n    if (keys[1] < keys[0]) {\n      [keys[0], keys[1]] = [keys[1], keys[0]];\n    }\n\n    return `${keys[0]}:${String(props[keys[0]])},${keys[1]}:${String(props[keys[1]])}`;\n  }\n\n  keys.sort(compareKeys);\n\n  let result = `${keys[0]}:${String(props[keys[0]])}`;\n\n  for (let index = 1; index < keys.length; index += 1) {\n    const key = keys[index];\n    result += `,${key}:${String(props[key])}`;\n  }\n\n  return result;\n}\n\nfunction hasEmptyJsxChildren(children: unknown): boolean {\n  return (\n    children === undefined ||\n    children === null ||\n    typeof children === \"boolean\" ||\n    (Array.isArray(children) && children.length === 0)\n  );\n}\n\nexport function extractTextContent(value: unknown): string {\n  if (Array.isArray(value)) {\n    return value.map((entry) => extractTextContent(entry)).join(\"\");\n  }\n\n  if (\n    value === undefined ||\n    value === null ||\n    typeof value === \"boolean\" ||\n    typeof value === \"function\"\n  ) {\n    return \"\";\n  }\n\n  if (typeof value === \"string\" || typeof value === \"number\") {\n    return String(value);\n  }\n\n  if (isJsxElement(value)) {\n    return extractTextContent(value.props?.children);\n  }\n\n  return \"\";\n}\n\nexport function serializeForId(value: unknown): string {\n  if (Array.isArray(value)) {\n    return serializeArray(value);\n  }\n\n  if (value === undefined || value === null || typeof value === \"boolean\") {\n    return \"\";\n  }\n\n  if (typeof value === \"string\" || typeof value === \"number\") {\n    return String(value);\n  }\n\n  if (isJsxElement(value)) {\n    const typeName =\n      typeof value.type === \"string\"\n        ? value.type\n        : typeof value.type === \"function\"\n          ? value.type.name || \"component\"\n          : \"component\";\n    const props = (value.props ?? {}) as Record<string, unknown>;\n    const propEntries = serializeSerializableProps(props);\n    const children = props.children;\n    const propsPrefix = propEntries === \"\" ? `${typeName}[]` : `${typeName}[${propEntries}]`;\n\n    if (hasEmptyJsxChildren(children)) {\n      return `${propsPrefix}()`;\n    }\n\n    return `${propsPrefix}(${serializeForId(children)})`;\n  }\n\n  return typeof value;\n}\n"],"mappings":";AAEA,SAAgB,aAAa,OAAqC;CAChE,OAAO,OAAO,UAAU,YAAY,UAAU,QAAQ,cAAc,SAAS,WAAW;AAC1F;AAMA,SAAgB,aAAa,UAA8B;CACzD,IAAI,MAAM,QAAQ,QAAQ,GACxB,OAAO;CAGT,OAAO,aAAa,KAAA,KAAa,aAAa,OAAO,CAAC,IAAI,CAAC,QAAQ;AACrE"}

package/dist/components/_internal/layout.js

@@ -1,3 +1,4 @@
+import { serializeCssDeclarations } from "./style.js";
 //#region src/components/_internal/layout.ts
 const BREAKPOINTS = [
 	"initial",
@@ -131,16 +132,10 @@ function resolveInlineAlignValue(value) {
 function mergeLayoutStyles(layout, user) {
 	const merged = { ...layout };
 	if (user !== null && user !== void 0 && typeof user === "object") Object.assign(merged, user);
-	const mergedString = objectToCssString(merged);
+	const mergedString = serializeCssDeclarations(merged);
 	if (typeof user === "string" && user.trim()) return mergedString ? `${mergedString};${user.trim()}` : user.trim();
 	return mergedString || void 0;
 }
-function camelToKebab(s) {
-	return s.replace(/([A-Z])/g, (c) => `-${c.toLowerCase()}`);
-}
-function objectToCssString(styles) {
-	return Object.entries(styles).filter(([, value]) => value !== void 0 && value !== null).map(([key, value]) => `${camelToKebab(key)}:${String(value)}`).join(";");
-}
 //#endregion
 export { isCssLength, isResponsiveValue, mergeLayoutStyles, resolveAlignValue, resolveContainerSizeValue, resolveInlineAlignValue, resolveJustifyValue, resolveSpaceValue, serializeResponsiveValueIf, setResponsiveStyleVar };
 

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  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":";AAOA,MAAM,cAA2C;CAAC;CAAW;CAAM;CAAM;CAAM;AAAI;;AAGnF,MAAM,cACJ;AAEF,MAAM,kBAA0C;CAC9C,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;AACT;AAEA,MAAM,qBAA6C;CACjD,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;AACT;;;;;AAaA,SAAgB,YAAY,OAAiC;CAC3D,IAAI,OAAO,UAAU,UAAU,OAAO;CACtC,MAAM,IAAI,MAAM,KAAK;CACrB,IAAI,MAAM,KAAK,OAAO;CACtB,IAAI,YAAY,KAAK,CAAC,GAAG,OAAO;CAEhC,IAAI,kBAAkB,KAAK,CAAC,GAAG,OAAO;CACtC,OAAO;AACT;AAEA,SAAgB,kBACd,OAC+C;CAC/C,IAAI,CAAC,SAAS,OAAO,UAAU,YAAY,MAAM,QAAQ,KAAK,GAAG,OAAO;CACxE,OAAO,YAAY,MAAM,eAAe,cAAc,KAAK;AAC7D;AAEA,SAAgB,yBACd,OACkD;CAClD,IAAI,UAAU,KAAA,GAAW,OAAO,KAAA;CAChC,IAAI,kBAAkB,KAAK,GAAG,OAAO;CACrC,OAAO,EAAE,SAAS,MAAM;AAC1B;AAEA,SAAgB,yBACd,OACoB;CACpB,MAAM,aAAa,yBAAyB,KAAK;CACjD,IAAI,CAAC,YAAY,OAAO,KAAA;CAExB,OAAO,YAAY,KAAK,eAAe;EACrC,MAAM,kBAAkB,WAAW;EACnC,IAAI,oBAAoB,KAAA,GAAW,OAAO;EAC1C,OAAO,GAAG,WAAW,GAAG,OAAO,eAAe;CAChD,CAAC,CAAC,CACC,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;AACb;AAEA,SAAgB,2BACd,OACA,WACoB;CACpB,MAAM,aAAa,yBAAyB,KAAK;CACjD,IAAI,CAAC,YAAY,OAAO,KAAA;CAExB,KAAK,MAAM,cAAc,aAAa;EACpC,MAAM,kBAAkB,WAAW;EACnC,IAAI,oBAAoB,KAAA,GAAW;EACnC,IAAI,CAAC,UAAU,eAAe,GAAG,OAAO,KAAA;CAC1C;CAEA,OAAO,yBAAyB,KAAK;AACvC;AAUA,SAAgB,sBACd,QACA,UACA,OACA,WAAsD,UACpD,OACF;CACA,MAAM,aAAa,yBAAyB,KAAK;CACjD,IAAI,CAAC,YAAY;CAEjB,KAAK,MAAM,cAAc,aAAa;EACpC,MAAM,kBAAkB,WAAW;EACnC,IAAI,oBAAoB,KAAA,GAAW;EACnC,MAAM,WAAW,QAAQ,eAAe;EACxC,IAAI,aAAa,KAAA,KAAa,aAAa,QAAQ,aAAa,IAAI;EACpE,OAAO,QAAQ,SAAS,GAAG,gBAAgB;CAC7C;AACF;AAEA,SAAgB,kBAAkB,OAAyC;CACzE,IAAI,OAAO,UAAU,UAAU,OAAO,OAAO,KAAK;CAClD,MAAM,UAAU,MAAM,KAAK;CAC3B,OAAO,gBAAgB,YAAY;AACrC;AAEA,SAAgB,0BAA0B,OAAuB;CAC/D,MAAM,UAAU,MAAM,KAAK;CAC3B,OAAO,mBAAmB,YAAY;AACxC;AAOA,SAAgB,oBAAoB,OAAuB;CACzD,MAAM,UAAU,MAAM,KAAK;CAC3B,IAAI,YAAY,WAAW,OAAO;CAClC,IAAI,YAAY,SAAS,OAAO;CAChC,IAAI,YAAY,OAAO,OAAO;CAC9B,OAAO;AACT;AAEA,SAAgB,kBAAkB,OAAuB;CACvD,MAAM,UAAU,MAAM,KAAK;CAC3B,IAAI,YAAY,SAAS,OAAO;CAChC,IAAI,YAAY,OAAO,OAAO;CAC9B,OAAO;AACT;AAEA,SAAgB,wBAAwB,OAGtC;CACA,IAAI,UAAU,QAAQ,OAAO;EAAE,YAAY;EAAK,aAAa;CAAO;CACpE,IAAI,UAAU,SAAS,OAAO;EAAE,YAAY;EAAQ,aAAa;CAAI;CACrE,OAAO;EAAE,YAAY;EAAQ,aAAa;CAAO;AACnD;;;;;AAMA,SAAgB,kBACd,QACA,MACoB;CACpB,MAAM,SAAkC,EAAE,GAAG,OAAO;CAEpD,IAAI,SAAS,QAAQ,SAAS,KAAA,KAAa,OAAO,SAAS,UACzD,OAAO,OAAO,QAAQ,IAA+B;CAGvD,MAAM,eAAe,kBAAkB,MAAM;CAE7C,IAAI,OAAO,SAAS,YAAY,KAAK,KAAK,GACxC,OAAO,eAAe,GAAG,aAAa,GAAG,KAAK,KAAK,MAAM,KAAK,KAAK;CAGrE,OAAO,gBAAgB,KAAA;AACzB;AAEA,SAAS,aAAa,GAAmB;CACvC,OAAO,EAAE,QAAQ,aAAa,MAAM,IAAI,EAAE,YAAY,GAAG;AAC3D;AAEA,SAAS,kBAAkB,QAAyC;CAClE,OAAO,OAAO,QAAQ,MAAM,CAAC,CAC1B,QAAQ,GAAG,WAAW,UAAU,KAAA,KAAa,UAAU,IAAI,CAAC,CAC5D,KAAK,CAAC,KAAK,WAAW,GAAG,aAAa,GAAG,EAAE,GAAG,OAAO,KAAK,GAAG,CAAC,CAC9D,KAAK,GAAG;AACb"}
+{"version":3,"file":"layout.js","names":[],"sources":["../../../src/components/_internal/layout.ts"],"sourcesContent":["import { serializeCssDeclarations } from \"./style\";\n\n/**\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 = 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/_internal/style.js

@@ -1,4 +1,28 @@
 //#region src/components/_internal/style.ts
+const cssPropertyNameCache = /* @__PURE__ */ new Map();
+function cssPropertyName(name) {
+	let cached = cssPropertyNameCache.get(name);
+	if (cached !== void 0) return cached;
+	let result = "";
+	for (let index = 0; index < name.length; index += 1) {
+		const code = name.charCodeAt(index);
+		if (code >= 65 && code <= 90) result += `-${String.fromCharCode(code + 32)}`;
+		else result += name[index];
+	}
+	cssPropertyNameCache.set(name, result);
+	return result;
+}
+function serializeCssDeclarations(styles) {
+	const keys = Object.keys(styles);
+	let result = "";
+	for (const key of keys) {
+		const value = styles[key];
+		if (value === void 0 || value === null) continue;
+		const declaration = `${cssPropertyName(key)}:${String(value)}`;
+		result = result ? `${result};${declaration}` : declaration;
+	}
+	return result;
+}
 const STYLE_REGISTRY_ATTR = "data-askr-style-registry";
 const STYLE_CLASS_PREFIX = "ak-style-";
 const styleClassCache = /* @__PURE__ */ new Map();
@@ -36,6 +60,6 @@ function styleDeclarationsToClass(declarations) {
 	return className;
 }
 //#endregion
-export { styleDeclarationsToClass };
+export { serializeCssDeclarations, styleDeclarationsToClass };
 
 //# sourceMappingURL=style.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/_internal/style.ts"],"sourcesContent":["export function mergeCssVar(style: unknown, name: string, value: string): string {\n  const decl = `${name}:${value}`;\n\n  if (typeof style === \"string\") {\n    const trimmed = style.trim();\n    return trimmed ? `${trimmed};${decl}` : decl;\n  }\n\n  if (style && typeof style === \"object\") {\n    const entries = Object.entries(style as Record<string, unknown>)\n      .filter(([, v]) => v !== undefined && v !== null)\n      .map(([k, v]) => `${k.replace(/([A-Z])/g, (c) => `-${c.toLowerCase()}`)}:${String(v)}`)\n      .join(\";\");\n    return entries ? `${entries};${decl}` : decl;\n  }\n\n  return decl;\n}\n\nconst STYLE_REGISTRY_ATTR = \"data-askr-style-registry\";\nconst STYLE_CLASS_PREFIX = \"ak-style-\";\n\nconst styleClassCache = new Map<string, string>();\nconst registeredDeclarations = new Set<string>();\n\nlet nextStyleClassId = 0;\n\nfunction ensureStyleElement(): HTMLStyleElement | null {\n  if (typeof document === \"undefined\") return null;\n\n  const existing = document.querySelector(`style[${STYLE_REGISTRY_ATTR}]`);\n  if (existing instanceof HTMLStyleElement) {\n    return existing;\n  }\n\n  const styleElement = document.createElement(\"style\");\n  styleElement.setAttribute(STYLE_REGISTRY_ATTR, \"true\");\n  (document.head ?? document.documentElement).append(styleElement);\n\n  return styleElement;\n}\n\nfunction normalizeDeclarations(declarations: string): string {\n  return declarations.trim().replace(/;+\\s*$/, \"\");\n}\n\nexport function styleDeclarationsToClass(declarations: string | undefined): string | undefined {\n  if (typeof declarations !== \"string\") return undefined;\n\n  const normalized = normalizeDeclarations(declarations);\n  if (!normalized) return undefined;\n\n  let className = styleClassCache.get(normalized);\n  if (className === undefined) {\n    className = `${STYLE_CLASS_PREFIX}${++nextStyleClassId}`;\n    styleClassCache.set(normalized, className);\n  }\n\n  if (!registeredDeclarations.has(normalized)) {\n    const styleElement = ensureStyleElement();\n    if (styleElement) {\n      const rule = `.${className}{${normalized}}`;\n      styleElement.textContent = `${styleElement.textContent ?? \"\"}\\n${rule}`;\n      registeredDeclarations.add(normalized);\n    }\n  }\n\n  return className;\n}\n"],"mappings":";AAmBA,MAAM,sBAAsB;AAC5B,MAAM,qBAAqB;AAE3B,MAAM,kCAAkB,IAAI,IAAoB;AAChD,MAAM,yCAAyB,IAAI,IAAY;AAE/C,IAAI,mBAAmB;AAEvB,SAAS,qBAA8C;CACrD,IAAI,OAAO,aAAa,aAAa,OAAO;CAE5C,MAAM,WAAW,SAAS,cAAc,SAAS,oBAAoB,EAAE;CACvE,IAAI,oBAAoB,kBACtB,OAAO;CAGT,MAAM,eAAe,SAAS,cAAc,OAAO;CACnD,aAAa,aAAa,qBAAqB,MAAM;CACrD,CAAC,SAAS,QAAQ,SAAS,gBAAA,CAAiB,OAAO,YAAY;CAE/D,OAAO;AACT;AAEA,SAAS,sBAAsB,cAA8B;CAC3D,OAAO,aAAa,KAAK,CAAC,CAAC,QAAQ,UAAU,EAAE;AACjD;AAEA,SAAgB,yBAAyB,cAAsD;CAC7F,IAAI,OAAO,iBAAiB,UAAU,OAAO,KAAA;CAE7C,MAAM,aAAa,sBAAsB,YAAY;CACrD,IAAI,CAAC,YAAY,OAAO,KAAA;CAExB,IAAI,YAAY,gBAAgB,IAAI,UAAU;CAC9C,IAAI,cAAc,KAAA,GAAW;EAC3B,YAAY,GAAG,qBAAqB,EAAE;EACtC,gBAAgB,IAAI,YAAY,SAAS;CAC3C;CAEA,IAAI,CAAC,uBAAuB,IAAI,UAAU,GAAG;EAC3C,MAAM,eAAe,mBAAmB;EACxC,IAAI,cAAc;GAChB,MAAM,OAAO,IAAI,UAAU,GAAG,WAAW;GACzC,aAAa,cAAc,GAAG,aAAa,eAAe,GAAG,IAAI;GACjE,uBAAuB,IAAI,UAAU;EACvC;CACF;CAEA,OAAO;AACT"}
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/_internal/style.ts"],"sourcesContent":["const cssPropertyNameCache = new Map<string, string>();\n\nfunction cssPropertyName(name: string): string {\n  let cached = cssPropertyNameCache.get(name);\n  if (cached !== undefined) {\n    return cached;\n  }\n\n  let result = \"\";\n\n  for (let index = 0; index < name.length; index += 1) {\n    const code = name.charCodeAt(index);\n\n    if (code >= 65 && code <= 90) {\n      result += `-${String.fromCharCode(code + 32)}`;\n    } else {\n      result += name[index];\n    }\n  }\n\n  cssPropertyNameCache.set(name, result);\n  return result;\n}\n\nexport function serializeCssDeclarations(styles: Record<string, unknown>): string {\n  const keys = Object.keys(styles);\n  let result = \"\";\n\n  for (const key of keys) {\n    const value = styles[key];\n    if (value === undefined || value === null) {\n      continue;\n    }\n\n    const declaration = `${cssPropertyName(key)}:${String(value)}`;\n    result = result ? `${result};${declaration}` : declaration;\n  }\n\n  return result;\n}\n\nexport function mergeCssVar(style: unknown, name: string, value: string): string {\n  const decl = `${name}:${value}`;\n\n  if (typeof style === \"string\") {\n    const trimmed = style.trim();\n    return trimmed ? `${trimmed};${decl}` : decl;\n  }\n\n  if (style && typeof style === \"object\") {\n    const entries = serializeCssDeclarations(style as Record<string, unknown>);\n    return entries ? `${entries};${decl}` : decl;\n  }\n\n  return decl;\n}\n\nconst STYLE_REGISTRY_ATTR = \"data-askr-style-registry\";\nconst STYLE_CLASS_PREFIX = \"ak-style-\";\n\nconst styleClassCache = new Map<string, string>();\nconst registeredDeclarations = new Set<string>();\n\nlet nextStyleClassId = 0;\n\nfunction ensureStyleElement(): HTMLStyleElement | null {\n  if (typeof document === \"undefined\") return null;\n\n  const existing = document.querySelector(`style[${STYLE_REGISTRY_ATTR}]`);\n  if (existing instanceof HTMLStyleElement) {\n    return existing;\n  }\n\n  const styleElement = document.createElement(\"style\");\n  styleElement.setAttribute(STYLE_REGISTRY_ATTR, \"true\");\n  (document.head ?? document.documentElement).append(styleElement);\n\n  return styleElement;\n}\n\nfunction normalizeDeclarations(declarations: string): string {\n  return declarations.trim().replace(/;+\\s*$/, \"\");\n}\n\nexport function styleDeclarationsToClass(declarations: string | undefined): string | undefined {\n  if (typeof declarations !== \"string\") return undefined;\n\n  const normalized = normalizeDeclarations(declarations);\n  if (!normalized) return undefined;\n\n  let className = styleClassCache.get(normalized);\n  if (className === undefined) {\n    className = `${STYLE_CLASS_PREFIX}${++nextStyleClassId}`;\n    styleClassCache.set(normalized, className);\n  }\n\n  if (!registeredDeclarations.has(normalized)) {\n    const styleElement = ensureStyleElement();\n    if (styleElement) {\n      const rule = `.${className}{${normalized}}`;\n      styleElement.textContent = `${styleElement.textContent ?? \"\"}\\n${rule}`;\n      registeredDeclarations.add(normalized);\n    }\n  }\n\n  return className;\n}\n"],"mappings":";AAAA,MAAM,uCAAuB,IAAI,IAAoB;AAErD,SAAS,gBAAgB,MAAsB;CAC7C,IAAI,SAAS,qBAAqB,IAAI,IAAI;CAC1C,IAAI,WAAW,KAAA,GACb,OAAO;CAGT,IAAI,SAAS;CAEb,KAAK,IAAI,QAAQ,GAAG,QAAQ,KAAK,QAAQ,SAAS,GAAG;EACnD,MAAM,OAAO,KAAK,WAAW,KAAK;EAElC,IAAI,QAAQ,MAAM,QAAQ,IACxB,UAAU,IAAI,OAAO,aAAa,OAAO,EAAE;OAE3C,UAAU,KAAK;CAEnB;CAEA,qBAAqB,IAAI,MAAM,MAAM;CACrC,OAAO;AACT;AAEA,SAAgB,yBAAyB,QAAyC;CAChF,MAAM,OAAO,OAAO,KAAK,MAAM;CAC/B,IAAI,SAAS;CAEb,KAAK,MAAM,OAAO,MAAM;EACtB,MAAM,QAAQ,OAAO;EACrB,IAAI,UAAU,KAAA,KAAa,UAAU,MACnC;EAGF,MAAM,cAAc,GAAG,gBAAgB,GAAG,EAAE,GAAG,OAAO,KAAK;EAC3D,SAAS,SAAS,GAAG,OAAO,GAAG,gBAAgB;CACjD;CAEA,OAAO;AACT;AAkBA,MAAM,sBAAsB;AAC5B,MAAM,qBAAqB;AAE3B,MAAM,kCAAkB,IAAI,IAAoB;AAChD,MAAM,yCAAyB,IAAI,IAAY;AAE/C,IAAI,mBAAmB;AAEvB,SAAS,qBAA8C;CACrD,IAAI,OAAO,aAAa,aAAa,OAAO;CAE5C,MAAM,WAAW,SAAS,cAAc,SAAS,oBAAoB,EAAE;CACvE,IAAI,oBAAoB,kBACtB,OAAO;CAGT,MAAM,eAAe,SAAS,cAAc,OAAO;CACnD,aAAa,aAAa,qBAAqB,MAAM;CACrD,CAAC,SAAS,QAAQ,SAAS,gBAAA,CAAiB,OAAO,YAAY;CAE/D,OAAO;AACT;AAEA,SAAS,sBAAsB,cAA8B;CAC3D,OAAO,aAAa,KAAK,CAAC,CAAC,QAAQ,UAAU,EAAE;AACjD;AAEA,SAAgB,yBAAyB,cAAsD;CAC7F,IAAI,OAAO,iBAAiB,UAAU,OAAO,KAAA;CAE7C,MAAM,aAAa,sBAAsB,YAAY;CACrD,IAAI,CAAC,YAAY,OAAO,KAAA;CAExB,IAAI,YAAY,gBAAgB,IAAI,UAAU;CAC9C,IAAI,cAAc,KAAA,GAAW;EAC3B,YAAY,GAAG,qBAAqB,EAAE;EACtC,gBAAgB,IAAI,YAAY,SAAS;CAC3C;CAEA,IAAI,CAAC,uBAAuB,IAAI,UAAU,GAAG;EAC3C,MAAM,eAAe,mBAAmB;EACxC,IAAI,cAAc;GAChB,MAAM,OAAO,IAAI,UAAU,GAAG,WAAW;GACzC,aAAa,cAAc,GAAG,aAAa,eAAe,GAAG,IAAI;GACjE,uBAAuB,IAAI,UAAU;EACvC;CACF;CAEA,OAAO;AACT"}

package/dist/components/aspect-ratio/aspect-ratio.js

@@ -1,6 +1,6 @@
 import { mergeProps } from "../_internal/merge-props.js";
-import { mergeLayoutStyles } from "../_internal/layout.js";
 import { styleDeclarationsToClass } from "../_internal/style.js";
+import { mergeLayoutStyles } from "../_internal/layout.js";
 import { jsx } from "@askrjs/askr/jsx-runtime";
 import { Slot } from "@askrjs/askr/foundations";
 //#region src/components/aspect-ratio/aspect-ratio.tsx

package/dist/components/navbar/navbar.js

@@ -9,15 +9,26 @@ import { isNavbarCollapsed, resolveNavGroupAlign } from "./navbar.shared.js";
 import { Fragment, jsx, jsxs } from "@askrjs/askr/jsx-runtime";
 import { state } from "@askrjs/askr";
 //#region src/components/navbar/navbar.tsx
-/**
-* Extracts the first NavBrand child to display in the mobile panel.
-* NavBrand should be the first child of Navbar for it to appear in the mobile menu.
-*/
-function findNavbarBrand(children) {
-	return toChildArray(children).find((child) => isJsxElement(child) && child.type === NavBrand);
-}
-function withoutNavbarBrand(children) {
-	return toChildArray(children).filter((child) => !(isJsxElement(child) && child.type === NavBrand));
+function splitNavbarChildren(children) {
+	let brand;
+	let hasBrand = false;
+	let panelItems;
+	for (let index = 0; index < children.length; index += 1) {
+		const child = children[index];
+		if (isJsxElement(child) && child.type === NavBrand) {
+			if (!hasBrand) {
+				brand = child;
+				hasBrand = true;
+			}
+			panelItems ??= children.slice(0, index);
+			continue;
+		}
+		panelItems?.push(child);
+	}
+	return {
+		brand: hasBrand ? brand : void 0,
+		panelItems: panelItems ?? children
+	};
 }
 /**
 * Responsive mobile-first navbar component.
@@ -40,8 +51,9 @@ function Navbar(props) {
 	const { children, breakpoint, collapseIcon, collapseIconPlacement = "start", collapseLabel, ref, class: className, id, "aria-label": ariaLabel, ...rest } = props;
 	const effectiveCollapseLabel = collapseLabel ?? "Menu";
 	const responsiveChildren = toChildArray(children);
+	const navbarChildren = splitNavbarChildren(responsiveChildren);
 	const desktopChildren = renderKeyedShellChildren(responsiveChildren, "navbar-desktop");
-	const panelChildren = renderKeyedShellChildren(withoutNavbarBrand(responsiveChildren), "navbar-panel");
+	const panelChildren = renderKeyedShellChildren(navbarChildren.panelItems, "navbar-panel");
 	const responsiveCollapsedState = breakpoint !== void 0 ? state(isNavbarCollapsed(breakpoint)) : void 0;
 	const mobileMenuState = state(false);
 	const mobileMenuOpen = mobileMenuState();
@@ -65,7 +77,6 @@ function Navbar(props) {
 		panelOpen: () => Boolean(responsiveCollapsedState?.() && mobileMenuOpen),
 		togglePanel
 	};
-	const panelBrand = findNavbarBrand(responsiveChildren);
 	const finalProps = mergeProps(rest, {
 		"aria-label": ariaLabel,
 		ref,
@@ -101,7 +112,7 @@ function Navbar(props) {
 				}),
 				breakpoint !== void 0 ? /* @__PURE__ */ jsx(NavbarPanel, {
 					active: breakpoint !== void 0,
-					brand: panelBrand,
+					brand: navbarChildren.brand,
 					collapseLabel: effectiveCollapseLabel,
 					onClose: closePanel,
 					onClick: closePanelOnNavActivation,

package/dist/components/navbar/navbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar.js","names":[],"sources":["../../../src/components/navbar/navbar.tsx"],"sourcesContent":["import { state } from \"@askrjs/askr\";\nimport { classes } from \"../_internal/classes\";\nimport { isJsxElement, toChildArray } from \"../_internal/jsx\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport {\n  renderKeyedShellChildren,\n  ShellPanelWatcher,\n  ShellResponsiveWatcher,\n} from \"../shell/shell-responsive\";\nimport { renderNavbarCollapseContents } from \"./navbar.render\";\nimport { NavbarPanel } from \"./navbar-panel\";\nimport { NavbarResponsiveContext } from \"./navbar.context\";\nimport { isNavbarCollapsed, resolveNavGroupAlign } from \"./navbar.shared\";\nimport type { NavBrandProps, NavGroupProps, NavToggleProps, NavbarProps } from \"./navbar.types\";\n\n/**\n * Extracts the first NavBrand child to display in the mobile panel.\n * NavBrand should be the first child of Navbar for it to appear in the mobile menu.\n */\nfunction findNavbarBrand(children: unknown): unknown {\n  return toChildArray(children).find((child) => isJsxElement(child) && child.type === NavBrand);\n}\n\nfunction withoutNavbarBrand(children: unknown): unknown[] {\n  return toChildArray(children).filter(\n    (child) => !(isJsxElement(child) && child.type === NavBrand),\n  );\n}\n\n/**\n * Responsive mobile-first navbar component.\n *\n * Composition: Navbar should contain NavBrand (extracted to mobile panel), NavGroup items with optional align,\n * and NavLink children. Brand must be first child to appear in mobile menu.\n *\n * @example\n * <Navbar breakpoint=\"md\" aria-label=\"Main navigation\">\n *   <NavBrand><a href=\"/\">Logo</a></NavBrand>\n *   <NavGroup align=\"center\">\n *     <NavLink href=\"/docs\">Docs</NavLink>\n *   </NavGroup>\n *   <NavGroup align=\"end\">\n *     <NavLink href=\"/settings\">Settings</NavLink>\n *   </NavGroup>\n * </Navbar>\n */\nexport function Navbar(props: NavbarProps): JSX.Element {\n  const {\n    children,\n    breakpoint,\n    collapseIcon,\n    collapseIconPlacement = \"start\",\n    collapseLabel,\n    ref,\n    class: className,\n    id,\n    \"aria-label\": ariaLabel,\n    ...rest\n  } = props;\n  const effectiveCollapseLabel = collapseLabel ?? \"Menu\";\n  const responsiveChildren = toChildArray(children);\n  const desktopChildren = renderKeyedShellChildren(responsiveChildren, \"navbar-desktop\");\n  const panelChildren = renderKeyedShellChildren(\n    withoutNavbarBrand(responsiveChildren),\n    \"navbar-panel\",\n  );\n  // Extract brand to display in mobile panel header\n  const responsiveCollapsedState =\n    breakpoint !== undefined ? state(isNavbarCollapsed(breakpoint)) : undefined;\n  const mobileMenuState = state(false);\n  const mobileMenuOpen = mobileMenuState();\n  const panelId = typeof id === \"string\" ? `${id}-panel` : undefined;\n  const responsiveCollapsed = breakpoint !== undefined ? responsiveCollapsedState?.() : false;\n  const panelOpen = Boolean(responsiveCollapsed && mobileMenuOpen);\n  const closePanel = () => mobileMenuState.set(false);\n  const closePanelOnNavActivation = (event: MouseEvent) => {\n    const target = event.target;\n\n    if (!(target instanceof Element)) {\n      return;\n    }\n\n    if (target.closest('a[data-slot=\"nav-link\"], a[data-slot=\"nav-item\"], a.navbar-item')) {\n      closePanel();\n    }\n  };\n  const togglePanel = () => {\n    mobileMenuState.set(!mobileMenuState());\n  };\n  const contextValue = {\n    active: () => breakpoint !== undefined,\n    collapseLabel: () => effectiveCollapseLabel,\n    closePanel,\n    panelId: () => panelId,\n    panelOpen: () => Boolean(responsiveCollapsedState?.() && mobileMenuOpen),\n    togglePanel,\n  };\n  const panelBrand = findNavbarBrand(responsiveChildren);\n  const finalProps = mergeProps(rest, {\n    \"aria-label\": ariaLabel,\n    ref,\n    class: classes(\"navbar\", className),\n    \"data-collapse-below\": breakpoint,\n    \"data-responsive-collapsed\": responsiveCollapsed ? \"true\" : \"false\",\n    \"data-slot\": \"navbar\",\n  });\n\n  return (\n    <NavbarResponsiveContext.Scope value={contextValue}>\n      <nav {...finalProps}>\n        {breakpoint !== undefined ? (\n          <div class=\"navbar-mobile\" data-slot=\"navbar-mobile\">\n            <NavToggle\n              active={breakpoint !== undefined}\n              aria-controls={panelId}\n              aria-label={effectiveCollapseLabel}\n              icon={collapseIcon}\n              iconPlacement={collapseIconPlacement}\n              label={effectiveCollapseLabel}\n              onToggle={togglePanel}\n              open={panelOpen}\n              panelId={panelId}\n            />\n          </div>\n        ) : null}\n\n        <div class=\"navbar-shell\" data-slot=\"navbar-shell\">\n          {desktopChildren}\n        </div>\n\n        {breakpoint !== undefined ? (\n          <NavbarPanel\n            active={breakpoint !== undefined}\n            brand={panelBrand}\n            collapseLabel={effectiveCollapseLabel}\n            onClose={closePanel}\n            onClick={closePanelOnNavActivation}\n            open={panelOpen}\n            panelId={panelId}\n          >\n            {panelChildren}\n          </NavbarPanel>\n        ) : null}\n\n        {responsiveCollapsed && mobileMenuOpen ? (\n          <button\n            aria-label={`Close ${effectiveCollapseLabel}`}\n            class=\"navbar-backdrop\"\n            data-slot=\"navbar-backdrop\"\n            data-state=\"open\"\n            tabIndex={-1}\n            type=\"button\"\n            onClick={closePanel}\n          />\n        ) : null}\n\n        {breakpoint !== undefined ? (\n          <ShellResponsiveWatcher\n            breakpoint={breakpoint}\n            isCollapsed={isNavbarCollapsed}\n            onResize={(nextCollapsed) => {\n              responsiveCollapsedState?.set(nextCollapsed);\n            }}\n            onExpand={() => {\n              mobileMenuState?.set(false);\n            }}\n          />\n        ) : null}\n\n        <ShellPanelWatcher\n          contentId={panelId}\n          open={panelOpen}\n          panelSlot=\"navbar-panel\"\n          onClose={closePanel}\n        />\n      </nav>\n    </NavbarResponsiveContext.Scope>\n  );\n}\n\n/**\n * Menu toggle button for responsive navbar collapse.\n * Auto-renders when navbar is responsive (collapseBelow set).\n */\nexport function NavToggle(props: NavToggleProps): JSX.Element | null {\n  const {\n    children,\n    class: className,\n    active,\n    icon,\n    iconPlacement = \"start\",\n    label = \"Menu\",\n    ref,\n    onToggle,\n    open,\n    panelId,\n    ...rest\n  } = props;\n\n  if (active === false) {\n    return null;\n  }\n\n  const isOpen = open === true;\n\n  const finalProps = mergeProps(rest, {\n    ref,\n    class: classes(\"navbar-toggle\", className),\n    \"aria-controls\": panelId,\n    \"aria-expanded\": isOpen ? \"true\" : \"false\",\n    \"aria-label\": label,\n    \"data-slot\": \"navbar-toggle\",\n    \"data-state\": isOpen ? \"open\" : \"closed\",\n    type: \"button\",\n    onClick: () => onToggle?.(),\n  });\n\n  return (\n    <button {...finalProps}>\n      {children ?? renderNavbarCollapseContents(label, icon, iconPlacement)}\n    </button>\n  );\n}\n\n/**\n * Brand/logo container displayed in navbar and mobile panel header.\n */\nexport function NavBrand(props: NavBrandProps): JSX.Element {\n  const { children, ref, class: className, ...rest } = props;\n\n  return (\n    <div {...rest} ref={ref} class={classes(\"navbar-brand\", className)} data-slot=\"navbar-brand\">\n      {children}\n    </div>\n  );\n}\n\n/**\n * Navigation group for organizing related nav items.\n *\n * @param align - Alignment: \"start\" (default), \"center\", or \"end\". Using align=\"end\" automatically right-aligns the group.\n * @param label - Optional accessible label for grouped items.\n *\n * @example\n * <NavGroup align=\"center\">\n *   <NavLink href=\"/docs\">Docs</NavLink>\n * </NavGroup>\n */\nexport function NavGroup(props: NavGroupProps): JSX.Element {\n  const { children, id, ref, class: className, label, ...rest } = props;\n  const rawAlign = (rest as Record<string, unknown>)[\"data-align\"];\n  const align =\n    props.align ??\n    (rawAlign === \"start\" || rawAlign === \"center\" || rawAlign === \"end\"\n      ? (rawAlign as NavGroupProps[\"align\"])\n      : undefined);\n  const hasLabel = label !== undefined && label !== null;\n  const labelId = hasLabel && id ? `${id}-label` : undefined;\n  const accessibleLabel = typeof label === \"string\" ? label : undefined;\n\n  return (\n    <div\n      {...rest}\n      id={id}\n      ref={ref}\n      class={classes(\"navbar-group\", className)}\n      aria-label={labelId ? undefined : accessibleLabel}\n      aria-labelledby={labelId}\n      role={hasLabel ? \"group\" : rest.role}\n      data-align={resolveNavGroupAlign(align)}\n      data-has-label={hasLabel ? \"true\" : undefined}\n      data-slot=\"navbar-group\"\n    >\n      {hasLabel ? (\n        <>\n          <div id={labelId} class=\"navbar-group-label\" data-slot=\"navbar-group-label\">\n            {label}\n          </div>\n          <div class=\"navbar-group-body\" data-slot=\"navbar-group-body\">\n            {children}\n          </div>\n        </>\n      ) : (\n        children\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"navbar.js","names":[],"sources":["../../../src/components/navbar/navbar.tsx"],"sourcesContent":["import { state } from \"@askrjs/askr\";\nimport { classes } from \"../_internal/classes\";\nimport { isJsxElement, toChildArray } from \"../_internal/jsx\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport {\n  renderKeyedShellChildren,\n  ShellPanelWatcher,\n  ShellResponsiveWatcher,\n} from \"../shell/shell-responsive\";\nimport { renderNavbarCollapseContents } from \"./navbar.render\";\nimport { NavbarPanel } from \"./navbar-panel\";\nimport { NavbarResponsiveContext } from \"./navbar.context\";\nimport { isNavbarCollapsed, resolveNavGroupAlign } from \"./navbar.shared\";\nimport type { NavBrandProps, NavGroupProps, NavToggleProps, NavbarProps } from \"./navbar.types\";\n\ntype NavbarChildren = {\n  brand?: unknown;\n  panelItems: unknown[];\n};\n\nfunction splitNavbarChildren(children: unknown[]): NavbarChildren {\n  let brand: unknown;\n  let hasBrand = false;\n  let panelItems: unknown[] | undefined;\n\n  for (let index = 0; index < children.length; index += 1) {\n    const child = children[index];\n\n    if (isJsxElement(child) && child.type === NavBrand) {\n      if (!hasBrand) {\n        brand = child;\n        hasBrand = true;\n      }\n\n      panelItems ??= children.slice(0, index);\n      continue;\n    }\n\n    panelItems?.push(child);\n  }\n\n  return {\n    brand: hasBrand ? brand : undefined,\n    panelItems: panelItems ?? children,\n  };\n}\n\n/**\n * Responsive mobile-first navbar component.\n *\n * Composition: Navbar should contain NavBrand (extracted to mobile panel), NavGroup items with optional align,\n * and NavLink children. Brand must be first child to appear in mobile menu.\n *\n * @example\n * <Navbar breakpoint=\"md\" aria-label=\"Main navigation\">\n *   <NavBrand><a href=\"/\">Logo</a></NavBrand>\n *   <NavGroup align=\"center\">\n *     <NavLink href=\"/docs\">Docs</NavLink>\n *   </NavGroup>\n *   <NavGroup align=\"end\">\n *     <NavLink href=\"/settings\">Settings</NavLink>\n *   </NavGroup>\n * </Navbar>\n */\nexport function Navbar(props: NavbarProps): JSX.Element {\n  const {\n    children,\n    breakpoint,\n    collapseIcon,\n    collapseIconPlacement = \"start\",\n    collapseLabel,\n    ref,\n    class: className,\n    id,\n    \"aria-label\": ariaLabel,\n    ...rest\n  } = props;\n  const effectiveCollapseLabel = collapseLabel ?? \"Menu\";\n  const responsiveChildren = toChildArray(children);\n  const navbarChildren = splitNavbarChildren(responsiveChildren);\n  const desktopChildren = renderKeyedShellChildren(responsiveChildren, \"navbar-desktop\");\n  const panelChildren = renderKeyedShellChildren(navbarChildren.panelItems, \"navbar-panel\");\n  // Extract brand to display in mobile panel header\n  const responsiveCollapsedState =\n    breakpoint !== undefined ? state(isNavbarCollapsed(breakpoint)) : undefined;\n  const mobileMenuState = state(false);\n  const mobileMenuOpen = mobileMenuState();\n  const panelId = typeof id === \"string\" ? `${id}-panel` : undefined;\n  const responsiveCollapsed = breakpoint !== undefined ? responsiveCollapsedState?.() : false;\n  const panelOpen = Boolean(responsiveCollapsed && mobileMenuOpen);\n  const closePanel = () => mobileMenuState.set(false);\n  const closePanelOnNavActivation = (event: MouseEvent) => {\n    const target = event.target;\n\n    if (!(target instanceof Element)) {\n      return;\n    }\n\n    if (target.closest('a[data-slot=\"nav-link\"], a[data-slot=\"nav-item\"], a.navbar-item')) {\n      closePanel();\n    }\n  };\n  const togglePanel = () => {\n    mobileMenuState.set(!mobileMenuState());\n  };\n  const contextValue = {\n    active: () => breakpoint !== undefined,\n    collapseLabel: () => effectiveCollapseLabel,\n    closePanel,\n    panelId: () => panelId,\n    panelOpen: () => Boolean(responsiveCollapsedState?.() && mobileMenuOpen),\n    togglePanel,\n  };\n  const finalProps = mergeProps(rest, {\n    \"aria-label\": ariaLabel,\n    ref,\n    class: classes(\"navbar\", className),\n    \"data-collapse-below\": breakpoint,\n    \"data-responsive-collapsed\": responsiveCollapsed ? \"true\" : \"false\",\n    \"data-slot\": \"navbar\",\n  });\n\n  return (\n    <NavbarResponsiveContext.Scope value={contextValue}>\n      <nav {...finalProps}>\n        {breakpoint !== undefined ? (\n          <div class=\"navbar-mobile\" data-slot=\"navbar-mobile\">\n            <NavToggle\n              active={breakpoint !== undefined}\n              aria-controls={panelId}\n              aria-label={effectiveCollapseLabel}\n              icon={collapseIcon}\n              iconPlacement={collapseIconPlacement}\n              label={effectiveCollapseLabel}\n              onToggle={togglePanel}\n              open={panelOpen}\n              panelId={panelId}\n            />\n          </div>\n        ) : null}\n\n        <div class=\"navbar-shell\" data-slot=\"navbar-shell\">\n          {desktopChildren}\n        </div>\n\n        {breakpoint !== undefined ? (\n          <NavbarPanel\n            active={breakpoint !== undefined}\n            brand={navbarChildren.brand}\n            collapseLabel={effectiveCollapseLabel}\n            onClose={closePanel}\n            onClick={closePanelOnNavActivation}\n            open={panelOpen}\n            panelId={panelId}\n          >\n            {panelChildren}\n          </NavbarPanel>\n        ) : null}\n\n        {responsiveCollapsed && mobileMenuOpen ? (\n          <button\n            aria-label={`Close ${effectiveCollapseLabel}`}\n            class=\"navbar-backdrop\"\n            data-slot=\"navbar-backdrop\"\n            data-state=\"open\"\n            tabIndex={-1}\n            type=\"button\"\n            onClick={closePanel}\n          />\n        ) : null}\n\n        {breakpoint !== undefined ? (\n          <ShellResponsiveWatcher\n            breakpoint={breakpoint}\n            isCollapsed={isNavbarCollapsed}\n            onResize={(nextCollapsed) => {\n              responsiveCollapsedState?.set(nextCollapsed);\n            }}\n            onExpand={() => {\n              mobileMenuState?.set(false);\n            }}\n          />\n        ) : null}\n\n        <ShellPanelWatcher\n          contentId={panelId}\n          open={panelOpen}\n          panelSlot=\"navbar-panel\"\n          onClose={closePanel}\n        />\n      </nav>\n    </NavbarResponsiveContext.Scope>\n  );\n}\n\n/**\n * Menu toggle button for responsive navbar collapse.\n * Auto-renders when navbar is responsive (collapseBelow set).\n */\nexport function NavToggle(props: NavToggleProps): JSX.Element | null {\n  const {\n    children,\n    class: className,\n    active,\n    icon,\n    iconPlacement = \"start\",\n    label = \"Menu\",\n    ref,\n    onToggle,\n    open,\n    panelId,\n    ...rest\n  } = props;\n\n  if (active === false) {\n    return null;\n  }\n\n  const isOpen = open === true;\n\n  const finalProps = mergeProps(rest, {\n    ref,\n    class: classes(\"navbar-toggle\", className),\n    \"aria-controls\": panelId,\n    \"aria-expanded\": isOpen ? \"true\" : \"false\",\n    \"aria-label\": label,\n    \"data-slot\": \"navbar-toggle\",\n    \"data-state\": isOpen ? \"open\" : \"closed\",\n    type: \"button\",\n    onClick: () => onToggle?.(),\n  });\n\n  return (\n    <button {...finalProps}>\n      {children ?? renderNavbarCollapseContents(label, icon, iconPlacement)}\n    </button>\n  );\n}\n\n/**\n * Brand/logo container displayed in navbar and mobile panel header.\n */\nexport function NavBrand(props: NavBrandProps): JSX.Element {\n  const { children, ref, class: className, ...rest } = props;\n\n  return (\n    <div {...rest} ref={ref} class={classes(\"navbar-brand\", className)} data-slot=\"navbar-brand\">\n      {children}\n    </div>\n  );\n}\n\n/**\n * Navigation group for organizing related nav items.\n *\n * @param align - Alignment: \"start\" (default), \"center\", or \"end\". Using align=\"end\" automatically right-aligns the group.\n * @param label - Optional accessible label for grouped items.\n *\n * @example\n * <NavGroup align=\"center\">\n *   <NavLink href=\"/docs\">Docs</NavLink>\n * </NavGroup>\n */\nexport function NavGroup(props: NavGroupProps): JSX.Element {\n  const { children, id, ref, class: className, label, ...rest } = props;\n  const rawAlign = (rest as Record<string, unknown>)[\"data-align\"];\n  const align =\n    props.align ??\n    (rawAlign === \"start\" || rawAlign === \"center\" || rawAlign === \"end\"\n      ? (rawAlign as NavGroupProps[\"align\"])\n      : undefined);\n  const hasLabel = label !== undefined && label !== null;\n  const labelId = hasLabel && id ? `${id}-label` : undefined;\n  const accessibleLabel = typeof label === \"string\" ? label : undefined;\n\n  return (\n    <div\n      {...rest}\n      id={id}\n      ref={ref}\n      class={classes(\"navbar-group\", className)}\n      aria-label={labelId ? undefined : accessibleLabel}\n      aria-labelledby={labelId}\n      role={hasLabel ? \"group\" : rest.role}\n      data-align={resolveNavGroupAlign(align)}\n      data-has-label={hasLabel ? \"true\" : undefined}\n      data-slot=\"navbar-group\"\n    >\n      {hasLabel ? (\n        <>\n          <div id={labelId} class=\"navbar-group-label\" data-slot=\"navbar-group-label\">\n            {label}\n          </div>\n          <div class=\"navbar-group-body\" data-slot=\"navbar-group-body\">\n            {children}\n          </div>\n        </>\n      ) : (\n        children\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/shell/shell-responsive.js

@@ -24,32 +24,43 @@ function releaseShellScrollLock() {
 function isShellPanelChild(child, panelComponent) {
 	return isJsxElement(child) && child.type === panelComponent;
 }
-function renderKeyedShellChildren(children, keyPrefix) {
-	const childList = toChildArray(children);
-	const keyedChildren = childList.some((child) => isJsxElement(child) && child.key == null) ? childList.map((child, index) => {
-		if (!isJsxElement(child) || child.key != null) return child;
-		return {
-			...child,
-			key: `${keyPrefix}-${index}`
-		};
-	}) : childList;
-	return /* @__PURE__ */ jsx(For, {
-		each: () => keyedChildren,
-		by: (child, index) => isJsxElement(child) && child.key != null ? String(child.key) : `${keyPrefix}-${index}`,
-		children: (child) => child
-	});
+function renderShellChildKey(child, index, keyPrefix) {
+	return isJsxElement(child) && child.key != null ? String(child.key) : `${keyPrefix}-${index}`;
 }
-function renderKeyedShellPanelChildren(children, keyPrefix, panelProps) {
-	const childList = toChildArray(children);
-	const keyedChildren = childList.some((child) => {
-		if (!isJsxElement(child)) return false;
-		const props = child.props;
-		return props?.active !== panelProps.active || props?.collapseLabel !== panelProps.collapseLabel || props?.onClose !== panelProps.onClose || props?.open !== panelProps.open || props?.panelId !== panelProps.panelId;
-	}) ? childList.map((child, index) => {
-		if (!isJsxElement(child)) return child;
+function keyMissingShellChildren(children, keyPrefix) {
+	let keyedChildren;
+	for (let index = 0; index < children.length; index += 1) {
+		const child = children[index];
+		if (isJsxElement(child) && child.key == null) {
+			keyedChildren ??= children.slice(0, index);
+			keyedChildren.push({
+				...child,
+				key: `${keyPrefix}-${index}`
+			});
+			continue;
+		}
+		keyedChildren?.push(child);
+	}
+	return keyedChildren ?? children;
+}
+function hasPanelProps(props, panelProps) {
+	return props?.active === panelProps.active && props?.collapseLabel === panelProps.collapseLabel && props?.onClose === panelProps.onClose && props?.open === panelProps.open && props?.panelId === panelProps.panelId;
+}
+function applyShellPanelProps(children, keyPrefix, panelProps) {
+	let panelChildren;
+	for (let index = 0; index < children.length; index += 1) {
+		const child = children[index];
+		if (!isJsxElement(child)) {
+			panelChildren?.push(child);
+			continue;
+		}
 		const props = child.props;
-		if (props?.active === panelProps.active && props?.collapseLabel === panelProps.collapseLabel && props?.onClose === panelProps.onClose && props?.open === panelProps.open && props?.panelId === panelProps.panelId) return child;
-		return {
+		if (hasPanelProps(props, panelProps)) {
+			panelChildren?.push(child);
+			continue;
+		}
+		panelChildren ??= children.slice(0, index);
+		panelChildren.push({
 			...child,
 			key: child.key != null ? child.key : `${keyPrefix}-${index}`,
 			props: {
@@ -60,11 +71,23 @@ function renderKeyedShellPanelChildren(children, keyPrefix, panelProps) {
 				open: panelProps.open,
 				panelId: panelProps.panelId
 			}
-		};
-	}) : childList;
+		});
+	}
+	return panelChildren ?? children;
+}
+function renderKeyedShellChildren(children, keyPrefix) {
+	const keyedChildren = keyMissingShellChildren(toChildArray(children), keyPrefix);
+	return /* @__PURE__ */ jsx(For, {
+		each: () => keyedChildren,
+		by: (child, index) => renderShellChildKey(child, index, keyPrefix),
+		children: (child) => child
+	});
+}
+function renderKeyedShellPanelChildren(children, keyPrefix, panelProps) {
+	const keyedChildren = applyShellPanelProps(toChildArray(children), keyPrefix, panelProps);
 	return /* @__PURE__ */ jsx(For, {
 		each: () => keyedChildren,
-		by: (child, index) => isJsxElement(child) && child.key != null ? String(child.key) : `${keyPrefix}-${index}`,
+		by: (child, index) => renderShellChildKey(child, index, keyPrefix),
 		children: (child) => child
 	});
 }

package/dist/components/shell/shell-responsive.js.map

@@ -1 +1 @@
-{"version":3,"file":"shell-responsive.js","names":[],"sources":["../../../src/components/shell/shell-responsive.tsx"],"sourcesContent":["import { For } from \"@askrjs/askr/control\";\nimport { resource } from \"@askrjs/askr/resources\";\nimport type { JSXElement } from \"@askrjs/askr/foundations\";\nimport { isJsxElement, toChildArray } from \"../_internal/jsx\";\n\nexport type ShellResponsivePanelProps = {\n  active: boolean;\n  collapseLabel: string;\n  onClose: () => void;\n  open: boolean;\n  panelId?: string;\n};\n\nlet shellScrollLockCount = 0;\nlet shellScrollLockPreviousValue: string | null = null;\n\nfunction acquireShellScrollLock(): void {\n  if (typeof document === \"undefined\") return;\n\n  const body = document.body;\n  if (shellScrollLockCount === 0) {\n    shellScrollLockPreviousValue = body.getAttribute(\"data-shell-scroll-lock\");\n  }\n\n  shellScrollLockCount += 1;\n  body.setAttribute(\"data-shell-scroll-lock\", \"true\");\n}\n\nfunction releaseShellScrollLock(): void {\n  if (typeof document === \"undefined\" || shellScrollLockCount === 0) return;\n\n  shellScrollLockCount -= 1;\n  if (shellScrollLockCount > 0) return;\n\n  const body = document.body;\n  if (shellScrollLockPreviousValue === null) {\n    body.removeAttribute(\"data-shell-scroll-lock\");\n  } else {\n    body.setAttribute(\"data-shell-scroll-lock\", shellScrollLockPreviousValue);\n  }\n\n  shellScrollLockPreviousValue = null;\n}\n\nexport function isShellPanelChild(child: unknown, panelComponent: unknown): child is JSXElement {\n  return isJsxElement(child) && child.type === panelComponent;\n}\n\nexport function renderKeyedShellChildren(children: unknown, keyPrefix: string): JSX.Element {\n  const childList = toChildArray(children);\n  const needsKeying = childList.some((child) => isJsxElement(child) && child.key == null);\n  const keyedChildren = needsKeying\n    ? childList.map((child, index) => {\n        if (!isJsxElement(child) || child.key != null) {\n          return child;\n        }\n\n        return {\n          ...child,\n          key: `${keyPrefix}-${index}`,\n        };\n      })\n    : childList;\n\n  return (\n    <For\n      each={() => keyedChildren}\n      by={(child, index) =>\n        isJsxElement(child) && child.key != null ? String(child.key) : `${keyPrefix}-${index}`\n      }\n    >\n      {(child) => child as never}\n    </For>\n  );\n}\n\nexport function renderKeyedShellPanelChildren(\n  children: unknown,\n  keyPrefix: string,\n  panelProps: ShellResponsivePanelProps,\n): JSX.Element {\n  const childList = toChildArray(children);\n  const needsPanelProps = childList.some((child) => {\n    if (!isJsxElement(child)) {\n      return false;\n    }\n\n    const props = child.props as Record<string, unknown> | undefined;\n\n    return (\n      props?.active !== panelProps.active ||\n      props?.collapseLabel !== panelProps.collapseLabel ||\n      props?.onClose !== panelProps.onClose ||\n      props?.open !== panelProps.open ||\n      props?.panelId !== panelProps.panelId\n    );\n  });\n  const keyedChildren = needsPanelProps\n    ? childList.map((child, index) => {\n        if (!isJsxElement(child)) {\n          return child;\n        }\n\n        const props = child.props as Record<string, unknown> | undefined;\n\n        if (\n          props?.active === panelProps.active &&\n          props?.collapseLabel === panelProps.collapseLabel &&\n          props?.onClose === panelProps.onClose &&\n          props?.open === panelProps.open &&\n          props?.panelId === panelProps.panelId\n        ) {\n          return child;\n        }\n\n        return {\n          ...child,\n          key: child.key != null ? child.key : `${keyPrefix}-${index}`,\n          props: {\n            ...props,\n            active: panelProps.active,\n            collapseLabel: panelProps.collapseLabel,\n            onClose: panelProps.onClose,\n            open: panelProps.open,\n            panelId: panelProps.panelId,\n          },\n        };\n      })\n    : childList;\n\n  return (\n    <For\n      each={() => keyedChildren}\n      by={(child, index) =>\n        isJsxElement(child) && child.key != null ? String(child.key) : `${keyPrefix}-${index}`\n      }\n    >\n      {(child) => child as never}\n    </For>\n  );\n}\n\nexport function ShellResponsiveWatcher<TBreakpoint extends string>(props: {\n  breakpoint: TBreakpoint;\n  isCollapsed: (breakpoint: TBreakpoint) => boolean;\n  onExpand: () => void;\n  onResize: (nextCollapsed: boolean) => void;\n}): JSX.Element | null {\n  const { breakpoint, isCollapsed, onExpand, onResize } = props;\n\n  resource(\n    ({ signal }: { signal: AbortSignal }) => {\n      const updateCollapsedState = () => {\n        const nextCollapsed = isCollapsed(breakpoint);\n        onResize(nextCollapsed);\n\n        if (!nextCollapsed) {\n          onExpand();\n        }\n      };\n\n      updateCollapsedState();\n\n      if (typeof window === \"undefined\") {\n        return null;\n      }\n\n      window.addEventListener(\"resize\", updateCollapsedState);\n      signal.addEventListener(\n        \"abort\",\n        () => {\n          window.removeEventListener(\"resize\", updateCollapsedState);\n        },\n        { once: true },\n      );\n\n      return null;\n    },\n    [breakpoint],\n  );\n\n  return null;\n}\n\nexport function ShellPanelWatcher(props: {\n  contentId?: string;\n  onClose: () => void;\n  open: boolean;\n  panelSlot: string;\n}): JSX.Element | null {\n  const { contentId, onClose, open, panelSlot } = props;\n\n  resource(\n    ({ signal }: { signal: AbortSignal }) => {\n      if (!open || typeof window === \"undefined\") {\n        releaseShellScrollLock();\n        return null;\n      }\n\n      const onKeyDown = (event: KeyboardEvent) => {\n        if (event.key !== \"Escape\") {\n          return;\n        }\n\n        event.preventDefault();\n        onClose();\n      };\n\n      window.addEventListener(\"keydown\", onKeyDown);\n\n      const focusFrame =\n        typeof window.requestAnimationFrame === \"function\"\n          ? window.requestAnimationFrame(() => {\n              const content =\n                (typeof contentId === \"string\" ? document.getElementById(contentId) : null) ??\n                document.querySelector<HTMLElement>(\n                  `[data-slot=\"${panelSlot}\"][data-state=\"open\"]`,\n                );\n\n              content?.focus({ preventScroll: true });\n            })\n          : undefined;\n\n      acquireShellScrollLock();\n\n      signal.addEventListener(\n        \"abort\",\n        () => {\n          window.removeEventListener(\"keydown\", onKeyDown);\n\n          if (focusFrame !== undefined && typeof window.cancelAnimationFrame === \"function\") {\n            window.cancelAnimationFrame(focusFrame);\n          }\n\n          releaseShellScrollLock();\n        },\n        { once: true },\n      );\n\n      return null;\n    },\n    [open],\n  );\n\n  return null;\n}\n"],"mappings":";;;;;AAaA,IAAI,uBAAuB;AAC3B,IAAI,+BAA8C;AAElD,SAAS,yBAA+B;CACtC,IAAI,OAAO,aAAa,aAAa;CAErC,MAAM,OAAO,SAAS;CACtB,IAAI,yBAAyB,GAC3B,+BAA+B,KAAK,aAAa,wBAAwB;CAG3E,wBAAwB;CACxB,KAAK,aAAa,0BAA0B,MAAM;AACpD;AAEA,SAAS,yBAA+B;CACtC,IAAI,OAAO,aAAa,eAAe,yBAAyB,GAAG;CAEnE,wBAAwB;CACxB,IAAI,uBAAuB,GAAG;CAE9B,MAAM,OAAO,SAAS;CACtB,IAAI,iCAAiC,MACnC,KAAK,gBAAgB,wBAAwB;MAE7C,KAAK,aAAa,0BAA0B,4BAA4B;CAG1E,+BAA+B;AACjC;AAEA,SAAgB,kBAAkB,OAAgB,gBAA8C;CAC9F,OAAO,aAAa,KAAK,KAAK,MAAM,SAAS;AAC/C;AAEA,SAAgB,yBAAyB,UAAmB,WAAgC;CAC1F,MAAM,YAAY,aAAa,QAAQ;CAEvC,MAAM,gBADc,UAAU,MAAM,UAAU,aAAa,KAAK,KAAK,MAAM,OAAO,IAClD,IAC5B,UAAU,KAAK,OAAO,UAAU;EAC9B,IAAI,CAAC,aAAa,KAAK,KAAK,MAAM,OAAO,MACvC,OAAO;EAGT,OAAO;GACL,GAAG;GACH,KAAK,GAAG,UAAU,GAAG;EACvB;CACF,CAAC,IACD;CAEJ,OACE,oBAAC,KAAD;EACE,YAAY;EACZ,KAAK,OAAO,UACV,aAAa,KAAK,KAAK,MAAM,OAAO,OAAO,OAAO,MAAM,GAAG,IAAI,GAAG,UAAU,GAAG;aAG/E,UAAU;CACT,CAAA;AAET;AAEA,SAAgB,8BACd,UACA,WACA,YACa;CACb,MAAM,YAAY,aAAa,QAAQ;CAgBvC,MAAM,gBAfkB,UAAU,MAAM,UAAU;EAChD,IAAI,CAAC,aAAa,KAAK,GACrB,OAAO;EAGT,MAAM,QAAQ,MAAM;EAEpB,OACE,OAAO,WAAW,WAAW,UAC7B,OAAO,kBAAkB,WAAW,iBACpC,OAAO,YAAY,WAAW,WAC9B,OAAO,SAAS,WAAW,QAC3B,OAAO,YAAY,WAAW;CAElC,CACoC,IAChC,UAAU,KAAK,OAAO,UAAU;EAC9B,IAAI,CAAC,aAAa,KAAK,GACrB,OAAO;EAGT,MAAM,QAAQ,MAAM;EAEpB,IACE,OAAO,WAAW,WAAW,UAC7B,OAAO,kBAAkB,WAAW,iBACpC,OAAO,YAAY,WAAW,WAC9B,OAAO,SAAS,WAAW,QAC3B,OAAO,YAAY,WAAW,SAE9B,OAAO;EAGT,OAAO;GACL,GAAG;GACH,KAAK,MAAM,OAAO,OAAO,MAAM,MAAM,GAAG,UAAU,GAAG;GACrD,OAAO;IACL,GAAG;IACH,QAAQ,WAAW;IACnB,eAAe,WAAW;IAC1B,SAAS,WAAW;IACpB,MAAM,WAAW;IACjB,SAAS,WAAW;GACtB;EACF;CACF,CAAC,IACD;CAEJ,OACE,oBAAC,KAAD;EACE,YAAY;EACZ,KAAK,OAAO,UACV,aAAa,KAAK,KAAK,MAAM,OAAO,OAAO,OAAO,MAAM,GAAG,IAAI,GAAG,UAAU,GAAG;aAG/E,UAAU;CACT,CAAA;AAET;AAEA,SAAgB,uBAAmD,OAK5C;CACrB,MAAM,EAAE,YAAY,aAAa,UAAU,aAAa;CAExD,UACG,EAAE,aAAsC;EACvC,MAAM,6BAA6B;GACjC,MAAM,gBAAgB,YAAY,UAAU;GAC5C,SAAS,aAAa;GAEtB,IAAI,CAAC,eACH,SAAS;EAEb;EAEA,qBAAqB;EAErB,IAAI,OAAO,WAAW,aACpB,OAAO;EAGT,OAAO,iBAAiB,UAAU,oBAAoB;EACtD,OAAO,iBACL,eACM;GACJ,OAAO,oBAAoB,UAAU,oBAAoB;EAC3D,GACA,EAAE,MAAM,KAAK,CACf;EAEA,OAAO;CACT,GACA,CAAC,UAAU,CACb;CAEA,OAAO;AACT;AAEA,SAAgB,kBAAkB,OAKX;CACrB,MAAM,EAAE,WAAW,SAAS,MAAM,cAAc;CAEhD,UACG,EAAE,aAAsC;EACvC,IAAI,CAAC,QAAQ,OAAO,WAAW,aAAa;GAC1C,uBAAuB;GACvB,OAAO;EACT;EAEA,MAAM,aAAa,UAAyB;GAC1C,IAAI,MAAM,QAAQ,UAChB;GAGF,MAAM,eAAe;GACrB,QAAQ;EACV;EAEA,OAAO,iBAAiB,WAAW,SAAS;EAE5C,MAAM,aACJ,OAAO,OAAO,0BAA0B,aACpC,OAAO,4BAA4B;GAOjC,EALG,OAAO,cAAc,WAAW,SAAS,eAAe,SAAS,IAAI,SACtE,SAAS,cACP,eAAe,UAAU,sBAC3B,EAAA,EAEO,MAAM,EAAE,eAAe,KAAK,CAAC;EACxC,CAAC,IACD,KAAA;EAEN,uBAAuB;EAEvB,OAAO,iBACL,eACM;GACJ,OAAO,oBAAoB,WAAW,SAAS;GAE/C,IAAI,eAAe,KAAA,KAAa,OAAO,OAAO,yBAAyB,YACrE,OAAO,qBAAqB,UAAU;GAGxC,uBAAuB;EACzB,GACA,EAAE,MAAM,KAAK,CACf;EAEA,OAAO;CACT,GACA,CAAC,IAAI,CACP;CAEA,OAAO;AACT"}
+{"version":3,"file":"shell-responsive.js","names":[],"sources":["../../../src/components/shell/shell-responsive.tsx"],"sourcesContent":["import { For } from \"@askrjs/askr/control\";\nimport { resource } from \"@askrjs/askr/resources\";\nimport type { JSXElement } from \"@askrjs/askr/foundations\";\nimport { isJsxElement, toChildArray } from \"../_internal/jsx\";\n\nexport type ShellResponsivePanelProps = {\n  active: boolean;\n  collapseLabel: string;\n  onClose: () => void;\n  open: boolean;\n  panelId?: string;\n};\n\nlet shellScrollLockCount = 0;\nlet shellScrollLockPreviousValue: string | null = null;\n\nfunction acquireShellScrollLock(): void {\n  if (typeof document === \"undefined\") return;\n\n  const body = document.body;\n  if (shellScrollLockCount === 0) {\n    shellScrollLockPreviousValue = body.getAttribute(\"data-shell-scroll-lock\");\n  }\n\n  shellScrollLockCount += 1;\n  body.setAttribute(\"data-shell-scroll-lock\", \"true\");\n}\n\nfunction releaseShellScrollLock(): void {\n  if (typeof document === \"undefined\" || shellScrollLockCount === 0) return;\n\n  shellScrollLockCount -= 1;\n  if (shellScrollLockCount > 0) return;\n\n  const body = document.body;\n  if (shellScrollLockPreviousValue === null) {\n    body.removeAttribute(\"data-shell-scroll-lock\");\n  } else {\n    body.setAttribute(\"data-shell-scroll-lock\", shellScrollLockPreviousValue);\n  }\n\n  shellScrollLockPreviousValue = null;\n}\n\nexport function isShellPanelChild(child: unknown, panelComponent: unknown): child is JSXElement {\n  return isJsxElement(child) && child.type === panelComponent;\n}\n\nfunction renderShellChildKey(child: unknown, index: number, keyPrefix: string): string {\n  return isJsxElement(child) && child.key != null ? String(child.key) : `${keyPrefix}-${index}`;\n}\n\nfunction keyMissingShellChildren(children: unknown[], keyPrefix: string): unknown[] {\n  let keyedChildren: unknown[] | undefined;\n\n  for (let index = 0; index < children.length; index += 1) {\n    const child = children[index];\n\n    if (isJsxElement(child) && child.key == null) {\n      keyedChildren ??= children.slice(0, index);\n      keyedChildren.push({\n        ...child,\n        key: `${keyPrefix}-${index}`,\n      });\n      continue;\n    }\n\n    keyedChildren?.push(child);\n  }\n\n  return keyedChildren ?? children;\n}\n\nfunction hasPanelProps(\n  props: Record<string, unknown> | undefined,\n  panelProps: ShellResponsivePanelProps,\n): boolean {\n  return (\n    props?.active === panelProps.active &&\n    props?.collapseLabel === panelProps.collapseLabel &&\n    props?.onClose === panelProps.onClose &&\n    props?.open === panelProps.open &&\n    props?.panelId === panelProps.panelId\n  );\n}\n\nfunction applyShellPanelProps(\n  children: unknown[],\n  keyPrefix: string,\n  panelProps: ShellResponsivePanelProps,\n): unknown[] {\n  let panelChildren: unknown[] | undefined;\n\n  for (let index = 0; index < children.length; index += 1) {\n    const child = children[index];\n\n    if (!isJsxElement(child)) {\n      panelChildren?.push(child);\n      continue;\n    }\n\n    const props = child.props as Record<string, unknown> | undefined;\n\n    if (hasPanelProps(props, panelProps)) {\n      panelChildren?.push(child);\n      continue;\n    }\n\n    panelChildren ??= children.slice(0, index);\n    panelChildren.push({\n      ...child,\n      key: child.key != null ? child.key : `${keyPrefix}-${index}`,\n      props: {\n        ...props,\n        active: panelProps.active,\n        collapseLabel: panelProps.collapseLabel,\n        onClose: panelProps.onClose,\n        open: panelProps.open,\n        panelId: panelProps.panelId,\n      },\n    });\n  }\n\n  return panelChildren ?? children;\n}\n\nexport function renderKeyedShellChildren(children: unknown, keyPrefix: string): JSX.Element {\n  const childList = toChildArray(children);\n  const keyedChildren = keyMissingShellChildren(childList, keyPrefix);\n\n  return (\n    <For\n      each={() => keyedChildren}\n      by={(child, index) => renderShellChildKey(child, index, keyPrefix)}\n    >\n      {(child) => child as never}\n    </For>\n  );\n}\n\nexport function renderKeyedShellPanelChildren(\n  children: unknown,\n  keyPrefix: string,\n  panelProps: ShellResponsivePanelProps,\n): JSX.Element {\n  const childList = toChildArray(children);\n  const keyedChildren = applyShellPanelProps(childList, keyPrefix, panelProps);\n\n  return (\n    <For\n      each={() => keyedChildren}\n      by={(child, index) => renderShellChildKey(child, index, keyPrefix)}\n    >\n      {(child) => child as never}\n    </For>\n  );\n}\n\nexport function ShellResponsiveWatcher<TBreakpoint extends string>(props: {\n  breakpoint: TBreakpoint;\n  isCollapsed: (breakpoint: TBreakpoint) => boolean;\n  onExpand: () => void;\n  onResize: (nextCollapsed: boolean) => void;\n}): JSX.Element | null {\n  const { breakpoint, isCollapsed, onExpand, onResize } = props;\n\n  resource(\n    ({ signal }: { signal: AbortSignal }) => {\n      const updateCollapsedState = () => {\n        const nextCollapsed = isCollapsed(breakpoint);\n        onResize(nextCollapsed);\n\n        if (!nextCollapsed) {\n          onExpand();\n        }\n      };\n\n      updateCollapsedState();\n\n      if (typeof window === \"undefined\") {\n        return null;\n      }\n\n      window.addEventListener(\"resize\", updateCollapsedState);\n      signal.addEventListener(\n        \"abort\",\n        () => {\n          window.removeEventListener(\"resize\", updateCollapsedState);\n        },\n        { once: true },\n      );\n\n      return null;\n    },\n    [breakpoint],\n  );\n\n  return null;\n}\n\nexport function ShellPanelWatcher(props: {\n  contentId?: string;\n  onClose: () => void;\n  open: boolean;\n  panelSlot: string;\n}): JSX.Element | null {\n  const { contentId, onClose, open, panelSlot } = props;\n\n  resource(\n    ({ signal }: { signal: AbortSignal }) => {\n      if (!open || typeof window === \"undefined\") {\n        releaseShellScrollLock();\n        return null;\n      }\n\n      const onKeyDown = (event: KeyboardEvent) => {\n        if (event.key !== \"Escape\") {\n          return;\n        }\n\n        event.preventDefault();\n        onClose();\n      };\n\n      window.addEventListener(\"keydown\", onKeyDown);\n\n      const focusFrame =\n        typeof window.requestAnimationFrame === \"function\"\n          ? window.requestAnimationFrame(() => {\n              const content =\n                (typeof contentId === \"string\" ? document.getElementById(contentId) : null) ??\n                document.querySelector<HTMLElement>(\n                  `[data-slot=\"${panelSlot}\"][data-state=\"open\"]`,\n                );\n\n              content?.focus({ preventScroll: true });\n            })\n          : undefined;\n\n      acquireShellScrollLock();\n\n      signal.addEventListener(\n        \"abort\",\n        () => {\n          window.removeEventListener(\"keydown\", onKeyDown);\n\n          if (focusFrame !== undefined && typeof window.cancelAnimationFrame === \"function\") {\n            window.cancelAnimationFrame(focusFrame);\n          }\n\n          releaseShellScrollLock();\n        },\n        { once: true },\n      );\n\n      return null;\n    },\n    [open],\n  );\n\n  return null;\n}\n"],"mappings":"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"}

package/dist/components/sidebar/sidebar.js

@@ -10,24 +10,42 @@ import { isSidebarCollapsed, resolveSidebarCollapsible } from "./sidebar.shared.
 import { Fragment, jsx, jsxs } from "@askrjs/askr/jsx-runtime";
 import { state } from "@askrjs/askr";
 //#region src/components/sidebar/sidebar.tsx
-function splitSidebarChildren(children) {
-	const brandIndex = children.findIndex((child) => isJsxElement(child) && child.type === NavBrand);
-	if (brandIndex === -1) return { items: children };
-	return {
-		brand: children[brandIndex],
-		items: children.filter((_, index) => index !== brandIndex)
-	};
-}
 function isSidebarToggleChild(child) {
 	return isJsxElement(child) && child.type === SidebarToggle;
 }
-function splitSidebarToggle(children) {
-	const toggleIndex = children.findIndex((child) => isSidebarToggleChild(child));
-	if (toggleIndex === -1) return { items: children };
-	const toggleChild = children[toggleIndex];
+function splitSidebarChildren(children) {
+	const explicitPanelItems = [];
+	const drawerSourceItems = [];
+	let drawerItems;
+	let brand;
+	let hasBrand = false;
+	let hasToggle = false;
+	let toggle;
+	for (const child of children) {
+		if (isShellPanelChild(child, SidebarPanel)) {
+			explicitPanelItems.push(child);
+			continue;
+		}
+		if (!hasToggle && isSidebarToggleChild(child)) {
+			hasToggle = true;
+			toggle = child?.props;
+			continue;
+		}
+		drawerSourceItems.push(child);
+		if (!hasBrand && isJsxElement(child) && child.type === NavBrand) {
+			brand = child;
+			hasBrand = true;
+			drawerItems ??= drawerSourceItems.slice(0, drawerSourceItems.length - 1);
+			continue;
+		}
+		drawerItems?.push(child);
+	}
 	return {
-		items: children.filter((_, index) => index !== toggleIndex),
-		toggle: toggleChild?.props
+		brand: hasBrand ? brand : void 0,
+		drawerItems: drawerItems ?? drawerSourceItems,
+		drawerSourceItems,
+		explicitPanelItems,
+		toggle
 	};
 }
 function renderSidebarMenuContents(label, icon, iconPlacement) {
@@ -67,9 +85,7 @@ function renderSidebarRailContents(label, collapsed, toggle) {
 function Sidebar(props) {
 	const { children, collapsed: controlledCollapsed, breakpoint, collapseIcon, collapseIconPlacement = "start", collapseLabel, collapsible, defaultCollapsed = false, id, "aria-label": ariaLabel, onCollapsedChange, class: className, ref, ...rest } = props;
 	const effectiveCollapseLabel = collapseLabel ?? (typeof ariaLabel === "string" ? ariaLabel : void 0) ?? "Menu";
-	const childItems = toChildArray(children);
-	const explicitPanelItems = childItems.filter((child) => isShellPanelChild(child, SidebarPanel));
-	const contentItems = childItems.filter((child) => !isShellPanelChild(child, SidebarPanel));
+	const sidebarChildren = splitSidebarChildren(toChildArray(children));
 	const isResponsive = breakpoint !== void 0;
 	const responsiveCollapsedState = state(isResponsive ? isSidebarCollapsed(breakpoint) : false);
 	const drawerOpenState = state(false);
@@ -101,10 +117,8 @@ function Sidebar(props) {
 		if (!isRailCollapsible) return;
 		setRailCollapsed(!isRailCollapsed);
 	};
-	const { items: drawerSourceItems, toggle: railToggleConfig } = splitSidebarToggle(contentItems);
-	const { brand: drawerBrand, items: drawerItems } = splitSidebarChildren(drawerSourceItems);
-	const desktopChildren = renderKeyedShellChildren(drawerSourceItems, "sidebar-desktop");
-	const drawerChildren = renderKeyedShellChildren(drawerItems, "sidebar-drawer");
+	const desktopChildren = renderKeyedShellChildren(sidebarChildren.drawerSourceItems, "sidebar-desktop");
+	const drawerChildren = renderKeyedShellChildren(sidebarChildren.drawerItems, "sidebar-drawer");
 	const contextValue = {
 		active: () => isResponsive,
 		collapseLabel: () => effectiveCollapseLabel,
@@ -124,9 +138,9 @@ function Sidebar(props) {
 		open: isDrawerOpen,
 		panelId
 	};
-	const panels = explicitPanelItems.length > 0 ? renderKeyedShellPanelChildren(explicitPanelItems, "sidebar-panel", panelContext) : isResponsive ? /* @__PURE__ */ jsx(SidebarPanel, {
+	const panels = sidebarChildren.explicitPanelItems.length > 0 ? renderKeyedShellPanelChildren(sidebarChildren.explicitPanelItems, "sidebar-panel", panelContext) : isResponsive ? /* @__PURE__ */ jsx(SidebarPanel, {
 		active: isResponsive,
-		brand: drawerBrand,
+		brand: sidebarChildren.brand,
 		collapseLabel: effectiveCollapseLabel,
 		onClose: closeDrawer,
 		onClick: closeDrawerOnNavActivation,
@@ -185,7 +199,7 @@ function Sidebar(props) {
 								"data-state": isRailCollapsed ? "collapsed" : "expanded",
 								type: "button",
 								onClick: toggleRail,
-								children: renderSidebarRailContents(effectiveCollapseLabel, isRailCollapsed, railToggleConfig)
+								children: renderSidebarRailContents(effectiveCollapseLabel, isRailCollapsed, sidebarChildren.toggle)
 							})
 						}) : null, desktopChildren]
 					}),