@yamada-ui/react 2.2.4 → 2.2.5-dev-20260716054036

package/dist/cjs/components/textarea/use-autosize.cjs

@@ -61,7 +61,9 @@ const calcRows = (el, sizingStyle, value, maxRows, minRows) => {
 	Object.assign(cloneEl.style, sizingStyle.style);
 	setHiddenStyle(cloneEl);
 	cloneEl.value = value;
-	document.body.appendChild(cloneEl);
+	const rootNode = el.getRootNode();
+	const container = (0, require_utils_index.utils_exports.isShadowRoot)(rootNode) ? rootNode : el.ownerDocument.body;
+	container.appendChild(cloneEl);
 	let rows;
 	if (cloneEl.scrollHeight) {
 		const rowHeight = sizingStyle.rowHeight;
@@ -70,7 +72,7 @@ const calcRows = (el, sizingStyle, value, maxRows, minRows) => {
 		const lineBreaks = (value.match(/\n/g) || []).length;
 		rows = Math.min(maxRows, Math.max(minRows, lineBreaks + 1));
 	}
-	document.body.removeChild(cloneEl);
+	container.removeChild(cloneEl);
 	return rows;
 };
 const useAutosize = ({ disabled = false, maxRows = Infinity, minRows = 2 } = {}) => {

package/dist/cjs/components/textarea/use-autosize.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-autosize.cjs","names":["mergeRefs"],"sources":["../../../../src/components/textarea/use-autosize.ts"],"sourcesContent":["\"use client\"\n\nimport type { PropGetter } from \"../../core\"\nimport { useCallback, useRef } from \"react\"\nimport {\n  addDomEvent,\n  createdDom,\n  handlerAll,\n  mergeRefs,\n  noop,\n  pickObject,\n  useSafeLayoutEffect,\n  useUpdateEffect,\n} from \"../../utils\"\n\nconst SIZING_STYLE_PROPERTIES = [\n  \"borderBottomWidth\",\n  \"borderLeftWidth\",\n  \"borderRightWidth\",\n  \"borderTopWidth\",\n  \"boxSizing\",\n  \"fontFamily\",\n  \"fontSize\",\n  \"fontStyle\",\n  \"fontWeight\",\n  \"letterSpacing\",\n  \"lineHeight\",\n  \"paddingBottom\",\n  \"paddingLeft\",\n  \"paddingRight\",\n  \"paddingTop\",\n  // non-standard\n  \"tabSize\",\n  \"textIndent\",\n  // non-standard\n  \"textRendering\",\n  \"textTransform\",\n  \"width\",\n  \"wordBreak\",\n] as const\n\nconst HIDDEN_STYLE = {\n  height: \"0\",\n  \"max-height\": \"none\",\n  \"min-height\": \"0\",\n  overflow: \"hidden\",\n  position: \"absolute\",\n  right: \"0\",\n  top: \"0\",\n  visibility: \"hidden\",\n  \"z-index\": \"-1000\",\n} as const\n\ntype SizingProperties = Extract<\n  (typeof SIZING_STYLE_PROPERTIES)[number],\n  keyof CSSStyleDeclaration\n>\n\ninterface SizingStyle {\n  border: number\n  padding: number\n  rowHeight: number\n  style: Pick<CSSStyleDeclaration, SizingProperties>\n}\n\nconst getSizingStyle = (el: HTMLElement): null | SizingStyle => {\n  const style = window.getComputedStyle(el) as CSSStyleDeclaration | undefined\n\n  if (style == null) return null\n\n  const computedStyle = pickObject(style, SIZING_STYLE_PROPERTIES)\n\n  if (computedStyle.boxSizing === \"\") return null\n\n  const padding =\n    parseFloat(computedStyle.paddingBottom) +\n    parseFloat(computedStyle.paddingTop)\n\n  const border =\n    parseFloat(computedStyle.borderBottomWidth) +\n    parseFloat(computedStyle.borderTopWidth)\n\n  const rowHeight = parseFloat(computedStyle.lineHeight)\n\n  return {\n    style: computedStyle,\n    border,\n    padding,\n    rowHeight,\n  }\n}\n\nconst setHiddenStyle = (el: HTMLElement) => {\n  Object.keys(HIDDEN_STYLE).forEach((key) => {\n    el.style.setProperty(\n      key,\n      HIDDEN_STYLE[key as keyof typeof HIDDEN_STYLE],\n      \"important\",\n    )\n  })\n}\n\nconst calcRows = (\n  el: HTMLTextAreaElement,\n  sizingStyle: SizingStyle,\n  value: string,\n  maxRows: number,\n  minRows: number,\n) => {\n  const cloneEl = el.cloneNode() as HTMLTextAreaElement\n\n  Object.assign(cloneEl.style, sizingStyle.style)\n\n  setHiddenStyle(cloneEl)\n\n  cloneEl.value = value\n\n  document.body.appendChild(cloneEl)\n\n  let rows: number\n\n  if (cloneEl.scrollHeight) {\n    const rowHeight = sizingStyle.rowHeight\n\n    rows = Math.min(\n      maxRows,\n      Math.max(minRows, Math.floor(cloneEl.scrollHeight / rowHeight)),\n    )\n  } else {\n    const lineBreaks = (value.match(/\\n/g) || []).length\n\n    rows = Math.min(maxRows, Math.max(minRows, lineBreaks + 1))\n  }\n\n  document.body.removeChild(cloneEl)\n\n  return rows\n}\n\nexport interface UseAutosizeProps {\n  /**\n   * If `true`, the Textarea height will not be adjusted.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Autosize up to maxRows rows.\n   *\n   * @default Infinity\n   */\n  maxRows?: number\n  /**\n   * Autosize up to minRows rows.\n   *\n   * @default 2\n   */\n  minRows?: number\n}\n\nexport const useAutosize = ({\n  disabled = false,\n  maxRows = Infinity,\n  minRows = 2,\n}: UseAutosizeProps = {}) => {\n  const ref = useRef<HTMLTextAreaElement>(null)\n  const beforeValueRef = useRef<string>(null)\n  const value = ref.current?.value ?? \"\"\n\n  const onResizeTextarea = useCallback(() => {\n    const el = ref.current\n\n    if (!el) return\n\n    let { placeholder, value } = el\n\n    if (value === beforeValueRef.current) return\n\n    beforeValueRef.current = value\n\n    value ||= placeholder || \"x\"\n\n    const sizingStyle = getSizingStyle(el)\n\n    if (!sizingStyle) return\n\n    const rows = calcRows(el, sizingStyle, value, maxRows, minRows)\n\n    el.rows = rows\n  }, [ref, maxRows, minRows])\n\n  const getTextareaProps: PropGetter<\"textarea\"> = useCallback(\n    (props = {}) => ({\n      ...props,\n      ref: mergeRefs(props.ref, ref),\n      style: { resize: !disabled ? \"none\" : undefined, ...props.style },\n      onChange: handlerAll(props.onChange, !disabled ? onResizeTextarea : noop),\n    }),\n    [ref, onResizeTextarea, disabled],\n  )\n\n  useSafeLayoutEffect(() => {\n    if (!createdDom() || disabled) return\n\n    onResizeTextarea()\n\n    const unsubscribeResize = addDomEvent(window, \"resize\", onResizeTextarea)\n    const unsubscribeLoadingdone = addDomEvent(\n      document.fonts,\n      \"loadingdone\",\n      onResizeTextarea,\n    )\n\n    return () => {\n      unsubscribeResize()\n      unsubscribeLoadingdone()\n    }\n  }, [])\n\n  useUpdateEffect(() => {\n    if (disabled) return\n\n    onResizeTextarea()\n  }, [value])\n\n  return { ref, getTextareaProps, onResizeTextarea }\n}\n\nexport type UseAutosizeReturn = ReturnType<typeof useAutosize>\n"],"mappings":"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"}
+{"version":3,"file":"use-autosize.cjs","names":["mergeRefs"],"sources":["../../../../src/components/textarea/use-autosize.ts"],"sourcesContent":["\"use client\"\n\nimport type { PropGetter } from \"../../core\"\nimport { useCallback, useRef } from \"react\"\nimport {\n  addDomEvent,\n  createdDom,\n  handlerAll,\n  isShadowRoot,\n  mergeRefs,\n  noop,\n  pickObject,\n  useSafeLayoutEffect,\n  useUpdateEffect,\n} from \"../../utils\"\n\nconst SIZING_STYLE_PROPERTIES = [\n  \"borderBottomWidth\",\n  \"borderLeftWidth\",\n  \"borderRightWidth\",\n  \"borderTopWidth\",\n  \"boxSizing\",\n  \"fontFamily\",\n  \"fontSize\",\n  \"fontStyle\",\n  \"fontWeight\",\n  \"letterSpacing\",\n  \"lineHeight\",\n  \"paddingBottom\",\n  \"paddingLeft\",\n  \"paddingRight\",\n  \"paddingTop\",\n  // non-standard\n  \"tabSize\",\n  \"textIndent\",\n  // non-standard\n  \"textRendering\",\n  \"textTransform\",\n  \"width\",\n  \"wordBreak\",\n] as const\n\nconst HIDDEN_STYLE = {\n  height: \"0\",\n  \"max-height\": \"none\",\n  \"min-height\": \"0\",\n  overflow: \"hidden\",\n  position: \"absolute\",\n  right: \"0\",\n  top: \"0\",\n  visibility: \"hidden\",\n  \"z-index\": \"-1000\",\n} as const\n\ntype SizingProperties = Extract<\n  (typeof SIZING_STYLE_PROPERTIES)[number],\n  keyof CSSStyleDeclaration\n>\n\ninterface SizingStyle {\n  border: number\n  padding: number\n  rowHeight: number\n  style: Pick<CSSStyleDeclaration, SizingProperties>\n}\n\nconst getSizingStyle = (el: HTMLElement): null | SizingStyle => {\n  const style = window.getComputedStyle(el) as CSSStyleDeclaration | undefined\n\n  if (style == null) return null\n\n  const computedStyle = pickObject(style, SIZING_STYLE_PROPERTIES)\n\n  if (computedStyle.boxSizing === \"\") return null\n\n  const padding =\n    parseFloat(computedStyle.paddingBottom) +\n    parseFloat(computedStyle.paddingTop)\n\n  const border =\n    parseFloat(computedStyle.borderBottomWidth) +\n    parseFloat(computedStyle.borderTopWidth)\n\n  const rowHeight = parseFloat(computedStyle.lineHeight)\n\n  return {\n    style: computedStyle,\n    border,\n    padding,\n    rowHeight,\n  }\n}\n\nconst setHiddenStyle = (el: HTMLElement) => {\n  Object.keys(HIDDEN_STYLE).forEach((key) => {\n    el.style.setProperty(\n      key,\n      HIDDEN_STYLE[key as keyof typeof HIDDEN_STYLE],\n      \"important\",\n    )\n  })\n}\n\nconst calcRows = (\n  el: HTMLTextAreaElement,\n  sizingStyle: SizingStyle,\n  value: string,\n  maxRows: number,\n  minRows: number,\n) => {\n  const cloneEl = el.cloneNode() as HTMLTextAreaElement\n\n  Object.assign(cloneEl.style, sizingStyle.style)\n\n  setHiddenStyle(cloneEl)\n\n  cloneEl.value = value\n\n  const rootNode = el.getRootNode()\n  const container = isShadowRoot(rootNode) ? rootNode : el.ownerDocument.body\n\n  container.appendChild(cloneEl)\n\n  let rows: number\n\n  if (cloneEl.scrollHeight) {\n    const rowHeight = sizingStyle.rowHeight\n\n    rows = Math.min(\n      maxRows,\n      Math.max(minRows, Math.floor(cloneEl.scrollHeight / rowHeight)),\n    )\n  } else {\n    const lineBreaks = (value.match(/\\n/g) || []).length\n\n    rows = Math.min(maxRows, Math.max(minRows, lineBreaks + 1))\n  }\n\n  container.removeChild(cloneEl)\n\n  return rows\n}\n\nexport interface UseAutosizeProps {\n  /**\n   * If `true`, the Textarea height will not be adjusted.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Autosize up to maxRows rows.\n   *\n   * @default Infinity\n   */\n  maxRows?: number\n  /**\n   * Autosize up to minRows rows.\n   *\n   * @default 2\n   */\n  minRows?: number\n}\n\nexport const useAutosize = ({\n  disabled = false,\n  maxRows = Infinity,\n  minRows = 2,\n}: UseAutosizeProps = {}) => {\n  const ref = useRef<HTMLTextAreaElement>(null)\n  const beforeValueRef = useRef<string>(null)\n  const value = ref.current?.value ?? \"\"\n\n  const onResizeTextarea = useCallback(() => {\n    const el = ref.current\n\n    if (!el) return\n\n    let { placeholder, value } = el\n\n    if (value === beforeValueRef.current) return\n\n    beforeValueRef.current = value\n\n    value ||= placeholder || \"x\"\n\n    const sizingStyle = getSizingStyle(el)\n\n    if (!sizingStyle) return\n\n    const rows = calcRows(el, sizingStyle, value, maxRows, minRows)\n\n    el.rows = rows\n  }, [ref, maxRows, minRows])\n\n  const getTextareaProps: PropGetter<\"textarea\"> = useCallback(\n    (props = {}) => ({\n      ...props,\n      ref: mergeRefs(props.ref, ref),\n      style: { resize: !disabled ? \"none\" : undefined, ...props.style },\n      onChange: handlerAll(props.onChange, !disabled ? onResizeTextarea : noop),\n    }),\n    [ref, onResizeTextarea, disabled],\n  )\n\n  useSafeLayoutEffect(() => {\n    if (!createdDom() || disabled) return\n\n    onResizeTextarea()\n\n    const unsubscribeResize = addDomEvent(window, \"resize\", onResizeTextarea)\n    const unsubscribeLoadingdone = addDomEvent(\n      document.fonts,\n      \"loadingdone\",\n      onResizeTextarea,\n    )\n\n    return () => {\n      unsubscribeResize()\n      unsubscribeLoadingdone()\n    }\n  }, [])\n\n  useUpdateEffect(() => {\n    if (disabled) return\n\n    onResizeTextarea()\n  }, [value])\n\n  return { ref, getTextareaProps, onResizeTextarea }\n}\n\nexport type UseAutosizeReturn = ReturnType<typeof useAutosize>\n"],"mappings":"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"}

package/dist/cjs/core/css/animation.cjs

@@ -4,10 +4,24 @@ const require_utils = require("./utils.cjs");
 let _emotion_react = require("@emotion/react");
 let _emotion_sheet = require("@emotion/sheet");
 //#region src/core/css/animation.ts
