rei-kit 3.5.0 → 3.7.0

package/README.md

@@ -66,7 +66,7 @@ demonstrates both, including the one that does not work.
 
 ### 2. The smallest of six, measured, with the trade stated
 
-At ten components — a real screen — **31.7 KB against 104 to 195** for the
+At ten components — a real screen — **31.8 KB against 104 to 195** for the
 five kits measured beside it. The gap is not the total, it is the slope:
 seven components past the first three cost this kit 5 KB and cost them 60 to
 125, because the stylesheet here is flat and theirs is inside the JavaScript.
@@ -165,7 +165,7 @@ app, and the case *least* favourable to this kit:
 
 | Kit                  |         JS |         CSS |       Total |
 | -------------------- | ---------: | ----------: | ----------: |
-| **rei-kit 3.5.0**    | **3.7 KB** | **23.1 KB** | **26.8 KB** |
+| **rei-kit 3.7.0**    | **3.7 KB** | **23.1 KB** | **26.8 KB** |
 | element-plus 2.14.6  |    27.3 KB |      6.0 KB |     33.3 KB |
 | naive-ui 2.45.3      |    51.2 KB |           — |     51.2 KB |
 | primevue 5.0.1       |    53.6 KB |           — |     53.6 KB |
@@ -177,7 +177,7 @@ a data table, a tooltip and a card. A screen rather than a demo:
 
 | Kit                  |         JS |         CSS |        Total |
 | -------------------- | ---------: | ----------: | -----------: |
-| **rei-kit 3.5.0**    | **8.6 KB** | **23.1 KB** | **31.7 KB**  |
+| **rei-kit 3.7.0**    | **8.6 KB** | **23.1 KB** | **31.8 KB**  |
 | element-plus 2.14.6  |    90.1 KB |     14.0 KB |    104.1 KB  |
 | naive-ui 2.45.3      |   132.4 KB |           — |    132.4 KB  |
 | primevue 5.0.1       |   135.8 KB |           — |    135.8 KB  |
@@ -185,7 +185,7 @@ a data table, a tooltip and a card. A screen rather than a demo:
 | ant-design-vue 4.2.6 |   195.4 KB |           — |    195.4 KB  |
 
 **The slope is the point, not the total.** Seven more components cost this kit
-**4.9 KB**, because the stylesheet does not move and only the JavaScript grows.
+**5.0 KB**, because the stylesheet does not move and only the JavaScript grows.
 The kits that put their styles in the JavaScript have no flat part at all, so
 the same seven cost them **60 to 125 KB**. A quarter smaller at three
 components; **3.3× smaller at ten**.
@@ -234,7 +234,7 @@ Each claim here is enforced by something that fails, not by a promise.
 
 ## Status
 
-**v3.5.0 — three consumers.**
+**v3.7.0 — three consumers.**
 
 |              |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

package/dist/app.js

@@ -1,5 +1,5 @@
 import { a as BaseCheckbox_default, o as BaseSheet_default, r as horizontalStep, s as inertOutside, t as focusTarget } from "./focus-target-BtcoJdmz.js";
-import { _ as toRedirectPath, c as useToast, d as isThemePreference, g as safeRedirect, h as tapFeedback, i as BaseInput_default, l as useOnline, m as useTheme, r as GoogleButton_default, s as BaseAlert_default, t as announce } from "./use-announce-BGZnV78W.js";
+import { _ as toRedirectPath, c as useToast, d as isThemePreference, g as safeRedirect, h as tapFeedback, i as BaseInput_default, l as useOnline, m as useTheme, r as GoogleButton_default, s as BaseAlert_default, t as announce } from "./use-announce-B8Ln-LsE.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.js";
 import { t as BaseButton_default } from "./BaseButton-BD2HKB1L.js";
 import { t as SettingsRow_default } from "./SettingsRow-C6Spi7Np.js";

package/dist/check.js

