@barocss/kit 0.8.2 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -435,6 +435,26 @@ function staticUtility(name, decls, opts, ctx) {
435
435
  * category: 'layout',
436
436
  * });
437
437
  */
438
+ /**
439
+ * #300: a theme key that no built-in utility names (`theme.extend.borderRadius.card`) still resolves, as in
440
+ * Tailwind 4 where `--radius-card` gives `rounded-card`. Only word keys that start with a letter (numbers stay
441
+ * bare values), never `DEFAULT`; unknown keys return null so the utility emits nothing (#213).
442
+ */
443
+ function themeKeyEntry(ctx, namespace, key) {
444
+ if (key === "DEFAULT" || !/^[a-zA-Z][\w-]*$/.test(key) || typeof ctx?.theme !== "function") return void 0;
445
+ const table = ctx.theme(namespace);
446
+ if (!table || typeof table !== "object" || !Object.prototype.hasOwnProperty.call(table, key)) return void 0;
447
+ return table[key] ?? void 0;
448
+ }
449
+ /** #300: the literal value of `theme.<namespace>.<key>` when it is a string, else null. */
450
+ function themeKeyValue(ctx, namespace, key) {
451
+ const v = themeKeyEntry(ctx, namespace, key);
452
+ return typeof v === "string" ? v : null;
453
+ }
454
+ /** #300: `var(--<varPrefix>-<key>)` when `theme.<namespace>.<key>` exists (the :root var BaroCSS emits for it), else null. */
455
+ function themeKeyVar(ctx, namespace, key, varPrefix) {
456
+ return themeKeyEntry(ctx, namespace, key) === void 0 ? null : `var(--${varPrefix}-${key})`;
457
+ }
438
458
  /** #261: `var(--spacing-<key>)` for a named (non-numeric) `theme.spacing` key, else null. */
