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

package/dist/esm/core/system/var.js.map

@@ -1 +1 @@
-{"version":3,"file":"var.js","names":["calc"],"sources":["../../../../src/core/system/var.ts"],"sourcesContent":["import type { Dict } from \"../../utils\"\nimport type { CSSProperties, StyleValueWithCondition } from \"../css\"\nimport type {\n  CSSMap,\n  DefineThemeValue,\n  System,\n  ThemeToken,\n  UsageTheme,\n  VariableTokens,\n  VariableValue,\n} from \"../system\"\nimport type { Breakpoints } from \"./breakpoint\"\nimport {\n  calc,\n  escape,\n  isArray,\n  isNull,\n  isObject,\n  isString,\n  isUndefined,\n  merge,\n  replaceObject,\n} from \"../../utils\"\nimport { DEFAULT_VAR_PREFIX } from \"../constant\"\nimport {\n  animation,\n  colorMix,\n  conditions,\n  css,\n  getStyle,\n  gradient,\n  injectKeyframes,\n  isCSSFunction,\n  isCSSVar,\n} from \"../css\"\nimport { isInterpolation } from \"../css/utils\"\nimport { defaultSystem } from \"../system\"\n\ntype ParsedValue = number | string | undefined\n\ninterface Variable {\n  reference: string\n  variable: string\n}\n\nexport function transformInterpolation(\n  value: any,\n  callback: (value: string, fallbackValue?: string) => string,\n) {\n  if (isString(value))\n    return value.replace(/\\{(.*?)\\}/g, (_, value) => {\n      const [token, fallbackValue] = value.split(/,(.+)/)\n\n      return callback(token.trim(), fallbackValue?.trim())\n    })\n  else return value\n}\n\nexport function getVar(token: string, fallback?: string) {\n  if (!token.startsWith(\"--\")) token = `--${token}`\n\n  token = token.replace(/[^-_a-zA-Z0-9]/g, \"\")\n\n  return fallback ? `var(${token}, ${fallback})` : `var(${token})`\n}\n\nexport function getVarName(system: System) {\n  return function (token: string) {\n    const prefix = system.config.css?.varPrefix ?? DEFAULT_VAR_PREFIX\n\n    return `--${prefix}-${token}`\n  }\n}\n\nexport function getColorSchemeVar(system: System) {\n  return function (value: any, fallback?: string) {\n    if (!isString(value)) return value\n\n    const prefix = system.config.css?.varPrefix ?? DEFAULT_VAR_PREFIX\n\n    const [, token] = value.split(\".\")\n\n    return getVar(`${prefix}-colorScheme-${token}`, fallback)\n  }\n}\n\nconst isGradient = (token: string) => token.startsWith(\"gradients.\")\nconst isKeyframes = (token: string) => token.startsWith(\"keyframes.\")\nconst isAnimation = (token: string) => token.startsWith(\"animations.\")\nconst isSpace = (token: string) => token.startsWith(\"spaces.\")\nconst isColor = (token: string) => token.startsWith(\"colors.\")\nexport const isColorScheme = (token: any) =>\n  isString(token) && token.startsWith(\"colorScheme.\") && !token.includes(\"/\")\n\nexport function createVars(\n  prefix: string = DEFAULT_VAR_PREFIX,\n  theme: UsageTheme,\n  breakpoints: Breakpoints,\n) {\n  return function (tokens: VariableTokens) {\n    const { getQuery, isResponsive } = breakpoints\n\n    function tokenToVar(token: string): Variable {\n      token = token.replace(/\\./g, \"-\")\n      token = token.replace(/\\//g, \"\\\\/\")\n\n      const variable = `--${[prefix, escape(token, \"-\")].filter(Boolean).join(\"-\")}`\n      const reference = `var(${variable})`\n\n      return { reference, variable }\n    }\n\n    return function (\n      cssMap: CSSMap = {},\n      cssVars: Dict = {},\n      prevTokens?: VariableTokens,\n    ): { cssMap: CSSMap; cssVars: Dict } {\n      const system: System = { ...defaultSystem, cssMap }\n      const options = { css, system, theme }\n\n      function getRelatedReference(\n        token: string,\n        value: ParsedValue = \"\",\n      ): [ParsedValue, Exclude<ParsedValue, undefined>] {\n        const relatedToken = [token.split(\".\")[0], value].join(\".\")\n\n        if (token === relatedToken) return [undefined, value]\n\n        const targetToken = tokens[relatedToken] ?? prevTokens?.[relatedToken]\n\n        if (!targetToken) return [undefined, value]\n\n        const { reference, variable } = tokenToVar(relatedToken)\n\n        return [variable, reference]\n      }\n\n      function valueToVar(value: any) {\n        return transformInterpolation(value, (value, fallbackValue) => {\n          if (value.includes(\"colors.\") || value.includes(\"colorScheme.\")) {\n            if (isColorScheme(value)) return getColorSchemeVar(system)(value)\n\n            return colorMix(value, { fallback: fallbackValue, system })\n          } else {\n            const token = tokens[value] ?? prevTokens?.[value]\n\n            if (token) {\n              return tokenToVar(value).reference\n            } else if (value in cssMap && cssMap[value]?.ref) {\n              return cssMap[value].ref\n            } else if (fallbackValue) {\n              fallbackValue =\n                fallbackValue in cssMap && cssMap[fallbackValue]?.ref\n                  ? cssMap[fallbackValue]?.ref\n                  : fallbackValue\n\n              return `var(--${prefix}-${value}, ${fallbackValue})`\n            } else {\n              return `var(--${prefix}-${value})`\n            }\n          }\n        })\n      }\n\n      function createNegativeVar(token: string, reference: string) {\n        const paths = token.split(\".\")\n        const [start, ...rest] = paths\n\n        const negativeToken = `${start}.-${rest.join(\".\")}`\n\n        const negativeReference = calc.negate(reference)\n\n        return { negativeReference, negativeToken }\n      }\n\n      function createAnimationVar(value: VariableValue) {\n        if (isArray(value))\n          return value.map((value) => animation(value, options)).join(\",\")\n        else return animation(value, options)\n      }\n\n      function createGradientVar(token: string, value: DefineThemeValue) {\n        return function (semantic: boolean) {\n          if (!semantic) {\n            return gradient(value, options)\n          } else {\n            const [variable, reference] = getRelatedReference(token, value)\n\n            return variable ? reference : gradient(value, options)\n          }\n        }\n      }\n\n      function createKeyframesVar(token: string, value: any) {\n        return function (semantic: boolean) {\n          if (!semantic) {\n            return injectKeyframes(css(system, theme)(value))\n          } else {\n            const [variable, reference] = getRelatedReference(token, value)\n\n            return variable\n              ? reference\n              : injectKeyframes(css(system, theme)(value))\n          }\n        }\n      }\n\n      function createColorVar(\n        token: string,\n        properties: string[],\n        value: DefineThemeValue,\n      ) {\n        return function (semantic: boolean) {\n          if (!semantic) {\n            return colorMix(value, { ...options, properties })\n          } else {\n            const [variable, reference] = getRelatedReference(token, value)\n\n            return variable\n              ? reference\n              : colorMix(value, { ...options, properties })\n          }\n        }\n      }\n\n      function createVar(\n        token: string,\n        value: VariableValue,\n        variable: string,\n      ) {\n        return function (semantic: boolean, queries: string[] = []) {\n          if (isAnimation(token)) value = createAnimationVar(value)\n\n          if (isArray(value)) {\n            const [lightValue, darkValue] = value\n\n            createVar(token, lightValue, variable)(semantic, queries)\n            createVar(\n              token,\n              darkValue,\n              variable,\n            )(semantic, [...queries, conditions._dark])\n          } else if (isResponsive(value, true)) {\n            Object.entries(value).forEach(([key, value]) => {\n              if (key === \"base\") {\n                createVar(token, value, variable)(semantic, queries)\n              } else {\n                const query = getQuery(key)\n\n                if (!query) return\n\n                createVar(token, value, variable)(semantic, [...queries, query])\n              }\n            })\n          } else {\n            const computedValue: DefineThemeValue = valueToVar(value)\n\n            let resolvedValue: DefineThemeValue | Dict = computedValue\n\n            if (isKeyframes(token)) {\n              resolvedValue = createKeyframesVar(token, computedValue)(semantic)\n            } else if (isGradient(token)) {\n              resolvedValue = createGradientVar(token, computedValue)(semantic)\n            } else if (isColor(token)) {\n              resolvedValue = createColorVar(\n                token,\n                [variable],\n                computedValue,\n              )(semantic)\n            } else if (semantic) {\n              const [, reference] = getRelatedReference(token, computedValue)\n\n              resolvedValue = reference\n            }\n\n            if (!isObject(resolvedValue))\n              resolvedValue = { [variable]: resolvedValue }\n\n            const resolvedCssVars = queries.reduceRight<Dict>(\n              (prev, key) => ({ [key]: prev }),\n              resolvedValue,\n            )\n\n            cssVars = merge(cssVars, resolvedCssVars)\n          }\n        }\n      }\n\n      for (let [token, { semantic, value }] of Object.entries(tokens)) {\n        const { reference, variable } = tokenToVar(token)\n\n        createVar(token, value, variable)(semantic)\n\n        if (isSpace(token)) {\n          const { negativeReference, negativeToken } = createNegativeVar(\n            token,\n            reference,\n          )\n\n          cssMap[negativeToken] = { ref: negativeReference, var: variable }\n        }\n\n        cssMap[token] = { ref: reference, var: variable }\n      }\n\n      return { cssMap, cssVars }\n    }\n  }\n}\n\nexport type CreateVars = ReturnType<ReturnType<typeof createVars>>\n\nexport function mergeVars(...fns: CreateVars[]) {\n  return function (prevTokens?: VariableTokens) {\n    let cssMap: CSSMap = {}\n    let cssVars: Dict = {}\n\n    for (const fn of fns) {\n      const result = fn(cssMap, cssVars, prevTokens)\n\n      cssMap = { ...cssMap, ...result.cssMap }\n      cssVars = { ...cssVars, ...result.cssVars }\n    }\n\n    return { cssMap, cssVars }\n  }\n}\n\nexport function varAttr<Y = StyleValueWithCondition<number | string>>(\n  value: undefined | Y,\n  token?: ThemeToken,\n  fallbackValue?: string,\n): undefined | Y {\n  if (isUndefined(value) || isNull(value) || isCSSFunction(value)) return value\n\n  if (isObject(value) || isArray(value))\n    return replaceObject(value, (value) => varAttr(value, token, fallbackValue))\n  else\n    return token\n      ? (`{${token}.${value as number | string}, ${fallbackValue ?? (value as number | string)}}` as Y)\n      : value\n}\n\nexport function injectVars<Y extends Dict | Dict[] | undefined>(\n  objOrArray: Y,\n  targets: { [key in CSSProperties]?: string },\n  isInvalidProp?: (prop: string) => boolean,\n): Y {\n  if (!objOrArray) return objOrArray\n\n  function callback(objOrArray: Dict) {\n    return Object.fromEntries(\n      Object.entries(objOrArray).flatMap(function ([prop, value]) {\n        if (isInvalidProp?.(prop)) return [[prop, value]]\n\n        const target = targets[prop]\n        const result: [string, any][] = []\n\n        if (target) {\n          const { token } = getStyle(prop) ?? {}\n\n          if (isCSSVar(value) || isInterpolation(value))\n            result.push([`--${target}`, value])\n          else\n            result.push([\n              `--${target}`,\n              replaceObject(value, (value) =>\n                token ? `{${token}.${value}, ${value}}` : value,\n              ),\n            ])\n        } else if (isObject(value)) {\n          result.push([prop, injectVars(value, targets)])\n        } else {\n          result.push([prop, value])\n        }\n\n        return result\n      }),\n    )\n  }\n\n  if (isArray(objOrArray)) return objOrArray.map(callback) as Y\n  else return callback(objOrArray) as Y\n}\n"],"mappings":"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"}
+{"version":3,"file":"var.js","names":["calc"],"sources":["../../../../src/core/system/var.ts"],"sourcesContent":["import type { Dict } from \"../../utils\"\nimport type { CSSProperties, StyleValueWithCondition } from \"../css\"\nimport type {\n  CSSMap,\n  DefineThemeValue,\n  System,\n  ThemeToken,\n  UsageTheme,\n  VariableTokens,\n  VariableValue,\n} from \"../system\"\nimport type { Breakpoints } from \"./breakpoint\"\nimport {\n  calc,\n  escape,\n  isArray,\n  isNull,\n  isObject,\n  isString,\n  isUndefined,\n  merge,\n  replaceObject,\n} from \"../../utils\"\nimport { DEFAULT_VAR_PREFIX } from \"../constant\"\nimport {\n  animation,\n  colorMix,\n  conditions,\n  css,\n  getStyle,\n  gradient,\n  injectKeyframes,\n  isCSSFunction,\n  isCSSVar,\n} from \"../css\"\nimport { isInterpolation } from \"../css/utils\"\nimport { defaultSystem } from \"../system\"\n\ntype ParsedValue = number | string | undefined\n\ninterface Variable {\n  reference: string\n  variable: string\n}\n\nexport function transformInterpolation(\n  value: any,\n  callback: (value: string, fallbackValue?: string) => string,\n) {\n  if (isString(value))\n    return value.replace(/\\{(.*?)\\}/g, (_, value) => {\n      const [token, fallbackValue] = value.split(/,(.+)/)\n\n      return callback(token.trim(), fallbackValue?.trim())\n    })\n  else return value\n}\n\nexport function getVar(token: string, fallback?: string) {\n  if (!token.startsWith(\"--\")) token = `--${token}`\n\n  token = token.replace(/[^-_a-zA-Z0-9]/g, \"\")\n\n  return fallback ? `var(${token}, ${fallback})` : `var(${token})`\n}\n\nexport function getVarName(system: System) {\n  return function (token: string) {\n    const prefix = system.config.css?.varPrefix ?? DEFAULT_VAR_PREFIX\n\n    return `--${prefix}-${token}`\n  }\n}\n\nexport function getColorSchemeVar(system: System) {\n  return function (value: any, fallback?: string) {\n    if (!isString(value)) return value\n\n    const prefix = system.config.css?.varPrefix ?? DEFAULT_VAR_PREFIX\n\n    const [, token] = value.split(\".\")\n\n    return getVar(`${prefix}-colorScheme-${token}`, fallback)\n  }\n}\n\nconst isGradient = (token: string) => token.startsWith(\"gradients.\")\nconst isKeyframes = (token: string) => token.startsWith(\"keyframes.\")\nconst isAnimation = (token: string) => token.startsWith(\"animations.\")\nconst isSpace = (token: string) => token.startsWith(\"spaces.\")\nconst isColor = (token: string) => token.startsWith(\"colors.\")\nexport const isColorScheme = (token: any) =>\n  isString(token) && token.startsWith(\"colorScheme.\") && !token.includes(\"/\")\n\nexport function createVars(\n  prefix: string = DEFAULT_VAR_PREFIX,\n  theme: UsageTheme,\n  breakpoints: Breakpoints,\n  rootNode?: System[\"rootNode\"],\n) {\n  return function (tokens: VariableTokens) {\n    const { getQuery, isResponsive } = breakpoints\n\n    function tokenToVar(token: string): Variable {\n      token = token.replace(/\\./g, \"-\")\n      token = token.replace(/\\//g, \"\\\\/\")\n\n      const variable = `--${[prefix, escape(token, \"-\")].filter(Boolean).join(\"-\")}`\n      const reference = `var(${variable})`\n\n      return { reference, variable }\n    }\n\n    return function (\n      cssMap: CSSMap = {},\n      cssVars: Dict = {},\n      prevTokens?: VariableTokens,\n    ): { cssMap: CSSMap; cssVars: Dict } {\n      const system: System = { ...defaultSystem, cssMap, rootNode }\n      const options = { css, system, theme }\n\n      function getRelatedReference(\n        token: string,\n        value: ParsedValue = \"\",\n      ): [ParsedValue, Exclude<ParsedValue, undefined>] {\n        const relatedToken = [token.split(\".\")[0], value].join(\".\")\n\n        if (token === relatedToken) return [undefined, value]\n\n        const targetToken = tokens[relatedToken] ?? prevTokens?.[relatedToken]\n\n        if (!targetToken) return [undefined, value]\n\n        const { reference, variable } = tokenToVar(relatedToken)\n\n        return [variable, reference]\n      }\n\n      function valueToVar(value: any) {\n        return transformInterpolation(value, (value, fallbackValue) => {\n          if (value.includes(\"colors.\") || value.includes(\"colorScheme.\")) {\n            if (isColorScheme(value)) return getColorSchemeVar(system)(value)\n\n            return colorMix(value, { fallback: fallbackValue, system })\n          } else {\n            const token = tokens[value] ?? prevTokens?.[value]\n\n            if (token) {\n              return tokenToVar(value).reference\n            } else if (value in cssMap && cssMap[value]?.ref) {\n              return cssMap[value].ref\n            } else if (fallbackValue) {\n              fallbackValue =\n                fallbackValue in cssMap && cssMap[fallbackValue]?.ref\n                  ? cssMap[fallbackValue]?.ref\n                  : fallbackValue\n\n              return `var(--${prefix}-${value}, ${fallbackValue})`\n            } else {\n              return `var(--${prefix}-${value})`\n            }\n          }\n        })\n      }\n\n      function createNegativeVar(token: string, reference: string) {\n        const paths = token.split(\".\")\n        const [start, ...rest] = paths\n\n        const negativeToken = `${start}.-${rest.join(\".\")}`\n\n        const negativeReference = calc.negate(reference)\n\n        return { negativeReference, negativeToken }\n      }\n\n      function createAnimationVar(value: VariableValue) {\n        if (isArray(value))\n          return value.map((value) => animation(value, options)).join(\",\")\n        else return animation(value, options)\n      }\n\n      function createGradientVar(token: string, value: DefineThemeValue) {\n        return function (semantic: boolean) {\n          if (!semantic) {\n            return gradient(value, options)\n          } else {\n            const [variable, reference] = getRelatedReference(token, value)\n\n            return variable ? reference : gradient(value, options)\n          }\n        }\n      }\n\n      function createKeyframesVar(token: string, value: any) {\n        return function (semantic: boolean) {\n          if (!semantic) {\n            return injectKeyframes(css(system, theme)(value), rootNode)\n          } else {\n            const [variable, reference] = getRelatedReference(token, value)\n\n            return variable\n              ? reference\n              : injectKeyframes(css(system, theme)(value), rootNode)\n          }\n        }\n      }\n\n      function createColorVar(\n        token: string,\n        properties: string[],\n        value: DefineThemeValue,\n      ) {\n        return function (semantic: boolean) {\n          if (!semantic) {\n            return colorMix(value, { ...options, properties })\n          } else {\n            const [variable, reference] = getRelatedReference(token, value)\n\n            return variable\n              ? reference\n              : colorMix(value, { ...options, properties })\n          }\n        }\n      }\n\n      function createVar(\n        token: string,\n        value: VariableValue,\n        variable: string,\n      ) {\n        return function (semantic: boolean, queries: string[] = []) {\n          if (isAnimation(token)) value = createAnimationVar(value)\n\n          if (isArray(value)) {\n            const [lightValue, darkValue] = value\n\n            createVar(token, lightValue, variable)(semantic, queries)\n            createVar(\n              token,\n              darkValue,\n              variable,\n            )(semantic, [...queries, conditions._dark])\n          } else if (isResponsive(value, true)) {\n            Object.entries(value).forEach(([key, value]) => {\n              if (key === \"base\") {\n                createVar(token, value, variable)(semantic, queries)\n              } else {\n                const query = getQuery(key)\n\n                if (!query) return\n\n                createVar(token, value, variable)(semantic, [...queries, query])\n              }\n            })\n          } else {\n            const computedValue: DefineThemeValue = valueToVar(value)\n\n            let resolvedValue: DefineThemeValue | Dict = computedValue\n\n            if (isKeyframes(token)) {\n              resolvedValue = createKeyframesVar(token, computedValue)(semantic)\n            } else if (isGradient(token)) {\n              resolvedValue = createGradientVar(token, computedValue)(semantic)\n            } else if (isColor(token)) {\n              resolvedValue = createColorVar(\n                token,\n                [variable],\n                computedValue,\n              )(semantic)\n            } else if (semantic) {\n              const [, reference] = getRelatedReference(token, computedValue)\n\n              resolvedValue = reference\n            }\n\n            if (!isObject(resolvedValue))\n              resolvedValue = { [variable]: resolvedValue }\n\n            const resolvedCssVars = queries.reduceRight<Dict>(\n              (prev, key) => ({ [key]: prev }),\n              resolvedValue,\n            )\n\n            cssVars = merge(cssVars, resolvedCssVars)\n          }\n        }\n      }\n\n      for (let [token, { semantic, value }] of Object.entries(tokens)) {\n        const { reference, variable } = tokenToVar(token)\n\n        createVar(token, value, variable)(semantic)\n\n        if (isSpace(token)) {\n          const { negativeReference, negativeToken } = createNegativeVar(\n            token,\n            reference,\n          )\n\n          cssMap[negativeToken] = { ref: negativeReference, var: variable }\n        }\n\n        cssMap[token] = { ref: reference, var: variable }\n      }\n\n      return { cssMap, cssVars }\n    }\n  }\n}\n\nexport type CreateVars = ReturnType<ReturnType<typeof createVars>>\n\nexport function mergeVars(...fns: CreateVars[]) {\n  return function (prevTokens?: VariableTokens) {\n    let cssMap: CSSMap = {}\n    let cssVars: Dict = {}\n\n    for (const fn of fns) {\n      const result = fn(cssMap, cssVars, prevTokens)\n\n      cssMap = { ...cssMap, ...result.cssMap }\n      cssVars = { ...cssVars, ...result.cssVars }\n    }\n\n    return { cssMap, cssVars }\n  }\n}\n\nexport function varAttr<Y = StyleValueWithCondition<number | string>>(\n  value: undefined | Y,\n  token?: ThemeToken,\n  fallbackValue?: string,\n): undefined | Y {\n  if (isUndefined(value) || isNull(value) || isCSSFunction(value)) return value\n\n  if (isObject(value) || isArray(value))\n    return replaceObject(value, (value) => varAttr(value, token, fallbackValue))\n  else\n    return token\n      ? (`{${token}.${value as number | string}, ${fallbackValue ?? (value as number | string)}}` as Y)\n      : value\n}\n\nexport function injectVars<Y extends Dict | Dict[] | undefined>(\n  objOrArray: Y,\n  targets: { [key in CSSProperties]?: string },\n  isInvalidProp?: (prop: string) => boolean,\n): Y {\n  if (!objOrArray) return objOrArray\n\n  function callback(objOrArray: Dict) {\n    return Object.fromEntries(\n      Object.entries(objOrArray).flatMap(function ([prop, value]) {\n        if (isInvalidProp?.(prop)) return [[prop, value]]\n\n        const target = targets[prop]\n        const result: [string, any][] = []\n\n        if (target) {\n          const { token } = getStyle(prop) ?? {}\n\n          if (isCSSVar(value) || isInterpolation(value))\n            result.push([`--${target}`, value])\n          else\n            result.push([\n              `--${target}`,\n              replaceObject(value, (value) =>\n                token ? `{${token}.${value}, ${value}}` : value,\n              ),\n            ])\n        } else if (isObject(value)) {\n          result.push([prop, injectVars(value, targets)])\n        } else {\n          result.push([prop, value])\n        }\n\n        return result\n      }),\n    )\n  }\n\n  if (isArray(objOrArray)) return objOrArray.map(callback) as Y\n  else return callback(objOrArray) as Y\n}\n"],"mappings":"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"}