@@ -7,6 +7,41 @@ function imports(css, file) {
 	return new RegExp(`@import\\s+['"]rei-kit/${file}['"]`).test(css);
 }
 /**
+* The roles a rule in the dark sets, where that rule can beat `:root`.
+*
+* The kit writes two kinds, and the difference is the whole point. A plain
+* `.dark { … }` has the same specificity as `:root` and is emitted after it,
+* so it wins — an app that restates one of those roles in `@theme` and not
+* under `.dark` keeps the kit's colour at night. A `:where(.dark) { … }`
+* carries no specificity at all, which is exactly why the kit puts the
+* filled roles there: an app's own brand has to survive after dark, and
+* before that block existed the kit's lightening beat it.
+*
+* So only the first kind is something an app has to answer, and a reader
+* that lumps them together reports nine roles that are already correct. It
+* did, once, against a real app — which is how this comment came to be here
+* rather than in the version that shipped.
+*
+* The body runs to its matching brace, not the next one: these blocks hold
+* comments and nested rules. And it is found from a rule rather than from
+* the word, or a comment mentioning `.dark` starts the slice and swallows
+* the stylesheet.
+*/
+function darkRoles(css) {
+	const bodies = [];
+	for (const match of css.matchAll(/(?<![\w):])\.dark\s*\{/g)) {
+		let depth = 1;
+		let at = match.index + match[0].length;
+		while (at < css.length && depth > 0) {
+			if (css[at] === "{") depth += 1;
+			else if (css[at] === "}") depth -= 1;
+			at += 1;
+		}
+		bodies.push(css.slice(match.index + match[0].length, at - 1));
+	}
+	return colourRoles(bodies.join("\n"));
+}
+/**
 * What is missing from an app's stylesheet, as a list to assert is empty.
 *
 * ```ts
@@ -47,6 +82,13 @@ function checkStyling({ css, tokens }) {
 			fix: "@import 'rei-kit/tokens.css';"
 		});
 	}
+	const kitDark = darkRoles(tokens);
+	const appDark = darkRoles(css);
+	const redefined = [...declared].filter((role) => kitDark.has(role) && !appDark.has(role));
+	if (redefined.length) problems.push({
+		message: `These roles are redefined for the day and left at the kit's own values at night, because \`@theme\` lands in \`:root\` and the kit's \`.dark\` comes after it: ${redefined.join(", ")}.`,
+		fix: ".dark { --color-primary: …; } — restate each one under `.dark` as well"
+	});
 	return problems;
 }
 //#endregion

package/dist/check.js.map

@@ -1 +1 @@
-{"version":3,"file":"check.js","names":[],"sources":["../src/check/index.ts"],"sourcesContent":["/**\n * The wiring that fails silently, checked at unit-test speed.\n *\n * Every line of this package's install can be left out and leave a build that\n * is green: a missing `@source` means Tailwind never emits the utilities the\n * components ask for, a missing stylesheet import means the components keep\n * their markup and lose their layout, and a colour role the app never defines\n * makes `bg-primary` emit no declaration at all. None of it is visible to\n * `vue-tsc`, to a component test, or to a reader of the diff. One of the apps\n * in this family shipped a release with its tab bar invisible exactly this\n * way.\n *\n * Both apps then wrote the same check, independently, with three of the four\n * assertions carrying the same names — which is this kit's own test for a\n * missing part. So the check moved here, and it knows one thing their copies\n * could not: that the preset exists and carries the `@source` and the\n * component styles with it.\n *\n * Nothing here reads a file or touches the DOM. The caller supplies the two\n * stylesheets as text, because that is the only part that differs between a\n * Vitest run, a Node script and a CI step.\n */\n\n/** A problem found in an app's stylesheet, written to be read in a failure. */\nexport type StylingProblem = {\n  /** What is wrong, in one sentence. */\n  message: string\n  /** The line to add, where there is a single obvious one. */\n  fix?: string\n}\n\nexport type StylingInput = {\n  /** The app's own stylesheet — the file that imports Tailwind. */\n  css: string\n  /** `node_modules/rei-kit/dist/tokens.css`, for the roles it declares. */\n  tokens: string\n}\n\n/** Every `--color-<name>` a stylesheet declares. */\nfunction colourRoles(css: string): Set<string> {\n  return new Set([...css.matchAll(/--color-([a-z0-9-]+)\\s*:/g)].map(([, name]) => name!))\n}\n\nfunction imports(css: string, file: string): boolean {\n  return new RegExp(`@import\\\\s+['\"]rei-kit/${file}['\"]`).test(css)\n}\n\n/**\n * What is missing from an app's stylesheet, as a list to assert is empty.\n *\n * ```ts\n * import { checkStyling } from 'rei-kit/check'\n *\n * it('is wired to the kit', () => {\n *   expect(\n *     checkStyling({\n *       css: readFileSync('src/assets/main.css', 'utf8'),\n *       tokens: readFileSync('node_modules/rei-kit/dist/tokens.css', 'utf8'),\n *     }),\n *   ).toEqual([])\n * })\n * ```\n */\nexport function checkStyling({ css, tokens }: StylingInput): StylingProblem[] {\n  const problems: StylingProblem[] = []\n\n  /* The preset is tokens, shell, materials, palettes, the compiled component\n     styles and the `@source` — so an app that imports one has answered every\n     question below at once, and asking them separately would report faults it\n     does not have. */\n  const preset = imports(css, 'mobile.css') || imports(css, 'web.css')\n\n  if (preset && imports(css, 'mobile.css') && imports(css, 'web.css')) {\n    problems.push({\n      message:\n        'Both presets are imported. They are two answers to the same question, and the second one wins wherever they disagree.',\n      fix: \"keep one of @import 'rei-kit/mobile.css' or @import 'rei-kit/web.css'\",\n    })\n  }\n\n  if (!preset) {\n    if (!imports(css, 'styles.css')) {\n      problems.push({\n        message:\n          'The compiled component styles are not imported, so every component keeps its markup and loses its layout. Nothing else reports this: the build is green and the page renders.',\n        fix: \"@import 'rei-kit/mobile.css'; /* or web.css — the preset carries the rest too */\",\n      })\n    }\n\n    if (!/@source\\s+['\"][^'\"]*node_modules\\/rei-kit[^'\"]*['\"]/.test(css)) {\n      problems.push({\n        message:\n          'Tailwind is not told to scan the kit, so it emits no utility the components ask for. It does not walk node_modules unless pointed at it.',\n        fix: \"@source '<relative path>/node_modules/rei-kit/dist';\",\n      })\n    }\n  }\n\n  /* Checked last and only when the roles cannot be arriving from the kit\n     itself, so the list reports what the app has to define rather than\n     repeating the import it is already being told about. */\n  const declared = colourRoles(css)\n  if (!preset && !imports(css, 'tokens.css')) {\n    const missing = [...colourRoles(tokens)].filter((role) => !declared.has(role))\n\n    if (missing.length) {\n      problems.push({\n        message: `These colour roles are never defined, so every utility built on them emits nothing: ${missing.join(', ')}.`,\n        fix: \"@import 'rei-kit/tokens.css';\",\n      })\n    }\n  }\n\n  return problems\n}\n"],"mappings":";;AAuCA,SAAS,YAAY,KAA0B;CAC7C,OAAO,IAAI,IAAI,CAAC,GAAG,IAAI,SAAS,2BAA2B,CAAC,CAAC,CAAC,KAAK,GAAG,UAAU,IAAK,CAAC;AACxF;AAEA,SAAS,QAAQ,KAAa,MAAuB;CACnD,OAAO,IAAI,OAAO,0BAA0B,KAAK,KAAK,CAAC,CAAC,KAAK,GAAG;AAClE;;;;;;;;;;;;;;;;;AAkBA,SAAgB,aAAa,EAAE,KAAK,UAA0C;CAC5E,MAAM,WAA6B,CAAC;CAMpC,MAAM,SAAS,QAAQ,KAAK,YAAY,KAAK,QAAQ,KAAK,SAAS;CAEnE,IAAI,UAAU,QAAQ,KAAK,YAAY,KAAK,QAAQ,KAAK,SAAS,GAChE,SAAS,KAAK;EACZ,SACE;EACF,KAAK;CACP,CAAC;CAGH,IAAI,CAAC,QAAQ;EACX,IAAI,CAAC,QAAQ,KAAK,YAAY,GAC5B,SAAS,KAAK;GACZ,SACE;GACF,KAAK;EACP,CAAC;EAGH,IAAI,CAAC,sDAAsD,KAAK,GAAG,GACjE,SAAS,KAAK;GACZ,SACE;GACF,KAAK;EACP,CAAC;CAEL;CAKA,MAAM,WAAW,YAAY,GAAG;CAChC,IAAI,CAAC,UAAU,CAAC,QAAQ,KAAK,YAAY,GAAG;EAC1C,MAAM,UAAU,CAAC,GAAG,YAAY,MAAM,CAAC,CAAC,CAAC,QAAQ,SAAS,CAAC,SAAS,IAAI,IAAI,CAAC;EAE7E,IAAI,QAAQ,QACV,SAAS,KAAK;GACZ,SAAS,uFAAuF,QAAQ,KAAK,IAAI,EAAE;GACnH,KAAK;EACP,CAAC;CAEL;CAEA,OAAO;AACT"}
+{"version":3,"file":"check.js","names":[],"sources":["../src/check/index.ts"],"sourcesContent":["/**\n * The wiring that fails silently, checked at unit-test speed.\n *\n * Every line of this package's install can be left out and leave a build that\n * is green: a missing `@source` means Tailwind never emits the utilities the\n * components ask for, a missing stylesheet import means the components keep\n * their markup and lose their layout, and a colour role the app never defines\n * makes `bg-primary` emit no declaration at all. None of it is visible to\n * `vue-tsc`, to a component test, or to a reader of the diff. One of the apps\n * in this family shipped a release with its tab bar invisible exactly this\n * way.\n *\n * Both apps then wrote the same check, independently, with three of the four\n * assertions carrying the same names — which is this kit's own test for a\n * missing part. So the check moved here, and it knows one thing their copies\n * could not: that the preset exists and carries the `@source` and the\n * component styles with it.\n *\n * Nothing here reads a file or touches the DOM. The caller supplies the two\n * stylesheets as text, because that is the only part that differs between a\n * Vitest run, a Node script and a CI step.\n */\n\n/** A problem found in an app's stylesheet, written to be read in a failure. */\nexport type StylingProblem = {\n  /** What is wrong, in one sentence. */\n  message: string\n  /** The line to add, where there is a single obvious one. */\n  fix?: string\n}\n\nexport type StylingInput = {\n  /** The app's own stylesheet — the file that imports Tailwind. */\n  css: string\n  /** `node_modules/rei-kit/dist/tokens.css`, for the roles it declares. */\n  tokens: string\n}\n\n/** Every `--color-<name>` a stylesheet declares. */\nfunction colourRoles(css: string): Set<string> {\n  return new Set([...css.matchAll(/--color-([a-z0-9-]+)\\s*:/g)].map(([, name]) => name!))\n}\n\nfunction imports(css: string, file: string): boolean {\n  return new RegExp(`@import\\\\s+['\"]rei-kit/${file}['\"]`).test(css)\n}\n\n/**\n * The roles a rule in the dark sets, where that rule can beat `:root`.\n *\n * The kit writes two kinds, and the difference is the whole point. A plain\n * `.dark { … }` has the same specificity as `:root` and is emitted after it,\n * so it wins — an app that restates one of those roles in `@theme` and not\n * under `.dark` keeps the kit's colour at night. A `:where(.dark) { … }`\n * carries no specificity at all, which is exactly why the kit puts the\n * filled roles there: an app's own brand has to survive after dark, and\n * before that block existed the kit's lightening beat it.\n *\n * So only the first kind is something an app has to answer, and a reader\n * that lumps them together reports nine roles that are already correct. It\n * did, once, against a real app — which is how this comment came to be here\n * rather than in the version that shipped.\n *\n * The body runs to its matching brace, not the next one: these blocks hold\n * comments and nested rules. And it is found from a rule rather than from\n * the word, or a comment mentioning `.dark` starts the slice and swallows\n * the stylesheet.\n */\nfunction darkRoles(css: string): Set<string> {\n  const bodies: string[] = []\n\n  /* Not preceded by `)` or a word character, so `:where(.dark)` and\n     `.dark [data-palette]` are both left out — the first for specificity,\n     the second because it answers a palette rather than the app. */\n  for (const match of css.matchAll(/(?<![\\w):])\\.dark\\s*\\{/g)) {\n    let depth = 1\n    let at = match.index! + match[0].length\n\n    while (at < css.length && depth > 0) {\n      if (css[at] === '{') depth += 1\n      else if (css[at] === '}') depth -= 1\n      at += 1\n    }\n\n    bodies.push(css.slice(match.index! + match[0].length, at - 1))\n  }\n\n  return colourRoles(bodies.join('\\n'))\n}\n\n/**\n * What is missing from an app's stylesheet, as a list to assert is empty.\n *\n * ```ts\n * import { checkStyling } from 'rei-kit/check'\n *\n * it('is wired to the kit', () => {\n *   expect(\n *     checkStyling({\n *       css: readFileSync('src/assets/main.css', 'utf8'),\n *       tokens: readFileSync('node_modules/rei-kit/dist/tokens.css', 'utf8'),\n *     }),\n *   ).toEqual([])\n * })\n * ```\n */\nexport function checkStyling({ css, tokens }: StylingInput): StylingProblem[] {\n  const problems: StylingProblem[] = []\n\n  /* The preset is tokens, shell, materials, palettes, the compiled component\n     styles and the `@source` — so an app that imports one has answered every\n     question below at once, and asking them separately would report faults it\n     does not have. */\n  const preset = imports(css, 'mobile.css') || imports(css, 'web.css')\n\n  if (preset && imports(css, 'mobile.css') && imports(css, 'web.css')) {\n    problems.push({\n      message:\n        'Both presets are imported. They are two answers to the same question, and the second one wins wherever they disagree.',\n      fix: \"keep one of @import 'rei-kit/mobile.css' or @import 'rei-kit/web.css'\",\n    })\n  }\n\n  if (!preset) {\n    if (!imports(css, 'styles.css')) {\n      problems.push({\n        message:\n          'The compiled component styles are not imported, so every component keeps its markup and loses its layout. Nothing else reports this: the build is green and the page renders.',\n        fix: \"@import 'rei-kit/mobile.css'; /* or web.css — the preset carries the rest too */\",\n      })\n    }\n\n    if (!/@source\\s+['\"][^'\"]*node_modules\\/rei-kit[^'\"]*['\"]/.test(css)) {\n      problems.push({\n        message:\n          'Tailwind is not told to scan the kit, so it emits no utility the components ask for. It does not walk node_modules unless pointed at it.',\n        fix: \"@source '<relative path>/node_modules/rei-kit/dist';\",\n      })\n    }\n  }\n\n  /* Checked last and only when the roles cannot be arriving from the kit\n     itself, so the list reports what the app has to define rather than\n     repeating the import it is already being told about. */\n  const declared = colourRoles(css)\n  if (!preset && !imports(css, 'tokens.css')) {\n    const missing = [...colourRoles(tokens)].filter((role) => !declared.has(role))\n\n    if (missing.length) {\n      problems.push({\n        message: `These colour roles are never defined, so every utility built on them emits nothing: ${missing.join(', ')}.`,\n        fix: \"@import 'rei-kit/tokens.css';\",\n      })\n    }\n  }\n\n  /* The trap an app found before this check existed, and the sharpest one\n     here: `@theme` compiles to `:root`, which Tailwind emits near the top of\n     the stylesheet, while the kit's `.dark` block arrives after it. A role\n     the app restates in `@theme` but not under `.dark` therefore keeps the\n     kit's value at night — so the app comes up in somebody else's colours\n     after dark, with a green build and every other check passing. */\n  const kitDark = darkRoles(tokens)\n  const appDark = darkRoles(css)\n  const redefined = [...declared].filter((role) => kitDark.has(role) && !appDark.has(role))\n\n  if (redefined.length) {\n    problems.push({\n      message: `These roles are redefined for the day and left at the kit's own values at night, because \\`@theme\\` lands in \\`:root\\` and the kit's \\`.dark\\` comes after it: ${redefined.join(', ')}.`,\n      fix: '.dark { --color-primary: …; } — restate each one under `.dark` as well',\n    })\n  }\n\n  return problems\n}\n"],"mappings":";;AAuCA,SAAS,YAAY,KAA0B;CAC7C,OAAO,IAAI,IAAI,CAAC,GAAG,IAAI,SAAS,2BAA2B,CAAC,CAAC,CAAC,KAAK,GAAG,UAAU,IAAK,CAAC;AACxF;AAEA,SAAS,QAAQ,KAAa,MAAuB;CACnD,OAAO,IAAI,OAAO,0BAA0B,KAAK,KAAK,CAAC,CAAC,KAAK,GAAG;AAClE;;;;;;;;;;;;;;;;;;;;;;AAuBA,SAAS,UAAU,KAA0B;CAC3C,MAAM,SAAmB,CAAC;CAK1B,KAAK,MAAM,SAAS,IAAI,SAAS,yBAAyB,GAAG;EAC3D,IAAI,QAAQ;EACZ,IAAI,KAAK,MAAM,QAAS,MAAM,EAAE,CAAC;EAEjC,OAAO,KAAK,IAAI,UAAU,QAAQ,GAAG;GACnC,IAAI,IAAI,QAAQ,KAAK,SAAS;QACzB,IAAI,IAAI,QAAQ,KAAK,SAAS;GACnC,MAAM;EACR;EAEA,OAAO,KAAK,IAAI,MAAM,MAAM,QAAS,MAAM,EAAE,CAAC,QAAQ,KAAK,CAAC,CAAC;CAC/D;CAEA,OAAO,YAAY,OAAO,KAAK,IAAI,CAAC;AACtC;;;;;;;;;;;;;;;;;AAkBA,SAAgB,aAAa,EAAE,KAAK,UAA0C;CAC5E,MAAM,WAA6B,CAAC;CAMpC,MAAM,SAAS,QAAQ,KAAK,YAAY,KAAK,QAAQ,KAAK,SAAS;CAEnE,IAAI,UAAU,QAAQ,KAAK,YAAY,KAAK,QAAQ,KAAK,SAAS,GAChE,SAAS,KAAK;EACZ,SACE;EACF,KAAK;CACP,CAAC;CAGH,IAAI,CAAC,QAAQ;EACX,IAAI,CAAC,QAAQ,KAAK,YAAY,GAC5B,SAAS,KAAK;GACZ,SACE;GACF,KAAK;EACP,CAAC;EAGH,IAAI,CAAC,sDAAsD,KAAK,GAAG,GACjE,SAAS,KAAK;GACZ,SACE;GACF,KAAK;EACP,CAAC;CAEL;CAKA,MAAM,WAAW,YAAY,GAAG;CAChC,IAAI,CAAC,UAAU,CAAC,QAAQ,KAAK,YAAY,GAAG;EAC1C,MAAM,UAAU,CAAC,GAAG,YAAY,MAAM,CAAC,CAAC,CAAC,QAAQ,SAAS,CAAC,SAAS,IAAI,IAAI,CAAC;EAE7E,IAAI,QAAQ,QACV,SAAS,KAAK;GACZ,SAAS,uFAAuF,QAAQ,KAAK,IAAI,EAAE;GACnH,KAAK;EACP,CAAC;CAEL;CAQA,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,UAAU,UAAU,GAAG;CAC7B,MAAM,YAAY,CAAC,GAAG,QAAQ,CAAC,CAAC,QAAQ,SAAS,QAAQ,IAAI,IAAI,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC;CAExF,IAAI,UAAU,QACZ,SAAS,KAAK;EACZ,SAAS,kKAAkK,UAAU,KAAK,IAAI,EAAE;EAChM,KAAK;CACP,CAAC;CAGH,OAAO;AACT"}

package/dist/components/BaseInput.vue.d.ts

@@ -42,6 +42,25 @@ declare const __VLS_export: <T extends string | number | undefined = string>(__V
          * its errors impossible without hand-writing the control.
          */
         fieldId?: string | undefined;
+        /**
+         * Classes for the control itself, rather than for the field around it.
+         *
+         * `class` lands on the field, because that is where Vue puts a
+         * component's class and because a layout class means "space this field".
+         * That leaves `variant="unstyled"` with no way to paint the control it
+         * just stripped — the point of stripping it — which is why an app with a
+         * large amount field wrote the whole thing by hand instead.
+         *
+         * It appends, so with the default variant a conflict is settled by
+         * Tailwind's own order rather than by writing it here; reach for it with
+         * `unstyled`, where there is nothing to settle.
+         *
+         * Under `unstyled` it also takes over the 16px floor that stops iOS
+         * zooming on focus: `text-base` cannot be beaten by a larger utility, so
+         * the kit stops asserting it rather than overrule a caller who asked to
+         * paint the control. Keep the control at 16px or more.
+         */
+        controlClass?: string | undefined;
     } & Omit<InputHTMLAttributes, "type" | "size">) & {
         "onUpdate:modelValue"?: (value: T) => any;
     }> & (typeof globalThis extends {

package/dist/components/BaseSelect.vue.d.ts

@@ -44,6 +44,20 @@ declare const __VLS_export: <T extends string | number>(__VLS_props: NonNullable
          * its errors impossible without hand-writing the control.
          */
         fieldId?: string | undefined;
+        /**
+         * Classes for the control itself, rather than for the field around it.
+         *
+         * `class` lands on the field, because that is where Vue puts a
+         * component's class and because a layout class means "space this field".
+         * That leaves `variant="unstyled"` with no way to paint the control it
+         * just stripped — the point of stripping it — which is why an app with a
+         * large amount field wrote the whole thing by hand instead.
+         *
+         * It appends, so with the default variant a conflict is settled by
+         * Tailwind's own order rather than by writing it here; reach for it with
+         * `unstyled`, where there is nothing to settle.
+         */
+        controlClass?: string | undefined;
     } & {
         modelValue?: T | undefined;
     }) & {

package/dist/components/BaseTextarea.vue.d.ts

@@ -35,6 +35,20 @@ type __VLS_Props = {
      * its errors impossible without hand-writing the control.
      */
     fieldId?: string | undefined;
+    /**
+     * Classes for the control itself, rather than for the field around it.
+     *
+     * `class` lands on the field, because that is where Vue puts a
+     * component's class and because a layout class means "space this field".
+     * That leaves `variant="unstyled"` with no way to paint the control it
+     * just stripped — the point of stripping it — which is why an app with a
+     * large amount field wrote the whole thing by hand instead.
+     *
+     * It appends, so with the default variant a conflict is settled by
+     * Tailwind's own order rather than by writing it here; reach for it with
+     * `unstyled`, where there is nothing to settle.
+     */
+    controlClass?: string | undefined;
 };
 /**
  * Focus the control, for a caller that owns when it happens.

package/dist/components/PasswordInput.vue.d.ts

@@ -51,6 +51,20 @@ type __VLS_Props = {
     /** The input's `id`, for an `ErrorSummary` that links to this field. */
     fieldId?: string | undefined;
     size?: 'sm' | 'md' | undefined;
+    /**
+     * Classes for the control itself, rather than for the field around it.
+     *
+     * `class` lands on the field, because that is where Vue puts a
+     * component's class and because a layout class means "space this field".
+     * That leaves `variant="unstyled"` with no way to paint the control it
+     * just stripped — the point of stripping it — which is why an app with a
+     * large amount field wrote the whole thing by hand instead.
+     *
+     * It appends, so with the default variant a conflict is settled by
+     * Tailwind's own order rather than by writing it here; reach for it with
+     * `unstyled`, where there is nothing to settle.
+     */
+    controlClass?: string | undefined;
 } & /* @vue-ignore */ Omit<InputHTMLAttributes, 'size' | 'type'>;
 /**
  * Focus the control, for a caller that owns when it happens.

package/dist/index.js

@@ -1,7 +1,7 @@
 import { a as addDays, c as lastNDays, d as toDateKey, f as todayKey, i as needsIosInstall, l as leadingBlanks, n as isApplePortable, o as eachDayOfYear, r as isInstalled, s as fromDateKey, t as SettingsGroup_default, u as startOfWeek } from "./SettingsGroup-BXkajKGl.js";
 import { a as formatNumber, i as formatDate, o as setFormatLocale, r as watchVisibility } from "./environment-Cz5KiC1t.js";
 import { a as BaseCheckbox_default, c as useBoundValue, d as ensureSheetRoot, i as textDirection, l as useVisualViewport, n as elementDirection, o as BaseSheet_default, r as horizontalStep, t as focusTarget, u as SHEET_ROOT_ID } from "./focus-target-BtcoJdmz.js";
-import { _ as toRedirectPath, a as useFieldAttrs, c as useToast, d as isThemePreference, f as readStoredTheme, g as safeRedirect, h as tapFeedback, i as BaseInput_default, l as useOnline, m as useTheme, n as useAnnounce, o as FormField_default, p as setThemeStorageKey, r as GoogleButton_default, s as BaseAlert_default, t as announce, u as applyTheme } from "./use-announce-BGZnV78W.js";
+import { _ as toRedirectPath, a as useFieldAttrs, c as useToast, d as isThemePreference, f as readStoredTheme, g as safeRedirect, h as tapFeedback, i as BaseInput_default, l as useOnline, m as useTheme, n as useAnnounce, o as FormField_default, p as setThemeStorageKey, r as GoogleButton_default, s as BaseAlert_default, t as announce, u as applyTheme } from "./use-announce-B8Ln-LsE.js";
 import { n as registerErrorMapper, r as toAppError, t as AppError } from "./app-error-DF9cijE0.js";
 import { a as BaseSkeleton_default, c as useMediaQuery, l as useDragScroll, n as ScrollArea_default, o as useMenuKeys, s as useAnchoredPanel, t as BaseListbox_default } from "./BaseListbox-D-NQ6nDd.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.js";
@@ -1015,7 +1015,8 @@ var BaseSelect_default = /* @__PURE__ */ defineComponent({
 		placeholder: { default: "" },
 		size: { default: "md" },
 		variant: { default: "default" },
-		fieldId: { default: () => void 0 }
+		fieldId: { default: () => void 0 },
+		controlClass: { default: () => void 0 }
 	}, {
 		"modelValue": {},
 		"modelModifiers": {}
@@ -1063,7 +1064,8 @@ var BaseSelect_default = /* @__PURE__ */ defineComponent({
 					class: normalizeClass(["w-full appearance-none", [
 						__props.variant === "unstyled" ? "" : "control text-ink rounded-card focus-visible:outline-primary py-0 pr-10 pl-3 focus-visible:outline-2 focus-visible:outline-offset-1",
 						__props.variant === "unstyled" ? "" : SIZE_CLASS[__props.size],
-						__props.variant !== "unstyled" && invalid ? "border-negative" : ""
+						__props.variant !== "unstyled" && invalid ? "border-negative" : "",
+						__props.controlClass
 					]])
 				}, [__props.placeholder ? (openBlock(), createElementBlock("option", _hoisted_3$28, toDisplayString(__props.placeholder), 1)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
 					return openBlock(), createElementBlock("option", {
@@ -1621,7 +1623,8 @@ var BaseTextarea_default = /* @__PURE__ */ defineComponent({
 		rows: { default: 4 },
 		size: { default: "md" },
 		variant: { default: "default" },
-		fieldId: { default: () => void 0 }
+		fieldId: { default: () => void 0 },
+		controlClass: { default: () => void 0 }
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { expose: __expose, emit: __emit }) {
@@ -1667,7 +1670,8 @@ var BaseTextarea_default = /* @__PURE__ */ defineComponent({
 				}, unref(controlAttrs), { class: [
 					__props.variant === "unstyled" ? "" : "control text-ink rounded-card focus-visible:outline-primary resize-y px-3 py-2 leading-relaxed focus-visible:outline-2 focus-visible:outline-offset-1",
 					"text-base",
-					__props.variant !== "unstyled" && invalid ? "border-negative" : ""
+					__props.variant !== "unstyled" && invalid ? "border-negative" : "",
+					__props.controlClass
 				] }), null, 16, _hoisted_1$40), [[vModelText, unref(model)]])]),
 				_: 1
 			}, 8, [
@@ -4763,7 +4767,8 @@ var PasswordInput_default = /* @__PURE__ */ defineComponent({
 			default: false
 		},
 		fieldId: { default: () => void 0 },
-		size: { default: "md" }
+		size: { default: "md" },
+		controlClass: { default: () => void 0 }
 	},
 	emits: ["update:modelValue", "toggle"],
 	setup(__props, { expose: __expose, emit: __emit }) {
@@ -4849,7 +4854,11 @@ var PasswordInput_default = /* @__PURE__ */ defineComponent({
 					autocapitalize: "none",
 					spellcheck: false
 				}, unref(controlAttrs), {
-					class: ["control text-ink rounded-card focus-visible:outline-primary w-full ps-3 pe-11 focus-visible:outline-2 focus-visible:outline-offset-1", [CONTROL_CLASS, invalid ? "border-negative" : ""]],
+					class: ["control text-ink rounded-card focus-visible:outline-primary w-full ps-3 pe-11 focus-visible:outline-2 focus-visible:outline-offset-1", [
+						CONTROL_CLASS,
+						invalid ? "border-negative" : "",
+						__props.controlClass
+					]],
 					onInput: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event.target.value))
 				}), null, 16, _hoisted_2$2), createElementVNode("button", {
 					type: "button",
@@ -5189,7 +5198,7 @@ function createI18nRuntime(options) {
 *
 * The fallback keeps `vitest` and `vite dev` honest, where no define runs.
 */
-var VERSION = "3.5.0";
+var VERSION = "3.7.0";
 //#endregion
 export { ActivityGrid_default as ActivityGrid, AnnounceHost_default as AnnounceHost, AppError, AvatarStack_default as AvatarStack, BarChart_default as BarChart, BaseAlert_default as BaseAlert, BaseAvatar_default as BaseAvatar, BaseBadge_default as BaseBadge, BaseButton_default as BaseButton, BaseCalendar_default as BaseCalendar, BaseCard_default as BaseCard, BaseCheckbox_default as BaseCheckbox, BaseChip_default as BaseChip, BaseCombobox_default as BaseCombobox, BaseDatePicker_default as BaseDatePicker, BaseInput_default as BaseInput, BaseKbd_default as BaseKbd, BaseLink_default as BaseLink, BaseListbox_default as BaseListbox, BaseMenu_default as BaseMenu, BasePopconfirm_default as BasePopconfirm, BasePopover_default as BasePopover, BaseRadioGroup_default as BaseRadioGroup, BaseRating_default as BaseRating, BaseSelect_default as BaseSelect, BaseSeparator_default as BaseSeparator, BaseSheet_default as BaseSheet, BaseSkeleton_default as BaseSkeleton, BaseSlider_default as BaseSlider, BaseSpinner_default as BaseSpinner, BaseStepper_default as BaseStepper, BaseSwitch_default as BaseSwitch, BaseTable_default as BaseTable, BaseTextarea_default as BaseTextarea, BaseTimeline_default as BaseTimeline, CircularProgress_default as CircularProgress, CodeBlock_default as CodeBlock, ColorPicker_default as ColorPicker, CopyButton_default as CopyButton, DescriptionList_default as DescriptionList, DonutChart_default as DonutChart, EmptyState_default as EmptyState, ErrorBoundary_default as ErrorBoundary, ErrorSummary_default as ErrorSummary, FileDrop_default as FileDrop, FormField_default as FormField, GoogleButton_default as GoogleButton, LocaleLinks_default as LocaleLinks, MATERIALS, NumberInput_default as NumberInput, PALETTES, PageContainer_default as PageContainer, PageHeader_default as PageHeader, PasswordInput_default as PasswordInput, PinInput_default as PinInput, PriceCard_default as PriceCard, ProgressBar_default as ProgressBar, SHEET_ROOT_ID, ScrollArea_default as ScrollArea, SectionHeading_default as SectionHeading, SegmentedControl_default as SegmentedControl, SettingsGroup_default as SettingsGroup, SettingsRow_default as SettingsRow, SkeletonList_default as SkeletonList, SliderField_default as SliderField, StatCard_default as StatCard, TabBar_default as TabBar, TagsInput_default as TagsInput, TimePicker_default as TimePicker, ToastHost_default as ToastHost, ToggleGroup_default as ToggleGroup, ToneDot_default as ToneDot, VERSION, VirtualList_default as VirtualList, addDays, announce, applyMaterial, applyPalette, applyTheme, createI18nRuntime, downloadJson, eachDayOfYear, elementDirection, ensureSheetRoot, formatDate, formatNumber, fromDateKey, horizontalStep, isApplePortable, isInstalled, isMaterial, isPaletteName, isThemePreference, lastNDays, leadingBlanks, needsIosInstall, readStoredTheme, registerErrorMapper, relativeDayLabel, safeRedirect, setFormatLocale, setMaterialStorageKey, setPaletteStorageKey, setThemeStorageKey, startOfWeek, tapFeedback, textDirection, toAppError, toDateKey, toRedirectPath, todayKey, useAnnounce, useDebouncedCallback, useDragScroll, useMaterial, useMediaQuery, useOnline, usePalette, useTheme, useToast, useToday, useVisualViewport };