@tenphi/tasty 0.0.0-snapshot.8da24b2 → 0.0.0-snapshot.8f4d375

package/dist/core/index.js

@@ -4,6 +4,7 @@ import { okhslFunc, okhslPlugin } from "../plugins/okhsl-plugin.js";
 import { createStateParserContext, getGlobalPredefinedStates, setGlobalPredefinedStates } from "../states/index.js";
 import { hslToRgbValues, processTokens, stringifyTokens } from "../utils/process-tokens.js";
 import { COMPUTE_FUNC_MAP, CUSTOM_UNITS, DIRECTIONS, STATE_OPERATORS, STATE_OPERATOR_LIST, buildAtRuleContext, computeState, customFunc, extendStyles, extractStyles, filterMods, getGlobalFuncs, getGlobalParser, getGlobalPredefinedTokens, getRgbValuesFromRgbaString, hexToRgb, isAdvancedStateToken, normalizeColorTokenValue, parseColor, parseStateNotation, parseStyle, resetGlobalPredefinedTokens, setGlobalPredefinedTokens, strToRgb, stringifyStyles, styleStateMapToStyleStateDataList } from "../utils/styles.js";
+import { deprecationWarning, warn } from "../utils/warnings.js";
 import { styleHandlers } from "../styles/predefined.js";
 import { SheetManager } from "../injector/sheet-manager.js";
 import { StyleInjector } from "../injector/injector.js";
@@ -19,7 +20,6 @@ import { _modAttrs } from "../utils/mod-attrs.js";
 import { dotize } from "../utils/dotize.js";
 import { mergeStyles } from "../utils/merge-styles.js";
 import { resolveRecipes } from "../utils/resolve-recipes.js";
-import { deprecationWarning, warn } from "../utils/warnings.js";
 import { generateTypographyTokens } from "../utils/typography.js";
 import { tastyDebug } from "../debug.js";
 

package/dist/index.js

@@ -4,6 +4,7 @@ import { okhslFunc, okhslPlugin } from "./plugins/okhsl-plugin.js";
 import { createStateParserContext, getGlobalPredefinedStates, setGlobalPredefinedStates } from "./states/index.js";
 import { hslToRgbValues, processTokens, stringifyTokens } from "./utils/process-tokens.js";
 import { COMPUTE_FUNC_MAP, CUSTOM_UNITS, DIRECTIONS, STATE_OPERATORS, STATE_OPERATOR_LIST, buildAtRuleContext, computeState, customFunc, extendStyles, extractStyles, filterMods, getGlobalFuncs, getGlobalParser, getGlobalPredefinedTokens, getRgbValuesFromRgbaString, hexToRgb, isAdvancedStateToken, normalizeColorTokenValue, parseColor, parseStateNotation, parseStyle, resetGlobalPredefinedTokens, setGlobalPredefinedTokens, strToRgb, stringifyStyles, styleStateMapToStyleStateDataList } from "./utils/styles.js";
+import { deprecationWarning, warn } from "./utils/warnings.js";
 import { styleHandlers } from "./styles/predefined.js";
 import { SheetManager } from "./injector/sheet-manager.js";
 import { StyleInjector } from "./injector/injector.js";
@@ -19,7 +20,6 @@ import { _modAttrs } from "./utils/mod-attrs.js";
 import { dotize } from "./utils/dotize.js";
 import { mergeStyles } from "./utils/merge-styles.js";
 import { resolveRecipes } from "./utils/resolve-recipes.js";
-import { deprecationWarning, warn } from "./utils/warnings.js";
 import { generateTypographyTokens } from "./utils/typography.js";
 import { tastyDebug } from "./debug.js";
 import { useStyles } from "./hooks/useStyles.js";

package/dist/parser/classify.js.map