package/dist/esm/theme/styles/global-style.js

@@ -10,7 +10,7 @@ const globalStyle = defineStyles.globalStyle({
 		overflowWrap: "break-word"
 	},
 	"*::placeholder, *[data-placeholder]": { color: "fg.subtle" },
-	body: {
+	":host, body": {
 		colorScheme: "mono",
 		bg: "bg",
 		color: "fg",

package/dist/esm/theme/styles/global-style.js.map

@@ -1 +1 @@
-{"version":3,"file":"global-style.js","names":[],"sources":["../../../../src/theme/styles/global-style.ts"],"sourcesContent":["import { defineStyles } from \"../../core\"\n\nexport const globalStyle = defineStyles.globalStyle({\n  \"*, *::before, *::after\": {\n    borderColor: \"border\",\n    borderStyle: \"solid\",\n    borderWidth: \"0\",\n    focusVisibleRing: \"outline\",\n    fontFeatureSettings: '\"cv11\"',\n    overflowWrap: \"break-word\",\n  },\n  \"*::placeholder, *[data-placeholder]\": {\n    color: \"fg.subtle\",\n  },\n  body: {\n    colorScheme: \"mono\",\n    bg: \"bg\",\n    color: \"fg\",\n    fontFamily: \"body\",\n    lineHeight: \"moderate\",\n    overflowX: \"hidden\",\n    transitionDuration: \"moderate\",\n    transitionProperty: \"background-color\",\n  },\n})\n"],"mappings":";;AAEA,MAAa,cAAc,aAAa,YAAY;CAClD,0BAA0B;EACxB,aAAa;EACb,aAAa;EACb,aAAa;EACb,kBAAkB;EAClB,qBAAqB;EACrB,cAAc;CAChB;CACA,uCAAuC,EACrC,OAAO,YACT;CACA,MAAM;EACJ,aAAa;EACb,IAAI;EACJ,OAAO;EACP,YAAY;EACZ,YAAY;EACZ,WAAW;EACX,oBAAoB;EACpB,oBAAoB;CACtB;AACF,CAAC"}
+{"version":3,"file":"global-style.js","names":[],"sources":["../../../../src/theme/styles/global-style.ts"],"sourcesContent":["import { defineStyles } from \"../../core\"\n\nexport const globalStyle = defineStyles.globalStyle({\n  \"*, *::before, *::after\": {\n    borderColor: \"border\",\n    borderStyle: \"solid\",\n    borderWidth: \"0\",\n    focusVisibleRing: \"outline\",\n    fontFeatureSettings: '\"cv11\"',\n    overflowWrap: \"break-word\",\n  },\n  \"*::placeholder, *[data-placeholder]\": {\n    color: \"fg.subtle\",\n  },\n  \":host, body\": {\n    colorScheme: \"mono\",\n    bg: \"bg\",\n    color: \"fg\",\n    fontFamily: \"body\",\n    lineHeight: \"moderate\",\n    overflowX: \"hidden\",\n    transitionDuration: \"moderate\",\n    transitionProperty: \"background-color\",\n  },\n})\n"],"mappings":";;AAEA,MAAa,cAAc,aAAa,YAAY;CAClD,0BAA0B;EACxB,aAAa;EACb,aAAa;EACb,aAAa;EACb,kBAAkB;EAClB,qBAAqB;EACrB,cAAc;CAChB;CACA,uCAAuC,EACrC,OAAO,YACT;CACA,eAAe;EACb,aAAa;EACb,IAAI;EACJ,OAAO;EACP,YAAY;EACZ,YAAY;EACZ,WAAW;EACX,oBAAoB;EACpB,oBAAoB;CACtB;AACF,CAAC"}

package/dist/esm/theme/styles/reset-style.js

@@ -53,7 +53,7 @@ const resetStyle = defineStyles.resetStyle({
 		color: "inherit",
 		overflow: "visible"
 	},
-	html: {
+	":host, html": {
 		fontFamily: "system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
 		lineHeight: 1.5,
 		WebkitTapHighlightColor: "transparent",
@@ -83,8 +83,8 @@ const resetStyle = defineStyles.resetStyle({
 	summary: { display: "list-item" },
 	sup: { top: "-0.5em" },
 	"ul, ol": { listStyle: "none" },
-	"@media (prefers-reduced-motion: no-preference)": { ":where(html:focus-within)": { scrollBehavior: "smooth" } },
-	":where(html:has(dialog:modal[open]))": { overflow: "clip" },
+	"@media (prefers-reduced-motion: no-preference)": { ":host(:focus-within), :where(html:focus-within)": { scrollBehavior: "smooth" } },
+	":host(:has(dialog:modal[open])), :where(html:has(dialog:modal[open]))": { overflow: "clip" },
 	":where(dialog, [popover])": {
 		background: "none",
 		border: "none",

package/dist/esm/theme/styles/reset-style.js.map

@@ -1 +1 @@
-{"version":3,"file":"reset-style.js","names":[],"sources":["../../../../src/theme/styles/reset-style.ts"],"sourcesContent":["import { defineStyles } from \"../../core\"\n\nexport const resetStyle = defineStyles.resetStyle({\n  \"*, *::before, *::after\": {\n    boxSizing: \"border-box\",\n    margin: 0,\n    padding: 0,\n  },\n\n  \"::-webkit-file-upload-button\": {\n    font: \"inherit\",\n    WebkitAppearance: \"button\",\n  },\n\n  \"::-webkit-search-cancel-button, ::-webkit-search-decoration\": {\n    WebkitAppearance: \"none\",\n  },\n\n  \"[contenteditable]\": {\n    outline: \"none\",\n  },\n\n  \"[hidden]:where(:not([hidden='until-found']))\": {\n    display: \"none !important\",\n  },\n\n  \"[type='time']::-webkit-calendar-picker-indicator\": {\n    display: \"none\",\n  },\n\n  \"::-webkit-details-marker\": {\n    display: \"none\",\n  },\n\n  a: {\n    color: \"inherit\",\n    textDecoration: \"none\",\n  },\n\n  \"abbr[title]\": {\n    textDecoration: \"underline dotted\",\n  },\n\n  \"b, strong\": {\n    fontWeight: \"bolder\",\n  },\n\n  \"button, input, optgroup, select, textarea\": {\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    border: 0,\n    borderRadius: 0,\n    color: \"inherit\",\n    font: \"inherit\",\n    fontFeatureSettings: \"inherit\",\n    fontVariationSettings: \"inherit\",\n    letterSpacing: \"inherit\",\n    outline: 0,\n    WebkitAppearance: \"none\",\n  },\n\n  \"code, kbd, samp, pre\": {\n    fontFamily: \"inherit\",\n    fontSize: \"1em\",\n  },\n\n  fieldset: {\n    border: 0,\n    minWidth: 0,\n  },\n\n  \"h1, h2, h3, h4, h5, h6\": {\n    fontSize: \"inherit\",\n    fontWeight: \"inherit\",\n  },\n\n  hr: {\n    blockSize: 0,\n    border: \"none\",\n    borderBlockStart: \"1px solid\",\n    color: \"inherit\",\n    overflow: \"visible\",\n  },\n\n  html: {\n    fontFamily:\n      \"system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'\",\n    lineHeight: 1.5,\n    WebkitTapHighlightColor: \"transparent\",\n    WebkitTextSizeAdjust: \"100%\",\n  },\n\n  \"img, svg, video, canvas, audio, iframe, embed, object\": {\n    display: \"block\",\n  },\n\n  \"input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button\":\n    {\n      display: \"none\",\n    },\n\n  \"input[type='search']\": {\n    outlineOffset: \"-2px\",\n  },\n\n  legend: {\n    display: \"table\",\n    float: \"left\",\n    width: \"100%\",\n  },\n\n  mark: {\n    backgroundColor: \"inherit\",\n    color: \"inherit\",\n  },\n\n  progress: {\n    verticalAlign: \"baseline\",\n  },\n\n  small: {\n    fontSize: \"80%\",\n  },\n\n  sub: {\n    bottom: \"-0.25em\",\n  },\n\n  \"sub, sup\": {\n    fontSize: \"75%\",\n    lineHeight: 0,\n    position: \"relative\",\n    verticalAlign: \"baseline\",\n  },\n\n  summary: {\n    display: \"list-item\",\n  },\n\n  sup: {\n    top: \"-0.5em\",\n  },\n\n  \"ul, ol\": {\n    listStyle: \"none\",\n  },\n\n  \"@media (prefers-reduced-motion: no-preference)\": {\n    \":where(html:focus-within)\": {\n      scrollBehavior: \"smooth\",\n    },\n  },\n\n  \":where(html:has(dialog:modal[open]))\": {\n    overflow: \"clip\",\n  },\n\n  \":where(dialog, [popover])\": {\n    background: \"none\",\n    border: \"none\",\n    color: \"inherit\",\n    inset: \"unset\",\n    maxHeight: \"unset\",\n    maxWidth: \"unset\",\n    overflow: \"unset\",\n  },\n\n  \":where(dialog:not([open], [popover]), [popover]:not(:popover-open))\": {\n    display: \"none !important\",\n  },\n})\n"],"mappings":";;AAEA,MAAa,aAAa,aAAa,WAAW;CAChD,0BAA0B;EACxB,WAAW;EACX,QAAQ;EACR,SAAS;CACX;CAEA,gCAAgC;EAC9B,MAAM;EACN,kBAAkB;CACpB;CAEA,+DAA+D,EAC7D,kBAAkB,OACpB;CAEA,qBAAqB,EACnB,SAAS,OACX;CAEA,gDAAgD,EAC9C,SAAS,kBACX;CAEA,oDAAoD,EAClD,SAAS,OACX;CAEA,4BAA4B,EAC1B,SAAS,OACX;CAEA,GAAG;EACD,OAAO;EACP,gBAAgB;CAClB;CAEA,eAAe,EACb,gBAAgB,mBAClB;CAEA,aAAa,EACX,YAAY,SACd;CAEA,6CAA6C;EAC3C,YAAY;EACZ,iBAAiB;EACjB,QAAQ;EACR,cAAc;EACd,OAAO;EACP,MAAM;EACN,qBAAqB;EACrB,uBAAuB;EACvB,eAAe;EACf,SAAS;EACT,kBAAkB;CACpB;CAEA,wBAAwB;EACtB,YAAY;EACZ,UAAU;CACZ;CAEA,UAAU;EACR,QAAQ;EACR,UAAU;CACZ;CAEA,0BAA0B;EACxB,UAAU;EACV,YAAY;CACd;CAEA,IAAI;EACF,WAAW;EACX,QAAQ;EACR,kBAAkB;EAClB,OAAO;EACP,UAAU;CACZ;CAEA,MAAM;EACJ,YACE;EACF,YAAY;EACZ,yBAAyB;EACzB,sBAAsB;CACxB;CAEA,yDAAyD,EACvD,SAAS,QACX;CAEA,oGACE,EACE,SAAS,OACX;CAEF,wBAAwB,EACtB,eAAe,OACjB;CAEA,QAAQ;EACN,SAAS;EACT,OAAO;EACP,OAAO;CACT;CAEA,MAAM;EACJ,iBAAiB;EACjB,OAAO;CACT;CAEA,UAAU,EACR,eAAe,WACjB;CAEA,OAAO,EACL,UAAU,MACZ;CAEA,KAAK,EACH,QAAQ,UACV;CAEA,YAAY;EACV,UAAU;EACV,YAAY;EACZ,UAAU;EACV,eAAe;CACjB;CAEA,SAAS,EACP,SAAS,YACX;CAEA,KAAK,EACH,KAAK,SACP;CAEA,UAAU,EACR,WAAW,OACb;CAEA,kDAAkD,EAChD,6BAA6B,EAC3B,gBAAgB,SAClB,EACF;CAEA,wCAAwC,EACtC,UAAU,OACZ;CAEA,6BAA6B;EAC3B,YAAY;EACZ,QAAQ;EACR,OAAO;EACP,OAAO;EACP,WAAW;EACX,UAAU;EACV,UAAU;CACZ;CAEA,uEAAuE,EACrE,SAAS,kBACX;AACF,CAAC"}
+{"version":3,"file":"reset-style.js","names":[],"sources":["../../../../src/theme/styles/reset-style.ts"],"sourcesContent":["import { defineStyles } from \"../../core\"\n\nexport const resetStyle = defineStyles.resetStyle({\n  \"*, *::before, *::after\": {\n    boxSizing: \"border-box\",\n    margin: 0,\n    padding: 0,\n  },\n\n  \"::-webkit-file-upload-button\": {\n    font: \"inherit\",\n    WebkitAppearance: \"button\",\n  },\n\n  \"::-webkit-search-cancel-button, ::-webkit-search-decoration\": {\n    WebkitAppearance: \"none\",\n  },\n\n  \"[contenteditable]\": {\n    outline: \"none\",\n  },\n\n  \"[hidden]:where(:not([hidden='until-found']))\": {\n    display: \"none !important\",\n  },\n\n  \"[type='time']::-webkit-calendar-picker-indicator\": {\n    display: \"none\",\n  },\n\n  \"::-webkit-details-marker\": {\n    display: \"none\",\n  },\n\n  a: {\n    color: \"inherit\",\n    textDecoration: \"none\",\n  },\n\n  \"abbr[title]\": {\n    textDecoration: \"underline dotted\",\n  },\n\n  \"b, strong\": {\n    fontWeight: \"bolder\",\n  },\n\n  \"button, input, optgroup, select, textarea\": {\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    border: 0,\n    borderRadius: 0,\n    color: \"inherit\",\n    font: \"inherit\",\n    fontFeatureSettings: \"inherit\",\n    fontVariationSettings: \"inherit\",\n    letterSpacing: \"inherit\",\n    outline: 0,\n    WebkitAppearance: \"none\",\n  },\n\n  \"code, kbd, samp, pre\": {\n    fontFamily: \"inherit\",\n    fontSize: \"1em\",\n  },\n\n  fieldset: {\n    border: 0,\n    minWidth: 0,\n  },\n\n  \"h1, h2, h3, h4, h5, h6\": {\n    fontSize: \"inherit\",\n    fontWeight: \"inherit\",\n  },\n\n  hr: {\n    blockSize: 0,\n    border: \"none\",\n    borderBlockStart: \"1px solid\",\n    color: \"inherit\",\n    overflow: \"visible\",\n  },\n\n  \":host, html\": {\n    fontFamily:\n      \"system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'\",\n    lineHeight: 1.5,\n    WebkitTapHighlightColor: \"transparent\",\n    WebkitTextSizeAdjust: \"100%\",\n  },\n\n  \"img, svg, video, canvas, audio, iframe, embed, object\": {\n    display: \"block\",\n  },\n\n  \"input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button\":\n    {\n      display: \"none\",\n    },\n\n  \"input[type='search']\": {\n    outlineOffset: \"-2px\",\n  },\n\n  legend: {\n    display: \"table\",\n    float: \"left\",\n    width: \"100%\",\n  },\n\n  mark: {\n    backgroundColor: \"inherit\",\n    color: \"inherit\",\n  },\n\n  progress: {\n    verticalAlign: \"baseline\",\n  },\n\n  small: {\n    fontSize: \"80%\",\n  },\n\n  sub: {\n    bottom: \"-0.25em\",\n  },\n\n  \"sub, sup\": {\n    fontSize: \"75%\",\n    lineHeight: 0,\n    position: \"relative\",\n    verticalAlign: \"baseline\",\n  },\n\n  summary: {\n    display: \"list-item\",\n  },\n\n  sup: {\n    top: \"-0.5em\",\n  },\n\n  \"ul, ol\": {\n    listStyle: \"none\",\n  },\n\n  \"@media (prefers-reduced-motion: no-preference)\": {\n    \":host(:focus-within), :where(html:focus-within)\": {\n      scrollBehavior: \"smooth\",\n    },\n  },\n\n  \":host(:has(dialog:modal[open])), :where(html:has(dialog:modal[open]))\": {\n    overflow: \"clip\",\n  },\n\n  \":where(dialog, [popover])\": {\n    background: \"none\",\n    border: \"none\",\n    color: \"inherit\",\n    inset: \"unset\",\n    maxHeight: \"unset\",\n    maxWidth: \"unset\",\n    overflow: \"unset\",\n  },\n\n  \":where(dialog:not([open], [popover]), [popover]:not(:popover-open))\": {\n    display: \"none !important\",\n  },\n})\n"],"mappings":";;AAEA,MAAa,aAAa,aAAa,WAAW;CAChD,0BAA0B;EACxB,WAAW;EACX,QAAQ;EACR,SAAS;CACX;CAEA,gCAAgC;EAC9B,MAAM;EACN,kBAAkB;CACpB;CAEA,+DAA+D,EAC7D,kBAAkB,OACpB;CAEA,qBAAqB,EACnB,SAAS,OACX;CAEA,gDAAgD,EAC9C,SAAS,kBACX;CAEA,oDAAoD,EAClD,SAAS,OACX;CAEA,4BAA4B,EAC1B,SAAS,OACX;CAEA,GAAG;EACD,OAAO;EACP,gBAAgB;CAClB;CAEA,eAAe,EACb,gBAAgB,mBAClB;CAEA,aAAa,EACX,YAAY,SACd;CAEA,6CAA6C;EAC3C,YAAY;EACZ,iBAAiB;EACjB,QAAQ;EACR,cAAc;EACd,OAAO;EACP,MAAM;EACN,qBAAqB;EACrB,uBAAuB;EACvB,eAAe;EACf,SAAS;EACT,kBAAkB;CACpB;CAEA,wBAAwB;EACtB,YAAY;EACZ,UAAU;CACZ;CAEA,UAAU;EACR,QAAQ;EACR,UAAU;CACZ;CAEA,0BAA0B;EACxB,UAAU;EACV,YAAY;CACd;CAEA,IAAI;EACF,WAAW;EACX,QAAQ;EACR,kBAAkB;EAClB,OAAO;EACP,UAAU;CACZ;CAEA,eAAe;EACb,YACE;EACF,YAAY;EACZ,yBAAyB;EACzB,sBAAsB;CACxB;CAEA,yDAAyD,EACvD,SAAS,QACX;CAEA,oGACE,EACE,SAAS,OACX;CAEF,wBAAwB,EACtB,eAAe,OACjB;CAEA,QAAQ;EACN,SAAS;EACT,OAAO;EACP,OAAO;CACT;CAEA,MAAM;EACJ,iBAAiB;EACjB,OAAO;CACT;CAEA,UAAU,EACR,eAAe,WACjB;CAEA,OAAO,EACL,UAAU,MACZ;CAEA,KAAK,EACH,QAAQ,UACV;CAEA,YAAY;EACV,UAAU;EACV,YAAY;EACZ,UAAU;EACV,eAAe;CACjB;CAEA,SAAS,EACP,SAAS,YACX;CAEA,KAAK,EACH,KAAK,SACP;CAEA,UAAU,EACR,WAAW,OACb;CAEA,kDAAkD,EAChD,mDAAmD,EACjD,gBAAgB,SAClB,EACF;CAEA,yEAAyE,EACvE,UAAU,OACZ;CAEA,6BAA6B;EAC3B,YAAY;EACZ,QAAQ;EACR,OAAO;EACP,OAAO;EACP,WAAW;EACX,UAAU;EACV,UAAU;CACZ;CAEA,uEAAuE,EACrE,SAAS,kBACX;AACF,CAAC"}

package/dist/types/components/chart/cartesian-chart.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/chart/cartesian-chart.style.d.ts
-declare const cartesianChartStyle: ComponentSlotStyle<"area" | "line" | "grid" | "bar" | "dot" | "root" | "labelList" | "activeDot" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine", CSSPropObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "labelList" | "activeDot" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>, CSSModifierObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "labelList" | "activeDot" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>, CSSModifierObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "labelList" | "activeDot" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>>;
+declare const cartesianChartStyle: ComponentSlotStyle<"area" | "line" | "grid" | "bar" | "dot" | "root" | "activeDot" | "labelList" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine", CSSPropObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "activeDot" | "labelList" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>, CSSModifierObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "activeDot" | "labelList" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>, CSSModifierObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "activeDot" | "labelList" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>>;
 type CartesianChartStyle = typeof cartesianChartStyle;
 //#endregion
 export { CartesianChartStyle, cartesianChartStyle };

package/dist/types/components/chart/polar-chart.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/chart/polar-chart.style.d.ts
-declare const polarChartStyle: ComponentSlotStyle<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "radial" | "labelLine" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector", CSSPropObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "radial" | "labelLine" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "radial" | "labelLine" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "radial" | "labelLine" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>>;
+declare const polarChartStyle: ComponentSlotStyle<"label" | "grid" | "dot" | "root" | "radial" | "labelLine" | "activeDot" | "labelList" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector", CSSPropObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "radial" | "labelLine" | "activeDot" | "labelList" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "radial" | "labelLine" | "activeDot" | "labelList" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "radial" | "labelLine" | "activeDot" | "labelList" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>>;
 type PolarChartStyle = typeof polarChartStyle;
 //#endregion
 export { PolarChartStyle, polarChartStyle };

package/dist/types/core/css/animation.d.ts

@@ -1,7 +1,7 @@
 import { TransformOptions } from "./utils.js";
 
 //#region src/core/css/animation.d.ts
-declare function injectKeyframes(value: any): string;
+declare function injectKeyframes(value: any, rootNode?: Document | Node | ShadowRoot): string;
 declare function animation(value: any, {
   css,
   system,

package/dist/types/core/css/conditions.d.ts

@@ -38,7 +38,7 @@ declare const attributes: {
   /**
    * Styles for when `data-mode` is applied to any parent of this component or element.
    */
-  readonly _dark: ".dark &:not([data-mode]), [data-mode=dark] &:not([data-mode]), &[data-mode=dark]";
+  readonly _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.
    */
@@ -82,7 +82,7 @@ declare const attributes: {
   /**
    * Styles for when `data-mode` is applied to any parent of this component or element.
    */
-  readonly _light: ".light &:not([data-mode]), [data-mode=light] &:not([data-mode]), &[data-mode=light]";
+  readonly _light: ":host([data-mode=light]) &, .light &:not([data-mode]), [data-mode=light] &:not([data-mode]), &[data-mode=light]";
   /**
    * The CSS `&[data-loaded]` attribute selector.
    */
@@ -168,7 +168,7 @@ type Attributes = typeof attributes;
 type AttributeProperty = keyof Attributes;
 type AttributeProps = { [K in AttributeProperty]?: CSSObject };
 declare const attributeProperties: AttributeProperty[];
-declare const attributeSelectors: ("&[data-inactive]" | "&[data-accept]" | "&[data-animated]" | "&[data-between]" | "&:is([data-center], [data-group-center])" | "&:is([data-collapsed], :not([data-expanded]), [aria-expanded=false])" | "&[data-complete]" | "&:is([aria-current], [data-current]):not([aria-current='false'])" | ".dark &:not([data-mode]), [data-mode=dark] &:not([data-mode]), &[data-mode=dark]" | "&:is([data-end], [data-group-end])" | "&:is([data-expanded], [aria-expanded=true])" | "&[data-fallback]" | "&[data-filled]" | "&:is([data-grabbed], [aria-grabbed=true])" | "&:is([role=grid], [data-grid])" | "&:is(:has(> [role=group]), :has(> [data-group]), :has(> .group))" | "&:has(> [data-icon])" | "&[data-idle]" | "&[data-incomplete]" | ".light &:not([data-mode]), [data-mode=light] &:not([data-mode]), &[data-mode=light]" | "&[data-loaded]" | "&:is([data-loading], [aria-busy=true])" | "[dir=ltr] &" | "&[hidden]" | "&[data-not-allowed]" | "&:not([aria-current], [data-current]), &[aria-current='false']" | "&:not([data-fallback])" | "&:not(:has(> [role=group]), :has(> [data-group]), :has(> .group))" | "&:not([data-selected]):not([aria-selected=true])" | "&[data-numeric]" | "&:is([open], [data-open])" | "&:is([data-pressed], [aria-pressed=true])" | "&:is([data-range])" | "&[data-reject]" | "& .ui-ripple" | "[dir=rtl] &" | "&:is([data-start], [data-group-start])" | "&:is([data-selected], [aria-selected=true])" | "&:is([hidden], [data-hidden])" | "&[data-never]")[];
+declare const attributeSelectors: ("&[data-inactive]" | "&[data-accept]" | "&[data-animated]" | "&[data-between]" | "&:is([data-center], [data-group-center])" | "&:is([data-collapsed], :not([data-expanded]), [aria-expanded=false])" | "&[data-complete]" | "&:is([aria-current], [data-current]):not([aria-current='false'])" | ":host([data-mode=dark]) &, .dark &:not([data-mode]), [data-mode=dark] &:not([data-mode]), &[data-mode=dark]" | "&:is([data-end], [data-group-end])" | "&:is([data-expanded], [aria-expanded=true])" | "&[data-fallback]" | "&[data-filled]" | "&:is([data-grabbed], [aria-grabbed=true])" | "&:is([role=grid], [data-grid])" | "&:is(:has(> [role=group]), :has(> [data-group]), :has(> .group))" | "&:has(> [data-icon])" | "&[data-idle]" | "&[data-incomplete]" | ":host([data-mode=light]) &, .light &:not([data-mode]), [data-mode=light] &:not([data-mode]), &[data-mode=light]" | "&[data-loaded]" | "&:is([data-loading], [aria-busy=true])" | "[dir=ltr] &" | "&[hidden]" | "&[data-not-allowed]" | "&:not([aria-current], [data-current]), &[aria-current='false']" | "&:not([data-fallback])" | "&:not(:has(> [role=group]), :has(> [data-group]), :has(> .group))" | "&:not([data-selected]):not([aria-selected=true])" | "&[data-numeric]" | "&:is([open], [data-open])" | "&:is([data-pressed], [aria-pressed=true])" | "&:is([data-range])" | "&[data-reject]" | "& .ui-ripple" | "[dir=rtl] &" | "&:is([data-start], [data-group-start])" | "&:is([data-selected], [aria-selected=true])" | "&:is([hidden], [data-hidden])" | "&[data-never]")[];
 declare const pseudoElements: {
   /**
    * The CSS `&::after` pseudo-element.
@@ -1393,7 +1393,7 @@ declare const conditions: {
   /**
    * Styles for when `data-mode` is applied to any parent of this component or element.
    */
-  readonly _dark: ".dark &:not([data-mode]), [data-mode=dark] &:not([data-mode]), &[data-mode=dark]";
+  readonly _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.
    */
@@ -1437,7 +1437,7 @@ declare const conditions: {
   /**
    * Styles for when `data-mode` is applied to any parent of this component or element.
    */
-  readonly _light: ".light &:not([data-mode]), [data-mode=light] &:not([data-mode]), &[data-mode=light]";
+  readonly _light: ":host([data-mode=light]) &, .light &:not([data-mode]), [data-mode=light] &:not([data-mode]), &[data-mode=light]";
   /**
    * The CSS `&[data-loaded]` attribute selector.
    */
@@ -1596,7 +1596,7 @@ type ConditionProperty = keyof Conditions;
 type ConditionSelector = Conditions[ConditionProperty];
 type ConditionProps = { [K in keyof Conditions]?: CSSObject };
 declare const conditionProperties: ConditionProperty[];
-declare const conditionSelectors: ("&::after" | "&::backdrop" | "&::before" | "&::cue" | "&::cue-region" | "&::details-content" | "&::file-selector-button" | "&::first-letter" | "&::first-line" | "&::marker" | "&::placeholder, &[data-placeholder]" | "&::-webkit-scrollbar, &[data-scrollbar]" | "&::-webkit-scrollbar-button" | "&::-webkit-scrollbar-corner" | "&::-webkit-scrollbar-thumb" | "&::-webkit-scrollbar-track" | "&::-webkit-scrollbar-track-piece" | "&::selection" | "&[data-inactive]" | "&[data-accept]" | "&[data-animated]" | "&[data-between]" | "&:is([data-center], [data-group-center])" | "&:is([data-collapsed], :not([data-expanded]), [aria-expanded=false])" | "&[data-complete]" | "&:is([aria-current], [data-current]):not([aria-current='false'])" | ".dark &:not([data-mode]), [data-mode=dark] &:not([data-mode]), &[data-mode=dark]" | "&:is([data-end], [data-group-end])" | "&:is([data-expanded], [aria-expanded=true])" | "&[data-fallback]" | "&[data-filled]" | "&:is([data-grabbed], [aria-grabbed=true])" | "&:is([role=grid], [data-grid])" | "&:is(:has(> [role=group]), :has(> [data-group]), :has(> .group))" | "&:has(> [data-icon])" | "&[data-idle]" | "&[data-incomplete]" | ".light &:not([data-mode]), [data-mode=light] &:not([data-mode]), &[data-mode=light]" | "&[data-loaded]" | "&:is([data-loading], [aria-busy=true])" | "[dir=ltr] &" | "&[hidden]" | "&[data-not-allowed]" | "&:not([aria-current], [data-current]), &[aria-current='false']" | "&:not([data-fallback])" | "&:not(:has(> [role=group]), :has(> [data-group]), :has(> .group))" | "&:not([data-selected]):not([aria-selected=true])" | "&[data-numeric]" | "&:is([open], [data-open])" | "&:is([data-pressed], [aria-pressed=true])" | "&:is([data-range])" | "&[data-reject]" | "& .ui-ripple" | "[dir=rtl] &" | "&:is([data-start], [data-group-start])" | "&:is([data-selected], [aria-selected=true])" | "&:is([hidden], [data-hidden])" | "&[data-never]" | "&:is([data-activedescendant])" | "&:is(:any-link, [data-any-link])" | "&:autofill" | "&:is(:blank, [data-blank])" | "&:is(:checked, [data-checked], [aria-checked=true])" | "& > *" | "& > [data-content]" | "&:default" | "&:empty" | "&:is(:enabled, [data-enabled])" | "&:nth-of-type(even)" | "&:first-of-type" | "& > *:first-child" | "&:not(:focus-within, [data-focus-within])" | "&:fullscreen" | "&:is([data-orientation=horizontal], [aria-orientation=horizontal])" | "&:where(svg:not([data-loading])), & > [data-icon]" | "&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed])" | "& > [data-indicator]" | "&:is(:in-range, [data-in-range])" | "&:last-of-type" | "& > *:last-child" | "&:is(:link, [data-link])" | "&:modal" | "&:active" | "&:checked" | "&:is(disabled, [disabled])" | "&:focus" | "&:focus-visible" | "&:focus-within" | "&:hover" | "&:is([readonly], [aria-readonly=true])" | "&:target" | "&:valid" | "&:not(:checked):not([data-checked]):not([aria-checked=true])" | "&:not(:empty)" | "&:not(:first-of-type)" | "& > *:not(:first-child)" | "&:not(:last-of-type)" | "& > *:not(:last-child)" | "&:not(:target)" | "&:nth-of-type(odd)" | "&:only-of-type" | "&:only-child" | "&:is(:optional, [data-optional])" | "&:is(:out-of-range, [data-out-of-range])" | "&:is(:paused, [data-paused])" | "&:picture-in-picture" | "&:placeholder-shown" | "&:is(:playing, [data-playing])" | "&:popover-open" | "&:is(:read-write, [data-read-write])" | "&:is(:required, [required])" | "&:is(:target, [data-target])" | "&:is(:user-invalid, [data-user-invalid])" | "&:is(:valid, [data-valid])" | "&:is([data-orientation=vertical], [aria-orientation=vertical])" | "&:visited" | "&:is(:hover, [data-hover]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled])" | "&:is(:active, [data-active]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled])" | "&:is(:focus, [data-focus])" | "&:is(:focus-visible, [data-focus-visible])" | "&:is([data-invalid], [aria-invalid=true])" | "&:is([readonly], [data-readonly], [aria-readonly=true])" | "&:is(:disabled, [disabled], [data-disabled])" | "[role=group][data-accept] &, [data-group][data-accept] &, .group[data-accept] &" | "[role=group]:is([data-activedescendant]) &, [data-group]:is([data-activedescendant]) &, .group:is([data-activedescendant]) &" | "[role=group][data-animated] &, [data-group][data-animated] &, .group[data-animated] &" | "[role=group]:is(:blank, [data-blank]) &, [data-group]:is(:blank, [data-blank]) &, .group:is(:blank, [data-blank]) &" | "[role=group]:is(:checked, [data-checked], [aria-checked=true]) &, [data-group]:is(:checked, [data-checked], [aria-checked=true]) &, .group:is(:checked, [data-checked], [aria-checked=true]) &" | "[role=group]:is([data-collapsed], :not([data-expanded]), [aria-expanded=false]) &, [data-group]:is([data-collapsed], :not([data-expanded]), [aria-expanded=false]) &, .group:is([data-collapsed], :not([data-expanded]), [aria-expanded=false]) &" | "[role=group][data-complete] &, [data-group][data-complete] &, .group[data-complete] &" | "[role=group]:is([aria-current], [data-current]):not([aria-current='false']) &, [data-group]:is([aria-current], [data-current]):not([aria-current='false']) &, .group:is([aria-current], [data-current]):not([aria-current='false']) &" | "[role=group]:is(:enabled, [data-enabled]) &, [data-group]:is(:enabled, [data-enabled]) &, .group:is(:enabled, [data-enabled]) &" | "[role=group]:is([data-expanded], [aria-expanded=true]) &, [data-group]:is([data-expanded], [aria-expanded=true]) &, .group:is([data-expanded], [aria-expanded=true]) &" | "[role=group]:not(:focus-within, [data-focus-within]) &, [data-group]:not(:focus-within, [data-focus-within]) &, .group:not(:focus-within, [data-focus-within]) &" | "[role=group]:is([data-grabbed], [aria-grabbed=true]) &, [data-group]:is([data-grabbed], [aria-grabbed=true]) &, .group:is([data-grabbed], [aria-grabbed=true]) &" | "[role=group]:is([data-orientation=horizontal], [aria-orientation=horizontal]) &, [data-group]:is([data-orientation=horizontal], [aria-orientation=horizontal]) &, .group:is([data-orientation=horizontal], [aria-orientation=horizontal]) &" | "[role=group][data-idle] &, [data-group][data-idle] &, .group[data-idle] &" | "[role=group][data-incomplete] &, [data-group][data-incomplete] &, .group[data-incomplete] &" | "[role=group][data-loaded] &, [data-group][data-loaded] &, .group[data-loaded] &" | "[role=group]:is([data-loading], [aria-busy=true]) &, [data-group]:is([data-loading], [aria-busy=true]) &, .group:is([data-loading], [aria-busy=true]) &" | "[role=group]:is([open], [data-open]) &, [data-group]:is([open], [data-open]) &, .group:is([open], [data-open]) &" | "[role=group]:is(:optional, [data-optional]) &, [data-group]:is(:optional, [data-optional]) &, .group:is(:optional, [data-optional]) &" | "[role=group]:placeholder-shown &, [data-group]:placeholder-shown &, .group:placeholder-shown &" | "[role=group]:is([data-pressed], [aria-pressed=true]) &, [data-group]:is([data-pressed], [aria-pressed=true]) &, .group:is([data-pressed], [aria-pressed=true]) &" | "[role=group]:is([data-range]) &, [data-group]:is([data-range]) &, .group:is([data-range]) &" | "[role=group]:is(:read-write, [data-read-write]) &, [data-group]:is(:read-write, [data-read-write]) &, .group:is(:read-write, [data-read-write]) &" | "[role=group][data-reject] &, [data-group][data-reject] &, .group[data-reject] &" | "[role=group]:is(:required, [required]) &, [data-group]:is(:required, [required]) &, .group:is(:required, [required]) &" | "[role=group]:is(:user-invalid, [data-user-invalid]) &, [data-group]:is(:user-invalid, [data-user-invalid]) &, .group:is(:user-invalid, [data-user-invalid]) &" | "[role=group]:is(:valid, [data-valid]) &, [data-group]:is(:valid, [data-valid]) &, .group:is(:valid, [data-valid]) &" | "[role=group]:is([data-orientation=vertical], [aria-orientation=vertical]) &, [data-group]:is([data-orientation=vertical], [aria-orientation=vertical]) &, .group:is([data-orientation=vertical], [aria-orientation=vertical]) &" | "[role=group]:is(:hover, [data-hover]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled]) &, [data-group]:is(:hover, [data-hover]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled]) &, .group:is(:hover, [data-hover]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled]) &" | "[role=group]:is(:active, [data-active]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled]) &, [data-group]:is(:active, [data-active]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled]) &, .group:is(:active, [data-active]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled]) &" | "[role=group]:is(:focus, [data-focus]) &, [data-group]:is(:focus, [data-focus]) &, .group:is(:focus, [data-focus]) &" | "[role=group]:is(:focus-visible, [data-focus-visible]) &, [data-group]:is(:focus-visible, [data-focus-visible]) &, .group:is(:focus-visible, [data-focus-visible]) &" | "[role=group]:is([data-selected], [aria-selected=true]) &, [data-group]:is([data-selected], [aria-selected=true]) &, .group:is([data-selected], [aria-selected=true]) &" | "[role=group]:is([data-invalid], [aria-invalid=true]) &, [data-group]:is([data-invalid], [aria-invalid=true]) &, .group:is([data-invalid], [aria-invalid=true]) &" | "[role=group]:is([readonly], [data-readonly], [aria-readonly=true]) &, [data-group]:is([readonly], [data-readonly], [aria-readonly=true]) &, .group:is([readonly], [data-readonly], [aria-readonly=true]) &" | "[role=group]:is(:disabled, [disabled], [data-disabled]) &, [data-group]:is(:disabled, [disabled], [data-disabled]) &, .group:is(:disabled, [disabled], [data-disabled]) &" | `[data-peer]${string} ~ &, .peer${string} ~ &`)[];
+declare const conditionSelectors: ("&::after" | "&::backdrop" | "&::before" | "&::cue" | "&::cue-region" | "&::details-content" | "&::file-selector-button" | "&::first-letter" | "&::first-line" | "&::marker" | "&::placeholder, &[data-placeholder]" | "&::-webkit-scrollbar, &[data-scrollbar]" | "&::-webkit-scrollbar-button" | "&::-webkit-scrollbar-corner" | "&::-webkit-scrollbar-thumb" | "&::-webkit-scrollbar-track" | "&::-webkit-scrollbar-track-piece" | "&::selection" | "&[data-inactive]" | "&[data-accept]" | "&[data-animated]" | "&[data-between]" | "&:is([data-center], [data-group-center])" | "&:is([data-collapsed], :not([data-expanded]), [aria-expanded=false])" | "&[data-complete]" | "&:is([aria-current], [data-current]):not([aria-current='false'])" | ":host([data-mode=dark]) &, .dark &:not([data-mode]), [data-mode=dark] &:not([data-mode]), &[data-mode=dark]" | "&:is([data-end], [data-group-end])" | "&:is([data-expanded], [aria-expanded=true])" | "&[data-fallback]" | "&[data-filled]" | "&:is([data-grabbed], [aria-grabbed=true])" | "&:is([role=grid], [data-grid])" | "&:is(:has(> [role=group]), :has(> [data-group]), :has(> .group))" | "&:has(> [data-icon])" | "&[data-idle]" | "&[data-incomplete]" | ":host([data-mode=light]) &, .light &:not([data-mode]), [data-mode=light] &:not([data-mode]), &[data-mode=light]" | "&[data-loaded]" | "&:is([data-loading], [aria-busy=true])" | "[dir=ltr] &" | "&[hidden]" | "&[data-not-allowed]" | "&:not([aria-current], [data-current]), &[aria-current='false']" | "&:not([data-fallback])" | "&:not(:has(> [role=group]), :has(> [data-group]), :has(> .group))" | "&:not([data-selected]):not([aria-selected=true])" | "&[data-numeric]" | "&:is([open], [data-open])" | "&:is([data-pressed], [aria-pressed=true])" | "&:is([data-range])" | "&[data-reject]" | "& .ui-ripple" | "[dir=rtl] &" | "&:is([data-start], [data-group-start])" | "&:is([data-selected], [aria-selected=true])" | "&:is([hidden], [data-hidden])" | "&[data-never]" | "&:is([data-activedescendant])" | "&:is(:any-link, [data-any-link])" | "&:autofill" | "&:is(:blank, [data-blank])" | "&:is(:checked, [data-checked], [aria-checked=true])" | "& > *" | "& > [data-content]" | "&:default" | "&:empty" | "&:is(:enabled, [data-enabled])" | "&:nth-of-type(even)" | "&:first-of-type" | "& > *:first-child" | "&:not(:focus-within, [data-focus-within])" | "&:fullscreen" | "&:is([data-orientation=horizontal], [aria-orientation=horizontal])" | "&:where(svg:not([data-loading])), & > [data-icon]" | "&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed])" | "& > [data-indicator]" | "&:is(:in-range, [data-in-range])" | "&:last-of-type" | "& > *:last-child" | "&:is(:link, [data-link])" | "&:modal" | "&:active" | "&:checked" | "&:is(disabled, [disabled])" | "&:focus" | "&:focus-visible" | "&:focus-within" | "&:hover" | "&:is([readonly], [aria-readonly=true])" | "&:target" | "&:valid" | "&:not(:checked):not([data-checked]):not([aria-checked=true])" | "&:not(:empty)" | "&:not(:first-of-type)" | "& > *:not(:first-child)" | "&:not(:last-of-type)" | "& > *:not(:last-child)" | "&:not(:target)" | "&:nth-of-type(odd)" | "&:only-of-type" | "&:only-child" | "&:is(:optional, [data-optional])" | "&:is(:out-of-range, [data-out-of-range])" | "&:is(:paused, [data-paused])" | "&:picture-in-picture" | "&:placeholder-shown" | "&:is(:playing, [data-playing])" | "&:popover-open" | "&:is(:read-write, [data-read-write])" | "&:is(:required, [required])" | "&:is(:target, [data-target])" | "&:is(:user-invalid, [data-user-invalid])" | "&:is(:valid, [data-valid])" | "&:is([data-orientation=vertical], [aria-orientation=vertical])" | "&:visited" | "&:is(:hover, [data-hover]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled])" | "&:is(:active, [data-active]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled])" | "&:is(:focus, [data-focus])" | "&:is(:focus-visible, [data-focus-visible])" | "&:is([data-invalid], [aria-invalid=true])" | "&:is([readonly], [data-readonly], [aria-readonly=true])" | "&:is(:disabled, [disabled], [data-disabled])" | "[role=group][data-accept] &, [data-group][data-accept] &, .group[data-accept] &" | "[role=group]:is([data-activedescendant]) &, [data-group]:is([data-activedescendant]) &, .group:is([data-activedescendant]) &" | "[role=group][data-animated] &, [data-group][data-animated] &, .group[data-animated] &" | "[role=group]:is(:blank, [data-blank]) &, [data-group]:is(:blank, [data-blank]) &, .group:is(:blank, [data-blank]) &" | "[role=group]:is(:checked, [data-checked], [aria-checked=true]) &, [data-group]:is(:checked, [data-checked], [aria-checked=true]) &, .group:is(:checked, [data-checked], [aria-checked=true]) &" | "[role=group]:is([data-collapsed], :not([data-expanded]), [aria-expanded=false]) &, [data-group]:is([data-collapsed], :not([data-expanded]), [aria-expanded=false]) &, .group:is([data-collapsed], :not([data-expanded]), [aria-expanded=false]) &" | "[role=group][data-complete] &, [data-group][data-complete] &, .group[data-complete] &" | "[role=group]:is([aria-current], [data-current]):not([aria-current='false']) &, [data-group]:is([aria-current], [data-current]):not([aria-current='false']) &, .group:is([aria-current], [data-current]):not([aria-current='false']) &" | "[role=group]:is(:enabled, [data-enabled]) &, [data-group]:is(:enabled, [data-enabled]) &, .group:is(:enabled, [data-enabled]) &" | "[role=group]:is([data-expanded], [aria-expanded=true]) &, [data-group]:is([data-expanded], [aria-expanded=true]) &, .group:is([data-expanded], [aria-expanded=true]) &" | "[role=group]:not(:focus-within, [data-focus-within]) &, [data-group]:not(:focus-within, [data-focus-within]) &, .group:not(:focus-within, [data-focus-within]) &" | "[role=group]:is([data-grabbed], [aria-grabbed=true]) &, [data-group]:is([data-grabbed], [aria-grabbed=true]) &, .group:is([data-grabbed], [aria-grabbed=true]) &" | "[role=group]:is([data-orientation=horizontal], [aria-orientation=horizontal]) &, [data-group]:is([data-orientation=horizontal], [aria-orientation=horizontal]) &, .group:is([data-orientation=horizontal], [aria-orientation=horizontal]) &" | "[role=group][data-idle] &, [data-group][data-idle] &, .group[data-idle] &" | "[role=group][data-incomplete] &, [data-group][data-incomplete] &, .group[data-incomplete] &" | "[role=group][data-loaded] &, [data-group][data-loaded] &, .group[data-loaded] &" | "[role=group]:is([data-loading], [aria-busy=true]) &, [data-group]:is([data-loading], [aria-busy=true]) &, .group:is([data-loading], [aria-busy=true]) &" | "[role=group]:is([open], [data-open]) &, [data-group]:is([open], [data-open]) &, .group:is([open], [data-open]) &" | "[role=group]:is(:optional, [data-optional]) &, [data-group]:is(:optional, [data-optional]) &, .group:is(:optional, [data-optional]) &" | "[role=group]:placeholder-shown &, [data-group]:placeholder-shown &, .group:placeholder-shown &" | "[role=group]:is([data-pressed], [aria-pressed=true]) &, [data-group]:is([data-pressed], [aria-pressed=true]) &, .group:is([data-pressed], [aria-pressed=true]) &" | "[role=group]:is([data-range]) &, [data-group]:is([data-range]) &, .group:is([data-range]) &" | "[role=group]:is(:read-write, [data-read-write]) &, [data-group]:is(:read-write, [data-read-write]) &, .group:is(:read-write, [data-read-write]) &" | "[role=group][data-reject] &, [data-group][data-reject] &, .group[data-reject] &" | "[role=group]:is(:required, [required]) &, [data-group]:is(:required, [required]) &, .group:is(:required, [required]) &" | "[role=group]:is(:user-invalid, [data-user-invalid]) &, [data-group]:is(:user-invalid, [data-user-invalid]) &, .group:is(:user-invalid, [data-user-invalid]) &" | "[role=group]:is(:valid, [data-valid]) &, [data-group]:is(:valid, [data-valid]) &, .group:is(:valid, [data-valid]) &" | "[role=group]:is([data-orientation=vertical], [aria-orientation=vertical]) &, [data-group]:is([data-orientation=vertical], [aria-orientation=vertical]) &, .group:is([data-orientation=vertical], [aria-orientation=vertical]) &" | "[role=group]:is(:hover, [data-hover]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled]) &, [data-group]:is(:hover, [data-hover]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled]) &, .group:is(:hover, [data-hover]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled]) &" | "[role=group]:is(:active, [data-active]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled]) &, [data-group]:is(:active, [data-active]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled]) &, .group:is(:active, [data-active]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled]) &" | "[role=group]:is(:focus, [data-focus]) &, [data-group]:is(:focus, [data-focus]) &, .group:is(:focus, [data-focus]) &" | "[role=group]:is(:focus-visible, [data-focus-visible]) &, [data-group]:is(:focus-visible, [data-focus-visible]) &, .group:is(:focus-visible, [data-focus-visible]) &" | "[role=group]:is([data-selected], [aria-selected=true]) &, [data-group]:is([data-selected], [aria-selected=true]) &, .group:is([data-selected], [aria-selected=true]) &" | "[role=group]:is([data-invalid], [aria-invalid=true]) &, [data-group]:is([data-invalid], [aria-invalid=true]) &, .group:is([data-invalid], [aria-invalid=true]) &" | "[role=group]:is([readonly], [data-readonly], [aria-readonly=true]) &, [data-group]:is([readonly], [data-readonly], [aria-readonly=true]) &, .group:is([readonly], [data-readonly], [aria-readonly=true]) &" | "[role=group]:is(:disabled, [disabled], [data-disabled]) &, [data-group]:is(:disabled, [disabled], [data-disabled]) &, .group:is(:disabled, [disabled], [data-disabled]) &" | `[data-peer]${string} ~ &, .peer${string} ~ &`)[];
 declare function getCondition(key: string): string;
 //#endregion
 export { AnySelector, AttributeProperty, AttributeProps, Attributes, ConditionProperty, ConditionProps, ConditionSelector, Conditions, GroupAttributeProperty, GroupAttributeProps, GroupAttributes, PeerAttributeProperty, PeerAttributeProps, PeerAttributes, PseudoClassProperty, PseudoClassProps, PseudoClasses, PseudoElementProperty, PseudoElementProps, PseudoElements, attributeProperties, attributeSelectors, attributes, conditionProperties, conditionSelectors, conditions, getCondition, groupAttributeProperties, groupAttributeSelectors, groupAttributes, peerAttributeProperties, peerAttributeSelectors, peerAttributes, pseudoClassProperties, pseudoClassSelectors, pseudoClasses, pseudoElementProperties, pseudoElementSelectors, pseudoElements };

package/dist/types/core/system/create-system.d.ts

@@ -48,7 +48,7 @@ declare const tertiaryTokens: {
 type TertiaryToken = keyof typeof tertiaryTokens;
 type ThemeToken = "breakpoints" | PrimaryToken | SecondaryToken | TertiaryToken;
 declare const defaultSystem: System;
-declare function createSystem(theme: UsageTheme, config?: ThemeConfig): System;
+declare function createSystem(theme: UsageTheme, config?: ThemeConfig, rootNode?: Document | Node | ShadowRoot): System;
 //#endregion
 export { ThemeToken, VariableAnimationValue, VariableColorModeValue, VariableKeyframeValue, VariableResponsiveValue, VariableTokens, VariableValue, createSystem, defaultSystem };
 //# sourceMappingURL=create-system.d.ts.map

package/dist/types/core/system/environment-provider.d.ts

@@ -4,6 +4,7 @@ import { FC, PropsWithChildren } from "react";
 type RootNode = Document | Node | ShadowRoot;
 interface Environment {
   getDocument: () => Document | undefined;
+  getRootElement: () => HTMLElement | undefined;
   getRootNode: () => RootNode | undefined;
   getWindow: () => undefined | Window;
 }

package/dist/types/core/system/index.types.d.ts

@@ -189,6 +189,12 @@ interface ThemeConfig {
      * @default 'ui'
      */
     varPrefix?: string;
+    /**
+     * The root selector to attach to variable names when converting each token of the theme to CSS variable names.
+     *
+     * @default ':host, :root, [data-mode]'
+     */
+    varRoot?: string;
   };
   /**
    * The default color mode.
@@ -472,6 +478,7 @@ interface System {
   cssVars: Dict;
   layers: Layers;
   utils: SystemUtils;
+  rootNode?: Document | Node | ShadowRoot;
 }
 type StyledTheme<Y extends UsageTheme = Theme> = Y & {
   changeThemeScheme: ChangeThemeScheme<Y>;

package/dist/types/core/system/var.d.ts

@@ -9,7 +9,7 @@ declare function getVar(token: string, fallback?: string): string;
 declare function getVarName(system: System): (token: string) => string;
 declare function getColorSchemeVar(system: System): (value: any, fallback?: string) => any;
 declare const isColorScheme: (token: any) => boolean;
-declare function createVars(prefix: string | undefined, theme: UsageTheme, breakpoints: Breakpoints): (tokens: VariableTokens) => (cssMap?: CSSMap, cssVars?: Dict, prevTokens?: VariableTokens) => {
+declare function createVars(prefix: string | undefined, theme: UsageTheme, breakpoints: Breakpoints, rootNode?: System["rootNode"]): (tokens: VariableTokens) => (cssMap?: CSSMap, cssVars?: Dict, prevTokens?: VariableTokens) => {
   cssMap: CSSMap;
   cssVars: Dict;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yamada-ui/react",
   "type": "module",
-  "version": "2.2.4",
+  "version": "2.2.5-dev-20260716054036",
   "description": "React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion",
   "keywords": [
     "yamada",