@epilot/volt-ui-experimental-griffel 0.1.2 → 0.2.0

package/dist/components/label/label.js

@@ -1,33 +1,40 @@
-import { jsx as l } from "react/jsx-runtime";
-import * as m from "react";
-import { shorthands as i } from "../../node_modules/@griffel/core/src/index.js";
-import { SLOT_ATTR as n } from "../../renderer/contract.js";
-import { makeVoltStyles as f } from "../../styles/make-styles.js";
-import { textBase as p, textSm as c, textXs as b, errorA12 as d, grayA12 as g, fontWeightNormal as y, spacingElement2 as S } from "../../tokens/index.js";
-import { mergeClasses as x } from "../../node_modules/@griffel/core/src/mergeClasses.js";
-const u = f({
+import { jsx as i } from "react/jsx-runtime";
+import * as l from "react";
+import { shorthands as n } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
+import { SLOT_ATTR as m } from "../../packages/volt-runtime/dist/renderer/contract.js";
+import { mergeClasses as f } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { makeVoltStyles as p } from "../../styles/make-styles.js";
+import { leadingBase as g, textBase as c, leadingSm as d, textSm as y, leadingXs as b, textXs as S, errorA12 as h, grayA12 as x, fontWeightNormal as u, spacingElement2 as z } from "../../tokens/index.js";
+const A = p({
   root: {
     display: "flex",
     alignItems: "center",
-    ...i.gap(S),
-    // No lineHeight, deliberately, and this is NOT an omission -- see vr/specimens for the label
-    // specimens that pin it.
+    ...n.gap(z),
+    // The leading lives on the size slots below, and which value it takes is a decided question --
+    // see DECISIONS.md D9 and the label specimens in vr/specimens that pin it.
     //
-    // v1 declares `leading-none` in source. It never reaches the DOM: v1's cn() runs tailwind-merge,
-    // which treats the later `text-sm` as also owning line-height (true in Tailwind v3) and drops
-    // `leading-none`. What ships then is `.volt-text-sm`, whose rule is
-    //   line-height: var(--volt-leading, var(--text-xs--line-height))
-    // and BOTH of those are undefined in the shipped sheet -- the prefixer rewrote the definition to
-    // --volt-text-sm--line-height but left the reference unprefixed. An invalid line-height falls
-    // back to inherited, which under root-config's Tailwind preflight is html { line-height: 1.5 }.
+    // v1's source string is `text-sm leading-none`, and `leading-none` never reaches the DOM: v1's
+    // cn() runs tailwind-merge, which treats the later `text-sm` as also owning line-height (true in
+    // Tailwind v3) and drops it. So the class that actually ships is `.volt-text-sm`, and what v1
+    // DECLARES for a label is text-sm's own leading -- 1.25rem at the base size, not 1.
     //
-    // So production v1 renders labels at 1.5, not at 1. Declaring `lineHeight: 1` here is faithful
-    // to v1's SOURCE and renders 7px shorter than v1 does, which would visibly shift every form
-    // layout on migration. Inheriting is faithful to v1's OUTPUT, and output is what Rule 0 means.
+    // v1 never renders that either. `.volt-text-sm` reads
+    //   line-height: var(--volt-leading, var(--text-sm--line-height))
+    // and neither name resolves in the shipped sheet: the prefixer rewrote the DEFINITION to
+    // --volt-text-sm--line-height and left this REFERENCE unprefixed, so the declaration is invalid
+    // and falls back to inherited -- 1.5 under root-config's Tailwind preflight, i.e. 21px at 14px.
     //
-    // Two v1 bugs compound to produce this. Both belong in a STABLE360 ticket against v1, and when
-    // v1 is fixed this decision should be revisited together with it -- not silently.
-    fontWeight: y,
+    // v2 renders the declared intent: `lineHeight: tokens.leadingSm` at size `base`, paired with the
+    // size the same way every other text slot in this package now is. Against what broken v1 renders
+    // that is 2px shorter per line at `sm`, 1px shorter at `base` and identical at `lg` -- small, but
+    // a real re-measure for a form, which is why D9 exists. The VR harness compares against
+    // v1-as-DECLARED via one documented shim on the v1 arm.
+    //
+    // Two v1 bugs compound here -- the unprefixed prefixer reference and the tailwind-merge drop --
+    // and both belong in a STABLE360 ticket against v1. When v1 is fixed, delete the VR shim (see
+    // vr/run.mjs V1_DECLARED_LEADING_SHIM); vr/v1-leading-references.test.ts fails on purpose to
+    // force that, so the decision gets revisited together with the fix rather than silently.
+    fontWeight: u,
     "&[for]": {
       cursor: "pointer"
     },
@@ -46,34 +53,37 @@ const u = f({
   },
   // Variants
   primary: {
-    color: g
+    color: x
   },
   destructive: {
-    color: d
+    color: h
   },
   // Sizes
   sm: {
-    fontSize: b
+    fontSize: S,
+    lineHeight: b
   },
   base: {
-    fontSize: c
+    fontSize: y,
+    lineHeight: d
   },
   lg: {
-    fontSize: p
+    fontSize: c,
+    lineHeight: g
   }
-}), E = m.forwardRef(
-  function({ variant: o = "primary", size: e = "base", className: r, ...a }, s) {
-    const t = u();
-    return /* @__PURE__ */ l(
+}), N = l.forwardRef(
+  function({ variant: t = "primary", size: o = "base", className: r, ...a }, s) {
+    const e = A();
+    return /* @__PURE__ */ i(
       "label",
       {
         ref: s,
         "data-slot": "label",
-        [n]: "label",
-        className: x(
-          t.root,
-          t[o],
-          t[e],
+        [m]: "label",
+        className: f(
+          e.root,
+          e[t],
+          e[o],
           r
         ),
         ...a
@@ -82,6 +92,6 @@ const u = f({
   }
 );
 export {
-  E as Label
+  N as Label
 };
 //# sourceMappingURL=label.js.map

package/dist/components/label/label.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.js","sources":["../../../src/components/label/label.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@griffel/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\n/**\n * Label — a native `<label>` element styled with Griffel atoms.\n *\n * Base UI has no Label primitive; v1 wrapped `@radix-ui/react-label`, which only added an\n * `onMouseDown` handler preventing text selection on double click while wrapping a `<label>`\n * to wire `htmlFor`. A native `<label>` natively associates with form controls via `htmlFor` or\n * nesting, so we render a native `<label>` directly with no Base UI or Radix dependency.\n *\n * Variants: `primary` (`gray-a12`) and `destructive` (`error-a12`), both from the core token\n * sheet so no palette install is required.\n *\n * Sizes: `sm` (`text-xs`), `base` (`text-sm`), and `lg` (`text-base`).\n */\n\nexport type LabelVariant = \"primary\" | \"destructive\"\nexport type LabelSize = \"sm\" | \"base\" | \"lg\"\n\nconst useStyles = makeVoltStyles({\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    // No lineHeight, deliberately, and this is NOT an omission -- see vr/specimens for the label\n    // specimens that pin it.\n    //\n    // v1 declares `leading-none` in source. It never reaches the DOM: v1's cn() runs tailwind-merge,\n    // which treats the later `text-sm` as also owning line-height (true in Tailwind v3) and drops\n    // `leading-none`. What ships then is `.volt-text-sm`, whose rule is\n    //   line-height: var(--volt-leading, var(--text-xs--line-height))\n    // and BOTH of those are undefined in the shipped sheet -- the prefixer rewrote the definition to\n    // --volt-text-sm--line-height but left the reference unprefixed. An invalid line-height falls\n    // back to inherited, which under root-config's Tailwind preflight is html { line-height: 1.5 }.\n    //\n    // So production v1 renders labels at 1.5, not at 1. Declaring `lineHeight: 1` here is faithful\n    // to v1's SOURCE and renders 7px shorter than v1 does, which would visibly shift every form\n    // layout on migration. Inheriting is faithful to v1's OUTPUT, and output is what Rule 0 means.\n    //\n    // Two v1 bugs compound to produce this. Both belong in a STABLE360 ticket against v1, and when\n    // v1 is fixed this decision should be revisited together with it -- not silently.\n    fontWeight: tokens.fontWeightNormal,\n    \"&[for]\": {\n      cursor: \"pointer\",\n    },\n    // The disabled-by-ANCESTOR and disabled-by-SIBLING rules are not here; they live on Field,\n    // which owns the elements those selectors are rooted at. See field.tsx.\n    //\n    // v1 expresses them with Tailwind's `group-data-[disabled=true]:` and `peer-disabled:`, which\n    // work only because Tailwind emits GLOBAL utility classes that can be rooted anywhere. Scoped\n    // atomic CSS cannot: a rule has to be declared by the component that owns the element the\n    // selector starts from. That is a real capability difference, and the consequence is recorded in\n    // field.tsx — a Label used OUTSIDE a Field, next to a disabled input, will not dim.\n    \"&[data-disabled]\": {\n      pointerEvents: \"none\",\n      opacity: 0.5,\n    },\n  },\n  // Variants\n  primary: {\n    color: tokens.grayA12,\n  },\n  destructive: {\n    color: tokens.errorA12,\n  },\n  // Sizes\n  sm: {\n    fontSize: tokens.textXs,\n  },\n  base: {\n    fontSize: tokens.textSm,\n  },\n  lg: {\n    fontSize: tokens.textBase,\n  },\n})\n\nexport type LabelProps = React.ComponentProps<\"label\"> & {\n  variant?: LabelVariant\n  size?: LabelSize\n}\n\nexport const Label = React.forwardRef<HTMLLabelElement, LabelProps>(\n  function Label(\n    { variant = \"primary\", size = \"base\", className, ...props },\n    ref\n  ) {\n    const styles = useStyles()\n\n    return (\n      <label\n        ref={ref}\n        data-slot=\"label\"\n        {...{ [SLOT_ATTR]: \"label\" }}\n        className={mergeClasses(\n          styles.root,\n          styles[variant],\n          styles[size],\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n)\n"],"names":["useStyles","makeVoltStyles","shorthands","tokens.spacingElement2","tokens.fontWeightNormal","tokens.grayA12","tokens.errorA12","tokens.textXs","tokens.textSm","tokens.textBase","Label","React","variant","size","className","props","ref","styles","jsx","SLOT_ATTR","mergeClasses"],"mappings":";;;;;;;AAyBA,MAAMA,IAAYC,EAAe;AAAA,EAC/B,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,GAAGC,EAAW,IAAIC,CAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAkBxC,YAAYC;AAAAA,IACZ,UAAU;AAAA,MACR,QAAQ;AAAA,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUV,oBAAoB;AAAA,MAClB,eAAe;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAAA;AAAA,EAGF,SAAS;AAAA,IACP,OAAOC;AAAAA,EAAO;AAAA,EAEhB,aAAa;AAAA,IACX,OAAOC;AAAAA,EAAO;AAAA;AAAA,EAGhB,IAAI;AAAA,IACF,UAAUC;AAAAA,EAAO;AAAA,EAEnB,MAAM;AAAA,IACJ,UAAUC;AAAAA,EAAO;AAAA,EAEnB,IAAI;AAAA,IACF,UAAUC;AAAAA,EAAO;AAErB,CAAC,GAOYC,IAAQC,EAAM;AAAA,EACzB,SACE,EAAE,SAAAC,IAAU,WAAW,MAAAC,IAAO,QAAQ,WAAAC,GAAW,GAAGC,EAAA,GACpDC,GACA;AACA,UAAMC,IAASjB,EAAA;AAEf,WACE,gBAAAkB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,aAAU;AAAA,QACJ,CAACG,CAAS,GAAG;AAAA,QACnB,WAAWC;AAAA,UACTH,EAAO;AAAA,UACPA,EAAOL,CAAO;AAAA,UACdK,EAAOJ,CAAI;AAAA,UACXC;AAAA,QAAA;AAAA,QAED,GAAGC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}
+{"version":3,"file":"label.js","sources":["../../../src/components/label/label.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\n/**\n * Label — a native `<label>` element styled with Griffel atoms.\n *\n * Base UI has no Label primitive; v1 wrapped `@radix-ui/react-label`, which only added an\n * `onMouseDown` handler preventing text selection on double click while wrapping a `<label>`\n * to wire `htmlFor`. A native `<label>` natively associates with form controls via `htmlFor` or\n * nesting, so we render a native `<label>` directly with no Base UI or Radix dependency.\n *\n * Variants: `primary` (`gray-a12`) and `destructive` (`error-a12`), both from the core token\n * sheet so no palette install is required.\n *\n * Sizes: `sm` (`text-xs`), `base` (`text-sm`), and `lg` (`text-base`).\n */\n\nexport type LabelVariant = \"primary\" | \"destructive\"\nexport type LabelSize = \"sm\" | \"base\" | \"lg\"\n\nconst useStyles = makeVoltStyles({\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    // The leading lives on the size slots below, and which value it takes is a decided question --\n    // see DECISIONS.md D9 and the label specimens in vr/specimens that pin it.\n    //\n    // v1's source string is `text-sm leading-none`, and `leading-none` never reaches the DOM: v1's\n    // cn() runs tailwind-merge, which treats the later `text-sm` as also owning line-height (true in\n    // Tailwind v3) and drops it. So the class that actually ships is `.volt-text-sm`, and what v1\n    // DECLARES for a label is text-sm's own leading -- 1.25rem at the base size, not 1.\n    //\n    // v1 never renders that either. `.volt-text-sm` reads\n    //   line-height: var(--volt-leading, var(--text-sm--line-height))\n    // and neither name resolves in the shipped sheet: the prefixer rewrote the DEFINITION to\n    // --volt-text-sm--line-height and left this REFERENCE unprefixed, so the declaration is invalid\n    // and falls back to inherited -- 1.5 under root-config's Tailwind preflight, i.e. 21px at 14px.\n    //\n    // v2 renders the declared intent: `lineHeight: tokens.leadingSm` at size `base`, paired with the\n    // size the same way every other text slot in this package now is. Against what broken v1 renders\n    // that is 2px shorter per line at `sm`, 1px shorter at `base` and identical at `lg` -- small, but\n    // a real re-measure for a form, which is why D9 exists. The VR harness compares against\n    // v1-as-DECLARED via one documented shim on the v1 arm.\n    //\n    // Two v1 bugs compound here -- the unprefixed prefixer reference and the tailwind-merge drop --\n    // and both belong in a STABLE360 ticket against v1. When v1 is fixed, delete the VR shim (see\n    // vr/run.mjs V1_DECLARED_LEADING_SHIM); vr/v1-leading-references.test.ts fails on purpose to\n    // force that, so the decision gets revisited together with the fix rather than silently.\n    fontWeight: tokens.fontWeightNormal,\n    \"&[for]\": {\n      cursor: \"pointer\",\n    },\n    // The disabled-by-ANCESTOR and disabled-by-SIBLING rules are not here; they live on Field,\n    // which owns the elements those selectors are rooted at. See field.tsx.\n    //\n    // v1 expresses them with Tailwind's `group-data-[disabled=true]:` and `peer-disabled:`, which\n    // work only because Tailwind emits GLOBAL utility classes that can be rooted anywhere. Scoped\n    // atomic CSS cannot: a rule has to be declared by the component that owns the element the\n    // selector starts from. That is a real capability difference, and the consequence is recorded in\n    // field.tsx — a Label used OUTSIDE a Field, next to a disabled input, will not dim.\n    \"&[data-disabled]\": {\n      pointerEvents: \"none\",\n      opacity: 0.5,\n    },\n  },\n  // Variants\n  primary: {\n    color: tokens.grayA12,\n  },\n  destructive: {\n    color: tokens.errorA12,\n  },\n  // Sizes\n  sm: {\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n  },\n  base: {\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n  },\n  lg: {\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n  },\n})\n\nexport type LabelProps = React.ComponentProps<\"label\"> & {\n  variant?: LabelVariant\n  size?: LabelSize\n}\n\nexport const Label = React.forwardRef<HTMLLabelElement, LabelProps>(\n  function Label(\n    { variant = \"primary\", size = \"base\", className, ...props },\n    ref\n  ) {\n    const styles = useStyles()\n\n    return (\n      <label\n        ref={ref}\n        data-slot=\"label\"\n        {...{ [SLOT_ATTR]: \"label\" }}\n        className={mergeClasses(\n          styles.root,\n          styles[variant],\n          styles[size],\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n)\n"],"names":["useStyles","makeVoltStyles","shorthands","tokens.spacingElement2","tokens.fontWeightNormal","tokens.grayA12","tokens.errorA12","tokens.textXs","tokens.leadingXs","tokens.textSm","tokens.leadingSm","tokens.textBase","tokens.leadingBase","Label","React","variant","size","className","props","ref","styles","jsx","SLOT_ATTR","mergeClasses"],"mappings":";;;;;;;AAyBA,MAAMA,IAAYC,EAAe;AAAA,EAC/B,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,GAAGC,EAAW,IAAIC,CAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAyBxC,YAAYC;AAAAA,IACZ,UAAU;AAAA,MACR,QAAQ;AAAA,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUV,oBAAoB;AAAA,MAClB,eAAe;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAAA;AAAA,EAGF,SAAS;AAAA,IACP,OAAOC;AAAAA,EAAO;AAAA,EAEhB,aAAa;AAAA,IACX,OAAOC;AAAAA,EAAO;AAAA;AAAA,EAGhB,IAAI;AAAA,IACF,UAAUC;AAAAA,IACV,YAAYC;AAAAA,EAAO;AAAA,EAErB,MAAM;AAAA,IACJ,UAAUC;AAAAA,IACV,YAAYC;AAAAA,EAAO;AAAA,EAErB,IAAI;AAAA,IACF,UAAUC;AAAAA,IACV,YAAYC;AAAAA,EAAO;AAEvB,CAAC,GAOYC,IAAQC,EAAM;AAAA,EACzB,SACE,EAAE,SAAAC,IAAU,WAAW,MAAAC,IAAO,QAAQ,WAAAC,GAAW,GAAGC,EAAA,GACpDC,GACA;AACA,UAAMC,IAASpB,EAAA;AAEf,WACE,gBAAAqB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,aAAU;AAAA,QACJ,CAACG,CAAS,GAAG;AAAA,QACnB,WAAWC;AAAAA,UACTH,EAAO;AAAA,UACPA,EAAOL,CAAO;AAAA,UACdK,EAAOJ,CAAI;AAAA,UACXC;AAAA,QAAA;AAAA,QAED,GAAGC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}