@tenphi/tasty 0.7.1 → 0.9.0

package/dist/styles/predefined.js.map

@@ -1 +1 @@
-{"version":3,"file":"predefined.js","names":[],"sources":["../../src/styles/predefined.ts"],"sourcesContent":["import { isDevEnv } from '../utils/is-dev-env';\nimport type {\n  RawStyleHandler,\n  StyleHandler,\n  StyleHandlerDefinition,\n} from '../utils/styles';\n\nimport { alignStyle } from './align';\nimport { borderStyle } from './border';\nimport { colorStyle } from './color';\nimport { createStyle } from './createStyle';\nimport { displayStyle } from './display';\nimport { fadeStyle } from './fade';\nimport { fillStyle, svgFillStyle } from './fill';\nimport { flowStyle } from './flow';\n// Note: fontStyle (font.ts) and fontStyleStyle (fontStyle.ts) removed\n// Both font and fontStyle props are now handled by presetStyle\nimport { gapStyle } from './gap';\nimport { heightStyle } from './height';\nimport { insetStyle } from './inset';\nimport { justifyStyle } from './justify';\nimport { marginStyle } from './margin';\nimport { outlineStyle } from './outline';\nimport { paddingStyle } from './padding';\nimport { presetStyle } from './preset';\nimport { radiusStyle } from './radius';\nimport { scrollbarStyle } from './scrollbar';\nimport { shadowStyle } from './shadow';\nimport { styledScrollbarStyle } from './styledScrollbar';\nimport { transitionStyle } from './transition';\nimport { widthStyle } from './width';\n\nconst devMode = isDevEnv();\n\nconst _numberConverter = (val: string | number | boolean | undefined) => {\n  if (typeof val === 'number') {\n    return `${val}px`;\n  }\n\n  return val;\n};\nconst columnsConverter = (val: string | number | boolean | undefined) => {\n  if (typeof val === 'number') {\n    return 'minmax(1px, 1fr) '.repeat(val).trim();\n  }\n\n  return;\n};\nconst rowsConverter = (val: string | number | boolean | undefined) => {\n  if (typeof val === 'number') {\n    return 'auto '.repeat(val).trim();\n  }\n\n  return;\n};\n\ntype StyleHandlerMap = Record<string, StyleHandler[]>;\n\nexport const STYLE_HANDLER_MAP: StyleHandlerMap = {};\n\n// Store initial handler state for reset functionality\nlet initialHandlerMapSnapshot: StyleHandlerMap | null = null;\n\n/**\n * Capture a snapshot of the current STYLE_HANDLER_MAP.\n * Called after predefine() to preserve built-in handler state.\n */\nfunction captureInitialHandlerState(): void {\n  initialHandlerMapSnapshot = {};\n  for (const key of Object.keys(STYLE_HANDLER_MAP)) {\n    // Shallow copy the array - handlers themselves are immutable\n    initialHandlerMapSnapshot[key] = [...STYLE_HANDLER_MAP[key]];\n  }\n}\n\n/**\n * Reset STYLE_HANDLER_MAP to the initial built-in state.\n * Called by resetConfig() to restore handlers after tests.\n */\nexport function resetHandlers(): void {\n  if (!initialHandlerMapSnapshot) {\n    // predefine() hasn't been called yet, nothing to reset\n    return;\n  }\n\n  // Clear current map\n  for (const key of Object.keys(STYLE_HANDLER_MAP)) {\n    delete STYLE_HANDLER_MAP[key];\n  }\n\n  // Restore initial state\n  for (const key of Object.keys(initialHandlerMapSnapshot)) {\n    STYLE_HANDLER_MAP[key] = [...initialHandlerMapSnapshot[key]];\n  }\n}\n\nexport function defineCustomStyle(\n  names: string[] | StyleHandler,\n  handler?: RawStyleHandler,\n) {\n  let handlerWithLookup: StyleHandler;\n\n  if (typeof names === 'function') {\n    handlerWithLookup = names;\n    names = handlerWithLookup.__lookupStyles;\n  } else if (handler) {\n    handlerWithLookup = Object.assign(handler, { __lookupStyles: names });\n  } else {\n    console.warn('CubeUIKit: incorrect custom style definition: ', names);\n    return;\n  }\n\n  if (Array.isArray(names)) {\n    // just to pass type checking\n    names.forEach((name) => {\n      if (!STYLE_HANDLER_MAP[name]) {\n        STYLE_HANDLER_MAP[name] = [];\n      }\n\n      STYLE_HANDLER_MAP[name].push(handlerWithLookup);\n    });\n  }\n}\n\ntype ConverterHandler = (\n  s: string | boolean | number | undefined,\n) => string | undefined;\n\nexport function defineStyleAlias(\n  styleName: string,\n  cssStyleName?: string,\n  converter?: ConverterHandler,\n) {\n  const styleHandler = createStyle(styleName, cssStyleName, converter);\n\n  if (!STYLE_HANDLER_MAP[styleName]) {\n    STYLE_HANDLER_MAP[styleName] = [];\n  }\n\n  STYLE_HANDLER_MAP[styleName].push(styleHandler);\n}\n\nexport function predefine() {\n  // Style aliases\n  defineStyleAlias('gridAreas', 'grid-template-areas');\n  defineStyleAlias('gridColumns', 'grid-template-columns', columnsConverter);\n  defineStyleAlias('gridRows', 'grid-template-rows', rowsConverter);\n  defineStyleAlias(\n    'gridTemplate',\n    'grid-template',\n    (val: string | boolean | number | undefined) => {\n      if (typeof val !== 'string') return;\n\n      return val\n        .split('/')\n        .map((s, i) => (i ? columnsConverter : rowsConverter)(s))\n        .join('/');\n    },\n  );\n  // Note: outlineOffset is now handled by outlineStyle\n\n  [\n    displayStyle,\n    transitionStyle,\n    fillStyle,\n    svgFillStyle,\n    widthStyle,\n    marginStyle,\n    gapStyle,\n    flowStyle,\n    colorStyle,\n    heightStyle,\n    radiusStyle,\n    borderStyle,\n    shadowStyle,\n    paddingStyle,\n    alignStyle,\n    justifyStyle,\n    presetStyle,\n    outlineStyle,\n    // DEPRECATED: `styledScrollbar` is deprecated, use `scrollbar` instead\n    styledScrollbarStyle,\n    scrollbarStyle,\n    fadeStyle,\n    insetStyle,\n  ]\n    // @ts-expect-error handler type varies across built-in style handlers\n    .forEach((handler) => defineCustomStyle(handler));\n\n  // Capture initial state after all built-in handlers are registered\n  captureInitialHandlerState();\n\n  return { STYLE_HANDLER_MAP, defineCustomStyle, defineStyleAlias };\n}\n\n// ============================================================================\n// Handler Registration API (for configure())\n// ============================================================================\n\n/**\n * Normalize a handler definition to a StyleHandler with __lookupStyles.\n * - Function only: lookup styles inferred from key name\n * - [string, fn]: single lookup style\n * - [string[], fn]: multiple lookup styles\n */\nexport function normalizeHandlerDefinition(\n  keyName: string,\n  definition: StyleHandlerDefinition,\n): StyleHandler {\n  let handler: RawStyleHandler;\n  let lookupStyles: string[];\n\n  if (typeof definition === 'function') {\n    // Function only - lookup styles inferred from key name\n    handler = definition;\n    lookupStyles = [keyName];\n  } else if (Array.isArray(definition)) {\n    const [first, fn] = definition;\n\n    if (typeof fn !== 'function') {\n      throw new Error(\n        `[Tasty] Invalid handler definition for \"${keyName}\". ` +\n          'Tuple must have a function as the second element: [string, function] or [string[], function].',\n      );\n    }\n\n    handler = fn;\n\n    if (typeof first === 'string') {\n      // [string, fn] - single lookup style\n      lookupStyles = [first];\n    } else if (Array.isArray(first)) {\n      // [string[], fn] - multiple lookup styles\n      lookupStyles = first;\n    } else {\n      throw new Error(\n        `[Tasty] Invalid handler definition for \"${keyName}\". ` +\n          'First element must be a string or string array.',\n      );\n    }\n  } else {\n    throw new Error(\n      `[Tasty] Invalid handler definition for \"${keyName}\". ` +\n        'Expected function, [string, function], or [string[], function].',\n    );\n  }\n\n  // Validate handler in dev mode\n  validateHandler(keyName, handler, lookupStyles);\n\n  // Wrap the handler to avoid mutation issues when the same function\n  // is reused for multiple handler definitions. Each registration\n  // gets its own function identity with its own __lookupStyles.\n  const wrappedHandler = ((props) => handler(props)) as StyleHandler;\n  wrappedHandler.__lookupStyles = lookupStyles;\n\n  return wrappedHandler;\n}\n\n/**\n * Validate a handler definition in development mode.\n */\nfunction validateHandler(\n  name: string,\n  handler: RawStyleHandler,\n  lookupStyles: string[],\n): void {\n  if (!devMode) return;\n\n  if (typeof handler !== 'function') {\n    console.warn(\n      `[Tasty] Handler \"${name}\" is not a function. ` +\n        'Handlers must be functions that return CSSMap, CSSMap[], or void.',\n    );\n  }\n\n  if (\n    !lookupStyles ||\n    !Array.isArray(lookupStyles) ||\n    lookupStyles.length === 0\n  ) {\n    console.warn(\n      `[Tasty] Handler \"${name}\" has invalid lookupStyles. ` +\n        'Expected non-empty array of style names.',\n    );\n  }\n}\n\n/**\n * Validate a handler result in development mode.\n * Call this after invoking a handler to check the return value.\n */\nexport function validateHandlerResult(name: string, result: unknown): void {\n  if (!devMode) return;\n  if (result === undefined || result === null) return; // void is valid\n\n  // Check for empty string (migration from old pattern)\n  if (result === '') {\n    console.warn(\n      `[Tasty] Handler \"${name}\" returned empty string. ` +\n        'Return void/undefined instead for no output.',\n    );\n    return;\n  }\n\n  // Check result is object (CSSMap or CSSMap[])\n  if (typeof result !== 'object') {\n    console.warn(\n      `[Tasty] Handler \"${name}\" returned invalid type: ${typeof result}. ` +\n        'Expected CSSMap, CSSMap[], or void.',\n    );\n  }\n}\n\n/**\n * Register a custom handler, replacing any existing handlers for the same lookup styles.\n * This is called by configure() to process user-defined handlers.\n *\n * When registering a handler for style X, any existing handler that processes X\n * is removed from ALL its lookup styles to prevent double-processing.\n * For example, if gapStyle handles ['display', 'flow', 'gap'] and a new handler\n * is registered for just ['gap'], gapStyle is removed from display and flow too.\n */\nexport function registerHandler(handler: StyleHandler): void {\n  const lookupStyles = handler.__lookupStyles;\n\n  if (!lookupStyles || lookupStyles.length === 0) {\n    if (devMode) {\n      console.warn(\n        '[Tasty] Cannot register handler without __lookupStyles property.',\n      );\n    }\n    return;\n  }\n\n  // Find and remove existing handlers that would conflict\n  // A handler conflicts if it handles any of the same styles as the new handler\n  const handlersToRemove = new Set<StyleHandler>();\n\n  for (const styleName of lookupStyles) {\n    const existing = STYLE_HANDLER_MAP[styleName];\n    if (existing) {\n      for (const existingHandler of existing) {\n        handlersToRemove.add(existingHandler);\n      }\n    }\n  }\n\n  // Remove conflicting handlers from ALL their lookup styles\n  for (const oldHandler of handlersToRemove) {\n    const oldLookupStyles = oldHandler.__lookupStyles;\n    if (oldLookupStyles) {\n      for (const oldStyleName of oldLookupStyles) {\n        const handlers = STYLE_HANDLER_MAP[oldStyleName];\n        if (handlers) {\n          const filtered = handlers.filter((h) => h !== oldHandler);\n          if (filtered.length === 0) {\n            delete STYLE_HANDLER_MAP[oldStyleName];\n          } else {\n            STYLE_HANDLER_MAP[oldStyleName] = filtered;\n          }\n        }\n      }\n    }\n  }\n\n  // Register the new handler under its lookup styles\n  for (const styleName of lookupStyles) {\n    const existing = STYLE_HANDLER_MAP[styleName];\n    if (existing) {\n      existing.push(handler);\n    } else {\n      STYLE_HANDLER_MAP[styleName] = [handler];\n    }\n  }\n}\n\n// ============================================================================\n// Wrapped Style Handlers Export\n// ============================================================================\n\n/**\n * Create a wrapped handler that can be safely called by users.\n * The wrapper preserves __lookupStyles for proper registration.\n */\nfunction wrapHandler<T extends { __lookupStyles: string[] }>(handler: T): T {\n  const fn = handler as unknown as (props: unknown) => unknown;\n  const wrapped = ((props: unknown) => fn(props)) as unknown as T;\n  wrapped.__lookupStyles = handler.__lookupStyles;\n  return wrapped;\n}\n\n/**\n * Exported object containing wrapped predefined style handlers.\n * Users can import and call these to extend or delegate to built-in behavior.\n *\n * Internal handlers use *Style suffix for searchability.\n * External API uses short names for convenience.\n *\n * @example\n * ```ts\n * import { styleHandlers, configure } from '@tenphi/tasty';\n *\n * configure({\n *   handlers: {\n *     fill: ({ fill }) => {\n *       if (fill?.startsWith('gradient:')) {\n *         return { background: fill.slice(9) };\n *       }\n *       return styleHandlers.fill({ fill });\n *     },\n *   },\n * });\n * ```\n */\nexport const styleHandlers = {\n  align: wrapHandler(alignStyle),\n  border: wrapHandler(borderStyle),\n  color: wrapHandler(colorStyle),\n  display: wrapHandler(displayStyle),\n  fade: wrapHandler(fadeStyle),\n  fill: wrapHandler(fillStyle),\n  svgFill: wrapHandler(svgFillStyle),\n  flow: wrapHandler(flowStyle),\n  gap: wrapHandler(gapStyle),\n  height: wrapHandler(heightStyle),\n  inset: wrapHandler(insetStyle),\n  justify: wrapHandler(justifyStyle),\n  margin: wrapHandler(marginStyle),\n  outline: wrapHandler(outlineStyle),\n  padding: wrapHandler(paddingStyle),\n  preset: wrapHandler(presetStyle),\n  radius: wrapHandler(radiusStyle),\n  scrollbar: wrapHandler(scrollbarStyle),\n  shadow: wrapHandler(shadowStyle),\n  styledScrollbar: wrapHandler(styledScrollbarStyle),\n  transition: wrapHandler(transitionStyle),\n  width: wrapHandler(widthStyle),\n} as const;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAM,UAAU,UAAU;AAS1B,MAAM,oBAAoB,QAA+C;AACvE,KAAI,OAAO,QAAQ,SACjB,QAAO,oBAAoB,OAAO,IAAI,CAAC,MAAM;;AAKjD,MAAM,iBAAiB,QAA+C;AACpE,KAAI,OAAO,QAAQ,SACjB,QAAO,QAAQ,OAAO,IAAI,CAAC,MAAM;;AAQrC,MAAa,oBAAqC,EAAE;AAGpD,IAAI,4BAAoD;;;;;AAMxD,SAAS,6BAAmC;AAC1C,6BAA4B,EAAE;AAC9B,MAAK,MAAM,OAAO,OAAO,KAAK,kBAAkB,CAE9C,2BAA0B,OAAO,CAAC,GAAG,kBAAkB,KAAK;;;;;;AAQhE,SAAgB,gBAAsB;AACpC,KAAI,CAAC,0BAEH;AAIF,MAAK,MAAM,OAAO,OAAO,KAAK,kBAAkB,CAC9C,QAAO,kBAAkB;AAI3B,MAAK,MAAM,OAAO,OAAO,KAAK,0BAA0B,CACtD,mBAAkB,OAAO,CAAC,GAAG,0BAA0B,KAAK;;AAIhE,SAAgB,kBACd,OACA,SACA;CACA,IAAI;AAEJ,KAAI,OAAO,UAAU,YAAY;AAC/B,sBAAoB;AACpB,UAAQ,kBAAkB;YACjB,QACT,qBAAoB,OAAO,OAAO,SAAS,EAAE,gBAAgB,OAAO,CAAC;MAChE;AACL,UAAQ,KAAK,kDAAkD,MAAM;AACrE;;AAGF,KAAI,MAAM,QAAQ,MAAM,CAEtB,OAAM,SAAS,SAAS;AACtB,MAAI,CAAC,kBAAkB,MACrB,mBAAkB,QAAQ,EAAE;AAG9B,oBAAkB,MAAM,KAAK,kBAAkB;GAC/C;;AAQN,SAAgB,iBACd,WACA,cACA,WACA;CACA,MAAM,eAAe,YAAY,WAAW,cAAc,UAAU;AAEpE,KAAI,CAAC,kBAAkB,WACrB,mBAAkB,aAAa,EAAE;AAGnC,mBAAkB,WAAW,KAAK,aAAa;;AAGjD,SAAgB,YAAY;AAE1B,kBAAiB,aAAa,sBAAsB;AACpD,kBAAiB,eAAe,yBAAyB,iBAAiB;AAC1E,kBAAiB,YAAY,sBAAsB,cAAc;AACjE,kBACE,gBACA,kBACC,QAA+C;AAC9C,MAAI,OAAO,QAAQ,SAAU;AAE7B,SAAO,IACJ,MAAM,IAAI,CACV,KAAK,GAAG,OAAO,IAAI,mBAAmB,eAAe,EAAE,CAAC,CACxD,KAAK,IAAI;GAEf;AAGD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACD,CAEE,SAAS,YAAY,kBAAkB,QAAQ,CAAC;AAGnD,6BAA4B;AAE5B,QAAO;EAAE;EAAmB;EAAmB;EAAkB;;;;;;;;AAanE,SAAgB,2BACd,SACA,YACc;CACd,IAAI;CACJ,IAAI;AAEJ,KAAI,OAAO,eAAe,YAAY;AAEpC,YAAU;AACV,iBAAe,CAAC,QAAQ;YACf,MAAM,QAAQ,WAAW,EAAE;EACpC,MAAM,CAAC,OAAO,MAAM;AAEpB,MAAI,OAAO,OAAO,WAChB,OAAM,IAAI,MACR,2CAA2C,QAAQ,kGAEpD;AAGH,YAAU;AAEV,MAAI,OAAO,UAAU,SAEnB,gBAAe,CAAC,MAAM;WACb,MAAM,QAAQ,MAAM,CAE7B,gBAAe;MAEf,OAAM,IAAI,MACR,2CAA2C,QAAQ,oDAEpD;OAGH,OAAM,IAAI,MACR,2CAA2C,QAAQ,oEAEpD;AAIH,iBAAgB,SAAS,SAAS,aAAa;CAK/C,MAAM,mBAAmB,UAAU,QAAQ,MAAM;AACjD,gBAAe,iBAAiB;AAEhC,QAAO;;;;;AAMT,SAAS,gBACP,MACA,SACA,cACM;AACN,KAAI,CAAC,QAAS;AAEd,KAAI,OAAO,YAAY,WACrB,SAAQ,KACN,oBAAoB,KAAK,wFAE1B;AAGH,KACE,CAAC,gBACD,CAAC,MAAM,QAAQ,aAAa,IAC5B,aAAa,WAAW,EAExB,SAAQ,KACN,oBAAoB,KAAK,sEAE1B;;;;;;;;;;;AAuCL,SAAgB,gBAAgB,SAA6B;CAC3D,MAAM,eAAe,QAAQ;AAE7B,KAAI,CAAC,gBAAgB,aAAa,WAAW,GAAG;AAC9C,MAAI,QACF,SAAQ,KACN,mEACD;AAEH;;CAKF,MAAM,mCAAmB,IAAI,KAAmB;AAEhD,MAAK,MAAM,aAAa,cAAc;EACpC,MAAM,WAAW,kBAAkB;AACnC,MAAI,SACF,MAAK,MAAM,mBAAmB,SAC5B,kBAAiB,IAAI,gBAAgB;;AAM3C,MAAK,MAAM,cAAc,kBAAkB;EACzC,MAAM,kBAAkB,WAAW;AACnC,MAAI,gBACF,MAAK,MAAM,gBAAgB,iBAAiB;GAC1C,MAAM,WAAW,kBAAkB;AACnC,OAAI,UAAU;IACZ,MAAM,WAAW,SAAS,QAAQ,MAAM,MAAM,WAAW;AACzD,QAAI,SAAS,WAAW,EACtB,QAAO,kBAAkB;QAEzB,mBAAkB,gBAAgB;;;;AAQ5C,MAAK,MAAM,aAAa,cAAc;EACpC,MAAM,WAAW,kBAAkB;AACnC,MAAI,SACF,UAAS,KAAK,QAAQ;MAEtB,mBAAkB,aAAa,CAAC,QAAQ;;;;;;;AAa9C,SAAS,YAAoD,SAAe;CAC1E,MAAM,KAAK;CACX,MAAM,YAAY,UAAmB,GAAG,MAAM;AAC9C,SAAQ,iBAAiB,QAAQ;AACjC,QAAO;;;;;;;;;;;;;;;;;;;;;;;;;AA0BT,MAAa,gBAAgB;CAC3B,OAAO,YAAY,WAAW;CAC9B,QAAQ,YAAY,YAAY;CAChC,OAAO,YAAY,WAAW;CAC9B,SAAS,YAAY,aAAa;CAClC,MAAM,YAAY,UAAU;CAC5B,MAAM,YAAY,UAAU;CAC5B,SAAS,YAAY,aAAa;CAClC,MAAM,YAAY,UAAU;CAC5B,KAAK,YAAY,SAAS;CAC1B,QAAQ,YAAY,YAAY;CAChC,OAAO,YAAY,WAAW;CAC9B,SAAS,YAAY,aAAa;CAClC,QAAQ,YAAY,YAAY;CAChC,SAAS,YAAY,aAAa;CAClC,SAAS,YAAY,aAAa;CAClC,QAAQ,YAAY,YAAY;CAChC,QAAQ,YAAY,YAAY;CAChC,WAAW,YAAY,eAAe;CACtC,QAAQ,YAAY,YAAY;CAChC,iBAAiB,YAAY,qBAAqB;CAClD,YAAY,YAAY,gBAAgB;CACxC,OAAO,YAAY,WAAW;CAC/B"}
+{"version":3,"file":"predefined.js","names":[],"sources":["../../src/styles/predefined.ts"],"sourcesContent":["import { isDevEnv } from '../utils/is-dev-env';\nimport type {\n  RawStyleHandler,\n  StyleHandler,\n  StyleHandlerDefinition,\n} from '../utils/styles';\n\nimport { alignStyle } from './align';\nimport { borderStyle } from './border';\nimport { colorStyle } from './color';\nimport { createStyle } from './createStyle';\nimport { displayStyle } from './display';\nimport { fadeStyle } from './fade';\nimport { fillStyle, svgFillStyle } from './fill';\nimport { flowStyle } from './flow';\n// Note: fontStyle (font.ts) and fontStyleStyle (fontStyle.ts) removed\n// Both font and fontStyle props are now handled by presetStyle\nimport { gapStyle } from './gap';\nimport { heightStyle } from './height';\nimport { insetStyle } from './inset';\nimport { justifyStyle } from './justify';\nimport { marginStyle } from './margin';\nimport { outlineStyle } from './outline';\nimport { paddingStyle } from './padding';\nimport { presetStyle } from './preset';\nimport { radiusStyle } from './radius';\nimport { scrollbarStyle } from './scrollbar';\nimport { shadowStyle } from './shadow';\nimport { transitionStyle } from './transition';\nimport { widthStyle } from './width';\n\nconst devMode = isDevEnv();\n\nconst _numberConverter = (val: string | number | boolean | undefined) => {\n  if (typeof val === 'number') {\n    return `${val}px`;\n  }\n\n  return val;\n};\nconst columnsConverter = (val: string | number | boolean | undefined) => {\n  if (typeof val === 'number') {\n    return 'minmax(1px, 1fr) '.repeat(val).trim();\n  }\n\n  return;\n};\nconst rowsConverter = (val: string | number | boolean | undefined) => {\n  if (typeof val === 'number') {\n    return 'auto '.repeat(val).trim();\n  }\n\n  return;\n};\n\ntype StyleHandlerMap = Record<string, StyleHandler[]>;\n\nexport const STYLE_HANDLER_MAP: StyleHandlerMap = {};\n\n// Store initial handler state for reset functionality\nlet initialHandlerMapSnapshot: StyleHandlerMap | null = null;\n\n/**\n * Capture a snapshot of the current STYLE_HANDLER_MAP.\n * Called after predefine() to preserve built-in handler state.\n */\nfunction captureInitialHandlerState(): void {\n  initialHandlerMapSnapshot = {};\n  for (const key of Object.keys(STYLE_HANDLER_MAP)) {\n    // Shallow copy the array - handlers themselves are immutable\n    initialHandlerMapSnapshot[key] = [...STYLE_HANDLER_MAP[key]];\n  }\n}\n\n/**\n * Reset STYLE_HANDLER_MAP to the initial built-in state.\n * Called by resetConfig() to restore handlers after tests.\n */\nexport function resetHandlers(): void {\n  if (!initialHandlerMapSnapshot) {\n    // predefine() hasn't been called yet, nothing to reset\n    return;\n  }\n\n  // Clear current map\n  for (const key of Object.keys(STYLE_HANDLER_MAP)) {\n    delete STYLE_HANDLER_MAP[key];\n  }\n\n  // Restore initial state\n  for (const key of Object.keys(initialHandlerMapSnapshot)) {\n    STYLE_HANDLER_MAP[key] = [...initialHandlerMapSnapshot[key]];\n  }\n}\n\nexport function defineCustomStyle(\n  names: string[] | StyleHandler,\n  handler?: RawStyleHandler,\n) {\n  let handlerWithLookup: StyleHandler;\n\n  if (typeof names === 'function') {\n    handlerWithLookup = names;\n    names = handlerWithLookup.__lookupStyles;\n  } else if (handler) {\n    handlerWithLookup = Object.assign(handler, { __lookupStyles: names });\n  } else {\n    console.warn('CubeUIKit: incorrect custom style definition: ', names);\n    return;\n  }\n\n  if (Array.isArray(names)) {\n    // just to pass type checking\n    names.forEach((name) => {\n      if (!STYLE_HANDLER_MAP[name]) {\n        STYLE_HANDLER_MAP[name] = [];\n      }\n\n      STYLE_HANDLER_MAP[name].push(handlerWithLookup);\n    });\n  }\n}\n\ntype ConverterHandler = (\n  s: string | boolean | number | undefined,\n) => string | undefined;\n\nexport function defineStyleAlias(\n  styleName: string,\n  cssStyleName?: string,\n  converter?: ConverterHandler,\n) {\n  const styleHandler = createStyle(styleName, cssStyleName, converter);\n\n  if (!STYLE_HANDLER_MAP[styleName]) {\n    STYLE_HANDLER_MAP[styleName] = [];\n  }\n\n  STYLE_HANDLER_MAP[styleName].push(styleHandler);\n}\n\nexport function predefine() {\n  // Style aliases\n  defineStyleAlias('gridAreas', 'grid-template-areas');\n  defineStyleAlias('gridColumns', 'grid-template-columns', columnsConverter);\n  defineStyleAlias('gridRows', 'grid-template-rows', rowsConverter);\n  defineStyleAlias(\n    'gridTemplate',\n    'grid-template',\n    (val: string | boolean | number | undefined) => {\n      if (typeof val !== 'string') return;\n\n      return val\n        .split('/')\n        .map((s, i) => (i ? columnsConverter : rowsConverter)(s))\n        .join('/');\n    },\n  );\n  // Note: outlineOffset is now handled by outlineStyle\n\n  [\n    displayStyle,\n    transitionStyle,\n    fillStyle,\n    svgFillStyle,\n    widthStyle,\n    marginStyle,\n    gapStyle,\n    flowStyle,\n    colorStyle,\n    heightStyle,\n    radiusStyle,\n    borderStyle,\n    shadowStyle,\n    paddingStyle,\n    alignStyle,\n    justifyStyle,\n    presetStyle,\n    outlineStyle,\n    scrollbarStyle,\n    fadeStyle,\n    insetStyle,\n  ]\n    // @ts-expect-error handler type varies across built-in style handlers\n    .forEach((handler) => defineCustomStyle(handler));\n\n  // Capture initial state after all built-in handlers are registered\n  captureInitialHandlerState();\n\n  return { STYLE_HANDLER_MAP, defineCustomStyle, defineStyleAlias };\n}\n\n// ============================================================================\n// Handler Registration API (for configure())\n// ============================================================================\n\n/**\n * Normalize a handler definition to a StyleHandler with __lookupStyles.\n * - Function only: lookup styles inferred from key name\n * - [string, fn]: single lookup style\n * - [string[], fn]: multiple lookup styles\n */\nexport function normalizeHandlerDefinition(\n  keyName: string,\n  definition: StyleHandlerDefinition,\n): StyleHandler {\n  let handler: RawStyleHandler;\n  let lookupStyles: string[];\n\n  if (typeof definition === 'function') {\n    // Function only - lookup styles inferred from key name\n    handler = definition;\n    lookupStyles = [keyName];\n  } else if (Array.isArray(definition)) {\n    const [first, fn] = definition;\n\n    if (typeof fn !== 'function') {\n      throw new Error(\n        `[Tasty] Invalid handler definition for \"${keyName}\". ` +\n          'Tuple must have a function as the second element: [string, function] or [string[], function].',\n      );\n    }\n\n    handler = fn;\n\n    if (typeof first === 'string') {\n      // [string, fn] - single lookup style\n      lookupStyles = [first];\n    } else if (Array.isArray(first)) {\n      // [string[], fn] - multiple lookup styles\n      lookupStyles = first;\n    } else {\n      throw new Error(\n        `[Tasty] Invalid handler definition for \"${keyName}\". ` +\n          'First element must be a string or string array.',\n      );\n    }\n  } else {\n    throw new Error(\n      `[Tasty] Invalid handler definition for \"${keyName}\". ` +\n        'Expected function, [string, function], or [string[], function].',\n    );\n  }\n\n  // Validate handler in dev mode\n  validateHandler(keyName, handler, lookupStyles);\n\n  // Wrap the handler to avoid mutation issues when the same function\n  // is reused for multiple handler definitions. Each registration\n  // gets its own function identity with its own __lookupStyles.\n  const wrappedHandler = ((props) => handler(props)) as StyleHandler;\n  wrappedHandler.__lookupStyles = lookupStyles;\n\n  return wrappedHandler;\n}\n\n/**\n * Validate a handler definition in development mode.\n */\nfunction validateHandler(\n  name: string,\n  handler: RawStyleHandler,\n  lookupStyles: string[],\n): void {\n  if (!devMode) return;\n\n  if (typeof handler !== 'function') {\n    console.warn(\n      `[Tasty] Handler \"${name}\" is not a function. ` +\n        'Handlers must be functions that return CSSMap, CSSMap[], or void.',\n    );\n  }\n\n  if (\n    !lookupStyles ||\n    !Array.isArray(lookupStyles) ||\n    lookupStyles.length === 0\n  ) {\n    console.warn(\n      `[Tasty] Handler \"${name}\" has invalid lookupStyles. ` +\n        'Expected non-empty array of style names.',\n    );\n  }\n}\n\n/**\n * Validate a handler result in development mode.\n * Call this after invoking a handler to check the return value.\n */\nexport function validateHandlerResult(name: string, result: unknown): void {\n  if (!devMode) return;\n  if (result === undefined || result === null) return; // void is valid\n\n  // Check for empty string (migration from old pattern)\n  if (result === '') {\n    console.warn(\n      `[Tasty] Handler \"${name}\" returned empty string. ` +\n        'Return void/undefined instead for no output.',\n    );\n    return;\n  }\n\n  // Check result is object (CSSMap or CSSMap[])\n  if (typeof result !== 'object') {\n    console.warn(\n      `[Tasty] Handler \"${name}\" returned invalid type: ${typeof result}. ` +\n        'Expected CSSMap, CSSMap[], or void.',\n    );\n  }\n}\n\n/**\n * Register a custom handler, replacing any existing handlers for the same lookup styles.\n * This is called by configure() to process user-defined handlers.\n *\n * When registering a handler for style X, any existing handler that processes X\n * is removed from ALL its lookup styles to prevent double-processing.\n * For example, if gapStyle handles ['display', 'flow', 'gap'] and a new handler\n * is registered for just ['gap'], gapStyle is removed from display and flow too.\n */\nexport function registerHandler(handler: StyleHandler): void {\n  const lookupStyles = handler.__lookupStyles;\n\n  if (!lookupStyles || lookupStyles.length === 0) {\n    if (devMode) {\n      console.warn(\n        '[Tasty] Cannot register handler without __lookupStyles property.',\n      );\n    }\n    return;\n  }\n\n  // Find and remove existing handlers that would conflict\n  // A handler conflicts if it handles any of the same styles as the new handler\n  const handlersToRemove = new Set<StyleHandler>();\n\n  for (const styleName of lookupStyles) {\n    const existing = STYLE_HANDLER_MAP[styleName];\n    if (existing) {\n      for (const existingHandler of existing) {\n        handlersToRemove.add(existingHandler);\n      }\n    }\n  }\n\n  // Remove conflicting handlers from ALL their lookup styles\n  for (const oldHandler of handlersToRemove) {\n    const oldLookupStyles = oldHandler.__lookupStyles;\n    if (oldLookupStyles) {\n      for (const oldStyleName of oldLookupStyles) {\n        const handlers = STYLE_HANDLER_MAP[oldStyleName];\n        if (handlers) {\n          const filtered = handlers.filter((h) => h !== oldHandler);\n          if (filtered.length === 0) {\n            delete STYLE_HANDLER_MAP[oldStyleName];\n          } else {\n            STYLE_HANDLER_MAP[oldStyleName] = filtered;\n          }\n        }\n      }\n    }\n  }\n\n  // Register the new handler under its lookup styles\n  for (const styleName of lookupStyles) {\n    const existing = STYLE_HANDLER_MAP[styleName];\n    if (existing) {\n      existing.push(handler);\n    } else {\n      STYLE_HANDLER_MAP[styleName] = [handler];\n    }\n  }\n}\n\n// ============================================================================\n// Wrapped Style Handlers Export\n// ============================================================================\n\n/**\n * Create a wrapped handler that can be safely called by users.\n * The wrapper preserves __lookupStyles for proper registration.\n */\nfunction wrapHandler<T extends { __lookupStyles: string[] }>(handler: T): T {\n  const fn = handler as unknown as (props: unknown) => unknown;\n  const wrapped = ((props: unknown) => fn(props)) as unknown as T;\n  wrapped.__lookupStyles = handler.__lookupStyles;\n  return wrapped;\n}\n\n/**\n * Exported object containing wrapped predefined style handlers.\n * Users can import and call these to extend or delegate to built-in behavior.\n *\n * Internal handlers use *Style suffix for searchability.\n * External API uses short names for convenience.\n *\n * @example\n * ```ts\n * import { styleHandlers, configure } from '@tenphi/tasty';\n *\n * configure({\n *   handlers: {\n *     fill: ({ fill }) => {\n *       if (fill?.startsWith('gradient:')) {\n *         return { background: fill.slice(9) };\n *       }\n *       return styleHandlers.fill({ fill });\n *     },\n *   },\n * });\n * ```\n */\nexport const styleHandlers = {\n  align: wrapHandler(alignStyle),\n  border: wrapHandler(borderStyle),\n  color: wrapHandler(colorStyle),\n  display: wrapHandler(displayStyle),\n  fade: wrapHandler(fadeStyle),\n  fill: wrapHandler(fillStyle),\n  svgFill: wrapHandler(svgFillStyle),\n  flow: wrapHandler(flowStyle),\n  gap: wrapHandler(gapStyle),\n  height: wrapHandler(heightStyle),\n  inset: wrapHandler(insetStyle),\n  justify: wrapHandler(justifyStyle),\n  margin: wrapHandler(marginStyle),\n  outline: wrapHandler(outlineStyle),\n  padding: wrapHandler(paddingStyle),\n  preset: wrapHandler(presetStyle),\n  radius: wrapHandler(radiusStyle),\n  scrollbar: wrapHandler(scrollbarStyle),\n  shadow: wrapHandler(shadowStyle),\n  transition: wrapHandler(transitionStyle),\n  width: wrapHandler(widthStyle),\n} as const;\n"],"mappings":"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"}

package/dist/styles/scrollbar.d.ts

@@ -1,18 +1,22 @@
 //#region src/styles/scrollbar.d.ts
 interface ScrollbarStyleProps {
-  scrollbar?: string | boolean | number;
+  scrollbar?: string | boolean;
   overflow?: string;
 }
 /**
- * Creates cross-browser compatible scrollbar styles
+ * Standard CSS scrollbar styling via `scrollbar-width`, `scrollbar-color`,
+ * and `scrollbar-gutter`.
  *
- * Supports both Firefox (scrollbar-width, scrollbar-color) and
- * WebKit/Chromium browsers (::-webkit-scrollbar)
+ * Width values: `thin` (default), `auto`, `none`
+ * Modifiers: `stable`, `both-edges`, `always`
+ *
+ * Note: `auto` is classified as a VALUE_KEYWORD by the parser, so it lands
+ * in `values` rather than `mods`. Both locations are checked for robustness.
  */
 declare function scrollbarStyle({
   scrollbar,
   overflow
-}: ScrollbarStyleProps): Record<string, string | Record<string, string>> | undefined;
+}: ScrollbarStyleProps): Record<string, string> | undefined;
 declare namespace scrollbarStyle {
   var __lookupStyles: string[];
 }

