rei-kit 3.3.0 → 3.5.0

package/README.md

@@ -165,7 +165,7 @@ app, and the case *least* favourable to this kit:
 
 | Kit                  |         JS |         CSS |       Total |
 | -------------------- | ---------: | ----------: | ----------: |
-| **rei-kit 3.3.0**    | **3.6 KB** | **23.1 KB** | **26.8 KB** |
+| **rei-kit 3.5.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.3.0**    | **8.6 KB** | **23.1 KB** | **31.7 KB**  |
+| **rei-kit 3.5.0**    | **8.6 KB** | **23.1 KB** | **31.7 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  |
@@ -234,7 +234,7 @@ Each claim here is enforced by something that fails, not by a promise.
 
 ## Status
 
-**v3.3.0 — three consumers.**
+**v3.5.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-D8SKsiqn.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 { 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/index.d.ts

@@ -0,0 +1,52 @@
+/**
+ * The wiring that fails silently, checked at unit-test speed.
+ *
+ * Every line of this package's install can be left out and leave a build that
+ * is green: a missing `@source` means Tailwind never emits the utilities the
+ * components ask for, a missing stylesheet import means the components keep
+ * their markup and lose their layout, and a colour role the app never defines
+ * makes `bg-primary` emit no declaration at all. None of it is visible to
+ * `vue-tsc`, to a component test, or to a reader of the diff. One of the apps
+ * in this family shipped a release with its tab bar invisible exactly this
+ * way.
+ *
+ * Both apps then wrote the same check, independently, with three of the four
+ * assertions carrying the same names — which is this kit's own test for a
+ * missing part. So the check moved here, and it knows one thing their copies
+ * could not: that the preset exists and carries the `@source` and the
+ * component styles with it.
+ *
+ * Nothing here reads a file or touches the DOM. The caller supplies the two
+ * stylesheets as text, because that is the only part that differs between a
+ * Vitest run, a Node script and a CI step.
+ */
+/** A problem found in an app's stylesheet, written to be read in a failure. */
+export type StylingProblem = {
+    /** What is wrong, in one sentence. */
+    message: string;
+    /** The line to add, where there is a single obvious one. */
+    fix?: string;
+};
+export type StylingInput = {
+    /** The app's own stylesheet — the file that imports Tailwind. */
+    css: string;
+    /** `node_modules/rei-kit/dist/tokens.css`, for the roles it declares. */
+    tokens: string;
+};
+/**
+ * What is missing from an app's stylesheet, as a list to assert is empty.
+ *
+ * ```ts
+ * import { checkStyling } from 'rei-kit/check'
+ *
+ * it('is wired to the kit', () => {
+ *   expect(
+ *     checkStyling({
+ *       css: readFileSync('src/assets/main.css', 'utf8'),
+ *       tokens: readFileSync('node_modules/rei-kit/dist/tokens.css', 'utf8'),
+ *     }),
+ *   ).toEqual([])
+ * })
+ * ```
+ */
+export declare function checkStyling({ css, tokens }: StylingInput): StylingProblem[];

package/dist/check.js

@@ -0,0 +1,55 @@
+//#region src/check/index.ts
+/** Every `--color-<name>` a stylesheet declares. */
+function colourRoles(css) {
+	return new Set([...css.matchAll(/--color-([a-z0-9-]+)\s*:/g)].map(([, name]) => name));
+}
+function imports(css, file) {
+	return new RegExp(`@import\\s+['"]rei-kit/${file}['"]`).test(css);
+}
+/**
+* What is missing from an app's stylesheet, as a list to assert is empty.
+*
+* ```ts
+* import { checkStyling } from 'rei-kit/check'
+*
+* it('is wired to the kit', () => {
+*   expect(
+*     checkStyling({
+*       css: readFileSync('src/assets/main.css', 'utf8'),
+*       tokens: readFileSync('node_modules/rei-kit/dist/tokens.css', 'utf8'),
+*     }),
+*   ).toEqual([])
+* })
+* ```
+*/
+function checkStyling({ css, tokens }) {
+	const problems = [];
+	const preset = imports(css, "mobile.css") || imports(css, "web.css");
+	if (preset && imports(css, "mobile.css") && imports(css, "web.css")) problems.push({
+		message: "Both presets are imported. They are two answers to the same question, and the second one wins wherever they disagree.",
+		fix: "keep one of @import 'rei-kit/mobile.css' or @import 'rei-kit/web.css'"
+	});
+	if (!preset) {
+		if (!imports(css, "styles.css")) problems.push({
+			message: "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.",
+			fix: "@import 'rei-kit/mobile.css'; /* or web.css — the preset carries the rest too */"
+		});
+		if (!/@source\s+['"][^'"]*node_modules\/rei-kit[^'"]*['"]/.test(css)) problems.push({
+			message: "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.",
+			fix: "@source '<relative path>/node_modules/rei-kit/dist';"
+		});
+	}
+	const declared = colourRoles(css);
+	if (!preset && !imports(css, "tokens.css")) {
+		const missing = [...colourRoles(tokens)].filter((role) => !declared.has(role));
+		if (missing.length) problems.push({
+			message: `These colour roles are never defined, so every utility built on them emits nothing: ${missing.join(", ")}.`,
+			fix: "@import 'rei-kit/tokens.css';"
+		});
+	}
+	return problems;
+}
+//#endregion
+export { checkStyling };
+
+//# sourceMappingURL=check.js.map

package/dist/check.js.map

@@ -0,0 +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"}

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

@@ -47,7 +47,9 @@ declare const __VLS_export: <T extends string | number | undefined = string>(__V
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
-    expose: (exposed: {}) => void;
+    expose: (exposed: import('vue').ShallowUnwrapRef<{
+        focus: () => void;
+    }>) => void;
     attrs: any;
     slots: {
         prefix?: () => unknown;

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

@@ -51,7 +51,9 @@ declare const __VLS_export: <T extends string | number>(__VLS_props: NonNullable
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
-    expose: (exposed: {}) => void;
+    expose: (exposed: import('vue').ShallowUnwrapRef<{
+        focus: () => void;
+    }>) => void;
     attrs: any;
     slots: {};
     emit: (event: "update:modelValue", value: T | undefined) => void;

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

@@ -36,7 +36,22 @@ type __VLS_Props = {
      */
     fieldId?: string | undefined;
 };
-declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+/**
+ * Focus the control, for a caller that owns when it happens.
+ *
+ * A `ref` on a component gives the component and not the element, so without
+ * this a field cannot be focused at all — which is why an app that focuses
+ * its amount field when a sheet opens, and again when the amount is
+ * rejected, wrote the whole field by hand instead and said so in a comment.
+ * That is the gap test, with the reason already written down.
+ *
+ * `ErrorSummary` has exposed `focus` since it existed, for the same need
+ * from the other end.
+ */
+declare function focus(): void;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {
+    focus: typeof focus;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: (value: string) => any;

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

@@ -52,7 +52,22 @@ type __VLS_Props = {
     fieldId?: string | undefined;
     size?: 'sm' | 'md' | undefined;
 } & /* @vue-ignore */ Omit<InputHTMLAttributes, 'size' | 'type'>;
-declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+/**
+ * Focus the control, for a caller that owns when it happens.
+ *
+ * A `ref` on a component gives the component and not the element, so without
+ * this a field cannot be focused at all — which is why an app that focuses
+ * its amount field when a sheet opens, and again when the amount is
+ * rejected, wrote the whole field by hand instead and said so in a comment.
+ * That is the gap test, with the reason already written down.
+ *
+ * `ErrorSummary` has exposed `focus` since it existed, for the same need
+ * from the other end.
+ */
+declare function focus(): void;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {
+    focus: typeof focus;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     toggle: (visible: boolean) => any;
     "update:modelValue": (value: string) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{

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-D8SKsiqn.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 { 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";
@@ -1021,12 +1021,29 @@ var BaseSelect_default = /* @__PURE__ */ defineComponent({
 		"modelModifiers": {}
 	}),
 	emits: ["update:modelValue"],
-	setup(__props) {
+	setup(__props, { expose: __expose }) {
 		const SIZE_CLASS = {
 			sm: "h-11 text-sm",
 			md: "h-11 text-base"
 		};
 		const model = useModel(__props, "modelValue");
+		const control = ref(null);
+		/**
+		* Focus the control, for a caller that owns when it happens.
+		*
+		* A `ref` on a component gives the component and not the element, so without
+		* this a field cannot be focused at all — which is why an app that focuses
+		* its amount field when a sheet opens, and again when the amount is
+		* rejected, wrote the whole field by hand instead and said so in a comment.
+		* That is the gap test, with the reason already written down.
+		*
+		* `ErrorSummary` has exposed `focus` since it existed, for the same need
+		* from the other end.
+		*/
+		function focus() {
+			control.value?.focus();
+		}
+		__expose({ focus });
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(FormField_default, {
 				"field-id": __props.fieldId,
@@ -1038,6 +1055,8 @@ var BaseSelect_default = /* @__PURE__ */ defineComponent({
 			}, {
 				default: withCtx(({ id, describedBy, invalid }) => [createElementVNode("div", _hoisted_1$47, [withDirectives(createElementVNode("select", {
 					id,
+					ref_key: "control",
+					ref: control,
 					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
 					"aria-invalid": invalid,
 					"aria-describedby": describedBy,
@@ -1605,10 +1624,27 @@ var BaseTextarea_default = /* @__PURE__ */ defineComponent({
 		fieldId: { default: () => void 0 }
 	},
 	emits: ["update:modelValue"],
-	setup(__props, { emit: __emit }) {
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const { fieldClass, fieldStyle, controlAttrs } = useFieldAttrs();
 		const emit = __emit;
 		const model = useBoundValue(() => __props.modelValue, (value) => emit("update:modelValue", value));
+		const control = ref(null);
+		/**
+		* Focus the control, for a caller that owns when it happens.
+		*
+		* A `ref` on a component gives the component and not the element, so without
+		* this a field cannot be focused at all — which is why an app that focuses
+		* its amount field when a sheet opens, and again when the amount is
+		* rejected, wrote the whole field by hand instead and said so in a comment.
+		* That is the gap test, with the reason already written down.
+		*
+		* `ErrorSummary` has exposed `focus` since it existed, for the same need
+		* from the other end.
+		*/
+		function focus() {
+			control.value?.focus();
+		}
+		__expose({ focus });
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(FormField_default, {
 				"field-id": __props.fieldId,
@@ -1622,6 +1658,8 @@ var BaseTextarea_default = /* @__PURE__ */ defineComponent({
 			}, {
 				default: withCtx(({ id, describedBy, invalid }) => [withDirectives(createElementVNode("textarea", mergeProps({
 					id,
+					ref_key: "control",
+					ref: control,
 					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(model) ? model.value = $event : null),
 					rows: __props.rows,
 					"aria-invalid": invalid,
@@ -4728,7 +4766,7 @@ var PasswordInput_default = /* @__PURE__ */ defineComponent({
 		size: { default: "md" }
 	},
 	emits: ["update:modelValue", "toggle"],
-	setup(__props, { emit: __emit }) {
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const { fieldClass, fieldStyle, controlAttrs } = useFieldAttrs();
 		/**
 		* A password field you can look at.
@@ -4772,6 +4810,23 @@ var PasswordInput_default = /* @__PURE__ */ defineComponent({
 			visible.value = !visible.value;
 			emit("toggle", visible.value);
 		}
+		const control = ref(null);
+		/**
+		* Focus the control, for a caller that owns when it happens.
+		*
+		* A `ref` on a component gives the component and not the element, so without
+		* this a field cannot be focused at all — which is why an app that focuses
+		* its amount field when a sheet opens, and again when the amount is
+		* rejected, wrote the whole field by hand instead and said so in a comment.
+		* That is the gap test, with the reason already written down.
+		*
+		* `ErrorSummary` has exposed `focus` since it existed, for the same need
+		* from the other end.
+		*/
+		function focus() {
+			control.value?.focus();
+		}
+		__expose({ focus });
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(FormField_default, {
 				class: normalizeClass(unref(fieldClass)),
@@ -4785,6 +4840,8 @@ var PasswordInput_default = /* @__PURE__ */ defineComponent({
 			}, {
 				default: withCtx(({ id, describedBy, invalid }) => [createElementVNode("div", _hoisted_1$2, [createElementVNode("input", mergeProps({
 					id,
+					ref_key: "control",
+					ref: control,
 					type: visible.value ? "text" : "password",
 					value: __props.modelValue,
 					"aria-invalid": invalid,
@@ -5132,7 +5189,7 @@ function createI18nRuntime(options) {
 *
 * The fallback keeps `vitest` and `vite dev` honest, where no define runs.
 */
-var VERSION = "3.3.0";
+var VERSION = "3.5.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 };