@loworbitstudio/visor-theme-engine 0.24.0 → 0.28.0

package/dist/adapters/index.js

@@ -9,6 +9,7 @@ import {
   collectDeclaredProperties,
   fontStack,
   generateDarkCss,
+  generateFontMetricDecls,
   generateFontSizeDecls,
   generateFontWeightDecls,
   generateHairlineDecls,
@@ -25,7 +26,7 @@ import {
   resolveThemeBrand,
   resolveThemeFonts,
   sectionComment
-} from "../chunk-D5XSLWXP.js";
+} from "../chunk-X2SWJPM2.js";
 
 // src/adapters/brand-passthrough.ts
 var SENTINEL_COLOR = "#ff00ff";
@@ -559,6 +560,7 @@ function generateTypographyDecls(config, aliases) {
   decls.push(`--font-body: ${fontStack(config.typography.body.family, aliases)};`);
   decls.push(`--font-mono: ${fontStack(config.typography.mono.family, aliases)};`);
   decls.push(...generateFontSizeDecls(config.typography.scale));
+  decls.push(...generateFontMetricDecls(config.typography.body.family));
   decls.push(...generateFontWeightDecls(config.typography));
   const lineHeights = {
     none: 1,

package/dist/{chunk-D5XSLWXP.js → chunk-X2SWJPM2.js}

@@ -1261,6 +1261,8 @@ var SKELETON = "components/ui/skeleton/skeleton.module.css";
 var SPINNER = "components/ui/spinner/spinner.module.css";
 var CHECKBOX = "components/ui/checkbox/checkbox.module.css";
 var INPUT = "components/ui/input/input.module.css";
+var SEPARATOR = "components/ui/separator/separator.module.css";
+var NUMBER_INPUT = "components/ui/number-input/number-input.module.css";
 var TEXTAREA = "components/ui/textarea/textarea.module.css";
 var SELECT = "components/ui/select/select.module.css";
 var SWITCH = "components/ui/switch/switch.module.css";
@@ -1271,7 +1273,10 @@ var FIELD = "components/ui/field/field.module.css";
 var TEXT = "components/ui/text/text.module.css";
 var INLINE_EDIT = "components/ui/inline-edit/inline-edit.module.css";
 var SAVE_STATUS = "components/ui/save-status/save-status.module.css";
+var SEGMENTED_CONTROL = "components/ui/segmented-control/segmented-control.module.css";
 var TOOLTIP = "components/ui/tooltip/tooltip.module.css";
+var ACTION_ROW = "components/ui/action-row/action-row.module.css";
+var DIALOG_FIELD = "blocks/dialog-field/dialog-field.module.css";
 function at(file, fallback) {
   return [{ file, fallback }];
 }
@@ -1536,6 +1541,7 @@ var emptyStateFamily = {
     { key: "heading-color", property: "color", description: "Heading colour.", consumers: at(EMPTY_STATE, "var(--text-primary, #111827)") },
     { key: "description-font-size", property: "font-size", description: "Description type size.", consumers: at(EMPTY_STATE, "var(--font-size-sm, 0.875rem)") },
     { key: "description-color", property: "color", description: "Description colour.", consumers: at(EMPTY_STATE, "var(--text-secondary, #6b7280)") },
+    { key: "error-color", property: "color", description: 'Icon, chip glyph and heading colour for `intent="error"`.', consumers: at(EMPTY_STATE, "var(--destructive, #dc2626)") },
     { key: "actions-gap", property: "gap", description: "Gap between placard actions.", consumers: at(EMPTY_STATE, "var(--spacing-2, 0.5rem)") }
   ]
 };
@@ -1689,7 +1695,84 @@ var checkboxFamily = {
     { key: "border-checked", property: "outline-color", description: "Checked edge colour.", consumers: at(CHECKBOX, "var(--interactive-primary-bg, var(--primary, #111827))") }
   ]
 };