package/dist/styles/scrollbar.js

@@ -1,107 +1,43 @@
 import { makeEmptyDetails } from "../parser/types.js";
 import { parseStyle } from "../utils/styles.js";
+import { warn } from "../utils/warnings.js";
 
 //#region src/styles/scrollbar.ts
 /**
-* Creates cross-browser compatible scrollbar styles
+* Standard CSS scrollbar styling via `scrollbar-width`, `scrollbar-color`,
+* and `scrollbar-gutter`.
 *
-* Supports both Firefox (scrollbar-width, scrollbar-color) and
-* WebKit/Chromium browsers (::-webkit-scrollbar)
+* Width values: `thin` (default), `auto`, `none`
+* Modifiers: `stable`, `both-edges`, `always`
+*
+* Note: `auto` is classified as a VALUE_KEYWORD by the parser, so it lands
+* in `values` rather than `mods`. Both locations are checked for robustness.
 */
 function scrollbarStyle({ scrollbar, overflow }) {
-	if (!scrollbar && scrollbar !== 0) return;
-	const value = scrollbar === true || scrollbar === "" ? "thin" : scrollbar;
+	if (!scrollbar) return;
+	const value = scrollbar === true ? "thin" : scrollbar;
 	const { mods, colors, values } = parseStyle(String(value)).groups[0] ?? makeEmptyDetails();
-	const style = {};
-	function getNested(key) {
-		const v = style[key];
-		if (v && typeof v === "object") return v;
-		return {};
-	}
 	const defaultThumbColor = "var(--scrollbar-thumb-color)";
 	const defaultTrackColor = "var(--scrollbar-track-color, transparent)";
-	style["scrollbar-color"] = `${defaultThumbColor} transparent`;
-	const sizeValue = values[0] || "8px";
-	if (mods.includes("thin")) style["scrollbar-width"] = "thin";
-	else if (mods.includes("none")) {
+	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";
-		delete style["scrollbar-color"];
-		style["&::-webkit-scrollbar"] = {
-			width: "0px",
-			height: "0px",
-			display: "none"
-		};
 		return style;
-	} else if (mods.includes("auto")) style["scrollbar-width"] = "auto";
-	if (mods.includes("stable") || mods.includes("both-edges")) style["scrollbar-gutter"] = mods.includes("both-edges") ? "stable both-edges" : "stable";
-	if (sizeValue) style["&::-webkit-scrollbar"] = {
-		...getNested("&::-webkit-scrollbar"),
-		width: sizeValue,
-		height: sizeValue
-	};
-	const thumbColor = colors && colors[0] ? colors[0] : defaultThumbColor;
-	const trackColor = colors && colors[1] ? colors[1] : defaultTrackColor;
-	const cornerColor = colors && colors[2] ? colors[2] : trackColor;
-	if (colors && colors.length) {
-		style["scrollbar-color"] = `${thumbColor} ${trackColor}`;
-		const webkitScrollbar = getNested("&::-webkit-scrollbar");
-		webkitScrollbar["background"] = trackColor;
-		style["&::-webkit-scrollbar"] = webkitScrollbar;
-		style["&::-webkit-scrollbar-track"] = {
-			...getNested("&::-webkit-scrollbar-track"),
-			background: trackColor
-		};
-		style["&::-webkit-scrollbar-thumb"] = {
-			...getNested("&::-webkit-scrollbar-thumb"),
-			background: thumbColor
-		};
-		style["&::-webkit-scrollbar-corner"] = {
-			...getNested("&::-webkit-scrollbar-corner"),
-			background: cornerColor
-		};
 	}
+	if (mods.includes("auto") || values.includes("auto")) style["scrollbar-width"] = "auto";
+	else style["scrollbar-width"] = "thin";
+	style["scrollbar-color"] = `${colors?.[0] || defaultThumbColor} ${colors?.[1] || defaultTrackColor}`;
+	if (mods.includes("stable") || mods.includes("both-edges")) style["scrollbar-gutter"] = mods.includes("both-edges") ? "stable both-edges" : "stable";
 	if (mods.includes("always")) {
-		style["overflow"] = overflow || "scroll";
-		if (!style["scrollbar-gutter"]) style["scrollbar-gutter"] = "stable";
-		const alwaysScrollbar = getNested("&::-webkit-scrollbar");
-		alwaysScrollbar["display"] = "block";
-		style["&::-webkit-scrollbar"] = alwaysScrollbar;
-	}
-	if (mods.includes("styled")) {
-		const baseTransition = [
-			"background var(--transition)",
-			"border-radius var(--transition)",
-			"box-shadow var(--transition)",
-			"width var(--transition)",
-			"height var(--transition)",
-			"border var(--transition)"
-		].join(", ");
-		style["scrollbar-width"] = style["scrollbar-width"] || "thin";
-		style["scrollbar-color"] = style["scrollbar-color"] || `${defaultThumbColor} ${defaultTrackColor}`;
-		style["&::-webkit-scrollbar"] = {
-			width: sizeValue,
-			height: sizeValue,
-			transition: baseTransition,
-			background: defaultTrackColor,
-			...getNested("&::-webkit-scrollbar")
-		};
-		style["&::-webkit-scrollbar-thumb"] = {
-			"border-radius": "8px",
-			"min-height": "24px",
-			transition: baseTransition,
-			background: defaultThumbColor,
-			...getNested("&::-webkit-scrollbar-thumb")
-		};
-		style["&::-webkit-scrollbar-track"] = {
-			background: defaultTrackColor,
-			transition: baseTransition,
-			...getNested("&::-webkit-scrollbar-track")
-		};
-		style["&::-webkit-scrollbar-corner"] = {
-			background: defaultTrackColor,
-			transition: baseTransition,
-			...getNested("&::-webkit-scrollbar-corner")
-		};
+		const effectiveOverflow = overflow || "scroll";
+		style["overflow"] = effectiveOverflow;
+		if (!style["scrollbar-gutter"] && (effectiveOverflow === "scroll" || effectiveOverflow === "auto")) style["scrollbar-gutter"] = "stable";
 	}
 	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 | number;\n  overflow?: string;\n}\n\n/**\n * Creates cross-browser compatible scrollbar styles\n *\n * Supports both Firefox (scrollbar-width, scrollbar-color) and\n * WebKit/Chromium browsers (::-webkit-scrollbar)\n */\nexport function scrollbarStyle({ scrollbar, overflow }: ScrollbarStyleProps) {\n  // Check if scrollbar is defined\n  if (!scrollbar && scrollbar !== 0) return;\n\n  // Support true as alias for thin\n  const value = scrollbar === true || scrollbar === '' ? 'thin' : scrollbar;\n  const processed = parseStyle(String(value));\n  const { mods, colors, values } = processed.groups[0] ?? makeEmptyDetails();\n  type NestedStyle = Record<string, string>;\n  type ScrollbarStyleMap = Record<string, string | NestedStyle>;\n  const style: ScrollbarStyleMap = {};\n\n  function getNested(key: string): NestedStyle {\n    const v = style[key];\n    if (v && typeof v === 'object') return v;\n    return {};\n  }\n\n  // Default colors for scrollbar\n  const defaultThumbColor = 'var(--scrollbar-thumb-color)';\n  const defaultTrackColor = 'var(--scrollbar-track-color, transparent)';\n\n  // Setup default Firefox scrollbar style\n  style['scrollbar-color'] = `${defaultThumbColor} transparent`;\n\n  // Default scrollbar size\n  const defaultSize = '8px';\n  const sizeValue = values[0] || defaultSize;\n\n  // Process modifiers\n  if (mods.includes('thin')) {\n    style['scrollbar-width'] = 'thin';\n  } else if (mods.includes('none')) {\n    style['scrollbar-width'] = 'none';\n    // Remove scrollbar-color as it's not needed when scrollbar is hidden\n    delete style['scrollbar-color'];\n    // Also hide WebKit scrollbars\n    style['&::-webkit-scrollbar'] = {\n      width: '0px',\n      height: '0px',\n      display: 'none',\n    };\n\n    return style;\n  } else if (mods.includes('auto')) {\n    style['scrollbar-width'] = 'auto';\n  }\n\n  // Handle scrollbar gutter behavior\n  if (mods.includes('stable') || mods.includes('both-edges')) {\n    // scrollbar-gutter is supported in newer browsers only\n    style['scrollbar-gutter'] = mods.includes('both-edges')\n      ? 'stable both-edges'\n      : 'stable';\n  }\n\n  // Custom size setup for WebKit\n  if (sizeValue) {\n    style['&::-webkit-scrollbar'] = {\n      ...getNested('&::-webkit-scrollbar'),\n      width: sizeValue,\n      height: sizeValue,\n    };\n  }\n\n  // Extract colors (support up to 3: thumb, track, corner)\n  // These will be used in various places throughout the function\n  const thumbColor = colors && colors[0] ? colors[0] : defaultThumbColor;\n  const trackColor = colors && colors[1] ? colors[1] : defaultTrackColor;\n  const cornerColor = colors && colors[2] ? colors[2] : trackColor;\n\n  // Apply colors if they are specified\n  if (colors && colors.length) {\n    // Firefox\n    style['scrollbar-color'] = `${thumbColor} ${trackColor}`;\n\n    // WebKit - always set these for consistency\n    const webkitScrollbar = getNested('&::-webkit-scrollbar');\n    webkitScrollbar['background'] = trackColor;\n    style['&::-webkit-scrollbar'] = webkitScrollbar;\n\n    style['&::-webkit-scrollbar-track'] = {\n      ...getNested('&::-webkit-scrollbar-track'),\n      background: trackColor,\n    };\n\n    style['&::-webkit-scrollbar-thumb'] = {\n      ...getNested('&::-webkit-scrollbar-thumb'),\n      background: thumbColor,\n    };\n\n    style['&::-webkit-scrollbar-corner'] = {\n      ...getNested('&::-webkit-scrollbar-corner'),\n      background: cornerColor,\n    };\n  }\n\n  // Handle 'always' mode: force scrollbars to show\n  if (mods.includes('always')) {\n    style['overflow'] = overflow || 'scroll';\n\n    // Use auto for WebKit browsers since they don't support 'always'\n    // This is closer to the expected behavior\n    if (!style['scrollbar-gutter']) {\n      style['scrollbar-gutter'] = 'stable';\n    }\n\n    // Ensure scrollbars appear in WebKit even with little content\n    const alwaysScrollbar = getNested('&::-webkit-scrollbar');\n    alwaysScrollbar['display'] = 'block';\n    style['&::-webkit-scrollbar'] = alwaysScrollbar;\n  }\n\n  // Enhanced 'styled' mode with better transitions and appearance\n  if (mods.includes('styled')) {\n    const baseTransition = [\n      'background var(--transition)',\n      'border-radius var(--transition)',\n      'box-shadow var(--transition)',\n      'width var(--transition)',\n      'height var(--transition)',\n      'border var(--transition)',\n    ].join(', ');\n\n    // Firefox\n    style['scrollbar-width'] = style['scrollbar-width'] || 'thin';\n    style['scrollbar-color'] =\n      style['scrollbar-color'] || `${defaultThumbColor} ${defaultTrackColor}`;\n\n    // WebKit\n    style['&::-webkit-scrollbar'] = {\n      width: sizeValue,\n      height: sizeValue,\n      transition: baseTransition,\n      background: defaultTrackColor,\n      ...getNested('&::-webkit-scrollbar'),\n    };\n\n    style['&::-webkit-scrollbar-thumb'] = {\n      'border-radius': '8px',\n      'min-height': '24px',\n      transition: baseTransition,\n      background: defaultThumbColor,\n      ...getNested('&::-webkit-scrollbar-thumb'),\n    };\n\n    style['&::-webkit-scrollbar-track'] = {\n      background: defaultTrackColor,\n      transition: baseTransition,\n      ...getNested('&::-webkit-scrollbar-track'),\n    };\n\n    style['&::-webkit-scrollbar-corner'] = {\n      background: defaultTrackColor,\n      transition: baseTransition,\n      ...getNested('&::-webkit-scrollbar-corner'),\n    };\n  }\n\n  return style;\n}\n\nscrollbarStyle.__lookupStyles = ['scrollbar', 'overflow'];\n"],"mappings":";;;;;;;;;;AAcA,SAAgB,eAAe,EAAE,WAAW,YAAiC;AAE3E,KAAI,CAAC,aAAa,cAAc,EAAG;CAGnC,MAAM,QAAQ,cAAc,QAAQ,cAAc,KAAK,SAAS;CAEhE,MAAM,EAAE,MAAM,QAAQ,WADJ,WAAW,OAAO,MAAM,CAAC,CACA,OAAO,MAAM,kBAAkB;CAG1E,MAAM,QAA2B,EAAE;CAEnC,SAAS,UAAU,KAA0B;EAC3C,MAAM,IAAI,MAAM;AAChB,MAAI,KAAK,OAAO,MAAM,SAAU,QAAO;AACvC,SAAO,EAAE;;CAIX,MAAM,oBAAoB;CAC1B,MAAM,oBAAoB;AAG1B,OAAM,qBAAqB,GAAG,kBAAkB;CAIhD,MAAM,YAAY,OAAO,MADL;AAIpB,KAAI,KAAK,SAAS,OAAO,CACvB,OAAM,qBAAqB;UAClB,KAAK,SAAS,OAAO,EAAE;AAChC,QAAM,qBAAqB;AAE3B,SAAO,MAAM;AAEb,QAAM,0BAA0B;GAC9B,OAAO;GACP,QAAQ;GACR,SAAS;GACV;AAED,SAAO;YACE,KAAK,SAAS,OAAO,CAC9B,OAAM,qBAAqB;AAI7B,KAAI,KAAK,SAAS,SAAS,IAAI,KAAK,SAAS,aAAa,CAExD,OAAM,sBAAsB,KAAK,SAAS,aAAa,GACnD,sBACA;AAIN,KAAI,UACF,OAAM,0BAA0B;EAC9B,GAAG,UAAU,uBAAuB;EACpC,OAAO;EACP,QAAQ;EACT;CAKH,MAAM,aAAa,UAAU,OAAO,KAAK,OAAO,KAAK;CACrD,MAAM,aAAa,UAAU,OAAO,KAAK,OAAO,KAAK;CACrD,MAAM,cAAc,UAAU,OAAO,KAAK,OAAO,KAAK;AAGtD,KAAI,UAAU,OAAO,QAAQ;AAE3B,QAAM,qBAAqB,GAAG,WAAW,GAAG;EAG5C,MAAM,kBAAkB,UAAU,uBAAuB;AACzD,kBAAgB,gBAAgB;AAChC,QAAM,0BAA0B;AAEhC,QAAM,gCAAgC;GACpC,GAAG,UAAU,6BAA6B;GAC1C,YAAY;GACb;AAED,QAAM,gCAAgC;GACpC,GAAG,UAAU,6BAA6B;GAC1C,YAAY;GACb;AAED,QAAM,iCAAiC;GACrC,GAAG,UAAU,8BAA8B;GAC3C,YAAY;GACb;;AAIH,KAAI,KAAK,SAAS,SAAS,EAAE;AAC3B,QAAM,cAAc,YAAY;AAIhC,MAAI,CAAC,MAAM,oBACT,OAAM,sBAAsB;EAI9B,MAAM,kBAAkB,UAAU,uBAAuB;AACzD,kBAAgB,aAAa;AAC7B,QAAM,0BAA0B;;AAIlC,KAAI,KAAK,SAAS,SAAS,EAAE;EAC3B,MAAM,iBAAiB;GACrB;GACA;GACA;GACA;GACA;GACA;GACD,CAAC,KAAK,KAAK;AAGZ,QAAM,qBAAqB,MAAM,sBAAsB;AACvD,QAAM,qBACJ,MAAM,sBAAsB,GAAG,kBAAkB,GAAG;AAGtD,QAAM,0BAA0B;GAC9B,OAAO;GACP,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,GAAG,UAAU,uBAAuB;GACrC;AAED,QAAM,gCAAgC;GACpC,iBAAiB;GACjB,cAAc;GACd,YAAY;GACZ,YAAY;GACZ,GAAG,UAAU,6BAA6B;GAC3C;AAED,QAAM,gCAAgC;GACpC,YAAY;GACZ,YAAY;GACZ,GAAG,UAAU,6BAA6B;GAC3C;AAED,QAAM,iCAAiC;GACrC,YAAY;GACZ,YAAY;GACZ,GAAG,UAAU,8BAA8B;GAC5C;;AAGH,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 = [...mods.filter((m) => m !== 'none'), ...values, ...colors];\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;GAAC,GAAG,KAAK,QAAQ,MAAM,MAAM,OAAO;GAAE,GAAG;GAAQ,GAAG;GAAO;AAE3E,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/styles/types.d.ts

@@ -128,25 +128,22 @@ interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font'
    */
   fade?: 'top' | 'right' | 'bottom' | 'left' | string;
   /**
-   * @deprecated Use `scrollbar` style instead.
-   * Whether the element has styled scrollbar.
-   */
-  styledScrollbar?: boolean;
-  /**
-   * The scrollbar style provides a powerful and flexible way to control the appearance and behavior of scrollbars across browsers. It supports custom sizing, color, visibility, and advanced modifiers for modern UI needs.
+   * Scrollbar styling using standard CSS properties (`scrollbar-width`, `scrollbar-color`, `scrollbar-gutter`).
    *
-   * Syntax: `[modifiers] [size] [color1] [color2] [color3]`
+   * Syntax: `[width] [modifiers...] [thumb-color] [track-color]`
    *
-   * Modifiers: `thin`, `none`, `auto`, `stable`, `both-edges`, `always`, `styled`
+   * Width values: `thin` (default), `auto`, `none`
+   * Modifiers: `stable`, `both-edges`, `always`
    *
    * Examples:
-   * - `scrollbar={true}` // thin scrollbar, default color
-   * - `scrollbar="thin 10px #purple.40 #dark.04"`
-   * - `scrollbar="styled 12px #purple.40 #dark.04 #white.10"`
+   * - `scrollbar={true}` // thin scrollbar, default colors
+   * - `scrollbar="thin #purple.40 #dark.04"`
+   * - `scrollbar="auto #red #blue"`
    * - `scrollbar="none"`
-   * - `scrollbar="always 8px #primary.50 #white.02"`
+   * - `scrollbar="always #primary.50 #white.02"`
+   * - `scrollbar="thin stable #red #blue"`
    */
-  scrollbar?: string | boolean | number;
+  scrollbar?: string | boolean;
   /**
    * Set font weight for bold texts.
    */

package/dist/tasty.d.ts

@@ -959,8 +959,7 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   image?: StyleValue<csstype.Property.BackgroundImage | undefined> | StyleValueStateMap<csstype.Property.BackgroundImage | undefined>;
   svgFill?: StyleValue<(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<(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>;
   fade?: StyleValue<string | undefined> | StyleValueStateMap<string | undefined>;
-  styledScrollbar?: StyleValue<boolean | undefined> | StyleValueStateMap<boolean | undefined>;
-  scrollbar?: StyleValue<string | number | boolean | undefined> | StyleValueStateMap<string | number | boolean | undefined>;
+  scrollbar?: StyleValue<string | boolean | undefined> | StyleValueStateMap<string | boolean | undefined>;
   boldFontWeight?: StyleValue<number | undefined> | StyleValueStateMap<number | undefined>;
   hide?: StyleValue<boolean | undefined> | StyleValueStateMap<boolean | undefined>;
   shadow?: StyleValue<string | boolean | undefined> | StyleValueStateMap<string | boolean | undefined>;
@@ -976,7 +975,7 @@ declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLElementT
   "@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>, "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" | "styledScrollbar" | "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/dist/utils/selector-transform.js

@@ -0,0 +1,32 @@
+//#region src/utils/selector-transform.ts
+/**
+* Shared utility for transforming capitalized PascalCase element names
+* in CSS selector content to `[data-element="..."]` attribute selectors.
+*
+* Lowercase words are treated as HTML tags and left unchanged.
+*/
+/**
+* Matches a capitalized PascalCase word at the start of the string
+* or after a CSS combinator/separator character.
+*/
+const ELEMENT_NAME_RE = /(^|[\s>+~,(])([A-Z][a-zA-Z0-9]*)/g;
+/**
+* Replace capitalized PascalCase words with `[data-element="Name"]` selectors.
+*
+* @example
+* transformSelectorContent('> Field + input:checked')
+* // → '> [data-element="Field"] + input:checked'
+*
+* transformSelectorContent('Body > Row')
+* // → '[data-element="Body"] > [data-element="Row"]'
+*
+* transformSelectorContent('button')
+* // → 'button'  (lowercase = HTML tag, unchanged)
+*/
+function transformSelectorContent(content) {
+	return content.replace(ELEMENT_NAME_RE, (_, prefix, name) => `${prefix}[data-element="${name}"]`);
+}
+
+//#endregion
+export { transformSelectorContent };
+//# sourceMappingURL=selector-transform.js.map

package/dist/utils/selector-transform.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selector-transform.js","names":[],"sources":["../../src/utils/selector-transform.ts"],"sourcesContent":["/**\n * Shared utility for transforming capitalized PascalCase element names\n * in CSS selector content to `[data-element=\"...\"]` attribute selectors.\n *\n * Lowercase words are treated as HTML tags and left unchanged.\n */\n\n/**\n * Matches a capitalized PascalCase word at the start of the string\n * or after a CSS combinator/separator character.\n */\nconst ELEMENT_NAME_RE = /(^|[\\s>+~,(])([A-Z][a-zA-Z0-9]*)/g;\n\n/**\n * Replace capitalized PascalCase words with `[data-element=\"Name\"]` selectors.\n *\n * @example\n * transformSelectorContent('> Field + input:checked')\n * // → '> [data-element=\"Field\"] + input:checked'\n *\n * transformSelectorContent('Body > Row')\n * // → '[data-element=\"Body\"] > [data-element=\"Row\"]'\n *\n * transformSelectorContent('button')\n * // → 'button'  (lowercase = HTML tag, unchanged)\n */\nexport function transformSelectorContent(content: string): string {\n  return content.replace(\n    ELEMENT_NAME_RE,\n    (_, prefix, name) => `${prefix}[data-element=\"${name}\"]`,\n  );\n}\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,kBAAkB;;;;;;;;;;;;;;AAexB,SAAgB,yBAAyB,SAAyB;AAChE,QAAO,QAAQ,QACb,kBACC,GAAG,QAAQ,SAAS,GAAG,OAAO,iBAAiB,KAAK,IACtD"}

package/dist/utils/styles.d.ts

@@ -74,7 +74,6 @@ declare const CUSTOM_UNITS: {
   sf: (num: number) => string;
 };
 declare const DIRECTIONS: string[];
-declare function getModSelector(modName: string): string;
 declare function customFunc(name: string, fn: (groups: StyleDetails[]) => string): void;
 /**
  * Get the global StyleParser instance.
@@ -174,5 +173,5 @@ declare const COMPUTE_FUNC_MAP: Record<string, (a: unknown, b?: unknown) => unkn
 declare function computeState(computeModel: ComputeModel, valueMap: (number | boolean)[] | Record<string, boolean> | ((...args: unknown[]) => unknown)): unknown;
 declare function stringifyStyles(styles: unknown): string;
 //#endregion
-export { COMPUTE_FUNC_MAP, CSSMap, CUSTOM_UNITS, ComputeModel, DIRECTIONS, ParsedColor, RawStyleHandler, STATE_OPERATORS, STATE_OPERATOR_LIST, StyleHandler, StyleHandlerDefinition, StyleHandlerResult, StyleMap, StylePropValue, StyleStateData, StyleStateDataList, StyleStateDataListMap, StyleStateMap, StyleValue, StyleValueStateMap, buildAtRuleContext, computeState, customFunc, extendStyles, extractStyles, filterMods, getGlobalFuncs, getGlobalParser, getGlobalPredefinedTokens, getModSelector, getRgbValuesFromRgbaString, hexToRgb, isAdvancedStateToken, normalizeColorTokenValue, parseColor, parseStateNotation, parseStyle, resetGlobalPredefinedTokens, setGlobalPredefinedTokens, strToRgb, stringifyStyles, styleStateMapToStyleStateDataList };
+export { COMPUTE_FUNC_MAP, CSSMap, CUSTOM_UNITS, ComputeModel, DIRECTIONS, ParsedColor, RawStyleHandler, STATE_OPERATORS, STATE_OPERATOR_LIST, StyleHandler, StyleHandlerDefinition, StyleHandlerResult, StyleMap, StylePropValue, StyleStateData, StyleStateDataList, StyleStateDataListMap, StyleStateMap, StyleValue, StyleValueStateMap, buildAtRuleContext, computeState, customFunc, extendStyles, extractStyles, filterMods, getGlobalFuncs, getGlobalParser, getGlobalPredefinedTokens, getRgbValuesFromRgbaString, hexToRgb, isAdvancedStateToken, normalizeColorTokenValue, parseColor, parseStateNotation, parseStyle, resetGlobalPredefinedTokens, setGlobalPredefinedTokens, strToRgb, stringifyStyles, styleStateMapToStyleStateDataList };
 //# sourceMappingURL=styles.d.ts.map

package/dist/utils/styles.js

@@ -55,27 +55,6 @@ const DIRECTIONS = [
 	"bottom",
 	"left"
 ];
-const MOD_NAME_CACHE = /* @__PURE__ */ new Map();
-function getModSelector(modName) {
-	if (!MOD_NAME_CACHE.has(modName)) {
-		let selector;
-		const valueModMatch = modName.match(/^([a-z][a-z0-9-]*)(\^=|\$=|\*=|=)(.+)$/i);
-		if (valueModMatch) {
-			const key = valueModMatch[1];
-			const operator = valueModMatch[2];
-			let value = valueModMatch[3];
-			if (value.startsWith("\"") && value.endsWith("\"") || value.startsWith("'") && value.endsWith("'")) value = value.slice(1, -1);
-			selector = `[data-${camelToKebab(key)}${operator}"${value}"]`;
-		} else if (modName.match(/^[a-z]/)) selector = `[data-${camelToKebab(modName)}]`;
-		else if (modName.includes(":has(")) selector = modName.replace(/:has\(([^)]+)\)/g, (match, content) => {
-			if (/[A-Z][a-z]*[>+~]|[>+~][A-Z][a-z]*/.test(content)) console.error(`[Tasty] Invalid :has() selector syntax: "${modName}"\nCombinators (>, +, ~) must have spaces around them when used with element names.\nExample: Use ":has(Body > Row)" instead of ":has(Body>Row)"\nThis is a design choice: the parser uses simple whitespace splitting for performance.`);
-			return `:has(${content.split(/\s+/).map((token) => /^[A-Z]/.test(token) ? `[data-element="${token}"]` : token).join(" ")})`;
-		});
-		else selector = modName;
-		MOD_NAME_CACHE.set(modName, selector);
-	}
-	return MOD_NAME_CACHE.get(modName);
-}
 let __tastyParser = null;
 function getOrCreateParser() {
 	if (!__tastyParser) {
@@ -747,5 +726,5 @@ function stringifyStyles(styles) {
 }
 
 //#endregion
-export { COMPUTE_FUNC_MAP, CUSTOM_UNITS, DIRECTIONS, STATE_OPERATORS, STATE_OPERATOR_LIST, buildAtRuleContext, computeState, customFunc, extendStyles, extractStyles, filterMods, getGlobalFuncs, getGlobalParser, getGlobalPredefinedTokens, getModSelector, getRgbValuesFromRgbaString, hexToRgb, isAdvancedStateToken, normalizeColorTokenValue, parseColor, parseStateNotation, parseStyle, resetGlobalPredefinedTokens, setGlobalPredefinedTokens, strToRgb, stringifyStyles, styleStateMapToStyleStateDataList };
+export { 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 };
 //# sourceMappingURL=styles.js.map