@flamingo-stack/openframe-frontend-core 0.0.550-1809.4793.1 → 0.0.550

package/src/components/features/og-editor-preview.tsx

@@ -57,7 +57,7 @@ export function OGEditorPreview({
       {/* SEO Title & Keywords - Same Row */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
         <div className="space-y-2">
-          <Label className="text-h6 text-ods-text-primary">
+          <Label>
             SEO Title
           </Label>
           <Input
@@ -70,7 +70,7 @@ export function OGEditorPreview({
         </div>
 
         <div className="space-y-2">
-          <Label className="text-h6 text-ods-text-primary">
+          <Label>
             SEO Keywords
           </Label>
           <Input
@@ -86,7 +86,7 @@ export function OGEditorPreview({
       {/* SEO Description & OG Image - Same Row */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
         <div className="space-y-2 flex flex-col h-full">
-          <Label className="text-h6 text-ods-text-primary">
+          <Label>
             SEO Description
           </Label>
           <Textarea
@@ -100,7 +100,7 @@ export function OGEditorPreview({
         </div>
 
         <div className="space-y-2 flex flex-col h-full">
-          <Label className="text-h6 text-ods-text-primary">
+          <Label>
             OG Image
           </Label>
           <div className="flex-1">

package/src/components/features/release-media-manager.tsx

@@ -169,7 +169,7 @@ export function ReleaseMediaManager({
       {media.length > 0 && (
         <div>
           <div className="flex items-center justify-between mb-4">
-            <Label className="text-h6 text-ods-text-primary">Media Gallery ({media.length})</Label>
+            <Label>Media Gallery ({media.length})</Label>
             <p className="text-h6 text-ods-text-secondary">Drag to reorder</p>
           </div>
 

package/src/components/features/seo-editor-preview.tsx

@@ -227,7 +227,7 @@ export function SEOEditorPreview({
         <div className="flex flex-col gap-[var(--spacing-system-xxs)]">
           {/* Group label for the upload widget — Field's exact label treatment,
               so the OG column's label row aligns with the Description Field. */}
-          <Label variant="small" className="text-ods-text-primary">
+          <Label>
             OG Image
           </Label>
 

package/src/components/ui/checkbox-with-description.tsx

@@ -47,7 +47,6 @@ const CheckboxWithDescription = React.forwardRef<
     <div className="flex flex-col gap-1">
       <Label
         htmlFor={id}
-        variant="small"
         spacing="tight"
         className={cn(
           "leading-none cursor-pointer",

package/src/components/ui/field-wrapper.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { Label } from './label'
 import * as React from "react"
 import { cn } from "../../utils/cn"
 
@@ -43,9 +44,9 @@ const FieldWrapper = React.forwardRef<HTMLDivElement, FieldWrapperProps>(
           // Field-wrapped controls with `label=`-prop controls showed two label
           // sizes side by side — the exact inconsistency the admin editors kept
           // reporting. One label scale, owned here and in Field together.
-          <label className="text-h6 text-ods-text-primary mb-1">
+          <Label className="mb-1">
             {label}
-          </label>
+          </Label>
         )}
         {children}
         {error && (

package/src/components/ui/field.tsx

@@ -67,7 +67,7 @@ export function Field({ label, hint, required, children, error, labelExtras, lab
   return (
     <div className="flex flex-col gap-[var(--spacing-system-xxs)]">
       <div className="flex items-center gap-1.5">
-        <Label htmlFor={controlId} variant="small" className="text-ods-text-primary">
+        <Label htmlFor={controlId}>
           {label}
           {required && ' *'}
         </Label>

package/src/components/ui/label.tsx

@@ -6,22 +6,38 @@ import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "../../utils/cn"
 
+/**
+ * THE form label. One treatment, stated once:
+ *
+ *  - Scale + color live in the BASE (`text-h6 text-ods-text-primary`), so call
+ *    sites never restate them — before this, ~100 call sites carried a
+ *    `className="text-ods-text-primary"` override and ~115 cargo-culted
+ *    `variant="small"` because the base under-specified.
+ *  - NO margin. Layout belongs to the CONTAINER (`Field`'s gap, a `space-y-2`
+ *    wrapper) — a margin inside a text primitive stacks with container gaps,
+ *    which is exactly how `Field` rows ended up 12px label→control while the
+ *    hand-rolled rows were 8px, and how labels sat 2px off their inline badges
+ *    in `items-center` rows. Opt into `spacing` ONLY when the label truly has
+ *    no spacing container.
+ *
+ * Raw `<label>` elements remain correct for CLICK-SURFACES (a field's adorned
+ * chrome, checkbox/radio rows, upload dropzones) — those are interaction
+ * wrappers, not text labels, and must not inherit this typography.
+ */
 const labelVariants = cva(
-  "block text-ods-text-primary",
+  "block text-h6 text-ods-text-primary",
   {
     variants: {
       variant: {
-        // default is text-h6, matching `Field`'s label (Label variant="small")
-        // and FieldWrapper — every bare <Label> is a form label, and the three
-        // primitives must agree on ONE label scale. Use variant="large" for an
-        // intentionally bigger label.
-        default: "text-h6",
-        small: "text-h6",
-        medium: "text-h6",
+        default: "",
+        /** @deprecated alias of `default` — the three small scales converged on text-h6. */
+        small: "",
+        /** @deprecated alias of `default`. */
+        medium: "",
         large: "text-h4"
       },
       spacing: {
-        default: "mb-1",
+        none: "",
         tight: "mb-0.5",
         normal: "mb-2",
         loose: "mb-3"
@@ -29,7 +45,7 @@ const labelVariants = cva(
     },
     defaultVariants: {
       variant: "default",
-      spacing: "default"
+      spacing: "none"
     }
   }
 )
@@ -38,12 +54,12 @@ const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
 >(({ className, variant, spacing, ...props }, ref) => (
-  <LabelPrimitive.Root 
-    ref={ref} 
-    className={cn(labelVariants({ variant, spacing }), className)} 
-    {...props} 
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants({ variant, spacing }), className)}
+    {...props}
   />
 ))
 Label.displayName = LabelPrimitive.Root.displayName
 
-export { Label }
+export { Label }

package/src/components/ui/tags-input.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import { Label } from './label'
 import { X, Plus } from "lucide-react"
 import { Input } from "./input"
 import { Button } from "./button"
@@ -66,9 +67,9 @@ export function TagsInput({
   return (
     <div className={cn("space-y-2", className)}>
       {label && (
-        <label className="text-h6 text-ods-text-primary">
+        <Label>
           {label}
-        </label>
+        </Label>
       )}
       
       <div className="flex items-center gap-2">