-var EDGE_CONTROLS = [INPUT, TEXTAREA, SELECT, CHECKBOX, SWITCH, TAG_INPUT, BUTTON];
+var INPUT_MD_PADDING = "var(--spacing-3_5, 0.875rem) var(--spacing-4, 1rem)";
+var INPUT_MD_PADDING_NUDGED = "calc(var(--spacing-3_5, 0.875rem) + var(--input-nudge, 0px)) var(--spacing-4, 1rem) calc(var(--spacing-3_5, 0.875rem) - var(--input-nudge, 0px))";
+var inputFamily = {
+  family: "input",
+  prefix: "input",
+  description: "Input shape at the default `md` size. Each key falls back to the matching `--input-*-md` variable, so a scope that sets one still applies while the key is unbound; a bound key wins.",
+  tokens: [
+    {
+      key: "md-height",
+      property: "height",
+      description: "`md` height. Unbound, the height follows the padding and the line. Bind `md-padding` with it.",
+      consumers: at(INPUT, "var(--input-height-md, auto)")
+    },
+    {
+      key: "md-padding",
+      property: "padding",
+      description: "`md` padding. Also the padding of DialogField's medium well, so the well tracks the field.",
+      consumers: [
+        { file: INPUT, fallback: `var(--input-padding-md, ${INPUT_MD_PADDING})` },
+        { file: INPUT, fallback: `var(--input-padding-md, ${INPUT_MD_PADDING_NUDGED})` },
+        { file: DIALOG_FIELD, fallback: `var(--input-padding-md, ${INPUT_MD_PADDING})` }
+      ]
+    },
+    {
+      key: "md-radius",
+      property: "border-radius",
+      description: "`md` corner rounding. Also the rounding of DialogField's well.",
+      consumers: each([INPUT, DIALOG_FIELD], "var(--input-radius-md, var(--radius-sm, 0.5rem))")
+    }
+  ]
+};
+var textareaFamily = {
+  family: "textarea",
+  prefix: "textarea",
+  description: "Textarea shape at the default `md` size.",
+  tokens: [
+    { key: "padding", property: "padding", description: "`md` padding.", consumers: at(TEXTAREA, INPUT_MD_PADDING) },
+    { key: "radius", property: "border-radius", description: "`md` corner rounding.", consumers: at(TEXTAREA, "var(--radius-sm, 0.5rem)") }
+  ]
+};
+var selectFamily = {
+  family: "select",
+  prefix: "select",
+  description: "Select trigger shape at the default `md` size.",
+  tokens: [
+    {
+      key: "height",
+      property: "height",
+      description: "`md` trigger height. Unbound, the height follows the padding and the line. Bind `padding` with it.",
+      consumers: [
+        { file: SELECT, fallback: "auto" },
+        { file: SELECT, fallback: "calc(1lh + var(--spacing-3_5, 0.875rem) * 2 + 2px)" }
+      ]
+    },
+    { key: "padding", property: "padding", description: "`md` trigger padding.", consumers: at(SELECT, INPUT_MD_PADDING) },
+    { key: "radius", property: "border-radius", description: "`md` trigger corner rounding.", consumers: at(SELECT, "var(--radius-sm, 0.5rem)") }
+  ]
+};
+var tagInputFamily = {
+  family: "tag-input",
+  prefix: "tag-input",
+  description: 'TagInput \u2014 the field around the tags, each held tag, and the opt-in typing slot (`entryAs="slot"`). The slot follows the tag\'s shape unless its own keys are set.',
+  tokens: [
+    { key: "min-height", property: "min-height", description: "Field minimum height. The field grows as tags wrap.", consumers: at(TAG_INPUT, "2.25rem") },
+    { key: "padding", property: "padding", description: "Field padding around the tags.", consumers: at(TAG_INPUT, "var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem)") },
+    { key: "radius", property: "border-radius", description: "Field corner rounding.", consumers: at(TAG_INPUT, "var(--radius-md, 0.375rem)") },
+    { key: "tag-height", property: "height", description: "Held-tag height. Unbound, the tag is as tall as its line.", consumers: at(TAG_INPUT, "auto") },
+    { key: "tag-padding-x", property: "padding-left / padding-right", description: "Held-tag horizontal padding.", consumers: at(TAG_INPUT, "var(--spacing-2, 0.5rem)") },
+    { key: "tag-font-size", property: "font-size", description: "Held-tag type size. The typing slot types at it too.", consumers: each([TAG_INPUT, TAG_INPUT], "var(--font-size-xs, 0.75rem)") },
+    { key: "tag-font-weight", property: "font-weight", description: "Held-tag weight. Unbound, the tag inherits its row's weight.", consumers: at(TAG_INPUT, "revert-layer") },
+    { key: "tag-radius", property: "border-radius", description: "Held-tag corner rounding (a pill today).", consumers: at(TAG_INPUT, "var(--radius-full, 9999px)") },
+    { key: "slot-height", property: "height", description: "Typing-slot height. Follows `tag-height`.", consumers: at(TAG_INPUT, "var(--tag-input-tag-height, 1.375rem)") },
+    { key: "slot-padding-x", property: "padding-left / padding-right", description: "Typing-slot horizontal padding. Follows `tag-padding-x`.", consumers: at(TAG_INPUT, "var(--tag-input-tag-padding-x, var(--spacing-2, 0.5rem))") },
+    { key: "slot-radius", property: "border-radius", description: "Typing-slot corner rounding. Follows `tag-radius`.", consumers: at(TAG_INPUT, "var(--tag-input-tag-radius, var(--radius-full, 9999px))") },
+    { key: "slot-min-width", property: "min-width", description: "Typing-slot minimum width. The slot grows with what is typed.", consumers: at(TAG_INPUT, "4rem") }
+  ]
+};
+var EDGE_CONTROLS = [INPUT, NUMBER_INPUT, TEXTAREA, SELECT, CHECKBOX, SWITCH, TAG_INPUT, BUTTON];
 var controlFamily = {
   family: "control",
   prefix: "control",
@@ -1710,7 +1793,7 @@ var controlFamily = {
       key: "edge-color",
       property: "outline-color",
       description: "Resting-edge colour. A component's own `--<component>-border` override still wins over it.",
-      consumers: each([INPUT, TEXTAREA, SELECT, CHECKBOX, TAG_INPUT, CHIP, FILE_UPLOAD, EMPTY_STATE, BUTTON], "var(--border-default, #e5e7eb)")
+      consumers: each([INPUT, NUMBER_INPUT, TEXTAREA, SELECT, CHECKBOX, TAG_INPUT, CHIP, FILE_UPLOAD, EMPTY_STATE, BUTTON], "var(--border-default, #e5e7eb)")
     },
     {
       key: "edge-style",
@@ -1722,19 +1805,40 @@ var controlFamily = {
       key: "drop-edge-width",
       property: "outline-width",
       description: "Dashed-edge weight (file-upload draws it at 2\xD7). Follows `edge-width` unless set \u2014 set it alone to keep dashed edges while solid edges are off.",
-      consumers: each([FILE_UPLOAD, EMPTY_STATE], "var(--control-edge-width, 1px)")
+      consumers: each([FILE_UPLOAD, EMPTY_STATE, TAG_INPUT], "var(--control-edge-width, 1px)")
     },
     {
       key: "drop-edge-style",
       property: "outline-style",
-      description: "Dashed-edge style for drop targets and empty states.",
-      consumers: each([FILE_UPLOAD, EMPTY_STATE], "dashed")
+      description: "Dashed-edge style for drop targets, empty states and the TagInput typing slot.",
+      consumers: each([FILE_UPLOAD, EMPTY_STATE, TAG_INPUT], "dashed")
     },
     {
       key: "state-edge-width",
       property: "outline-width",
       description: "Focus and invalid edge weight. Independent of `edge-width`, so focus and invalid stay visible with edges off.",
-      consumers: each([INPUT, TEXTAREA, SELECT, CHECKBOX, SWITCH, TAG_INPUT], "1px")
+      consumers: each([INPUT, NUMBER_INPUT, TEXTAREA, SELECT, CHECKBOX, SWITCH, TAG_INPUT], "1px")
+    },
+    // VI-663: the refused-value look on Input, Textarea and Select — a ring in
+    // the error colour plus a halo around it. Neither reads `edge-width`, so
+    // invalid stays visible with edges off.
+    {
+      key: "invalid-ring-width",
+      property: "box-shadow (Input) / outline-width",
+      description: "Width of the error-colour ring on a refused value. Unbound, Input draws a 1.5px inset ring and Textarea and Select draw it at `state-edge-width`.",
+      consumers: [
+        ...each([INPUT, INPUT], "1.5px"),
+        ...each([TEXTAREA, TEXTAREA, SELECT, SELECT], "var(--control-state-edge-width, 1px)")
+      ]
+    },
+    {
+      key: "invalid-halo-width",
+      property: "box-shadow",
+      description: "Width of the soft error-colour halo outside the ring. Unbound, Input draws none and Textarea and Select draw it at `--focus-ring-width`.",
+      consumers: [
+        { file: INPUT, fallback: "0px" },
+        ...each([TEXTAREA, SELECT], "var(--focus-ring-width, 2px)")
+      ]
     }
   ]
 };