-const styleSheet = (0, require_utils_index.utils_exports.createdDom)() ? new _emotion_sheet.StyleSheet({
-	key: "css",
-	container: document.head
-}) : void 0;
+const styleSheets = /* @__PURE__ */ new WeakMap();
+const insertedKeyframes = /* @__PURE__ */ new WeakMap();
+const getStyleSheet = (rootNode) => {
+	if (!(0, require_utils_index.utils_exports.createdDom)()) return;
+	const container = (0, require_utils_index.utils_exports.isShadowRoot)(rootNode) ? rootNode : (0, require_utils_index.utils_exports.getDocument)(rootNode).head;
+	let styleSheet = styleSheets.get(container);
+	if (!styleSheet) {
+		styleSheet = new _emotion_sheet.StyleSheet({
+			key: "css",
+			container
+		});
+		styleSheets.set(container, styleSheet);
+	}
+	return {
+		container,
+		styleSheet
+	};
+};
 function transformAnimationValue(value) {
 	return Object.entries(value).reduce((prev, [key, value]) => {
 		if (key === "keyframes") prev._keyframes = value;
@@ -17,9 +31,21 @@ function transformAnimationValue(value) {
 		return prev;
 	}, {});
 }
-function injectKeyframes(value) {
+function injectKeyframes(value, rootNode) {
 	const { name, styles } = (0, _emotion_react.keyframes)(value);
-	styleSheet?.insert(styles);
+	const result = getStyleSheet(rootNode);
+	if (result) {
+		const { container, styleSheet } = result;
+		let names = insertedKeyframes.get(container);
+		if (!names) {
+			names = /* @__PURE__ */ new Set();
+			insertedKeyframes.set(container, names);
+		}
+		if (!names.has(name)) {
+			styleSheet.insert(styles);
+			names.add(name);
+		}
+	}
 	return name;
 }
 function animation(value, { css, system, theme }) {
@@ -43,7 +69,7 @@ function keyframes(value, { css, system, theme }) {
 	if (value == null) return value;
 	if ((0, require_utils_index.utils_exports.isObject)(value)) {
 		value = css?.(system, theme)(value);
-		return injectKeyframes(value);
+		return injectKeyframes(value, system.rootNode);
 	} else return value;
 }
 //#endregion

package/dist/cjs/core/css/animation.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"animation.cjs","names":["StyleSheet","globalValues","tokenToVar"],"sources":["../../../../src/core/css/animation.ts"],"sourcesContent":["\"use client\"\n\nimport type { Dict } from \"../../utils\"\nimport type { TransformOptions } from \"./utils\"\nimport { keyframes as emotionKeyframes } from \"@emotion/react\"\nimport { StyleSheet } from \"@emotion/sheet\"\nimport { createdDom, isObject } from \"../../utils\"\nimport { globalValues, tokenToVar } from \"./utils\"\n\nconst styleSheet = createdDom()\n  ? new StyleSheet({ key: \"css\", container: document.head })\n  : undefined\n\nfunction transformAnimationValue(value: Dict) {\n  return Object.entries(value).reduce<Dict>((prev, [key, value]) => {\n    if (key === \"keyframes\") prev._keyframes = value\n    else if (key === \"duration\") prev.animationDuration = value\n    else if (key === \"timingFunction\") prev.animationTimingFunction = value\n    else prev[key] = value\n\n    return prev\n  }, {})\n}\n\nexport function injectKeyframes(value: any) {\n  const { name, styles } = emotionKeyframes(value)\n\n  styleSheet?.insert(styles)\n\n  return name\n}\n\nexport function animation(\n  value: any,\n  { css, system, theme }: TransformOptions,\n) {\n  if (value == null || globalValues.has(value)) return value\n\n  if (isObject(value)) {\n    const {\n      animationDuration = \"0s\",\n      animationName,\n      animationTimingFunction = \"ease\",\n      delay = \"0s\",\n      direction = \"normal\",\n      fillMode = \"none\",\n      iterationCount = \"1\",\n      playState = \"running\",\n    } = css?.(system, theme)(transformAnimationValue(value)) ?? {}\n\n    return `${animationName} ${animationDuration} ${animationTimingFunction} ${delay} ${iterationCount} ${direction} ${fillMode} ${playState}`\n  } else if (value.includes(\",\")) {\n    value = value\n      .split(\",\")\n      .map((value: string) => {\n        value = value.trim()\n\n        value = tokenToVar(system)(\"animations\", value)\n\n        return value\n      })\n      .join(\",\")\n\n    return value\n  } else {\n    value = tokenToVar(system)(\"animations\", value)\n\n    return value\n  }\n}\n\nexport function keyframes(\n  value: any,\n  { css, system, theme }: TransformOptions,\n) {\n  if (value == null) return value\n\n  if (isObject(value)) {\n    value = css?.(system, theme)(value)\n\n    const name = injectKeyframes(value)\n\n    return name\n  } else {\n    return value\n  }\n}\n"],"mappings":";;;;;;AASA,MAAM,cAAA,GAAA,oBAAA,cAAA,WAAA,CAAwB,IAC1B,IAAIA,eAAAA,WAAW;CAAE,KAAK;CAAO,WAAW,SAAS;AAAK,CAAC,IACvD,KAAA;AAEJ,SAAS,wBAAwB,OAAa;CAC5C,OAAO,OAAO,QAAQ,KAAK,CAAC,CAAC,QAAc,MAAM,CAAC,KAAK,WAAW;EAChE,IAAI,QAAQ,aAAa,KAAK,aAAa;OACtC,IAAI,QAAQ,YAAY,KAAK,oBAAoB;OACjD,IAAI,QAAQ,kBAAkB,KAAK,0BAA0B;OAC7D,KAAK,OAAO;EAEjB,OAAO;CACT,GAAG,CAAC,CAAC;AACP;AAEA,SAAgB,gBAAgB,OAAY;CAC1C,MAAM,EAAE,MAAM,YAAA,GAAA,eAAA,UAAA,CAA4B,KAAK;CAE/C,YAAY,OAAO,MAAM;CAEzB,OAAO;AACT;AAEA,SAAgB,UACd,OACA,EAAE,KAAK,QAAQ,SACf;CACA,IAAI,SAAS,QAAQC,cAAAA,aAAa,IAAI,KAAK,GAAG,OAAO;CAErD,KAAA,GAAA,oBAAA,cAAA,SAAA,CAAa,KAAK,GAAG;EACnB,MAAM,EACJ,oBAAoB,MACpB,eACA,0BAA0B,QAC1B,QAAQ,MACR,YAAY,UACZ,WAAW,QACX,iBAAiB,KACjB,YAAY,cACV,MAAM,QAAQ,KAAK,CAAC,CAAC,wBAAwB,KAAK,CAAC,KAAK,CAAC;EAE7D,OAAO,GAAG,cAAc,GAAG,kBAAkB,GAAG,wBAAwB,GAAG,MAAM,GAAG,eAAe,GAAG,UAAU,GAAG,SAAS,GAAG;CACjI,OAAO,IAAI,MAAM,SAAS,GAAG,GAAG;EAC9B,QAAQ,MACL,MAAM,GAAG,CAAC,CACV,KAAK,UAAkB;GACtB,QAAQ,MAAM,KAAK;GAEnB,QAAQC,cAAAA,WAAW,MAAM,CAAC,CAAC,cAAc,KAAK;GAE9C,OAAO;EACT,CAAC,CAAC,CACD,KAAK,GAAG;EAEX,OAAO;CACT,OAAO;EACL,QAAQA,cAAAA,WAAW,MAAM,CAAC,CAAC,cAAc,KAAK;EAE9C,OAAO;CACT;AACF;AAEA,SAAgB,UACd,OACA,EAAE,KAAK,QAAQ,SACf;CACA,IAAI,SAAS,MAAM,OAAO;CAE1B,KAAA,GAAA,oBAAA,cAAA,SAAA,CAAa,KAAK,GAAG;EACnB,QAAQ,MAAM,QAAQ,KAAK,CAAC,CAAC,KAAK;EAIlC,OAFa,gBAAgB,KAEnB;CACZ,OACE,OAAO;AAEX"}
+{"version":3,"file":"animation.cjs","names":["StyleSheet","globalValues","tokenToVar"],"sources":["../../../../src/core/css/animation.ts"],"sourcesContent":["\"use client\"\n\nimport type { Dict } from \"../../utils\"\nimport type { TransformOptions } from \"./utils\"\nimport { keyframes as emotionKeyframes } from \"@emotion/react\"\nimport { StyleSheet } from \"@emotion/sheet\"\nimport { createdDom, getDocument, isObject, isShadowRoot } from \"../../utils\"\nimport { globalValues, tokenToVar } from \"./utils\"\n\nconst styleSheets = new WeakMap<Node, StyleSheet>()\nconst insertedKeyframes = new WeakMap<Node, Set<string>>()\n\nconst getStyleSheet = (rootNode?: Document | Node | ShadowRoot) => {\n  if (!createdDom()) return\n\n  const container = isShadowRoot(rootNode)\n    ? rootNode\n    : getDocument(rootNode).head\n\n  let styleSheet = styleSheets.get(container)\n\n  if (!styleSheet) {\n    styleSheet = new StyleSheet({ key: \"css\", container })\n\n    styleSheets.set(container, styleSheet)\n  }\n\n  return { container, styleSheet }\n}\n\nfunction transformAnimationValue(value: Dict) {\n  return Object.entries(value).reduce<Dict>((prev, [key, value]) => {\n    if (key === \"keyframes\") prev._keyframes = value\n    else if (key === \"duration\") prev.animationDuration = value\n    else if (key === \"timingFunction\") prev.animationTimingFunction = value\n    else prev[key] = value\n\n    return prev\n  }, {})\n}\n\nexport function injectKeyframes(\n  value: any,\n  rootNode?: Document | Node | ShadowRoot,\n) {\n  const { name, styles } = emotionKeyframes(value)\n  const result = getStyleSheet(rootNode)\n\n  if (result) {\n    const { container, styleSheet } = result\n\n    let names = insertedKeyframes.get(container)\n\n    if (!names) {\n      names = new Set()\n\n      insertedKeyframes.set(container, names)\n    }\n\n    if (!names.has(name)) {\n      styleSheet.insert(styles)\n\n      names.add(name)\n    }\n  }\n\n  return name\n}\n\nexport function animation(\n  value: any,\n  { css, system, theme }: TransformOptions,\n) {\n  if (value == null || globalValues.has(value)) return value\n\n  if (isObject(value)) {\n    const {\n      animationDuration = \"0s\",\n      animationName,\n      animationTimingFunction = \"ease\",\n      delay = \"0s\",\n      direction = \"normal\",\n      fillMode = \"none\",\n      iterationCount = \"1\",\n      playState = \"running\",\n    } = css?.(system, theme)(transformAnimationValue(value)) ?? {}\n\n    return `${animationName} ${animationDuration} ${animationTimingFunction} ${delay} ${iterationCount} ${direction} ${fillMode} ${playState}`\n  } else if (value.includes(\",\")) {\n    value = value\n      .split(\",\")\n      .map((value: string) => {\n        value = value.trim()\n\n        value = tokenToVar(system)(\"animations\", value)\n\n        return value\n      })\n      .join(\",\")\n\n    return value\n  } else {\n    value = tokenToVar(system)(\"animations\", value)\n\n    return value\n  }\n}\n\nexport function keyframes(\n  value: any,\n  { css, system, theme }: TransformOptions,\n) {\n  if (value == null) return value\n\n  if (isObject(value)) {\n    value = css?.(system, theme)(value)\n\n    const name = injectKeyframes(value, system.rootNode)\n\n    return name\n  } else {\n    return value\n  }\n}\n"],"mappings":";;;;;;AASA,MAAM,8BAAc,IAAI,QAA0B;AAClD,MAAM,oCAAoB,IAAI,QAA2B;AAEzD,MAAM,iBAAiB,aAA4C;CACjE,IAAI,EAAA,GAAA,oBAAA,cAAA,WAAA,CAAY,GAAG;CAEnB,MAAM,aAAA,GAAA,oBAAA,cAAA,aAAA,CAAyB,QAAQ,IACnC,YAAA,GAAA,oBAAA,cAAA,YAAA,CACY,QAAQ,CAAC,CAAC;CAE1B,IAAI,aAAa,YAAY,IAAI,SAAS;CAE1C,IAAI,CAAC,YAAY;EACf,aAAa,IAAIA,eAAAA,WAAW;GAAE,KAAK;GAAO;EAAU,CAAC;EAErD,YAAY,IAAI,WAAW,UAAU;CACvC;CAEA,OAAO;EAAE;EAAW;CAAW;AACjC;AAEA,SAAS,wBAAwB,OAAa;CAC5C,OAAO,OAAO,QAAQ,KAAK,CAAC,CAAC,QAAc,MAAM,CAAC,KAAK,WAAW;EAChE,IAAI,QAAQ,aAAa,KAAK,aAAa;OACtC,IAAI,QAAQ,YAAY,KAAK,oBAAoB;OACjD,IAAI,QAAQ,kBAAkB,KAAK,0BAA0B;OAC7D,KAAK,OAAO;EAEjB,OAAO;CACT,GAAG,CAAC,CAAC;AACP;AAEA,SAAgB,gBACd,OACA,UACA;CACA,MAAM,EAAE,MAAM,YAAA,GAAA,eAAA,UAAA,CAA4B,KAAK;CAC/C,MAAM,SAAS,cAAc,QAAQ;CAErC,IAAI,QAAQ;EACV,MAAM,EAAE,WAAW,eAAe;EAElC,IAAI,QAAQ,kBAAkB,IAAI,SAAS;EAE3C,IAAI,CAAC,OAAO;GACV,wBAAQ,IAAI,IAAI;GAEhB,kBAAkB,IAAI,WAAW,KAAK;EACxC;EAEA,IAAI,CAAC,MAAM,IAAI,IAAI,GAAG;GACpB,WAAW,OAAO,MAAM;GAExB,MAAM,IAAI,IAAI;EAChB;CACF;CAEA,OAAO;AACT;AAEA,SAAgB,UACd,OACA,EAAE,KAAK,QAAQ,SACf;CACA,IAAI,SAAS,QAAQC,cAAAA,aAAa,IAAI,KAAK,GAAG,OAAO;CAErD,KAAA,GAAA,oBAAA,cAAA,SAAA,CAAa,KAAK,GAAG;EACnB,MAAM,EACJ,oBAAoB,MACpB,eACA,0BAA0B,QAC1B,QAAQ,MACR,YAAY,UACZ,WAAW,QACX,iBAAiB,KACjB,YAAY,cACV,MAAM,QAAQ,KAAK,CAAC,CAAC,wBAAwB,KAAK,CAAC,KAAK,CAAC;EAE7D,OAAO,GAAG,cAAc,GAAG,kBAAkB,GAAG,wBAAwB,GAAG,MAAM,GAAG,eAAe,GAAG,UAAU,GAAG,SAAS,GAAG;CACjI,OAAO,IAAI,MAAM,SAAS,GAAG,GAAG;EAC9B,QAAQ,MACL,MAAM,GAAG,CAAC,CACV,KAAK,UAAkB;GACtB,QAAQ,MAAM,KAAK;GAEnB,QAAQC,cAAAA,WAAW,MAAM,CAAC,CAAC,cAAc,KAAK;GAE9C,OAAO;EACT,CAAC,CAAC,CACD,KAAK,GAAG;EAEX,OAAO;CACT,OAAO;EACL,QAAQA,cAAAA,WAAW,MAAM,CAAC,CAAC,cAAc,KAAK;EAE9C,OAAO;CACT;AACF;AAEA,SAAgB,UACd,OACA,EAAE,KAAK,QAAQ,SACf;CACA,IAAI,SAAS,MAAM,OAAO;CAE1B,KAAA,GAAA,oBAAA,cAAA,SAAA,CAAa,KAAK,GAAG;EACnB,QAAQ,MAAM,QAAQ,KAAK,CAAC,CAAC,KAAK;EAIlC,OAFa,gBAAgB,OAAO,OAAO,QAEjC;CACZ,OACE,OAAO;AAEX"}

package/dist/cjs/core/css/conditions.cjs

@@ -41,7 +41,7 @@ const attributes = {
 	/**
 	* Styles for when `data-mode` is applied to any parent of this component or element.
 	*/
-	_dark: ".dark &:not([data-mode]), [data-mode=dark] &:not([data-mode]), &[data-mode=dark]",
+	_dark: ":host([data-mode=dark]) &, .dark &:not([data-mode]), [data-mode=dark] &:not([data-mode]), &[data-mode=dark]",
 	/**
 	* The CSS `&:is([data-end], [data-group-end])` attribute selector.
 	*/
@@ -85,7 +85,7 @@ const attributes = {
 	/**
 	* Styles for when `data-mode` is applied to any parent of this component or element.
 	*/
-	_light: ".light &:not([data-mode]), [data-mode=light] &:not([data-mode]), &[data-mode=light]",
+	_light: ":host([data-mode=light]) &, .light &:not([data-mode]), [data-mode=light] &:not([data-mode]), &[data-mode=light]",
 	/**
 	* The CSS `&[data-loaded]` attribute selector.
 	*/

package/dist/cjs/core/css/conditions.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"conditions.cjs","names":[],"sources":["../../../../src/core/css/conditions.ts"],"sourcesContent":["import type { Length } from \"../../utils\"\nimport type { DOMElement } from \"../components\"\nimport type { CSSObject } from \"./index.types\"\n\ntype ReplaceSelector<\n  Y extends string[],\n  M extends string,\n  D extends string,\n> = Y extends [infer H extends string, ...infer R extends string[]]\n  ? `${H}${M extends `&${infer T}` ? `${T} ${D}` : `${M} ${D}`}${Length<R> extends 0 ? \"\" : `, `}${ReplaceSelector<R, M, D>}`\n  : \"\"\n\nconst toGroup = <Y extends string>(selector: Y) =>\n  [\"[role=group]\", \"[data-group]\", \".group\"]\n    .map((prefix) => `${prefix}${selector.slice(1)} &`)\n    .join(\", \") as ReplaceSelector<\n    [\"[role=group]\", \"[data-group]\", \".group\"],\n    Y,\n    \"&\"\n  >\n\nconst toPeer = <Y extends string>(selector?: Y) =>\n  [\n    ...[\"[data-peer]\", \".peer\"].flatMap((prefix) => [\n      selector\n        ? `&:has(~ ${prefix}${selector.slice(1)})`\n        : `&:has(~ ${prefix})`,\n      selector ? `${prefix}${selector.slice(1)} ~ &` : `${prefix} ~ &`,\n    ]),\n    ...(selector\n      ? [\"[data-peer]\", \".peer\"].flatMap((prefix) => [\n          `&:has(~ ${prefix} *${selector.slice(1)})`,\n          `${prefix}:has(*${selector.slice(1)}) ~ &`,\n        ])\n      : []),\n  ].join(\", \") as ReplaceSelector<[\"[data-peer]\", \".peer\"], Y, \"~ &\">\n\nexport type AnySelector =\n  | `${string}${\" \" | \"#\" | \"*\" | \"+\" | \",\" | \".\" | \":\" | \">\" | \"@\" | \"[\" | \"]\" | \"~\"}${string}`\n  | DOMElement\n\nexport const attributes = {\n  /**\n   * The CSS `&[data-inactive]` attribute selector.\n   */\n  _inactive: \"&[data-inactive]\",\n  /**\n   * The CSS `&[data-accept]` attribute selector.\n   */\n  _accept: \"&[data-accept]\",\n  /**\n   * The CSS `&[data-animated]` attribute selector.\n   */\n  _animated: \"&[data-animated]\",\n  /**\n   * The CSS `&[data-between]` attribute selector.\n   */\n  _between: \"&[data-between]\",\n  /**\n   * The CSS `&:is([data-center], [data-group-center])` attribute selector.\n   */\n  _center: \"&:is([data-center], [data-group-center])\",\n  /**\n   * The CSS `&:is([data-collapsed], :not([data-expanded]), [aria-expanded=false])` attribute selector.\n   */\n  _collapsed:\n    \"&:is([data-collapsed], :not([data-expanded]), [aria-expanded=false])\",\n  /**\n   * The CSS `&[data-complete]` attribute selector.\n   */\n  _complete: \"&[data-complete]\",\n  /**\n   * The CSS `&:is([aria-current], [data-current]):not([aria-current='false'])` attribute selector.\n   */\n  _current: \"&:is([aria-current], [data-current]):not([aria-current='false'])\",\n  /**\n   * Styles for when `data-mode` is applied to any parent of this component or element.\n   */\n  _dark:\n    \".dark &:not([data-mode]), [data-mode=dark] &:not([data-mode]), &[data-mode=dark]\",\n  /**\n   * The CSS `&:is([data-end], [data-group-end])` attribute selector.\n   */\n  _end: \"&:is([data-end], [data-group-end])\",\n  /**\n   * The CSS `&:is([data-expanded], [aria-expanded=true])` attribute selector.\n   */\n  _expanded: \"&:is([data-expanded], [aria-expanded=true])\",\n  /**\n   * The CSS `&[data-fallback]` attribute selector.\n   */\n  _fallback: \"&[data-fallback]\",\n  /**\n   * The CSS `&[data-filled]` attribute selector.\n   */\n  _filled: \"&[data-filled]\",\n  /**\n   * The CSS `&:is([data-grabbed], [aria-grabbed=true])` attribute selector.\n   */\n  _grabbed: \"&:is([data-grabbed], [aria-grabbed=true])\",\n  /**\n   * The CSS `&:is([role=grid], [data-grid])` attribute selector.\n   */\n  _grid: \"&:is([role=grid], [data-grid])\",\n  /**\n   * The CSS `&:is(:has(> [role=group]), :has(> [data-group]), :has(> .group))` attribute selector.\n   */\n  _hasGroup: \"&:is(:has(> [role=group]), :has(> [data-group]), :has(> .group))\",\n  /**\n   * The CSS `&:has(> [data-icon])` attribute selector.\n   */\n  _hasIcon: \"&:has(> [data-icon])\",\n  /**\n   * The CSS `&[data-idle]` attribute selector.\n   */\n  _idle: \"&[data-idle]\",\n  /**\n   * The CSS `&[data-incomplete]` attribute selector.\n   */\n  _incomplete: \"&[data-incomplete]\",\n  /**\n   * Styles for when `data-mode` is applied to any parent of this component or element.\n   */\n  _light:\n    \".light &:not([data-mode]), [data-mode=light] &:not([data-mode]), &[data-mode=light]\",\n  /**\n   * The CSS `&[data-loaded]` attribute selector.\n   */\n  _loaded: \"&[data-loaded]\",\n  /**\n   * The CSS `&:is([data-loading], [aria-busy=true])` attribute selector.\n   */\n  _loading: \"&:is([data-loading], [aria-busy=true])\",\n  /**\n   * The CSS `&[dir=ltr]` attribute selector.\n   */\n  _ltr: \"[dir=ltr] &\",\n  /**\n   * The CSS `&[hidden]` attribute selector.\n   */\n  _nativeHidden: \"&[hidden]\",\n  /**\n   * The CSS `&[data-not-allowed]` attribute selector.\n   */\n  _notAllowed: \"&[data-not-allowed]\",\n  /**\n   * The CSS `&[aria-current='false']` attribute selector.\n   */\n  _notCurrent: \"&:not([aria-current], [data-current]), &[aria-current='false']\",\n  /**\n   * The CSS `&:not([data-fallback])` attribute selector.\n   */\n  _notFallback: \"&:not([data-fallback])\",\n  /**\n   * The CSS `&:not(:has(> [role=group]), :has(> [data-group]), :has(> .group))` attribute selector.\n   */\n  _notHasGroup:\n    \"&:not(:has(> [role=group]), :has(> [data-group]), :has(> .group))\",\n  /**\n   * The CSS `&:not([data-selected]):not([aria-selected=true])` attribute selector.\n   */\n  _notSelected: \"&:not([data-selected]):not([aria-selected=true])\",\n  /**\n   * The CSS `&[data-numeric]` attribute selector.\n   */\n  _numeric: \"&[data-numeric]\",\n  /**\n   * The CSS `&:is([open], [data-open])` attribute selector.\n   */\n  _open: \"&:is([open], [data-open])\",\n  /**\n   * The CSS `&:is([data-pressed], [aria-pressed=true])` attribute selector.\n   */\n  _pressed: \"&:is([data-pressed], [aria-pressed=true])\",\n  /**\n   * The CSS `&:is([data-range])` attribute selector.\n   */\n  _range: \"&:is([data-range])\",\n  /**\n   * The CSS `&[data-reject]` attribute selector.\n   */\n  _reject: \"&[data-reject]\",\n  /**\n   * The CSS `& .ui-ripple` attribute selector.\n   */\n  _ripple: \"& .ui-ripple\",\n  /**\n   * The CSS `&[dir=rtl]` attribute selector.\n   */\n  _rtl: \"[dir=rtl] &\",\n  /**\n   * The CSS `&:is([data-start], [data-group-start])` attribute selector.\n   */\n  _start: \"&:is([data-start], [data-group-start])\",\n  /**\n   * The CSS `&:is([data-selected], [aria-selected=true])` attribute selector.\n   */\n  _selected: \"&:is([data-selected], [aria-selected=true])\",\n  /**\n   * The CSS `&:is([hidden], [data-hidden])` attribute selector.\n   */\n  _hidden: \"&:is([hidden], [data-hidden])\",\n  /**\n   * The CSS `&[data-never]` attribute selector.\n   */\n  _never: \"&[data-never]\",\n} as const\n\nexport type Attributes = typeof attributes\nexport type AttributeProperty = keyof Attributes\nexport type AttributeProps = {\n  [K in AttributeProperty]?: CSSObject\n}\n\nexport const attributeProperties = Object.keys(\n  attributes,\n) as AttributeProperty[]\nexport const attributeSelectors = Object.values(attributes)\n\nexport const pseudoElements = {\n  /**\n   * The CSS `&::after` pseudo-element.\n   */\n  _after: \"&::after\",\n  /**\n   * The CSS `&::backdrop` pseudo-element.\n   */\n  _backdrop: \"&::backdrop\",\n  /**\n   * The CSS `&::before` pseudo-element.\n   */\n  _before: \"&::before\",\n  /**\n   * The CSS `&::cue` pseudo-element.\n   */\n  _cue: \"&::cue\",\n  /**\n   * The CSS `&::cue-region` pseudo-element.\n   */\n  _cueRegion: \"&::cue-region\",\n  /**\n   * The CSS `&::details-content` pseudo-element.\n   */\n  _detailsContent: \"&::details-content\",\n  /**\n   * The CSS `&::file-selector-button` pseudo-element.\n   */\n  _fileSelector: \"&::file-selector-button\",\n  /**\n   * The CSS `&::first-letter` pseudo-element.\n   */\n  _firstLetter: \"&::first-letter\",\n  /**\n   * The CSS `&::first-line` pseudo-element.\n   */\n  _firstLine: \"&::first-line\",\n  /**\n   * The CSS `&::marker` pseudo-element.\n   */\n  _marker: \"&::marker\",\n  /**\n   * The CSS `&::placeholder, &[data-placeholder]` pseudo-element.\n   */\n  _placeholder: \"&::placeholder, &[data-placeholder]\",\n  /**\n   * The CSS `&::-webkit-scrollbar, &[data-scrollbar]` pseudo-element.\n   */\n  _scrollbar: \"&::-webkit-scrollbar, &[data-scrollbar]\",\n  /**\n   * The CSS `&::-webkit-scrollbar-button` pseudo-element.\n   */\n  _scrollbarButton: \"&::-webkit-scrollbar-button\",\n  /**\n   * The CSS `&::-webkit-scrollbar-corner` pseudo-element.\n   */\n  _scrollbarCorner: \"&::-webkit-scrollbar-corner\",\n  /**\n   * The CSS `&::-webkit-scrollbar-thumb` pseudo-element.\n   */\n  _scrollbarThumb: \"&::-webkit-scrollbar-thumb\",\n  /**\n   * The CSS `&::-webkit-scrollbar-track` pseudo-element.\n   */\n  _scrollbarTrack: \"&::-webkit-scrollbar-track\",\n  /**\n   * The CSS `&::-webkit-scrollbar-track-piece` pseudo-element.\n   */\n  _scrollbarTrackPiece: \"&::-webkit-scrollbar-track-piece\",\n  /**\n   * The CSS `&::selection` pseudo-element.\n   */\n  _selection: \"&::selection\",\n} as const\n\nexport type PseudoElements = typeof pseudoElements\nexport type PseudoElementProperty = keyof PseudoElements\nexport type PseudoElementProps = {\n  [K in PseudoElementProperty]?: CSSObject\n}\n\nexport const pseudoElementProperties = Object.keys(\n  pseudoElements,\n) as PseudoElementProperty[]\nexport const pseudoElementSelectors = Object.values(pseudoElements)\n\nexport const pseudoClasses = {\n  /**\n   * The CSS `&:is([data-activedescendant])` pseudo-class.\n   */\n  _activedescendant: \"&:is([data-activedescendant])\",\n  /**\n   * The CSS `:any-link` pseudo-class.\n   */\n  _anyLink: \"&:is(:any-link, [data-any-link])\",\n  /**\n   * The CSS `&:autofill` pseudo-class.\n   */\n  _autofill: \"&:autofill\",\n  /**\n   * The CSS `&:is(:blank, [data-blank])` pseudo-class.\n   */\n  _blank: \"&:is(:blank, [data-blank])\",\n  /**\n   * The CSS `&:is(:checked, [data-checked], [aria-checked=true])` pseudo-class.\n   */\n  _checked: \"&:is(:checked, [data-checked], [aria-checked=true])\",\n  /**\n   * The CSS `& > *` child combinator selector.\n   */\n  _child: \"& > *\",\n  /**\n   * The CSS `& > [data-content]` child combinator attribute selector.\n   */\n  _content: \"& > [data-content]\",\n  /**\n   * The CSS `&:default` pseudo-class.\n   */\n  _default: \"&:default\",\n  /**\n   * The CSS `&:empty` pseudo-class.\n   */\n  _empty: \"&:empty\",\n  /**\n   * The CSS `&:is(:enabled, [data-enabled])` pseudo-class.\n   */\n  _enabled: \"&:is(:enabled, [data-enabled])\",\n  /**\n   * The CSS `&:nth-of-type(even)` pseudo-class.\n   */\n  _even: \"&:nth-of-type(even)\",\n  /**\n   * The CSS `&:first-of-type` pseudo-class.\n   */\n  _first: \"&:first-of-type\",\n  /**\n   * The CSS `& > *:first-child` pseudo-class.\n   */\n  _firstChild: \"& > *:first-child\",\n  /**\n   * The CSS `&:not(:focus-within, [data-focus-within])` pseudo-class.\n   */\n  _focusWithin: \"&:not(:focus-within, [data-focus-within])\",\n  /**\n   * The CSS `&:fullscreen` pseudo-class.\n   */\n  _fullScreen: \"&:fullscreen\",\n  /**\n   * The CSS `&:is([data-orientation=horizontal], [aria-orientation=horizontal])` pseudo-class.\n   */\n  _horizontal:\n    \"&:is([data-orientation=horizontal], [aria-orientation=horizontal])\",\n  /**\n   * The CSS `&:where(svg:not([data-loading])), & > [data-icon]` pseudo-class.\n   */\n  _icon: \"&:where(svg:not([data-loading])), & > [data-icon]\",\n  /**\n   * The CSS `&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed])` pseudo-class.\n   */\n  _indeterminate:\n    \"&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed])\",\n  /**\n   * The CSS `& > [data-indicator]` pseudo-class.\n   */\n  _indicator: \"& > [data-indicator]\",\n  /**\n   * The CSS `&:is(:in-range, [data-in-range])` pseudo-class.\n   */\n  _inRange: \"&:is(:in-range, [data-in-range])\",\n  /**\n   * The CSS `&:last-of-type` pseudo-class.\n   */\n  _last: \"&:last-of-type\",\n  /**\n   * The CSS `& > *:last-child` pseudo-class.\n   */\n  _lastChild: \"& > *:last-child\",\n  /**\n   * The CSS `&:is(:link, [data-link])` pseudo-class.\n   */\n  _link: \"&:is(:link, [data-link])\",\n  /**\n   * The CSS `&:modal` pseudo-class.\n   */\n  _modal: \"&:modal\",\n  /**\n   * The CSS `&:active` pseudo-class.\n   */\n  _nativeActive: \"&:active\",\n  /**\n   * The CSS `&:checked` pseudo-class.\n   */\n  _nativeChecked: \"&:checked\",\n  /**\n   * The CSS `&:is(disabled, [disabled])` pseudo-class.\n   */\n  _nativeDisabled: \"&:is(disabled, [disabled])\",\n  /**\n   * The CSS `&:focus` pseudo-class.\n   */\n  _nativeFocus: \"&:focus\",\n  /**\n   * The CSS `&:focus-visible` pseudo-class.\n   */\n  _nativeFocusVisible: \"&:focus-visible\",\n  /**\n   * The CSS `&:focus-within` pseudo-class.\n   */\n  _nativeFocusWithin: \"&:focus-within\",\n  /**\n   * The CSS `&:hover` pseudo-class.\n   */\n  _nativeHover: \"&:hover\",\n  /**\n   * The CSS `&:is([readonly], [aria-readonly=true])` pseudo-class.\n   */\n  _nativeReadOnly: \"&:is([readonly], [aria-readonly=true])\",\n  /**\n   * The CSS `&:target` pseudo-class.\n   */\n  _nativeTarget: \"&:target\",\n  /**\n   * The CSS `&:valid` pseudo-class.\n   */\n  _nativeValid: \"&:valid\",\n  /**\n   * The CSS `&:not(:checked):not([data-checked]):not([aria-checked=true])` pseudo-class.\n   */\n  _notChecked: \"&:not(:checked):not([data-checked]):not([aria-checked=true])\",\n  /**\n   * The CSS `&:not(:empty)` pseudo-class.\n   */\n  _notEmpty: \"&:not(:empty)\",\n  /**\n   * The CSS `&:not(:first-of-type)` pseudo-class.\n   */\n  _notFirst: \"&:not(:first-of-type)\",\n  /**\n   * The CSS `& > *:not(:first-child)` pseudo-class.\n   */\n  _notFirstChild: \"& > *:not(:first-child)\",\n  /**\n   * The CSS `&:not(:last-of-type)` pseudo-class.\n   */\n  _notLast: \"&:not(:last-of-type)\",\n  /**\n   * The CSS `& > *:not(:last-child)` pseudo-class.\n   */\n  _notLastChild: \"& > *:not(:last-child)\",\n  /**\n   * The CSS `&:not(:target)` pseudo-class.\n   */\n  _notTarget: \"&:not(:target)\",\n  /**\n   * The CSS `&:nth-of-type(odd)` pseudo-class.\n   */\n  _odd: \"&:nth-of-type(odd)\",\n  /**\n   * The CSS `&:only-of-type` pseudo-class.\n   */\n  _only: \"&:only-of-type\",\n  /**\n   * The CSS `&:only-child` pseudo-class.\n   */\n  _onlyChild: \"&:only-child\",\n  /**\n   * The CSS `&:is(:optional, [data-optional])` pseudo-class.\n   */\n  _optional: \"&:is(:optional, [data-optional])\",\n  /**\n   * The CSS `&:is(:out-of-range, [data-out-of-range])` pseudo-class.\n   */\n  _outRange: \"&:is(:out-of-range, [data-out-of-range])\",\n  /**\n   * The CSS `&:is(:paused, [data-paused])` pseudo-class.\n   */\n  _paused: \"&:is(:paused, [data-paused])\",\n  /**\n   * The CSS `&:picture-in-picture` pseudo-class.\n   */\n  _picture: \"&:picture-in-picture\",\n  /**\n   * The CSS `&:placeholder-shown` pseudo-class.\n   */\n  _placeholderShown: \"&:placeholder-shown\",\n  /**\n   * The CSS `&:is(:playing, [data-playing])` pseudo-class.\n   */\n  _playing: \"&:is(:playing, [data-playing])\",\n  /**\n   * The CSS `&:popover-open` pseudo-class.\n   */\n  _popoverOpen: \"&:popover-open\",\n  /**\n   * The CSS `&:is(:read-write, [data-read-write])` pseudo-class.\n   */\n  _readWrite: \"&:is(:read-write, [data-read-write])\",\n  /**\n   * The CSS `&:is(:required, [required])` pseudo-class.\n   */\n  _required: \"&:is(:required, [required])\",\n  /**\n   * The CSS `&:is(:target, [data-target])` pseudo-class.\n   */\n  _target: \"&:is(:target, [data-target])\",\n  /**\n   * The CSS `&:is(:user-invalid, [data-user-invalid])` pseudo-class.\n   */\n  _userInvalid: \"&:is(:user-invalid, [data-user-invalid])\",\n  /**\n   * The CSS `&:is(:valid, [data-valid])` pseudo-class.\n   */\n  _valid: \"&:is(:valid, [data-valid])\",\n  /**\n   * The CSS `&:is([data-orientation=vertical], [aria-orientation=vertical])` pseudo-class.\n   */\n  _vertical: \"&:is([data-orientation=vertical], [aria-orientation=vertical])\",\n  /**\n   * The CSS `&:visited` pseudo-class.\n   */\n  _visited: \"&:visited\",\n  /**\n   * The CSS `&:is(:hover, [data-hover])` pseudo-class.\n   */\n  _hover:\n    \"&:is(:hover, [data-hover]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled])\",\n  /**\n   * The CSS `&:is(:active, [data-active])` pseudo-class.\n   */\n  _active:\n    \"&:is(:active, [data-active]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled])\",\n  /**\n   * The CSS `&:is(:focus, [data-focus])` pseudo-class.\n   */\n  _focus: \"&:is(:focus, [data-focus])\",\n  /**\n   * The CSS `&:is(:focus-visible, [data-focus-visible])` pseudo-class.\n   */\n  _focusVisible: \"&:is(:focus-visible, [data-focus-visible])\",\n  /**\n   * The CSS `&:is([data-invalid], [aria-invalid=true])` attribute selector.\n   */\n  _invalid: \"&:is([data-invalid], [aria-invalid=true])\",\n  /**\n   * The CSS `&:is([readonly], [data-readonly], [aria-readonly=true])` pseudo-class.\n   */\n  _readOnly: \"&:is([readonly], [data-readonly], [aria-readonly=true])\",\n  /**\n   * The CSS `&:is(:disabled, [disabled], [data-disabled])` pseudo-class.\n   */\n  _disabled: \"&:is(:disabled, [disabled], [data-disabled])\",\n} as const\n\nexport type PseudoClasses = typeof pseudoClasses\nexport type PseudoClassProperty = keyof PseudoClasses\nexport type PseudoClassProps = {\n  [K in PseudoClassProperty]?: CSSObject\n}\n\nexport const pseudoClassProperties = Object.keys(\n  pseudoClasses,\n) as PseudoClassProperty[]\nexport const pseudoClassSelectors = Object.values(pseudoClasses)\n\nexport const groupAttributes = {\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is accepted.\n   */\n  _groupAccept: toGroup(attributes._accept),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is activedescendant.\n   */\n  _groupActivedescendant: toGroup(pseudoClasses._activedescendant),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is animated.\n   */\n  _groupAnimated: toGroup(attributes._animated),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is blank.\n   */\n  _groupBlank: toGroup(pseudoClasses._blank),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is checked.\n   */\n  _groupChecked: toGroup(pseudoClasses._checked),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is collapsed.\n   */\n  _groupCollapsed: toGroup(attributes._collapsed),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is complete.\n   */\n  _groupComplete: toGroup(attributes._complete),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is current.\n   */\n  _groupCurrent: toGroup(attributes._current),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is enabled.\n   */\n  _groupEnabled: toGroup(pseudoClasses._enabled),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is expanded.\n   */\n  _groupExpanded: toGroup(attributes._expanded),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is focus-within.\n   */\n  _groupFocusWithin: toGroup(pseudoClasses._focusWithin),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is grabbed.\n   */\n  _groupGrabbed: toGroup(attributes._grabbed),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is horizontal.\n   */\n  _groupHorizontal: toGroup(pseudoClasses._horizontal),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is idle.\n   */\n  _groupIdle: toGroup(attributes._idle),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is incomplete.\n   */\n  _groupIncomplete: toGroup(attributes._incomplete),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is loaded.\n   */\n  _groupLoaded: toGroup(attributes._loaded),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is loading.\n   */\n  _groupLoading: toGroup(attributes._loading),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is open.\n   */\n  _groupOpen: toGroup(attributes._open),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is optional.\n   */\n  _groupOptional: toGroup(pseudoClasses._optional),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` has a placeholder shown.\n   */\n  _groupPlaceholderShown: toGroup(pseudoClasses._placeholderShown),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is pressed.\n   */\n  _groupPressed: toGroup(attributes._pressed),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is range.\n   */\n  _groupRange: toGroup(attributes._range),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is read-write.\n   */\n  _groupReadWrite: toGroup(pseudoClasses._readWrite),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is rejected.\n   */\n  _groupReject: toGroup(attributes._reject),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is required.\n   */\n  _groupRequired: toGroup(pseudoClasses._required),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is user-invalid.\n   */\n  _groupUserInvalid: toGroup(pseudoClasses._userInvalid),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is valid.\n   */\n  _groupValid: toGroup(pseudoClasses._valid),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is vertical.\n   */\n  _groupVertical: toGroup(pseudoClasses._vertical),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is hovered.\n   */\n  _groupHover: toGroup(pseudoClasses._hover),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is active.\n   */\n  _groupActive: toGroup(pseudoClasses._active),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is focused.\n   */\n  _groupFocus: toGroup(pseudoClasses._focus),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is focused-visible.\n   */\n  _groupFocusVisible: toGroup(pseudoClasses._focusVisible),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is selected.\n   */\n  _groupSelected: toGroup(attributes._selected),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is invalid.\n   */\n  _groupInvalid: toGroup(pseudoClasses._invalid),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is read-only.\n   */\n  _groupReadOnly: toGroup(pseudoClasses._readOnly),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is disabled.\n   */\n  _groupDisabled: toGroup(pseudoClasses._disabled),\n} as const\n\nexport type GroupAttributes = typeof groupAttributes\nexport type GroupAttributeProperty = keyof GroupAttributes\nexport type GroupAttributeProps = {\n  [K in GroupAttributeProperty]?: CSSObject\n}\n\nexport const groupAttributeProperties = Object.keys(\n  groupAttributes,\n) as GroupAttributeProperty[]\nexport const groupAttributeSelectors = Object.values(groupAttributes)\n\nexport const peerAttributes = {\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` exists.\n   */\n  _peer: toPeer(),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is accepted.\n   */\n  _peerAccept: toPeer(attributes._accept),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is animated.\n   */\n  _peerAnimated: toPeer(attributes._animated),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is blank.\n   */\n  _peerBlank: toPeer(pseudoClasses._blank),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is checked.\n   */\n  _peerChecked: toPeer(pseudoClasses._checked),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is collapsed.\n   */\n  _peerCollapsed: toPeer(attributes._collapsed),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is complete.\n   */\n  _peerComplete: toPeer(attributes._complete),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is current.\n   */\n  _peerCurrent: toPeer(attributes._current),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is enabled.\n   */\n  _peerEnabled: toPeer(pseudoClasses._enabled),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is expanded.\n   */\n  _peerExpanded: toPeer(attributes._expanded),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is focus-within.\n   */\n  _peerFocusWithin: toPeer(pseudoClasses._focusWithin),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is grabbed.\n   */\n  _peerGrabbed: toPeer(attributes._grabbed),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is horizontal.\n   */\n  _peerHorizontal: toPeer(pseudoClasses._horizontal),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is idle.\n   */\n  _peerIdle: toPeer(attributes._idle),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is incomplete.\n   */\n  _peerIncomplete: toPeer(attributes._incomplete),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is loaded.\n   */\n  _peerLoaded: toPeer(attributes._loaded),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is loading.\n   */\n  _peerLoading: toPeer(attributes._loading),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is optional.\n   */\n  _peerOptional: toPeer(pseudoClasses._optional),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` has a placeholder shown.\n   */\n  _peerPlaceholderShown: toPeer(pseudoClasses._placeholderShown),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is pressed.\n   */\n  _peerPressed: toPeer(attributes._pressed),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is range.\n   */\n  _peerRange: toPeer(attributes._range),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is read-write.\n   */\n  _peerReadWrite: toPeer(pseudoClasses._readWrite),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is rejected.\n   */\n  _peerReject: toPeer(attributes._reject),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is required.\n   */\n  _peerRequired: toPeer(pseudoClasses._required),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is user-invalid.\n   */\n  _peerUserInvalid: toPeer(pseudoClasses._userInvalid),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is valid.\n   */\n  _peerValid: toPeer(pseudoClasses._valid),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is vertical.\n   */\n  _peerVertical: toPeer(pseudoClasses._vertical),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is hovered.\n   */\n  _peerHover: toPeer(pseudoClasses._hover),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is active.\n   */\n  _peerActive: toPeer(pseudoClasses._active),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is focused.\n   */\n  _peerFocus: toPeer(pseudoClasses._focus),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is focused-visible.\n   */\n  _peerFocusVisible: toPeer(pseudoClasses._focusVisible),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is selected.\n   */\n  _peerSelected: toPeer(attributes._selected),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is invalid.\n   */\n  _peerInvalid: toPeer(pseudoClasses._invalid),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is read-only.\n   */\n  _peerReadOnly: toPeer(pseudoClasses._readOnly),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is disabled.\n   */\n  _peerDisabled: toPeer(pseudoClasses._disabled),\n} as const\n\nexport type PeerAttributes = typeof peerAttributes\nexport type PeerAttributeProperty = keyof PeerAttributes\nexport type PeerAttributeProps = {\n  [K in PeerAttributeProperty]?: CSSObject\n}\n\nexport const peerAttributeProperties = Object.keys(\n  peerAttributes,\n) as PeerAttributeProperty[]\nexport const peerAttributeSelectors = Object.values(peerAttributes)\n\nexport const conditions = {\n  ...pseudoElements,\n  ...attributes,\n  ...pseudoClasses,\n  ...groupAttributes,\n  ...peerAttributes,\n} as const\n\nexport type Conditions = typeof conditions\nexport type ConditionProperty = keyof Conditions\nexport type ConditionSelector = Conditions[ConditionProperty]\nexport type ConditionProps = {\n  [K in keyof Conditions]?: CSSObject\n}\n\nexport const conditionProperties = Object.keys(\n  conditions,\n) as ConditionProperty[]\nexport const conditionSelectors = Object.values(conditions)\n\nexport function getCondition(key: string) {\n  return key in conditions ? conditions[key as ConditionProperty] : key\n}\n"],"mappings":"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"}
+{"version":3,"file":"conditions.cjs","names":[],"sources":["../../../../src/core/css/conditions.ts"],"sourcesContent":["import type { Length } from \"../../utils\"\nimport type { DOMElement } from \"../components\"\nimport type { CSSObject } from \"./index.types\"\n\ntype ReplaceSelector<\n  Y extends string[],\n  M extends string,\n  D extends string,\n> = Y extends [infer H extends string, ...infer R extends string[]]\n  ? `${H}${M extends `&${infer T}` ? `${T} ${D}` : `${M} ${D}`}${Length<R> extends 0 ? \"\" : `, `}${ReplaceSelector<R, M, D>}`\n  : \"\"\n\nconst toGroup = <Y extends string>(selector: Y) =>\n  [\"[role=group]\", \"[data-group]\", \".group\"]\n    .map((prefix) => `${prefix}${selector.slice(1)} &`)\n    .join(\", \") as ReplaceSelector<\n    [\"[role=group]\", \"[data-group]\", \".group\"],\n    Y,\n    \"&\"\n  >\n\nconst toPeer = <Y extends string>(selector?: Y) =>\n  [\n    ...[\"[data-peer]\", \".peer\"].flatMap((prefix) => [\n      selector\n        ? `&:has(~ ${prefix}${selector.slice(1)})`\n        : `&:has(~ ${prefix})`,\n      selector ? `${prefix}${selector.slice(1)} ~ &` : `${prefix} ~ &`,\n    ]),\n    ...(selector\n      ? [\"[data-peer]\", \".peer\"].flatMap((prefix) => [\n          `&:has(~ ${prefix} *${selector.slice(1)})`,\n          `${prefix}:has(*${selector.slice(1)}) ~ &`,\n        ])\n      : []),\n  ].join(\", \") as ReplaceSelector<[\"[data-peer]\", \".peer\"], Y, \"~ &\">\n\nexport type AnySelector =\n  | `${string}${\" \" | \"#\" | \"*\" | \"+\" | \",\" | \".\" | \":\" | \">\" | \"@\" | \"[\" | \"]\" | \"~\"}${string}`\n  | DOMElement\n\nexport const attributes = {\n  /**\n   * The CSS `&[data-inactive]` attribute selector.\n   */\n  _inactive: \"&[data-inactive]\",\n  /**\n   * The CSS `&[data-accept]` attribute selector.\n   */\n  _accept: \"&[data-accept]\",\n  /**\n   * The CSS `&[data-animated]` attribute selector.\n   */\n  _animated: \"&[data-animated]\",\n  /**\n   * The CSS `&[data-between]` attribute selector.\n   */\n  _between: \"&[data-between]\",\n  /**\n   * The CSS `&:is([data-center], [data-group-center])` attribute selector.\n   */\n  _center: \"&:is([data-center], [data-group-center])\",\n  /**\n   * The CSS `&:is([data-collapsed], :not([data-expanded]), [aria-expanded=false])` attribute selector.\n   */\n  _collapsed:\n    \"&:is([data-collapsed], :not([data-expanded]), [aria-expanded=false])\",\n  /**\n   * The CSS `&[data-complete]` attribute selector.\n   */\n  _complete: \"&[data-complete]\",\n  /**\n   * The CSS `&:is([aria-current], [data-current]):not([aria-current='false'])` attribute selector.\n   */\n  _current: \"&:is([aria-current], [data-current]):not([aria-current='false'])\",\n  /**\n   * Styles for when `data-mode` is applied to any parent of this component or element.\n   */\n  _dark:\n    \":host([data-mode=dark]) &, .dark &:not([data-mode]), [data-mode=dark] &:not([data-mode]), &[data-mode=dark]\",\n  /**\n   * The CSS `&:is([data-end], [data-group-end])` attribute selector.\n   */\n  _end: \"&:is([data-end], [data-group-end])\",\n  /**\n   * The CSS `&:is([data-expanded], [aria-expanded=true])` attribute selector.\n   */\n  _expanded: \"&:is([data-expanded], [aria-expanded=true])\",\n  /**\n   * The CSS `&[data-fallback]` attribute selector.\n   */\n  _fallback: \"&[data-fallback]\",\n  /**\n   * The CSS `&[data-filled]` attribute selector.\n   */\n  _filled: \"&[data-filled]\",\n  /**\n   * The CSS `&:is([data-grabbed], [aria-grabbed=true])` attribute selector.\n   */\n  _grabbed: \"&:is([data-grabbed], [aria-grabbed=true])\",\n  /**\n   * The CSS `&:is([role=grid], [data-grid])` attribute selector.\n   */\n  _grid: \"&:is([role=grid], [data-grid])\",\n  /**\n   * The CSS `&:is(:has(> [role=group]), :has(> [data-group]), :has(> .group))` attribute selector.\n   */\n  _hasGroup: \"&:is(:has(> [role=group]), :has(> [data-group]), :has(> .group))\",\n  /**\n   * The CSS `&:has(> [data-icon])` attribute selector.\n   */\n  _hasIcon: \"&:has(> [data-icon])\",\n  /**\n   * The CSS `&[data-idle]` attribute selector.\n   */\n  _idle: \"&[data-idle]\",\n  /**\n   * The CSS `&[data-incomplete]` attribute selector.\n   */\n  _incomplete: \"&[data-incomplete]\",\n  /**\n   * Styles for when `data-mode` is applied to any parent of this component or element.\n   */\n  _light:\n    \":host([data-mode=light]) &, .light &:not([data-mode]), [data-mode=light] &:not([data-mode]), &[data-mode=light]\",\n  /**\n   * The CSS `&[data-loaded]` attribute selector.\n   */\n  _loaded: \"&[data-loaded]\",\n  /**\n   * The CSS `&:is([data-loading], [aria-busy=true])` attribute selector.\n   */\n  _loading: \"&:is([data-loading], [aria-busy=true])\",\n  /**\n   * The CSS `&[dir=ltr]` attribute selector.\n   */\n  _ltr: \"[dir=ltr] &\",\n  /**\n   * The CSS `&[hidden]` attribute selector.\n   */\n  _nativeHidden: \"&[hidden]\",\n  /**\n   * The CSS `&[data-not-allowed]` attribute selector.\n   */\n  _notAllowed: \"&[data-not-allowed]\",\n  /**\n   * The CSS `&[aria-current='false']` attribute selector.\n   */\n  _notCurrent: \"&:not([aria-current], [data-current]), &[aria-current='false']\",\n  /**\n   * The CSS `&:not([data-fallback])` attribute selector.\n   */\n  _notFallback: \"&:not([data-fallback])\",\n  /**\n   * The CSS `&:not(:has(> [role=group]), :has(> [data-group]), :has(> .group))` attribute selector.\n   */\n  _notHasGroup:\n    \"&:not(:has(> [role=group]), :has(> [data-group]), :has(> .group))\",\n  /**\n   * The CSS `&:not([data-selected]):not([aria-selected=true])` attribute selector.\n   */\n  _notSelected: \"&:not([data-selected]):not([aria-selected=true])\",\n  /**\n   * The CSS `&[data-numeric]` attribute selector.\n   */\n  _numeric: \"&[data-numeric]\",\n  /**\n   * The CSS `&:is([open], [data-open])` attribute selector.\n   */\n  _open: \"&:is([open], [data-open])\",\n  /**\n   * The CSS `&:is([data-pressed], [aria-pressed=true])` attribute selector.\n   */\n  _pressed: \"&:is([data-pressed], [aria-pressed=true])\",\n  /**\n   * The CSS `&:is([data-range])` attribute selector.\n   */\n  _range: \"&:is([data-range])\",\n  /**\n   * The CSS `&[data-reject]` attribute selector.\n   */\n  _reject: \"&[data-reject]\",\n  /**\n   * The CSS `& .ui-ripple` attribute selector.\n   */\n  _ripple: \"& .ui-ripple\",\n  /**\n   * The CSS `&[dir=rtl]` attribute selector.\n   */\n  _rtl: \"[dir=rtl] &\",\n  /**\n   * The CSS `&:is([data-start], [data-group-start])` attribute selector.\n   */\n  _start: \"&:is([data-start], [data-group-start])\",\n  /**\n   * The CSS `&:is([data-selected], [aria-selected=true])` attribute selector.\n   */\n  _selected: \"&:is([data-selected], [aria-selected=true])\",\n  /**\n   * The CSS `&:is([hidden], [data-hidden])` attribute selector.\n   */\n  _hidden: \"&:is([hidden], [data-hidden])\",\n  /**\n   * The CSS `&[data-never]` attribute selector.\n   */\n  _never: \"&[data-never]\",\n} as const\n\nexport type Attributes = typeof attributes\nexport type AttributeProperty = keyof Attributes\nexport type AttributeProps = {\n  [K in AttributeProperty]?: CSSObject\n}\n\nexport const attributeProperties = Object.keys(\n  attributes,\n) as AttributeProperty[]\nexport const attributeSelectors = Object.values(attributes)\n\nexport const pseudoElements = {\n  /**\n   * The CSS `&::after` pseudo-element.\n   */\n  _after: \"&::after\",\n  /**\n   * The CSS `&::backdrop` pseudo-element.\n   */\n  _backdrop: \"&::backdrop\",\n  /**\n   * The CSS `&::before` pseudo-element.\n   */\n  _before: \"&::before\",\n  /**\n   * The CSS `&::cue` pseudo-element.\n   */\n  _cue: \"&::cue\",\n  /**\n   * The CSS `&::cue-region` pseudo-element.\n   */\n  _cueRegion: \"&::cue-region\",\n  /**\n   * The CSS `&::details-content` pseudo-element.\n   */\n  _detailsContent: \"&::details-content\",\n  /**\n   * The CSS `&::file-selector-button` pseudo-element.\n   */\n  _fileSelector: \"&::file-selector-button\",\n  /**\n   * The CSS `&::first-letter` pseudo-element.\n   */\n  _firstLetter: \"&::first-letter\",\n  /**\n   * The CSS `&::first-line` pseudo-element.\n   */\n  _firstLine: \"&::first-line\",\n  /**\n   * The CSS `&::marker` pseudo-element.\n   */\n  _marker: \"&::marker\",\n  /**\n   * The CSS `&::placeholder, &[data-placeholder]` pseudo-element.\n   */\n  _placeholder: \"&::placeholder, &[data-placeholder]\",\n  /**\n   * The CSS `&::-webkit-scrollbar, &[data-scrollbar]` pseudo-element.\n   */\n  _scrollbar: \"&::-webkit-scrollbar, &[data-scrollbar]\",\n  /**\n   * The CSS `&::-webkit-scrollbar-button` pseudo-element.\n   */\n  _scrollbarButton: \"&::-webkit-scrollbar-button\",\n  /**\n   * The CSS `&::-webkit-scrollbar-corner` pseudo-element.\n   */\n  _scrollbarCorner: \"&::-webkit-scrollbar-corner\",\n  /**\n   * The CSS `&::-webkit-scrollbar-thumb` pseudo-element.\n   */\n  _scrollbarThumb: \"&::-webkit-scrollbar-thumb\",\n  /**\n   * The CSS `&::-webkit-scrollbar-track` pseudo-element.\n   */\n  _scrollbarTrack: \"&::-webkit-scrollbar-track\",\n  /**\n   * The CSS `&::-webkit-scrollbar-track-piece` pseudo-element.\n   */\n  _scrollbarTrackPiece: \"&::-webkit-scrollbar-track-piece\",\n  /**\n   * The CSS `&::selection` pseudo-element.\n   */\n  _selection: \"&::selection\",\n} as const\n\nexport type PseudoElements = typeof pseudoElements\nexport type PseudoElementProperty = keyof PseudoElements\nexport type PseudoElementProps = {\n  [K in PseudoElementProperty]?: CSSObject\n}\n\nexport const pseudoElementProperties = Object.keys(\n  pseudoElements,\n) as PseudoElementProperty[]\nexport const pseudoElementSelectors = Object.values(pseudoElements)\n\nexport const pseudoClasses = {\n  /**\n   * The CSS `&:is([data-activedescendant])` pseudo-class.\n   */\n  _activedescendant: \"&:is([data-activedescendant])\",\n  /**\n   * The CSS `:any-link` pseudo-class.\n   */\n  _anyLink: \"&:is(:any-link, [data-any-link])\",\n  /**\n   * The CSS `&:autofill` pseudo-class.\n   */\n  _autofill: \"&:autofill\",\n  /**\n   * The CSS `&:is(:blank, [data-blank])` pseudo-class.\n   */\n  _blank: \"&:is(:blank, [data-blank])\",\n  /**\n   * The CSS `&:is(:checked, [data-checked], [aria-checked=true])` pseudo-class.\n   */\n  _checked: \"&:is(:checked, [data-checked], [aria-checked=true])\",\n  /**\n   * The CSS `& > *` child combinator selector.\n   */\n  _child: \"& > *\",\n  /**\n   * The CSS `& > [data-content]` child combinator attribute selector.\n   */\n  _content: \"& > [data-content]\",\n  /**\n   * The CSS `&:default` pseudo-class.\n   */\n  _default: \"&:default\",\n  /**\n   * The CSS `&:empty` pseudo-class.\n   */\n  _empty: \"&:empty\",\n  /**\n   * The CSS `&:is(:enabled, [data-enabled])` pseudo-class.\n   */\n  _enabled: \"&:is(:enabled, [data-enabled])\",\n  /**\n   * The CSS `&:nth-of-type(even)` pseudo-class.\n   */\n  _even: \"&:nth-of-type(even)\",\n  /**\n   * The CSS `&:first-of-type` pseudo-class.\n   */\n  _first: \"&:first-of-type\",\n  /**\n   * The CSS `& > *:first-child` pseudo-class.\n   */\n  _firstChild: \"& > *:first-child\",\n  /**\n   * The CSS `&:not(:focus-within, [data-focus-within])` pseudo-class.\n   */\n  _focusWithin: \"&:not(:focus-within, [data-focus-within])\",\n  /**\n   * The CSS `&:fullscreen` pseudo-class.\n   */\n  _fullScreen: \"&:fullscreen\",\n  /**\n   * The CSS `&:is([data-orientation=horizontal], [aria-orientation=horizontal])` pseudo-class.\n   */\n  _horizontal:\n    \"&:is([data-orientation=horizontal], [aria-orientation=horizontal])\",\n  /**\n   * The CSS `&:where(svg:not([data-loading])), & > [data-icon]` pseudo-class.\n   */\n  _icon: \"&:where(svg:not([data-loading])), & > [data-icon]\",\n  /**\n   * The CSS `&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed])` pseudo-class.\n   */\n  _indeterminate:\n    \"&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed])\",\n  /**\n   * The CSS `& > [data-indicator]` pseudo-class.\n   */\n  _indicator: \"& > [data-indicator]\",\n  /**\n   * The CSS `&:is(:in-range, [data-in-range])` pseudo-class.\n   */\n  _inRange: \"&:is(:in-range, [data-in-range])\",\n  /**\n   * The CSS `&:last-of-type` pseudo-class.\n   */\n  _last: \"&:last-of-type\",\n  /**\n   * The CSS `& > *:last-child` pseudo-class.\n   */\n  _lastChild: \"& > *:last-child\",\n  /**\n   * The CSS `&:is(:link, [data-link])` pseudo-class.\n   */\n  _link: \"&:is(:link, [data-link])\",\n  /**\n   * The CSS `&:modal` pseudo-class.\n   */\n  _modal: \"&:modal\",\n  /**\n   * The CSS `&:active` pseudo-class.\n   */\n  _nativeActive: \"&:active\",\n  /**\n   * The CSS `&:checked` pseudo-class.\n   */\n  _nativeChecked: \"&:checked\",\n  /**\n   * The CSS `&:is(disabled, [disabled])` pseudo-class.\n   */\n  _nativeDisabled: \"&:is(disabled, [disabled])\",\n  /**\n   * The CSS `&:focus` pseudo-class.\n   */\n  _nativeFocus: \"&:focus\",\n  /**\n   * The CSS `&:focus-visible` pseudo-class.\n   */\n  _nativeFocusVisible: \"&:focus-visible\",\n  /**\n   * The CSS `&:focus-within` pseudo-class.\n   */\n  _nativeFocusWithin: \"&:focus-within\",\n  /**\n   * The CSS `&:hover` pseudo-class.\n   */\n  _nativeHover: \"&:hover\",\n  /**\n   * The CSS `&:is([readonly], [aria-readonly=true])` pseudo-class.\n   */\n  _nativeReadOnly: \"&:is([readonly], [aria-readonly=true])\",\n  /**\n   * The CSS `&:target` pseudo-class.\n   */\n  _nativeTarget: \"&:target\",\n  /**\n   * The CSS `&:valid` pseudo-class.\n   */\n  _nativeValid: \"&:valid\",\n  /**\n   * The CSS `&:not(:checked):not([data-checked]):not([aria-checked=true])` pseudo-class.\n   */\n  _notChecked: \"&:not(:checked):not([data-checked]):not([aria-checked=true])\",\n  /**\n   * The CSS `&:not(:empty)` pseudo-class.\n   */\n  _notEmpty: \"&:not(:empty)\",\n  /**\n   * The CSS `&:not(:first-of-type)` pseudo-class.\n   */\n  _notFirst: \"&:not(:first-of-type)\",\n  /**\n   * The CSS `& > *:not(:first-child)` pseudo-class.\n   */\n  _notFirstChild: \"& > *:not(:first-child)\",\n  /**\n   * The CSS `&:not(:last-of-type)` pseudo-class.\n   */\n  _notLast: \"&:not(:last-of-type)\",\n  /**\n   * The CSS `& > *:not(:last-child)` pseudo-class.\n   */\n  _notLastChild: \"& > *:not(:last-child)\",\n  /**\n   * The CSS `&:not(:target)` pseudo-class.\n   */\n  _notTarget: \"&:not(:target)\",\n  /**\n   * The CSS `&:nth-of-type(odd)` pseudo-class.\n   */\n  _odd: \"&:nth-of-type(odd)\",\n  /**\n   * The CSS `&:only-of-type` pseudo-class.\n   */\n  _only: \"&:only-of-type\",\n  /**\n   * The CSS `&:only-child` pseudo-class.\n   */\n  _onlyChild: \"&:only-child\",\n  /**\n   * The CSS `&:is(:optional, [data-optional])` pseudo-class.\n   */\n  _optional: \"&:is(:optional, [data-optional])\",\n  /**\n   * The CSS `&:is(:out-of-range, [data-out-of-range])` pseudo-class.\n   */\n  _outRange: \"&:is(:out-of-range, [data-out-of-range])\",\n  /**\n   * The CSS `&:is(:paused, [data-paused])` pseudo-class.\n   */\n  _paused: \"&:is(:paused, [data-paused])\",\n  /**\n   * The CSS `&:picture-in-picture` pseudo-class.\n   */\n  _picture: \"&:picture-in-picture\",\n  /**\n   * The CSS `&:placeholder-shown` pseudo-class.\n   */\n  _placeholderShown: \"&:placeholder-shown\",\n  /**\n   * The CSS `&:is(:playing, [data-playing])` pseudo-class.\n   */\n  _playing: \"&:is(:playing, [data-playing])\",\n  /**\n   * The CSS `&:popover-open` pseudo-class.\n   */\n  _popoverOpen: \"&:popover-open\",\n  /**\n   * The CSS `&:is(:read-write, [data-read-write])` pseudo-class.\n   */\n  _readWrite: \"&:is(:read-write, [data-read-write])\",\n  /**\n   * The CSS `&:is(:required, [required])` pseudo-class.\n   */\n  _required: \"&:is(:required, [required])\",\n  /**\n   * The CSS `&:is(:target, [data-target])` pseudo-class.\n   */\n  _target: \"&:is(:target, [data-target])\",\n  /**\n   * The CSS `&:is(:user-invalid, [data-user-invalid])` pseudo-class.\n   */\n  _userInvalid: \"&:is(:user-invalid, [data-user-invalid])\",\n  /**\n   * The CSS `&:is(:valid, [data-valid])` pseudo-class.\n   */\n  _valid: \"&:is(:valid, [data-valid])\",\n  /**\n   * The CSS `&:is([data-orientation=vertical], [aria-orientation=vertical])` pseudo-class.\n   */\n  _vertical: \"&:is([data-orientation=vertical], [aria-orientation=vertical])\",\n  /**\n   * The CSS `&:visited` pseudo-class.\n   */\n  _visited: \"&:visited\",\n  /**\n   * The CSS `&:is(:hover, [data-hover])` pseudo-class.\n   */\n  _hover:\n    \"&:is(:hover, [data-hover]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled])\",\n  /**\n   * The CSS `&:is(:active, [data-active])` pseudo-class.\n   */\n  _active:\n    \"&:is(:active, [data-active]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled])\",\n  /**\n   * The CSS `&:is(:focus, [data-focus])` pseudo-class.\n   */\n  _focus: \"&:is(:focus, [data-focus])\",\n  /**\n   * The CSS `&:is(:focus-visible, [data-focus-visible])` pseudo-class.\n   */\n  _focusVisible: \"&:is(:focus-visible, [data-focus-visible])\",\n  /**\n   * The CSS `&:is([data-invalid], [aria-invalid=true])` attribute selector.\n   */\n  _invalid: \"&:is([data-invalid], [aria-invalid=true])\",\n  /**\n   * The CSS `&:is([readonly], [data-readonly], [aria-readonly=true])` pseudo-class.\n   */\n  _readOnly: \"&:is([readonly], [data-readonly], [aria-readonly=true])\",\n  /**\n   * The CSS `&:is(:disabled, [disabled], [data-disabled])` pseudo-class.\n   */\n  _disabled: \"&:is(:disabled, [disabled], [data-disabled])\",\n} as const\n\nexport type PseudoClasses = typeof pseudoClasses\nexport type PseudoClassProperty = keyof PseudoClasses\nexport type PseudoClassProps = {\n  [K in PseudoClassProperty]?: CSSObject\n}\n\nexport const pseudoClassProperties = Object.keys(\n  pseudoClasses,\n) as PseudoClassProperty[]\nexport const pseudoClassSelectors = Object.values(pseudoClasses)\n\nexport const groupAttributes = {\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is accepted.\n   */\n  _groupAccept: toGroup(attributes._accept),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is activedescendant.\n   */\n  _groupActivedescendant: toGroup(pseudoClasses._activedescendant),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is animated.\n   */\n  _groupAnimated: toGroup(attributes._animated),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is blank.\n   */\n  _groupBlank: toGroup(pseudoClasses._blank),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is checked.\n   */\n  _groupChecked: toGroup(pseudoClasses._checked),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is collapsed.\n   */\n  _groupCollapsed: toGroup(attributes._collapsed),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is complete.\n   */\n  _groupComplete: toGroup(attributes._complete),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is current.\n   */\n  _groupCurrent: toGroup(attributes._current),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is enabled.\n   */\n  _groupEnabled: toGroup(pseudoClasses._enabled),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is expanded.\n   */\n  _groupExpanded: toGroup(attributes._expanded),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is focus-within.\n   */\n  _groupFocusWithin: toGroup(pseudoClasses._focusWithin),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is grabbed.\n   */\n  _groupGrabbed: toGroup(attributes._grabbed),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is horizontal.\n   */\n  _groupHorizontal: toGroup(pseudoClasses._horizontal),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is idle.\n   */\n  _groupIdle: toGroup(attributes._idle),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is incomplete.\n   */\n  _groupIncomplete: toGroup(attributes._incomplete),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is loaded.\n   */\n  _groupLoaded: toGroup(attributes._loaded),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is loading.\n   */\n  _groupLoading: toGroup(attributes._loading),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is open.\n   */\n  _groupOpen: toGroup(attributes._open),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is optional.\n   */\n  _groupOptional: toGroup(pseudoClasses._optional),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` has a placeholder shown.\n   */\n  _groupPlaceholderShown: toGroup(pseudoClasses._placeholderShown),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is pressed.\n   */\n  _groupPressed: toGroup(attributes._pressed),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is range.\n   */\n  _groupRange: toGroup(attributes._range),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is read-write.\n   */\n  _groupReadWrite: toGroup(pseudoClasses._readWrite),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is rejected.\n   */\n  _groupReject: toGroup(attributes._reject),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is required.\n   */\n  _groupRequired: toGroup(pseudoClasses._required),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is user-invalid.\n   */\n  _groupUserInvalid: toGroup(pseudoClasses._userInvalid),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is valid.\n   */\n  _groupValid: toGroup(pseudoClasses._valid),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is vertical.\n   */\n  _groupVertical: toGroup(pseudoClasses._vertical),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is hovered.\n   */\n  _groupHover: toGroup(pseudoClasses._hover),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is active.\n   */\n  _groupActive: toGroup(pseudoClasses._active),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is focused.\n   */\n  _groupFocus: toGroup(pseudoClasses._focus),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is focused-visible.\n   */\n  _groupFocusVisible: toGroup(pseudoClasses._focusVisible),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is selected.\n   */\n  _groupSelected: toGroup(attributes._selected),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is invalid.\n   */\n  _groupInvalid: toGroup(pseudoClasses._invalid),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is read-only.\n   */\n  _groupReadOnly: toGroup(pseudoClasses._readOnly),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is disabled.\n   */\n  _groupDisabled: toGroup(pseudoClasses._disabled),\n} as const\n\nexport type GroupAttributes = typeof groupAttributes\nexport type GroupAttributeProperty = keyof GroupAttributes\nexport type GroupAttributeProps = {\n  [K in GroupAttributeProperty]?: CSSObject\n}\n\nexport const groupAttributeProperties = Object.keys(\n  groupAttributes,\n) as GroupAttributeProperty[]\nexport const groupAttributeSelectors = Object.values(groupAttributes)\n\nexport const peerAttributes = {\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` exists.\n   */\n  _peer: toPeer(),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is accepted.\n   */\n  _peerAccept: toPeer(attributes._accept),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is animated.\n   */\n  _peerAnimated: toPeer(attributes._animated),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is blank.\n   */\n  _peerBlank: toPeer(pseudoClasses._blank),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is checked.\n   */\n  _peerChecked: toPeer(pseudoClasses._checked),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is collapsed.\n   */\n  _peerCollapsed: toPeer(attributes._collapsed),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is complete.\n   */\n  _peerComplete: toPeer(attributes._complete),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is current.\n   */\n  _peerCurrent: toPeer(attributes._current),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is enabled.\n   */\n  _peerEnabled: toPeer(pseudoClasses._enabled),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is expanded.\n   */\n  _peerExpanded: toPeer(attributes._expanded),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is focus-within.\n   */\n  _peerFocusWithin: toPeer(pseudoClasses._focusWithin),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is grabbed.\n   */\n  _peerGrabbed: toPeer(attributes._grabbed),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is horizontal.\n   */\n  _peerHorizontal: toPeer(pseudoClasses._horizontal),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is idle.\n   */\n  _peerIdle: toPeer(attributes._idle),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is incomplete.\n   */\n  _peerIncomplete: toPeer(attributes._incomplete),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is loaded.\n   */\n  _peerLoaded: toPeer(attributes._loaded),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is loading.\n   */\n  _peerLoading: toPeer(attributes._loading),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is optional.\n   */\n  _peerOptional: toPeer(pseudoClasses._optional),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` has a placeholder shown.\n   */\n  _peerPlaceholderShown: toPeer(pseudoClasses._placeholderShown),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is pressed.\n   */\n  _peerPressed: toPeer(attributes._pressed),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is range.\n   */\n  _peerRange: toPeer(attributes._range),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is read-write.\n   */\n  _peerReadWrite: toPeer(pseudoClasses._readWrite),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is rejected.\n   */\n  _peerReject: toPeer(attributes._reject),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is required.\n   */\n  _peerRequired: toPeer(pseudoClasses._required),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is user-invalid.\n   */\n  _peerUserInvalid: toPeer(pseudoClasses._userInvalid),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is valid.\n   */\n  _peerValid: toPeer(pseudoClasses._valid),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is vertical.\n   */\n  _peerVertical: toPeer(pseudoClasses._vertical),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is hovered.\n   */\n  _peerHover: toPeer(pseudoClasses._hover),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is active.\n   */\n  _peerActive: toPeer(pseudoClasses._active),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is focused.\n   */\n  _peerFocus: toPeer(pseudoClasses._focus),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is focused-visible.\n   */\n  _peerFocusVisible: toPeer(pseudoClasses._focusVisible),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is selected.\n   */\n  _peerSelected: toPeer(attributes._selected),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is invalid.\n   */\n  _peerInvalid: toPeer(pseudoClasses._invalid),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is read-only.\n   */\n  _peerReadOnly: toPeer(pseudoClasses._readOnly),\n  /**\n   * Styles to apply when a sibling element with `data-peer` or `.peer` is disabled.\n   */\n  _peerDisabled: toPeer(pseudoClasses._disabled),\n} as const\n\nexport type PeerAttributes = typeof peerAttributes\nexport type PeerAttributeProperty = keyof PeerAttributes\nexport type PeerAttributeProps = {\n  [K in PeerAttributeProperty]?: CSSObject\n}\n\nexport const peerAttributeProperties = Object.keys(\n  peerAttributes,\n) as PeerAttributeProperty[]\nexport const peerAttributeSelectors = Object.values(peerAttributes)\n\nexport const conditions = {\n  ...pseudoElements,\n  ...attributes,\n  ...pseudoClasses,\n  ...groupAttributes,\n  ...peerAttributes,\n} as const\n\nexport type Conditions = typeof conditions\nexport type ConditionProperty = keyof Conditions\nexport type ConditionSelector = Conditions[ConditionProperty]\nexport type ConditionProps = {\n  [K in keyof Conditions]?: CSSObject\n}\n\nexport const conditionProperties = Object.keys(\n  conditions,\n) as ConditionProperty[]\nexport const conditionSelectors = Object.values(conditions)\n\nexport function getCondition(key: string) {\n  return key in conditions ? conditions[key as ConditionProperty] : key\n}\n"],"mappings":"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"}

package/dist/cjs/core/system/color-mode-provider.cjs

@@ -23,7 +23,6 @@ const ColorModeProvider = ({ children, colorMode: forcedColorMode, config: { def
 		storageKey
 	]);
 	const environment = require_environment_provider.useEnvironment();
-	const { getDocument } = environment;
 	const [internalColorMode, setInternalColorMode] = (0, react.useState)(storageManager.get());
 	const { getSystemColorMode, systemColorMode } = require_use_system_color_mode.useSystemColorMode({
 		callback: (systemColorMode) => {
@@ -35,23 +34,22 @@ const ColorModeProvider = ({ children, colorMode: forcedColorMode, config: { def
 	});
 	const colorMode = internalColorMode === "system" ? systemColorMode : internalColorMode;
 	const setDataset = (0, react.useCallback)((colorMode) => {
-		const doc = getDocument();
-		if (!doc) return;
+		const root = environment.getRootElement();
+		if (!root) return;
 		const cleanup = disableTransitionOnChange ? require_theme_provider.getPreventTransition(environment) : void 0;
-		doc.documentElement.dataset.mode = colorMode;
-		doc.documentElement.style.colorScheme = colorMode;
+		root.dataset.mode = colorMode;
+		root.style.colorScheme = colorMode;
 		cleanup?.();
-	}, [
-		disableTransitionOnChange,
-		environment,
-		getDocument
-	]);
+	}, [disableTransitionOnChange, environment]);
 	const setClassName = (0, react.useCallback)((isDark) => {
-		const doc = getDocument();
-		if (!doc) return;
-		doc.body.classList.add(isDark ? "dark" : "light");
-		doc.body.classList.remove(isDark ? "light" : "dark");
-	}, [getDocument]);
+		const doc = environment.getDocument();
+		const rootNode = environment.getRootNode();
+		const root = environment.getRootElement();
+		if (!doc || !root) return;
+		const target = (0, require_utils_index.utils_exports.isDocument)(rootNode) ? doc.body : root;
+		target.classList.add(isDark ? "dark" : "light");
+		target.classList.remove(isDark ? "light" : "dark");
+	}, [environment]);
 	const changeColorMode = (0, react.useCallback)((internalColorMode) => {
 		const colorMode = internalColorMode === "system" ? getSystemColorMode() : internalColorMode;
 		setInternalColorMode(internalColorMode);

package/dist/cjs/core/system/color-mode-provider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"color-mode-provider.cjs","names":["COLOR_MODE_STORAGE_KEY","createStorageManager","useEnvironment","useSystemColorMode","getPreventTransition"],"sources":["../../../../src/core/system/color-mode-provider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport type { ColorMode, ColorModeWithSystem, ThemeConfig } from \"./index.types\"\nimport type { Storage } from \"./storage-manager\"\nimport {\n  createContext,\n  use,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\"\nimport { isEmptyObject, noop } from \"../../utils\"\nimport { COLOR_MODE_STORAGE_KEY } from \"../constant\"\nimport { useEnvironment } from \"./environment-provider\"\nimport { createStorageManager } from \"./storage-manager\"\nimport { getPreventTransition } from \"./theme-provider\"\nimport { useSystemColorMode } from \"./use-system-color-mode\"\n\ninterface ColorModeContext {\n  colorMode: ColorMode\n  internalColorMode: ColorModeWithSystem\n  changeColorMode: (colorMode: ColorModeWithSystem) => void\n  toggleColorMode: () => void\n  forced?: boolean\n}\n\nexport const ColorModeContext = createContext<ColorModeContext>({\n  changeColorMode: noop,\n  colorMode: \"light\",\n  forced: false,\n  internalColorMode: \"light\",\n  toggleColorMode: noop,\n})\n\nexport interface ColorModeProviderProps extends PropsWithChildren {\n  /**\n   * The forced color mode.\n   */\n  colorMode?: ColorMode\n  /**\n   * The config of the yamada ui.\n   */\n  config?: ThemeConfig\n  /**\n   * If `storage` is `cookie`, the cookie to use.\n   * If not provided, the cookie will be set to `document.cookie`.\n   */\n  cookie?: string\n  /**\n   * The storage to use.\n   * If you are using a server-side rendering library, you should use `cookie`.\n   *\n   * @default 'localStorage'\n   */\n  storage?: Storage\n  /**\n   * The key of the value saved in storage.\n   *\n   * @default 'color-mode'\n   */\n  storageKey?: string\n}\n\nexport const ColorModeProvider: FC<ColorModeProviderProps> = ({\n  children,\n  colorMode: forcedColorMode,\n  config: {\n    defaultColorMode = \"light\" as ColorModeWithSystem,\n    disableTransitionOnChange = true,\n  } = {},\n  cookie,\n  storage = cookie ? \"cookie\" : \"localStorage\",\n  storageKey = COLOR_MODE_STORAGE_KEY,\n}) => {\n  const storageManager = useMemo(\n    () =>\n      createStorageManager<ColorModeWithSystem, ColorMode>(\n        storage,\n        storageKey,\n        defaultColorMode,\n        cookie,\n      ),\n    [cookie, defaultColorMode, storage, storageKey],\n  )\n  const environment = useEnvironment()\n  const { getDocument } = environment\n  const [internalColorMode, setInternalColorMode] =\n    useState<ColorModeWithSystem>(storageManager.get())\n  const { getSystemColorMode, systemColorMode } = useSystemColorMode({\n    callback: (systemColorMode) => {\n      if (internalColorMode !== \"system\") return\n\n      setClassName(systemColorMode === \"dark\")\n      setDataset(systemColorMode)\n    },\n    defaultColorMode: storageManager.default(\n      defaultColorMode === \"dark\" ? \"dark\" : \"light\",\n    ),\n  })\n  const colorMode =\n    internalColorMode === \"system\" ? systemColorMode : internalColorMode\n\n  const setDataset = useCallback(\n    (colorMode: ColorMode) => {\n      const doc = getDocument()\n\n      if (!doc) return\n\n      const cleanup = disableTransitionOnChange\n        ? getPreventTransition(environment)\n        : undefined\n\n      doc.documentElement.dataset.mode = colorMode\n      doc.documentElement.style.colorScheme = colorMode\n\n      cleanup?.()\n    },\n    [disableTransitionOnChange, environment, getDocument],\n  )\n\n  const setClassName = useCallback(\n    (isDark: boolean) => {\n      const doc = getDocument()\n\n      if (!doc) return\n\n      doc.body.classList.add(isDark ? \"dark\" : \"light\")\n      doc.body.classList.remove(isDark ? \"light\" : \"dark\")\n    },\n    [getDocument],\n  )\n\n  const changeColorMode = useCallback(\n    (internalColorMode: ColorModeWithSystem) => {\n      const colorMode =\n        internalColorMode === \"system\"\n          ? getSystemColorMode()\n          : internalColorMode\n\n      setInternalColorMode(internalColorMode)\n      setClassName(colorMode === \"dark\")\n      setDataset(colorMode)\n\n      storageManager.set(internalColorMode)\n    },\n    [storageManager, getSystemColorMode, setClassName, setDataset],\n  )\n\n  const toggleColorMode = useCallback(() => {\n    changeColorMode(colorMode === \"dark\" ? \"light\" : \"dark\")\n  }, [changeColorMode, colorMode])\n\n  useEffect(() => {\n    const internalColorMode = storageManager.get()\n\n    changeColorMode(internalColorMode)\n  }, [changeColorMode, storageManager])\n\n  const context = useMemo(\n    () => ({\n      changeColorMode: forcedColorMode ? noop : changeColorMode,\n      colorMode: forcedColorMode ?? colorMode,\n      forced: forcedColorMode !== undefined,\n      internalColorMode,\n      toggleColorMode: forcedColorMode ? noop : toggleColorMode,\n    }),\n    [\n      forcedColorMode,\n      colorMode,\n      internalColorMode,\n      changeColorMode,\n      toggleColorMode,\n    ],\n  )\n\n  return <ColorModeContext value={context}>{children}</ColorModeContext>\n}\n\n/**\n * `useColorMode` is a custom hook that returns the current color mode.\n *\n * @see https://yamada-ui.com/docs/hooks/use-color-mode\n */\nexport const useColorMode = (): ColorModeContext => {\n  const context = use(ColorModeContext)\n\n  if (isEmptyObject(context))\n    return {\n      changeColorMode: noop,\n      colorMode: \"light\",\n      forced: false,\n      internalColorMode: \"light\",\n      toggleColorMode: noop,\n    }\n  else return context\n}\n"],"mappings":";;;;;;;;;;AA4BA,MAAa,oBAAA,GAAA,MAAA,cAAA,CAAmD;CAC9D,iBAAA,oBAAA,cAAiB;CACjB,WAAW;CACX,QAAQ;CACR,mBAAmB;CACnB,iBAAA,oBAAA,cAAiB;AACnB,CAAC;AA+BD,MAAa,qBAAiD,EAC5D,UACA,WAAW,iBACX,QAAQ,EACN,mBAAmB,SACnB,4BAA4B,SAC1B,CAAC,GACL,QACA,UAAU,SAAS,WAAW,gBAC9B,aAAaA,iBAAAA,6BACT;CACJ,MAAM,kBAAA,GAAA,MAAA,QAAA,OAEFC,wBAAAA,qBACE,SACA,YACA,kBACA,MACF,GACF;EAAC;EAAQ;EAAkB;EAAS;CAAU,CAChD;CACA,MAAM,cAAcC,6BAAAA,eAAe;CACnC,MAAM,EAAE,gBAAgB;CACxB,MAAM,CAAC,mBAAmB,yBAAA,GAAA,MAAA,SAAA,CACM,eAAe,IAAI,CAAC;CACpD,MAAM,EAAE,oBAAoB,oBAAoBC,8BAAAA,mBAAmB;EACjE,WAAW,oBAAoB;GAC7B,IAAI,sBAAsB,UAAU;GAEpC,aAAa,oBAAoB,MAAM;GACvC,WAAW,eAAe;EAC5B;EACA,kBAAkB,eAAe,QAC/B,qBAAqB,SAAS,SAAS,OACzC;CACF,CAAC;CACD,MAAM,YACJ,sBAAsB,WAAW,kBAAkB;CAErD,MAAM,cAAA,GAAA,MAAA,YAAA,EACH,cAAyB;EACxB,MAAM,MAAM,YAAY;EAExB,IAAI,CAAC,KAAK;EAEV,MAAM,UAAU,4BACZC,uBAAAA,qBAAqB,WAAW,IAChC,KAAA;EAEJ,IAAI,gBAAgB,QAAQ,OAAO;EACnC,IAAI,gBAAgB,MAAM,cAAc;EAExC,UAAU;CACZ,GACA;EAAC;EAA2B;EAAa;CAAW,CACtD;CAEA,MAAM,gBAAA,GAAA,MAAA,YAAA,EACH,WAAoB;EACnB,MAAM,MAAM,YAAY;EAExB,IAAI,CAAC,KAAK;EAEV,IAAI,KAAK,UAAU,IAAI,SAAS,SAAS,OAAO;EAChD,IAAI,KAAK,UAAU,OAAO,SAAS,UAAU,MAAM;CACrD,GACA,CAAC,WAAW,CACd;CAEA,MAAM,mBAAA,GAAA,MAAA,YAAA,EACH,sBAA2C;EAC1C,MAAM,YACJ,sBAAsB,WAClB,mBAAmB,IACnB;EAEN,qBAAqB,iBAAiB;EACtC,aAAa,cAAc,MAAM;EACjC,WAAW,SAAS;EAEpB,eAAe,IAAI,iBAAiB;CACtC,GACA;EAAC;EAAgB;EAAoB;EAAc;CAAU,CAC/D;CAEA,MAAM,mBAAA,GAAA,MAAA,YAAA,OAAoC;EACxC,gBAAgB,cAAc,SAAS,UAAU,MAAM;CACzD,GAAG,CAAC,iBAAiB,SAAS,CAAC;CAE/B,CAAA,GAAA,MAAA,UAAA,OAAgB;EAGd,gBAF0B,eAAe,IAET,CAAC;CACnC,GAAG,CAAC,iBAAiB,cAAc,CAAC;CAmBpC,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD;EAAkB,QAAA,GAAA,MAAA,QAAA,QAhBhB;GACL,iBAAiB,kBAAA,oBAAA,cAAkB,OAAO;GAC1C,WAAW,mBAAmB;GAC9B,QAAQ,oBAAoB,KAAA;GAC5B;GACA,iBAAiB,kBAAA,oBAAA,cAAkB,OAAO;EAC5C,IACA;GACE;GACA;GACA;GACA;GACA;EACF,CAGoC;EAAI;CAA2B,CAAA;AACvE;;;;;;AAOA,MAAa,qBAAuC;CAClD,MAAM,WAAA,GAAA,MAAA,IAAA,CAAc,gBAAgB;CAEpC,KAAA,GAAA,oBAAA,cAAA,cAAA,CAAkB,OAAO,GACvB,OAAO;EACL,iBAAA,oBAAA,cAAiB;EACjB,WAAW;EACX,QAAQ;EACR,mBAAmB;EACnB,iBAAA,oBAAA,cAAiB;CACnB;MACG,OAAO;AACd"}
+{"version":3,"file":"color-mode-provider.cjs","names":["COLOR_MODE_STORAGE_KEY","createStorageManager","useEnvironment","useSystemColorMode","getPreventTransition"],"sources":["../../../../src/core/system/color-mode-provider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport type { ColorMode, ColorModeWithSystem, ThemeConfig } from \"./index.types\"\nimport type { Storage } from \"./storage-manager\"\nimport {\n  createContext,\n  use,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\"\nimport { isDocument, isEmptyObject, noop } from \"../../utils\"\nimport { COLOR_MODE_STORAGE_KEY } from \"../constant\"\nimport { useEnvironment } from \"./environment-provider\"\nimport { createStorageManager } from \"./storage-manager\"\nimport { getPreventTransition } from \"./theme-provider\"\nimport { useSystemColorMode } from \"./use-system-color-mode\"\n\ninterface ColorModeContext {\n  colorMode: ColorMode\n  internalColorMode: ColorModeWithSystem\n  changeColorMode: (colorMode: ColorModeWithSystem) => void\n  toggleColorMode: () => void\n  forced?: boolean\n}\n\nexport const ColorModeContext = createContext<ColorModeContext>({\n  changeColorMode: noop,\n  colorMode: \"light\",\n  forced: false,\n  internalColorMode: \"light\",\n  toggleColorMode: noop,\n})\n\nexport interface ColorModeProviderProps extends PropsWithChildren {\n  /**\n   * The forced color mode.\n   */\n  colorMode?: ColorMode\n  /**\n   * The config of the yamada ui.\n   */\n  config?: ThemeConfig\n  /**\n   * If `storage` is `cookie`, the cookie to use.\n   * If not provided, the cookie will be set to `document.cookie`.\n   */\n  cookie?: string\n  /**\n   * The storage to use.\n   * If you are using a server-side rendering library, you should use `cookie`.\n   *\n   * @default 'localStorage'\n   */\n  storage?: Storage\n  /**\n   * The key of the value saved in storage.\n   *\n   * @default 'color-mode'\n   */\n  storageKey?: string\n}\n\nexport const ColorModeProvider: FC<ColorModeProviderProps> = ({\n  children,\n  colorMode: forcedColorMode,\n  config: {\n    defaultColorMode = \"light\" as ColorModeWithSystem,\n    disableTransitionOnChange = true,\n  } = {},\n  cookie,\n  storage = cookie ? \"cookie\" : \"localStorage\",\n  storageKey = COLOR_MODE_STORAGE_KEY,\n}) => {\n  const storageManager = useMemo(\n    () =>\n      createStorageManager<ColorModeWithSystem, ColorMode>(\n        storage,\n        storageKey,\n        defaultColorMode,\n        cookie,\n      ),\n    [cookie, defaultColorMode, storage, storageKey],\n  )\n  const environment = useEnvironment()\n  const [internalColorMode, setInternalColorMode] =\n    useState<ColorModeWithSystem>(storageManager.get())\n  const { getSystemColorMode, systemColorMode } = useSystemColorMode({\n    callback: (systemColorMode) => {\n      if (internalColorMode !== \"system\") return\n\n      setClassName(systemColorMode === \"dark\")\n      setDataset(systemColorMode)\n    },\n    defaultColorMode: storageManager.default(\n      defaultColorMode === \"dark\" ? \"dark\" : \"light\",\n    ),\n  })\n  const colorMode =\n    internalColorMode === \"system\" ? systemColorMode : internalColorMode\n\n  const setDataset = useCallback(\n    (colorMode: ColorMode) => {\n      const root = environment.getRootElement()\n\n      if (!root) return\n\n      const cleanup = disableTransitionOnChange\n        ? getPreventTransition(environment)\n        : undefined\n\n      root.dataset.mode = colorMode\n      root.style.colorScheme = colorMode\n\n      cleanup?.()\n    },\n    [disableTransitionOnChange, environment],\n  )\n\n  const setClassName = useCallback(\n    (isDark: boolean) => {\n      const doc = environment.getDocument()\n      const rootNode = environment.getRootNode()\n      const root = environment.getRootElement()\n\n      if (!doc || !root) return\n\n      const target = isDocument(rootNode) ? doc.body : root\n\n      target.classList.add(isDark ? \"dark\" : \"light\")\n      target.classList.remove(isDark ? \"light\" : \"dark\")\n    },\n    [environment],\n  )\n\n  const changeColorMode = useCallback(\n    (internalColorMode: ColorModeWithSystem) => {\n      const colorMode =\n        internalColorMode === \"system\"\n          ? getSystemColorMode()\n          : internalColorMode\n\n      setInternalColorMode(internalColorMode)\n      setClassName(colorMode === \"dark\")\n      setDataset(colorMode)\n\n      storageManager.set(internalColorMode)\n    },\n    [storageManager, getSystemColorMode, setClassName, setDataset],\n  )\n\n  const toggleColorMode = useCallback(() => {\n    changeColorMode(colorMode === \"dark\" ? \"light\" : \"dark\")\n  }, [changeColorMode, colorMode])\n\n  useEffect(() => {\n    const internalColorMode = storageManager.get()\n\n    changeColorMode(internalColorMode)\n  }, [changeColorMode, storageManager])\n\n  const context = useMemo(\n    () => ({\n      changeColorMode: forcedColorMode ? noop : changeColorMode,\n      colorMode: forcedColorMode ?? colorMode,\n      forced: forcedColorMode !== undefined,\n      internalColorMode,\n      toggleColorMode: forcedColorMode ? noop : toggleColorMode,\n    }),\n    [\n      forcedColorMode,\n      colorMode,\n      internalColorMode,\n      changeColorMode,\n      toggleColorMode,\n    ],\n  )\n\n  return <ColorModeContext value={context}>{children}</ColorModeContext>\n}\n\n/**\n * `useColorMode` is a custom hook that returns the current color mode.\n *\n * @see https://yamada-ui.com/docs/hooks/use-color-mode\n */\nexport const useColorMode = (): ColorModeContext => {\n  const context = use(ColorModeContext)\n\n  if (isEmptyObject(context))\n    return {\n      changeColorMode: noop,\n      colorMode: \"light\",\n      forced: false,\n      internalColorMode: \"light\",\n      toggleColorMode: noop,\n    }\n  else return context\n}\n"],"mappings":";;;;;;;;;;AA4BA,MAAa,oBAAA,GAAA,MAAA,cAAA,CAAmD;CAC9D,iBAAA,oBAAA,cAAiB;CACjB,WAAW;CACX,QAAQ;CACR,mBAAmB;CACnB,iBAAA,oBAAA,cAAiB;AACnB,CAAC;AA+BD,MAAa,qBAAiD,EAC5D,UACA,WAAW,iBACX,QAAQ,EACN,mBAAmB,SACnB,4BAA4B,SAC1B,CAAC,GACL,QACA,UAAU,SAAS,WAAW,gBAC9B,aAAaA,iBAAAA,6BACT;CACJ,MAAM,kBAAA,GAAA,MAAA,QAAA,OAEFC,wBAAAA,qBACE,SACA,YACA,kBACA,MACF,GACF;EAAC;EAAQ;EAAkB;EAAS;CAAU,CAChD;CACA,MAAM,cAAcC,6BAAAA,eAAe;CACnC,MAAM,CAAC,mBAAmB,yBAAA,GAAA,MAAA,SAAA,CACM,eAAe,IAAI,CAAC;CACpD,MAAM,EAAE,oBAAoB,oBAAoBC,8BAAAA,mBAAmB;EACjE,WAAW,oBAAoB;GAC7B,IAAI,sBAAsB,UAAU;GAEpC,aAAa,oBAAoB,MAAM;GACvC,WAAW,eAAe;EAC5B;EACA,kBAAkB,eAAe,QAC/B,qBAAqB,SAAS,SAAS,OACzC;CACF,CAAC;CACD,MAAM,YACJ,sBAAsB,WAAW,kBAAkB;CAErD,MAAM,cAAA,GAAA,MAAA,YAAA,EACH,cAAyB;EACxB,MAAM,OAAO,YAAY,eAAe;EAExC,IAAI,CAAC,MAAM;EAEX,MAAM,UAAU,4BACZC,uBAAAA,qBAAqB,WAAW,IAChC,KAAA;EAEJ,KAAK,QAAQ,OAAO;EACpB,KAAK,MAAM,cAAc;EAEzB,UAAU;CACZ,GACA,CAAC,2BAA2B,WAAW,CACzC;CAEA,MAAM,gBAAA,GAAA,MAAA,YAAA,EACH,WAAoB;EACnB,MAAM,MAAM,YAAY,YAAY;EACpC,MAAM,WAAW,YAAY,YAAY;EACzC,MAAM,OAAO,YAAY,eAAe;EAExC,IAAI,CAAC,OAAO,CAAC,MAAM;EAEnB,MAAM,UAAA,GAAA,oBAAA,cAAA,WAAA,CAAoB,QAAQ,IAAI,IAAI,OAAO;EAEjD,OAAO,UAAU,IAAI,SAAS,SAAS,OAAO;EAC9C,OAAO,UAAU,OAAO,SAAS,UAAU,MAAM;CACnD,GACA,CAAC,WAAW,CACd;CAEA,MAAM,mBAAA,GAAA,MAAA,YAAA,EACH,sBAA2C;EAC1C,MAAM,YACJ,sBAAsB,WAClB,mBAAmB,IACnB;EAEN,qBAAqB,iBAAiB;EACtC,aAAa,cAAc,MAAM;EACjC,WAAW,SAAS;EAEpB,eAAe,IAAI,iBAAiB;CACtC,GACA;EAAC;EAAgB;EAAoB;EAAc;CAAU,CAC/D;CAEA,MAAM,mBAAA,GAAA,MAAA,YAAA,OAAoC;EACxC,gBAAgB,cAAc,SAAS,UAAU,MAAM;CACzD,GAAG,CAAC,iBAAiB,SAAS,CAAC;CAE/B,CAAA,GAAA,MAAA,UAAA,OAAgB;EAGd,gBAF0B,eAAe,IAET,CAAC;CACnC,GAAG,CAAC,iBAAiB,cAAc,CAAC;CAmBpC,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD;EAAkB,QAAA,GAAA,MAAA,QAAA,QAhBhB;GACL,iBAAiB,kBAAA,oBAAA,cAAkB,OAAO;GAC1C,WAAW,mBAAmB;GAC9B,QAAQ,oBAAoB,KAAA;GAC5B;GACA,iBAAiB,kBAAA,oBAAA,cAAkB,OAAO;EAC5C,IACA;GACE;GACA;GACA;GACA;GACA;EACF,CAGoC;EAAI;CAA2B,CAAA;AACvE;;;;;;AAOA,MAAa,qBAAuC;CAClD,MAAM,WAAA,GAAA,MAAA,IAAA,CAAc,gBAAgB;CAEpC,KAAA,GAAA,oBAAA,cAAA,cAAA,CAAkB,OAAO,GACvB,OAAO;EACL,iBAAA,oBAAA,cAAiB;EACjB,WAAW;EACX,QAAQ;EACR,mBAAmB;EACnB,iBAAA,oBAAA,cAAiB;CACnB;MACG,OAAO;AACd"}

package/dist/cjs/core/system/create-system.cjs

@@ -37,7 +37,7 @@ const defaultSystem = {
 	layers: require_layer.createLayers(),
 	utils: { getClassName: require_utils_index.utils_exports.bem }
 };
-function createSystem(theme, config = {}) {
+function createSystem(theme, config = {}, rootNode) {
 	const prefix = config.css?.varPrefix ?? "ui";
 	const breakpoints = require_breakpoint.createBreakpoints(theme.breakpoints, config.breakpoint);
 	const layers = require_layer.createLayers(config.css?.layers);
@@ -48,7 +48,7 @@ function createSystem(theme, config = {}) {
 	};
 	const secondaryTokens = createTokens(theme, "secondary", shouldProcess);
 	const tertiaryTokens = createTokens(theme, "tertiary", shouldProcess);
-	const { cssMap, cssVars } = require_var.mergeVars(require_var.createVars(prefix, theme, breakpoints)(primaryTokens), require_var.createVars(prefix, theme, breakpoints)(secondaryTokens), require_var.createVars(prefix, theme, breakpoints)(tertiaryTokens))();
+	const { cssMap, cssVars } = require_var.mergeVars(require_var.createVars(prefix, theme, breakpoints, rootNode)(primaryTokens), require_var.createVars(prefix, theme, breakpoints, rootNode)(secondaryTokens), require_var.createVars(prefix, theme, breakpoints, rootNode)(tertiaryTokens))();
 	const getClassName = (block, element, modifier) => {
 		if (!block) return "";
 		return `${prefix}-${(0, require_utils_index.utils_exports.bem)(block, element, modifier)}`;
@@ -63,7 +63,7 @@ function createSystem(theme, config = {}) {
 			};
 			const nestedSecondaryTokens = createTokens(nestedTheme, "secondary", shouldProcess);
 			const nestedTertiaryTokens = createTokens(nestedTheme, "tertiary", shouldProcess);
-			const { cssVars: nestedCSSVars } = require_var.mergeVars(require_var.createVars(prefix, theme, breakpoints)(nestedPrimaryTokens), require_var.createVars(prefix, theme, breakpoints)(nestedSecondaryTokens), require_var.createVars(prefix, theme, breakpoints)(nestedTertiaryTokens))({
+			const { cssVars: nestedCSSVars } = require_var.mergeVars(require_var.createVars(prefix, theme, breakpoints, rootNode)(nestedPrimaryTokens), require_var.createVars(prefix, theme, breakpoints, rootNode)(nestedSecondaryTokens), require_var.createVars(prefix, theme, breakpoints, rootNode)(nestedTertiaryTokens))({
 				...primaryTokens,
 				...secondaryTokens,
 				...tertiaryTokens
@@ -77,6 +77,7 @@ function createSystem(theme, config = {}) {
 		cssMap,
 		cssVars,
 		layers,
+		rootNode,
 		utils: { getClassName }
 	};
 }

package/dist/cjs/core/system/create-system.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"create-system.cjs","names":["createBreakpoints","createLayers","mergeVars","createVars"],"sources":["../../../../src/core/system/create-system.ts"],"sourcesContent":["import type { Dict, FlattenObjectOptions } from \"../../utils\"\nimport type { CSSAnimationObject, CSSModifierObject } from \"../css\"\nimport type {\n  DefineThemeValue,\n  System,\n  ThemeConfig,\n  UsageTheme,\n} from \"./index.types\"\nimport { bem, flattenObject, isArray, isObject, isUndefined } from \"../../utils\"\nimport { DEFAULT_VAR_PREFIX } from \"../constant\"\nimport { createBreakpoints } from \"./breakpoint\"\nimport { createLayers } from \"./layer\"\nimport { createVars, mergeVars } from \"./var\"\n\nexport type VariableResponsiveValue = Dict<\n  [DefineThemeValue, DefineThemeValue] | DefineThemeValue\n>\n\nexport type VariableColorModeValue = [\n  DefineThemeValue | Dict<DefineThemeValue>,\n  DefineThemeValue | Dict<DefineThemeValue>,\n]\n\nexport type VariableKeyframeValue =\n  | [\n      CSSModifierObject | Dict<CSSModifierObject>,\n      CSSModifierObject | Dict<CSSModifierObject>,\n    ]\n  | CSSModifierObject\n  | Dict<CSSModifierObject>\n\nexport type VariableAnimationValue =\n  | CSSAnimationObject\n  | CSSAnimationObject[]\n  | Dict<CSSAnimationObject>\n\nexport type VariableValue =\n  | DefineThemeValue\n  | VariableAnimationValue\n  | VariableColorModeValue\n  | VariableKeyframeValue\n  | VariableResponsiveValue\n\ninterface VariableToken {\n  semantic: boolean\n  value: VariableValue\n}\n\nexport interface VariableTokens {\n  [key: string]: VariableToken\n}\n\ninterface TokenOptions {\n  [key: string]: FlattenObjectOptions\n}\n\nconst primaryTokens = {\n  aspectRatios: {},\n  blurs: {},\n  borders: {},\n  colors: {},\n  durations: {},\n  easings: {},\n  fonts: {},\n  fontSizes: {},\n  fontWeights: {},\n  letterSpacings: {},\n  lineHeights: {},\n  radii: {},\n  sizes: {},\n  spaces: {},\n  zIndices: {},\n} satisfies TokenOptions\n\ntype PrimaryToken = keyof typeof primaryTokens\n\nconst secondaryTokens = {\n  gradients: {},\n  keyframes: { maxDepth: 1 },\n  shadows: {},\n} satisfies TokenOptions\n\ntype SecondaryToken = keyof typeof secondaryTokens\n\nconst tertiaryTokens = {\n  animations: { shouldProcess: (obj) => !obj.keyframes },\n} satisfies TokenOptions\n\ntype TertiaryToken = keyof typeof tertiaryTokens\n\nconst tokenMap: {\n  [key in \"primary\" | \"secondary\" | \"tertiary\"]: TokenOptions\n} = {\n  primary: primaryTokens,\n  secondary: secondaryTokens,\n  tertiary: tertiaryTokens,\n}\n\nexport type ThemeToken =\n  | \"breakpoints\"\n  | PrimaryToken\n  | SecondaryToken\n  | TertiaryToken\n\nexport const defaultSystem: System = {\n  breakpoints: createBreakpoints(),\n  config: {},\n  cssMap: {},\n  cssVars: {},\n  layers: createLayers(),\n  utils: { getClassName: bem },\n}\n\nexport function createSystem(\n  theme: UsageTheme,\n  config: ThemeConfig = {},\n): System {\n  const prefix = config.css?.varPrefix ?? DEFAULT_VAR_PREFIX\n  const breakpoints = createBreakpoints(theme.breakpoints, config.breakpoint)\n  const layers = createLayers(config.css?.layers)\n  const shouldProcess = config.theme?.responsive\n    ? (obj: any) => !breakpoints.isResponsive(obj, true)\n    : () => true\n\n  const primaryTokens = {\n    ...createTokens(theme, \"primary\", shouldProcess),\n    ...createColorSchemeTokens(theme, undefined, shouldProcess),\n  }\n  const secondaryTokens = createTokens(theme, \"secondary\", shouldProcess)\n  const tertiaryTokens = createTokens(theme, \"tertiary\", shouldProcess)\n\n  const { cssMap, cssVars } = mergeVars(\n    createVars(prefix, theme, breakpoints)(primaryTokens),\n    createVars(prefix, theme, breakpoints)(secondaryTokens),\n    createVars(prefix, theme, breakpoints)(tertiaryTokens),\n  )()\n\n  const getClassName = (\n    block?: string,\n    element?: string,\n    modifier?: string,\n  ) => {\n    if (!block) return \"\"\n\n    const className = bem(block, element, modifier)\n\n    return `${prefix}-${className}`\n  }\n\n  if (theme.themeSchemes) {\n    const themeSchemeEntries = Object.entries<Dict>(theme.themeSchemes)\n\n    for (const [themeScheme, nestedTheme] of themeSchemeEntries) {\n      const themeCondition = `[data-theme=${themeScheme}] &:not([data-theme]), &[data-theme=${themeScheme}]`\n\n      const nestedPrimaryTokens = {\n        ...createTokens(nestedTheme, \"primary\", shouldProcess),\n        ...createColorSchemeTokens(theme, nestedTheme, shouldProcess),\n      }\n      const nestedSecondaryTokens = createTokens(\n        nestedTheme,\n        \"secondary\",\n        shouldProcess,\n      )\n      const nestedTertiaryTokens = createTokens(\n        nestedTheme,\n        \"tertiary\",\n        shouldProcess,\n      )\n\n      const { cssVars: nestedCSSVars } = mergeVars(\n        createVars(prefix, theme, breakpoints)(nestedPrimaryTokens),\n        createVars(prefix, theme, breakpoints)(nestedSecondaryTokens),\n        createVars(prefix, theme, breakpoints)(nestedTertiaryTokens),\n      )({ ...primaryTokens, ...secondaryTokens, ...tertiaryTokens })\n\n      cssVars[themeCondition] = nestedCSSVars\n    }\n  }\n\n  return {\n    breakpoints,\n    config,\n    cssMap,\n    cssVars,\n    layers,\n    utils: { getClassName },\n  }\n}\n\nfunction createColorSchemeTokens(\n  theme: Dict,\n  nestedTheme: Dict | undefined,\n  shouldProcess: FlattenObjectOptions[\"shouldProcess\"],\n) {\n  const colors = { base: theme.colors ?? {}, nested: nestedTheme?.colors ?? {} }\n  const semanticColors = {\n    base: theme.semanticTokens?.colors ?? {},\n    nested: nestedTheme?.semanticTokens?.colors ?? {},\n  }\n  const colorSchemeTokens = flattenObject(\n    (nestedTheme ?? theme).semanticTokens?.colorSchemes ?? {},\n    { shouldProcess },\n  )\n\n  const results: VariableTokens = {}\n\n  function insertToken(\n    primaryKey: string,\n    secondaryKey: string | undefined,\n    value: any,\n  ) {\n    if (isUndefined(value)) return\n\n    if (!secondaryKey || secondaryKey === \"base\")\n      results[`colors.${primaryKey}`] = { semantic: true, value }\n    else\n      results[`colors.${primaryKey}.${secondaryKey}`] = {\n        semantic: true,\n        value,\n      }\n  }\n\n  function processValue(primaryKey: string, colors: any, keyOrValue: any) {\n    const value = colors.nested[keyOrValue] ?? colors.base[keyOrValue]\n\n    if (isObject(value)) {\n      const tokens = flattenObject(value, { shouldProcess })\n\n      Object.keys(tokens).forEach((secondaryKey) => {\n        const value =\n          secondaryKey === \"base\" ? keyOrValue : `${keyOrValue}.${secondaryKey}`\n\n        insertToken(primaryKey, secondaryKey, value)\n      })\n    } else {\n      insertToken(primaryKey, undefined, keyOrValue)\n    }\n  }\n\n  function processColorModeValue(\n    primaryKey: string,\n    colors: any,\n    keyOrValue: any[],\n  ) {\n    const [lightValue, darkValue] = keyOrValue\n    const lightColors = colors.nested[lightValue] ?? colors.base[lightValue]\n    const darkColors = colors.nested[darkValue] ?? colors.base[darkValue]\n\n    if (isObject(lightColors) && isObject(darkColors)) {\n      const tokens = flattenObject(lightColors, { shouldProcess })\n\n      Object.keys(tokens).forEach((secondaryKey) => {\n        const value = [\n          secondaryKey === \"base\"\n            ? lightValue\n            : `${lightValue}.${secondaryKey}`,\n          secondaryKey === \"base\" ? darkValue : `${darkValue}.${secondaryKey}`,\n        ]\n\n        insertToken(primaryKey, secondaryKey, value)\n      })\n    } else if (!isObject(lightValue) && !isObject(darkValue)) {\n      insertToken(primaryKey, undefined, [lightValue, darkValue])\n    }\n  }\n\n  Object.entries(colorSchemeTokens).forEach(([primaryKey, value]) => {\n    if (isArray(value)) {\n      processColorModeValue(primaryKey, colors, value)\n      processColorModeValue(primaryKey, semanticColors, value)\n    } else {\n      processValue(primaryKey, colors, value)\n      processValue(primaryKey, semanticColors, value)\n    }\n  })\n\n  return results\n}\n\nfunction createTokens(\n  theme: Dict,\n  target: \"primary\" | \"secondary\" | \"tertiary\",\n  shouldProcess: FlattenObjectOptions[\"shouldProcess\"] = () => true,\n) {\n  const results: VariableTokens = {}\n\n  Object.entries(tokenMap[target]).forEach(\n    ([primaryKey, { shouldProcess: shouldProcessProp, ...rest }]) => {\n      const options: FlattenObjectOptions = {\n        ...rest,\n        shouldProcess: (obj) =>\n          shouldProcess(obj) && (!shouldProcessProp || shouldProcessProp(obj)),\n      }\n\n      const tokens = flattenObject(theme[primaryKey] ?? {}, options)\n      const semanticTokens = flattenObject(\n        theme.semanticTokens?.[primaryKey] ?? {},\n        options,\n      )\n\n      Object.entries(tokens).forEach(([secondaryKey, value]) => {\n        const token = `${primaryKey}.${secondaryKey}`\n\n        results[token] = { semantic: false, value }\n      })\n\n      Object.entries(semanticTokens).forEach(([secondaryKey, value]) => {\n        let token = `${primaryKey}.${secondaryKey}`\n\n        if (token.endsWith(\".base\")) token = token.replace(\".base\", \"\")\n\n        results[token] = { semantic: true, value }\n      })\n    },\n  )\n\n  return results\n}\n"],"mappings":"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"}
+{"version":3,"file":"create-system.cjs","names":["createBreakpoints","createLayers","mergeVars","createVars"],"sources":["../../../../src/core/system/create-system.ts"],"sourcesContent":["import type { Dict, FlattenObjectOptions } from \"../../utils\"\nimport type { CSSAnimationObject, CSSModifierObject } from \"../css\"\nimport type {\n  DefineThemeValue,\n  System,\n  ThemeConfig,\n  UsageTheme,\n} from \"./index.types\"\nimport { bem, flattenObject, isArray, isObject, isUndefined } from \"../../utils\"\nimport { DEFAULT_VAR_PREFIX } from \"../constant\"\nimport { createBreakpoints } from \"./breakpoint\"\nimport { createLayers } from \"./layer\"\nimport { createVars, mergeVars } from \"./var\"\n\nexport type VariableResponsiveValue = Dict<\n  [DefineThemeValue, DefineThemeValue] | DefineThemeValue\n>\n\nexport type VariableColorModeValue = [\n  DefineThemeValue | Dict<DefineThemeValue>,\n  DefineThemeValue | Dict<DefineThemeValue>,\n]\n\nexport type VariableKeyframeValue =\n  | [\n      CSSModifierObject | Dict<CSSModifierObject>,\n      CSSModifierObject | Dict<CSSModifierObject>,\n    ]\n  | CSSModifierObject\n  | Dict<CSSModifierObject>\n\nexport type VariableAnimationValue =\n  | CSSAnimationObject\n  | CSSAnimationObject[]\n  | Dict<CSSAnimationObject>\n\nexport type VariableValue =\n  | DefineThemeValue\n  | VariableAnimationValue\n  | VariableColorModeValue\n  | VariableKeyframeValue\n  | VariableResponsiveValue\n\ninterface VariableToken {\n  semantic: boolean\n  value: VariableValue\n}\n\nexport interface VariableTokens {\n  [key: string]: VariableToken\n}\n\ninterface TokenOptions {\n  [key: string]: FlattenObjectOptions\n}\n\nconst primaryTokens = {\n  aspectRatios: {},\n  blurs: {},\n  borders: {},\n  colors: {},\n  durations: {},\n  easings: {},\n  fonts: {},\n  fontSizes: {},\n  fontWeights: {},\n  letterSpacings: {},\n  lineHeights: {},\n  radii: {},\n  sizes: {},\n  spaces: {},\n  zIndices: {},\n} satisfies TokenOptions\n\ntype PrimaryToken = keyof typeof primaryTokens\n\nconst secondaryTokens = {\n  gradients: {},\n  keyframes: { maxDepth: 1 },\n  shadows: {},\n} satisfies TokenOptions\n\ntype SecondaryToken = keyof typeof secondaryTokens\n\nconst tertiaryTokens = {\n  animations: { shouldProcess: (obj) => !obj.keyframes },\n} satisfies TokenOptions\n\ntype TertiaryToken = keyof typeof tertiaryTokens\n\nconst tokenMap: {\n  [key in \"primary\" | \"secondary\" | \"tertiary\"]: TokenOptions\n} = {\n  primary: primaryTokens,\n  secondary: secondaryTokens,\n  tertiary: tertiaryTokens,\n}\n\nexport type ThemeToken =\n  | \"breakpoints\"\n  | PrimaryToken\n  | SecondaryToken\n  | TertiaryToken\n\nexport const defaultSystem: System = {\n  breakpoints: createBreakpoints(),\n  config: {},\n  cssMap: {},\n  cssVars: {},\n  layers: createLayers(),\n  utils: { getClassName: bem },\n}\n\nexport function createSystem(\n  theme: UsageTheme,\n  config: ThemeConfig = {},\n  rootNode?: Document | Node | ShadowRoot,\n): System {\n  const prefix = config.css?.varPrefix ?? DEFAULT_VAR_PREFIX\n  const breakpoints = createBreakpoints(theme.breakpoints, config.breakpoint)\n  const layers = createLayers(config.css?.layers)\n  const shouldProcess = config.theme?.responsive\n    ? (obj: any) => !breakpoints.isResponsive(obj, true)\n    : () => true\n\n  const primaryTokens = {\n    ...createTokens(theme, \"primary\", shouldProcess),\n    ...createColorSchemeTokens(theme, undefined, shouldProcess),\n  }\n  const secondaryTokens = createTokens(theme, \"secondary\", shouldProcess)\n  const tertiaryTokens = createTokens(theme, \"tertiary\", shouldProcess)\n\n  const { cssMap, cssVars } = mergeVars(\n    createVars(prefix, theme, breakpoints, rootNode)(primaryTokens),\n    createVars(prefix, theme, breakpoints, rootNode)(secondaryTokens),\n    createVars(prefix, theme, breakpoints, rootNode)(tertiaryTokens),\n  )()\n\n  const getClassName = (\n    block?: string,\n    element?: string,\n    modifier?: string,\n  ) => {\n    if (!block) return \"\"\n\n    const className = bem(block, element, modifier)\n\n    return `${prefix}-${className}`\n  }\n\n  if (theme.themeSchemes) {\n    const themeSchemeEntries = Object.entries<Dict>(theme.themeSchemes)\n\n    for (const [themeScheme, nestedTheme] of themeSchemeEntries) {\n      const themeCondition = `[data-theme=${themeScheme}] &:not([data-theme]), &[data-theme=${themeScheme}]`\n\n      const nestedPrimaryTokens = {\n        ...createTokens(nestedTheme, \"primary\", shouldProcess),\n        ...createColorSchemeTokens(theme, nestedTheme, shouldProcess),\n      }\n      const nestedSecondaryTokens = createTokens(\n        nestedTheme,\n        \"secondary\",\n        shouldProcess,\n      )\n      const nestedTertiaryTokens = createTokens(\n        nestedTheme,\n        \"tertiary\",\n        shouldProcess,\n      )\n\n      const { cssVars: nestedCSSVars } = mergeVars(\n        createVars(prefix, theme, breakpoints, rootNode)(nestedPrimaryTokens),\n        createVars(prefix, theme, breakpoints, rootNode)(nestedSecondaryTokens),\n        createVars(prefix, theme, breakpoints, rootNode)(nestedTertiaryTokens),\n      )({ ...primaryTokens, ...secondaryTokens, ...tertiaryTokens })\n\n      cssVars[themeCondition] = nestedCSSVars\n    }\n  }\n\n  return {\n    breakpoints,\n    config,\n    cssMap,\n    cssVars,\n    layers,\n    rootNode,\n    utils: { getClassName },\n  }\n}\n\nfunction createColorSchemeTokens(\n  theme: Dict,\n  nestedTheme: Dict | undefined,\n  shouldProcess: FlattenObjectOptions[\"shouldProcess\"],\n) {\n  const colors = { base: theme.colors ?? {}, nested: nestedTheme?.colors ?? {} }\n  const semanticColors = {\n    base: theme.semanticTokens?.colors ?? {},\n    nested: nestedTheme?.semanticTokens?.colors ?? {},\n  }\n  const colorSchemeTokens = flattenObject(\n    (nestedTheme ?? theme).semanticTokens?.colorSchemes ?? {},\n    { shouldProcess },\n  )\n\n  const results: VariableTokens = {}\n\n  function insertToken(\n    primaryKey: string,\n    secondaryKey: string | undefined,\n    value: any,\n  ) {\n    if (isUndefined(value)) return\n\n    if (!secondaryKey || secondaryKey === \"base\")\n      results[`colors.${primaryKey}`] = { semantic: true, value }\n    else\n      results[`colors.${primaryKey}.${secondaryKey}`] = {\n        semantic: true,\n        value,\n      }\n  }\n\n  function processValue(primaryKey: string, colors: any, keyOrValue: any) {\n    const value = colors.nested[keyOrValue] ?? colors.base[keyOrValue]\n\n    if (isObject(value)) {\n      const tokens = flattenObject(value, { shouldProcess })\n\n      Object.keys(tokens).forEach((secondaryKey) => {\n        const value =\n          secondaryKey === \"base\" ? keyOrValue : `${keyOrValue}.${secondaryKey}`\n\n        insertToken(primaryKey, secondaryKey, value)\n      })\n    } else {\n      insertToken(primaryKey, undefined, keyOrValue)\n    }\n  }\n\n  function processColorModeValue(\n    primaryKey: string,\n    colors: any,\n    keyOrValue: any[],\n  ) {\n    const [lightValue, darkValue] = keyOrValue\n    const lightColors = colors.nested[lightValue] ?? colors.base[lightValue]\n    const darkColors = colors.nested[darkValue] ?? colors.base[darkValue]\n\n    if (isObject(lightColors) && isObject(darkColors)) {\n      const tokens = flattenObject(lightColors, { shouldProcess })\n\n      Object.keys(tokens).forEach((secondaryKey) => {\n        const value = [\n          secondaryKey === \"base\"\n            ? lightValue\n            : `${lightValue}.${secondaryKey}`,\n          secondaryKey === \"base\" ? darkValue : `${darkValue}.${secondaryKey}`,\n        ]\n\n        insertToken(primaryKey, secondaryKey, value)\n      })\n    } else if (!isObject(lightValue) && !isObject(darkValue)) {\n      insertToken(primaryKey, undefined, [lightValue, darkValue])\n    }\n  }\n\n  Object.entries(colorSchemeTokens).forEach(([primaryKey, value]) => {\n    if (isArray(value)) {\n      processColorModeValue(primaryKey, colors, value)\n      processColorModeValue(primaryKey, semanticColors, value)\n    } else {\n      processValue(primaryKey, colors, value)\n      processValue(primaryKey, semanticColors, value)\n    }\n  })\n\n  return results\n}\n\nfunction createTokens(\n  theme: Dict,\n  target: \"primary\" | \"secondary\" | \"tertiary\",\n  shouldProcess: FlattenObjectOptions[\"shouldProcess\"] = () => true,\n) {\n  const results: VariableTokens = {}\n\n  Object.entries(tokenMap[target]).forEach(\n    ([primaryKey, { shouldProcess: shouldProcessProp, ...rest }]) => {\n      const options: FlattenObjectOptions = {\n        ...rest,\n        shouldProcess: (obj) =>\n          shouldProcess(obj) && (!shouldProcessProp || shouldProcessProp(obj)),\n      }\n\n      const tokens = flattenObject(theme[primaryKey] ?? {}, options)\n      const semanticTokens = flattenObject(\n        theme.semanticTokens?.[primaryKey] ?? {},\n        options,\n      )\n\n      Object.entries(tokens).forEach(([secondaryKey, value]) => {\n        const token = `${primaryKey}.${secondaryKey}`\n\n        results[token] = { semantic: false, value }\n      })\n\n      Object.entries(semanticTokens).forEach(([secondaryKey, value]) => {\n        let token = `${primaryKey}.${secondaryKey}`\n\n        if (token.endsWith(\".base\")) token = token.replace(\".base\", \"\")\n\n        results[token] = { semantic: true, value }\n      })\n    },\n  )\n\n  return results\n}\n"],"mappings":"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"}

package/dist/cjs/core/system/environment-provider.cjs

@@ -5,6 +5,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/core/system/environment-provider.tsx
 const defaultEnvironment = {
 	getDocument: () => document,
+	getRootElement: () => document.documentElement,
 	getRootNode: () => document,
 	getWindow: () => window
 };
@@ -14,19 +15,27 @@ const EnvironmentProvider = ({ children, value }) => {
 	const getRootNode = (0, react.useCallback)(() => {
 		return (0, require_utils_index.utils_exports.runIfFn)(value) ?? ref.current?.getRootNode() ?? document;
 	}, [value, ref]);
+	const getRootElement = (0, react.useCallback)(() => {
+		const rootNode = getRootNode();
+		if ((0, require_utils_index.utils_exports.isShadowRoot)(rootNode) && (0, require_utils_index.utils_exports.isHTMLElement)(rootNode.host)) return rootNode.host;
+		if ((0, require_utils_index.utils_exports.isHTMLElement)(rootNode)) return rootNode;
+		return (0, require_utils_index.utils_exports.getDocument)(rootNode).documentElement;
+	}, [getRootNode]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(EnvironmentContext, {
 		value: (0, react.useMemo)(() => {
 			if ((0, require_utils_index.utils_exports.createdDom)()) return {
 				getDocument: () => (0, require_utils_index.utils_exports.getDocument)(getRootNode()),
+				getRootElement,
 				getRootNode,
 				getWindow: () => (0, require_utils_index.utils_exports.getWindow)(getRootNode())
 			};
 			else return {
 				getDocument: () => void 0,
+				getRootElement: () => void 0,
 				getRootNode: () => void 0,
 				getWindow: () => void 0
 			};
-		}, [getRootNode]),
+		}, [getRootElement, getRootNode]),
 		children: [children, !value ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			ref,
 			hidden: true

package/dist/cjs/core/system/environment-provider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"environment-provider.cjs","names":[],"sources":["../../../../src/core/system/environment-provider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport { createContext, use, useCallback, useMemo, useRef } from \"react\"\nimport { createdDom, getDocument, getWindow, runIfFn } from \"../../utils\"\n\nexport type RootNode = Document | Node | ShadowRoot\n\nexport interface Environment {\n  getDocument: () => Document | undefined\n  getRootNode: () => RootNode | undefined\n  getWindow: () => undefined | Window\n}\n\nexport const defaultEnvironment: Environment = {\n  getDocument: () => document,\n  getRootNode: () => document,\n  getWindow: () => window,\n}\n\nconst EnvironmentContext = createContext<Environment>(defaultEnvironment)\n\nexport interface EnvironmentProviderProps extends PropsWithChildren {\n  value?: (() => RootNode) | RootNode\n}\n\nexport const EnvironmentProvider: FC<EnvironmentProviderProps> = ({\n  children,\n  value,\n}) => {\n  const ref = useRef<HTMLSpanElement>(null)\n\n  const getRootNode = useCallback(() => {\n    return runIfFn(value) ?? ref.current?.getRootNode() ?? document\n  }, [value, ref])\n\n  const context = useMemo<Environment>(() => {\n    if (createdDom())\n      return {\n        getDocument: () => getDocument(getRootNode()),\n        getRootNode,\n        getWindow: () => getWindow(getRootNode()),\n      }\n    else\n      return {\n        getDocument: () => undefined,\n        getRootNode: () => undefined,\n        getWindow: () => undefined,\n      }\n  }, [getRootNode])\n\n  return (\n    <EnvironmentContext value={context}>\n      {children}\n\n      {!value ? <span ref={ref} hidden /> : null}\n    </EnvironmentContext>\n  )\n}\n\nexport const useEnvironment = () => {\n  return use(EnvironmentContext)\n}\n"],"mappings":";;;;;AAcA,MAAa,qBAAkC;CAC7C,mBAAmB;CACnB,mBAAmB;CACnB,iBAAiB;AACnB;AAEA,MAAM,sBAAA,GAAA,MAAA,cAAA,CAAgD,kBAAkB;AAMxE,MAAa,uBAAqD,EAChE,UACA,YACI;CACJ,MAAM,OAAA,GAAA,MAAA,OAAA,CAA8B,IAAI;CAExC,MAAM,eAAA,GAAA,MAAA,YAAA,OAAgC;EACpC,QAAA,GAAA,oBAAA,cAAA,QAAA,CAAe,KAAK,KAAK,IAAI,SAAS,YAAY,KAAK;CACzD,GAAG,CAAC,OAAO,GAAG,CAAC;CAiBf,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,oBAAD;EAAoB,QAAA,GAAA,MAAA,QAAA,OAhBqB;GACzC,KAAA,GAAA,oBAAA,cAAA,WAAA,CAAe,GACb,OAAO;IACL,oBAAA,GAAA,oBAAA,cAAA,YAAA,CAA+B,YAAY,CAAC;IAC5C;IACA,kBAAA,GAAA,oBAAA,cAAA,UAAA,CAA2B,YAAY,CAAC;GAC1C;QAEA,OAAO;IACL,mBAAmB,KAAA;IACnB,mBAAmB,KAAA;IACnB,iBAAiB,KAAA;GACnB;EACJ,GAAG,CAAC,WAAW,CAGoB;YAAjC,CACG,UAEA,CAAC,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAW;GAAK,QAAA;EAAQ,CAAA,IAAI,IACpB;;AAExB;AAEA,MAAa,uBAAuB;CAClC,QAAA,GAAA,MAAA,IAAA,CAAW,kBAAkB;AAC/B"}
+{"version":3,"file":"environment-provider.cjs","names":[],"sources":["../../../../src/core/system/environment-provider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport { createContext, use, useCallback, useMemo, useRef } from \"react\"\nimport {\n  createdDom,\n  getDocument,\n  getWindow,\n  isHTMLElement,\n  isShadowRoot,\n  runIfFn,\n} from \"../../utils\"\n\nexport type RootNode = Document | Node | ShadowRoot\n\nexport interface Environment {\n  getDocument: () => Document | undefined\n  getRootElement: () => HTMLElement | undefined\n  getRootNode: () => RootNode | undefined\n  getWindow: () => undefined | Window\n}\n\nexport const defaultEnvironment: Environment = {\n  getDocument: () => document,\n  getRootElement: () => document.documentElement,\n  getRootNode: () => document,\n  getWindow: () => window,\n}\n\nconst EnvironmentContext = createContext<Environment>(defaultEnvironment)\n\nexport interface EnvironmentProviderProps extends PropsWithChildren {\n  value?: (() => RootNode) | RootNode\n}\n\nexport const EnvironmentProvider: FC<EnvironmentProviderProps> = ({\n  children,\n  value,\n}) => {\n  const ref = useRef<HTMLSpanElement>(null)\n\n  const getRootNode = useCallback(() => {\n    return runIfFn(value) ?? ref.current?.getRootNode() ?? document\n  }, [value, ref])\n\n  const getRootElement = useCallback(() => {\n    const rootNode = getRootNode()\n\n    if (isShadowRoot(rootNode) && isHTMLElement(rootNode.host))\n      return rootNode.host\n    if (isHTMLElement(rootNode)) return rootNode\n\n    return getDocument(rootNode).documentElement\n  }, [getRootNode])\n\n  const context = useMemo<Environment>(() => {\n    if (createdDom())\n      return {\n        getDocument: () => getDocument(getRootNode()),\n        getRootElement,\n        getRootNode,\n        getWindow: () => getWindow(getRootNode()),\n      }\n    else\n      return {\n        getDocument: () => undefined,\n        getRootElement: () => undefined,\n        getRootNode: () => undefined,\n        getWindow: () => undefined,\n      }\n  }, [getRootElement, getRootNode])\n\n  return (\n    <EnvironmentContext value={context}>\n      {children}\n\n      {!value ? <span ref={ref} hidden /> : null}\n    </EnvironmentContext>\n  )\n}\n\nexport const useEnvironment = () => {\n  return use(EnvironmentContext)\n}\n"],"mappings":";;;;;AAsBA,MAAa,qBAAkC;CAC7C,mBAAmB;CACnB,sBAAsB,SAAS;CAC/B,mBAAmB;CACnB,iBAAiB;AACnB;AAEA,MAAM,sBAAA,GAAA,MAAA,cAAA,CAAgD,kBAAkB;AAMxE,MAAa,uBAAqD,EAChE,UACA,YACI;CACJ,MAAM,OAAA,GAAA,MAAA,OAAA,CAA8B,IAAI;CAExC,MAAM,eAAA,GAAA,MAAA,YAAA,OAAgC;EACpC,QAAA,GAAA,oBAAA,cAAA,QAAA,CAAe,KAAK,KAAK,IAAI,SAAS,YAAY,KAAK;CACzD,GAAG,CAAC,OAAO,GAAG,CAAC;CAEf,MAAM,kBAAA,GAAA,MAAA,YAAA,OAAmC;EACvC,MAAM,WAAW,YAAY;EAE7B,KAAA,GAAA,oBAAA,cAAA,aAAA,CAAiB,QAAQ,MAAA,GAAA,oBAAA,cAAA,cAAA,CAAmB,SAAS,IAAI,GACvD,OAAO,SAAS;EAClB,KAAA,GAAA,oBAAA,cAAA,cAAA,CAAkB,QAAQ,GAAG,OAAO;EAEpC,QAAA,GAAA,oBAAA,cAAA,YAAA,CAAmB,QAAQ,CAAC,CAAC;CAC/B,GAAG,CAAC,WAAW,CAAC;CAmBhB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,oBAAD;EAAoB,QAAA,GAAA,MAAA,QAAA,OAlBqB;GACzC,KAAA,GAAA,oBAAA,cAAA,WAAA,CAAe,GACb,OAAO;IACL,oBAAA,GAAA,oBAAA,cAAA,YAAA,CAA+B,YAAY,CAAC;IAC5C;IACA;IACA,kBAAA,GAAA,oBAAA,cAAA,UAAA,CAA2B,YAAY,CAAC;GAC1C;QAEA,OAAO;IACL,mBAAmB,KAAA;IACnB,sBAAsB,KAAA;IACtB,mBAAmB,KAAA;IACnB,iBAAiB,KAAA;GACnB;EACJ,GAAG,CAAC,gBAAgB,WAAW,CAGI;YAAjC,CACG,UAEA,CAAC,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAW;GAAK,QAAA;EAAQ,CAAA,IAAI,IACpB;;AAExB;AAEA,MAAa,uBAAuB;CAClC,QAAA,GAAA,MAAA,IAAA,CAAW,kBAAkB;AAC/B"}