@frontfriend/tailwind 4.0.15 → 4.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frontfriend/tailwind",
-  "version": "4.0.15",
+  "version": "4.0.17",
   "description": "Design token management for Tailwind CSS",
   "main": "./dist/index.js",
   "types": "./dist/types/index.d.ts",

package/scripts/master-components-config.json

@@ -48,12 +48,23 @@
     "footer": "flex flex-row justify-end gap-4",
     "title": "text-lg font-semibold text-neutral-mid",
     "description": "text-sm text-neutral-subtle font-medium",
+    "media": "mb-2 inline-flex size-16 items-center justify-center rounded-md bg-neutral-subtle sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
     "cancel": "sm:mt-0"
   },
   "avatar": {
-    "root": "font-primary relative border-neutral-low flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+    "root": "font-primary group/avatar relative border-neutral-low flex h-10 w-10 shrink-0 overflow-hidden rounded-full select-none",
     "image": "aspect-square h-full w-full",
-    "fallback": "bg-brand-low flex h-full w-full items-center justify-center rounded-full text-interactive-mid text-[40cqw]"
+    "fallback": "bg-brand-low flex h-full w-full items-center justify-center rounded-full text-interactive-mid text-[40cqw] group-data-[size=sm]/avatar:text-xs",
+    "badge": "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-brand-mid text-onbrand-mid ring-2 ring-layer-base select-none group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2 group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+    "group": "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-layer-base",
+    "groupCount": "relative flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-brand-low text-sm text-interactive-mid ring-2 ring-layer-base group-has-data-[size=lg]/avatar-group:h-10 group-has-data-[size=lg]/avatar-group:w-10 group-has-data-[size=sm]/avatar-group:h-6 group-has-data-[size=sm]/avatar-group:w-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+    "props": {
+      "size": {
+        "default": "",
+        "sm": "h-6 w-6",
+        "lg": "h-10 w-10"
+      }
+    }
   },
   "badge": {
     "root": "font-primary shrink-0 [&>svg]:h-4 [&>svg]:w-4 gap-x-1 pt-0.5 pb-0.5 pl-2.5 pr-2.5 rounded-sm text-xs leading-snug font-medium border flex items-center justify-center box-border h-5 inline-flex overflow-hidden",
@@ -228,6 +239,7 @@
     "description": "text-xs font-medium text-neutral-subtle",
     "header": "flex flex-col space-y-1.5 p-4 pb-0 rounded-t-2xl",
     "content": "p-4 gap-4",
+    "action": "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
     "footer": "flex gap-4 items-center p-4 bg-neutral-subtle rounded-b-2xl",
     "footerAlign": {
       "justify": "flex justify-between",
@@ -259,7 +271,8 @@
     "slots": {
       "dialog": {
         "content": "overflow-hidden p-0",
-        "root": "**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-mid [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
+        "root": "**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-mid [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",
+        "srOnly": "sr-only"
       },
       "input": {
         "wrapper": "flex h-9 items-center gap-2 border-b border-neutral-subtle px-3 text-neutral-subtle",
@@ -702,6 +715,12 @@
   },
   "popover": {
     "root": "z-30 font-primary w-72 rounded border gap-0 border-neutral-subtle bg-layer-popover text-neutral-mid shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 shadow-md",
+    "slots": {
+      "trigger": "rounded",
+      "header": "flex flex-col gap-1 text-sm",
+      "title": "font-medium",
+      "description": "text-neutral-subtle"
+    },
     "padding": {
       "true": "p-4",
       "false": "p-0"
@@ -783,13 +802,13 @@
   },
   "sidebar": {
     "sheet": {
-      "root": "w-[--sidebar-width] bg-layer-below p-0 text-neutral-strong [&>button]:hidden"
+      "root": "w-[var(--sidebar-width)] bg-layer-below p-0 text-neutral-strong [&>button]:hidden"
     },
     "provider": {
       "wrapper": "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar"
     },
     "root": {
-      "base": "flex h-full w-[--sidebar-width] flex-col bg-layer-below text-neutral-strong",
+      "base": "flex h-full w-[var(--sidebar-width)] flex-col bg-layer-below text-neutral-strong",
       "props": {
         "width": {
           "root": "16rem",
@@ -801,24 +820,24 @@
       "container": "flex h-full w-full flex-col",
       "default": "group peer hidden lg:block",
       "wrapper": {
-        "base": "duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
+        "base": "duration-200 relative h-svh w-[var(--sidebar-width)] bg-transparent transition-[width] ease-linear",
         "collapsibleOffcanvas": "group-data-[collapsible=offcanvas]:w-0",
         "flipped": "group-data-[side=right]:rotate-180",
         "variants": {
           "floating": "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]",
           "inset": "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]",
-          "default": "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+          "default": "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]"
         }
       },
       "fixed": {
-        "base": "duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex border-neutral-subtle",
+        "base": "duration-200 fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)] transition-[left,right,width] ease-linear md:flex border-neutral-subtle",
         "side": {
           "left": "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]",
           "right": "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]"
         },
         "variants": {
           "floatingOrInset": "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]",
-          "default": "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l"
+          "default": "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)] group-data-[side=left]:border-r group-data-[side=right]:border-l"
         },
         "inner": "flex h-full w-full flex-col text-neutral-strong bg-layer-below group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-neutral-subtle group-data-[variant=floating]:shadow"
       }
@@ -846,7 +865,7 @@
       "skeleton": {
         "root": "rounded-md h-8 flex gap-2 px-2 items-center",
         "icon": "size-4 rounded-md",
-        "text": "h-4 flex-1 max-w-[--skeleton-width]"
+        "text": "h-4 flex-1 max-w-[var(--skeleton-width)]"
       },
       "button": {
         "root": "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded py-2 px-3 text-left text-sm outline-none transition-[width,height,padding] focus-visible:ring-2 active:bg-neutral-subtle active:text-neutral-strong disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-neutral-subtle data-[active=true]:font-medium data-[active=true]:text-neutral-strong data-[state=open]:hover:bg-neutral-subtle data-[state=open]: group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 font-medium",
@@ -942,6 +961,8 @@
       }
     },
     "icon": {
+      "root": "size-4",
+      "loading": "size-4 animate-spin",
       "variant": {
         "neutral": "text-icon-neutral-mid",
         "destructive": "text-icon-onnegative-low",
@@ -1076,7 +1097,17 @@
     "root": "text-center",
     "prefix": "absolute left-14 top-1/2 transform -translate-y-1/2 font-medium text-sm font-primary disabled:opacity-100 disabled:bg-disabled disabled:text-disabled disabled:cursor-not-allowed",
     "suffix": "absolute right-14 top-1/2 transform -translate-y-1/2 font-medium text-sm font-primary disabled:opacity-100 disabled:bg-disabled disabled:text-disabled disabled:cursor-not-allowed",
-    "padding": "px-16"
+    "padding": "px-16",
+    "slots": {
+      "numberField": {
+        "root": "grid gap-1.5",
+        "content": "relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5",
+        "input": "flex h-9 w-full rounded-md border border-neutral-subtle bg-layer-below py-1 text-sm text-center shadow-sm transition-colors placeholder:text-neutral-mid focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-brand-mid disabled:cursor-not-allowed disabled:opacity-50",
+        "increment": "absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3",
+        "decrement": "absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20",
+        "icon": "h-4 w-4"
+      }
+    }
   },
   "resizable": {
     "root": "flex h-full w-full data-[panel-group-direction=vertical]:flex-col data-[orientation=vertical]:flex-col",
@@ -1096,11 +1127,13 @@
       "item": "group/step flex items-center justify-center not-last:flex-1 data-[disabled]:pointer-events-none data-[disabled]:opacity-60 group-data-[orientation=horizontal]/stepper-nav:flex-row group-data-[orientation=vertical]/stepper-nav:flex-col",
       "trigger": "focus-visible:border-brand-mid focus-visible:ring-interactive-mid/50 inline-flex cursor-pointer items-center gap-2.5 rounded-full outline-none focus-visible:z-10 focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-60",
       "indicator": "border-neutral-subtle bg-neutral-subtle text-neutral-strong data-[state=completed]:bg-brand-mid data-[state=completed]:text-onbrand-mid data-[state=active]:bg-brand-mid data-[state=active]:text-onbrand-mid data-[state=loading]:bg-brand-mid data-[state=loading]:text-onbrand-mid relative flex size-6 shrink-0 items-center justify-center overflow-hidden rounded-full text-xs",
+      "indicatorContent": "absolute",
       "separator": "bg-neutral-subtle group-data-[state=completed]/step:bg-brand-mid data-[state=completed]:bg-brand-mid m-0.5 rounded-sm group-data-[orientation=horizontal]/stepper-nav:h-0.5 group-data-[orientation=horizontal]/stepper-nav:flex-1 group-data-[orientation=vertical]/stepper-nav:h-12 group-data-[orientation=vertical]/stepper-nav:w-0.5",
       "title": "text-sm leading-none font-medium text-neutral-strong",
       "description": "text-sm text-neutral-mid",
       "panel": "w-full",
-      "content": "w-full"
+      "content": "w-full",
+      "contentHidden": "hidden"
     }
   },
   "tabBar": {

package/scripts/update-default-config-data.js

@@ -240,11 +240,13 @@ const MINIMAL_V4_FALLBACKS = {
     item: 'group/step flex items-center justify-center not-last:flex-1 data-[disabled]:pointer-events-none data-[disabled]:opacity-60 group-data-[orientation=horizontal]/stepper-nav:flex-row group-data-[orientation=vertical]/stepper-nav:flex-col',
     trigger: 'focus-visible:border-ring focus-visible:ring-ring/50 inline-flex cursor-pointer items-center gap-2.5 rounded-full outline-none focus-visible:z-10 focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-60',
     indicator: 'border-background bg-muted text-foreground data-[state=completed]:bg-primary data-[state=completed]:text-primary-foreground data-[state=active]:bg-primary data-[state=active]:text-primary-foreground relative flex size-6 shrink-0 items-center justify-center overflow-hidden rounded-full text-xs',
+    indicatorContent: 'absolute',
     separator: 'bg-muted group-data-[state=completed]/step:bg-primary data-[state=completed]:bg-primary m-0.5 rounded-sm group-data-[orientation=horizontal]/stepper-nav:h-0.5 group-data-[orientation=horizontal]/stepper-nav:flex-1 group-data-[orientation=vertical]/stepper-nav:h-12 group-data-[orientation=vertical]/stepper-nav:w-0.5',
     title: 'text-sm leading-none font-medium text-foreground',
     description: 'text-sm text-muted-foreground',
     panel: 'w-full',
     content: 'w-full',
+    contentHidden: 'hidden',
   },
   themeprovider: { root: 'contents' },
   themepicker: {
@@ -333,6 +335,18 @@ const SHADCN_DEFAULTS = {
   input: {
     root:
       'font-primary flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base md:text-sm shadow-xs transition-[color,box-shadow] outline-none text-foreground placeholder:text-muted-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive disabled:cursor-not-allowed disabled:opacity-50',
+    numberField: {
+      root: 'grid gap-1.5',
+      content:
+        'relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5',
+      input:
+        'flex h-9 w-full rounded-md border border-input bg-transparent py-1 text-sm text-center shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+      increment:
+        'absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3',
+      decrement:
+        'absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20',
+      icon: 'h-4 w-4',
+    },
   },
   // Fidelity pass (#468 follow-up): align components whose neutralized treatment
   // visibly diverged from shadcn new-york-v4 (size scale / padding / shape).
@@ -362,9 +376,22 @@ const SHADCN_DEFAULTS = {
     icon: 'size-2 rounded-full',
   },
   avatar: {
-    root: 'font-primary relative flex size-8 shrink-0 overflow-hidden rounded-full',
+    root: 'font-primary group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none',
     fallback:
-      'bg-muted flex size-full items-center justify-center rounded-full text-sm text-muted-foreground',
+      'bg-muted flex size-full items-center justify-center rounded-full text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs',
+    badge:
+      'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2 group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
+    group:
+      'group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',
+    groupCount:
+      'relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',
+    props: {
+      size: {
+        default: '',
+        sm: 'size-6',
+        lg: 'size-10',
+      },
+    },
   },
   card: {
     root:
@@ -373,11 +400,87 @@ const SHADCN_DEFAULTS = {
     content: 'px-6',
     footer: 'flex gap-4 items-center px-6',
   },
+  navigationmenu: {
+    item: 'relative',
+  },
+  sheet: {
+    srOnly: 'sr-only',
+  },
+  sidebar: {
+    srOnly: 'sr-only',
+  },
+  resizable: {
+    handleIcon: 'z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border',
+    iconSize: '2.5',
+    icons: {
+      handle: 'GripVertical',
+    },
+  },
+  chart: {
+    slots: {
+      tooltip: {
+        root: 'grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl',
+        label: {
+          root: 'flex flex-1 justify-between leading-none',
+          wrapper: 'font-medium',
+        },
+        payload: {
+          root: 'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground',
+          wrapper: 'grid gap-1.5',
+        },
+        indicator: 'shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]',
+        value: 'font-mono font-medium tabular-nums text-foreground',
+      },
+      legend: {
+        content: {
+          root: 'flex items-center justify-center gap-4',
+          wrapper: 'flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground',
+        },
+        align: {
+          true: 'pb-3',
+          false: 'pt-3',
+        },
+        item: 'h-2 w-2 shrink-0 rounded-[2px]',
+      },
+      dot: {
+        indicator: {
+          root: 'items-center',
+          size: 'h-2.5 w-2.5',
+        },
+      },
+      line: {
+        indicator: {
+          size: 'w-1',
+        },
+      },
+      dashed: {
+        indicator: {
+          root: 'w-0 border-[1.5px] border-dashed bg-transparent',
+          label: 'my-0.5',
+        },
+      },
+      nest: {
+        label: {
+          true: 'items-end',
+          false: 'items-center',
+          container: 'grid gap-1.5',
+          text: 'text-muted-foreground',
+        },
+      },
+    },
+  },
+  drawer: {
+    handle:
+      'bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block',
+  },
   tooltip: {
     content:
       'z-30 w-fit overflow-hidden rounded-md font-normal font-primary bg-foreground px-3 py-1.5 text-xs text-balance text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+    arrow:
+      'z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground',
   },
   tabs: {
+    root: 'group/tabs flex gap-2 data-[orientation=horizontal]:flex-col',
     list: {
       root:
         'inline-flex h-9 w-fit gap-1 items-center justify-center rounded-lg p-[3px] font-primary bg-muted text-muted-foreground',
@@ -453,6 +556,7 @@ const FORBIDDEN_DEFAULT_CLASS_PATTERNS = [
   /(?:^|:)text-onbrand(?:-|$)/,
   /(?:^|:)(?:text|fill)-icon-(?:brand|onbrand)(?:-|$)/,
   /(?:^|:)border-brand(?:-|$)/,
+  /(?:^|:)ring-brand(?:-|$)/,
   /(?:^|:)bg-layer(?:-|$)/,
   /(?:^|:)bg-disabled$/,
   /(?:^|:)text-disabled$/,
@@ -585,6 +689,21 @@ function mapBorderClass(base, prefix) {
   return important + withVariantTone(prefix, mapped);
 }
 
+function mapRingClass(base, prefix) {
+  const match = base.match(/^!?ring-([a-z]+)(?:-[a-z]+)*(?:-(hover|active|selected|disabled))?$/);
+  if (!match) return null;
+  const important = base.startsWith('!') ? '!' : '';
+  const family = match[1];
+  // `ring-ring`, `ring-border`, `ring-background`, … carry no FF color family and
+  // are already neutral shadcn tokens, so they fall through untouched here.
+  if (!COLOR_FAMILIES.has(family)) return null;
+
+  let mapped;
+  if (family === 'negative') mapped = 'ring-destructive';
+  else mapped = 'ring-ring';
+  return important + withVariantTone(prefix, mapped);
+}
+
 function neutralizeClassToken(token) {
   if (!token) return token;
   if (DIRECT_CLASS_MAP[token]) return DIRECT_CLASS_MAP[token];
@@ -599,6 +718,7 @@ function neutralizeClassToken(token) {
     || mapBgClass(core, prefix)
     || mapTextClass(core, prefix)
     || mapBorderClass(core, prefix)
+    || mapRingClass(core, prefix)
     || mapRadiusClass(core)
     || core;