@@ -1766,10 +1870,10 @@ var fieldFamily = {
   ]
 };
 var BUTTON_SIZES = [
-  { size: "sm", fontSize: ["var(--font-size-xs, 0.75rem)", "0.8125rem"], radius: "var(--radius-md, 0.375rem)" },
-  { size: "md", fontSize: ["var(--font-size-sm, 0.875rem)"], radius: "var(--radius-md, 0.375rem)" },
-  { size: "lg", fontSize: ["var(--font-size-base, 1rem)"], radius: "var(--radius-md, 0.375rem)" },
-  { size: "dlg", fontSize: ["var(--font-size-2xs, 0.6875rem)"], radius: "var(--radius-lg, 0.5rem)" }
+  { size: "sm", fontSize: ["var(--font-size-xs, 0.75rem)", "0.8125rem"], fontWeight: "var(--font-weight-medium, 500)", radius: "var(--radius-md, 0.375rem)" },
+  { size: "md", fontSize: ["var(--font-size-sm, 0.875rem)"], fontWeight: "var(--font-weight-medium, 500)", radius: "var(--radius-md, 0.375rem)" },
+  { size: "lg", fontSize: ["var(--font-size-base, 1rem)"], fontWeight: "var(--font-weight-medium, 500)", radius: "var(--radius-md, 0.375rem)" },
+  { size: "dlg", fontSize: ["var(--font-size-2xs, 0.6875rem)"], fontWeight: "var(--font-weight-semibold, 600)", radius: "var(--radius-lg, 0.5rem)" }
 ];
 var buttonFamily = {
   family: "button",
@@ -1788,6 +1892,12 @@ var buttonFamily = {
       description: "Tracking for every size.",
       consumers: BUTTON_SIZES.map(() => ({ file: BUTTON, fallback: "revert-layer" }))
     },
+    {
+      key: "font-weight",
+      property: "font-weight",
+      description: "Weight for every size.",
+      consumers: BUTTON_SIZES.map(({ fontWeight }) => ({ file: BUTTON, fallback: fontWeight }))
+    },
     {
       key: "radius",
       property: "border-radius",
@@ -1797,13 +1907,19 @@ var buttonFamily = {
         { file: BUTTON, fallback: "var(--radius-md, 0.375rem)" }
       ]
     },
-    ...BUTTON_SIZES.flatMap(({ size, fontSize, radius }) => [
+    ...BUTTON_SIZES.flatMap(({ size, fontSize, fontWeight, radius }) => [
       {
         key: `${size}-font-size`,
         property: "font-size",
         description: fontSize.length > 1 ? `\`${size}\` type size. Drives both the standard and editorial-density steps.` : `\`${size}\` type size.`,
         consumers: fontSize.map((fallback) => ({ file: BUTTON, fallback }))
       },
+      {
+        key: `${size}-font-weight`,
+        property: "font-weight",
+        description: `\`${size}\` weight.`,
+        consumers: at(BUTTON, `var(--button-font-weight, ${fontWeight})`)
+      },
       {
         key: `${size}-text-transform`,
         property: "text-transform",
@@ -1899,9 +2015,26 @@ var switchFamily = {
 var saveStatusFamily = {
   family: "save-status",
   prefix: "save-status",
-  description: "SaveStatus readout \u2014 the fixed-width slot and its type, so the readout never reflows its row.",
+  description: "SaveStatus readout \u2014 the fixed-width slot, its type, the Syncing ink and the Unsaved dot, so the readout never reflows its row.",
   tokens: [
-    { key: "width", property: "width", description: "Slot width. Fixed, so the row never reflows between states.", consumers: at(SAVE_STATUS, "7.5rem") },
+    { key: "width", property: "width", description: "Slot width. Unbound, the slot is as wide as the longest label in the current font plus the retry mark, the same in every state. Bind it to pin a width; a longer label then truncates inside it.", consumers: at(SAVE_STATUS, "auto") },
+    { key: "syncing-color", property: "color", description: "Ink of the Syncing state (a first sync from an outside source). Unbound it reads `--text-secondary`.", consumers: at(SAVE_STATUS, "var(--text-secondary, #6b7280)") },
+    { key: "font-size", property: "font-size", description: "Readout type size.", consumers: at(SAVE_STATUS, "var(--font-size-xs, 0.75rem)") },
+    {
+      key: "dot-size",
+      property: "width / height",
+      description: "Diameter of the status dot (`dot`), in every state but Unsaved. Also the Unsaved dot's, until `unsaved-dot-size` is set. The slot width does not change.",
+      consumers: [
+        { file: SAVE_STATUS, fallback: "var(--spacing-2, 0.5rem)" },
+        { file: SAVE_STATUS, fallback: "var(--spacing-2, 0.5rem)" }
+      ]
+    },
+    {
+      key: "unsaved-dot-size",
+      property: "width / height",
+      description: 'Diameter of the dot that draws Unsaved \u2014 the status dot while Unsaved, and the dot alone of `unsavedAs="dot"`. Follows `dot-size`.',
+      consumers: each([SAVE_STATUS, SAVE_STATUS], "var(--save-status-dot-size, var(--spacing-2, 0.5rem))")
+    },
     { key: "font-family", property: "font-family", description: "Readout family (e.g. the theme's mono).", consumers: at(SAVE_STATUS, "revert-layer") },
     { key: "text-transform", property: "text-transform", description: "Readout casing.", consumers: at(SAVE_STATUS, "revert-layer") },
     { key: "letter-spacing", property: "letter-spacing", description: "Readout tracking.", consumers: at(SAVE_STATUS, "revert-layer") }
@@ -1916,6 +2049,59 @@ var tooltipFamily = {
     { key: "text", property: "color", description: "Tooltip label colour.", consumers: at(TOOLTIP, "var(--text-inverse, #ffffff)") }
   ]
 };
+var actionRowFamily = {
+  family: "action-row",
+  prefix: "action-row",
+  description: "ActionRow state fills, edge and geometry: rest, hover, open, selected and disabled each read their own token.",
+  tokens: [
+    { key: "min-height", property: "min-height", description: "Row floor height; the whole row is the target.", consumers: at(ACTION_ROW, "2.75rem") },
+    { key: "padding", property: "padding", description: "Row inset, kept inside the hover and selected fills.", consumers: at(ACTION_ROW, "var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem)") },
+    { key: "gap", property: "gap", description: "Gap between the leading slot, the title block and the trailing slot.", consumers: at(ACTION_ROW, "var(--spacing-3, 0.75rem)") },
+    { key: "radius", property: "border-radius", description: "Row corner rounding (the hover and selected fill).", consumers: at(ACTION_ROW, "var(--radius-md, 0.375rem)") },
+    { key: "hover-bg", property: "background-color", description: "Hover fill.", consumers: at(ACTION_ROW, "var(--surface-interactive-hover, #f3f4f6)") },
+    { key: "open-bg", property: "background-color", description: "Fill of a row that has opened a picker or popover (`aria-expanded`).", consumers: at(ACTION_ROW, "var(--surface-interactive-hover, #f3f4f6)") },
+    { key: "selected-bg", property: "background-color", description: "Selected fill. A lifted fill, never white.", consumers: at(ACTION_ROW, "var(--surface-interactive-active, #e5e7eb)") },
+    { key: "selected-edge-color", property: "outline-color", description: "Selected row's inset edge colour. Its width is `--control-state-edge-width`, so `edges: off` keeps it.", consumers: at(ACTION_ROW, "var(--text-secondary, #6b7280)") },
+    { key: "disabled-opacity", property: "opacity", description: "Disabled row opacity.", consumers: at(ACTION_ROW, "var(--opacity-50, 0.5)") },
+    { key: "title-weight", property: "font-weight", description: "Title weight.", consumers: at(ACTION_ROW, "var(--font-weight-medium, 500)") },
+    { key: "line-color", property: "color", description: "Second-line colour.", consumers: at(ACTION_ROW, "var(--text-secondary, #6b7280)") },
+    { key: "leading-color", property: "color", description: "Leading icon colour.", consumers: at(ACTION_ROW, "var(--text-secondary, #6b7280)") },
+    { key: "leading-size", property: "font-size", description: "Leading icon size.", consumers: at(ACTION_ROW, "1.25rem") },
+    { key: "trailing-color", property: "color", description: "Trailing value or caret colour.", consumers: at(ACTION_ROW, "var(--text-secondary, #6b7280)") }
+  ]
+};
+var inputAffixFamily = {
+  family: "input-affix",
+  prefix: "input-affix",
+  description: "Input and NumberInput prefix and suffix: the gap between a fixed affix and the value, and the affix's ink.",
+  tokens: [
+    {
+      key: "gap",
+      property: "gap",
+      description: "Space between a prefix or suffix and the value.",
+      consumers: [...at(INPUT, "var(--spacing-2, 0.5rem)"), ...at(NUMBER_INPUT, "var(--spacing-2, 0.5rem)")]
+    },
+    {
+      key: "color",
+      property: "color",
+      description: "Prefix and suffix ink.",
+      consumers: [...at(INPUT, "var(--text-secondary, #6b7280)"), ...at(NUMBER_INPUT, "var(--text-secondary, #6b7280)")]
+    }
+  ]
+};
+var separatorFamily = {
+  family: "separator",
+  prefix: "separator",
+  description: "Separator rule: the colour of the line, bare or on both sides of a label.",
+  tokens: [
+    {
+      key: "color",
+      property: "background-color",
+      description: "Rule colour. Falls back to the default border colour.",
+      consumers: at(SEPARATOR, "var(--border-default, #e5e7eb)")
+    }
+  ]
+};
 var HAIRLINE_PX = [
   "components/ui/bulk-action-bar/bulk-action-bar.module.css",
   "components/ui/dialog/dialog.module.css",
@@ -1925,6 +2111,7 @@ var HAIRLINE_PX = [
   TABS
 ];
 var HAIRLINE_THIN = [
+  ACTION_ROW,
   "blocks/dialog-form/dialog-form.module.css",
   "components/ui/coherence-check/coherence-check.module.css",
   "components/ui/doc-frame/doc-frame.module.css",
@@ -1954,6 +2141,29 @@ var hairlineFamily = {
     }
   ]
 };
+var segmentedControlFamily = {
+  family: "segmented-control",
+  prefix: "segmented-control",
+  description: "SegmentedControl \u2014 the well, its corner radius, the sliding pill, the ink and the state edge on it. The resting edge is the shared `control` edge.",
+  tokens: [
+    { key: "track-bg", property: "background-color", description: "The well the pill slides in. Default is the page nudged 12% toward the ink, so it reads as a well in light and dark.", consumers: at(SEGMENTED_CONTROL, "color-mix(in srgb, var(--text-primary, #111827) 12%, var(--surface-page, #ffffff))") },
+    {
+      key: "radius",
+      property: "border-radius",
+      description: "Track corner radius. Unset, each size keeps its ToggleGroup radius (md and sm `--radius-lg`, xs `--radius-md`, lg `--radius-xl`).",
+      consumers: [
+        { file: SEGMENTED_CONTROL, fallback: "var(--radius-md, 0.375rem)" },
+        { file: SEGMENTED_CONTROL, fallback: "var(--radius-lg, 0.5rem)" },
+        { file: SEGMENTED_CONTROL, fallback: "var(--radius-xl, 0.75rem)" }
+      ]
+    },
+    { key: "indicator-bg", property: "background-color", description: "Sliding active pill. Bind a lifted dark fill where the theme wants one.", consumers: at(SEGMENTED_CONTROL, "var(--interactive-primary-bg, var(--primary, #111827))") },
+    { key: "indicator-text", property: "color", description: "Active segment label ink, on the pill.", consumers: at(SEGMENTED_CONTROL, "var(--interactive-primary-text, #f9fafb)") },
+    { key: "indicator-edge", property: "box-shadow (inset, at --control-state-edge-width)", description: "Colour of the 1px state edge on the active pill. Set `transparent` where the fill already clears 3:1 against the well.", consumers: at(SEGMENTED_CONTROL, "var(--text-primary, #111827)") },
+    { key: "inactive-text", property: "color", description: "Inactive segment label colour.", consumers: at(SEGMENTED_CONTROL, "var(--text-primary, #111827)") },
+    { key: "active-weight", property: "font-weight", description: "Active segment label weight.", consumers: at(SEGMENTED_CONTROL, "var(--font-weight-medium, 500)") }
+  ]
+};
 var adminUiFamily = {
   family: "admin-ui",
   prefix: "admin-ui",
@@ -1982,6 +2192,10 @@ var COMPONENT_TOKEN_FAMILIES = [
   skeletonFamily,
   spinnerFamily,
   checkboxFamily,
+  inputFamily,
+  textareaFamily,
+  selectFamily,
+  tagInputFamily,
   controlFamily,
   hairlineFamily,
   fieldFamily,
@@ -1989,7 +2203,11 @@ var COMPONENT_TOKEN_FAMILIES = [
   textFamily,
   switchFamily,
   saveStatusFamily,
+  segmentedControlFamily,
   tooltipFamily,
+  actionRowFamily,
+  inputAffixFamily,
+  separatorFamily,
   adminUiFamily
 ];
 var COMPONENT_TOKEN_FAMILY_BY_NAME = new Map(
@@ -2279,6 +2497,23 @@ function applyOverrides(tokens, overrides) {
   return result;
 }
 
+// src/font-metrics.ts
+var FONT_VERTICAL_METRICS = {
+  arial: { ascent: 0.905, descent: 0.212 },
+  inter: { ascent: 0.969, descent: 0.241 },
+  outfit: { ascent: 1, descent: 0.26 },
+  "pitch sans": { ascent: 0.9, descent: 0.32 },
+  "pp model mono": { ascent: 1.02, descent: 0.288 },
+  "product sans": { ascent: 0.96, descent: 0.253 },
+  satoshi: { ascent: 1.01, descent: 0.24 },
+  "system-ui": { ascent: 0.967, descent: 0.211 }
+};
+function generateFontMetricDecls(family) {
+  const key = family.trim().replace(/^["']|["']$/g, "").toLowerCase();
+  const m = FONT_VERTICAL_METRICS[key];
+  return m ? [`--font-ascent: ${m.ascent};`, `--font-descent: ${m.descent};`] : [];
+}
+
 // src/font-weights.ts
 var WEIGHT_RAMP_TARGETS = {
   medium: 500,
@@ -2493,6 +2728,7 @@ function generateTypographyPrimitives(config, aliases = EMPTY_ALIASES) {
   decls.push(`--font-body: ${fontStack(config.typography.body.family, aliases)};`);
   decls.push(`--font-mono: ${fontStack(config.typography.mono.family, aliases)};`);
   decls.push(...generateFontSizeDecls(config.typography.scale));
+  decls.push(...generateFontMetricDecls(config.typography.body.family));
   decls.push(...generateFontWeightDecls(config.typography));
   const lineHeights = {
     none: 1,
@@ -2987,6 +3223,8 @@ export {
   collectBrandPassthrough,
   hasBrandPassthrough,
   applyOverrides,
+  FONT_VERTICAL_METRICS,
+  generateFontMetricDecls,
   WEIGHT_RAMP_TARGETS,
   loadedWeights,
   declaresWeights,

package/dist/index.d.ts

@@ -1097,7 +1097,7 @@ var properties = {
 			},
 			"empty-state": {
 				type: "object",
-				description: "Empty-state placard — surface, icon chip and copy scale. Keys: radius, text-color, gap, padding, bg, border, icon-size, icon-radius, icon-bg, icon-color, heading-font-family, heading-font-size, heading-font-weight, heading-color, description-font-size, description-color, actions-gap.",
+				description: "Empty-state placard — surface, icon chip and copy scale. Keys: radius, text-color, gap, padding, bg, border, icon-size, icon-radius, icon-bg, icon-color, heading-font-family, heading-font-size, heading-font-weight, heading-color, description-font-size, description-color, error-color, actions-gap.",
 				additionalProperties: {
 					$ref: "#/$defs/componentTokenBinding"
 				}
@@ -1144,6 +1144,34 @@ var properties = {
 					$ref: "#/$defs/componentTokenBinding"
 				}
 			},
+			input: {
+				type: "object",
+				description: "Input shape at the default `md` size. Each key falls back to the matching `--input-*-md` variable, so a scope that sets one still applies while the key is unbound; a bound key wins. Keys: md-height, md-padding, md-radius.",
+				additionalProperties: {
+					$ref: "#/$defs/componentTokenBinding"
+				}
+			},
+			textarea: {
+				type: "object",
+				description: "Textarea shape at the default `md` size. Keys: padding, radius.",
+				additionalProperties: {
+					$ref: "#/$defs/componentTokenBinding"
+				}
+			},
+			select: {
+				type: "object",
+				description: "Select trigger shape at the default `md` size. Keys: height, padding, radius.",
+				additionalProperties: {
+					$ref: "#/$defs/componentTokenBinding"
+				}
+			},
+			"tag-input": {
+				type: "object",
+				description: "TagInput — the field around the tags, each held tag, and the opt-in typing slot (`entryAs=\"slot\"`). The slot follows the tag's shape unless its own keys are set. Keys: min-height, padding, radius, tag-height, tag-padding-x, tag-font-size, tag-font-weight, tag-radius, slot-height, slot-padding-x, slot-radius, slot-min-width.",
+				additionalProperties: {
+					$ref: "#/$defs/componentTokenBinding"
+				}
+			},
 			hairline: {
 				type: "object",
 				description: "The one switch for hairlines (VI-680). Every hairline rule, divider and ring reads its weight from `--hairline-width`, so `width: 0` removes them all at once. Independent of the `control` edge switch. Keys: width.",
@@ -1153,7 +1181,7 @@ var properties = {
 			},
 			control: {
 				type: "object",
-				description: "The one switch for form-control edges (VI-655). Every form control draws its resting edge from these, so `edge-width: 0` removes every resting edge at once, dashed edges included, with no layout shift. Keys: edge-width, edge-color, edge-style, drop-edge-width, drop-edge-style, state-edge-width.",
+				description: "The one switch for form-control edges (VI-655). Every form control draws its resting edge from these, so `edge-width: 0` removes every resting edge at once, dashed edges included, with no layout shift. Keys: edge-width, edge-color, edge-style, drop-edge-width, drop-edge-style, state-edge-width, invalid-ring-width, invalid-halo-width.",
 				additionalProperties: {
 					$ref: "#/$defs/componentTokenBinding"
 				}
@@ -1174,7 +1202,7 @@ var properties = {
 			},
 			button: {
 				type: "object",
-				description: "Button type treatment and rounding. The unprefixed keys set every size at once; a size key (`dlg-radius`) overrides one size. Keys: text-transform, letter-spacing, radius, sm-font-size, sm-text-transform, sm-letter-spacing, sm-radius, md-font-size, md-text-transform, md-letter-spacing, md-radius, lg-font-size, lg-text-transform, lg-letter-spacing, lg-radius, dlg-font-size, dlg-text-transform, dlg-letter-spacing, dlg-radius, icon-size, icon-pad, icon-radius, icon-ghost-color.",
+				description: "Button type treatment and rounding. The unprefixed keys set every size at once; a size key (`dlg-radius`) overrides one size. Keys: text-transform, letter-spacing, font-weight, radius, sm-font-size, sm-font-weight, sm-text-transform, sm-letter-spacing, sm-radius, md-font-size, md-font-weight, md-text-transform, md-letter-spacing, md-radius, lg-font-size, lg-font-weight, lg-text-transform, lg-letter-spacing, lg-radius, dlg-font-size, dlg-font-weight, dlg-text-transform, dlg-letter-spacing, dlg-radius, icon-size, icon-pad, icon-radius, icon-ghost-color.",
 				additionalProperties: {
 					$ref: "#/$defs/componentTokenBinding"
 				}
@@ -1195,7 +1223,14 @@ var properties = {
 			},
 			"save-status": {
 				type: "object",
-				description: "SaveStatus readout — the fixed-width slot and its type, so the readout never reflows its row. Keys: width, font-family, text-transform, letter-spacing.",
+				description: "SaveStatus readout — the fixed-width slot, its type, the Syncing ink and the Unsaved dot, so the readout never reflows its row. Keys: width, syncing-color, font-size, dot-size, unsaved-dot-size, font-family, text-transform, letter-spacing.",
+				additionalProperties: {
+					$ref: "#/$defs/componentTokenBinding"
+				}
+			},
+			"segmented-control": {
+				type: "object",
+				description: "SegmentedControl — the well, its corner radius, the sliding pill, the ink and the state edge on it. The resting edge is the shared `control` edge. Keys: track-bg, radius, indicator-bg, indicator-text, indicator-edge, inactive-text, active-weight.",
 				additionalProperties: {
 					$ref: "#/$defs/componentTokenBinding"
 				}
@@ -1207,6 +1242,27 @@ var properties = {
 					$ref: "#/$defs/componentTokenBinding"
 				}
 			},
+			"action-row": {
+				type: "object",
+				description: "ActionRow state fills, edge and geometry: rest, hover, open, selected and disabled each read their own token. Keys: min-height, padding, gap, radius, hover-bg, open-bg, selected-bg, selected-edge-color, disabled-opacity, title-weight, line-color, leading-color, leading-size, trailing-color.",
+				additionalProperties: {
+					$ref: "#/$defs/componentTokenBinding"
+				}
+			},
+			"input-affix": {
+				type: "object",
+				description: "Input and NumberInput prefix and suffix: the gap between a fixed affix and the value, and the affix's ink. Keys: gap, color.",
+				additionalProperties: {
+					$ref: "#/$defs/componentTokenBinding"
+				}
+			},
+			separator: {
+				type: "object",
+				description: "Separator rule colour, bare or either side of a label. Keys: color.",
+				additionalProperties: {
+					$ref: "#/$defs/componentTokenBinding"
+				}
+			},
 			"admin-ui": {
 				type: "object",
 				description: "Structural roles the admin-ui pattern owns. `marquee-family` is the display face for KPI hero figures and marquee page titles — the role the admin-ui portability audit named as the one piece of ENTR brand coupling a new theme must rebind. Keys: marquee-family.",
@@ -2279,4 +2335,36 @@ declare function cleanFontValue(val: string): string;
  */
 declare function extractFromCSS(files: CSSFile[], name?: string): ExtractionResult;
 
-export { type BrandPassthrough, BrandResolution, BrandSlot, BrandSource, BrandStrategy, BrandStrategyContext, BrandStrategyIssue, BrandStrategyValidationResult, type CSSFile, ColorRole, type Confidence, DEFAULT_VISOR_BRAND, type ExtractedToken, type ExtractionResult, FONT_WEIGHT_ALIASES, type FontCoverageError, type FontCoverageResult, FontDisplayStrategy, type FontFaceDeclaration, FontResolution, FontResolveOptions, FullShadeScale, GeneratedPrimitives, GoogleFontEntry, OKLCH, ParsedColor, RGB, ResolvedThemeConfig, type ResolvedWeightRamp, SEMANTIC_MAP, SelectiveShadeScale, SemanticTokens, SerializedBrandStrategy, ShadeStep, TAILWIND_GRAY, ThemeBrandResult, ThemeData, ThemeFontResult, ThemeOutput, type ThemeValidationResult, VISOR_BRANDS_CDN, VISOR_CORE_SEMANTIC_ALIASES, VISOR_DEFAULT_BRAND_PATH, VISOR_FONTS_CDN, type ValidateOptions, type ValidationIssue, type ValidationSeverity, VisorBrand, VisorThemeConfig, VisorTypography, WEIGHT_RAMP_TARGETS, applyOverrides, assignSemanticTokens, buildVisorBrandUrl, buildVisorFontUrl, checkBrandStrategyCoherence, checkBrandStrategyStructure, clampToSrgb, cleanFontValue, collectBrandPassthrough, collectDeclaredProperties, compositeOverBackground, declaresWeights, exportTheme, extractFromCSS, formatFontCoverageError, generateDarkCss, generateFontWeightDecls, generateFullBundleCss, generateLightCss, generatePreloadLinks, generatePrimitives, generatePrimitivesCss, generateSemanticAliasDecls, generateSemanticCss, generateShadeScale, generateStylesheetLinks, generateTheme, generateThemeData, generateThemeDataFromConfig, generateThemeFromConfig, getContrastRatio, getKnownTokenRefs, getLuminance, googleFontsCatalog, hasBrandPassthrough, hexToOklch, hexToRgb, isValidColor, isValidHex, isVisorThemeConfig, loadedWeights, lookupFontWeightAlias, lookupGoogleFont, matchLoadedWeight, normalizeHex, oklchToHex, parseCSSDeclarations, parseColor, parseConfig, parseFontFaceDeclarations, parseHex, parseHsla, parseOklch, parseRgba, resolveBrandSlot, resolveBrandSource, resolveConfig, resolveFont, resolveRoleWeight, resolveThemeBrand, resolveThemeFonts, resolveWeightRamp, rgbToHex, serializeBrandStrategy, serializeColor, validate, validateBrandStrategy, validateConfig, validateFontCoverage, visorTheme_schema as visorThemeSchema };
+/**
+ * Vertical font metrics for centring a native <input>'s text (VI-684).
+ *
+ * A native input cannot be trimmed to its capital band without clipping
+ * descenders and accents, so its capitals sit wherever the font's line box puts
+ * them: half a line above the box centre plus (ascent - descent) / 2, each
+ * rounded to a whole px. That depends on the face, so input.module.css reads
+ * `--font-ascent` / `--font-descent` (unitless em ratios) to work out the
+ * padding that lands the baseline on the right pixel.
+ *
+ * The ratios are Chromium's own `fontBoundingBoxAscent` / `Descent` at 1000px
+ * (what its line layout rounds), measured once from the real faces by
+ * scripts/measure-font-metrics.mjs and committed here. Measuring at build time
+ * would put a network fetch and a font parser on every theme build.
+ *
+ * A face with no entry emits no tokens, and the input takes no nudge: it renders
+ * as it did before VI-684 (within about 1px of centre), never worse.
+ *
+ * `system-ui` is platform-dependent. The entry is what Chromium resolves on
+ * macOS (San Francisco). Windows and Linux resolve another face, so the nudge
+ * there is a best effort; override it with --font-ascent / --font-descent.
+ */
+interface FontVerticalMetrics {
+    /** Ascent as a fraction of the font size. */
+    ascent: number;
+    /** Descent as a fraction of the font size. */
+    descent: number;
+}
+declare const FONT_VERTICAL_METRICS: Record<string, FontVerticalMetrics>;
+/** The `--font-ascent` / `--font-descent` declarations for a body family, or none when the face is unmeasured. */
+declare function generateFontMetricDecls(family: string): string[];
+
+export { type BrandPassthrough, BrandResolution, BrandSlot, BrandSource, BrandStrategy, BrandStrategyContext, BrandStrategyIssue, BrandStrategyValidationResult, type CSSFile, ColorRole, type Confidence, DEFAULT_VISOR_BRAND, type ExtractedToken, type ExtractionResult, FONT_VERTICAL_METRICS, FONT_WEIGHT_ALIASES, type FontCoverageError, type FontCoverageResult, FontDisplayStrategy, type FontFaceDeclaration, FontResolution, FontResolveOptions, type FontVerticalMetrics, FullShadeScale, GeneratedPrimitives, GoogleFontEntry, OKLCH, ParsedColor, RGB, ResolvedThemeConfig, type ResolvedWeightRamp, SEMANTIC_MAP, SelectiveShadeScale, SemanticTokens, SerializedBrandStrategy, ShadeStep, TAILWIND_GRAY, ThemeBrandResult, ThemeData, ThemeFontResult, ThemeOutput, type ThemeValidationResult, VISOR_BRANDS_CDN, VISOR_CORE_SEMANTIC_ALIASES, VISOR_DEFAULT_BRAND_PATH, VISOR_FONTS_CDN, type ValidateOptions, type ValidationIssue, type ValidationSeverity, VisorBrand, VisorThemeConfig, VisorTypography, WEIGHT_RAMP_TARGETS, applyOverrides, assignSemanticTokens, buildVisorBrandUrl, buildVisorFontUrl, checkBrandStrategyCoherence, checkBrandStrategyStructure, clampToSrgb, cleanFontValue, collectBrandPassthrough, collectDeclaredProperties, compositeOverBackground, declaresWeights, exportTheme, extractFromCSS, formatFontCoverageError, generateDarkCss, generateFontMetricDecls, generateFontWeightDecls, generateFullBundleCss, generateLightCss, generatePreloadLinks, generatePrimitives, generatePrimitivesCss, generateSemanticAliasDecls, generateSemanticCss, generateShadeScale, generateStylesheetLinks, generateTheme, generateThemeData, generateThemeDataFromConfig, generateThemeFromConfig, getContrastRatio, getKnownTokenRefs, getLuminance, googleFontsCatalog, hasBrandPassthrough, hexToOklch, hexToRgb, isValidColor, isValidHex, isVisorThemeConfig, loadedWeights, lookupFontWeightAlias, lookupGoogleFont, matchLoadedWeight, normalizeHex, oklchToHex, parseCSSDeclarations, parseColor, parseConfig, parseFontFaceDeclarations, parseHex, parseHsla, parseOklch, parseRgba, resolveBrandSlot, resolveBrandSource, resolveConfig, resolveFont, resolveRoleWeight, resolveThemeBrand, resolveThemeFonts, resolveWeightRamp, rgbToHex, serializeBrandStrategy, serializeColor, validate, validateBrandStrategy, validateConfig, validateFontCoverage, visorTheme_schema as visorThemeSchema };

package/dist/index.js

@@ -3,6 +3,7 @@ import {
   COMPONENT_TOKEN_FAMILIES,
   COMPONENT_TOKEN_FAMILY_BY_NAME,
   DEFAULT_VISOR_BRAND,
+  FONT_VERTICAL_METRICS,
   FONT_WEIGHT_ALIASES,
   MATERIAL_TEXT_SLOTS,
   TAILWIND_GRAY,
@@ -22,6 +23,7 @@ import {
   compositeOverBackground,
   declaresWeights,
   generateDarkCss,
+  generateFontMetricDecls,
   generateFontWeightDecls,
   generateFullBundleCss,
   generateLightCss,
@@ -63,7 +65,7 @@ import {
   rgbToOklch,
   serializeColor,
   validateComponentBindings
-} from "./chunk-D5XSLWXP.js";
+} from "./chunk-X2SWJPM2.js";
 
 // src/fonts/validate-coverage.ts
 var FONT_VAR_RE = /--font-(heading|display|body|sans|mono)\s*:\s*([^;]+);/g;
@@ -1133,7 +1135,7 @@ var visor_theme_schema_default = {
         },
         "empty-state": {
           type: "object",
-          description: "Empty-state placard \u2014 surface, icon chip and copy scale. Keys: radius, text-color, gap, padding, bg, border, icon-size, icon-radius, icon-bg, icon-color, heading-font-family, heading-font-size, heading-font-weight, heading-color, description-font-size, description-color, actions-gap.",
+          description: "Empty-state placard \u2014 surface, icon chip and copy scale. Keys: radius, text-color, gap, padding, bg, border, icon-size, icon-radius, icon-bg, icon-color, heading-font-family, heading-font-size, heading-font-weight, heading-color, description-font-size, description-color, error-color, actions-gap.",
           additionalProperties: {
             $ref: "#/$defs/componentTokenBinding"
           }
@@ -1180,6 +1182,34 @@ var visor_theme_schema_default = {
             $ref: "#/$defs/componentTokenBinding"
           }
         },
+        input: {
+          type: "object",
+          description: "Input shape at the default `md` size. Each key falls back to the matching `--input-*-md` variable, so a scope that sets one still applies while the key is unbound; a bound key wins. Keys: md-height, md-padding, md-radius.",
+          additionalProperties: {
+            $ref: "#/$defs/componentTokenBinding"
+          }
+        },
+        textarea: {
+          type: "object",
+          description: "Textarea shape at the default `md` size. Keys: padding, radius.",
+          additionalProperties: {
+            $ref: "#/$defs/componentTokenBinding"
+          }
+        },
+        select: {
+          type: "object",
+          description: "Select trigger shape at the default `md` size. Keys: height, padding, radius.",
+          additionalProperties: {
+            $ref: "#/$defs/componentTokenBinding"
+          }
+        },
+        "tag-input": {
+          type: "object",
+          description: 'TagInput \u2014 the field around the tags, each held tag, and the opt-in typing slot (`entryAs="slot"`). The slot follows the tag\'s shape unless its own keys are set. Keys: min-height, padding, radius, tag-height, tag-padding-x, tag-font-size, tag-font-weight, tag-radius, slot-height, slot-padding-x, slot-radius, slot-min-width.',
+          additionalProperties: {
+            $ref: "#/$defs/componentTokenBinding"
+          }
+        },
         hairline: {
           type: "object",
           description: "The one switch for hairlines (VI-680). Every hairline rule, divider and ring reads its weight from `--hairline-width`, so `width: 0` removes them all at once. Independent of the `control` edge switch. Keys: width.",
@@ -1189,7 +1219,7 @@ var visor_theme_schema_default = {
         },
         control: {
           type: "object",
-          description: "The one switch for form-control edges (VI-655). Every form control draws its resting edge from these, so `edge-width: 0` removes every resting edge at once, dashed edges included, with no layout shift. Keys: edge-width, edge-color, edge-style, drop-edge-width, drop-edge-style, state-edge-width.",
+          description: "The one switch for form-control edges (VI-655). Every form control draws its resting edge from these, so `edge-width: 0` removes every resting edge at once, dashed edges included, with no layout shift. Keys: edge-width, edge-color, edge-style, drop-edge-width, drop-edge-style, state-edge-width, invalid-ring-width, invalid-halo-width.",
           additionalProperties: {
             $ref: "#/$defs/componentTokenBinding"
           }
@@ -1210,7 +1240,7 @@ var visor_theme_schema_default = {
         },
         button: {
           type: "object",
-          description: "Button type treatment and rounding. The unprefixed keys set every size at once; a size key (`dlg-radius`) overrides one size. Keys: text-transform, letter-spacing, radius, sm-font-size, sm-text-transform, sm-letter-spacing, sm-radius, md-font-size, md-text-transform, md-letter-spacing, md-radius, lg-font-size, lg-text-transform, lg-letter-spacing, lg-radius, dlg-font-size, dlg-text-transform, dlg-letter-spacing, dlg-radius, icon-size, icon-pad, icon-radius, icon-ghost-color.",
+          description: "Button type treatment and rounding. The unprefixed keys set every size at once; a size key (`dlg-radius`) overrides one size. Keys: text-transform, letter-spacing, font-weight, radius, sm-font-size, sm-font-weight, sm-text-transform, sm-letter-spacing, sm-radius, md-font-size, md-font-weight, md-text-transform, md-letter-spacing, md-radius, lg-font-size, lg-font-weight, lg-text-transform, lg-letter-spacing, lg-radius, dlg-font-size, dlg-font-weight, dlg-text-transform, dlg-letter-spacing, dlg-radius, icon-size, icon-pad, icon-radius, icon-ghost-color.",
           additionalProperties: {
             $ref: "#/$defs/componentTokenBinding"
           }
@@ -1231,7 +1261,14 @@ var visor_theme_schema_default = {
         },
         "save-status": {
           type: "object",
-          description: "SaveStatus readout \u2014 the fixed-width slot and its type, so the readout never reflows its row. Keys: width, font-family, text-transform, letter-spacing.",
+          description: "SaveStatus readout \u2014 the fixed-width slot, its type, the Syncing ink and the Unsaved dot, so the readout never reflows its row. Keys: width, syncing-color, font-size, dot-size, unsaved-dot-size, font-family, text-transform, letter-spacing.",
+          additionalProperties: {
+            $ref: "#/$defs/componentTokenBinding"
+          }
+        },
+        "segmented-control": {
+          type: "object",
+          description: "SegmentedControl \u2014 the well, its corner radius, the sliding pill, the ink and the state edge on it. The resting edge is the shared `control` edge. Keys: track-bg, radius, indicator-bg, indicator-text, indicator-edge, inactive-text, active-weight.",
           additionalProperties: {
             $ref: "#/$defs/componentTokenBinding"
           }
@@ -1243,6 +1280,27 @@ var visor_theme_schema_default = {
             $ref: "#/$defs/componentTokenBinding"
           }
         },
+        "action-row": {
+          type: "object",
+          description: "ActionRow state fills, edge and geometry: rest, hover, open, selected and disabled each read their own token. Keys: min-height, padding, gap, radius, hover-bg, open-bg, selected-bg, selected-edge-color, disabled-opacity, title-weight, line-color, leading-color, leading-size, trailing-color.",
+          additionalProperties: {
+            $ref: "#/$defs/componentTokenBinding"
+          }
+        },
+        "input-affix": {
+          type: "object",
+          description: "Input and NumberInput prefix and suffix: the gap between a fixed affix and the value, and the affix's ink. Keys: gap, color.",
+          additionalProperties: {
+            $ref: "#/$defs/componentTokenBinding"
+          }
+        },
+        separator: {
+          type: "object",
+          description: "Separator rule colour, bare or either side of a label. Keys: color.",
+          additionalProperties: {
+            $ref: "#/$defs/componentTokenBinding"
+          }
+        },
         "admin-ui": {
           type: "object",
           description: "Structural roles the admin-ui pattern owns. `marquee-family` is the display face for KPI hero figures and marquee page titles \u2014 the role the admin-ui portability audit named as the one piece of ENTR brand coupling a new theme must rebind. Keys: marquee-family.",
@@ -4346,6 +4404,7 @@ export {
   DEFAULT_BRAND_STRATEGY_SURFACES,
   DEFAULT_BRAND_STRATEGY_TONE_STATES,
   DEFAULT_VISOR_BRAND,
+  FONT_VERTICAL_METRICS,
   FONT_WEIGHT_ALIASES,
   GOVERNS_WILDCARD,
   SEMANTIC_MAP,
@@ -4373,6 +4432,7 @@ export {
   extractFromCSS,
   formatFontCoverageError,
   generateDarkCss,
+  generateFontMetricDecls,
   generateFontWeightDecls,
   generateFullBundleCss,
   generateLightCss,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loworbitstudio/visor-theme-engine",
-  "version": "0.24.0",
+  "version": "0.28.0",
   "description": "Theme engine for the Visor design system — shade generation, token mapping, font resolution, and import/export for .visor.yaml themes.",
   "type": "module",
   "main": "./dist/index.js",

package/src/visor-theme.schema.json

@@ -517,7 +517,7 @@
         },
         "empty-state": {
           "type": "object",
-          "description": "Empty-state placard — surface, icon chip and copy scale. Keys: radius, text-color, gap, padding, bg, border, icon-size, icon-radius, icon-bg, icon-color, heading-font-family, heading-font-size, heading-font-weight, heading-color, description-font-size, description-color, actions-gap.",
+          "description": "Empty-state placard — surface, icon chip and copy scale. Keys: radius, text-color, gap, padding, bg, border, icon-size, icon-radius, icon-bg, icon-color, heading-font-family, heading-font-size, heading-font-weight, heading-color, description-font-size, description-color, error-color, actions-gap.",
           "additionalProperties": {
             "$ref": "#/$defs/componentTokenBinding"
           }
@@ -564,6 +564,34 @@
             "$ref": "#/$defs/componentTokenBinding"
           }
         },
+        "input": {
+          "type": "object",
+          "description": "Input shape at the default `md` size. Each key falls back to the matching `--input-*-md` variable, so a scope that sets one still applies while the key is unbound; a bound key wins. Keys: md-height, md-padding, md-radius.",
+          "additionalProperties": {
+            "$ref": "#/$defs/componentTokenBinding"
+          }
+        },
+        "textarea": {
+          "type": "object",
+          "description": "Textarea shape at the default `md` size. Keys: padding, radius.",
+          "additionalProperties": {
+            "$ref": "#/$defs/componentTokenBinding"
+          }
+        },
+        "select": {
+          "type": "object",
+          "description": "Select trigger shape at the default `md` size. Keys: height, padding, radius.",
+          "additionalProperties": {
+            "$ref": "#/$defs/componentTokenBinding"
+          }
+        },
+        "tag-input": {
+          "type": "object",
+          "description": "TagInput — the field around the tags, each held tag, and the opt-in typing slot (`entryAs=\"slot\"`). The slot follows the tag's shape unless its own keys are set. Keys: min-height, padding, radius, tag-height, tag-padding-x, tag-font-size, tag-font-weight, tag-radius, slot-height, slot-padding-x, slot-radius, slot-min-width.",
+          "additionalProperties": {
+            "$ref": "#/$defs/componentTokenBinding"
+          }
+        },
         "hairline": {
           "type": "object",
           "description": "The one switch for hairlines (VI-680). Every hairline rule, divider and ring reads its weight from `--hairline-width`, so `width: 0` removes them all at once. Independent of the `control` edge switch. Keys: width.",
@@ -573,7 +601,7 @@
         },
         "control": {
           "type": "object",
-          "description": "The one switch for form-control edges (VI-655). Every form control draws its resting edge from these, so `edge-width: 0` removes every resting edge at once, dashed edges included, with no layout shift. Keys: edge-width, edge-color, edge-style, drop-edge-width, drop-edge-style, state-edge-width.",
+          "description": "The one switch for form-control edges (VI-655). Every form control draws its resting edge from these, so `edge-width: 0` removes every resting edge at once, dashed edges included, with no layout shift. Keys: edge-width, edge-color, edge-style, drop-edge-width, drop-edge-style, state-edge-width, invalid-ring-width, invalid-halo-width.",
           "additionalProperties": {
             "$ref": "#/$defs/componentTokenBinding"
           }
@@ -594,7 +622,7 @@
         },
         "button": {
           "type": "object",
-          "description": "Button type treatment and rounding. The unprefixed keys set every size at once; a size key (`dlg-radius`) overrides one size. Keys: text-transform, letter-spacing, radius, sm-font-size, sm-text-transform, sm-letter-spacing, sm-radius, md-font-size, md-text-transform, md-letter-spacing, md-radius, lg-font-size, lg-text-transform, lg-letter-spacing, lg-radius, dlg-font-size, dlg-text-transform, dlg-letter-spacing, dlg-radius, icon-size, icon-pad, icon-radius, icon-ghost-color.",
+          "description": "Button type treatment and rounding. The unprefixed keys set every size at once; a size key (`dlg-radius`) overrides one size. Keys: text-transform, letter-spacing, font-weight, radius, sm-font-size, sm-font-weight, sm-text-transform, sm-letter-spacing, sm-radius, md-font-size, md-font-weight, md-text-transform, md-letter-spacing, md-radius, lg-font-size, lg-font-weight, lg-text-transform, lg-letter-spacing, lg-radius, dlg-font-size, dlg-font-weight, dlg-text-transform, dlg-letter-spacing, dlg-radius, icon-size, icon-pad, icon-radius, icon-ghost-color.",
           "additionalProperties": {
             "$ref": "#/$defs/componentTokenBinding"
           }
@@ -615,7 +643,14 @@
         },
         "save-status": {
           "type": "object",
-          "description": "SaveStatus readout — the fixed-width slot and its type, so the readout never reflows its row. Keys: width, font-family, text-transform, letter-spacing.",
+          "description": "SaveStatus readout — the fixed-width slot, its type, the Syncing ink and the Unsaved dot, so the readout never reflows its row. Keys: width, syncing-color, font-size, dot-size, unsaved-dot-size, font-family, text-transform, letter-spacing.",
+          "additionalProperties": {
+            "$ref": "#/$defs/componentTokenBinding"
+          }
+        },
+        "segmented-control": {
+          "type": "object",
+          "description": "SegmentedControl \u2014 the well, its corner radius, the sliding pill, the ink and the state edge on it. The resting edge is the shared `control` edge. Keys: track-bg, radius, indicator-bg, indicator-text, indicator-edge, inactive-text, active-weight.",
           "additionalProperties": {
             "$ref": "#/$defs/componentTokenBinding"
           }
@@ -627,6 +662,27 @@
             "$ref": "#/$defs/componentTokenBinding"
           }
         },
+        "action-row": {
+          "type": "object",
+          "description": "ActionRow state fills, edge and geometry: rest, hover, open, selected and disabled each read their own token. Keys: min-height, padding, gap, radius, hover-bg, open-bg, selected-bg, selected-edge-color, disabled-opacity, title-weight, line-color, leading-color, leading-size, trailing-color.",
+          "additionalProperties": {
+            "$ref": "#/$defs/componentTokenBinding"
+          }
+        },
+        "input-affix": {
+          "type": "object",
+          "description": "Input and NumberInput prefix and suffix: the gap between a fixed affix and the value, and the affix's ink. Keys: gap, color.",
+          "additionalProperties": {
+            "$ref": "#/$defs/componentTokenBinding"
+          }
+        },
+        "separator": {
+          "type": "object",
+          "description": "Separator rule colour, bare or either side of a label. Keys: color.",
+          "additionalProperties": {
+            "$ref": "#/$defs/componentTokenBinding"
+          }
+        },
         "admin-ui": {
           "type": "object",
           "description": "Structural roles the admin-ui pattern owns. `marquee-family` is the display face for KPI hero figures and marquee page titles — the role the admin-ui portability audit named as the one piece of ENTR brand coupling a new theme must rebind. Keys: marquee-family.",