439
459
  function spacingKeyValue(ctx, key, negative) {
440
460
  if (key === "px" || !/^[a-zA-Z][\w-]*$/.test(key) || ctx.theme("spacing", key) == null) return null;
@@ -477,12 +497,18 @@ function functionalUtility(opts, ctx) {
477
497
  }
478
498
  let themeValue;
479
499
  if (opts.themeKey && ctx.theme) themeValue = themeScalar(ctx.theme(opts.themeKey, finalValue));
500
+ let namespace = themeValue !== void 0 ? opts.themeKey : void 0;
480
501
  if (!themeValue && opts.themeKeys && ctx.theme) for (const key of opts.themeKeys) {
481
502
  themeValue = themeScalar(ctx.theme(key, finalValue));
482
- if (themeValue !== void 0) break;
503
+ if (themeValue !== void 0) {
504
+ namespace = key;
505
+ break;
506
+ }
483
507
  }
484
508
  if (themeValue !== void 0) {
485
- extra.realThemeValue = finalValue;
509
+ extra.themeNamespace = namespace;
510
+ extra.themeKey = finalValue;
511
+ if (namespace === "colors" || !(opts.themeKeys ?? [opts.themeKey]).includes("colors")) extra.realThemeValue = finalValue;
486
512
  finalValue = themeValue;
487
513
  if (opts.prop) return [decl(opts.prop, finalValue)];
488
514
  if (opts.handle) {
@@ -1056,7 +1082,13 @@ function parseUtility(value, ctx) {
1056
1082
  //#region src/core/astToCss.ts
1057
1083
  var isSafePrelude = (text) => {
1058
1084
  const t = String(text ?? "");
1059
- return !hasCommentDelimiter(t) && !hasHtmlEndTagOpener(t) && isBalancedPrelude(t);
1085
+ return !hasCommentDelimiter(t) && !hasHtmlEndTagOpener(t) && isBalancedPrelude(t) && !/url\s*\(/i.test(t);
1086
+ };
1087
+ var uniqueDescriptors = (node) => {
1088
+ if (node.type !== "at-rule") return [];
1089
+ if (node.name !== "property") return node.nodes;
1090
+ const seen = /* @__PURE__ */ new Set();
1091
+ return node.nodes.filter((c) => c.type !== "decl" || !seen.has(c.prop) && !!seen.add(c.prop));
1060
1092
  };
1061
1093
  var isSafeDecl = (prop, value) => isStructureSafeValue(String(prop)) && isStructureSafeValue(String(value ?? "")) && !hasHtmlEndTagOpener(String(prop)) && !hasHtmlEndTagOpener(String(value ?? ""));
1062
1094
  var importantPrefix = "!important";
@@ -1152,10 +1184,10 @@ function rootToCss(nodes, opts) {
1152
1184
  if (isSafeDecl(node.prop, node.value)) list.push(minify ? `${node.prop}:${node.value};` : `${node.prop}: ${node.value};`);
1153
1185
  } else if (node.type === "at-rule" && isSafePrelude(node.name) && isSafePrelude(node.params)) {
1154
1186
  if (minify) {
1155
- const body = node.nodes.filter((child) => child.type === "decl" && isSafeDecl(child.prop, child.value)).map((child) => child.type === "decl" ? `${child.prop}:${child.value};` : "").join("");
1187
+ const body = uniqueDescriptors(node).filter((child) => child.type === "decl" && isSafeDecl(child.prop, child.value)).map((child) => child.type === "decl" ? `${child.prop}:${child.value};` : "").join("");
1156
1188
  list.push(`@${node.name} ${node.params}{${body}}`);
1157
1189
  } else list.push(`@${node.name} ${node.params} {
1158
- ${node.nodes.map((node) => {
1190
+ ${uniqueDescriptors(node).map((node) => {
1159
1191
  if (node.type === "decl" && isSafeDecl(node.prop, node.value)) return `\t${node.prop}: ${node.value};`;
1160
1192
  }).join("\n")}
1161
1193
  }`);
@@ -1208,6 +1240,14 @@ function boxShadowToCssVars(boxShadow) {
1208
1240
  * fontSize: { xs: ['0.75rem', '1rem'], ... }
1209
1241
  * → { '--text-xs': '0.75rem', '--text-xs--line-height': '1rem' }
1210
1242
  */
1243
+ /** The line height of a fontSize tuple: `['4rem', '1.1']` or Tailwind's `['4rem', { lineHeight: '1.1' }]` (#300). */
1244
+ function fontSizeLineHeight(value) {
1245
+ if (!Array.isArray(value)) return void 0;
1246
+ const second = value[1];
1247
+ if (typeof second === "string" || typeof second === "number") return String(second);
1248
+ const lh = second?.lineHeight;
1249
+ return lh == null ? void 0 : String(lh);
1250
+ }
1211
1251
  function fontSizeToCssVars(fontSize) {
1212
1252
  if (!fontSize) return {};
1213
1253
  const result = {};
@@ -1215,7 +1255,8 @@ function fontSizeToCssVars(fontSize) {
1215
1255
  const value = fontSize[key];
1216
1256
  if (Array.isArray(value)) {
1217
1257
  result[`--text-${key}`] = value[0];
1218
- if (value[1]) result[`--text-${key}--line-height`] = value[1];
1258
+ const lineHeight = fontSizeLineHeight(value);
1259
+ if (lineHeight) result[`--text-${key}--line-height`] = lineHeight;
1219
1260
  } else result[`--text-${key}`] = value;
1220
1261
  }
1221
1262
  return result;
@@ -1701,6 +1742,11 @@ function parseClassToAst(fullClassName, ctx) {
1701
1742
  variantChain: modifiers,
1702
1743
  index: i
1703
1744
  });
1745
+ if (result == null) {
1746
+ debugWarn(`[BAROCSS] Unknown variant: "${variant.type}" in "${fullClassName}"`);
1747
+ failures.add(fullClassName);
1748
+ return [];
1749
+ }
1704
1750
  if (plugin.wrap && (result === "&" || typeof result === "object" && !Array.isArray(result) && result.selector === "&" || Array.isArray(result) && result.length === 1 && result[0].selector === "&")) continue;
1705
1751
  if (typeof result === "string" && result.includes("&")) wrappers.push({
1706
1752
  type: "rule",
@@ -1787,10 +1833,11 @@ function getAstCacheStats(ctx) {
1787
1833
  * @example
1788
1834
  * const css = generateCss('sm:dark:hover:bg-red-500 sm:focus:bg-blue-500', ctx);
1789
1835
  */
1836
+ var CLASS_SEPARATOR = /[ \t\n\f\r]+/;
1790
1837
  function generateCss(classList, ctx, opts) {
1791
1838
  const seen = /* @__PURE__ */ new Set();
1792
1839
  const allAtRootNodes = [];
1793
- const results = classList.split(/\s+/).filter((cls) => {
1840
+ const results = classList.split(CLASS_SEPARATOR).filter((cls) => {
1794
1841
  if (!cls) return false;
1795
1842
  if (opts?.dedup) {
1796
1843
  if (seen.has(cls)) return false;
@@ -1850,7 +1897,7 @@ function generateCss(classList, ctx, opts) {
1850
1897
  */
1851
1898
  function generateCssRules(classList, ctx, opts) {
1852
1899
  const seen = /* @__PURE__ */ new Set();
1853
- return classList.split(/\s+/).filter((cls) => {
1900
+ return classList.split(CLASS_SEPARATOR).filter((cls) => {
1854
1901
  if (!cls) return false;
1855
1902
  if (opts?.dedup) {
1856
1903
  if (seen.has(cls)) return false;
@@ -2626,105 +2673,81 @@ textarea {
2626
2673
  resize: vertical;
2627
2674
  }
2628
2675
  `;
2676
+ /**
2677
+ * Full preflight: a port of Tailwind CSS v4.3.3's preflight.css (MIT), rule for rule (#336).
2678
+ * `--theme(--x, fallback)` becomes `var(--x, fallback)`; the default sans/mono families also fall back to
2679
+ * `--font-sans`/`--font-mono` so a BaroCSS theme applies. Checked by tests/compat/preflight-336.test.ts.
2680
+ */
2629
2681
  var preflightFullCSS = `
2630
- /* BaroCSS Preflight - Full Reset */
2631
- /* =============================== */
2632
-
2633
- /* Box sizing rules */
2682
+ /* BaroCSS Preflight - Full (Tailwind 4.3.3) */
2634
2683
  *,
2635
- *::before,
2636
- *::after {
2684
+ ::after,
2685
+ ::before,
2686
+ ::backdrop,
2687
+ ::file-selector-button {
2637
2688
  box-sizing: border-box;
2638
- }
2639
-
2640
- /* Remove default margin and padding; reset border to Tailwind v4's universal
2641
- \`border: 0 solid\` so a bare border/border-t (width set by the utility, style
2642
- otherwise \`none\`) renders. Width 0 keeps borders invisible until a utility
2643
- sets one. */
2644
- * {
2645
2689
  margin: 0;
2646
2690
  padding: 0;
2647
2691
  border: 0 solid;
2648
2692
  }
2649
2693
 
2650
- /* Set core body defaults */
2651
- body {
2652
- min-height: 100vh;
2653
- scroll-behavior: smooth;
2654
- text-rendering: optimizeSpeed;
2694
+ html,
2695
+ :host {
2655
2696
  line-height: 1.5;
2656
- -webkit-font-smoothing: antialiased;
2657
- -moz-osx-font-smoothing: grayscale;
2658
- }
2659
-
2660
- /* Remove list styles on ul, ol elements */
2661
- ul,
2662
- ol {
2663
- list-style: none;
2664
- }
2665
-
2666
- /* Make images easier to work with */
2667
- img,
2668
- picture {
2669
- max-width: 100%;
2670
- display: block;
2671
- }
2672
-
2673
- /* Inherit fonts for inputs and buttons */
2674
- input,
2675
- button,
2676
- textarea,
2677
- select {
2678
- font: inherit;
2697
+ -webkit-text-size-adjust: 100%;
2698
+ tab-size: 4;
2699
+ font-family: var(--default-font-family, var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'));
2700
+ font-feature-settings: var(--default-font-feature-settings, normal);
2701
+ font-variation-settings: var(--default-font-variation-settings, normal);
2702
+ -webkit-tap-highlight-color: transparent;
2679
2703
  }
2680
2704
 
2681
- /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
2682
- @media (prefers-reduced-motion: reduce) {
2683
- html {
2684
- scroll-behavior: auto;
2685
- }
2686
-
2687
- *,
2688
- *::before,
2689
- *::after {
2690
- animation-duration: 0.01ms !important;
2691
- animation-iteration-count: 1 !important;
2692
- transition-duration: 0.01ms !important;
2693
- scroll-behavior: auto !important;
2694
- }
2705
+ hr {
2706
+ height: 0;
2707
+ color: inherit;
2708
+ border-top-width: 1px;
2695
2709
  }
2696
2710
 
2697
- /* HTML5 display-role reset for older browsers */
2698
- article, aside, details, figcaption, figure,
2699
- footer, header, hgroup, menu, nav, section {
2700
- display: block;
2711
+ abbr:where([title]) {
2712
+ -webkit-text-decoration: underline dotted;
2713
+ text-decoration: underline dotted;
2701
2714
  }
2702
2715
 
2703
- /* Additional full resets */
2704
- html {
2705
- line-height: 1.15;
2706
- -webkit-text-size-adjust: 100%;
2707
- -ms-text-size-adjust: 100%;
2708
- /* Tailwind 4.1.13 root font (app --default-font-family / --font-sans win) */
2709
- font-family: var(--default-font-family, var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'));
2710
- font-feature-settings: var(--default-font-feature-settings, normal);
2711
- font-variation-settings: var(--default-font-variation-settings, normal);
2716
+ h1,
2717
+ h2,
2718
+ h3,
2719
+ h4,
2720
+ h5,
2721
+ h6 {
2722
+ font-size: inherit;
2723
+ font-weight: inherit;
2712
2724
  }
2713
2725
 
2714
- /* Remove the gray background on active links in IE 10 */
2715
2726
  a {
2716
- background-color: transparent;
2717
- text-decoration: none;
2718
2727
  color: inherit;
2728
+ -webkit-text-decoration: inherit;
2729
+ text-decoration: inherit;
2719
2730
  }
2720
2731
 
2721
- /* Add the correct font weight in Chrome, Edge, and Safari */
2722
2732
  b,
2723
2733
  strong {
2724
2734
  font-weight: bolder;
2725
2735
  }
2726
2736
 
2727
- /* Prevent sub and sup elements from affecting the line height */
2737
+ code,
2738
+ kbd,
2739
+ samp,
2740
+ pre {
2741
+ font-family: var(--default-mono-font-family, var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace));
2742
+ font-feature-settings: var(--default-mono-font-feature-settings, normal);
2743
+ font-variation-settings: var(--default-mono-font-variation-settings, normal);
2744
+ font-size: 1em;
2745
+ }
2746
+
2747
+ small {
2748
+ font-size: 80%;
2749
+ }
2750
+
2728
2751
  sub,
2729
2752
  sup {
2730
2753
  font-size: 75%;
@@ -2741,265 +2764,49 @@ sup {
2741
2764
  top: -0.5em;
2742
2765
  }
2743
2766
 
2744
- /* Improve media defaults */
2745
- svg {
2746
- vertical-align: middle;
2747
- }
2748
-
2749
- /* Remove border on iframe */
2750
- iframe {
2751
- border: 0;
2752
- }
2753
-
2754
- /* Table defaults */
2755
2767
  table {
2768
+ text-indent: 0;
2769
+ border-color: inherit;
2756
2770
  border-collapse: collapse;
2757
- border-spacing: 0;
2758
2771
  }
2759
2772
 
2760
- /* Form element defaults */
2761
- button,
2762
- input,
2763
- optgroup,
2764
- select,
2765
- textarea {
2766
- font-family: inherit;
2767
- font-size: 100%;
2768
- line-height: 1.15;
2769
- margin: 0;
2773
+ :-moz-focusring:where(:not(iframe)) {
2774
+ outline: auto;
2770
2775
  }
2771
2776
 
2772
- button,
2773
- select {
2774
- text-transform: none;
2775
- }
2776
-
2777
- button,
2778
- [type="button"],
2779
- [type="reset"],
2780
- [type="submit"] {
2781
- -webkit-appearance: button;
2782
- }
2783
-
2784
- button::-moz-focus-inner,
2785
- [type="button"]::-moz-focus-inner,
2786
- [type="reset"]::-moz-focus-inner,
2787
- [type="submit"]::-moz-focus-inner {
2788
- border-style: none;
2789
- padding: 0;
2790
- }
2791
-
2792
- button:-moz-focusring,
2793
- [type="button"]:-moz-focusring,
2794
- [type="reset"]:-moz-focusring,
2795
- [type="submit"]:-moz-focusring {
2796
- outline: 1px dotted ButtonText;
2797
- }
2798
-
2799
- /* Remove the inner border and padding in Firefox */
2800
- button::-moz-focus-inner,
2801
- [type="button"]::-moz-focus-inner,
2802
- [type="reset"]::-moz-focus-inner,
2803
- [type="submit"]::-moz-focus-inner {
2804
- border-style: none;
2805
- padding: 0;
2806
- }
2807
-
2808
- /* Restore the focus styles unset by the previous rule */
2809
- button:-moz-focusring,
2810
- [type="button"]:-moz-focusring,
2811
- [type="reset"]:-moz-focusring,
2812
- [type="submit"]:-moz-focusring {
2813
- outline: 1px dotted ButtonText;
2814
- }
2815
-
2816
- /* Correct the padding in Firefox */
2817
- fieldset {
2818
- padding: 0.35em 0.75em 0.625em;
2819
- }
2820
-
2821
- /* Remove padding so developers aren't caught out when they zero out fieldset elements */
2822
- legend {
2823
- box-sizing: border-box;
2824
- color: inherit;
2825
- display: table;
2826
- max-width: 100%;
2827
- padding: 0;
2828
- white-space: normal;
2829
- }
2830
-
2831
- /* Add the correct vertical alignment in Chrome, Firefox, and Opera */
2832
2777
  progress {
2833
2778
  vertical-align: baseline;
2834
2779
  }
2835
2780
 
2836
- /* Remove the default vertical scrollbar in IE */
2837
- textarea {
2838
- overflow: auto;
2839
- }
2840
-
2841
- /* Correct the cursor style of increment and decrement buttons in Chrome */
2842
- [type="number"]::-webkit-inner-spin-button,
2843
- [type="number"]::-webkit-outer-spin-button {
2844
- height: auto;
2845
- }
2846
-
2847
- /* Remove the inner padding in Chrome and Safari on macOS */
2848
- [type="search"] {
2849
- -webkit-appearance: textfield;
2850
- outline-offset: -2px;
2851
- }
2852
-
2853
- /* Remove the inner padding in Chrome and Safari on macOS */
2854
- [type="search"]::-webkit-search-decoration {
2855
- -webkit-appearance: none;
2856
- }
2857
-
2858
- /* Remove the default vertical scrollbar in IE */
2859
- textarea {
2860
- overflow: auto;
2861
- }
2862
-
2863
- /* Correct the cursor style of increment and decrement buttons in Chrome */
2864
- [type="number"]::-webkit-inner-spin-button,
2865
- [type="number"]::-webkit-outer-spin-button {
2866
- height: auto;
2781
+ summary {
2782
+ display: list-item;
2867
2783
  }
2868
2784
 
2869
- /* Remove the inner padding in Chrome and Safari on macOS */
2870
- [type="search"] {
2871
- -webkit-appearance: textfield;
2872
- outline-offset: -2px;
2873
- }
2874
-
2875
- /* Remove the inner padding in Chrome and Safari on macOS */
2876
- [type="search"]::-webkit-search-decoration {
2877
- -webkit-appearance: none;
2878
- }
2879
-
2880
- /* Additional full reset styles */
2881
- abbr[title] {
2882
- border-bottom: none;
2883
- text-decoration: underline;
2884
- text-decoration: underline dotted;
2885
- }
2886
-
2887
- /* Add the correct font size in all browsers */
2888
- small {
2889
- font-size: 80%;
2890
- }
2891
-
2892
- /* Prevent overflow of the container in all browsers */
2893
- code,
2894
- kbd,
2895
- pre,
2896
- samp {
2897
- font-family: var(--default-mono-font-family, var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace));
2898
- font-feature-settings: var(--default-mono-font-feature-settings, normal);
2899
- font-variation-settings: var(--default-mono-font-variation-settings, normal);
2900
- font-size: 1em;
2785
+ ol,
2786
+ ul,
2787
+ menu {
2788
+ list-style: none;
2901
2789
  }
2902
2790
 
2903
- /* Add the correct display in IE 9 */
2791
+ img,
2792
+ svg,
2793
+ video,
2794
+ canvas,
2904
2795
  audio,
2905
- video {
2906
- display: inline-block;
2907
- }
2908
-
2909
- /* Add the correct display in IE */
2910
- template {
2911
- display: none;
2912
- }
2913
-
2914
- /* Hidden attribute */
2915
- [hidden] {
2916
- display: none;
2917
- }
2918
-
2919
- /* Focus styles */
2920
- :focus {
2921
- outline: 2px solid #3b82f6;
2922
- outline-offset: 2px;
2923
- }
2924
-
2925
- /* Skip link for accessibility */
2926
- .skip-link {
2927
- position: absolute;
2928
- top: -40px;
2929
- left: 6px;
2930
- background: #000;
2931
- color: white;
2932
- padding: 8px;
2933
- text-decoration: none;
2934
- z-index: 100;
2935
- }
2936
-
2937
- .skip-link:focus {
2938
- top: 6px;
2796
+ iframe,
2797
+ embed,
2798
+ object {
2799
+ display: block;
2800
+ vertical-align: middle;
2939
2801
  }
2940
2802
 
2941
- /* Print styles */
2942
- @media print {
2943
- *,
2944
- *::before,
2945
- *::after {
2946
- background: transparent !important;
2947
- color: #000 !important;
2948
- box-shadow: none !important;
2949
- text-shadow: none !important;
2950
- }
2951
-
2952
- a,
2953
- a:visited {
2954
- text-decoration: underline;
2955
- }
2956
-
2957
- a[href]:after {
2958
- content: " (" attr(href) ")";
2959
- }
2960
-
2961
- abbr[title]:after {
2962
- content: " (" attr(title) ")";
2963
- }
2964
-
2965
- a[href^="#"]:after,
2966
- a[href^="javascript:"]:after {
2967
- content: "";
2968
- }
2969
-
2970
- pre,
2971
- blockquote {
2972
- border: 1px solid #999;
2973
- page-break-inside: avoid;
2974
- }
2975
-
2976
- thead {
2977
- display: table-header-group;
2978
- }
2979
-
2980
- tr,
2981
- img {
2982
- page-break-inside: avoid;
2983
- }
2984
-
2985
- img {
2986
- max-width: 100% !important;
2987
- }
2988
-
2989
- p,
2990
- h2,
2991
- h3 {
2992
- orphans: 3;
2993
- widows: 3;
2994
- }
2995
-
2996
- h2,
2997
- h3 {
2998
- page-break-after: avoid;
2999
- }
2803
+ img,
2804
+ video {
2805
+ max-width: 100%;
2806
+ height: auto;
3000
2807
  }
3001
2808
 
3002
- /* Tailwind 4.1.13 form-control reset: inherit typography and colour, drop native radius/background (#228) */
2809
+ /* form-control reset */
3003
2810
  button,
3004
2811
  input,
3005
2812
  select,
@@ -3032,7 +2839,8 @@ textarea,
3032
2839
  opacity: 1;
3033
2840
  }
3034
2841
 
3035
- @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
2842
+ @supports (not (-webkit-appearance: -apple-pay-button)) or
2843
+ (contain-intrinsic-size: 1px) {
3036
2844
  ::placeholder {
3037
2845
  color: color-mix(in oklab, currentcolor 50%, transparent);
3038
2846
  }
@@ -3041,6 +2849,58 @@ textarea,
3041
2849
  textarea {
3042
2850
  resize: vertical;
3043
2851
  }
2852
+
2853
+ ::-webkit-search-decoration {
2854
+ -webkit-appearance: none;
2855
+ }
2856
+
2857
+ ::-webkit-date-and-time-value {
2858
+ min-height: 1lh;
2859
+ text-align: inherit;
2860
+ }
2861
+
2862
+ ::-webkit-datetime-edit {
2863
+ display: inline-flex;
2864
+ }
2865
+
2866
+ ::-webkit-datetime-edit-fields-wrapper {
2867
+ padding: 0;
2868
+ }
2869
+
2870
+ ::-webkit-datetime-edit,
2871
+ ::-webkit-datetime-edit-year-field,
2872
+ ::-webkit-datetime-edit-month-field,
2873
+ ::-webkit-datetime-edit-day-field,
2874
+ ::-webkit-datetime-edit-hour-field,
2875
+ ::-webkit-datetime-edit-minute-field,
2876
+ ::-webkit-datetime-edit-second-field,
2877
+ ::-webkit-datetime-edit-millisecond-field,
2878
+ ::-webkit-datetime-edit-meridiem-field {
2879
+ padding-block: 0;
2880
+ }
2881
+
2882
+ ::-webkit-calendar-picker-indicator {
2883
+ line-height: 1;
2884
+ }
2885
+
2886
+ :-moz-ui-invalid {
2887
+ box-shadow: none;
2888
+ }
2889
+
2890
+ button,
2891
+ input:where([type='button'], [type='reset'], [type='submit']),
2892
+ ::file-selector-button {
2893
+ appearance: button;
2894
+ }
2895
+
2896
+ ::-webkit-inner-spin-button,
2897
+ ::-webkit-outer-spin-button {
2898
+ height: auto;
2899
+ }
2900
+
2901
+ [hidden]:where(:not([hidden='until-found'])) {
2902
+ display: none !important;
2903
+ }
3044
2904
  `;
3045
2905
  //#endregion
3046
2906
  //#region src/core/context.ts
@@ -3276,6 +3136,7 @@ function jsonToAst(input, ctx) {
3276
3136
  variantChain: [],
3277
3137
  index: i
3278
3138
  });
3139
+ if (result == null) continue;
3279
3140
  if (plugin.wrap && (result === "&" || typeof result === "object" && !Array.isArray(result) && result.selector === "&" || Array.isArray(result) && result.length === 1 && result[0].selector === "&")) {} else if (typeof result === "string" && result.includes("&")) wrappers.push({
3280
3141
  type: "rule",
3281
3142
  selector: result
@@ -3952,6 +3813,7 @@ functionalUtility({
3952
3813
  prop: "transition-timing-function",
3953
3814
  supportsArbitrary: true,
3954
3815
  supportsCustomProperty: true,
3816
+ handleBareValue: ({ value, ctx }) => themeKeyVar(ctx, "transitionTimingFunction", value, "ease") ?? (/^(\d|\.\d)/.test(value) ? value : null),
3955
3817
  handle: (value, _ctx, _token) => {
3956
3818
  return [decl("transition-timing-function", value)];
3957
3819
  },
@@ -4136,6 +3998,7 @@ functionalUtility({
4136
3998
  prop: "filter",
4137
3999
  supportsArbitrary: true,
4138
4000
  supportsCustomProperty: true,
4001
+ handleBareValue: ({ value, ctx }) => themeKeyVar(ctx, "blur", value, "blur") ?? (/^(\d|\.\d)/.test(value) ? value : null),
4139
4002
  handle: (value, _ctx, token) => {
4140
4003
  if (token.customProperty) return [decl("--baro-blur", `blur(var(${value}))`), filters$1()];
4141
4004
  return [decl("--baro-blur", `blur(${value})`), filters$1()];
@@ -4231,13 +4094,14 @@ functionalUtility({
4231
4094
  transparent: "transparent"
4232
4095
  }[extra?.realThemeValue ?? value];
4233
4096
  if (keyword) return dropShadowColor(keyword, opacity);
4097
+ const key = extra?.realThemeValue ?? value;
4098
+ const named = token.arbitrary ? null : namedDropShadow(ctx, key);
4099
+ if (named) return dropShadowValue(named, opacity, `drop-shadow(var(--drop-shadow-${key}))`);
4234
4100
  if (extra?.realThemeValue) return dropShadowColor(value, opacity, `var(--color-${extra.realThemeValue})`);
4235
4101
  if (token.arbitrary) {
4236
4102
  if (parseColor(value)) return dropShadowColor(value, opacity);
4237
4103
  return dropShadowValue(value, opacity);
4238
4104
  }
4239
- const named = namedDropShadow(ctx, value);
4240
- if (named) return dropShadowValue(named, opacity, `drop-shadow(var(--drop-shadow-${value}))`);
4241
4105
  return null;
4242
4106
  },
4243
4107
  handleCustomProperty: (value) => {
@@ -4355,6 +4219,7 @@ functionalUtility({
4355
4219
  prop: "backdrop-filter",
4356
4220
  supportsArbitrary: true,
4357
4221
  supportsCustomProperty: true,
4222
+ handleBareValue: ({ value, ctx }) => themeKeyVar(ctx, "blur", value, "blur") ?? (/^(\d|\.\d)/.test(value) ? value : null),
4358
4223
  handle: (value, _ctx, token) => {
4359
4224
  if (token.customProperty) return [decl("--baro-backdrop-blur", `blur(var(${value}))`), ...filters()];
4360
4225
  return [decl("--baro-backdrop-blur", `blur(${value})`), ...filters()];
@@ -4510,11 +4375,15 @@ function boxShadowLayer(layer, value, opacity) {
4510
4375
  decl("box-shadow", SHADOW_COMPOSITE)
4511
4376
  ];
4512
4377
  }
4513
- function namedBoxShadow(layer, name, opacity) {
4514
- if (layer === "shadow") return own(NAMED_SHADOWS, name) ? boxShadowLayer(layer, NAMED_SHADOWS[name], opacity) : null;
4515
- if (own(NAMED_INSET_SHADOWS, name)) return boxShadowLayer(layer, NAMED_INSET_SHADOWS[name], opacity);
4516
- if (!opacity && own(INSET_EXTENSIONS, name)) return boxShadowLayer(layer, INSET_EXTENSIONS[name], void 0);
4517
- return null;
4378
+ function namedBoxShadow(layer, name, opacity, ctx) {
4379
+ if (layer === "shadow") {
4380
+ if (own(NAMED_SHADOWS, name)) return boxShadowLayer(layer, NAMED_SHADOWS[name], opacity);
4381
+ } else {
4382
+ if (own(NAMED_INSET_SHADOWS, name)) return boxShadowLayer(layer, NAMED_INSET_SHADOWS[name], opacity);
4383
+ if (!opacity && own(INSET_EXTENSIONS, name)) return boxShadowLayer(layer, INSET_EXTENSIONS[name], void 0);
4384
+ }
4385
+ const custom = ctx && name !== "none" ? themeKeyValue(ctx, layer === "shadow" ? "boxShadow" : "insetShadow", name) : null;
4386
+ return custom ? boxShadowLayer(layer, custom, opacity) : null;
4518
4387
  }
4519
4388
  staticUtility("shadow-none", [
4520
4389
  ringShadowProperties,
@@ -4554,10 +4423,10 @@ for (const layer of ["shadow", "inset-shadow"]) functionalUtility({
4554
4423
  supportsCustomProperty: true,
4555
4424
  supportsOpacity: true,
4556
4425
  themeKeys: ["colors"],
4557
- handleBareValue: ({ value, extra }) => namedBoxShadow(layer, value, extra?.opacity) ? value : null,
4558
- handle: (value, _ctx, token, extra) => {
4426
+ handleBareValue: ({ value, ctx, extra }) => namedBoxShadow(layer, value, extra?.opacity, ctx) ? value : null,
4427
+ handle: (value, ctx, token, extra) => {
4559
4428
  const opacity = extra?.opacity;
4560
- const named = !extra?.realThemeValue && !token.arbitrary ? namedBoxShadow(layer, value, opacity) : null;
4429
+ const named = !token.arbitrary ? namedBoxShadow(layer, extra?.realThemeValue ?? value, opacity, ctx) : null;
4561
4430
  if (named) return named;
4562
4431
  const color = layerColor(layer, value, opacity, token, extra?.realThemeValue);
4563
4432
  if (color !== void 0) return color;
@@ -4589,8 +4458,8 @@ functionalUtility({
4589
4458
  handleBareValue: ({ value, ctx }) => namedTextShadow(ctx, value) ? value : null,
4590
4459
  handle: (value, ctx, token, extra) => {
4591
4460
  const opacity = extra?.opacity;
4592
- if (!extra?.realThemeValue && !token.arbitrary) {
4593
- const named = namedTextShadow(ctx, value);
4461
+ if (!token.arbitrary) {
4462
+ const named = namedTextShadow(ctx, extra?.realThemeValue ?? value);
4594
4463
  if (named) return textShadowValue(named, opacity);
4595
4464
  }
4596
4465
  const color = layerColor("text-shadow", value, opacity, token, extra?.realThemeValue);
@@ -4631,6 +4500,22 @@ function ringShadowValue(width) {
4631
4500
  ["--baro-ring-offset-shadow", `var(--baro-ring-inset,) 0 0 0 var(--baro-ring-offset-width) var(--baro-ring-offset-color)`]
4632
4501
  ], { category: "effects" });
4633
4502
  });
4503
+ var ringOffsetWidth = (width) => [decl("--baro-ring-offset-width", width), decl("--baro-ring-offset-shadow", "var(--baro-ring-inset,) 0 0 0 var(--baro-ring-offset-width) var(--baro-ring-offset-color)")];
4504
+ functionalUtility({
4505
+ name: "ring-offset",
4506
+ themeKeys: ["ringOffsetWidth", "colors"],
4507
+ supportsArbitrary: true,
4508
+ supportsOpacity: true,
4509
+ handleBareValue: ({ value }) => /^\d+$/.test(value) ? `${value}px` : null,
4510
+ handle: (value, _ctx, token, extra) => {
4511
+ if (extra?.themeNamespace === "ringOffsetWidth") return ringOffsetWidth(value);
4512
+ if (extra?.realThemeValue) return themeColorDecls("--baro-ring-offset-color", value, extra);
4513
+ if (token.arbitrary) return parseColor(value) ? [decl("--baro-ring-offset-color", value)] : parseLength(value) ? ringOffsetWidth(value) : null;
4514
+ if (/^\d+px$/.test(value)) return ringOffsetWidth(value);
4515
+ return null;
4516
+ },
4517
+ category: "effects"
4518
+ });
4634
4519
  [
4635
4520
  ["inset-ring", "1px"],
4636
4521
  ["inset-ring-0", "0px"],
@@ -4662,9 +4547,14 @@ functionalUtility({
4662
4547
  supportsArbitrary: true,
4663
4548
  supportsCustomProperty: true,
4664
4549
  supportsOpacity: true,
4665
- themeKeys: ["colors"],
4550
+ themeKeys: ["colors", "ringWidth"],
4666
4551
  handle: (value, ctx, token, extra) => {
4667
4552
  const main = value;
4553
+ if (extra?.themeNamespace === "ringWidth") return [
4554
+ ringShadowProperties(),
4555
+ decl("--baro-ring-shadow", ringShadowValue(value)),
4556
+ decl("box-shadow", SHADOW_COMPOSITE)
4557
+ ];
4668
4558
  const opacity = extra?.opacity;
4669
4559
  const realThemeValue = extra?.realThemeValue;
4670
4560
  if (realThemeValue) return createRingColorDecls("--baro-ring-color", main, opacity, realThemeValue);
@@ -4960,6 +4850,7 @@ functionalUtility({
4960
4850
  supportsArbitrary: true,
4961
4851
  supportsCustomProperty: true,
4962
4852
  supportsFraction: true,
4853
+ handleBareValue: ({ value, ctx }) => themeKeyVar(ctx, "aspect", value, "aspect") ?? (/^(\d|\.\d)/.test(value) ? value : null),
4963
4854
  description: "aspect-ratio utility (theme, arbitrary, custom property, fraction supported)",
4964
4855
  category: "layout"
4965
4856
  });
@@ -4983,7 +4874,7 @@ functionalUtility({
4983
4874
  supportsArbitrary: true,
4984
4875
  supportsCustomProperty: true,
4985
4876
  supportsFraction: true,
4986
- handleBareValue: ({ value }) => parseNumber(value),
4877
+ handleBareValue: ({ value, ctx }) => parseNumber(value) ?? themeKeyVar(ctx, "container", value, "container"),
4987
4878
  description: "columns utility (theme, arbitrary, custom property, fraction supported)",
4988
4879
  category: "layout"
4989
4880
  });
@@ -6032,10 +5923,10 @@ functionalUtility({
6032
5923
  supportsArbitrary: true,
6033
5924
  supportsCustomProperty: true,
6034
5925
  supportsFraction: true,
6035
- handleBareValue: ({ value }) => {
5926
+ handleBareValue: ({ value, ctx }) => {
6036
5927
  if (parseNumber(value)) return `calc(var(--spacing) * ${value})`;
6037
5928
  if (parseFractionOrNumber(value)) return `calc(${value} * 100%)`;
6038
- return null;
5929
+ return themeKeyVar(ctx, "container", value, "container");
6039
5930
  },
6040
5931
  description: "max-width utility (spacing, fraction, arbitrary, custom property, static supported)",
6041
5932
  category: "sizing"
@@ -6145,11 +6036,11 @@ functionalUtility({
6145
6036
  supportsArbitrary: true,
6146
6037
  supportsCustomProperty: true,
6147
6038
  supportsFraction: true,
6148
- handleBareValue: ({ value, token }) => {
6039
+ handleBareValue: ({ value, token, ctx }) => {
6149
6040
  if (token.negative) return null;
6150
6041
  if (parseNumber(value)) return `calc(var(--spacing) * ${value})`;
6151
6042
  if (parseFractionOrNumber(value)) return `calc(${value} * 100%)`;
6152
- return null;
6043
+ return name.includes("inline") ? themeKeyVar(ctx, "container", value, "container") : null;
6153
6044
  },
6154
6045
  description: `${prop} utility (spacing, fraction, arbitrary, custom property, keywords)`,
6155
6046
  category: "sizing"
@@ -6175,21 +6066,34 @@ staticUtility("text-6xl", [["font-size", "var(--text-6xl)"], ["line-height", "va
6175
6066
  staticUtility("text-7xl", [["font-size", "var(--text-7xl)"], ["line-height", "var(--baro-leading, var(--text-7xl--line-height))"]], { category: "typography" });
6176
6067
  staticUtility("text-8xl", [["font-size", "var(--text-8xl)"], ["line-height", "var(--baro-leading, var(--text-8xl--line-height))"]], { category: "typography" });
6177
6068
  staticUtility("text-9xl", [["font-size", "var(--text-9xl)"], ["line-height", "var(--baro-leading, var(--text-9xl--line-height))"]], { category: "typography" });
6178
- staticUtility("font-thin", [["font-weight", "var(--font-weight-thin)"]], { category: "typography" });
6179
- staticUtility("font-extralight", [["font-weight", "var(--font-weight-extralight)"]], { category: "typography" });
6180
- staticUtility("font-light", [["font-weight", "var(--font-weight-light)"]], { category: "typography" });
6181
- staticUtility("font-normal", [["font-weight", "var(--font-weight-normal)"]], { category: "typography" });
6182
- staticUtility("font-medium", [["font-weight", "var(--font-weight-medium)"]], { category: "typography" });
6183
- staticUtility("font-semibold", [["font-weight", "var(--font-weight-semibold)"]], { category: "typography" });
6184
- staticUtility("font-bold", [["font-weight", "var(--font-weight-bold)"]], { category: "typography" });
6185
- staticUtility("font-extrabold", [["font-weight", "var(--font-weight-extrabold)"]], { category: "typography" });
6186
- staticUtility("font-black", [["font-weight", "var(--font-weight-black)"]], { category: "typography" });
6069
+ function fontWeightUtility(name) {
6070
+ registerUtility({
6071
+ name: `font-${name}`,
6072
+ match: (className) => className === `font-${name}`,
6073
+ handler: (_value, ctx) => {
6074
+ const family = themeKeyVar(ctx, "fontFamily", name, "font");
6075
+ return family ? [decl("font-family", family)] : [decl("font-weight", `var(--font-weight-${name})`)];
6076
+ },
6077
+ category: "typography"
6078
+ });
6079
+ }
6080
+ fontWeightUtility("thin");
6081
+ fontWeightUtility("extralight");
6082
+ fontWeightUtility("light");
6083
+ fontWeightUtility("normal");
6084
+ fontWeightUtility("medium");
6085
+ fontWeightUtility("semibold");
6086
+ fontWeightUtility("bold");
6087
+ fontWeightUtility("extrabold");
6088
+ fontWeightUtility("black");
6187
6089
  functionalUtility({
6188
6090
  name: "font",
6189
6091
  supportsArbitrary: true,
6190
6092
  supportsCustomProperty: true,
6093
+ handleBareValue: ({ value, ctx }) => themeKeyVar(ctx, "fontFamily", value, "font") ?? themeKeyVar(ctx, "fontWeight", value, "font-weight") ?? (/^(\d|\.\d)/.test(value) ? value : null),
6191
6094
  handle: (value, _ctx, token) => {
6192
6095
  if (token.prefix !== "font") return null;
6096
+ if (!token.arbitrary && value.startsWith("var(--font-weight-")) return [decl("font-weight", value)];
6193
6097
  if (parseNumber(value)) return [decl("font-weight", value)];
6194
6098
  return [decl("font-family", value)];
6195
6099
  },
@@ -6212,9 +6116,9 @@ staticUtility("tracking-widest", [["letter-spacing", "var(--letter-spacing-wides
6212
6116
  functionalUtility({
6213
6117
  name: "tracking",
6214
6118
  prop: "letter-spacing",
6215
- themeKey: "letterSpacing",
6216
6119
  supportsArbitrary: true,
6217
6120
  supportsCustomProperty: true,
6121
+ handleBareValue: ({ value, ctx }) => themeKeyVar(ctx, "letterSpacing", value, "letter-spacing") ?? (/^(\d|\.\d)/.test(value) ? value : null),
6218
6122
  description: "letter-spacing utility (theme, arbitrary, custom property supported)",
6219
6123
  category: "typography"
6220
6124
  });
@@ -6250,11 +6154,14 @@ staticUtility("leading-loose", [
6250
6154
  ], { category: "typography" });
6251
6155
  functionalUtility({
6252
6156
  name: "leading",
6253
- prop: "line-height",
6254
- themeKey: "lineHeight",
6255
6157
  supportsArbitrary: true,
6256
6158
  supportsCustomProperty: true,
6257
- handleBareValue: ({ value }) => parseNumber(value),
6159
+ handleBareValue: ({ value, ctx }) => {
6160
+ const v = themeKeyValue(ctx, "lineHeight", value);
6161
+ if (v != null) return `var(--leading-${value}, ${v})`;
6162
+ const numbered = ctx.theme("lineHeight", value);
6163
+ return typeof numbered === "string" ? numbered : parseNumber(value);
6164
+ },
6258
6165
  handle: (value) => [
6259
6166
  decl("--baro-leading", value),
6260
6167
  decl("line-height", value),
@@ -6311,8 +6218,11 @@ functionalUtility({
6311
6218
  supportsArbitrary: true,
6312
6219
  supportsCustomProperty: true,
6313
6220
  supportsOpacity: true,
6221
+ handleBareValue: ({ value, ctx, extra }) => (extra?.opacity ? null : themeKeyVar(ctx, "fontSize", value, "text")) ?? (/^(\d|\.\d)/.test(value) ? value : null),
6314
6222
  handle: (value, ctx, token, extra) => {
6315
6223
  if (extra?.realThemeValue) return themeColorDecls("color", value, extra);
6224
+ const sizeKey = !token.arbitrary && !token.customProperty ? /^var\(--text-([\w-]+)\)$/.exec(value)?.[1] : void 0;
6225
+ if (sizeKey) return fontSizeLineHeight(ctx.theme("fontSize", sizeKey)) ? [decl("font-size", value), decl("line-height", `var(--baro-leading, var(--text-${sizeKey}--line-height))`)] : [decl("font-size", value)];
6316
6226
  const kind = textArbitraryKind(value);
6317
6227
  return [decl(kind.fontSize ? "font-size" : "color", kind.value)];
6318
6228
  },
@@ -6435,11 +6345,12 @@ functionalUtility({
6435
6345
  });
6436
6346
  functionalUtility({
6437
6347
  name: "decoration",
6438
- themeKey: "colors",
6348
+ themeKeys: ["textDecorationThickness", "colors"],
6439
6349
  supportsArbitrary: true,
6440
6350
  supportsCustomProperty: true,
6441
6351
  supportsOpacity: true,
6442
6352
  handle: (value, ctx, token, extra) => {
6353
+ if (extra?.themeNamespace === "textDecorationThickness") return [decl("text-decoration-thickness", value)];
6443
6354
  if (extra?.realThemeValue) return themeColorDecls("text-decoration-color", value, extra);
6444
6355
  return [decl("text-decoration-color", value)];
6445
6356
  },
@@ -6523,7 +6434,7 @@ functionalUtility({
6523
6434
  prop: "content",
6524
6435
  supportsArbitrary: true,
6525
6436
  supportsCustomProperty: true,
6526
- handle: (value) => [decl("--baro-content", `"${value}"`), decl("content", "var(--baro-content)")],
6437
+ handle: (value) => [decl("--baro-content", value), decl("content", "var(--baro-content)")],
6527
6438
  handleCustomProperty: (value) => [decl("--baro-content", `var(${value})`), decl("content", "var(--baro-content)")],
6528
6439
  description: "content utility (arbitrary, custom property supported)",
6529
6440
  category: "typography"
@@ -6803,7 +6714,20 @@ staticUtility("rounded-2xl", [["border-radius", "var(--radius-2xl)"]], { categor
6803
6714
  staticUtility("rounded-3xl", [["border-radius", "var(--radius-3xl)"]], { category: "borders" });
6804
6715
  staticUtility("rounded-4xl", [["border-radius", "var(--radius-4xl)"]], { category: "borders" });
6805
6716
  staticUtility("rounded-xs", [["border-radius", "var(--radius-xs)"]], { category: "borders" });
6806
- staticUtility("rounded-full", [["border-radius", "9999px"]], { category: "borders" });
6717
+ var FULL = "calc(infinity * 1px)";
6718
+ function roundedFull(name, props) {
6719
+ registerUtility({
6720
+ name,
6721
+ match: (className) => className === name,
6722
+ handler: (_value, ctx) => {
6723
+ const own = themeKeyValue(ctx, "borderRadius", "full");
6724
+ const value = own != null && own !== "9999px" && own !== FULL ? "var(--radius-full)" : FULL;
6725
+ return props.map((prop) => decl(prop, value));
6726
+ },
6727
+ category: "borders"
6728
+ });
6729
+ }
6730
+ roundedFull("rounded-full", ["border-radius"]);
6807
6731
  [
6808
6732
  ["rounded-t", ["border-top-left-radius", "border-top-right-radius"]],
6809
6733
  ["rounded-r", ["border-top-right-radius", "border-bottom-right-radius"]],
@@ -6832,14 +6756,14 @@ staticUtility("rounded-full", [["border-radius", "9999px"]], { category: "border
6832
6756
  staticUtility(`${name}-3xl`, propList.map((prop) => [prop, "var(--radius-3xl)"]), { category: "borders" });
6833
6757
  staticUtility(`${name}-4xl`, propList.map((prop) => [prop, "var(--radius-4xl)"]), { category: "borders" });
6834
6758
  staticUtility(`${name}-xs`, propList.map((prop) => [prop, "var(--radius-xs)"]), { category: "borders" });
6835
- staticUtility(`${name}-full`, propList.map((prop) => [prop, logical ? "calc(infinity * 1px)" : "9999px"]), { category: "borders" });
6759
+ roundedFull(`${name}-full`, propList);
6836
6760
  functionalUtility({
6837
6761
  name,
6838
6762
  supportsArbitrary: true,
6839
6763
  supportsCustomProperty: true,
6840
- handleBareValue: ({ value }) => {
6764
+ handleBareValue: ({ value, ctx }) => {
6841
6765
  if (!logical && parseNumber(value)) return `calc(var(--spacing) * ${value})`;
6842
- return null;
6766
+ return themeKeyVar(ctx, "borderRadius", value, "radius");
6843
6767
  },
6844
6768
  handle: (value) => propList.map((prop) => decl(prop, value)),
6845
6769
  description: `${name} utility (spacing, arbitrary, custom property support)`,
@@ -6851,9 +6775,9 @@ functionalUtility({
6851
6775
  handle: (value, _ctx, token) => token.prefix === "rounded" ? [decl("border-radius", value)] : null,
6852
6776
  supportsArbitrary: true,
6853
6777
  supportsCustomProperty: true,
6854
- handleBareValue: ({ value }) => {
6778
+ handleBareValue: ({ value, ctx }) => {
6855
6779
  if (parseNumber(value)) return `calc(var(--spacing) * ${value})`;
6856
- return null;
6780
+ return themeKeyVar(ctx, "borderRadius", value, "radius");
6857
6781
  },
6858
6782
  description: "border-radius utility (spacing, arbitrary, custom property support)",
6859
6783
  category: "borders"
@@ -6902,7 +6826,7 @@ var withBorderStyle = (props, width) => [
6902
6826
  staticUtility(`${name}`, styled("1px"));
6903
6827
  functionalUtility({
6904
6828
  name,
6905
- themeKeys: ["borderWidth", "colors"],
6829
+ themeKeys: ["colors", "borderWidth"],
6906
6830
  supportsOpacity: true,
6907
6831
  supportsArbitrary: true,
6908
6832
  supportsCustomProperty: true,
@@ -6911,6 +6835,7 @@ var withBorderStyle = (props, width) => [
6911
6835
  return null;
6912
6836
  },
6913
6837
  handle: (value, ctx, token, extra) => {
6838
+ if (extra?.themeNamespace === "borderWidth") return withBorderStyle(propList, value);
6914
6839
  if (extra?.realThemeValue) return propList.flatMap((prop) => themeColorDecls(prop.replace("width", "color"), value, extra));
6915
6840
  if (parseColor(value)) return propList.map((prop) => decl(prop.replace("width", "color"), value));
6916
6841
  if (token.arbitrary) return withBorderStyle(propList, value);
@@ -6957,6 +6882,7 @@ Object.entries({
6957
6882
  staticUtility(`divide-${axis}-reverse`, [rule(":where(& > :not(:last-child))", [decl(rev, "1")])], { category: "borders" });
6958
6883
  functionalUtility({
6959
6884
  name: `divide-${axis}`,
6885
+ themeKeys: ["divideWidth", "borderWidth"],
6960
6886
  supportsArbitrary: true,
6961
6887
  handleBareValue: ({ value }) => /^\d+$/.test(value) ? `${value}px` : null,
6962
6888
  handle: (value) => divide(value),
@@ -6971,6 +6897,7 @@ functionalUtility({
6971
6897
  supportsCustomProperty: true,
6972
6898
  supportsOpacity: true,
6973
6899
  handle: (value, ctx, token, extra) => {
6900
+ if (extra?.themeNamespace === "borderWidth") return withBorderStyle(["border-width"], value);
6974
6901
  if (extra?.realThemeValue) return themeColorDecls("border-color", value, extra);
6975
6902
  if (token.arbitrary) {
6976
6903
  if (parseLength(value)) return withBorderStyle(["border-width"], value);
@@ -7047,11 +6974,12 @@ functionalUtility({
7047
6974
  });
7048
6975
  functionalUtility({
7049
6976
  name: "outline",
7050
- themeKeys: ["colors", "borderWidth"],
6977
+ themeKeys: ["colors", "outlineWidth"],
7051
6978
  supportsArbitrary: true,
7052
6979
  supportsCustomProperty: true,
7053
6980
  supportsOpacity: true,
7054
6981
  handle: (value, ctx, token, extra) => {
6982
+ if (extra?.themeNamespace === "outlineWidth") return withOutlineStyle(value);
7055
6983
  if (extra?.realThemeValue) return themeColorDecls("outline-color", value, extra);
7056
6984
  if (parseColor(value)) return [decl("outline-color", value)];
7057
6985
  if (parseNumber(value)) return withOutlineStyle(`${value}px`);
@@ -7524,11 +7452,11 @@ staticUtility("stroke-black", [["stroke", "#000"]], { category: "svg" });
7524
7452
  staticUtility("stroke-white", [["stroke", "#fff"]], { category: "svg" });
7525
7453
  functionalUtility({
7526
7454
  name: "stroke",
7527
- themeKeys: ["colors"],
7455
+ themeKeys: ["colors", "strokeWidth"],
7528
7456
  supportsArbitrary: true,
7529
7457
  supportsCustomProperty: true,
7530
7458
  handle: (value, ctx, token, extra) => {
7531
- if (parseNumber(value)) return [decl("stroke-width", value)];
7459
+ if (parseNumber(value) || extra?.themeNamespace === "strokeWidth") return [decl("stroke-width", value)];
7532
7460
  if (extra?.realThemeValue) return [decl("stroke", `var(--color-${extra.realThemeValue})`)];
7533
7461
  return [decl("stroke", value)];
7534
7462
  },
@@ -7684,7 +7612,7 @@ staticModifier("open", ["&:is([open], :popover-open, :open)"], {
7684
7612
  var withPseudoContent = (ast) => [
7685
7613
  atRoot([property("--baro-content", "\"\"")]),
7686
7614
  ...ast,
7687
- decl("content", "var(--baro-content)")
7615
+ ...ast.some((n) => n.type === "decl" && n.prop === "content") ? [] : [decl("content", "var(--baro-content)")]
7688
7616
  ];
7689
7617
  staticModifier("before", ["&::before"], {
7690
7618
  source: "pseudo",
@@ -7694,19 +7622,14 @@ staticModifier("after", ["&::after"], {
7694
7622
  source: "pseudo",
7695
7623
  astHandler: withPseudoContent
7696
7624
  });
7697
- staticModifier("placeholder", [
7698
- "&::placeholder",
7699
- "&::-webkit-input-placeholder",
7700
- "&::-moz-placeholder",
7701
- "&:-ms-input-placeholder"
7702
- ], { source: "pseudo" });
7703
- staticModifier("selection", ["&::selection", "&::-moz-selection"], { source: "pseudo" });
7704
- staticModifier("file", ["&::file-selector-button", "&::-webkit-file-upload-button"], { source: "pseudo" });
7625
+ staticModifier("placeholder", ["&::placeholder"], { source: "pseudo" });
7626
+ staticModifier("selection", ["& *::selection", "&::selection"], { source: "pseudo" });
7627
+ staticModifier("file", ["&::file-selector-button"], { source: "pseudo" });
7705
7628
  staticModifier("marker", [
7629
+ "& *::marker",
7706
7630
  "&::marker",
7707
- "&::-webkit-details-marker",
7708
- "&::-moz-list-bullet",
7709
- "&::-moz-list-number"
7631
+ "& *::-webkit-details-marker",
7632
+ "&::-webkit-details-marker"
7710
7633
  ], { source: "pseudo" });
7711
7634
  staticModifier("details-content", ["&::details-content"], { source: "pseudo" });
7712
7635
  staticModifier("first-line", ["&::first-line"], { source: "pseudo" });
@@ -7764,7 +7687,9 @@ function attributeVariantSelector(variant) {
7764
7687
  return `[${kind}-${key}=${/^(["']).*\1$/.test(raw) ? raw : `"${decodeArbitrarySelector(raw)}"`}]`;
7765
7688
  }
7766
7689
  const bare = /^data-([a-zA-Z0-9_-]+)$/.exec(variant);
7767
- return bare ? `[data-${bare[1]}]` : void 0;
7690
+ if (bare) return `[data-${bare[1]}]`;
7691
+ const aria = /^aria-([a-zA-Z0-9_-]+)$/.exec(variant);
7692
+ return aria ? `[aria-${aria[1]}="true"]` : void 0;
7768
7693
  }
7769
7694
  /**
7770
7695
  * The argument of a `:has()`/`:not()` built from an arbitrary value: a selector list is wrapped as `*:is(…)`
@@ -7785,6 +7710,80 @@ function hasTopLevelComma(value) {
7785
7710
  }
7786
7711
  return false;
7787
7712
  }
7713
+ /**
7714
+ * #335: the pseudo-class selector (`:hover`, `:first-child`, `:nth-child(odd)`) of a registered static
7715
+ * variant, for compounding in not-/group-/peer-/has- forms, or null when the variant is unknown or is not a
7716
+ * single pseudo-class (pseudo-elements, at-rules, multi-selector variants). Tailwind 4.3.3 emits nothing
7717
+ * for a compound variant whose inner variant it cannot compound (`not-foo`, `group-before`, `peer-has-foo`).
7718
+ */
7719
+ function pseudoClassOf(name, ctx) {
7720
+ const plugin = getModifier(ctx).find((p) => p.name === name && p.match(name, ctx));
7721
+ if (!plugin?.modifySelector) return null;
7722
+ const r = plugin.modifySelector({
7723
+ selector: "&",
7724
+ fullClassName: "",
7725
+ mod: { type: name },
7726
+ context: ctx
7727
+ });
7728
+ const list = Array.isArray(r) ? r : r && typeof r === "object" ? [r] : typeof r === "string" ? [{ selector: r }] : [];
7729
+ if (list.length !== 1) return null;
7730
+ const m = /^&(:(?!:)[a-zA-Z-]+(?:\(.*\))?)$/.exec(list[0].selector);
7731
+ return m ? m[1] : null;
7732
+ }
7733
+ /**
7734
+ * #352: the selector `not-<v>` / `group-not-<v>` negates: an attribute variant (`data-*`, `aria-*`), a
7735
+ * pseudo-class (#335), or a wrap-free `has-*` variant (`has-[…]`, `has-aria-*`), as Tailwind 4.3.3 compounds
7736
+ * them. Null when `<v>` is unknown or is not a single compound on `&`.
7737
+ */
7738
+ function negatableSelectorOf(name, ctx) {
7739
+ const attr = attributeVariantSelector(name);
7740
+ if (attr) return attr;
7741
+ const pc = pseudoClassOf(name, ctx);
7742
+ if (pc || !name.startsWith("has-")) return pc;
7743
+ const plugin = getModifier(ctx).find((p) => p.match(name, ctx));
7744
+ if (!plugin?.modifySelector || plugin.wrap || plugin.astHandler) return null;
7745
+ const r = plugin.modifySelector({
7746
+ selector: "&",
7747
+ fullClassName: "",
7748
+ mod: { type: name },
7749
+ context: ctx
7750
+ });
7751
+ const list = Array.isArray(r) ? r : r && typeof r === "object" ? [r] : typeof r === "string" ? [{ selector: r }] : [];
7752
+ if (list.length !== 1) return null;
7753
+ const m = /^&(:has\(.+\))$/.exec(list[0].selector);
7754
+ return m && !m[1].includes("&") ? m[1] : null;
7755
+ }
7756
+ /**
7757
+ * #352: `not-<v>` for a wrap-only at-rule variant (`md`, `max-md`, `min-[…]`, `print`, `motion-safe`,
7758
+ * `supports-[…]`, `dark` in media mode): the same at-rule with its condition negated (`@media not (…)`,
7759
+ * `@supports not (…)`), as Tailwind 4.3.3 emits it. Null for anything else, and for a prelude that is a list
7760
+ * or already combines conditions, where a leading `not` would not negate the whole query.
7761
+ */
7762
+ function negatedAtRuleOf(name, ctx) {
7763
+ if (name.startsWith("not-")) return null;
7764
+ const plugin = getModifier(ctx).find((p) => p.match(name, ctx));
7765
+ if (!plugin?.wrap || plugin.astHandler) return null;
7766
+ if (plugin.modifySelector) {
7767
+ const r = plugin.modifySelector({
7768
+ selector: "&",
7769
+ fullClassName: "",
7770
+ mod: { type: name },
7771
+ context: ctx
7772
+ });
7773
+ if ((typeof r === "string" ? r : Array.isArray(r) ? r.length === 1 ? r[0].selector : null : r?.selector) !== "&") return null;
7774
+ }
7775
+ const items = plugin.wrap({ type: name }, ctx);
7776
+ if (items.length !== 1) return null;
7777
+ const node = items[0];
7778
+ if (node.type !== "at-rule" || node.name !== "media" && node.name !== "supports" || node.nodes?.length) return null;
7779
+ const params = (node.params ?? "").trim();
7780
+ if (!params || /^not\b|,|\s(and|or)\s/i.test(params)) return null;
7781
+ return {
7782
+ ...node,
7783
+ params: `not ${params}`,
7784
+ nodes: []
7785
+ };
7786
+ }
7788
7787
  //#endregion
7789
7788
  //#region src/presets/variants/responsive.ts
7790
7789
  functionalModifier((mod, context) => {
@@ -7935,6 +7934,7 @@ function innerCompound(variant, ctx) {
7935
7934
  mod: { type: variant },
7936
7935
  context: ctx
7937
7936
  });
7937
+ if (out == null) return void 0;
7938
7938
  const list = typeof out === "string" ? [{ selector: out }] : Array.isArray(out) ? out : [out];
7939
7939
  if (list.length !== 1) return void 0;
7940
7940
  const sel = list[0].selector;
@@ -8029,6 +8029,10 @@ functionalModifier((mod, ctx) => {
8029
8029
  }, groupHasSelector);
8030
8030
  //#endregion
8031
8031
  //#region src/presets/variants/negation-variants.ts
8032
+ functionalModifier((mod, context) => /^not-(?!@)/.test(mod) && !!negatedAtRuleOf(mod.slice(4), context), () => "&", (mod, context) => {
8033
+ const node = negatedAtRuleOf(mod.type.slice(4), context);
8034
+ return node ? [node] : [];
8035
+ });
8032
8036
  functionalModifier((mod) => /^not-\[.*\]$/.test(mod), ({ selector, mod }) => {
8033
8037
  const m = /^not-\[(.+)\]$/.exec(mod.type);
8034
8038
  if (m) {
@@ -8050,10 +8054,12 @@ functionalModifier((mod) => /^not-\[.*\]$/.test(mod), ({ selector, mod }) => {
8050
8054
  source: "attribute"
8051
8055
  };
8052
8056
  });
8053
- functionalModifier((mod) => /^not-/.test(mod) && !mod.startsWith("not-@"), ({ selector, mod }) => {
8057
+ functionalModifier((mod) => /^not-/.test(mod) && !mod.startsWith("not-@"), ({ selector, mod, context }) => {
8054
8058
  const m = /^not-(.+)$/.exec(mod.type);
8059
+ const inner = m ? negatableSelectorOf(m[1], context) : null;
8060
+ if (m && !inner) return null;
8055
8061
  return {
8056
- selector: m ? `&:not(:${m[1]})` : selector,
8062
+ selector: inner ? `&:not(${inner})` : selector,
8057
8063
  flatten: false,
8058
8064
  wrappingType: "rule",
8059
8065
  source: "attribute"
@@ -8113,7 +8119,7 @@ functionalModifier((mod) => /^aria-/.test(mod), ({ selector, mod }) => {
8113
8119
  source: "aria"
8114
8120
  };
8115
8121
  }, void 0);
8116
- functionalModifier((mod) => mod.startsWith("not-") && !mod.startsWith("not-@"), ({ selector, mod }) => {
8122
+ functionalModifier((mod) => mod.startsWith("not-") && !mod.startsWith("not-@"), ({ selector, mod, context }) => {
8117
8123
  const pseudo = mod.type.replace("not-", "");
8118
8124
  if (pseudo.startsWith("[")) {
8119
8125
  const inner = pseudo.slice(1, -1);
@@ -8125,10 +8131,14 @@ functionalModifier((mod) => mod.startsWith("not-") && !mod.startsWith("not-@"),
8125
8131
  selector: `&:not(${functionalArgument(inner)})`,
8126
8132
  source: "attribute"
8127
8133
  };
8128
- } else return {
8129
- selector: `&:not(:${pseudo})`,
8130
- source: "attribute"
8131
- };
8134
+ } else {
8135
+ const inner = negatableSelectorOf(pseudo, context);
8136
+ if (!inner) return null;
8137
+ return {
8138
+ selector: `&:not(${inner})`,
8139
+ source: "attribute"
8140
+ };
8141
+ }
8132
8142
  }, void 0);
8133
8143
  functionalModifier((mod) => /^data-/.test(mod), ({ selector, mod }) => {
8134
8144
  const bracket = /^data-\[([a-zA-Z0-9_-]+)(?:=([^\]]+))?\]$/.exec(mod.type);
@@ -8241,11 +8251,13 @@ functionalModifier((mod) => /^(group|peer)-hover(\/[a-zA-Z0-9_-]+)?$/.test(mod),
8241
8251
  source: kind
8242
8252
  };
8243
8253
  }, () => [atRule("media", "(hover: hover)", [])]);
8244
- function negated(value) {
8254
+ function negated(value, ctx) {
8245
8255
  const v = value.slice(4);
8246
- return v.startsWith("[") && v.endsWith("]") ? `:not(*:is(${decodeArbitrarySelector(v.slice(1, -1))}))` : `:not(:${v})`;
8256
+ if (v.startsWith("[") && v.endsWith("]")) return `:not(*:is(${decodeArbitrarySelector(v.slice(1, -1))}))`;
8257
+ const inner = negatableSelectorOf(v, ctx);
8258
+ return inner ? `:not(${inner})` : null;
8247
8259
  }
8248
- functionalModifier((mod) => /^group-(.+)$/.test(mod) && !atRuleHas(mod), ({ selector, mod }) => {
8260
+ functionalModifier((mod) => /^group-(.+)$/.test(mod) && !atRuleHas(mod), ({ selector, mod, context }) => {
8249
8261
  const raw = /^group-(.+)$/.exec(mod.type);
8250
8262
  const [variant, base] = splitGroupName("group", raw?.[1] ?? "");
8251
8263
  const m = raw ? [raw[0], variant] : null;
@@ -8261,11 +8273,14 @@ functionalModifier((mod) => /^group-(.+)$/.test(mod) && !atRuleHas(mod), ({ sele
8261
8273
  wrappingType: "rule",
8262
8274
  source: "group"
8263
8275
  };
8264
- if (m?.[1]?.startsWith("not-")) return {
8265
- selector: `&:is(${g}${negated(m[1])} *)`,
8266
- wrappingType: "rule",
8267
- source: "group"
8268
- };
8276
+ if (m?.[1]?.startsWith("not-")) {
8277
+ const neg = negated(m[1], context);
8278
+ return neg ? {
8279
+ selector: `&:is(${g}${neg} *)`,
8280
+ wrappingType: "rule",
8281
+ source: "group"
8282
+ } : null;
8283
+ }
8269
8284
  if (m?.[1]?.startsWith("has-")) {
8270
8285
  const pattern = /^has-\[([a-zA-Z0-9_-]+)\]$/.exec(m?.[1]);
8271
8286
  if (pattern) return {
@@ -8291,8 +8306,10 @@ functionalModifier((mod) => /^group-(.+)$/.test(mod) && !atRuleHas(mod), ({ sele
8291
8306
  };
8292
8307
  }
8293
8308
  }
8309
+ const pc = m ? pseudoClassOf(m[1], context) : null;
8310
+ if (m && !pc) return null;
8294
8311
  return m ? {
8295
- selector: `&:is(${g}:${m[1]} *)`,
8312
+ selector: `&:is(${g}${pc} *)`,
8296
8313
  wrappingType: "rule",
8297
8314
  source: "group"
8298
8315
  } : {
@@ -8300,7 +8317,7 @@ functionalModifier((mod) => /^group-(.+)$/.test(mod) && !atRuleHas(mod), ({ sele
8300
8317
  source: "group"
8301
8318
  };
8302
8319
  }, void 0);
8303
- functionalModifier((mod) => /^peer-(.+)$/.test(mod) && !atRuleHas(mod), ({ selector, mod }) => {
8320
+ functionalModifier((mod) => /^peer-(.+)$/.test(mod) && !atRuleHas(mod), ({ selector, mod, context }) => {
8304
8321
  const raw = /^peer-(.+)$/.exec(mod.type);
8305
8322
  const [variant, base] = splitGroupName("peer", raw?.[1] ?? "");
8306
8323
  const m = raw ? [raw[0], variant] : null;
@@ -8321,14 +8338,22 @@ functionalModifier((mod) => /^peer-(.+)$/.test(mod) && !atRuleHas(mod), ({ selec
8321
8338
  selector: `&:is(${g}:has(${functionalArgument(value.slice(5, -1))}) ~ *)`,
8322
8339
  source: "peer"
8323
8340
  };
8324
- if (value?.startsWith("has-")) return {
8325
- selector: `&:is(${g}:has(:${value.slice(4)})~*)`,
8326
- source: "peer"
8327
- };
8328
- if (value?.startsWith("not-")) return {
8329
- selector: `&:is(${g}${negated(value)} ~ *)`,
8330
- source: "peer"
8331
- };
8341
+ if (value?.startsWith("has-")) {
8342
+ const pc = pseudoClassOf(value.slice(4), context);
8343
+ if (!pc) return null;
8344
+ return {
8345
+ selector: `&:is(${g}:has(${pc})~*)`,
8346
+ source: "peer"
8347
+ };
8348
+ }
8349
+ if (value?.startsWith("not-")) {
8350
+ const neg = negated(value, context);
8351
+ if (!neg) return null;
8352
+ return {
8353
+ selector: `&:is(${g}${neg} ~ *)`,
8354
+ source: "peer"
8355
+ };
8356
+ }
8332
8357
  if (value?.startsWith("aria-")) {
8333
8358
  let pattern = /^aria-([a-zA-Z0-9_]+)$/.exec(value);
8334
8359
  if (pattern) return {
@@ -8349,8 +8374,10 @@ functionalModifier((mod) => /^peer-(.+)$/.test(mod) && !atRuleHas(mod), ({ selec
8349
8374
  };
8350
8375
  }
8351
8376
  }
8377
+ const pc = m ? pseudoClassOf(value, context) : null;
8378
+ if (m && !pc) return null;
8352
8379
  return m ? {
8353
- selector: `&:is(${g}:${value}~*)`,
8380
+ selector: `&:is(${g}${pc}~*)`,
8354
8381
  source: "peer"
8355
8382
  } : {
8356
8383
  selector,
@@ -8399,6 +8426,7 @@ function toPx(n, unit) {
8399
8426
  }
8400
8427
  function preludeKey(kind, prelude) {
8401
8428
  const container = kind === "container";
8429
+ if (!container && /^\s*not\b/i.test(prelude)) return [0, 0];
8402
8430
  const min = MIN_W.exec(prelude);
8403
8431
  if (min) return [container ? 4 : 2, toPx(min[1], min[2])];
8404
8432
  const max = MAX_W.exec(prelude);
@@ -8434,6 +8462,6 @@ function upperBound(keys, key) {
8434
8462
  return lo;
8435
8463
  }
8436
8464
  //#endregion
8437
- export { AstCache, IncrementalParser, ParseResultCache, UtilityCache, WeakCache, arbitraryPropertyRegistration, astCache, astToCss, atRoot, atRule, clearAllCaches, clearAstCache, collectDeclPaths, comment, compareKeys, configGetter, createContext, decl, declPathToAst, deepMerge, defaultConfig, escapeClassName, expandThemeFunctions, functionalModifier, functionalUtility, generateCss, generateCssFromJson, generateCssRules, getAstCacheStats, getModifier, getPreflightCSS, getUtility, hasCommentDelimiter, hasCommentToken, hasHtmlEndTagOpener, hasPreset, isBalancedPrelude, isDebug, isSafeVariantToken, isSafeVariantValue, isStructureSafeValue, isWellFormedVariantBrackets, jsonToAst, mergeAstTreeList, modifierRegistry, normalizeMathSpacing, optimizeAst, parseClassName, parseClassToAst, parseResultCache, property, raw, registerModifier, registerUtility, resolveTheme, rootToCss, rule, ruleSortKey, setContextCacheReset, setDebug, staticModifier, staticUtility, styleRule, themeGetter, themeToCssVars, tokenize, upperBound, utilityCache };
8465
+ export { AstCache, IncrementalParser, ParseResultCache, UtilityCache, WeakCache, arbitraryPropertyRegistration, astCache, astToCss, atRoot, atRule, clearAllCaches, clearAstCache, collectDeclPaths, comment, compareKeys, configGetter, createContext, decl, declPathToAst, deepMerge, defaultConfig, escapeClassName, expandThemeFunctions, functionalModifier, functionalUtility, generateCss, generateCssFromJson, generateCssRules, getAstCacheStats, getModifier, getPreflightCSS, getUtility, hasCommentDelimiter, hasCommentToken, hasHtmlEndTagOpener, hasPreset, isBalancedPrelude, isDebug, isSafeVariantToken, isSafeVariantValue, isStructureSafeValue, isWellFormedVariantBrackets, jsonToAst, mergeAstTreeList, modifierRegistry, normalizeMathSpacing, optimizeAst, parseClassName, parseClassToAst, parseResultCache, property, raw, registerModifier, registerUtility, resolveTheme, rootToCss, rule, ruleSortKey, setContextCacheReset, setDebug, staticModifier, staticUtility, styleRule, themeGetter, themeKeyValue, themeKeyVar, themeToCssVars, tokenize, upperBound, utilityCache };
8438
8466
 
8439
8467
  //# sourceMappingURL=index.js.map