@@ -1 +1 @@
-{"version":3,"file":"classify.js","names":[],"sources":["../../src/parser/classify.ts"],"sourcesContent":["import { getGlobalPredefinedTokens } from '../utils/styles';\n\nimport {\n  COLOR_FUNCS,\n  RE_HEX,\n  RE_NUMBER,\n  RE_RAW_UNIT,\n  RE_UNIT_NUM,\n  VALUE_KEYWORDS,\n} from './const';\nimport { StyleParser } from './parser';\nimport type { ParserOptions, ProcessedStyle } from './types';\nimport { Bucket } from './types';\n\n/**\n * Re-parses a value through the parser until it stabilizes (no changes)\n * or max iterations reached. This allows units to reference other units.\n * Example: { x: '8px', y: '2x' } -> '1y' resolves to '16px'\n */\nfunction resolveUntilStable(\n  value: string,\n  opts: ParserOptions,\n  recurse: (str: string) => ProcessedStyle,\n  maxIterations = 10,\n): string {\n  let current = value;\n  for (let i = 0; i < maxIterations; i++) {\n    // Check if the current value contains a custom unit that needs resolution\n    const unitMatch = current.match(RE_UNIT_NUM);\n    if (!unitMatch) break; // Not a unit number, no resolution needed\n\n    const unitName = unitMatch[1];\n    // Only recurse if the unit is a custom unit we know about\n    // Any unit not in opts.units is assumed to be a native CSS unit\n    if (!opts.units || !(unitName in opts.units)) break;\n\n    const result = recurse(current);\n    if (result.output === current) break; // Stable\n    current = result.output;\n  }\n  return current;\n}\n\nexport function classify(\n  raw: string,\n  opts: ParserOptions,\n  recurse: (str: string) => ProcessedStyle,\n): { bucket: Bucket; processed: string } {\n  const token = raw.trim();\n  if (!token) return { bucket: Bucket.Mod, processed: '' };\n\n  // Early-out: if the token contains unmatched parentheses treat it as invalid\n  // and skip it. This avoids cases like `drop-shadow(` that are missing a\n  // closing parenthesis (e.g., a user-typo in CSS). We count paren depth while\n  // ignoring everything inside string literals to avoid false positives.\n  {\n    let depth = 0;\n    let inQuote: string | 0 = 0;\n    for (let i = 0; i < token.length; i++) {\n      const ch = token[i];\n\n      // track quote context so parentheses inside quotes are ignored\n      if (inQuote) {\n        if (ch === inQuote && token[i - 1] !== '\\\\') inQuote = 0;\n        continue;\n      }\n      if (ch === '\"' || ch === \"'\") {\n        inQuote = ch;\n        continue;\n      }\n\n      if (ch === '(') depth++;\n      else if (ch === ')') depth = Math.max(0, depth - 1);\n    }\n\n    if (depth !== 0) {\n      // Unbalanced parens → treat as invalid token (skipped).\n      console.warn(\n        'tasty: skipped invalid function token with unmatched parentheses:',\n        token,\n      );\n      return { bucket: Bucket.Mod, processed: '' };\n    }\n  }\n\n  // Quoted string literals should be treated as value tokens (e.g., \"\" for content)\n  if (\n    (token.startsWith('\"') && token.endsWith('\"')) ||\n    (token.startsWith(\"'\") && token.endsWith(\"'\"))\n  ) {\n    return { bucket: Bucket.Value, processed: token };\n  }\n\n  // 0. Double prefix for literal CSS property names ($$name -> --name, ##name -> --name-color)\n  // Used in transitions and animations to reference the property name itself, not its value\n  if (token.startsWith('$$')) {\n    const name = token.slice(2);\n    if (/^[a-z_][a-z0-9-_]*$/i.test(name)) {\n      return { bucket: Bucket.Value, processed: `--${name}` };\n    }\n  }\n  if (token.startsWith('##')) {\n    const name = token.slice(2);\n    if (/^[a-z_][a-z0-9-_]*$/i.test(name)) {\n      return { bucket: Bucket.Value, processed: `--${name}-color` };\n    }\n  }\n\n  // 0b. Special handling for #current (reserved keyword, cannot be overridden by predefined tokens)\n  // #current maps to CSS currentcolor keyword\n  if (token === '#current') {\n    return { bucket: Bucket.Color, processed: 'currentcolor' };\n  }\n\n  // #current with opacity: #current.5 or #current.$opacity\n  // Uses color-mix since currentcolor doesn't support rgb() alpha syntax\n  const currentAlphaMatch = token.match(\n    /^#current\\.(\\$[a-z_][a-z0-9-_]*|[0-9]+)$/i,\n  );\n  if (currentAlphaMatch) {\n    const rawAlpha = currentAlphaMatch[1];\n    let percentage: string;\n    if (rawAlpha.startsWith('$')) {\n      // Custom property: $disabled -> calc(var(--disabled) * 100%)\n      const propName = rawAlpha.slice(1);\n      percentage = `calc(var(--${propName}) * 100%)`;\n    } else if (rawAlpha === '0') {\n      percentage = '0%';\n    } else {\n      // Convert .5 -> 50%, .05 -> 5%\n      percentage = `${parseFloat('.' + rawAlpha) * 100}%`;\n    }\n    return {\n      bucket: Bucket.Color,\n      processed: `color-mix(in oklab, currentcolor ${percentage}, transparent)`,\n    };\n  }\n\n  // 0c. Check for predefined tokens (configured via configure({ tokens: {...} }))\n  // Must happen before default $ and # handling to allow overriding\n  if (token[0] === '$' || token[0] === '#') {\n    const predefinedTokens = getGlobalPredefinedTokens();\n    if (predefinedTokens) {\n      // Exact match\n      if (token in predefinedTokens) {\n        const tokenValue = predefinedTokens[token];\n        // Lowercase the token value to match parser behavior (parser lowercases input)\n        return classify(tokenValue.toLowerCase(), opts, recurse);\n      }\n      // Check for color token with alpha suffix: #token.alpha or #token.$prop\n      if (token[0] === '#') {\n        const alphaMatch = token.match(\n          /^(#[a-z0-9-]+)\\.(\\$[a-z_][a-z0-9-_]*|[0-9]+)$/i,\n        );\n        if (alphaMatch) {\n          const [, baseToken, rawAlpha] = alphaMatch;\n          if (baseToken in predefinedTokens) {\n            const resolvedValue = predefinedTokens[baseToken];\n\n            // If resolved value starts with # (color token), use standard alpha syntax\n            if (resolvedValue.startsWith('#')) {\n              // Lowercase to match parser behavior\n              return classify(\n                `${resolvedValue.toLowerCase()}.${rawAlpha}`,\n                opts,\n                recurse,\n              );\n            }\n\n            // For color functions like rgb(), rgba(), hsl(), hwb(), etc., inject alpha\n            // Includes all standard CSS color functions plus okhsl (plugin)\n            const funcMatch = resolvedValue.match(\n              /^(rgba?|hsla?|hwb|oklab|oklch|lab|lch|color|okhsl|device-cmyk|gray|color-mix|color-contrast)\\((.+)\\)$/i,\n            );\n            if (funcMatch) {\n              const [, funcName, args] = funcMatch;\n              // Handle $prop syntax for custom property alpha\n              let alpha: string;\n              if (rawAlpha.startsWith('$')) {\n                const propName = rawAlpha.slice(1);\n                alpha = `var(--${propName})`;\n              } else {\n                alpha = rawAlpha === '0' ? '0' : `.${rawAlpha}`;\n              }\n              // Normalize function name: rgba->rgb, hsla->hsl (modern syntax doesn't need 'a' suffix)\n              const normalizedFunc = funcName.replace(/a$/i, '').toLowerCase();\n              // Normalize to modern syntax: replace top-level commas with spaces\n              // Preserves commas inside nested functions like min(), max(), clamp()\n              const normalizeArgs = (a: string) => {\n                let result = '';\n                let depth = 0;\n                for (let i = 0; i < a.length; i++) {\n                  const c = a[i];\n                  if (c === '(') {\n                    depth++;\n                    result += c;\n                  } else if (c === ')') {\n                    depth = Math.max(0, depth - 1);\n                    result += c;\n                  } else if (c === ',' && depth === 0) {\n                    // Skip comma and any following whitespace at top level\n                    while (i + 1 < a.length && /\\s/.test(a[i + 1])) i++;\n                    result += ' ';\n                  } else {\n                    result += c;\n                  }\n                }\n                return result;\n              };\n              // Helper: find last top-level occurrence of a character (ignores parentheses)\n              const findLastTopLevel = (str: string, ch: string) => {\n                let depth = 0;\n                for (let i = str.length - 1; i >= 0; i--) {\n                  const c = str[i];\n                  if (c === ')') depth++;\n                  else if (c === '(') depth = Math.max(0, depth - 1);\n                  else if (c === ch && depth === 0) return i;\n                }\n                return -1;\n              };\n\n              // Check if already has alpha:\n              // - Modern syntax: has `/` separator at top level (works with dynamic alpha like var()/calc())\n              // - Legacy syntax: function ends with 'a' (rgba, hsla) and has exactly 4 top-level comma-separated values\n              const slashIdx = findLastTopLevel(args, '/');\n              const hasModernAlpha = slashIdx !== -1;\n\n              // Count top-level commas to avoid commas inside nested functions\n              let topLevelCommaCount = 0;\n              let lastTopLevelComma = -1;\n              {\n                let depth = 0;\n                for (let i = 0; i < args.length; i++) {\n                  const c = args[i];\n                  if (c === '(') depth++;\n                  else if (c === ')') depth = Math.max(0, depth - 1);\n                  else if (c === ',' && depth === 0) {\n                    topLevelCommaCount++;\n                    lastTopLevelComma = i;\n                  }\n                }\n              }\n\n              const hasLegacyAlpha =\n                !hasModernAlpha &&\n                /a$/i.test(funcName) &&\n                topLevelCommaCount === 3;\n\n              const colorArgs =\n                hasModernAlpha || hasLegacyAlpha\n                  ? normalizeArgs(\n                      hasModernAlpha\n                        ? args.slice(0, slashIdx).trim()\n                        : args.slice(0, lastTopLevelComma).trim(),\n                    )\n                  : normalizeArgs(args);\n\n              const constructed = `${normalizedFunc}(${colorArgs} / ${alpha})`;\n\n              // Custom functions (not native CSS) must be re-classified\n              // so the function handler can convert them to valid CSS\n              if (\n                !COLOR_FUNCS.has(normalizedFunc) &&\n                opts.funcs &&\n                normalizedFunc in opts.funcs\n              ) {\n                return classify(constructed, opts, recurse);\n              }\n\n              return { bucket: Bucket.Color, processed: constructed };\n            }\n\n            // Fallback: try appending .alpha (may not work for all cases)\n            return classify(`${resolvedValue}.${rawAlpha}`, opts, recurse);\n          }\n        }\n      }\n    }\n  }\n\n  // 0. Direct var(--*-color) token\n  const varColorMatch = token.match(/^var\\(--([a-z0-9-]+)-color\\)$/);\n  if (varColorMatch) {\n    return { bucket: Bucket.Color, processed: token };\n  }\n\n  // 1. URL\n  if (token.startsWith('url(')) {\n    return { bucket: Bucket.Value, processed: token };\n  }\n\n  // 2. Custom property\n  if (token[0] === '$') {\n    const identMatch = token.match(/^\\$([a-z_][a-z0-9-_]*)$/);\n    if (identMatch) {\n      const name = identMatch[1];\n      const processed = `var(--${name})`;\n      const bucketType = name.endsWith('-color') ? Bucket.Color : Bucket.Value;\n      return {\n        bucket: bucketType,\n        processed,\n      };\n    }\n    // invalid custom property → modifier\n  }\n\n  // 3. Hash colors (with optional alpha suffix e.g., #purple.5 or #purple.$disabled)\n  if (token[0] === '#' && token.length > 1) {\n    // alpha form: #name.alpha or #name.$prop\n    const alphaMatch = token.match(\n      /^#([a-z0-9-]+)\\.(\\$[a-z_][a-z0-9-_]*|[0-9]+)$/i,\n    );\n    if (alphaMatch) {\n      const [, base, rawAlpha] = alphaMatch;\n      let alpha: string;\n      if (rawAlpha.startsWith('$')) {\n        // Custom property: $disabled -> var(--disabled)\n        const propName = rawAlpha.slice(1);\n        alpha = `var(--${propName})`;\n      } else if (rawAlpha === '0') {\n        alpha = '0';\n      } else {\n        alpha = `.${rawAlpha}`;\n      }\n      return {\n        bucket: Bucket.Color,\n        processed: `rgb(var(--${base}-color-rgb) / ${alpha})`,\n      };\n    }\n\n    // hyphenated names like #dark-05 should keep full name\n\n    const name = token.slice(1);\n    // valid hex → treat as hex literal with fallback\n    if (RE_HEX.test(name)) {\n      return {\n        bucket: Bucket.Color,\n        processed: `var(--${name}-color, #${name})`,\n      };\n    }\n    // simple color name token → css variable lookup with rgb fallback\n    return { bucket: Bucket.Color, processed: `var(--${name}-color)` };\n  }\n\n  // 4 & 5. Functions\n  const openIdx = token.indexOf('(');\n  if (openIdx > 0 && token.endsWith(')')) {\n    const fname = token.slice(0, openIdx);\n    const inner = token.slice(openIdx + 1, -1); // without ()\n\n    if (COLOR_FUNCS.has(fname)) {\n      // Process inner to expand nested colors or units.\n      const argProcessed = recurse(inner).output.replace(/,\\s+/g, ','); // color funcs expect no spaces after commas\n      return { bucket: Bucket.Color, processed: `${fname}(${argProcessed})` };\n    }\n\n    // user function (provided via opts)\n    if (opts.funcs && fname in opts.funcs) {\n      // split by top-level commas within inner\n      const tmp = new StyleParser(opts).process(inner); // fresh parser w/ same opts but no cache share issues\n      const funcResult = opts.funcs[fname](tmp.groups);\n      // Re-classify the result to determine proper bucket (e.g., if it returns a color)\n      // Pass funcs: undefined to prevent infinite recursion if result matches a function pattern\n      return classify(funcResult, { ...opts, funcs: undefined }, recurse);\n    }\n\n    // generic: process inner and rebuild\n    const argProcessed = recurse(inner).output;\n    return { bucket: Bucket.Value, processed: `${fname}(${argProcessed})` };\n  }\n\n  // 6. Color fallback syntax: (#name, fallback)\n  if (token.startsWith('(') && token.endsWith(')')) {\n    const inner = token.slice(1, -1);\n    const colorMatch = inner.match(/^#([a-z0-9-]+)\\s*,\\s*(.*)$/i);\n    if (colorMatch) {\n      const [, name, fallback] = colorMatch;\n      const processedFallback = recurse(fallback).output;\n      return {\n        bucket: Bucket.Color,\n        processed: `var(--${name}-color, ${processedFallback})`,\n      };\n    }\n  }\n\n  // 7. Custom property with fallback syntax: ($prop, fallback)\n  if (token.startsWith('(') && token.endsWith(')')) {\n    const inner = token.slice(1, -1);\n    const match = inner.match(/^\\$([a-z_][a-z0-9-_]*)\\s*,\\s*(.*)$/);\n    if (match) {\n      const [, name, fallback] = match;\n      const processedFallback = recurse(fallback).output;\n      const bucketType = name.endsWith('-color') ? Bucket.Color : Bucket.Value;\n      return {\n        bucket: bucketType,\n        processed: `var(--${name}, ${processedFallback})`,\n      };\n    }\n  }\n\n  // 8. Auto-calc group\n  if (token[0] === '(' && token[token.length - 1] === ')') {\n    const inner = token.slice(1, -1);\n    const innerProcessed = recurse(inner).output;\n    return { bucket: Bucket.Value, processed: `calc(${innerProcessed})` };\n  }\n\n  // 9. Unit number\n  const um = token.match(RE_UNIT_NUM);\n  if (um) {\n    const unit = um[1];\n    const numericPart = parseFloat(token.slice(0, -unit.length));\n    const handler = opts.units && opts.units[unit];\n    if (handler) {\n      if (typeof handler === 'string') {\n        // Check if this is a raw CSS unit (e.g., \"8px\", \"1rem\")\n        const rawMatch = handler.match(RE_RAW_UNIT);\n        if (rawMatch) {\n          // Raw unit: calculate directly instead of using calc()\n          const [, baseNum, cssUnit] = rawMatch;\n          const result = numericPart * parseFloat(baseNum);\n          const processed = `${result}${cssUnit}`;\n          // Re-parse to resolve any nested units (e.g., units referencing other units)\n          const resolved = resolveUntilStable(processed, opts, recurse);\n          return { bucket: Bucket.Value, processed: resolved };\n        }\n\n        // Non-raw handler (e.g., \"var(--gap)\", \"calc(...)\"): use calc() wrapping\n        const base = handler;\n        if (numericPart === 1) {\n          return { bucket: Bucket.Value, processed: base };\n        }\n        return {\n          bucket: Bucket.Value,\n          processed: `calc(${numericPart} * ${base})`,\n        };\n      } else {\n        // Function units return complete CSS expressions, no wrapping needed\n        const inner = handler(numericPart);\n        return {\n          bucket: Bucket.Value,\n          processed: inner,\n        };\n      }\n    }\n  }\n\n  // 9b. Unknown numeric+unit → treat as literal value (e.g., 1fr)\n  if (/^[+-]?(?:\\d*\\.\\d+|\\d+)[a-z%]+$/.test(token)) {\n    return { bucket: Bucket.Value, processed: token };\n  }\n\n  // 9c. Plain unit-less numbers should be treated as value tokens so that\n  // code such as `scrollbar={10}` resolves correctly.\n  if (RE_NUMBER.test(token)) {\n    return { bucket: Bucket.Value, processed: token };\n  }\n\n  // 10. Literal value keywords\n  if (VALUE_KEYWORDS.has(token)) {\n    return { bucket: Bucket.Value, processed: token };\n  }\n\n  // 10b. Special keyword colors\n  if (token === 'transparent' || token === 'currentcolor') {\n    return { bucket: Bucket.Color, processed: token };\n  }\n\n  // 11. Fallback modifier\n  return { bucket: Bucket.Mod, processed: token };\n}\n"],"mappings":"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"}
+{"version":3,"file":"classify.js","names":[],"sources":["../../src/parser/classify.ts"],"sourcesContent":["import { getGlobalPredefinedTokens } from '../utils/styles';\n\nimport {\n  COLOR_FUNCS,\n  RE_HEX,\n  RE_NUMBER,\n  RE_RAW_UNIT,\n  RE_UNIT_NUM,\n  VALUE_KEYWORDS,\n} from './const';\nimport { StyleParser } from './parser';\nimport type { ParserOptions, ProcessedStyle } from './types';\nimport { Bucket } from './types';\n\n/**\n * Re-parses a value through the parser until it stabilizes (no changes)\n * or max iterations reached. This allows units to reference other units.\n * Example: { x: '8px', y: '2x' } -> '1y' resolves to '16px'\n */\nfunction resolveUntilStable(\n  value: string,\n  opts: ParserOptions,\n  recurse: (str: string) => ProcessedStyle,\n  maxIterations = 10,\n): string {\n  let current = value;\n  for (let i = 0; i < maxIterations; i++) {\n    // Check if the current value contains a custom unit that needs resolution\n    const unitMatch = current.match(RE_UNIT_NUM);\n    if (!unitMatch) break; // Not a unit number, no resolution needed\n\n    const unitName = unitMatch[1];\n    // Only recurse if the unit is a custom unit we know about\n    // Any unit not in opts.units is assumed to be a native CSS unit\n    if (!opts.units || !(unitName in opts.units)) break;\n\n    const result = recurse(current);\n    if (result.output === current) break; // Stable\n    current = result.output;\n  }\n  return current;\n}\n\nexport function classify(\n  raw: string,\n  opts: ParserOptions,\n  recurse: (str: string) => ProcessedStyle,\n): { bucket: Bucket; processed: string } {\n  const token = raw.trim();\n  if (!token) return { bucket: Bucket.Mod, processed: '' };\n\n  // Early-out: if the token contains unmatched parentheses treat it as invalid\n  // and skip it. This avoids cases like `drop-shadow(` that are missing a\n  // closing parenthesis (e.g., a user-typo in CSS). We count paren depth while\n  // ignoring everything inside string literals to avoid false positives.\n  {\n    let depth = 0;\n    let inQuote: string | 0 = 0;\n    for (let i = 0; i < token.length; i++) {\n      const ch = token[i];\n\n      // track quote context so parentheses inside quotes are ignored\n      if (inQuote) {\n        if (ch === inQuote && token[i - 1] !== '\\\\') inQuote = 0;\n        continue;\n      }\n      if (ch === '\"' || ch === \"'\") {\n        inQuote = ch;\n        continue;\n      }\n\n      if (ch === '(') depth++;\n      else if (ch === ')') depth = Math.max(0, depth - 1);\n    }\n\n    if (depth !== 0) {\n      // Unbalanced parens → treat as invalid token (skipped).\n      console.warn(\n        'tasty: skipped invalid function token with unmatched parentheses:',\n        token,\n      );\n      return { bucket: Bucket.Mod, processed: '' };\n    }\n  }\n\n  // Quoted string literals should be treated as value tokens (e.g., \"\" for content)\n  if (\n    (token.startsWith('\"') && token.endsWith('\"')) ||\n    (token.startsWith(\"'\") && token.endsWith(\"'\"))\n  ) {\n    return { bucket: Bucket.Value, processed: token };\n  }\n\n  // 0. Double prefix for literal CSS property names ($$name -> --name, ##name -> --name-color)\n  // Used in transitions and animations to reference the property name itself, not its value\n  if (token.startsWith('$$')) {\n    const name = token.slice(2);\n    if (/^[a-z_][a-z0-9-_]*$/i.test(name)) {\n      return { bucket: Bucket.Value, processed: `--${name}` };\n    }\n  }\n  if (token.startsWith('##')) {\n    const name = token.slice(2);\n    if (/^[a-z_][a-z0-9-_]*$/i.test(name)) {\n      return { bucket: Bucket.Value, processed: `--${name}-color` };\n    }\n  }\n\n  // 0b. Special handling for #current (reserved keyword, cannot be overridden by predefined tokens)\n  // #current maps to CSS currentcolor keyword\n  if (token === '#current') {\n    return { bucket: Bucket.Color, processed: 'currentcolor' };\n  }\n\n  // #current with opacity: #current.5 or #current.$opacity\n  // Uses color-mix since currentcolor doesn't support rgb() alpha syntax\n  const currentAlphaMatch = token.match(\n    /^#current\\.(\\$[a-z_][a-z0-9-_]*|[0-9]+)$/i,\n  );\n  if (currentAlphaMatch) {\n    const rawAlpha = currentAlphaMatch[1];\n    let percentage: string;\n    if (rawAlpha.startsWith('$')) {\n      // Custom property: $disabled -> calc(var(--disabled) * 100%)\n      const propName = rawAlpha.slice(1);\n      percentage = `calc(var(--${propName}) * 100%)`;\n    } else if (rawAlpha === '0') {\n      percentage = '0%';\n    } else {\n      // Convert .5 -> 50%, .05 -> 5%\n      percentage = `${parseFloat('.' + rawAlpha) * 100}%`;\n    }\n    return {\n      bucket: Bucket.Color,\n      processed: `color-mix(in oklab, currentcolor ${percentage}, transparent)`,\n    };\n  }\n\n  // 0c. Check for predefined tokens (configured via configure({ tokens: {...} }))\n  // Must happen before default $ and # handling to allow overriding\n  if (token[0] === '$' || token[0] === '#') {\n    const predefinedTokens = getGlobalPredefinedTokens();\n    if (predefinedTokens) {\n      // Exact match\n      if (token in predefinedTokens) {\n        const tokenValue = predefinedTokens[token];\n        // Lowercase the token value to match parser behavior (parser lowercases input)\n        return classify(tokenValue.toLowerCase(), opts, recurse);\n      }\n      // Check for color token with alpha suffix: #token.alpha or #token.$prop\n      if (token[0] === '#') {\n        const alphaMatch = token.match(\n          /^(#[a-z0-9-]+)\\.(\\$[a-z_][a-z0-9-_]*|[0-9]+)$/i,\n        );\n        if (alphaMatch) {\n          const [, baseToken, rawAlpha] = alphaMatch;\n          if (baseToken in predefinedTokens) {\n            const resolvedValue = predefinedTokens[baseToken];\n\n            // If resolved value starts with # (color token), use standard alpha syntax\n            if (resolvedValue.startsWith('#')) {\n              // Lowercase to match parser behavior\n              return classify(\n                `${resolvedValue.toLowerCase()}.${rawAlpha}`,\n                opts,\n                recurse,\n              );\n            }\n\n            // For color functions like rgb(), rgba(), hsl(), hwb(), etc., inject alpha\n            // Includes all standard CSS color functions plus okhsl (plugin)\n            const funcMatch = resolvedValue.match(\n              /^(rgba?|hsla?|hwb|oklab|oklch|lab|lch|color|okhsl|device-cmyk|gray|color-mix|color-contrast)\\((.+)\\)$/i,\n            );\n            if (funcMatch) {\n              const [, funcName, args] = funcMatch;\n              // Handle $prop syntax for custom property alpha\n              let alpha: string;\n              if (rawAlpha.startsWith('$')) {\n                const propName = rawAlpha.slice(1);\n                alpha = `var(--${propName})`;\n              } else {\n                alpha = rawAlpha === '0' ? '0' : `.${rawAlpha}`;\n              }\n              // Normalize function name: rgba->rgb, hsla->hsl (modern syntax doesn't need 'a' suffix)\n              const normalizedFunc = funcName.replace(/a$/i, '').toLowerCase();\n              // Normalize to modern syntax: replace top-level commas with spaces\n              // Preserves commas inside nested functions like min(), max(), clamp()\n              const normalizeArgs = (a: string) => {\n                let result = '';\n                let depth = 0;\n                for (let i = 0; i < a.length; i++) {\n                  const c = a[i];\n                  if (c === '(') {\n                    depth++;\n                    result += c;\n                  } else if (c === ')') {\n                    depth = Math.max(0, depth - 1);\n                    result += c;\n                  } else if (c === ',' && depth === 0) {\n                    // Skip comma and any following whitespace at top level\n                    while (i + 1 < a.length && /\\s/.test(a[i + 1])) i++;\n                    result += ' ';\n                  } else {\n                    result += c;\n                  }\n                }\n                return result;\n              };\n              // Helper: find last top-level occurrence of a character (ignores parentheses)\n              const findLastTopLevel = (str: string, ch: string) => {\n                let depth = 0;\n                for (let i = str.length - 1; i >= 0; i--) {\n                  const c = str[i];\n                  if (c === ')') depth++;\n                  else if (c === '(') depth = Math.max(0, depth - 1);\n                  else if (c === ch && depth === 0) return i;\n                }\n                return -1;\n              };\n\n              // Check if already has alpha:\n              // - Modern syntax: has `/` separator at top level (works with dynamic alpha like var()/calc())\n              // - Legacy syntax: function ends with 'a' (rgba, hsla) and has exactly 4 top-level comma-separated values\n              const slashIdx = findLastTopLevel(args, '/');\n              const hasModernAlpha = slashIdx !== -1;\n\n              // Count top-level commas to avoid commas inside nested functions\n              let topLevelCommaCount = 0;\n              let lastTopLevelComma = -1;\n              {\n                let depth = 0;\n                for (let i = 0; i < args.length; i++) {\n                  const c = args[i];\n                  if (c === '(') depth++;\n                  else if (c === ')') depth = Math.max(0, depth - 1);\n                  else if (c === ',' && depth === 0) {\n                    topLevelCommaCount++;\n                    lastTopLevelComma = i;\n                  }\n                }\n              }\n\n              const hasLegacyAlpha =\n                !hasModernAlpha &&\n                /a$/i.test(funcName) &&\n                topLevelCommaCount === 3;\n\n              const colorArgs =\n                hasModernAlpha || hasLegacyAlpha\n                  ? normalizeArgs(\n                      hasModernAlpha\n                        ? args.slice(0, slashIdx).trim()\n                        : args.slice(0, lastTopLevelComma).trim(),\n                    )\n                  : normalizeArgs(args);\n\n              const constructed = `${normalizedFunc}(${colorArgs} / ${alpha})`;\n\n              // Custom functions (not native CSS) must be re-classified\n              // so the function handler can convert them to valid CSS\n              if (\n                !COLOR_FUNCS.has(normalizedFunc) &&\n                opts.funcs &&\n                normalizedFunc in opts.funcs\n              ) {\n                return classify(constructed, opts, recurse);\n              }\n\n              return { bucket: Bucket.Color, processed: constructed };\n            }\n\n            // Fallback: try appending .alpha (may not work for all cases)\n            return classify(`${resolvedValue}.${rawAlpha}`, opts, recurse);\n          }\n        }\n      }\n    }\n  }\n\n  // 0. Direct var(--*-color) token\n  const varColorMatch = token.match(/^var\\(--([a-z0-9-]+)-color\\)$/);\n  if (varColorMatch) {\n    return { bucket: Bucket.Color, processed: token };\n  }\n\n  // 1. URL\n  if (token.startsWith('url(')) {\n    return { bucket: Bucket.Value, processed: token };\n  }\n\n  // 2. Custom property\n  if (token[0] === '$') {\n    const identMatch = token.match(/^\\$([a-z_][a-z0-9-_]*)$/);\n    if (identMatch) {\n      const name = identMatch[1];\n      const processed = `var(--${name})`;\n      const bucketType = name.endsWith('-color') ? Bucket.Color : Bucket.Value;\n      return {\n        bucket: bucketType,\n        processed,\n      };\n    }\n    // invalid custom property → modifier\n  }\n\n  // 3. Hash colors (with optional alpha suffix e.g., #purple.5 or #purple.$disabled)\n  if (token[0] === '#' && token.length > 1) {\n    // alpha form: #name.alpha or #name.$prop\n    const alphaMatch = token.match(\n      /^#([a-z0-9-]+)\\.(\\$[a-z_][a-z0-9-_]*|[0-9]+)$/i,\n    );\n    if (alphaMatch) {\n      const [, base, rawAlpha] = alphaMatch;\n      let alpha: string;\n      if (rawAlpha.startsWith('$')) {\n        // Custom property: $disabled -> var(--disabled)\n        const propName = rawAlpha.slice(1);\n        alpha = `var(--${propName})`;\n      } else if (rawAlpha === '0') {\n        alpha = '0';\n      } else {\n        alpha = `.${rawAlpha}`;\n      }\n      return {\n        bucket: Bucket.Color,\n        processed: `rgb(var(--${base}-color-rgb) / ${alpha})`,\n      };\n    }\n\n    // hyphenated names like #dark-05 should keep full name\n\n    const name = token.slice(1);\n    // valid hex → treat as hex literal with fallback\n    if (RE_HEX.test(name)) {\n      return {\n        bucket: Bucket.Color,\n        processed: `var(--${name}-color, #${name})`,\n      };\n    }\n    // simple color name token → css variable lookup with rgb fallback\n    return { bucket: Bucket.Color, processed: `var(--${name}-color)` };\n  }\n\n  // 4 & 5. Functions\n  const openIdx = token.indexOf('(');\n  if (openIdx > 0 && token.endsWith(')')) {\n    const fname = token.slice(0, openIdx);\n    const inner = token.slice(openIdx + 1, -1); // without ()\n\n    if (COLOR_FUNCS.has(fname)) {\n      // Process inner to expand nested colors or units.\n      const argProcessed = recurse(inner).output.replace(/,\\s+/g, ','); // color funcs expect no spaces after commas\n      return { bucket: Bucket.Color, processed: `${fname}(${argProcessed})` };\n    }\n\n    // user function (provided via opts)\n    if (opts.funcs && fname in opts.funcs) {\n      // split by top-level commas within inner\n      const tmp = new StyleParser(opts).process(inner); // fresh parser w/ same opts but no cache share issues\n      const funcResult = opts.funcs[fname](tmp.groups);\n      // Re-classify the result to determine proper bucket (e.g., if it returns a color)\n      // Pass funcs: undefined to prevent infinite recursion if result matches a function pattern\n      return classify(funcResult, { ...opts, funcs: undefined }, recurse);\n    }\n\n    // generic: process inner and rebuild\n    const argProcessed = recurse(inner).output;\n    return { bucket: Bucket.Value, processed: `${fname}(${argProcessed})` };\n  }\n\n  // 6. Color fallback syntax: (#name, fallback)\n  if (token.startsWith('(') && token.endsWith(')')) {\n    const inner = token.slice(1, -1);\n    const colorMatch = inner.match(/^#([a-z0-9-]+)\\s*,\\s*(.*)$/i);\n    if (colorMatch) {\n      const [, name, fallback] = colorMatch;\n      const processedFallback = recurse(fallback).output;\n      return {\n        bucket: Bucket.Color,\n        processed: `var(--${name}-color, ${processedFallback})`,\n      };\n    }\n  }\n\n  // 7. Custom property with fallback syntax: ($prop, fallback)\n  if (token.startsWith('(') && token.endsWith(')')) {\n    const inner = token.slice(1, -1);\n    const match = inner.match(/^\\$([a-z_][a-z0-9-_]*)\\s*,\\s*(.*)$/);\n    if (match) {\n      const [, name, fallback] = match;\n      const processedFallback = recurse(fallback).output;\n      const bucketType = name.endsWith('-color') ? Bucket.Color : Bucket.Value;\n      return {\n        bucket: bucketType,\n        processed: `var(--${name}, ${processedFallback})`,\n      };\n    }\n  }\n\n  // 8. Auto-calc group\n  if (token[0] === '(' && token[token.length - 1] === ')') {\n    const inner = token.slice(1, -1);\n    const innerProcessed = recurse(inner).output;\n    return { bucket: Bucket.Value, processed: `calc(${innerProcessed})` };\n  }\n\n  // 9. Unit number\n  const um = token.match(RE_UNIT_NUM);\n  if (um) {\n    const unit = um[1];\n    const numericPart = parseFloat(token.slice(0, -unit.length));\n    const handler = opts.units && opts.units[unit];\n    if (handler) {\n      if (typeof handler === 'string') {\n        // Check if this is a raw CSS unit (e.g., \"8px\", \"1rem\")\n        const rawMatch = handler.match(RE_RAW_UNIT);\n        if (rawMatch) {\n          // Raw unit: calculate directly instead of using calc()\n          const [, baseNum, cssUnit] = rawMatch;\n          const result = numericPart * parseFloat(baseNum);\n          const processed = `${result}${cssUnit}`;\n          // Re-parse to resolve any nested units (e.g., units referencing other units)\n          const resolved = resolveUntilStable(processed, opts, recurse);\n          return { bucket: Bucket.Value, processed: resolved };\n        }\n\n        // Non-raw handler (e.g., \"var(--gap)\", \"calc(...)\"): use calc() wrapping\n        const base = handler;\n        if (numericPart === 1) {\n          return { bucket: Bucket.Value, processed: base };\n        }\n        return {\n          bucket: Bucket.Value,\n          processed: `calc(${numericPart} * ${base})`,\n        };\n      } else {\n        // Function units return complete CSS expressions, no wrapping needed\n        const inner = handler(numericPart);\n        return {\n          bucket: Bucket.Value,\n          processed: inner,\n        };\n      }\n    }\n  }\n\n  // 9b. Unknown numeric+unit → treat as literal value (e.g., 1fr)\n  if (/^[+-]?(?:\\d*\\.\\d+|\\d+)[a-z%]+$/.test(token)) {\n    return { bucket: Bucket.Value, processed: token };\n  }\n\n  // 9c. Plain unit-less numbers should be treated as value tokens (e.g.,\n  // numeric arguments in custom style handlers).\n  if (RE_NUMBER.test(token)) {\n    return { bucket: Bucket.Value, processed: token };\n  }\n\n  // 10. Literal value keywords\n  if (VALUE_KEYWORDS.has(token)) {\n    return { bucket: Bucket.Value, processed: token };\n  }\n\n  // 10b. Special keyword colors\n  if (token === 'transparent' || token === 'currentcolor') {\n    return { bucket: Bucket.Color, processed: token };\n  }\n\n  // 11. Fallback modifier\n  return { bucket: Bucket.Mod, processed: token };\n}\n"],"mappings":"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"}

