@tenphi/tasty 0.15.3 → 0.16.1

package/dist/ssr/format-rules.js

@@ -17,7 +17,7 @@ function resolveSelector(rule, className) {
 	return selector;
 }
 /**
-* Group rules by selector + at-rules and merge their declarations.
+* Group rules by selector + at-rules + startingStyle and merge their declarations.
 * Mirrors the grouping logic in SheetManager.insertRule().
 */
 function groupRules(rules) {
@@ -25,13 +25,14 @@ function groupRules(rules) {
 	const order = [];
 	const atKey = (at) => at && at.length ? at.join("|") : "";
 	for (const r of rules) {
-		const key = `${atKey(r.atRules)}||${r.selector}`;
+		const key = `${atKey(r.atRules)}||${r.selector}||${r.startingStyle ? "1" : "0"}`;
 		const existing = groupMap.get(key);
 		if (existing) existing.declarations = existing.declarations ? `${existing.declarations} ${r.declarations}` : r.declarations;
 		else {
 			groupMap.set(key, {
 				selector: r.selector,
 				atRules: r.atRules,
+				startingStyle: r.startingStyle,
 				declarations: r.declarations
 			});
 			order.push(key);
@@ -53,11 +54,13 @@ function formatRules(rules, className) {
 	const grouped = groupRules(rules.map((rule) => ({
 		selector: resolveSelector(rule, className),
 		declarations: rule.declarations,
-		atRules: rule.atRules
+		atRules: rule.atRules,
+		startingStyle: rule.startingStyle
 	})));
 	const cssRules = [];
 	for (const rule of grouped) {
-		const baseRule = `${rule.selector} { ${rule.declarations} }`;
+		const innerContent = rule.startingStyle ? `@starting-style { ${rule.declarations} }` : rule.declarations;
+		const baseRule = `${rule.selector} { ${innerContent} }`;
 		let fullRule = baseRule;
 		if (rule.atRules && rule.atRules.length > 0) fullRule = rule.atRules.reduce((css, atRule) => `${atRule} { ${css} }`, baseRule);
 		cssRules.push(fullRule);

package/dist/ssr/format-rules.js.map

@@ -1 +1 @@
-{"version":3,"file":"format-rules.js","names":[],"sources":["../../src/ssr/format-rules.ts"],"sourcesContent":["/**\n * Shared CSS rule formatting utility.\n *\n * Extracted from SheetManager to allow both the DOM-based injector (client)\n * and the ServerStyleCollector (server) to produce identical CSS text\n * from StyleResult arrays.\n */\n\nimport type { StyleResult } from '../pipeline';\n\n/**\n * Resolve selectors for a rule, applying className-based specificity doubling\n * and rootPrefix handling. Mirrors the logic in StyleInjector.inject().\n */\nfunction resolveSelector(rule: StyleResult, className: string): string {\n  let selector = rule.selector;\n\n  if (rule.needsClassName) {\n    const selectorParts = selector ? selector.split('|||') : [''];\n    const classPrefix = `.${className}.${className}`;\n\n    selector = selectorParts\n      .map((part) => {\n        const classSelector = part ? `${classPrefix}${part}` : classPrefix;\n\n        if (rule.rootPrefix) {\n          return `${rule.rootPrefix} ${classSelector}`;\n        }\n        return classSelector;\n      })\n      .join(', ');\n  }\n\n  return selector;\n}\n\n/**\n * Group rules by selector + at-rules and merge their declarations.\n * Mirrors the grouping logic in SheetManager.insertRule().\n */\nfunction groupRules(\n  rules: { selector: string; declarations: string; atRules?: string[] }[],\n): { selector: string; declarations: string; atRules?: string[] }[] {\n  const groupMap = new Map<\n    string,\n    { selector: string; atRules?: string[]; declarations: string }\n  >();\n  const order: string[] = [];\n\n  const atKey = (at?: string[]) => (at && at.length ? at.join('|') : '');\n\n  for (const r of rules) {\n    const key = `${atKey(r.atRules)}||${r.selector}`;\n    const existing = groupMap.get(key);\n    if (existing) {\n      existing.declarations = existing.declarations\n        ? `${existing.declarations} ${r.declarations}`\n        : r.declarations;\n    } else {\n      groupMap.set(key, {\n        selector: r.selector,\n        atRules: r.atRules,\n        declarations: r.declarations,\n      });\n      order.push(key);\n    }\n  }\n\n  return order.map((key) => groupMap.get(key)!);\n}\n\n/**\n * Format an array of StyleResult rules into a CSS text string.\n *\n * Applies className-based specificity doubling (.cls.cls),\n * groups rules by selector + at-rules, and wraps with at-rule blocks.\n *\n * Produces the same CSS text as SheetManager.insertRule() would insert\n * into the DOM, but as a plain string suitable for SSR output.\n */\nexport function formatRules(rules: StyleResult[], className: string): string {\n  if (rules.length === 0) return '';\n\n  const resolvedRules = rules.map((rule) => ({\n    selector: resolveSelector(rule, className),\n    declarations: rule.declarations,\n    atRules: rule.atRules,\n  }));\n\n  const grouped = groupRules(resolvedRules);\n  const cssRules: string[] = [];\n\n  for (const rule of grouped) {\n    const baseRule = `${rule.selector} { ${rule.declarations} }`;\n\n    let fullRule = baseRule;\n    if (rule.atRules && rule.atRules.length > 0) {\n      fullRule = rule.atRules.reduce(\n        (css, atRule) => `${atRule} { ${css} }`,\n        baseRule,\n      );\n    }\n\n    cssRules.push(fullRule);\n  }\n\n  return cssRules.join('\\n');\n}\n"],"mappings":";;;;;AAcA,SAAS,gBAAgB,MAAmB,WAA2B;CACrE,IAAI,WAAW,KAAK;AAEpB,KAAI,KAAK,gBAAgB;EACvB,MAAM,gBAAgB,WAAW,SAAS,MAAM,MAAM,GAAG,CAAC,GAAG;EAC7D,MAAM,cAAc,IAAI,UAAU,GAAG;AAErC,aAAW,cACR,KAAK,SAAS;GACb,MAAM,gBAAgB,OAAO,GAAG,cAAc,SAAS;AAEvD,OAAI,KAAK,WACP,QAAO,GAAG,KAAK,WAAW,GAAG;AAE/B,UAAO;IACP,CACD,KAAK,KAAK;;AAGf,QAAO;;;;;;AAOT,SAAS,WACP,OACkE;CAClE,MAAM,2BAAW,IAAI,KAGlB;CACH,MAAM,QAAkB,EAAE;CAE1B,MAAM,SAAS,OAAmB,MAAM,GAAG,SAAS,GAAG,KAAK,IAAI,GAAG;AAEnE,MAAK,MAAM,KAAK,OAAO;EACrB,MAAM,MAAM,GAAG,MAAM,EAAE,QAAQ,CAAC,IAAI,EAAE;EACtC,MAAM,WAAW,SAAS,IAAI,IAAI;AAClC,MAAI,SACF,UAAS,eAAe,SAAS,eAC7B,GAAG,SAAS,aAAa,GAAG,EAAE,iBAC9B,EAAE;OACD;AACL,YAAS,IAAI,KAAK;IAChB,UAAU,EAAE;IACZ,SAAS,EAAE;IACX,cAAc,EAAE;IACjB,CAAC;AACF,SAAM,KAAK,IAAI;;;AAInB,QAAO,MAAM,KAAK,QAAQ,SAAS,IAAI,IAAI,CAAE;;;;;;;;;;;AAY/C,SAAgB,YAAY,OAAsB,WAA2B;AAC3E,KAAI,MAAM,WAAW,EAAG,QAAO;CAQ/B,MAAM,UAAU,WANM,MAAM,KAAK,UAAU;EACzC,UAAU,gBAAgB,MAAM,UAAU;EAC1C,cAAc,KAAK;EACnB,SAAS,KAAK;EACf,EAAE,CAEsC;CACzC,MAAM,WAAqB,EAAE;AAE7B,MAAK,MAAM,QAAQ,SAAS;EAC1B,MAAM,WAAW,GAAG,KAAK,SAAS,KAAK,KAAK,aAAa;EAEzD,IAAI,WAAW;AACf,MAAI,KAAK,WAAW,KAAK,QAAQ,SAAS,EACxC,YAAW,KAAK,QAAQ,QACrB,KAAK,WAAW,GAAG,OAAO,KAAK,IAAI,KACpC,SACD;AAGH,WAAS,KAAK,SAAS;;AAGzB,QAAO,SAAS,KAAK,KAAK"}
+{"version":3,"file":"format-rules.js","names":[],"sources":["../../src/ssr/format-rules.ts"],"sourcesContent":["/**\n * Shared CSS rule formatting utility.\n *\n * Extracted from SheetManager to allow both the DOM-based injector (client)\n * and the ServerStyleCollector (server) to produce identical CSS text\n * from StyleResult arrays.\n */\n\nimport type { StyleResult } from '../pipeline';\n\n/**\n * Resolve selectors for a rule, applying className-based specificity doubling\n * and rootPrefix handling. Mirrors the logic in StyleInjector.inject().\n */\nfunction resolveSelector(rule: StyleResult, className: string): string {\n  let selector = rule.selector;\n\n  if (rule.needsClassName) {\n    const selectorParts = selector ? selector.split('|||') : [''];\n    const classPrefix = `.${className}.${className}`;\n\n    selector = selectorParts\n      .map((part) => {\n        const classSelector = part ? `${classPrefix}${part}` : classPrefix;\n\n        if (rule.rootPrefix) {\n          return `${rule.rootPrefix} ${classSelector}`;\n        }\n        return classSelector;\n      })\n      .join(', ');\n  }\n\n  return selector;\n}\n\ninterface GroupedRule {\n  selector: string;\n  declarations: string;\n  atRules?: string[];\n  startingStyle?: boolean;\n}\n\n/**\n * Group rules by selector + at-rules + startingStyle and merge their declarations.\n * Mirrors the grouping logic in SheetManager.insertRule().\n */\nfunction groupRules(rules: GroupedRule[]): GroupedRule[] {\n  const groupMap = new Map<string, GroupedRule>();\n  const order: string[] = [];\n\n  const atKey = (at?: string[]) => (at && at.length ? at.join('|') : '');\n\n  for (const r of rules) {\n    const key = `${atKey(r.atRules)}||${r.selector}||${r.startingStyle ? '1' : '0'}`;\n    const existing = groupMap.get(key);\n    if (existing) {\n      existing.declarations = existing.declarations\n        ? `${existing.declarations} ${r.declarations}`\n        : r.declarations;\n    } else {\n      groupMap.set(key, {\n        selector: r.selector,\n        atRules: r.atRules,\n        startingStyle: r.startingStyle,\n        declarations: r.declarations,\n      });\n      order.push(key);\n    }\n  }\n\n  return order.map((key) => groupMap.get(key)!);\n}\n\n/**\n * Format an array of StyleResult rules into a CSS text string.\n *\n * Applies className-based specificity doubling (.cls.cls),\n * groups rules by selector + at-rules, and wraps with at-rule blocks.\n *\n * Produces the same CSS text as SheetManager.insertRule() would insert\n * into the DOM, but as a plain string suitable for SSR output.\n */\nexport function formatRules(rules: StyleResult[], className: string): string {\n  if (rules.length === 0) return '';\n\n  const resolvedRules = rules.map((rule) => ({\n    selector: resolveSelector(rule, className),\n    declarations: rule.declarations,\n    atRules: rule.atRules,\n    startingStyle: rule.startingStyle,\n  }));\n\n  const grouped = groupRules(resolvedRules);\n  const cssRules: string[] = [];\n\n  for (const rule of grouped) {\n    const innerContent = rule.startingStyle\n      ? `@starting-style { ${rule.declarations} }`\n      : rule.declarations;\n    const baseRule = `${rule.selector} { ${innerContent} }`;\n\n    let fullRule = baseRule;\n    if (rule.atRules && rule.atRules.length > 0) {\n      fullRule = rule.atRules.reduce(\n        (css, atRule) => `${atRule} { ${css} }`,\n        baseRule,\n      );\n    }\n\n    cssRules.push(fullRule);\n  }\n\n  return cssRules.join('\\n');\n}\n"],"mappings":";;;;;AAcA,SAAS,gBAAgB,MAAmB,WAA2B;CACrE,IAAI,WAAW,KAAK;AAEpB,KAAI,KAAK,gBAAgB;EACvB,MAAM,gBAAgB,WAAW,SAAS,MAAM,MAAM,GAAG,CAAC,GAAG;EAC7D,MAAM,cAAc,IAAI,UAAU,GAAG;AAErC,aAAW,cACR,KAAK,SAAS;GACb,MAAM,gBAAgB,OAAO,GAAG,cAAc,SAAS;AAEvD,OAAI,KAAK,WACP,QAAO,GAAG,KAAK,WAAW,GAAG;AAE/B,UAAO;IACP,CACD,KAAK,KAAK;;AAGf,QAAO;;;;;;AAcT,SAAS,WAAW,OAAqC;CACvD,MAAM,2BAAW,IAAI,KAA0B;CAC/C,MAAM,QAAkB,EAAE;CAE1B,MAAM,SAAS,OAAmB,MAAM,GAAG,SAAS,GAAG,KAAK,IAAI,GAAG;AAEnE,MAAK,MAAM,KAAK,OAAO;EACrB,MAAM,MAAM,GAAG,MAAM,EAAE,QAAQ,CAAC,IAAI,EAAE,SAAS,IAAI,EAAE,gBAAgB,MAAM;EAC3E,MAAM,WAAW,SAAS,IAAI,IAAI;AAClC,MAAI,SACF,UAAS,eAAe,SAAS,eAC7B,GAAG,SAAS,aAAa,GAAG,EAAE,iBAC9B,EAAE;OACD;AACL,YAAS,IAAI,KAAK;IAChB,UAAU,EAAE;IACZ,SAAS,EAAE;IACX,eAAe,EAAE;IACjB,cAAc,EAAE;IACjB,CAAC;AACF,SAAM,KAAK,IAAI;;;AAInB,QAAO,MAAM,KAAK,QAAQ,SAAS,IAAI,IAAI,CAAE;;;;;;;;;;;AAY/C,SAAgB,YAAY,OAAsB,WAA2B;AAC3E,KAAI,MAAM,WAAW,EAAG,QAAO;CAS/B,MAAM,UAAU,WAPM,MAAM,KAAK,UAAU;EACzC,UAAU,gBAAgB,MAAM,UAAU;EAC1C,cAAc,KAAK;EACnB,SAAS,KAAK;EACd,eAAe,KAAK;EACrB,EAAE,CAEsC;CACzC,MAAM,WAAqB,EAAE;AAE7B,MAAK,MAAM,QAAQ,SAAS;EAC1B,MAAM,eAAe,KAAK,gBACtB,qBAAqB,KAAK,aAAa,MACvC,KAAK;EACT,MAAM,WAAW,GAAG,KAAK,SAAS,KAAK,aAAa;EAEpD,IAAI,WAAW;AACf,MAAI,KAAK,WAAW,KAAK,QAAQ,SAAS,EACxC,YAAW,KAAK,QAAQ,QACrB,KAAK,WAAW,GAAG,OAAO,KAAK,IAAI,KACpC,SACD;AAGH,WAAS,KAAK,SAAS;;AAGzB,QAAO,SAAS,KAAK,KAAK"}

package/dist/ssr/index.js

@@ -1,5 +1,5 @@
-import { TastySSRContext } from "./context.js";
 import { registerSSRCollectorGetter } from "./ssr-collector-ref.js";
+import { TastySSRContext } from "./context.js";
 import { ServerStyleCollector } from "./collector.js";
 import { getSSRCollector, runWithCollector } from "./async-storage.js";
 import { hydrateTastyCache } from "./hydrate.js";

package/dist/states/index.js

@@ -12,6 +12,8 @@ const BUILTIN_STATES = new Set([
 	"@starting",
 	"@keyframes",
 	"@properties",
+	"@fontFace",
+	"@counterStyle",
 	"@supports",
 	"@inherit"
 ]);

package/dist/states/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/states/index.ts"],"sourcesContent":["/**\n * Advanced State Mapping - Predefined States Management\n *\n * This module handles global and local predefined states for the Tasty styling system.\n * See ADVANCED_STATE_MAPPING.md for full specification.\n */\n\nimport { hasStylesGenerated } from '../config';\nimport type { Styles } from '../styles/types';\nimport { isDevEnv } from '../utils/is-dev-env';\n\n/**\n * Parsed advanced state information\n */\nexport interface ParsedAdvancedState {\n  type:\n    | 'media'\n    | 'container'\n    | 'root'\n    | 'parent'\n    | 'own'\n    | 'starting'\n    | 'predefined'\n    | 'modifier';\n  condition: string; // e.g., 'width <= 920px' or 'hovered'\n  containerName?: string; // for container queries\n  raw: string; // original state key\n  mediaType?: string; // for @media:screen, @media:print, etc.\n}\n\n/**\n * Context for state parsing operations\n */\nexport interface StateParserContext {\n  localPredefinedStates: Record<string, string>;\n  globalPredefinedStates: Record<string, string>;\n  isSubElement?: boolean; // true when processing sub-element styles (for @own() validation)\n}\n\n/**\n * At-rule context for CSS generation\n */\nexport interface AtRuleContext {\n  media?: string[]; // @media conditions to wrap rule in (merged with 'and')\n  container?: { name?: string; condition: string }[]; // @container conditions (nested)\n  startingStyle?: boolean;\n  rootStates?: string[]; // :root state selectors (e.g., '[data-theme=\"dark\"]')\n  negatedRootStates?: string[]; // Negated :root state selectors for non-overlapping rules (e.g., ':not([data-theme=\"dark\"])')\n}\n\n// Built-in state names that cannot be overridden\nconst BUILTIN_STATES = new Set([\n  '@starting',\n  '@keyframes',\n  '@properties',\n  '@supports',\n  // @inherit is a value (not a key), but reserved here to prevent\n  // users from accidentally defining a state named '@inherit'.\n  '@inherit',\n]);\n\n// Reserved prefixes that are built-in\nconst RESERVED_PREFIXES = [\n  '@media',\n  '@root',\n  '@parent',\n  '@own',\n  '@(',\n  '@starting',\n  '@keyframes',\n  '@properties',\n  '@supports',\n  '@inherit',\n];\n\n// Global predefined states storage\nlet globalPredefinedStates: Record<string, string> = {};\n\n// Warnings tracking to avoid duplicates\nconst emittedWarnings = new Set<string>();\n\nconst devMode = isDevEnv();\n\n/**\n * Emit a warning only once\n */\nfunction warnOnce(key: string, message: string): void {\n  if (devMode && !emittedWarnings.has(key)) {\n    emittedWarnings.add(key);\n    console.warn(message);\n  }\n}\n\n/**\n * Configure global predefined states\n */\nexport function setGlobalPredefinedStates(\n  states: Record<string, string>,\n): void {\n  if (hasStylesGenerated()) {\n    const newStateNames = Object.keys(states).join(', ');\n    warnOnce(\n      `dynamic-states:${newStateNames}`,\n      `[Tasty] Cannot update predefined states after styles have been generated.\\n` +\n        `The new definition(s) for ${newStateNames} will be ignored.`,\n    );\n    return;\n  }\n\n  // Validate state names\n  for (const [name, value] of Object.entries(states)) {\n    // Check for valid name format\n    if (!/^@[A-Za-z][A-Za-z0-9-]*$/.test(name)) {\n      warnOnce(\n        `invalid-state-name:${name}`,\n        `[Tasty] Invalid predefined state name '${name}'. Must start with '@' followed by a letter.`,\n      );\n      continue;\n    }\n\n    // Check for reserved names\n    if (BUILTIN_STATES.has(name)) {\n      warnOnce(\n        `reserved-state:${name}`,\n        `[Tasty] Cannot define predefined state '${name}'. This name is reserved for built-in functionality.`,\n      );\n      continue;\n    }\n\n    // Check for reserved prefixes (but only exact matches, not user-defined states like @mobile)\n    // Reserved prefixes are: @media, @root, @parent, @own, @(\n    // A user state like @mobile should NOT be blocked\n    const isReservedPrefix =\n      name === '@media' ||\n      name === '@root' ||\n      name === '@parent' ||\n      name === '@own' ||\n      name.startsWith('@(');\n\n    if (isReservedPrefix) {\n      warnOnce(\n        `reserved-prefix:${name}`,\n        `[Tasty] Cannot define predefined state '${name}'. This prefix is reserved for built-in functionality.`,\n      );\n      continue;\n    }\n\n    // Check for cross-references\n    const crossRefs = extractPredefinedStateRefs(value);\n    if (crossRefs.length > 0) {\n      warnOnce(\n        `cross-ref:${name}`,\n        `[Tasty] Predefined state '${name}' references another predefined state '${crossRefs[0]}'.\\n` +\n          `Predefined states cannot reference each other. Use the full definition instead.`,\n      );\n      continue;\n    }\n\n    // Check for duplicates\n    if (\n      globalPredefinedStates[name] &&\n      globalPredefinedStates[name] !== value\n    ) {\n      warnOnce(\n        `duplicate-state:${name}`,\n        `[Tasty] Duplicate predefined state '${name}' in configure(). The last definition will be used.`,\n      );\n    }\n\n    globalPredefinedStates[name] = value;\n  }\n}\n\n/**\n * Get global predefined states\n */\nexport function getGlobalPredefinedStates(): Record<string, string> {\n  return globalPredefinedStates;\n}\n\n/**\n * Clear global predefined states (for testing only)\n */\nexport function clearGlobalPredefinedStates(): void {\n  globalPredefinedStates = {};\n  emittedWarnings.clear();\n}\n\n/**\n * Regex to match predefined state references in a string\n * Matches @name that is NOT followed by ( or : and is a complete word\n * Uses word boundary and negative lookahead\n */\nconst PREDEFINED_STATE_PATTERN = /@([A-Za-z][A-Za-z0-9-]*)(?![A-Za-z0-9-:(])/g;\n\n/**\n * Extract predefined state references from a string\n */\nexport function extractPredefinedStateRefs(value: string): string[] {\n  const matches = value.matchAll(PREDEFINED_STATE_PATTERN);\n  const refs: string[] = [];\n\n  for (const match of matches) {\n    const stateName = '@' + match[1];\n    // Skip built-in states (@starting) and duplicates\n    // Note: @media, @root, @own are always followed by '(' so the regex\n    // negative lookahead (?![A-Za-z0-9-:(]) already excludes them\n    if (!BUILTIN_STATES.has(stateName) && !refs.includes(stateName)) {\n      refs.push(stateName);\n    }\n  }\n\n  return refs;\n}\n\n/**\n * Check if a state key is a predefined state reference\n */\nexport function isPredefinedStateRef(stateKey: string): boolean {\n  if (!stateKey.startsWith('@')) return false;\n  if (BUILTIN_STATES.has(stateKey)) return false;\n\n  // Check if it's NOT a built-in prefix\n  for (const prefix of RESERVED_PREFIXES) {\n    if (stateKey === prefix || stateKey.startsWith(prefix)) {\n      // Check if it's exactly @media, @root, @parent, @own, or starts with @( or @media(\n      if (\n        stateKey === '@media' ||\n        stateKey.startsWith('@media(') ||\n        stateKey.startsWith('@media:')\n      ) {\n        return false;\n      }\n      if (stateKey === '@root' || stateKey.startsWith('@root(')) return false;\n      if (stateKey === '@parent' || stateKey.startsWith('@parent('))\n        return false;\n      if (stateKey === '@own' || stateKey.startsWith('@own(')) return false;\n      if (stateKey.startsWith('@(')) return false;\n    }\n  }\n\n  // Must match the predefined state pattern\n  return /^@[A-Za-z][A-Za-z0-9-]*$/.test(stateKey);\n}\n\nconst _localStatesCache = new WeakMap<object, Record<string, string>>();\n\n/**\n * Extract local predefined states from a styles object\n * Local predefined states are top-level keys starting with @ that have string values\n * and are valid predefined state names (not built-in like @media, @root, etc.)\n *\n * Results are cached by object identity via WeakMap since the same styles object\n * is passed to this function multiple times per pipeline run (once per chunk\n * in renderStylesForChunk and generateChunkCacheKey).\n */\nexport function extractLocalPredefinedStates(\n  styles: Styles,\n): Record<string, string> {\n  if (!styles || typeof styles !== 'object') {\n    return {};\n  }\n\n  const cached = _localStatesCache.get(styles as object);\n  if (cached !== undefined) return cached;\n\n  const localStates: Record<string, string> = {};\n\n  for (const [key, value] of Object.entries(styles)) {\n    // Check if it's a predefined state definition (starts with @, has string value)\n    if (key.startsWith('@') && typeof value === 'string') {\n      // Validate name format - must be @[letter][letters/numbers/dashes]*\n      if (!/^@[A-Za-z][A-Za-z0-9-]*$/.test(key)) {\n        continue; // Skip invalid names silently (might be something else)\n      }\n\n      // Skip built-in states\n      if (BUILTIN_STATES.has(key)) {\n        continue;\n      }\n\n      // Skip reserved prefixes\n      if (\n        key === '@media' ||\n        key === '@root' ||\n        key === '@parent' ||\n        key === '@own' ||\n        key.startsWith('@(')\n      ) {\n        continue;\n      }\n\n      // Check for cross-references (predefined states cannot reference each other)\n      const crossRefs = extractPredefinedStateRefs(value);\n      if (crossRefs.length > 0) {\n        warnOnce(\n          `local-cross-ref:${key}`,\n          `[Tasty] Predefined state '${key}' references another predefined state '${crossRefs[0]}'.\\n` +\n            `Predefined states cannot reference each other. Use the full definition instead.`,\n        );\n        continue;\n      }\n\n      localStates[key] = value;\n    }\n  }\n\n  _localStatesCache.set(styles as object, localStates);\n\n  return localStates;\n}\n\n/**\n * Create a state parser context from styles\n */\nexport function createStateParserContext(\n  styles?: Styles,\n  isSubElement?: boolean,\n): StateParserContext {\n  const localStates = styles ? extractLocalPredefinedStates(styles) : {};\n\n  return {\n    localPredefinedStates: localStates,\n    globalPredefinedStates: getGlobalPredefinedStates(),\n    isSubElement,\n  };\n}\n\n/**\n * Resolve a predefined state reference to its value\n * Returns the resolved value or null if not found\n */\nexport function resolvePredefinedState(\n  stateKey: string,\n  ctx: StateParserContext,\n): string | null {\n  // Check local first (higher priority)\n  if (ctx.localPredefinedStates[stateKey]) {\n    return ctx.localPredefinedStates[stateKey];\n  }\n\n  // Then check global\n  if (ctx.globalPredefinedStates[stateKey]) {\n    return ctx.globalPredefinedStates[stateKey];\n  }\n\n  // Not found - emit warning\n  warnOnce(\n    `undefined-state:${stateKey}`,\n    `[Tasty] Undefined predefined state '${stateKey}'.\\n` +\n      `Define it in configure({ states: { '${stateKey}': '...' } }) or in the component's styles.`,\n  );\n\n  return null;\n}\n\n/**\n * Normalize state key by trimming whitespace and removing trailing/leading operators\n */\nexport function normalizeStateKey(stateKey: string): {\n  key: string;\n  warnings: string[];\n} {\n  const warnings: string[] = [];\n  let key = stateKey;\n\n  // Check for whitespace-only\n  if (key.trim() === '') {\n    if (key !== '') {\n      warnings.push(\n        `[Tasty] Whitespace-only state key normalized to default state ''.`,\n      );\n    }\n    return { key: '', warnings };\n  }\n\n  // Trim whitespace\n  key = key.trim();\n\n  // Remove trailing operators\n  const trailingOpMatch = key.match(/\\s*[&|^]\\s*$/);\n  if (trailingOpMatch) {\n    const originalKey = key;\n    key = key.slice(0, -trailingOpMatch[0].length).trim();\n    warnings.push(\n      `[Tasty] State key '${originalKey}' has trailing operator. Normalized to '${key}'.`,\n    );\n  }\n\n  // Remove leading operators (except !)\n  const leadingOpMatch = key.match(/^\\s*[&|^]\\s*/);\n  if (leadingOpMatch) {\n    const originalKey = key;\n    key = key.slice(leadingOpMatch[0].length).trim();\n    warnings.push(\n      `[Tasty] State key '${originalKey}' has leading operator. Normalized to '${key}'.`,\n    );\n  }\n\n  return { key, warnings };\n}\n\n/**\n * Expand dimension shorthands in a condition string\n * w -> width, h -> height, is -> inline-size, bs -> block-size\n */\nexport function expandDimensionShorthands(condition: string): string {\n  // Replace dimension shorthands (only when they appear as standalone words)\n  let result = condition;\n\n  // w -> width (but not part of other words)\n  result = result.replace(/\\bw\\b/g, 'width');\n\n  // h -> height\n  result = result.replace(/\\bh\\b/g, 'height');\n\n  // is -> inline-size\n  result = result.replace(/\\bis\\b/g, 'inline-size');\n\n  // bs -> block-size\n  result = result.replace(/\\bbs\\b/g, 'block-size');\n\n  return result;\n}\n\n/**\n * Convert tasty units in a string (e.g., 40x -> calc(var(--gap) * 40))\n */\nexport function expandTastyUnits(value: string): string {\n  // Match number followed by 'x' unit (tasty gap unit)\n  return value.replace(/(\\d+(?:\\.\\d+)?)\\s*x\\b/g, (_, num) => {\n    return `calc(var(--gap) * ${num})`;\n  });\n}\n\n/**\n * Parse an advanced state key and return its type and components\n */\nexport function parseAdvancedState(\n  stateKey: string,\n  ctx: StateParserContext,\n): ParsedAdvancedState {\n  const raw = stateKey;\n\n  // Check for @starting (exact match)\n  if (stateKey === '@starting') {\n    return {\n      type: 'starting',\n      condition: '',\n      raw,\n    };\n  }\n\n  // Check for @media:type (e.g., @media:print)\n  if (stateKey.startsWith('@media:')) {\n    const mediaType = stateKey.slice(7); // Remove '@media:'\n    if (!['all', 'screen', 'print', 'speech'].includes(mediaType)) {\n      warnOnce(\n        `unknown-media-type:${mediaType}`,\n        `[Tasty] Unknown media type '${mediaType}'. Valid types: all, screen, print, speech.`,\n      );\n    }\n    return {\n      type: 'media',\n      condition: '',\n      mediaType,\n      raw,\n    };\n  }\n\n  // Check for @media(...) - media query with condition\n  if (stateKey.startsWith('@media(')) {\n    const endParen = findMatchingParen(stateKey, 6);\n    if (endParen === -1) {\n      warnOnce(\n        `unclosed-media:${stateKey}`,\n        `[Tasty] Unclosed media query '${stateKey}'. Missing closing parenthesis.`,\n      );\n      return { type: 'modifier', condition: stateKey, raw };\n    }\n\n    let condition = stateKey.slice(7, endParen);\n\n    // Check for empty condition\n    if (!condition.trim()) {\n      warnOnce(\n        `empty-media:${stateKey}`,\n        `[Tasty] Empty media query condition '${stateKey}'.`,\n      );\n      return { type: 'modifier', condition: stateKey, raw };\n    }\n\n    // Expand shorthands and units\n    condition = expandDimensionShorthands(condition);\n    condition = expandTastyUnits(condition);\n\n    return {\n      type: 'media',\n      condition,\n      raw,\n    };\n  }\n\n  // Check for @root(...) - root state\n  if (stateKey.startsWith('@root(')) {\n    const endParen = findMatchingParen(stateKey, 5);\n    if (endParen === -1) {\n      warnOnce(\n        `unclosed-root:${stateKey}`,\n        `[Tasty] Unclosed root state '${stateKey}'. Missing closing parenthesis.`,\n      );\n      return { type: 'modifier', condition: stateKey, raw };\n    }\n\n    const condition = stateKey.slice(6, endParen);\n\n    if (!condition.trim()) {\n      warnOnce(\n        `empty-root:${stateKey}`,\n        `[Tasty] Empty root state condition '${stateKey}'.`,\n      );\n      return { type: 'modifier', condition: stateKey, raw };\n    }\n\n    return {\n      type: 'root',\n      condition,\n      raw,\n    };\n  }\n\n  // Check for @parent(...) - parent element state\n  if (stateKey.startsWith('@parent(')) {\n    const endParen = findMatchingParen(stateKey, 7);\n    if (endParen === -1) {\n      warnOnce(\n        `unclosed-parent:${stateKey}`,\n        `[Tasty] Unclosed parent state '${stateKey}'. Missing closing parenthesis.`,\n      );\n      return { type: 'modifier', condition: stateKey, raw };\n    }\n\n    const condition = stateKey.slice(8, endParen);\n\n    if (!condition.trim()) {\n      warnOnce(\n        `empty-parent:${stateKey}`,\n        `[Tasty] Empty parent state condition '${stateKey}'.`,\n      );\n      return { type: 'modifier', condition: stateKey, raw };\n    }\n\n    return {\n      type: 'parent',\n      condition,\n      raw,\n    };\n  }\n\n  // Check for @own(...) - sub-element own state\n  if (stateKey.startsWith('@own(')) {\n    const endParen = findMatchingParen(stateKey, 4);\n    if (endParen === -1) {\n      warnOnce(\n        `unclosed-own:${stateKey}`,\n        `[Tasty] Unclosed own state '${stateKey}'. Missing closing parenthesis.`,\n      );\n      return { type: 'modifier', condition: stateKey, raw };\n    }\n\n    const condition = stateKey.slice(5, endParen);\n\n    if (!condition.trim()) {\n      warnOnce(\n        `empty-own:${stateKey}`,\n        `[Tasty] Empty own state condition '${stateKey}'.`,\n      );\n      return { type: 'modifier', condition: stateKey, raw };\n    }\n\n    // Check if used outside sub-element context\n    if (!ctx.isSubElement) {\n      warnOnce(\n        `own-outside-subelement:${stateKey}`,\n        `[Tasty] @own(${condition}) used outside sub-element context.\\n` +\n          `@own() is equivalent to '${condition}' at the root level. ` +\n          `Did you mean to use it inside a sub-element?`,\n      );\n      // Treat as regular modifier\n      return {\n        type: 'modifier',\n        condition,\n        raw,\n      };\n    }\n\n    return {\n      type: 'own',\n      condition,\n      raw,\n    };\n  }\n\n  // Check for @(...) - container query (unnamed or named)\n  if (stateKey.startsWith('@(')) {\n    const endParen = findMatchingParen(stateKey, 1);\n    if (endParen === -1) {\n      warnOnce(\n        `unclosed-container:${stateKey}`,\n        `[Tasty] Unclosed container query '${stateKey}'. Missing closing parenthesis.`,\n      );\n      return { type: 'modifier', condition: stateKey, raw };\n    }\n\n    const content = stateKey.slice(2, endParen);\n\n    if (!content.trim()) {\n      warnOnce(\n        `empty-container:${stateKey}`,\n        `[Tasty] Empty container query '${stateKey}'.`,\n      );\n      return { type: 'modifier', condition: stateKey, raw };\n    }\n\n    // Check if named container (first token is name, followed by comma)\n    // Use parentheses-aware comma search so inner commas (e.g., scroll-state(a, b)) are skipped\n    const commaIndex = findTopLevelComma(content);\n    let containerName: string | undefined;\n    let condition: string;\n\n    if (commaIndex !== -1) {\n      // Named container: @(layout, w < 600px)\n      containerName = content.slice(0, commaIndex).trim();\n      condition = content.slice(commaIndex + 1).trim();\n    } else {\n      // Unnamed container: @(w < 600px)\n      condition = content.trim();\n    }\n\n    // Check for style query shorthand (starts with $)\n    if (condition.startsWith('$')) {\n      // Style query: @(layout, $compact) or @(layout, $variant=compact)\n      const styleCondition = parseStyleQuery(condition);\n      if (!styleCondition) {\n        warnOnce(\n          `invalid-style-query:${stateKey}`,\n          `[Tasty] Invalid style query '${condition}' in container query.`,\n        );\n        return { type: 'modifier', condition: stateKey, raw };\n      }\n      condition = styleCondition;\n    } else if (/^[a-zA-Z][\\w-]*\\s*\\(/.test(condition)) {\n      // Function-like syntax: scroll-state(...), style(...), etc.\n      // Pass through verbatim — no dimension expansion needed\n    } else {\n      // Dimension query - expand shorthands and units\n      condition = expandDimensionShorthands(condition);\n      condition = expandTastyUnits(condition);\n    }\n\n    return {\n      type: 'container',\n      condition,\n      containerName,\n      raw,\n    };\n  }\n\n  // Check for predefined state reference\n  if (isPredefinedStateRef(stateKey)) {\n    const resolved = resolvePredefinedState(stateKey, ctx);\n    if (resolved) {\n      // Recursively parse the resolved value to extract the actual state type\n      // (e.g., @mobile -> @media(w < 768px) should become a media state)\n      const parsedResolved = parseAdvancedState(resolved, ctx);\n      return {\n        ...parsedResolved,\n        raw, // Keep original raw for traceability\n      };\n    }\n    // If not resolved, treat as modifier (will likely produce invalid CSS)\n    return {\n      type: 'modifier',\n      condition: stateKey,\n      raw,\n    };\n  }\n\n  // Regular modifier (boolean mod, pseudo-class, class, attribute)\n  return {\n    type: 'modifier',\n    condition: stateKey,\n    raw,\n  };\n}\n\n/**\n * Parse a style query condition (e.g., $compact, $variant=compact, $variant=\"very compact\")\n */\nfunction parseStyleQuery(condition: string): string | null {\n  // Remove $ prefix\n  const query = condition.slice(1);\n\n  // Check for comparison operators (not supported)\n  if (/[<>]/.test(query)) {\n    warnOnce(\n      `style-query-comparison:${condition}`,\n      `[Tasty] Style queries only support equality. '${condition}' is invalid. Use '${condition.split(/[<>]/)[0]}=...' instead.`,\n    );\n    return null;\n  }\n\n  // Check for equality\n  const eqIndex = query.indexOf('=');\n  if (eqIndex === -1) {\n    // Just existence check: style(--compact)\n    return `style(--${query})`;\n  }\n\n  const propName = query.slice(0, eqIndex).trim();\n  let value = query.slice(eqIndex + 1).trim();\n\n  // Handle quoted values\n  if (\n    (value.startsWith('\"') && value.endsWith('\"')) ||\n    (value.startsWith(\"'\") && value.endsWith(\"'\"))\n  ) {\n    // Keep quotes for CSS\n  } else {\n    // Add quotes if needed\n    value = `\"${value}\"`;\n  }\n\n  // Expand tasty units in value\n  value = expandTastyUnits(value);\n\n  return `style(--${propName}: ${value})`;\n}\n\n/**\n * Find the index of the first comma at parentheses depth 0.\n * Returns -1 if no top-level comma is found.\n * This prevents splitting on commas inside function calls like scroll-state(a, b).\n */\nexport function findTopLevelComma(s: string): number {\n  let depth = 0;\n\n  for (let i = 0; i < s.length; i++) {\n    if (s[i] === '(') depth++;\n    else if (s[i] === ')') depth--;\n    else if (s[i] === ',' && depth === 0) return i;\n  }\n\n  return -1;\n}\n\nfunction findMatchingParen(str: string, startIndex: number): number {\n  let depth = 1;\n  let i = startIndex + 1;\n\n  while (i < str.length && depth > 0) {\n    if (str[i] === '(') depth++;\n    else if (str[i] === ')') depth--;\n    i++;\n  }\n\n  return depth === 0 ? i - 1 : -1;\n}\n\n/**\n * Check if a state key is an advanced state (starts with @)\n */\nexport function isAdvancedState(stateKey: string): boolean {\n  return stateKey.startsWith('@') || stateKey.startsWith('!@');\n}\n\n/**\n * Detect the type of advanced state from a raw state key\n */\nexport function detectAdvancedStateType(\n  stateKey: string,\n): ParsedAdvancedState['type'] {\n  // Handle negation prefix\n  const key = stateKey.startsWith('!') ? stateKey.slice(1) : stateKey;\n\n  if (key === '@starting') return 'starting';\n  if (key.startsWith('@media')) return 'media';\n  if (key.startsWith('@root(')) return 'root';\n  if (key.startsWith('@parent(')) return 'parent';\n  if (key.startsWith('@own(')) return 'own';\n  if (key.startsWith('@(')) return 'container';\n  if (isPredefinedStateRef(key)) return 'predefined';\n  return 'modifier';\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/states/index.ts"],"sourcesContent":["/**\n * Advanced State Mapping - Predefined States Management\n *\n * This module handles global and local predefined states for the Tasty styling system.\n * See ADVANCED_STATE_MAPPING.md for full specification.\n */\n\nimport { hasStylesGenerated } from '../config';\nimport type { Styles } from '../styles/types';\nimport { isDevEnv } from '../utils/is-dev-env';\n\n/**\n * Parsed advanced state information\n */\nexport interface ParsedAdvancedState {\n  type:\n    | 'media'\n    | 'container'\n    | 'root'\n    | 'parent'\n    | 'own'\n    | 'starting'\n    | 'predefined'\n    | 'modifier';\n  condition: string; // e.g., 'width <= 920px' or 'hovered'\n  containerName?: string; // for container queries\n  raw: string; // original state key\n  mediaType?: string; // for @media:screen, @media:print, etc.\n}\n\n/**\n * Context for state parsing operations\n */\nexport interface StateParserContext {\n  localPredefinedStates: Record<string, string>;\n  globalPredefinedStates: Record<string, string>;\n  isSubElement?: boolean; // true when processing sub-element styles (for @own() validation)\n}\n\n/**\n * At-rule context for CSS generation\n */\nexport interface AtRuleContext {\n  media?: string[]; // @media conditions to wrap rule in (merged with 'and')\n  container?: { name?: string; condition: string }[]; // @container conditions (nested)\n  startingStyle?: boolean;\n  rootStates?: string[]; // :root state selectors (e.g., '[data-theme=\"dark\"]')\n  negatedRootStates?: string[]; // Negated :root state selectors for non-overlapping rules (e.g., ':not([data-theme=\"dark\"])')\n}\n\n// Built-in state names that cannot be overridden\nconst BUILTIN_STATES = new Set([\n  '@starting',\n  '@keyframes',\n  '@properties',\n  '@fontFace',\n  '@counterStyle',\n  '@supports',\n  // @inherit is a value (not a key), but reserved here to prevent\n  // users from accidentally defining a state named '@inherit'.\n  '@inherit',\n]);\n\n// Reserved prefixes that are built-in\nconst RESERVED_PREFIXES = [\n  '@media',\n  '@root',\n  '@parent',\n  '@own',\n  '@(',\n  '@starting',\n  '@keyframes',\n  '@properties',\n  '@supports',\n  '@inherit',\n];\n\n// Global predefined states storage\nlet globalPredefinedStates: Record<string, string> = {};\n\n// Warnings tracking to avoid duplicates\nconst emittedWarnings = new Set<string>();\n\nconst devMode = isDevEnv();\n\n/**\n * Emit a warning only once\n */\nfunction warnOnce(key: string, message: string): void {\n  if (devMode && !emittedWarnings.has(key)) {\n    emittedWarnings.add(key);\n    console.warn(message);\n  }\n}\n\n/**\n * Configure global predefined states\n */\nexport function setGlobalPredefinedStates(\n  states: Record<string, string>,\n): void {\n  if (hasStylesGenerated()) {\n    const newStateNames = Object.keys(states).join(', ');\n    warnOnce(\n      `dynamic-states:${newStateNames}`,\n      `[Tasty] Cannot update predefined states after styles have been generated.\\n` +\n        `The new definition(s) for ${newStateNames} will be ignored.`,\n    );\n    return;\n  }\n\n  // Validate state names\n  for (const [name, value] of Object.entries(states)) {\n    // Check for valid name format\n    if (!/^@[A-Za-z][A-Za-z0-9-]*$/.test(name)) {\n      warnOnce(\n        `invalid-state-name:${name}`,\n        `[Tasty] Invalid predefined state name '${name}'. Must start with '@' followed by a letter.`,\n      );\n      continue;\n    }\n\n    // Check for reserved names\n    if (BUILTIN_STATES.has(name)) {\n      warnOnce(\n        `reserved-state:${name}`,\n        `[Tasty] Cannot define predefined state '${name}'. This name is reserved for built-in functionality.`,\n      );\n      continue;\n    }\n\n    // Check for reserved prefixes (but only exact matches, not user-defined states like @mobile)\n    // Reserved prefixes are: @media, @root, @parent, @own, @(\n    // A user state like @mobile should NOT be blocked\n    const isReservedPrefix =\n      name === '@media' ||\n      name === '@root' ||\n      name === '@parent' ||\n      name === '@own' ||\n      name.startsWith('@(');\n\n    if (isReservedPrefix) {\n      warnOnce(\n        `reserved-prefix:${name}`,\n        `[Tasty] Cannot define predefined state '${name}'. This prefix is reserved for built-in functionality.`,\n      );\n      continue;\n    }\n\n    // Check for cross-references\n    const crossRefs = extractPredefinedStateRefs(value);\n    if (crossRefs.length > 0) {\n      warnOnce(\n        `cross-ref:${name}`,\n        `[Tasty] Predefined state '${name}' references another predefined state '${crossRefs[0]}'.\\n` +\n          `Predefined states cannot reference each other. Use the full definition instead.`,\n      );\n      continue;\n    }\n\n    // Check for duplicates\n    if (\n      globalPredefinedStates[name] &&\n      globalPredefinedStates[name] !== value\n    ) {\n      warnOnce(\n        `duplicate-state:${name}`,\n        `[Tasty] Duplicate predefined state '${name}' in configure(). The last definition will be used.`,\n      );\n    }\n\n    globalPredefinedStates[name] = value;\n  }\n}\n\n/**\n * Get global predefined states\n */\nexport function getGlobalPredefinedStates(): Record<string, string> {\n  return globalPredefinedStates;\n}\n\n/**\n * Clear global predefined states (for testing only)\n */\nexport function clearGlobalPredefinedStates(): void {\n  globalPredefinedStates = {};\n  emittedWarnings.clear();\n}\n\n/**\n * Regex to match predefined state references in a string\n * Matches @name that is NOT followed by ( or : and is a complete word\n * Uses word boundary and negative lookahead\n */\nconst PREDEFINED_STATE_PATTERN = /@([A-Za-z][A-Za-z0-9-]*)(?![A-Za-z0-9-:(])/g;\n\n/**\n * Extract predefined state references from a string\n */\nexport function extractPredefinedStateRefs(value: string): string[] {\n  const matches = value.matchAll(PREDEFINED_STATE_PATTERN);\n  const refs: string[] = [];\n\n  for (const match of matches) {\n    const stateName = '@' + match[1];\n    // Skip built-in states (@starting) and duplicates\n    // Note: @media, @root, @own are always followed by '(' so the regex\n    // negative lookahead (?![A-Za-z0-9-:(]) already excludes them\n    if (!BUILTIN_STATES.has(stateName) && !refs.includes(stateName)) {\n      refs.push(stateName);\n    }\n  }\n\n  return refs;\n}\n\n/**\n * Check if a state key is a predefined state reference\n */\nexport function isPredefinedStateRef(stateKey: string): boolean {\n  if (!stateKey.startsWith('@')) return false;\n  if (BUILTIN_STATES.has(stateKey)) return false;\n\n  // Check if it's NOT a built-in prefix\n  for (const prefix of RESERVED_PREFIXES) {\n    if (stateKey === prefix || stateKey.startsWith(prefix)) {\n      // Check if it's exactly @media, @root, @parent, @own, or starts with @( or @media(\n      if (\n        stateKey === '@media' ||\n        stateKey.startsWith('@media(') ||\n        stateKey.startsWith('@media:')\n      ) {\n        return false;\n      }\n      if (stateKey === '@root' || stateKey.startsWith('@root(')) return false;\n      if (stateKey === '@parent' || stateKey.startsWith('@parent('))\n        return false;\n      if (stateKey === '@own' || stateKey.startsWith('@own(')) return false;\n      if (stateKey.startsWith('@(')) return false;\n    }\n  }\n\n  // Must match the predefined state pattern\n  return /^@[A-Za-z][A-Za-z0-9-]*$/.test(stateKey);\n}\n\nconst _localStatesCache = new WeakMap<object, Record<string, string>>();\n\n/**\n * Extract local predefined states from a styles object\n * Local predefined states are top-level keys starting with @ that have string values\n * and are valid predefined state names (not built-in like @media, @root, etc.)\n *\n * Results are cached by object identity via WeakMap since the same styles object\n * is passed to this function multiple times per pipeline run (once per chunk\n * in renderStylesForChunk and generateChunkCacheKey).\n */\nexport function extractLocalPredefinedStates(\n  styles: Styles,\n): Record<string, string> {\n  if (!styles || typeof styles !== 'object') {\n    return {};\n  }\n\n  const cached = _localStatesCache.get(styles as object);\n  if (cached !== undefined) return cached;\n\n  const localStates: Record<string, string> = {};\n\n  for (const [key, value] of Object.entries(styles)) {\n    // Check if it's a predefined state definition (starts with @, has string value)\n    if (key.startsWith('@') && typeof value === 'string') {\n      // Validate name format - must be @[letter][letters/numbers/dashes]*\n      if (!/^@[A-Za-z][A-Za-z0-9-]*$/.test(key)) {\n        continue; // Skip invalid names silently (might be something else)\n      }\n\n      // Skip built-in states\n      if (BUILTIN_STATES.has(key)) {\n        continue;\n      }\n\n      // Skip reserved prefixes\n      if (\n        key === '@media' ||\n        key === '@root' ||\n        key === '@parent' ||\n        key === '@own' ||\n        key.startsWith('@(')\n      ) {\n        continue;\n      }\n\n      // Check for cross-references (predefined states cannot reference each other)\n      const crossRefs = extractPredefinedStateRefs(value);\n      if (crossRefs.length > 0) {\n        warnOnce(\n          `local-cross-ref:${key}`,\n          `[Tasty] Predefined state '${key}' references another predefined state '${crossRefs[0]}'.\\n` +\n            `Predefined states cannot reference each other. Use the full definition instead.`,\n        );\n        continue;\n      }\n\n      localStates[key] = value;\n    }\n  }\n\n  _localStatesCache.set(styles as object, localStates);\n\n  return localStates;\n}\n\n/**\n * Create a state parser context from styles\n */\nexport function createStateParserContext(\n  styles?: Styles,\n  isSubElement?: boolean,\n): StateParserContext {\n  const localStates = styles ? extractLocalPredefinedStates(styles) : {};\n\n  return {\n    localPredefinedStates: localStates,\n    globalPredefinedStates: getGlobalPredefinedStates(),\n    isSubElement,\n  };\n}\n\n/**\n * Resolve a predefined state reference to its value\n * Returns the resolved value or null if not found\n */\nexport function resolvePredefinedState(\n  stateKey: string,\n  ctx: StateParserContext,\n): string | null {\n  // Check local first (higher priority)\n  if (ctx.localPredefinedStates[stateKey]) {\n    return ctx.localPredefinedStates[stateKey];\n  }\n\n  // Then check global\n  if (ctx.globalPredefinedStates[stateKey]) {\n    return ctx.globalPredefinedStates[stateKey];\n  }\n\n  // Not found - emit warning\n  warnOnce(\n    `undefined-state:${stateKey}`,\n    `[Tasty] Undefined predefined state '${stateKey}'.\\n` +\n      `Define it in configure({ states: { '${stateKey}': '...' } }) or in the component's styles.`,\n  );\n\n  return null;\n}\n\n/**\n * Normalize state key by trimming whitespace and removing trailing/leading operators\n */\nexport function normalizeStateKey(stateKey: string): {\n  key: string;\n  warnings: string[];\n} {\n  const warnings: string[] = [];\n  let key = stateKey;\n\n  // Check for whitespace-only\n  if (key.trim() === '') {\n    if (key !== '') {\n      warnings.push(\n        `[Tasty] Whitespace-only state key normalized to default state ''.`,\n      );\n    }\n    return { key: '', warnings };\n  }\n\n  // Trim whitespace\n  key = key.trim();\n\n  // Remove trailing operators\n  const trailingOpMatch = key.match(/\\s*[&|^]\\s*$/);\n  if (trailingOpMatch) {\n    const originalKey = key;\n    key = key.slice(0, -trailingOpMatch[0].length).trim();\n    warnings.push(\n      `[Tasty] State key '${originalKey}' has trailing operator. Normalized to '${key}'.`,\n    );\n  }\n\n  // Remove leading operators (except !)\n  const leadingOpMatch = key.match(/^\\s*[&|^]\\s*/);\n  if (leadingOpMatch) {\n    const originalKey = key;\n    key = key.slice(leadingOpMatch[0].length).trim();\n    warnings.push(\n      `[Tasty] State key '${originalKey}' has leading operator. Normalized to '${key}'.`,\n    );\n  }\n\n  return { key, warnings };\n}\n\n/**\n * Expand dimension shorthands in a condition string\n * w -> width, h -> height, is -> inline-size, bs -> block-size\n */\nexport function expandDimensionShorthands(condition: string): string {\n  // Replace dimension shorthands (only when they appear as standalone words)\n  let result = condition;\n\n  // w -> width (but not part of other words)\n  result = result.replace(/\\bw\\b/g, 'width');\n\n  // h -> height\n  result = result.replace(/\\bh\\b/g, 'height');\n\n  // is -> inline-size\n  result = result.replace(/\\bis\\b/g, 'inline-size');\n\n  // bs -> block-size\n  result = result.replace(/\\bbs\\b/g, 'block-size');\n\n  return result;\n}\n\n/**\n * Convert tasty units in a string (e.g., 40x -> calc(var(--gap) * 40))\n */\nexport function expandTastyUnits(value: string): string {\n  // Match number followed by 'x' unit (tasty gap unit)\n  return value.replace(/(\\d+(?:\\.\\d+)?)\\s*x\\b/g, (_, num) => {\n    return `calc(var(--gap) * ${num})`;\n  });\n}\n\n/**\n * Parse an advanced state key and return its type and components\n */\nexport function parseAdvancedState(\n  stateKey: string,\n  ctx: StateParserContext,\n): ParsedAdvancedState {\n  const raw = stateKey;\n\n  // Check for @starting (exact match)\n  if (stateKey === '@starting') {\n    return {\n      type: 'starting',\n      condition: '',\n      raw,\n    };\n  }\n\n  // Check for @media:type (e.g., @media:print)\n  if (stateKey.startsWith('@media:')) {\n    const mediaType = stateKey.slice(7); // Remove '@media:'\n    if (!['all', 'screen', 'print', 'speech'].includes(mediaType)) {\n      warnOnce(\n        `unknown-media-type:${mediaType}`,\n        `[Tasty] Unknown media type '${mediaType}'. Valid types: all, screen, print, speech.`,\n      );\n    }\n    return {\n      type: 'media',\n      condition: '',\n      mediaType,\n      raw,\n    };\n  }\n\n  // Check for @media(...) - media query with condition\n  if (stateKey.startsWith('@media(')) {\n    const endParen = findMatchingParen(stateKey, 6);\n    if (endParen === -1) {\n      warnOnce(\n        `unclosed-media:${stateKey}`,\n        `[Tasty] Unclosed media query '${stateKey}'. Missing closing parenthesis.`,\n      );\n      return { type: 'modifier', condition: stateKey, raw };\n    }\n\n    let condition = stateKey.slice(7, endParen);\n\n    // Check for empty condition\n    if (!condition.trim()) {\n      warnOnce(\n        `empty-media:${stateKey}`,\n        `[Tasty] Empty media query condition '${stateKey}'.`,\n      );\n      return { type: 'modifier', condition: stateKey, raw };\n    }\n\n    // Expand shorthands and units\n    condition = expandDimensionShorthands(condition);\n    condition = expandTastyUnits(condition);\n\n    return {\n      type: 'media',\n      condition,\n      raw,\n    };\n  }\n\n  // Check for @root(...) - root state\n  if (stateKey.startsWith('@root(')) {\n    const endParen = findMatchingParen(stateKey, 5);\n    if (endParen === -1) {\n      warnOnce(\n        `unclosed-root:${stateKey}`,\n        `[Tasty] Unclosed root state '${stateKey}'. Missing closing parenthesis.`,\n      );\n      return { type: 'modifier', condition: stateKey, raw };\n    }\n\n    const condition = stateKey.slice(6, endParen);\n\n    if (!condition.trim()) {\n      warnOnce(\n        `empty-root:${stateKey}`,\n        `[Tasty] Empty root state condition '${stateKey}'.`,\n      );\n      return { type: 'modifier', condition: stateKey, raw };\n    }\n\n    return {\n      type: 'root',\n      condition,\n      raw,\n    };\n  }\n\n  // Check for @parent(...) - parent element state\n  if (stateKey.startsWith('@parent(')) {\n    const endParen = findMatchingParen(stateKey, 7);\n    if (endParen === -1) {\n      warnOnce(\n        `unclosed-parent:${stateKey}`,\n        `[Tasty] Unclosed parent state '${stateKey}'. Missing closing parenthesis.`,\n      );\n      return { type: 'modifier', condition: stateKey, raw };\n    }\n\n    const condition = stateKey.slice(8, endParen);\n\n    if (!condition.trim()) {\n      warnOnce(\n        `empty-parent:${stateKey}`,\n        `[Tasty] Empty parent state condition '${stateKey}'.`,\n      );\n      return { type: 'modifier', condition: stateKey, raw };\n    }\n\n    return {\n      type: 'parent',\n      condition,\n      raw,\n    };\n  }\n\n  // Check for @own(...) - sub-element own state\n  if (stateKey.startsWith('@own(')) {\n    const endParen = findMatchingParen(stateKey, 4);\n    if (endParen === -1) {\n      warnOnce(\n        `unclosed-own:${stateKey}`,\n        `[Tasty] Unclosed own state '${stateKey}'. Missing closing parenthesis.`,\n      );\n      return { type: 'modifier', condition: stateKey, raw };\n    }\n\n    const condition = stateKey.slice(5, endParen);\n\n    if (!condition.trim()) {\n      warnOnce(\n        `empty-own:${stateKey}`,\n        `[Tasty] Empty own state condition '${stateKey}'.`,\n      );\n      return { type: 'modifier', condition: stateKey, raw };\n    }\n\n    // Check if used outside sub-element context\n    if (!ctx.isSubElement) {\n      warnOnce(\n        `own-outside-subelement:${stateKey}`,\n        `[Tasty] @own(${condition}) used outside sub-element context.\\n` +\n          `@own() is equivalent to '${condition}' at the root level. ` +\n          `Did you mean to use it inside a sub-element?`,\n      );\n      // Treat as regular modifier\n      return {\n        type: 'modifier',\n        condition,\n        raw,\n      };\n    }\n\n    return {\n      type: 'own',\n      condition,\n      raw,\n    };\n  }\n\n  // Check for @(...) - container query (unnamed or named)\n  if (stateKey.startsWith('@(')) {\n    const endParen = findMatchingParen(stateKey, 1);\n    if (endParen === -1) {\n      warnOnce(\n        `unclosed-container:${stateKey}`,\n        `[Tasty] Unclosed container query '${stateKey}'. Missing closing parenthesis.`,\n      );\n      return { type: 'modifier', condition: stateKey, raw };\n    }\n\n    const content = stateKey.slice(2, endParen);\n\n    if (!content.trim()) {\n      warnOnce(\n        `empty-container:${stateKey}`,\n        `[Tasty] Empty container query '${stateKey}'.`,\n      );\n      return { type: 'modifier', condition: stateKey, raw };\n    }\n\n    // Check if named container (first token is name, followed by comma)\n    // Use parentheses-aware comma search so inner commas (e.g., scroll-state(a, b)) are skipped\n    const commaIndex = findTopLevelComma(content);\n    let containerName: string | undefined;\n    let condition: string;\n\n    if (commaIndex !== -1) {\n      // Named container: @(layout, w < 600px)\n      containerName = content.slice(0, commaIndex).trim();\n      condition = content.slice(commaIndex + 1).trim();\n    } else {\n      // Unnamed container: @(w < 600px)\n      condition = content.trim();\n    }\n\n    // Check for style query shorthand (starts with $)\n    if (condition.startsWith('$')) {\n      // Style query: @(layout, $compact) or @(layout, $variant=compact)\n      const styleCondition = parseStyleQuery(condition);\n      if (!styleCondition) {\n        warnOnce(\n          `invalid-style-query:${stateKey}`,\n          `[Tasty] Invalid style query '${condition}' in container query.`,\n        );\n        return { type: 'modifier', condition: stateKey, raw };\n      }\n      condition = styleCondition;\n    } else if (/^[a-zA-Z][\\w-]*\\s*\\(/.test(condition)) {\n      // Function-like syntax: scroll-state(...), style(...), etc.\n      // Pass through verbatim — no dimension expansion needed\n    } else {\n      // Dimension query - expand shorthands and units\n      condition = expandDimensionShorthands(condition);\n      condition = expandTastyUnits(condition);\n    }\n\n    return {\n      type: 'container',\n      condition,\n      containerName,\n      raw,\n    };\n  }\n\n  // Check for predefined state reference\n  if (isPredefinedStateRef(stateKey)) {\n    const resolved = resolvePredefinedState(stateKey, ctx);\n    if (resolved) {\n      // Recursively parse the resolved value to extract the actual state type\n      // (e.g., @mobile -> @media(w < 768px) should become a media state)\n      const parsedResolved = parseAdvancedState(resolved, ctx);\n      return {\n        ...parsedResolved,\n        raw, // Keep original raw for traceability\n      };\n    }\n    // If not resolved, treat as modifier (will likely produce invalid CSS)\n    return {\n      type: 'modifier',\n      condition: stateKey,\n      raw,\n    };\n  }\n\n  // Regular modifier (boolean mod, pseudo-class, class, attribute)\n  return {\n    type: 'modifier',\n    condition: stateKey,\n    raw,\n  };\n}\n\n/**\n * Parse a style query condition (e.g., $compact, $variant=compact, $variant=\"very compact\")\n */\nfunction parseStyleQuery(condition: string): string | null {\n  // Remove $ prefix\n  const query = condition.slice(1);\n\n  // Check for comparison operators (not supported)\n  if (/[<>]/.test(query)) {\n    warnOnce(\n      `style-query-comparison:${condition}`,\n      `[Tasty] Style queries only support equality. '${condition}' is invalid. Use '${condition.split(/[<>]/)[0]}=...' instead.`,\n    );\n    return null;\n  }\n\n  // Check for equality\n  const eqIndex = query.indexOf('=');\n  if (eqIndex === -1) {\n    // Just existence check: style(--compact)\n    return `style(--${query})`;\n  }\n\n  const propName = query.slice(0, eqIndex).trim();\n  let value = query.slice(eqIndex + 1).trim();\n\n  // Handle quoted values\n  if (\n    (value.startsWith('\"') && value.endsWith('\"')) ||\n    (value.startsWith(\"'\") && value.endsWith(\"'\"))\n  ) {\n    // Keep quotes for CSS\n  } else {\n    // Add quotes if needed\n    value = `\"${value}\"`;\n  }\n\n  // Expand tasty units in value\n  value = expandTastyUnits(value);\n\n  return `style(--${propName}: ${value})`;\n}\n\n/**\n * Find the index of the first comma at parentheses depth 0.\n * Returns -1 if no top-level comma is found.\n * This prevents splitting on commas inside function calls like scroll-state(a, b).\n */\nexport function findTopLevelComma(s: string): number {\n  let depth = 0;\n\n  for (let i = 0; i < s.length; i++) {\n    if (s[i] === '(') depth++;\n    else if (s[i] === ')') depth--;\n    else if (s[i] === ',' && depth === 0) return i;\n  }\n\n  return -1;\n}\n\nfunction findMatchingParen(str: string, startIndex: number): number {\n  let depth = 1;\n  let i = startIndex + 1;\n\n  while (i < str.length && depth > 0) {\n    if (str[i] === '(') depth++;\n    else if (str[i] === ')') depth--;\n    i++;\n  }\n\n  return depth === 0 ? i - 1 : -1;\n}\n\n/**\n * Check if a state key is an advanced state (starts with @)\n */\nexport function isAdvancedState(stateKey: string): boolean {\n  return stateKey.startsWith('@') || stateKey.startsWith('!@');\n}\n\n/**\n * Detect the type of advanced state from a raw state key\n */\nexport function detectAdvancedStateType(\n  stateKey: string,\n): ParsedAdvancedState['type'] {\n  // Handle negation prefix\n  const key = stateKey.startsWith('!') ? stateKey.slice(1) : stateKey;\n\n  if (key === '@starting') return 'starting';\n  if (key.startsWith('@media')) return 'media';\n  if (key.startsWith('@root(')) return 'root';\n  if (key.startsWith('@parent(')) return 'parent';\n  if (key.startsWith('@own(')) return 'own';\n  if (key.startsWith('@(')) return 'container';\n  if (isPredefinedStateRef(key)) return 'predefined';\n  return 'modifier';\n}\n"],"mappings":"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"}

package/dist/styles/border.js

@@ -26,7 +26,7 @@ function processGroup(group) {
 		borderValue: {
 			width: values[0] || "var(--border-width)",
 			style: typeMods[0] || "solid",
-			color: colors?.[0] || "var(--border-color)"
+			color: colors?.[0] || "var(--border-color, currentColor)"
 		}
 	};
 }
@@ -100,7 +100,7 @@ function borderStyle({ border }) {
 			const fallback = allDirectionsValue || {
 				width: "0",
 				style: "solid",
-				color: "var(--border-color)"
+				color: "var(--border-color, currentColor)"
 			};
 			result[`border-${dir}`] = `0 ${fallback.style} ${fallback.color}`;
 		}

package/dist/styles/border.js.map

@@ -1 +1 @@
-{"version":3,"file":"border.js","names":[],"sources":["../../src/styles/border.ts"],"sourcesContent":["import { DIRECTIONS, filterMods, parseStyle } from '../utils/styles';\n\nconst BORDER_STYLES = [\n  'none',\n  'hidden',\n  'dotted',\n  'dashed',\n  'solid',\n  'double',\n  'groove',\n  'ridge',\n  'inset',\n  'outset',\n] as const;\n\ntype Direction = (typeof DIRECTIONS)[number];\n\ninterface GroupData {\n  values: string[];\n  mods: string[];\n  colors: string[];\n}\n\ninterface BorderValue {\n  width: string;\n  style: string;\n  color: string;\n}\n\n/**\n * Process a single group and return border values for its directions.\n * @returns Object with directions as keys and border values, or null for \"all directions\"\n */\nfunction processGroup(group: GroupData): {\n  directions: Direction[];\n  borderValue: BorderValue;\n} {\n  const { values, mods, colors } = group;\n\n  const directions = filterMods(mods, DIRECTIONS) as Direction[];\n  const typeMods = filterMods(mods, BORDER_STYLES as unknown as string[]);\n\n  const width = values[0] || 'var(--border-width)';\n  const style = typeMods[0] || 'solid';\n  const color = colors?.[0] || 'var(--border-color)';\n\n  return {\n    directions,\n    borderValue: { width, style, color },\n  };\n}\n\n/**\n * Format a border value to CSS string.\n */\nfunction formatBorderValue(value: BorderValue): string {\n  return `${value.width} ${value.style} ${value.color}`;\n}\n\n/**\n * Border style handler with multi-group support.\n *\n * Single group (backward compatible):\n * - `border=\"1bw solid #red\"` - all sides\n * - `border=\"1bw solid #red top left\"` - only top and left\n *\n * Multi-group (new):\n * - `border=\"1bw #red, 2bw #blue top\"` - all sides red 1bw, then top overridden to blue 2bw\n * - `border=\"1bw, dashed top bottom, #purple left right\"` - base 1bw, dashed on top/bottom, purple on left/right\n *\n * Later groups override earlier groups for conflicting directions.\n */\nexport function borderStyle({\n  border,\n}: {\n  border?: string | number | boolean;\n}) {\n  if (!border && border !== 0) return;\n\n  if (border === true) border = '1bw';\n\n  const processed = parseStyle(String(border));\n  const groups: GroupData[] = processed.groups ?? [];\n\n  if (!groups.length) return;\n\n  // Single group - use original logic for backward compatibility\n  if (groups.length === 1) {\n    const { directions, borderValue } = processGroup({\n      values: groups[0].values ?? [],\n      mods: groups[0].mods ?? [],\n      colors: groups[0].colors ?? [],\n    });\n\n    const styleValue = formatBorderValue(borderValue);\n\n    if (!directions.length) {\n      return { border: styleValue };\n    }\n\n    const zeroValue = `0 ${borderValue.style} ${borderValue.color}`;\n\n    return DIRECTIONS.reduce(\n      (styles, dir) => {\n        if (directions.includes(dir)) {\n          styles[`border-${dir}`] = styleValue;\n        } else {\n          styles[`border-${dir}`] = zeroValue;\n        }\n        return styles;\n      },\n      {} as Record<string, string>,\n    );\n  }\n\n  // Multi-group - process groups in order, later groups override earlier\n  // Track whether any group specifies directions\n  let hasAnyDirections = false;\n\n  // Build a map of direction -> border value\n  // Start with undefined (no border set)\n  const directionMap: Record<Direction, BorderValue | null> = {\n    top: null,\n    right: null,\n    bottom: null,\n    left: null,\n  };\n\n  // Track the last \"all directions\" value for fallback\n  let allDirectionsValue: BorderValue | null = null;\n\n  // Process groups in order (first to last)\n  for (const group of groups) {\n    const { directions, borderValue } = processGroup({\n      values: group.values ?? [],\n      mods: group.mods ?? [],\n      colors: group.colors ?? [],\n    });\n\n    if (directions.length === 0) {\n      // No specific directions - applies to all\n      allDirectionsValue = borderValue;\n      // Set all directions\n      for (const dir of DIRECTIONS) {\n        directionMap[dir] = borderValue;\n      }\n    } else {\n      // Specific directions - override only those\n      hasAnyDirections = true;\n      for (const dir of directions) {\n        directionMap[dir] = borderValue;\n      }\n    }\n  }\n\n  // If no group specified any directions and we have an all-directions value,\n  // return the simple `border` shorthand\n  if (!hasAnyDirections && allDirectionsValue) {\n    return { border: formatBorderValue(allDirectionsValue) };\n  }\n\n  // Otherwise, output individual border-* properties\n  const result: Record<string, string> = {};\n\n  for (const dir of DIRECTIONS) {\n    const value = directionMap[dir];\n    if (value) {\n      result[`border-${dir}`] = formatBorderValue(value);\n    } else {\n      // No border for this direction - set to 0\n      // Use the last all-directions value for style/color consistency, or defaults\n      const fallback = allDirectionsValue || {\n        width: '0',\n        style: 'solid',\n        color: 'var(--border-color)',\n      };\n      result[`border-${dir}`] = `0 ${fallback.style} ${fallback.color}`;\n    }\n  }\n\n  return result;\n}\n\nborderStyle.__lookupStyles = ['border'];\n"],"mappings":";;;AAEA,MAAM,gBAAgB;CACpB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;;;;AAoBD,SAAS,aAAa,OAGpB;CACA,MAAM,EAAE,QAAQ,MAAM,WAAW;CAEjC,MAAM,aAAa,WAAW,MAAM,WAAW;CAC/C,MAAM,WAAW,WAAW,MAAM,cAAqC;AAMvE,QAAO;EACL;EACA,aAAa;GAAE,OANH,OAAO,MAAM;GAMH,OALV,SAAS,MAAM;GAKE,OAJjB,SAAS,MAAM;GAIS;EACrC;;;;;AAMH,SAAS,kBAAkB,OAA4B;AACrD,QAAO,GAAG,MAAM,MAAM,GAAG,MAAM,MAAM,GAAG,MAAM;;;;;;;;;;;;;;;AAgBhD,SAAgB,YAAY,EAC1B,UAGC;AACD,KAAI,CAAC,UAAU,WAAW,EAAG;AAE7B,KAAI,WAAW,KAAM,UAAS;CAG9B,MAAM,SADY,WAAW,OAAO,OAAO,CAAC,CACN,UAAU,EAAE;AAElD,KAAI,CAAC,OAAO,OAAQ;AAGpB,KAAI,OAAO,WAAW,GAAG;EACvB,MAAM,EAAE,YAAY,gBAAgB,aAAa;GAC/C,QAAQ,OAAO,GAAG,UAAU,EAAE;GAC9B,MAAM,OAAO,GAAG,QAAQ,EAAE;GAC1B,QAAQ,OAAO,GAAG,UAAU,EAAE;GAC/B,CAAC;EAEF,MAAM,aAAa,kBAAkB,YAAY;AAEjD,MAAI,CAAC,WAAW,OACd,QAAO,EAAE,QAAQ,YAAY;EAG/B,MAAM,YAAY,KAAK,YAAY,MAAM,GAAG,YAAY;AAExD,SAAO,WAAW,QACf,QAAQ,QAAQ;AACf,OAAI,WAAW,SAAS,IAAI,CAC1B,QAAO,UAAU,SAAS;OAE1B,QAAO,UAAU,SAAS;AAE5B,UAAO;KAET,EAAE,CACH;;CAKH,IAAI,mBAAmB;CAIvB,MAAM,eAAsD;EAC1D,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACP;CAGD,IAAI,qBAAyC;AAG7C,MAAK,MAAM,SAAS,QAAQ;EAC1B,MAAM,EAAE,YAAY,gBAAgB,aAAa;GAC/C,QAAQ,MAAM,UAAU,EAAE;GAC1B,MAAM,MAAM,QAAQ,EAAE;GACtB,QAAQ,MAAM,UAAU,EAAE;GAC3B,CAAC;AAEF,MAAI,WAAW,WAAW,GAAG;AAE3B,wBAAqB;AAErB,QAAK,MAAM,OAAO,WAChB,cAAa,OAAO;SAEjB;AAEL,sBAAmB;AACnB,QAAK,MAAM,OAAO,WAChB,cAAa,OAAO;;;AAO1B,KAAI,CAAC,oBAAoB,mBACvB,QAAO,EAAE,QAAQ,kBAAkB,mBAAmB,EAAE;CAI1D,MAAM,SAAiC,EAAE;AAEzC,MAAK,MAAM,OAAO,YAAY;EAC5B,MAAM,QAAQ,aAAa;AAC3B,MAAI,MACF,QAAO,UAAU,SAAS,kBAAkB,MAAM;OAC7C;GAGL,MAAM,WAAW,sBAAsB;IACrC,OAAO;IACP,OAAO;IACP,OAAO;IACR;AACD,UAAO,UAAU,SAAS,KAAK,SAAS,MAAM,GAAG,SAAS;;;AAI9D,QAAO;;AAGT,YAAY,iBAAiB,CAAC,SAAS"}
+{"version":3,"file":"border.js","names":[],"sources":["../../src/styles/border.ts"],"sourcesContent":["import { DIRECTIONS, filterMods, parseStyle } from '../utils/styles';\n\nconst BORDER_STYLES = [\n  'none',\n  'hidden',\n  'dotted',\n  'dashed',\n  'solid',\n  'double',\n  'groove',\n  'ridge',\n  'inset',\n  'outset',\n] as const;\n\ntype Direction = (typeof DIRECTIONS)[number];\n\ninterface GroupData {\n  values: string[];\n  mods: string[];\n  colors: string[];\n}\n\ninterface BorderValue {\n  width: string;\n  style: string;\n  color: string;\n}\n\n/**\n * Process a single group and return border values for its directions.\n * @returns Object with directions as keys and border values, or null for \"all directions\"\n */\nfunction processGroup(group: GroupData): {\n  directions: Direction[];\n  borderValue: BorderValue;\n} {\n  const { values, mods, colors } = group;\n\n  const directions = filterMods(mods, DIRECTIONS) as Direction[];\n  const typeMods = filterMods(mods, BORDER_STYLES as unknown as string[]);\n\n  const width = values[0] || 'var(--border-width)';\n  const style = typeMods[0] || 'solid';\n  const color = colors?.[0] || 'var(--border-color, currentColor)';\n\n  return {\n    directions,\n    borderValue: { width, style, color },\n  };\n}\n\n/**\n * Format a border value to CSS string.\n */\nfunction formatBorderValue(value: BorderValue): string {\n  return `${value.width} ${value.style} ${value.color}`;\n}\n\n/**\n * Border style handler with multi-group support.\n *\n * Single group (backward compatible):\n * - `border=\"1bw solid #red\"` - all sides\n * - `border=\"1bw solid #red top left\"` - only top and left\n *\n * Multi-group (new):\n * - `border=\"1bw #red, 2bw #blue top\"` - all sides red 1bw, then top overridden to blue 2bw\n * - `border=\"1bw, dashed top bottom, #purple left right\"` - base 1bw, dashed on top/bottom, purple on left/right\n *\n * Later groups override earlier groups for conflicting directions.\n */\nexport function borderStyle({\n  border,\n}: {\n  border?: string | number | boolean;\n}) {\n  if (!border && border !== 0) return;\n\n  if (border === true) border = '1bw';\n\n  const processed = parseStyle(String(border));\n  const groups: GroupData[] = processed.groups ?? [];\n\n  if (!groups.length) return;\n\n  // Single group - use original logic for backward compatibility\n  if (groups.length === 1) {\n    const { directions, borderValue } = processGroup({\n      values: groups[0].values ?? [],\n      mods: groups[0].mods ?? [],\n      colors: groups[0].colors ?? [],\n    });\n\n    const styleValue = formatBorderValue(borderValue);\n\n    if (!directions.length) {\n      return { border: styleValue };\n    }\n\n    const zeroValue = `0 ${borderValue.style} ${borderValue.color}`;\n\n    return DIRECTIONS.reduce(\n      (styles, dir) => {\n        if (directions.includes(dir)) {\n          styles[`border-${dir}`] = styleValue;\n        } else {\n          styles[`border-${dir}`] = zeroValue;\n        }\n        return styles;\n      },\n      {} as Record<string, string>,\n    );\n  }\n\n  // Multi-group - process groups in order, later groups override earlier\n  // Track whether any group specifies directions\n  let hasAnyDirections = false;\n\n  // Build a map of direction -> border value\n  // Start with undefined (no border set)\n  const directionMap: Record<Direction, BorderValue | null> = {\n    top: null,\n    right: null,\n    bottom: null,\n    left: null,\n  };\n\n  // Track the last \"all directions\" value for fallback\n  let allDirectionsValue: BorderValue | null = null;\n\n  // Process groups in order (first to last)\n  for (const group of groups) {\n    const { directions, borderValue } = processGroup({\n      values: group.values ?? [],\n      mods: group.mods ?? [],\n      colors: group.colors ?? [],\n    });\n\n    if (directions.length === 0) {\n      // No specific directions - applies to all\n      allDirectionsValue = borderValue;\n      // Set all directions\n      for (const dir of DIRECTIONS) {\n        directionMap[dir] = borderValue;\n      }\n    } else {\n      // Specific directions - override only those\n      hasAnyDirections = true;\n      for (const dir of directions) {\n        directionMap[dir] = borderValue;\n      }\n    }\n  }\n\n  // If no group specified any directions and we have an all-directions value,\n  // return the simple `border` shorthand\n  if (!hasAnyDirections && allDirectionsValue) {\n    return { border: formatBorderValue(allDirectionsValue) };\n  }\n\n  // Otherwise, output individual border-* properties\n  const result: Record<string, string> = {};\n\n  for (const dir of DIRECTIONS) {\n    const value = directionMap[dir];\n    if (value) {\n      result[`border-${dir}`] = formatBorderValue(value);\n    } else {\n      // No border for this direction - set to 0\n      // Use the last all-directions value for style/color consistency, or defaults\n      const fallback = allDirectionsValue || {\n        width: '0',\n        style: 'solid',\n        color: 'var(--border-color, currentColor)',\n      };\n      result[`border-${dir}`] = `0 ${fallback.style} ${fallback.color}`;\n    }\n  }\n\n  return result;\n}\n\nborderStyle.__lookupStyles = ['border'];\n"],"mappings":";;;AAEA,MAAM,gBAAgB;CACpB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;;;;AAoBD,SAAS,aAAa,OAGpB;CACA,MAAM,EAAE,QAAQ,MAAM,WAAW;CAEjC,MAAM,aAAa,WAAW,MAAM,WAAW;CAC/C,MAAM,WAAW,WAAW,MAAM,cAAqC;AAMvE,QAAO;EACL;EACA,aAAa;GAAE,OANH,OAAO,MAAM;GAMH,OALV,SAAS,MAAM;GAKE,OAJjB,SAAS,MAAM;GAIS;EACrC;;;;;AAMH,SAAS,kBAAkB,OAA4B;AACrD,QAAO,GAAG,MAAM,MAAM,GAAG,MAAM,MAAM,GAAG,MAAM;;;;;;;;;;;;;;;AAgBhD,SAAgB,YAAY,EAC1B,UAGC;AACD,KAAI,CAAC,UAAU,WAAW,EAAG;AAE7B,KAAI,WAAW,KAAM,UAAS;CAG9B,MAAM,SADY,WAAW,OAAO,OAAO,CAAC,CACN,UAAU,EAAE;AAElD,KAAI,CAAC,OAAO,OAAQ;AAGpB,KAAI,OAAO,WAAW,GAAG;EACvB,MAAM,EAAE,YAAY,gBAAgB,aAAa;GAC/C,QAAQ,OAAO,GAAG,UAAU,EAAE;GAC9B,MAAM,OAAO,GAAG,QAAQ,EAAE;GAC1B,QAAQ,OAAO,GAAG,UAAU,EAAE;GAC/B,CAAC;EAEF,MAAM,aAAa,kBAAkB,YAAY;AAEjD,MAAI,CAAC,WAAW,OACd,QAAO,EAAE,QAAQ,YAAY;EAG/B,MAAM,YAAY,KAAK,YAAY,MAAM,GAAG,YAAY;AAExD,SAAO,WAAW,QACf,QAAQ,QAAQ;AACf,OAAI,WAAW,SAAS,IAAI,CAC1B,QAAO,UAAU,SAAS;OAE1B,QAAO,UAAU,SAAS;AAE5B,UAAO;KAET,EAAE,CACH;;CAKH,IAAI,mBAAmB;CAIvB,MAAM,eAAsD;EAC1D,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACP;CAGD,IAAI,qBAAyC;AAG7C,MAAK,MAAM,SAAS,QAAQ;EAC1B,MAAM,EAAE,YAAY,gBAAgB,aAAa;GAC/C,QAAQ,MAAM,UAAU,EAAE;GAC1B,MAAM,MAAM,QAAQ,EAAE;GACtB,QAAQ,MAAM,UAAU,EAAE;GAC3B,CAAC;AAEF,MAAI,WAAW,WAAW,GAAG;AAE3B,wBAAqB;AAErB,QAAK,MAAM,OAAO,WAChB,cAAa,OAAO;SAEjB;AAEL,sBAAmB;AACnB,QAAK,MAAM,OAAO,WAChB,cAAa,OAAO;;;AAO1B,KAAI,CAAC,oBAAoB,mBACvB,QAAO,EAAE,QAAQ,kBAAkB,mBAAmB,EAAE;CAI1D,MAAM,SAAiC,EAAE;AAEzC,MAAK,MAAM,OAAO,YAAY;EAC5B,MAAM,QAAQ,aAAa;AAC3B,MAAI,MACF,QAAO,UAAU,SAAS,kBAAkB,MAAM;OAC7C;GAGL,MAAM,WAAW,sBAAsB;IACrC,OAAO;IACP,OAAO;IACP,OAAO;IACR;AACD,UAAO,UAAU,SAAS,KAAK,SAAS,MAAM,GAAG,SAAS;;;AAI9D,QAAO;;AAGT,YAAY,iBAAiB,CAAC,SAAS"}

package/dist/styles/preset.js

@@ -10,42 +10,31 @@ function toCSS(value, isNumeric) {
 	if (typeof value === "number") return isNumeric ? `${value}px` : String(value);
 	return parseStyle(String(value)).groups[0]?.values[0] || String(value);
 }
-function setCSSValue(styles, styleName, presetName, isPropOnly = false) {
-	styles[`--${styleName}`] = (() => {
+function setCSSValue(styles, styleName, presetName, { varOnly, cssOnly } = {}) {
+	const value = (() => {
 		if (presetName === "inherit") return "inherit";
-		const defaultValue = `var(--default-${styleName}${styleName === "font-family" ? ", var(--font, NonexistentFontName)" : ""})`;
-		const fontSuffix = styleName === "font-family" ? ", var(--font, sans-serif)" : "";
+		const defaultValue = `var(--default-${styleName}${styleName === "font-family" ? ", var(--font-sans, var(--font-sans-fallback))" : ""})`;
+		const fontSuffix = styleName === "font-family" ? ", var(--font-sans, var(--font-sans-fallback))" : "";
 		if (presetName === "default") return `${defaultValue}${fontSuffix}`;
 		else return `var(--${presetName}-${styleName}, ${defaultValue})${fontSuffix}`;
 	})();
-	if (!isPropOnly) styles[styleName] = styles[`--${styleName}`];
+	if (!cssOnly) styles[`--${styleName}`] = value;
+	if (!varOnly) styles[styleName] = value;
 }
 /**
 * Resolve font/fontFamily value to CSS font-family string.
 *
-* - `font="monospace"` → var(--monospace-font)
-* - `font={true}` → var(--font)
-* - `font="CustomFont"` → CustomFont, var(--font)
+* - `font="monospace"` → var(--font-mono, var(--font-mono-fallback))
+* - `font={true}` → var(--font-sans, var(--font-sans-fallback))
+* - `font="CustomFont"` → CustomFont, var(--font-sans, var(--font-sans-fallback))
 * - `fontFamily="Arial"` → Arial (direct, no fallback)
 */
 function resolveFontFamily(font, fontFamily) {
-	if (fontFamily) return {
-		value: fontFamily,
-		setVar: false
-	};
+	if (fontFamily) return fontFamily;
 	if (font == null || font === false) return null;
-	if (font === "monospace") return {
-		value: "var(--monospace-font)",
-		setVar: true
-	};
-	if (font === true) return {
-		value: "var(--font)",
-		setVar: true
-	};
-	return {
-		value: `${font}, var(--font)`,
-		setVar: true
-	};
+	if (font === "monospace") return "var(--font-mono, var(--font-mono-fallback))";
+	if (font === true) return "var(--font-sans, var(--font-sans-fallback))";
+	return `${font}, var(--font-sans, var(--font-sans-fallback))`;
 }
 /**
 * Handles typography preset and individual font properties.
@@ -72,22 +61,22 @@ function presetStyle({ preset, fontSize, lineHeight, textTransform, letterSpacin
 		const isTight = mods.includes("tight");
 		mods = mods.filter((mod) => mod !== "strong" && mod !== "bold" && mod !== "italic" && mod !== "icon" && mod !== "tight");
 		const name = mods[0] || "inherit";
-		if (fontSize == null) setCSSValue(styles, "font-size", name);
+		if (fontSize == null) setCSSValue(styles, "font-size", name, { cssOnly: true });
 		if (lineHeight == null) setCSSValue(styles, "line-height", name);
-		if (letterSpacing == null) setCSSValue(styles, "letter-spacing", name);
-		if (fontWeight == null) setCSSValue(styles, "font-weight", name);
+		if (letterSpacing == null) setCSSValue(styles, "letter-spacing", name, { cssOnly: true });
+		if (fontWeight == null) setCSSValue(styles, "font-weight", name, { cssOnly: true });
 		if (fontStyle == null) setCSSValue(styles, "font-style", name);
-		if (textTransform == null) setCSSValue(styles, "text-transform", name);
-		if (fontFamily == null && font == null) setCSSValue(styles, "font-family", name);
-		setCSSValue(styles, "bold-font-weight", name, true);
-		setCSSValue(styles, "icon-size", name, true);
+		if (textTransform == null) setCSSValue(styles, "text-transform", name, { cssOnly: true });
+		if (fontFamily == null && font == null) setCSSValue(styles, "font-family", name, { cssOnly: true });
+		setCSSValue(styles, "bold-font-weight", name, { varOnly: true });
+		setCSSValue(styles, "icon-size", name, { varOnly: true });
 		if (isStrong) styles["font-weight"] = "var(--bold-font-weight)";
 		if (isItalic) styles["font-style"] = "italic";
 		if (isIcon) {
 			styles["font-size"] = "var(--icon-size)";
 			styles["line-height"] = "var(--icon-size)";
 		}
-		if (isTight) styles["line-height"] = "var(--font-size)";
+		if (isTight) styles["line-height"] = "1em";
 	}
 	const fontSizeVal = toCSS(fontSize, true);
 	if (fontSizeVal) styles["font-size"] = fontSizeVal;
@@ -101,11 +90,8 @@ function presetStyle({ preset, fontSize, lineHeight, textTransform, letterSpacin
 	else if (fontStyle !== "inherit") styles["font-style"] = fontStyle ? "italic" : "normal";
 	else styles["font-style"] = "inherit";
 	if (textTransform) styles["text-transform"] = textTransform;
-	const fontResult = resolveFontFamily(font, fontFamily);
-	if (fontResult) {
-		styles["font-family"] = fontResult.value;
-		if (fontResult.setVar) styles["--font-family"] = fontResult.value;
-	}
+	const fontFamily_ = resolveFontFamily(font, fontFamily);
+	if (fontFamily_) styles["font-family"] = fontFamily_;
 	if (Object.keys(styles).length === 0) return;
 	return styles;
 }

package/dist/styles/preset.js.map

@@ -1 +1 @@
-{"version":3,"file":"preset.js","names":[],"sources":["../../src/styles/preset.ts"],"sourcesContent":["import { makeEmptyDetails } from '../parser/types';\nimport { parseStyle } from '../utils/styles';\n\nimport type { Styles } from './types';\n\n/**\n * Convert a value to CSS, handling numbers as pixels for numeric properties\n */\nfunction toCSS(\n  value: string | number | undefined,\n  isNumeric: boolean,\n): string | null {\n  if (value == null) return null;\n  if (typeof value === 'number') {\n    return isNumeric ? `${value}px` : String(value);\n  }\n  // Parse through style parser to handle custom units like 1x, 2r, etc.\n  const processed = parseStyle(String(value));\n  return processed.groups[0]?.values[0] || String(value);\n}\n\nfunction setCSSValue(\n  styles: Styles,\n  styleName: string,\n  presetName: string,\n  isPropOnly = false,\n) {\n  styles[`--${styleName}`] = (() => {\n    if (presetName === 'inherit') {\n      return 'inherit';\n    }\n\n    const defaultValue = `var(--default-${styleName}${\n      styleName === 'font-family' ? ', var(--font, NonexistentFontName)' : ''\n    })`;\n    const fontSuffix =\n      styleName === 'font-family' ? ', var(--font, sans-serif)' : '';\n\n    if (presetName === 'default') {\n      return `${defaultValue}${fontSuffix}`;\n    } else {\n      return `var(--${presetName}-${styleName}, ${defaultValue})${fontSuffix}`;\n    }\n  })();\n\n  if (!isPropOnly) {\n    styles[styleName] = styles[`--${styleName}`];\n  }\n}\n\ninterface PresetStyleProps {\n  preset?: string | boolean;\n  fontSize?: string | number;\n  lineHeight?: string | number;\n  textTransform?: string;\n  letterSpacing?: string | number;\n  fontWeight?: string | number;\n  fontStyle?: string | boolean;\n  fontFamily?: string;\n  /** Alias for fontFamily with special handling for 'monospace' and boolean */\n  font?: string | boolean;\n}\n\n/**\n * Resolve font/fontFamily value to CSS font-family string.\n *\n * - `font=\"monospace\"` → var(--monospace-font)\n * - `font={true}` → var(--font)\n * - `font=\"CustomFont\"` → CustomFont, var(--font)\n * - `fontFamily=\"Arial\"` → Arial (direct, no fallback)\n */\nfunction resolveFontFamily(\n  font: string | boolean | undefined,\n  fontFamily: string | undefined,\n): { value: string; setVar: boolean } | null {\n  // fontFamily takes precedence as a direct value\n  if (fontFamily) {\n    return { value: fontFamily, setVar: false };\n  }\n\n  if (font == null || font === false) {\n    return null;\n  }\n\n  if (font === 'monospace') {\n    return { value: 'var(--monospace-font)', setVar: true };\n  }\n\n  if (font === true) {\n    return { value: 'var(--font)', setVar: true };\n  }\n\n  return { value: `${font}, var(--font)`, setVar: true };\n}\n\n/**\n * Handles typography preset and individual font properties.\n *\n * When `preset` is defined, it sets up CSS custom properties for typography.\n * Individual font props can be used with or without `preset`:\n * - With `preset`: overrides the preset value for that property\n * - Without `preset`: outputs the CSS directly\n *\n * Number values are converted to pixels for fontSize, lineHeight, letterSpacing.\n * fontWeight accepts numbers directly (e.g., 400, 700).\n *\n * font vs fontFamily:\n * - `font` is the recommended prop with special handling (monospace, boolean, fallback)\n * - `fontFamily` is a direct value without special handling\n */\nexport function presetStyle({\n  preset,\n  fontSize,\n  lineHeight,\n  textTransform,\n  letterSpacing,\n  fontWeight,\n  fontStyle,\n  fontFamily,\n  font,\n}: PresetStyleProps) {\n  const styles: Styles = {};\n  const hasPreset = preset != null && preset !== false;\n\n  // Handle preset if defined\n  if (hasPreset) {\n    const presetValue = preset === true ? '' : String(preset);\n\n    const processed = parseStyle(presetValue);\n    let { mods } = processed.groups[0] ?? makeEmptyDetails();\n\n    const isStrong = mods.includes('strong');\n    const isItalic = mods.includes('italic');\n    const isIcon = mods.includes('icon');\n    const isTight = mods.includes('tight');\n\n    mods = mods.filter(\n      (mod) =>\n        mod !== 'strong' &&\n        mod !== 'bold' &&\n        mod !== 'italic' &&\n        mod !== 'icon' &&\n        mod !== 'tight',\n    );\n\n    const name = mods[0] || 'inherit';\n\n    // Set preset values for properties not explicitly overridden\n    if (fontSize == null) {\n      setCSSValue(styles, 'font-size', name);\n    }\n    if (lineHeight == null) {\n      setCSSValue(styles, 'line-height', name);\n    }\n    if (letterSpacing == null) {\n      setCSSValue(styles, 'letter-spacing', name);\n    }\n    if (fontWeight == null) {\n      setCSSValue(styles, 'font-weight', name);\n    }\n    if (fontStyle == null) {\n      setCSSValue(styles, 'font-style', name);\n    }\n    if (textTransform == null) {\n      setCSSValue(styles, 'text-transform', name);\n    }\n    if (fontFamily == null && font == null) {\n      setCSSValue(styles, 'font-family', name);\n    }\n\n    setCSSValue(styles, 'bold-font-weight', name, true);\n    setCSSValue(styles, 'icon-size', name, true);\n\n    if (isStrong) {\n      styles['font-weight'] = 'var(--bold-font-weight)';\n    }\n    if (isItalic) {\n      styles['font-style'] = 'italic';\n    }\n    if (isIcon) {\n      styles['font-size'] = 'var(--icon-size)';\n      styles['line-height'] = 'var(--icon-size)';\n    }\n    if (isTight) {\n      styles['line-height'] = 'var(--font-size)';\n    }\n  }\n\n  // Handle individual font properties (work with or without preset)\n  const fontSizeVal = toCSS(fontSize, true);\n  if (fontSizeVal) {\n    styles['font-size'] = fontSizeVal;\n  }\n\n  const lineHeightVal = toCSS(lineHeight, true);\n  if (lineHeightVal) {\n    styles['line-height'] = lineHeightVal;\n  }\n\n  const letterSpacingVal = toCSS(letterSpacing, true);\n  if (letterSpacingVal) {\n    styles['letter-spacing'] = letterSpacingVal;\n  }\n\n  // fontWeight: numbers should NOT get 'px' suffix\n  const fontWeightVal = toCSS(fontWeight, false);\n  if (fontWeightVal) {\n    styles['font-weight'] = fontWeightVal;\n  }\n\n  // fontStyle: handle boolean (true → italic) and string values\n  if (fontStyle != null) {\n    if (fontStyle === true) {\n      styles['font-style'] = 'italic';\n    } else if (fontStyle !== 'inherit') {\n      styles['font-style'] = fontStyle ? 'italic' : 'normal';\n    } else {\n      styles['font-style'] = 'inherit';\n    }\n  }\n\n  if (textTransform) {\n    styles['text-transform'] = textTransform;\n  }\n\n  // Handle font/fontFamily (font has special handling, fontFamily is direct)\n  const fontResult = resolveFontFamily(font, fontFamily);\n  if (fontResult) {\n    styles['font-family'] = fontResult.value;\n    if (fontResult.setVar) {\n      styles['--font-family'] = fontResult.value;\n    }\n  }\n\n  // Return undefined if no styles to apply\n  if (Object.keys(styles).length === 0) {\n    return;\n  }\n\n  return styles;\n}\n\npresetStyle.__lookupStyles = [\n  'preset',\n  'fontSize',\n  'lineHeight',\n  'letterSpacing',\n  'textTransform',\n  'fontWeight',\n  'fontStyle',\n  'fontFamily',\n  'font',\n];\n"],"mappings":"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"}
+{"version":3,"file":"preset.js","names":[],"sources":["../../src/styles/preset.ts"],"sourcesContent":["import { makeEmptyDetails } from '../parser/types';\nimport { parseStyle } from '../utils/styles';\n\nimport type { Styles } from './types';\n\n/**\n * Convert a value to CSS, handling numbers as pixels for numeric properties\n */\nfunction toCSS(\n  value: string | number | undefined,\n  isNumeric: boolean,\n): string | null {\n  if (value == null) return null;\n  if (typeof value === 'number') {\n    return isNumeric ? `${value}px` : String(value);\n  }\n  // Parse through style parser to handle custom units like 1x, 2r, etc.\n  const processed = parseStyle(String(value));\n  return processed.groups[0]?.values[0] || String(value);\n}\n\nfunction setCSSValue(\n  styles: Styles,\n  styleName: string,\n  presetName: string,\n  { varOnly, cssOnly }: { varOnly?: boolean; cssOnly?: boolean } = {},\n) {\n  const value = (() => {\n    if (presetName === 'inherit') {\n      return 'inherit';\n    }\n\n    const defaultValue = `var(--default-${styleName}${\n      styleName === 'font-family'\n        ? ', var(--font-sans, var(--font-sans-fallback))'\n        : ''\n    })`;\n    const fontSuffix =\n      styleName === 'font-family'\n        ? ', var(--font-sans, var(--font-sans-fallback))'\n        : '';\n\n    if (presetName === 'default') {\n      return `${defaultValue}${fontSuffix}`;\n    } else {\n      return `var(--${presetName}-${styleName}, ${defaultValue})${fontSuffix}`;\n    }\n  })();\n\n  if (!cssOnly) {\n    styles[`--${styleName}`] = value;\n  }\n\n  if (!varOnly) {\n    styles[styleName] = value;\n  }\n}\n\ninterface PresetStyleProps {\n  preset?: string | boolean;\n  fontSize?: string | number;\n  lineHeight?: string | number;\n  textTransform?: string;\n  letterSpacing?: string | number;\n  fontWeight?: string | number;\n  fontStyle?: string | boolean;\n  fontFamily?: string;\n  /** Alias for fontFamily with special handling for 'monospace' and boolean */\n  font?: string | boolean;\n}\n\n/**\n * Resolve font/fontFamily value to CSS font-family string.\n *\n * - `font=\"monospace\"` → var(--font-mono, var(--font-mono-fallback))\n * - `font={true}` → var(--font-sans, var(--font-sans-fallback))\n * - `font=\"CustomFont\"` → CustomFont, var(--font-sans, var(--font-sans-fallback))\n * - `fontFamily=\"Arial\"` → Arial (direct, no fallback)\n */\nfunction resolveFontFamily(\n  font: string | boolean | undefined,\n  fontFamily: string | undefined,\n): string | null {\n  // fontFamily takes precedence as a direct value\n  if (fontFamily) {\n    return fontFamily;\n  }\n\n  if (font == null || font === false) {\n    return null;\n  }\n\n  if (font === 'monospace') {\n    return 'var(--font-mono, var(--font-mono-fallback))';\n  }\n\n  if (font === true) {\n    return 'var(--font-sans, var(--font-sans-fallback))';\n  }\n\n  return `${font}, var(--font-sans, var(--font-sans-fallback))`;\n}\n\n/**\n * Handles typography preset and individual font properties.\n *\n * When `preset` is defined, it sets up CSS custom properties for typography.\n * Individual font props can be used with or without `preset`:\n * - With `preset`: overrides the preset value for that property\n * - Without `preset`: outputs the CSS directly\n *\n * Number values are converted to pixels for fontSize, lineHeight, letterSpacing.\n * fontWeight accepts numbers directly (e.g., 400, 700).\n *\n * font vs fontFamily:\n * - `font` is the recommended prop with special handling (monospace, boolean, fallback)\n * - `fontFamily` is a direct value without special handling\n */\nexport function presetStyle({\n  preset,\n  fontSize,\n  lineHeight,\n  textTransform,\n  letterSpacing,\n  fontWeight,\n  fontStyle,\n  fontFamily,\n  font,\n}: PresetStyleProps) {\n  const styles: Styles = {};\n  const hasPreset = preset != null && preset !== false;\n\n  // Handle preset if defined\n  if (hasPreset) {\n    const presetValue = preset === true ? '' : String(preset);\n\n    const processed = parseStyle(presetValue);\n    let { mods } = processed.groups[0] ?? makeEmptyDetails();\n\n    const isStrong = mods.includes('strong');\n    const isItalic = mods.includes('italic');\n    const isIcon = mods.includes('icon');\n    const isTight = mods.includes('tight');\n\n    mods = mods.filter(\n      (mod) =>\n        mod !== 'strong' &&\n        mod !== 'bold' &&\n        mod !== 'italic' &&\n        mod !== 'icon' &&\n        mod !== 'tight',\n    );\n\n    const name = mods[0] || 'inherit';\n\n    // Set preset values for properties not explicitly overridden\n    if (fontSize == null) {\n      setCSSValue(styles, 'font-size', name, { cssOnly: true });\n    }\n    if (lineHeight == null) {\n      setCSSValue(styles, 'line-height', name);\n    }\n    if (letterSpacing == null) {\n      setCSSValue(styles, 'letter-spacing', name, { cssOnly: true });\n    }\n    if (fontWeight == null) {\n      setCSSValue(styles, 'font-weight', name, { cssOnly: true });\n    }\n    if (fontStyle == null) {\n      setCSSValue(styles, 'font-style', name);\n    }\n    if (textTransform == null) {\n      setCSSValue(styles, 'text-transform', name, { cssOnly: true });\n    }\n    if (fontFamily == null && font == null) {\n      setCSSValue(styles, 'font-family', name, { cssOnly: true });\n    }\n\n    setCSSValue(styles, 'bold-font-weight', name, { varOnly: true });\n    setCSSValue(styles, 'icon-size', name, { varOnly: true });\n\n    if (isStrong) {\n      styles['font-weight'] = 'var(--bold-font-weight)';\n    }\n    if (isItalic) {\n      styles['font-style'] = 'italic';\n    }\n    if (isIcon) {\n      styles['font-size'] = 'var(--icon-size)';\n      styles['line-height'] = 'var(--icon-size)';\n    }\n    if (isTight) {\n      styles['line-height'] = '1em';\n    }\n  }\n\n  // Handle individual font properties (work with or without preset)\n  const fontSizeVal = toCSS(fontSize, true);\n  if (fontSizeVal) {\n    styles['font-size'] = fontSizeVal;\n  }\n\n  const lineHeightVal = toCSS(lineHeight, true);\n  if (lineHeightVal) {\n    styles['line-height'] = lineHeightVal;\n  }\n\n  const letterSpacingVal = toCSS(letterSpacing, true);\n  if (letterSpacingVal) {\n    styles['letter-spacing'] = letterSpacingVal;\n  }\n\n  // fontWeight: numbers should NOT get 'px' suffix\n  const fontWeightVal = toCSS(fontWeight, false);\n  if (fontWeightVal) {\n    styles['font-weight'] = fontWeightVal;\n  }\n\n  // fontStyle: handle boolean (true → italic) and string values\n  if (fontStyle != null) {\n    if (fontStyle === true) {\n      styles['font-style'] = 'italic';\n    } else if (fontStyle !== 'inherit') {\n      styles['font-style'] = fontStyle ? 'italic' : 'normal';\n    } else {\n      styles['font-style'] = 'inherit';\n    }\n  }\n\n  if (textTransform) {\n    styles['text-transform'] = textTransform;\n  }\n\n  // Handle font/fontFamily (font has special handling, fontFamily is direct)\n  const fontFamily_ = resolveFontFamily(font, fontFamily);\n  if (fontFamily_) {\n    styles['font-family'] = fontFamily_;\n  }\n\n  // Return undefined if no styles to apply\n  if (Object.keys(styles).length === 0) {\n    return;\n  }\n\n  return styles;\n}\n\npresetStyle.__lookupStyles = [\n  'preset',\n  'fontSize',\n  'lineHeight',\n  'letterSpacing',\n  'textTransform',\n  'fontWeight',\n  'fontStyle',\n  'fontFamily',\n  'font',\n];\n"],"mappings":"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"}

package/dist/styles/types.d.ts

@@ -1,4 +1,4 @@
-import { KeyframesSteps, PropertyDefinition } from "../injector/types.js";
+import { CounterStyleDescriptors, FontFaceInput, KeyframesSteps, PropertyDefinition } from "../injector/types.js";
 import { CSSProperties } from "../utils/css-types.js";
 import { StyleValue, StyleValueStateMap } from "../utils/styles.js";
 
@@ -450,6 +450,24 @@ interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font'
    * - `'@properties': { '#theme': { initialValue: 'purple' } }` // syntax: '<color>' is auto-set
    */
   '@properties'?: Record<string, PropertyDefinition>;
+  /**
+   * Local @font-face definitions for this component.
+   * Keys are font-family names, values are descriptors or arrays of descriptors
+   * (for multiple weights/styles of the same family).
+   *
+   * Examples:
+   * - `'@fontFace': { Icons: { src: 'url("/fonts/icons.woff2") format("woff2")', fontDisplay: 'block' } }`
+   * - `'@fontFace': { 'Brand Sans': [{ src: '...', fontWeight: 400 }, { src: '...', fontWeight: 700 }] }`
+   */
+  '@fontFace'?: Record<string, FontFaceInput>;
+  /**
+   * Local @counter-style definitions for this component.
+   * Keys are counter-style names, values are descriptor objects.
+   *
+   * Examples:
+   * - `'@counterStyle': { thumbs: { system: 'cyclic', symbols: '"👍"', suffix: '" "' } }`
+   */
+  '@counterStyle'?: Record<string, CounterStyleDescriptors>;
   /**
    * Apply one or more predefined style recipes by name.
    * Recipes are defined globally via `configure({ recipes: { ... } })`.
@@ -470,7 +488,7 @@ type SuffixForSelector = '&' | '.' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | '
 type Selector = `${SuffixForSelector}${string}`;
 type NotSelector = Exclude<string, Selector | keyof StylesInterface>;
 /** Special style keys that should not be wrapped in StyleValue/StyleValueStateMap */
-type SpecialStyleKeys = '@keyframes' | '@properties' | 'recipe';
+type SpecialStyleKeys = '@keyframes' | '@properties' | '@fontFace' | '@counterStyle' | 'recipe';
 type StylesWithoutSelectors = { [key in keyof StylesInterface as key extends SpecialStyleKeys ? never : key]?: StyleValue<StylesInterface[key]> | StyleValueStateMap<StylesInterface[key]> };
 /**
  * Index signature for recipe-specific arbitrary keys.
@@ -488,16 +506,20 @@ type RecipeIndexSignature = Record<string, StyleValue<string | number | boolean
 type RecipeStyles = StylesWithoutSelectors & RecipeIndexSignature & {
   '@keyframes'?: StylesInterface['@keyframes'];
   '@properties'?: StylesInterface['@properties'];
+  '@fontFace'?: StylesInterface['@fontFace'];
+  '@counterStyle'?: StylesInterface['@counterStyle'];
 };
 /** Special properties that are not regular style values */
 interface SpecialStyleProperties {
   '@keyframes'?: StylesInterface['@keyframes'];
   '@properties'?: StylesInterface['@properties'];
+  '@fontFace'?: StylesInterface['@fontFace'];
+  '@counterStyle'?: StylesInterface['@counterStyle'];
   recipe?: StylesInterface['recipe'];
 }
 /** Index signature for arbitrary style keys (sub-elements, CSS variables, etc.) */
 interface StylesIndexSignature {
-  [key: string]: StyleValue<string | number | boolean | undefined> | StyleValueStateMap<string | number | boolean | undefined> | Styles | false | StylesInterface['@keyframes'] | StylesInterface['@properties'];
+  [key: string]: StyleValue<string | number | boolean | undefined> | StyleValueStateMap<string | number | boolean | undefined> | Styles | false | StylesInterface['@keyframes'] | StylesInterface['@properties'] | StylesInterface['@fontFace'] | StylesInterface['@counterStyle'];
   /**
    * Selector combinator: `undefined` (descendant, default), `'>'` (child), `'+'` (adjacent), `'~'` (sibling).
    * Can chain with capitalized names: `'> Body > Row >'`. Spaces required around combinators.