package/dist/styles/scrollbar.js

@@ -1,5 +1,6 @@
 import { makeEmptyDetails } from "../parser/types.js";
 import { parseStyle } from "../utils/styles.js";
+import { warn } from "../utils/warnings.js";
 
 //#region src/styles/scrollbar.ts
 /**
@@ -20,6 +21,12 @@ function scrollbarStyle({ scrollbar, overflow }) {
 	const defaultTrackColor = "var(--scrollbar-track-color, transparent)";
 	const style = {};
 	if (mods.includes("none")) {
+		const ignored = [
+			...mods.filter((m) => m !== "none"),
+			...values,
+			...colors
+		];
+		if (ignored.length) warn(`scrollbar="none" hides the scrollbar; other tokens are ignored: ${ignored.join(", ")}`);
 		style["scrollbar-width"] = "none";
 		return style;
 	}

package/dist/styles/scrollbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"scrollbar.js","names":[],"sources":["../../src/styles/scrollbar.ts"],"sourcesContent":["import { makeEmptyDetails } from '../parser/types';\nimport { parseStyle } from '../utils/styles';\n\ninterface ScrollbarStyleProps {\n  scrollbar?: string | boolean;\n  overflow?: string;\n}\n\n/**\n * Standard CSS scrollbar styling via `scrollbar-width`, `scrollbar-color`,\n * and `scrollbar-gutter`.\n *\n * Width values: `thin` (default), `auto`, `none`\n * Modifiers: `stable`, `both-edges`, `always`\n *\n * Note: `auto` is classified as a VALUE_KEYWORD by the parser, so it lands\n * in `values` rather than `mods`. Both locations are checked for robustness.\n */\nexport function scrollbarStyle({\n  scrollbar,\n  overflow,\n}: ScrollbarStyleProps): Record<string, string> | undefined {\n  if (!scrollbar) return;\n\n  // `true` is treated as `thin` (empty string is falsy, caught by the guard above)\n  const value = scrollbar === true ? 'thin' : scrollbar;\n  const processed = parseStyle(String(value));\n  const { mods, colors, values } = processed.groups[0] ?? makeEmptyDetails();\n\n  const defaultThumbColor = 'var(--scrollbar-thumb-color)';\n  const defaultTrackColor = 'var(--scrollbar-track-color, transparent)';\n\n  const style: Record<string, string> = {};\n\n  if (mods.includes('none')) {\n    style['scrollbar-width'] = 'none';\n\n    return style;\n  }\n\n  // `thin` is the default — accepted as a value for readability but always\n  // the fallback when neither `auto` nor `none` is specified.\n  // `auto` is a VALUE_KEYWORD in the parser, so it may land in `values`.\n  if (mods.includes('auto') || values.includes('auto')) {\n    style['scrollbar-width'] = 'auto';\n  } else {\n    style['scrollbar-width'] = 'thin';\n  }\n\n  const thumbColor = colors?.[0] || defaultThumbColor;\n  const trackColor = colors?.[1] || defaultTrackColor;\n  style['scrollbar-color'] = `${thumbColor} ${trackColor}`;\n\n  if (mods.includes('stable') || mods.includes('both-edges')) {\n    style['scrollbar-gutter'] = mods.includes('both-edges')\n      ? 'stable both-edges'\n      : 'stable';\n  }\n\n  if (mods.includes('always')) {\n    const effectiveOverflow = overflow || 'scroll';\n    style['overflow'] = effectiveOverflow;\n\n    // scrollbar-gutter only applies with scroll/auto overflow\n    if (\n      !style['scrollbar-gutter'] &&\n      (effectiveOverflow === 'scroll' || effectiveOverflow === 'auto')\n    ) {\n      style['scrollbar-gutter'] = 'stable';\n    }\n  }\n\n  return style;\n}\n\nscrollbarStyle.__lookupStyles = ['scrollbar', 'overflow'];\n"],"mappings":";;;;;;;;;;;;;;AAkBA,SAAgB,eAAe,EAC7B,WACA,YAC0D;AAC1D,KAAI,CAAC,UAAW;CAGhB,MAAM,QAAQ,cAAc,OAAO,SAAS;CAE5C,MAAM,EAAE,MAAM,QAAQ,WADJ,WAAW,OAAO,MAAM,CAAC,CACA,OAAO,MAAM,kBAAkB;CAE1E,MAAM,oBAAoB;CAC1B,MAAM,oBAAoB;CAE1B,MAAM,QAAgC,EAAE;AAExC,KAAI,KAAK,SAAS,OAAO,EAAE;AACzB,QAAM,qBAAqB;AAE3B,SAAO;;AAMT,KAAI,KAAK,SAAS,OAAO,IAAI,OAAO,SAAS,OAAO,CAClD,OAAM,qBAAqB;KAE3B,OAAM,qBAAqB;AAK7B,OAAM,qBAAqB,GAFR,SAAS,MAAM,kBAEO,GADtB,SAAS,MAAM;AAGlC,KAAI,KAAK,SAAS,SAAS,IAAI,KAAK,SAAS,aAAa,CACxD,OAAM,sBAAsB,KAAK,SAAS,aAAa,GACnD,sBACA;AAGN,KAAI,KAAK,SAAS,SAAS,EAAE;EAC3B,MAAM,oBAAoB,YAAY;AACtC,QAAM,cAAc;AAGpB,MACE,CAAC,MAAM,wBACN,sBAAsB,YAAY,sBAAsB,QAEzD,OAAM,sBAAsB;;AAIhC,QAAO;;AAGT,eAAe,iBAAiB,CAAC,aAAa,WAAW"}
+{"version":3,"file":"scrollbar.js","names":[],"sources":["../../src/styles/scrollbar.ts"],"sourcesContent":["import { makeEmptyDetails } from '../parser/types';\nimport { parseStyle } from '../utils/styles';\nimport { warn } from '../utils/warnings';\n\ninterface ScrollbarStyleProps {\n  scrollbar?: string | boolean;\n  overflow?: string;\n}\n\n/**\n * Standard CSS scrollbar styling via `scrollbar-width`, `scrollbar-color`,\n * and `scrollbar-gutter`.\n *\n * Width values: `thin` (default), `auto`, `none`\n * Modifiers: `stable`, `both-edges`, `always`\n *\n * Note: `auto` is classified as a VALUE_KEYWORD by the parser, so it lands\n * in `values` rather than `mods`. Both locations are checked for robustness.\n */\nexport function scrollbarStyle({\n  scrollbar,\n  overflow,\n}: ScrollbarStyleProps): Record<string, string> | undefined {\n  if (!scrollbar) return;\n\n  // `true` is treated as `thin` (empty string is falsy, caught by the guard above)\n  const value = scrollbar === true ? 'thin' : scrollbar;\n  const processed = parseStyle(String(value));\n  const { mods, colors, values } = processed.groups[0] ?? makeEmptyDetails();\n\n  const defaultThumbColor = 'var(--scrollbar-thumb-color)';\n  const defaultTrackColor = 'var(--scrollbar-track-color, transparent)';\n\n  const style: Record<string, string> = {};\n\n  if (mods.includes('none')) {\n    const ignored = [\n      ...mods.filter((m) => m !== 'none'),\n      ...values,\n      ...colors,\n    ];\n\n    if (ignored.length) {\n      warn(\n        `scrollbar=\"none\" hides the scrollbar; other tokens are ignored: ${ignored.join(', ')}`,\n      );\n    }\n\n    style['scrollbar-width'] = 'none';\n\n    return style;\n  }\n\n  // `thin` is the default — accepted as a value for readability but always\n  // the fallback when neither `auto` nor `none` is specified.\n  // `auto` is a VALUE_KEYWORD in the parser, so it may land in `values`.\n  if (mods.includes('auto') || values.includes('auto')) {\n    style['scrollbar-width'] = 'auto';\n  } else {\n    style['scrollbar-width'] = 'thin';\n  }\n\n  const thumbColor = colors?.[0] || defaultThumbColor;\n  const trackColor = colors?.[1] || defaultTrackColor;\n  style['scrollbar-color'] = `${thumbColor} ${trackColor}`;\n\n  if (mods.includes('stable') || mods.includes('both-edges')) {\n    style['scrollbar-gutter'] = mods.includes('both-edges')\n      ? 'stable both-edges'\n      : 'stable';\n  }\n\n  if (mods.includes('always')) {\n    const effectiveOverflow = overflow || 'scroll';\n    style['overflow'] = effectiveOverflow;\n\n    // scrollbar-gutter only applies with scroll/auto overflow\n    if (\n      !style['scrollbar-gutter'] &&\n      (effectiveOverflow === 'scroll' || effectiveOverflow === 'auto')\n    ) {\n      style['scrollbar-gutter'] = 'stable';\n    }\n  }\n\n  return style;\n}\n\nscrollbarStyle.__lookupStyles = ['scrollbar', 'overflow'];\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,SAAgB,eAAe,EAC7B,WACA,YAC0D;AAC1D,KAAI,CAAC,UAAW;CAGhB,MAAM,QAAQ,cAAc,OAAO,SAAS;CAE5C,MAAM,EAAE,MAAM,QAAQ,WADJ,WAAW,OAAO,MAAM,CAAC,CACA,OAAO,MAAM,kBAAkB;CAE1E,MAAM,oBAAoB;CAC1B,MAAM,oBAAoB;CAE1B,MAAM,QAAgC,EAAE;AAExC,KAAI,KAAK,SAAS,OAAO,EAAE;EACzB,MAAM,UAAU;GACd,GAAG,KAAK,QAAQ,MAAM,MAAM,OAAO;GACnC,GAAG;GACH,GAAG;GACJ;AAED,MAAI,QAAQ,OACV,MACE,mEAAmE,QAAQ,KAAK,KAAK,GACtF;AAGH,QAAM,qBAAqB;AAE3B,SAAO;;AAMT,KAAI,KAAK,SAAS,OAAO,IAAI,OAAO,SAAS,OAAO,CAClD,OAAM,qBAAqB;KAE3B,OAAM,qBAAqB;AAK7B,OAAM,qBAAqB,GAFR,SAAS,MAAM,kBAEO,GADtB,SAAS,MAAM;AAGlC,KAAI,KAAK,SAAS,SAAS,IAAI,KAAK,SAAS,aAAa,CACxD,OAAM,sBAAsB,KAAK,SAAS,aAAa,GACnD,sBACA;AAGN,KAAI,KAAK,SAAS,SAAS,EAAE;EAC3B,MAAM,oBAAoB,YAAY;AACtC,QAAM,cAAc;AAGpB,MACE,CAAC,MAAM,wBACN,sBAAsB,YAAY,sBAAsB,QAEzD,OAAM,sBAAsB;;AAIhC,QAAO;;AAGT,eAAe,iBAAiB,CAAC,aAAa,WAAW"}

package/dist/tasty.d.ts

@@ -99,10 +99,6 @@ type TastyComponentPropsWithDefaults<Props extends PropsWithStyles, DefaultProps
 declare function tasty<K extends StyleList, V extends VariantMap, E extends ElementsDefinition = Record<string, never>, Tag extends keyof JSX.IntrinsicElements = 'div'>(options: TastyElementOptions<K, V, E, Tag>, secondArg?: never): ForwardRefExoticComponent<PropsWithoutRef<TastyElementProps<K, V, Tag>> & RefAttributes<unknown>> & SubElementComponents<E>;
 declare function tasty<Props extends PropsWithStyles, DefaultProps extends Partial<Props> = Partial<Props>>(Component: ComponentType<Props>, options?: TastyProps<never, never, Record<string, never>, Props>): ComponentType<TastyComponentPropsWithDefaults<Props, DefaultProps>>;
 declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementTagNameMap> & {
-  top?: StyleValue<csstype.Property.Top<string | number> | undefined> | StyleValueStateMap<csstype.Property.Top<string | number> | undefined>;
-  right?: StyleValue<csstype.Property.Right<string | number> | undefined> | StyleValueStateMap<csstype.Property.Right<string | number> | undefined>;
-  bottom?: StyleValue<csstype.Property.Bottom<string | number> | undefined> | StyleValueStateMap<csstype.Property.Bottom<string | number> | undefined>;
-  left?: StyleValue<csstype.Property.Left<string | number> | undefined> | StyleValueStateMap<csstype.Property.Left<string | number> | undefined>;
   color?: StyleValue<string | boolean | undefined> | StyleValueStateMap<string | boolean | undefined>;
   fill?: StyleValue<boolean | (string & {}) | `#${string}` | `#${string}.0` | `#${string}.7` | `#${string}.1` | `#${string}.2` | `#${string}.3` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.07` | `#${string}.01` | `#${string}.02` | `#${string}.03` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.70` | `#${string}.77` | `#${string}.71` | `#${string}.72` | `#${string}.73` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.10` | `#${string}.17` | `#${string}.11` | `#${string}.12` | `#${string}.13` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.27` | `#${string}.21` | `#${string}.22` | `#${string}.23` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.30` | `#${string}.37` | `#${string}.31` | `#${string}.32` | `#${string}.33` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.40` | `#${string}.47` | `#${string}.41` | `#${string}.42` | `#${string}.43` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.57` | `#${string}.51` | `#${string}.52` | `#${string}.53` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.67` | `#${string}.61` | `#${string}.62` | `#${string}.63` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.87` | `#${string}.81` | `#${string}.82` | `#${string}.83` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.97` | `#${string}.91` | `#${string}.92` | `#${string}.93` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `rgba(${string})` | undefined> | StyleValueStateMap<boolean | (string & {}) | `#${string}` | `#${string}.0` | `#${string}.7` | `#${string}.1` | `#${string}.2` | `#${string}.3` | `#${string}.4` | `#${string}.5` | `#${string}.6` | `#${string}.8` | `#${string}.9` | `#${string}.00` | `#${string}.07` | `#${string}.01` | `#${string}.02` | `#${string}.03` | `#${string}.04` | `#${string}.05` | `#${string}.06` | `#${string}.08` | `#${string}.09` | `#${string}.70` | `#${string}.77` | `#${string}.71` | `#${string}.72` | `#${string}.73` | `#${string}.74` | `#${string}.75` | `#${string}.76` | `#${string}.78` | `#${string}.79` | `#${string}.10` | `#${string}.17` | `#${string}.11` | `#${string}.12` | `#${string}.13` | `#${string}.14` | `#${string}.15` | `#${string}.16` | `#${string}.18` | `#${string}.19` | `#${string}.20` | `#${string}.27` | `#${string}.21` | `#${string}.22` | `#${string}.23` | `#${string}.24` | `#${string}.25` | `#${string}.26` | `#${string}.28` | `#${string}.29` | `#${string}.30` | `#${string}.37` | `#${string}.31` | `#${string}.32` | `#${string}.33` | `#${string}.34` | `#${string}.35` | `#${string}.36` | `#${string}.38` | `#${string}.39` | `#${string}.40` | `#${string}.47` | `#${string}.41` | `#${string}.42` | `#${string}.43` | `#${string}.44` | `#${string}.45` | `#${string}.46` | `#${string}.48` | `#${string}.49` | `#${string}.50` | `#${string}.57` | `#${string}.51` | `#${string}.52` | `#${string}.53` | `#${string}.54` | `#${string}.55` | `#${string}.56` | `#${string}.58` | `#${string}.59` | `#${string}.60` | `#${string}.67` | `#${string}.61` | `#${string}.62` | `#${string}.63` | `#${string}.64` | `#${string}.65` | `#${string}.66` | `#${string}.68` | `#${string}.69` | `#${string}.80` | `#${string}.87` | `#${string}.81` | `#${string}.82` | `#${string}.83` | `#${string}.84` | `#${string}.85` | `#${string}.86` | `#${string}.88` | `#${string}.89` | `#${string}.90` | `#${string}.97` | `#${string}.91` | `#${string}.92` | `#${string}.93` | `#${string}.94` | `#${string}.95` | `#${string}.96` | `#${string}.98` | `#${string}.99` | `#${string}.100` | `rgb(${string})` | `rgba(${string})` | undefined>;
   font?: StyleValue<boolean | csstype.Property.FontFamily | undefined> | StyleValueStateMap<boolean | csstype.Property.FontFamily | undefined>;
@@ -191,6 +187,7 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   borderTopRightRadius?: StyleValue<csstype.Property.BorderTopRightRadius<string | number> | undefined> | StyleValueStateMap<csstype.Property.BorderTopRightRadius<string | number> | undefined>;
   borderTopStyle?: StyleValue<csstype.Property.BorderTopStyle | undefined> | StyleValueStateMap<csstype.Property.BorderTopStyle | undefined>;
   borderTopWidth?: StyleValue<csstype.Property.BorderTopWidth<string | number> | undefined> | StyleValueStateMap<csstype.Property.BorderTopWidth<string | number> | undefined>;
+  bottom?: StyleValue<csstype.Property.Bottom<string | number> | undefined> | StyleValueStateMap<csstype.Property.Bottom<string | number> | undefined>;
   boxDecorationBreak?: StyleValue<csstype.Property.BoxDecorationBreak | undefined> | StyleValueStateMap<csstype.Property.BoxDecorationBreak | undefined>;
   boxShadow?: StyleValue<csstype.Property.BoxShadow | undefined> | StyleValueStateMap<csstype.Property.BoxShadow | undefined>;
   boxSizing?: StyleValue<csstype.Property.BoxSizing | undefined> | StyleValueStateMap<csstype.Property.BoxSizing | undefined>;
@@ -303,6 +300,7 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   justifyItems?: StyleValue<csstype.Property.JustifyItems | undefined> | StyleValueStateMap<csstype.Property.JustifyItems | undefined>;
   justifySelf?: StyleValue<csstype.Property.JustifySelf | undefined> | StyleValueStateMap<csstype.Property.JustifySelf | undefined>;
   justifyTracks?: StyleValue<csstype.Property.JustifyTracks | undefined> | StyleValueStateMap<csstype.Property.JustifyTracks | undefined>;
+  left?: StyleValue<csstype.Property.Left<string | number> | undefined> | StyleValueStateMap<csstype.Property.Left<string | number> | undefined>;
   letterSpacing?: StyleValue<csstype.Property.LetterSpacing<string | number> | undefined> | StyleValueStateMap<csstype.Property.LetterSpacing<string | number> | undefined>;
   lightingColor?: StyleValue<csstype.Property.LightingColor | undefined> | StyleValueStateMap<csstype.Property.LightingColor | undefined>;
   lineBreak?: StyleValue<csstype.Property.LineBreak | undefined> | StyleValueStateMap<csstype.Property.LineBreak | undefined>;
@@ -408,6 +406,7 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   quotes?: StyleValue<csstype.Property.Quotes | undefined> | StyleValueStateMap<csstype.Property.Quotes | undefined>;
   r?: StyleValue<csstype.Property.R<string | number> | undefined> | StyleValueStateMap<csstype.Property.R<string | number> | undefined>;
   resize?: StyleValue<csstype.Property.Resize | undefined> | StyleValueStateMap<csstype.Property.Resize | undefined>;
+  right?: StyleValue<csstype.Property.Right<string | number> | undefined> | StyleValueStateMap<csstype.Property.Right<string | number> | undefined>;
   rotate?: StyleValue<csstype.Property.Rotate | undefined> | StyleValueStateMap<csstype.Property.Rotate | undefined>;
   rowGap?: StyleValue<csstype.Property.RowGap<string | number> | undefined> | StyleValueStateMap<csstype.Property.RowGap<string | number> | undefined>;
   rubyAlign?: StyleValue<csstype.Property.RubyAlign | undefined> | StyleValueStateMap<csstype.Property.RubyAlign | undefined>;
@@ -496,6 +495,7 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   textWrapMode?: StyleValue<csstype.Property.TextWrapMode | undefined> | StyleValueStateMap<csstype.Property.TextWrapMode | undefined>;
   textWrapStyle?: StyleValue<csstype.Property.TextWrapStyle | undefined> | StyleValueStateMap<csstype.Property.TextWrapStyle | undefined>;
   timelineScope?: StyleValue<csstype.Property.TimelineScope | undefined> | StyleValueStateMap<csstype.Property.TimelineScope | undefined>;
+  top?: StyleValue<csstype.Property.Top<string | number> | undefined> | StyleValueStateMap<csstype.Property.Top<string | number> | undefined>;
   touchAction?: StyleValue<csstype.Property.TouchAction | undefined> | StyleValueStateMap<csstype.Property.TouchAction | undefined>;
   transform?: StyleValue<csstype.Property.Transform | undefined> | StyleValueStateMap<csstype.Property.Transform | undefined>;
   transformBox?: StyleValue<csstype.Property.TransformBox | undefined> | StyleValueStateMap<csstype.Property.TransformBox | undefined>;
@@ -970,12 +970,12 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   gridRows?: StyleValue<csstype.Property.GridTemplateRows<string | number> | undefined> | StyleValueStateMap<csstype.Property.GridTemplateRows<string | number> | undefined>;
   preset?: StyleValue<string | (string & {}) | undefined> | StyleValueStateMap<string | (string & {}) | undefined>;
   align?: StyleValue<(string & {}) | "center" | "start" | "baseline" | "inherit" | "initial" | "end" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | undefined> | StyleValueStateMap<(string & {}) | "center" | "start" | "baseline" | "inherit" | "initial" | "end" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | undefined>;
-  justify?: StyleValue<"right" | "left" | (string & {}) | "center" | "start" | "baseline" | "inherit" | "initial" | "end" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | "legacy" | undefined> | StyleValueStateMap<"right" | "left" | (string & {}) | "center" | "start" | "baseline" | "inherit" | "initial" | "end" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | "legacy" | undefined>;
+  justify?: StyleValue<(string & {}) | "left" | "right" | "center" | "start" | "baseline" | "inherit" | "initial" | "end" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | "legacy" | undefined> | StyleValueStateMap<(string & {}) | "left" | "right" | "center" | "start" | "baseline" | "inherit" | "initial" | "end" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "normal" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "self-end" | "self-start" | "anchor-center" | "legacy" | undefined>;
   place?: StyleValue<string | (string & {}) | undefined> | StyleValueStateMap<string | (string & {}) | undefined>;
   "@keyframes"?: StyleValue<Record<string, KeyframesSteps> | undefined> | StyleValueStateMap<Record<string, KeyframesSteps> | undefined>;
   "@properties"?: StyleValue<Record<string, PropertyDefinition> | undefined> | StyleValueStateMap<Record<string, PropertyDefinition> | undefined>;
   recipe?: StyleValue<string | undefined> | StyleValueStateMap<string | undefined>;
-} & BaseStyleProps & WithVariant<VariantMap> & Omit<Omit<AllHTMLAttributes<HTMLElement>, keyof react.ClassAttributes<HTMLDivElement> | keyof react.HTMLAttributes<HTMLDivElement>> & react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement>, "top" | "right" | "bottom" | "left" | "qa" | "qaVal" | "color" | "fill" | "font" | "outline" | "gap" | "padding" | "margin" | "width" | "height" | "border" | "transition" | "placeContent" | "placeItems" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "alignmentBaseline" | "anchorName" | "anchorScope" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationRangeEnd" | "animationRangeStart" | "animationTimeline" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "baselineShift" | "blockSize" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "clipRule" | "colorAdjust" | "colorInterpolationFilters" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "cx" | "cy" | "d" | "direction" | "display" | "dominantBaseline" | "emptyCells" | "fieldSizing" | "fillOpacity" | "fillRule" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "floodColor" | "floodOpacity" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStyle" | "fontSynthesis" | "fontSynthesisPosition" | "fontSynthesisSmallCaps" | "fontSynthesisStyle" | "fontSynthesisWeight" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantEmoji" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "fontWidth" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "initialLetterAlign" | "inlineSize" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "interpolateSize" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "letterSpacing" | "lightingColor" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "masonryAutoFlow" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "motionDistance" | "motionPath" | "motionRotation" | "objectFit" | "objectPosition" | "objectViewBox" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "offsetRotation" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overlay" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "page" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "positionAnchor" | "positionArea" | "positionTryFallbacks" | "positionTryOrder" | "positionVisibility" | "printColorAdjust" | "quotes" | "r" | "resize" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyOverhang" | "rubyPosition" | "rx" | "ry" | "scale" | "scrollBehavior" | "scrollInitialTarget" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "shapeRendering" | "speakAs" | "stopColor" | "stopOpacity" | "stroke" | "strokeColor" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textAnchor" | "textAutospace" | "textBox" | "textBoxEdge" | "textBoxTrim" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textSpacingTrim" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "textWrapMode" | "textWrapStyle" | "timelineScope" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionBehavior" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "vectorEffect" | "verticalAlign" | "viewTimelineAxis" | "viewTimelineInset" | "viewTimelineName" | "viewTransitionClass" | "viewTransitionName" | "visibility" | "whiteSpace" | "whiteSpaceCollapse" | "widows" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "x" | "y" | "zIndex" | "zoom" | "all" | "animation" | "animationRange" | "background" | "backgroundPosition" | "borderBlock" | "borderBlockColor" | "borderBlockEnd" | "borderBlockStart" | "borderBlockStyle" | "borderBlockWidth" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineColor" | "borderInlineEnd" | "borderInlineStart" | "borderInlineStyle" | "borderInlineWidth" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "caret" | "columnRule" | "columns" | "containIntrinsicSize" | "container" | "flex" | "flexFlow" | "grid" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate" | "inset" | "insetBlock" | "insetInline" | "lineClamp" | "listStyle" | "marginBlock" | "marginInline" | "mask" | "maskBorder" | "motion" | "offset" | "overflow" | "overscrollBehavior" | "paddingBlock" | "paddingInline" | "placeSelf" | "positionTry" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginInline" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingInline" | "scrollSnapMargin" | "scrollTimeline" | "textDecoration" | "textEmphasis" | "textWrap" | "viewTimeline" | "MozAnimationDelay" | "MozAnimationDirection" | "MozAnimationDuration" | "MozAnimationFillMode" | "MozAnimationIterationCount" | "MozAnimationName" | "MozAnimationPlayState" | "MozAnimationTimingFunction" | "MozAppearance" | "MozBackfaceVisibility" | "MozBinding" | "MozBorderBottomColors" | "MozBorderEndColor" | "MozBorderEndStyle" | "MozBorderEndWidth" | "MozBorderLeftColors" | "MozBorderRightColors" | "MozBorderStartColor" | "MozBorderStartStyle" | "MozBorderTopColors" | "MozBoxSizing" | "MozColumnRuleColor" | "MozColumnRuleStyle" | "MozColumnRuleWidth" | "MozColumnWidth" | "MozContextProperties" | "MozFontFeatureSettings" | "MozFontLanguageOverride" | "MozHyphens" | "MozMarginEnd" | "MozMarginStart" | "MozOrient" | "MozOsxFontSmoothing" | "MozOutlineRadiusBottomleft" | "MozOutlineRadiusBottomright" | "MozOutlineRadiusTopleft" | "MozOutlineRadiusTopright" | "MozPaddingEnd" | "MozPaddingStart" | "MozPerspective" | "MozPerspectiveOrigin" | "MozStackSizing" | "MozTabSize" | "MozTextBlink" | "MozTextSizeAdjust" | "MozTransform" | "MozTransformOrigin" | "MozTransformStyle" | "MozUserModify" | "MozUserSelect" | "MozWindowDragging" | "MozWindowShadow" | "msAccelerator" | "msBlockProgression" | "msContentZoomChaining" | "msContentZoomLimitMax" | "msContentZoomLimitMin" | "msContentZoomSnapPoints" | "msContentZoomSnapType" | "msContentZooming" | "msFilter" | "msFlexDirection" | "msFlexPositive" | "msFlowFrom" | "msFlowInto" | "msGridColumns" | "msGridRows" | "msHighContrastAdjust" | "msHyphenateLimitChars" | "msHyphenateLimitLines" | "msHyphenateLimitZone" | "msHyphens" | "msImeAlign" | "msLineBreak" | "msOrder" | "msOverflowStyle" | "msOverflowX" | "msOverflowY" | "msScrollChaining" | "msScrollLimitXMax" | "msScrollLimitXMin" | "msScrollLimitYMax" | "msScrollLimitYMin" | "msScrollRails" | "msScrollSnapPointsX" | "msScrollSnapPointsY" | "msScrollSnapType" | "msScrollTranslation" | "msScrollbar3dlightColor" | "msScrollbarArrowColor" | "msScrollbarBaseColor" | "msScrollbarDarkshadowColor" | "msScrollbarFaceColor" | "msScrollbarHighlightColor" | "msScrollbarShadowColor" | "msScrollbarTrackColor" | "msTextAutospace" | "msTextCombineHorizontal" | "msTextOverflow" | "msTouchAction" | "msTouchSelect" | "msTransform" | "msTransformOrigin" | "msTransitionDelay" | "msTransitionDuration" | "msTransitionProperty" | "msTransitionTimingFunction" | "msUserSelect" | "msWordBreak" | "msWrapFlow" | "msWrapMargin" | "msWrapThrough" | "msWritingMode" | "WebkitAlignContent" | "WebkitAlignItems" | "WebkitAlignSelf" | "WebkitAnimationDelay" | "WebkitAnimationDirection" | "WebkitAnimationDuration" | "WebkitAnimationFillMode" | "WebkitAnimationIterationCount" | "WebkitAnimationName" | "WebkitAnimationPlayState" | "WebkitAnimationTimingFunction" | "WebkitAppearance" | "WebkitBackdropFilter" | "WebkitBackfaceVisibility" | "WebkitBackgroundClip" | "WebkitBackgroundOrigin" | "WebkitBackgroundSize" | "WebkitBorderBeforeColor" | "WebkitBorderBeforeStyle" | "WebkitBorderBeforeWidth" | "WebkitBorderBottomLeftRadius" | "WebkitBorderBottomRightRadius" | "WebkitBorderImageSlice" | "WebkitBorderTopLeftRadius" | "WebkitBorderTopRightRadius" | "WebkitBoxDecorationBreak" | "WebkitBoxReflect" | "WebkitBoxShadow" | "WebkitBoxSizing" | "WebkitClipPath" | "WebkitColumnCount" | "WebkitColumnFill" | "WebkitColumnRuleColor" | "WebkitColumnRuleStyle" | "WebkitColumnRuleWidth" | "WebkitColumnSpan" | "WebkitColumnWidth" | "WebkitFilter" | "WebkitFlexBasis" | "WebkitFlexDirection" | "WebkitFlexGrow" | "WebkitFlexShrink" | "WebkitFlexWrap" | "WebkitFontFeatureSettings" | "WebkitFontKerning" | "WebkitFontSmoothing" | "WebkitFontVariantLigatures" | "WebkitHyphenateCharacter" | "WebkitHyphens" | "WebkitInitialLetter" | "WebkitJustifyContent" | "WebkitLineBreak" | "WebkitLineClamp" | "WebkitLogicalHeight" | "WebkitLogicalWidth" | "WebkitMarginEnd" | "WebkitMarginStart" | "WebkitMaskAttachment" | "WebkitMaskBoxImageOutset" | "WebkitMaskBoxImageRepeat" | "WebkitMaskBoxImageSlice" | "WebkitMaskBoxImageSource" | "WebkitMaskBoxImageWidth" | "WebkitMaskClip" | "WebkitMaskComposite" | "WebkitMaskImage" | "WebkitMaskOrigin" | "WebkitMaskPosition" | "WebkitMaskPositionX" | "WebkitMaskPositionY" | "WebkitMaskRepeat" | "WebkitMaskRepeatX" | "WebkitMaskRepeatY" | "WebkitMaskSize" | "WebkitMaxInlineSize" | "WebkitOrder" | "WebkitOverflowScrolling" | "WebkitPaddingEnd" | "WebkitPaddingStart" | "WebkitPerspective" | "WebkitPerspectiveOrigin" | "WebkitPrintColorAdjust" | "WebkitRubyPosition" | "WebkitScrollSnapType" | "WebkitShapeMargin" | "WebkitTapHighlightColor" | "WebkitTextCombine" | "WebkitTextDecorationColor" | "WebkitTextDecorationLine" | "WebkitTextDecorationSkip" | "WebkitTextDecorationStyle" | "WebkitTextEmphasisColor" | "WebkitTextEmphasisPosition" | "WebkitTextEmphasisStyle" | "WebkitTextFillColor" | "WebkitTextOrientation" | "WebkitTextSizeAdjust" | "WebkitTextStrokeColor" | "WebkitTextStrokeWidth" | "WebkitTextUnderlinePosition" | "WebkitTouchCallout" | "WebkitTransform" | "WebkitTransformOrigin" | "WebkitTransformStyle" | "WebkitTransitionDelay" | "WebkitTransitionDuration" | "WebkitTransitionProperty" | "WebkitTransitionTimingFunction" | "WebkitUserModify" | "WebkitUserSelect" | "WebkitWritingMode" | "MozAnimation" | "MozBorderImage" | "MozColumnRule" | "MozColumns" | "MozOutlineRadius" | "MozTransition" | "msContentZoomLimit" | "msContentZoomSnap" | "msFlex" | "msScrollLimit" | "msScrollSnapX" | "msScrollSnapY" | "msTransition" | "WebkitAnimation" | "WebkitBorderBefore" | "WebkitBorderImage" | "WebkitBorderRadius" | "WebkitColumnRule" | "WebkitColumns" | "WebkitFlex" | "WebkitFlexFlow" | "WebkitMask" | "WebkitMaskBoxImage" | "WebkitTextEmphasis" | "WebkitTextStroke" | "WebkitTransition" | "boxAlign" | "boxDirection" | "boxFlex" | "boxFlexGroup" | "boxLines" | "boxOrdinalGroup" | "boxOrient" | "boxPack" | "clip" | "fontStretch" | "gridColumnGap" | "gridGap" | "gridRowGap" | "imeMode" | "insetArea" | "offsetBlock" | "offsetBlockEnd" | "offsetBlockStart" | "offsetInline" | "offsetInlineEnd" | "offsetInlineStart" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "positionTryOptions" | "scrollSnapCoordinate" | "scrollSnapDestination" | "scrollSnapPointsX" | "scrollSnapPointsY" | "scrollSnapTypeX" | "scrollSnapTypeY" | "KhtmlBoxAlign" | "KhtmlBoxDirection" | "KhtmlBoxFlex" | "KhtmlBoxFlexGroup" | "KhtmlBoxLines" | "KhtmlBoxOrdinalGroup" | "KhtmlBoxOrient" | "KhtmlBoxPack" | "KhtmlLineBreak" | "KhtmlOpacity" | "KhtmlUserSelect" | "MozBackgroundClip" | "MozBackgroundOrigin" | "MozBackgroundSize" | "MozBorderRadius" | "MozBorderRadiusBottomleft" | "MozBorderRadiusBottomright" | "MozBorderRadiusTopleft" | "MozBorderRadiusTopright" | "MozBoxAlign" | "MozBoxDirection" | "MozBoxFlex" | "MozBoxOrdinalGroup" | "MozBoxOrient" | "MozBoxPack" | "MozBoxShadow" | "MozColumnCount" | "MozColumnFill" | "MozFloatEdge" | "MozForceBrokenImageIcon" | "MozOpacity" | "MozOutline" | "MozOutlineColor" | "MozOutlineStyle" | "MozOutlineWidth" | "MozTextAlignLast" | "MozTextDecorationColor" | "MozTextDecorationLine" | "MozTextDecorationStyle" | "MozTransitionDelay" | "MozTransitionDuration" | "MozTransitionProperty" | "MozTransitionTimingFunction" | "MozUserFocus" | "MozUserInput" | "msImeMode" | "OAnimation" | "OAnimationDelay" | "OAnimationDirection" | "OAnimationDuration" | "OAnimationFillMode" | "OAnimationIterationCount" | "OAnimationName" | "OAnimationPlayState" | "OAnimationTimingFunction" | "OBackgroundSize" | "OBorderImage" | "OObjectFit" | "OObjectPosition" | "OTabSize" | "OTextOverflow" | "OTransform" | "OTransformOrigin" | "OTransition" | "OTransitionDelay" | "OTransitionDuration" | "OTransitionProperty" | "OTransitionTimingFunction" | "WebkitBoxAlign" | "WebkitBoxDirection" | "WebkitBoxFlex" | "WebkitBoxFlexGroup" | "WebkitBoxLines" | "WebkitBoxOrdinalGroup" | "WebkitBoxOrient" | "WebkitBoxPack" | "colorInterpolation" | "colorRendering" | "glyphOrientationVertical" | "image" | "svgFill" | "fade" | "scrollbar" | "boldFontWeight" | "hide" | "shadow" | "radius" | "flow" | "gridAreas" | "gridColumns" | "gridRows" | "preset" | "align" | "justify" | "place" | "@keyframes" | "@properties" | "recipe" | "style" | "as" | "element" | "styles" | "breakpoints" | "block" | "inline" | "mods" | "isHidden" | "isDisabled" | "css" | "theme" | "tokens" | "ref"> & RefAttributes<unknown>> & SubElementComponents<Record<string, never>>;
+} & BaseStyleProps & WithVariant<VariantMap> & Omit<Omit<AllHTMLAttributes<HTMLElement>, keyof react.ClassAttributes<HTMLDivElement> | keyof react.HTMLAttributes<HTMLDivElement>> & react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement>, "qa" | "qaVal" | "color" | "fill" | "font" | "outline" | "gap" | "padding" | "margin" | "width" | "height" | "border" | "transition" | "placeContent" | "placeItems" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "alignmentBaseline" | "anchorName" | "anchorScope" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationRangeEnd" | "animationRangeStart" | "animationTimeline" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "baselineShift" | "blockSize" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "clipRule" | "colorAdjust" | "colorInterpolationFilters" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "cx" | "cy" | "d" | "direction" | "display" | "dominantBaseline" | "emptyCells" | "fieldSizing" | "fillOpacity" | "fillRule" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "floodColor" | "floodOpacity" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStyle" | "fontSynthesis" | "fontSynthesisPosition" | "fontSynthesisSmallCaps" | "fontSynthesisStyle" | "fontSynthesisWeight" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantEmoji" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "fontWidth" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "initialLetterAlign" | "inlineSize" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "interpolateSize" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "left" | "letterSpacing" | "lightingColor" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "masonryAutoFlow" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "motionDistance" | "motionPath" | "motionRotation" | "objectFit" | "objectPosition" | "objectViewBox" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "offsetRotation" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overlay" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "page" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "positionAnchor" | "positionArea" | "positionTryFallbacks" | "positionTryOrder" | "positionVisibility" | "printColorAdjust" | "quotes" | "r" | "resize" | "right" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyOverhang" | "rubyPosition" | "rx" | "ry" | "scale" | "scrollBehavior" | "scrollInitialTarget" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "shapeRendering" | "speakAs" | "stopColor" | "stopOpacity" | "stroke" | "strokeColor" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textAnchor" | "textAutospace" | "textBox" | "textBoxEdge" | "textBoxTrim" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textSpacingTrim" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "textWrapMode" | "textWrapStyle" | "timelineScope" | "top" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionBehavior" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "vectorEffect" | "verticalAlign" | "viewTimelineAxis" | "viewTimelineInset" | "viewTimelineName" | "viewTransitionClass" | "viewTransitionName" | "visibility" | "whiteSpace" | "whiteSpaceCollapse" | "widows" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "x" | "y" | "zIndex" | "zoom" | "all" | "animation" | "animationRange" | "background" | "backgroundPosition" | "borderBlock" | "borderBlockColor" | "borderBlockEnd" | "borderBlockStart" | "borderBlockStyle" | "borderBlockWidth" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineColor" | "borderInlineEnd" | "borderInlineStart" | "borderInlineStyle" | "borderInlineWidth" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "caret" | "columnRule" | "columns" | "containIntrinsicSize" | "container" | "flex" | "flexFlow" | "grid" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate" | "inset" | "insetBlock" | "insetInline" | "lineClamp" | "listStyle" | "marginBlock" | "marginInline" | "mask" | "maskBorder" | "motion" | "offset" | "overflow" | "overscrollBehavior" | "paddingBlock" | "paddingInline" | "placeSelf" | "positionTry" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginInline" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingInline" | "scrollSnapMargin" | "scrollTimeline" | "textDecoration" | "textEmphasis" | "textWrap" | "viewTimeline" | "MozAnimationDelay" | "MozAnimationDirection" | "MozAnimationDuration" | "MozAnimationFillMode" | "MozAnimationIterationCount" | "MozAnimationName" | "MozAnimationPlayState" | "MozAnimationTimingFunction" | "MozAppearance" | "MozBackfaceVisibility" | "MozBinding" | "MozBorderBottomColors" | "MozBorderEndColor" | "MozBorderEndStyle" | "MozBorderEndWidth" | "MozBorderLeftColors" | "MozBorderRightColors" | "MozBorderStartColor" | "MozBorderStartStyle" | "MozBorderTopColors" | "MozBoxSizing" | "MozColumnRuleColor" | "MozColumnRuleStyle" | "MozColumnRuleWidth" | "MozColumnWidth" | "MozContextProperties" | "MozFontFeatureSettings" | "MozFontLanguageOverride" | "MozHyphens" | "MozMarginEnd" | "MozMarginStart" | "MozOrient" | "MozOsxFontSmoothing" | "MozOutlineRadiusBottomleft" | "MozOutlineRadiusBottomright" | "MozOutlineRadiusTopleft" | "MozOutlineRadiusTopright" | "MozPaddingEnd" | "MozPaddingStart" | "MozPerspective" | "MozPerspectiveOrigin" | "MozStackSizing" | "MozTabSize" | "MozTextBlink" | "MozTextSizeAdjust" | "MozTransform" | "MozTransformOrigin" | "MozTransformStyle" | "MozUserModify" | "MozUserSelect" | "MozWindowDragging" | "MozWindowShadow" | "msAccelerator" | "msBlockProgression" | "msContentZoomChaining" | "msContentZoomLimitMax" | "msContentZoomLimitMin" | "msContentZoomSnapPoints" | "msContentZoomSnapType" | "msContentZooming" | "msFilter" | "msFlexDirection" | "msFlexPositive" | "msFlowFrom" | "msFlowInto" | "msGridColumns" | "msGridRows" | "msHighContrastAdjust" | "msHyphenateLimitChars" | "msHyphenateLimitLines" | "msHyphenateLimitZone" | "msHyphens" | "msImeAlign" | "msLineBreak" | "msOrder" | "msOverflowStyle" | "msOverflowX" | "msOverflowY" | "msScrollChaining" | "msScrollLimitXMax" | "msScrollLimitXMin" | "msScrollLimitYMax" | "msScrollLimitYMin" | "msScrollRails" | "msScrollSnapPointsX" | "msScrollSnapPointsY" | "msScrollSnapType" | "msScrollTranslation" | "msScrollbar3dlightColor" | "msScrollbarArrowColor" | "msScrollbarBaseColor" | "msScrollbarDarkshadowColor" | "msScrollbarFaceColor" | "msScrollbarHighlightColor" | "msScrollbarShadowColor" | "msScrollbarTrackColor" | "msTextAutospace" | "msTextCombineHorizontal" | "msTextOverflow" | "msTouchAction" | "msTouchSelect" | "msTransform" | "msTransformOrigin" | "msTransitionDelay" | "msTransitionDuration" | "msTransitionProperty" | "msTransitionTimingFunction" | "msUserSelect" | "msWordBreak" | "msWrapFlow" | "msWrapMargin" | "msWrapThrough" | "msWritingMode" | "WebkitAlignContent" | "WebkitAlignItems" | "WebkitAlignSelf" | "WebkitAnimationDelay" | "WebkitAnimationDirection" | "WebkitAnimationDuration" | "WebkitAnimationFillMode" | "WebkitAnimationIterationCount" | "WebkitAnimationName" | "WebkitAnimationPlayState" | "WebkitAnimationTimingFunction" | "WebkitAppearance" | "WebkitBackdropFilter" | "WebkitBackfaceVisibility" | "WebkitBackgroundClip" | "WebkitBackgroundOrigin" | "WebkitBackgroundSize" | "WebkitBorderBeforeColor" | "WebkitBorderBeforeStyle" | "WebkitBorderBeforeWidth" | "WebkitBorderBottomLeftRadius" | "WebkitBorderBottomRightRadius" | "WebkitBorderImageSlice" | "WebkitBorderTopLeftRadius" | "WebkitBorderTopRightRadius" | "WebkitBoxDecorationBreak" | "WebkitBoxReflect" | "WebkitBoxShadow" | "WebkitBoxSizing" | "WebkitClipPath" | "WebkitColumnCount" | "WebkitColumnFill" | "WebkitColumnRuleColor" | "WebkitColumnRuleStyle" | "WebkitColumnRuleWidth" | "WebkitColumnSpan" | "WebkitColumnWidth" | "WebkitFilter" | "WebkitFlexBasis" | "WebkitFlexDirection" | "WebkitFlexGrow" | "WebkitFlexShrink" | "WebkitFlexWrap" | "WebkitFontFeatureSettings" | "WebkitFontKerning" | "WebkitFontSmoothing" | "WebkitFontVariantLigatures" | "WebkitHyphenateCharacter" | "WebkitHyphens" | "WebkitInitialLetter" | "WebkitJustifyContent" | "WebkitLineBreak" | "WebkitLineClamp" | "WebkitLogicalHeight" | "WebkitLogicalWidth" | "WebkitMarginEnd" | "WebkitMarginStart" | "WebkitMaskAttachment" | "WebkitMaskBoxImageOutset" | "WebkitMaskBoxImageRepeat" | "WebkitMaskBoxImageSlice" | "WebkitMaskBoxImageSource" | "WebkitMaskBoxImageWidth" | "WebkitMaskClip" | "WebkitMaskComposite" | "WebkitMaskImage" | "WebkitMaskOrigin" | "WebkitMaskPosition" | "WebkitMaskPositionX" | "WebkitMaskPositionY" | "WebkitMaskRepeat" | "WebkitMaskRepeatX" | "WebkitMaskRepeatY" | "WebkitMaskSize" | "WebkitMaxInlineSize" | "WebkitOrder" | "WebkitOverflowScrolling" | "WebkitPaddingEnd" | "WebkitPaddingStart" | "WebkitPerspective" | "WebkitPerspectiveOrigin" | "WebkitPrintColorAdjust" | "WebkitRubyPosition" | "WebkitScrollSnapType" | "WebkitShapeMargin" | "WebkitTapHighlightColor" | "WebkitTextCombine" | "WebkitTextDecorationColor" | "WebkitTextDecorationLine" | "WebkitTextDecorationSkip" | "WebkitTextDecorationStyle" | "WebkitTextEmphasisColor" | "WebkitTextEmphasisPosition" | "WebkitTextEmphasisStyle" | "WebkitTextFillColor" | "WebkitTextOrientation" | "WebkitTextSizeAdjust" | "WebkitTextStrokeColor" | "WebkitTextStrokeWidth" | "WebkitTextUnderlinePosition" | "WebkitTouchCallout" | "WebkitTransform" | "WebkitTransformOrigin" | "WebkitTransformStyle" | "WebkitTransitionDelay" | "WebkitTransitionDuration" | "WebkitTransitionProperty" | "WebkitTransitionTimingFunction" | "WebkitUserModify" | "WebkitUserSelect" | "WebkitWritingMode" | "MozAnimation" | "MozBorderImage" | "MozColumnRule" | "MozColumns" | "MozOutlineRadius" | "MozTransition" | "msContentZoomLimit" | "msContentZoomSnap" | "msFlex" | "msScrollLimit" | "msScrollSnapX" | "msScrollSnapY" | "msTransition" | "WebkitAnimation" | "WebkitBorderBefore" | "WebkitBorderImage" | "WebkitBorderRadius" | "WebkitColumnRule" | "WebkitColumns" | "WebkitFlex" | "WebkitFlexFlow" | "WebkitMask" | "WebkitMaskBoxImage" | "WebkitTextEmphasis" | "WebkitTextStroke" | "WebkitTransition" | "boxAlign" | "boxDirection" | "boxFlex" | "boxFlexGroup" | "boxLines" | "boxOrdinalGroup" | "boxOrient" | "boxPack" | "clip" | "fontStretch" | "gridColumnGap" | "gridGap" | "gridRowGap" | "imeMode" | "insetArea" | "offsetBlock" | "offsetBlockEnd" | "offsetBlockStart" | "offsetInline" | "offsetInlineEnd" | "offsetInlineStart" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "positionTryOptions" | "scrollSnapCoordinate" | "scrollSnapDestination" | "scrollSnapPointsX" | "scrollSnapPointsY" | "scrollSnapTypeX" | "scrollSnapTypeY" | "KhtmlBoxAlign" | "KhtmlBoxDirection" | "KhtmlBoxFlex" | "KhtmlBoxFlexGroup" | "KhtmlBoxLines" | "KhtmlBoxOrdinalGroup" | "KhtmlBoxOrient" | "KhtmlBoxPack" | "KhtmlLineBreak" | "KhtmlOpacity" | "KhtmlUserSelect" | "MozBackgroundClip" | "MozBackgroundOrigin" | "MozBackgroundSize" | "MozBorderRadius" | "MozBorderRadiusBottomleft" | "MozBorderRadiusBottomright" | "MozBorderRadiusTopleft" | "MozBorderRadiusTopright" | "MozBoxAlign" | "MozBoxDirection" | "MozBoxFlex" | "MozBoxOrdinalGroup" | "MozBoxOrient" | "MozBoxPack" | "MozBoxShadow" | "MozColumnCount" | "MozColumnFill" | "MozFloatEdge" | "MozForceBrokenImageIcon" | "MozOpacity" | "MozOutline" | "MozOutlineColor" | "MozOutlineStyle" | "MozOutlineWidth" | "MozTextAlignLast" | "MozTextDecorationColor" | "MozTextDecorationLine" | "MozTextDecorationStyle" | "MozTransitionDelay" | "MozTransitionDuration" | "MozTransitionProperty" | "MozTransitionTimingFunction" | "MozUserFocus" | "MozUserInput" | "msImeMode" | "OAnimation" | "OAnimationDelay" | "OAnimationDirection" | "OAnimationDuration" | "OAnimationFillMode" | "OAnimationIterationCount" | "OAnimationName" | "OAnimationPlayState" | "OAnimationTimingFunction" | "OBackgroundSize" | "OBorderImage" | "OObjectFit" | "OObjectPosition" | "OTabSize" | "OTextOverflow" | "OTransform" | "OTransformOrigin" | "OTransition" | "OTransitionDelay" | "OTransitionDuration" | "OTransitionProperty" | "OTransitionTimingFunction" | "WebkitBoxAlign" | "WebkitBoxDirection" | "WebkitBoxFlex" | "WebkitBoxFlexGroup" | "WebkitBoxLines" | "WebkitBoxOrdinalGroup" | "WebkitBoxOrient" | "WebkitBoxPack" | "colorInterpolation" | "colorRendering" | "glyphOrientationVertical" | "image" | "svgFill" | "fade" | "scrollbar" | "boldFontWeight" | "hide" | "shadow" | "radius" | "flow" | "gridAreas" | "gridColumns" | "gridRows" | "preset" | "align" | "justify" | "place" | "@keyframes" | "@properties" | "recipe" | "style" | "as" | "element" | "styles" | "breakpoints" | "block" | "inline" | "mods" | "isHidden" | "isDisabled" | "css" | "theme" | "tokens" | "ref"> & RefAttributes<unknown>> & SubElementComponents<Record<string, never>>;
 //#endregion
 export { AllBasePropsWithMods, Element, ElementsDefinition, SubElementDefinition, SubElementProps, TastyElementOptions, TastyElementProps, TastyProps, VariantMap, WithVariant, tasty };
 //# sourceMappingURL=tasty.d.ts.map

package/docs/styles.md

@@ -511,7 +511,9 @@ Scrollbar styling using CSS standard properties (`scrollbar-width`, `scrollbar-c
 
 **Colors:** Up to 2 color values for thumb and track (optional), applied via `scrollbar-color`.
 
-**Defaults:** thumb = `#scrollbar-thumb` (`#text.5`), track = `#scrollbar-track` (`#dark-bg`) with CSS fallback to `transparent` when tokens are not configured.
+**Defaults:** When no colors are specified, the thumb color comes from the `#scrollbar-thumb` token (`#text.5`) and the track color from the `#scrollbar-track` token (`#dark-bg`). These tokens are provided by the base token set. If the base tokens are not loaded, the track falls back to `transparent` via a CSS fallback, while the thumb has no CSS-level fallback — the browser treats the entire `scrollbar-color` declaration as invalid and reverts to the platform-default scrollbar appearance.
+
+**Note:** `none` takes precedence over all other modifiers and colors. Combining `none` with other tokens (e.g., `"none always #red"`) produces a warning, and only `scrollbar-width: none` is applied.
 
 | Value | Effect |
 |-------|--------|

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenphi/tasty",
-  "version": "0.0.0-snapshot.8da24b2",
+  "version": "0.0.0-snapshot.8f4d375",
   "description": "A design-system-integrated styling system and DSL for concise, state-aware UI styling",
   "type": "module",
   "main": "./dist/index.js",