rei-kit 3.2.1 → 3.4.0

package/README.md

@@ -165,7 +165,7 @@ app, and the case *least* favourable to this kit:
 
 | Kit                  |         JS |         CSS |       Total |
 | -------------------- | ---------: | ----------: | ----------: |
-| **rei-kit 3.2.1**    | **3.6 KB** | **23.1 KB** | **26.8 KB** |
+| **rei-kit 3.4.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.2.1**    | **8.6 KB** | **23.1 KB** | **31.7 KB**  |
+| **rei-kit 3.4.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.2.1 — three consumers.**
+**v3.4.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/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/CopyButton.vue.d.ts

@@ -21,13 +21,46 @@ type __VLS_Props = {
     errorLabel?: string | undefined;
     /** Show the label beside the icon, rather than only to assistive tech. */
     withText?: boolean | undefined;
+    /**
+     * `unstyled` keeps the copying and drops the surface and the icon.
+     *
+     * The announcement is the part that is laborious and the part that is
+     * dropped: a copy button that says nothing leaves somebody who cannot see
+     * the tick pressing it twice. Three places on this kit's own site wrote
+     * their own copy button to get a different shape — a pill in a code block's
+     * bar, a whole install command — and all three lost the announcement on the
+     * way. That is the gap this closes: the behaviour without the paint, the
+     * same answer `BaseButton` and `BaseInput` give.
+     *
+     * Unstyled brings no focus ring either, so give it one.
+     */
+    variant?: 'default' | 'unstyled' | undefined;
 };
-declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+/**
+ * The button's content, for a shape the icon-and-label pair does not cover.
+ *
+ * Given one, set `withText` as well: the `aria-label` exists to name a button
+ * whose only content is an icon, and a slot that renders words does not need
+ * naming twice.
+ */
+type __VLS_Slots = {
+    default?: (props: {
+        copied: boolean;
+        failed: boolean;
+    }) => unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     failed: () => any;
     copied: () => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onFailed?: () => any;
     onCopied?: () => any;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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,
@@ -3539,10 +3577,18 @@ var CopyButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		withText: {
 			type: Boolean,
 			default: false
-		}
+		},
+		variant: { default: "default" }
 	},
 	emits: ["copied", "failed"],
 	setup(__props, { emit: __emit }) {
+		/**
+		* The button's content, for a shape the icon-and-label pair does not cover.
+		*
+		* Given one, set `withText` as well: the `aria-label` exists to name a button
+		* whose only content is an icon, and a slot that renders words does not need
+		* naming twice.
+		*/
 		const emit = __emit;
 		const state = ref("idle");
 		let timer = null;
@@ -3564,28 +3610,27 @@ var CopyButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("button", {
 				type: "button",
-				class: normalizeClass(["rk-copy control focus-ring", {
+				class: normalizeClass(__props.variant === "unstyled" ? "" : ["rk-copy control focus-ring", {
 					"is-copied": state.value === "copied",
 					"with-text": __props.withText
 				}]),
 				"aria-label": __props.withText ? void 0 : state.value === "copied" ? __props.copiedLabel : __props.copyLabel,
 				onClick: copy
-			}, [
-				state.value === "copied" ? (openBlock(), createBlock(unref(Check), {
-					key: 0,
-					class: "size-4 shrink-0",
-					"aria-hidden": "true"
-				})) : (openBlock(), createBlock(unref(Copy), {
-					key: 1,
-					class: "size-4 shrink-0",
-					"aria-hidden": "true"
-				})),
-				__props.withText ? (openBlock(), createElementBlock("span", _hoisted_2$12, toDisplayString(state.value === "copied" ? __props.copiedLabel : __props.copyLabel), 1)) : createCommentVNode("", true),
-				createElementVNode("span", _hoisted_3$11, toDisplayString(state.value === "copied" ? __props.copiedLabel : state.value === "failed" ? __props.errorLabel ?? "" : ""), 1)
-			], 10, _hoisted_1$14);
+			}, [renderSlot(_ctx.$slots, "default", {
+				copied: state.value === "copied",
+				failed: state.value === "failed"
+			}, () => [state.value === "copied" ? (openBlock(), createBlock(unref(Check), {
+				key: 0,
+				class: "size-4 shrink-0",
+				"aria-hidden": "true"
+			})) : (openBlock(), createBlock(unref(Copy), {
+				key: 1,
+				class: "size-4 shrink-0",
+				"aria-hidden": "true"
+			})), __props.withText ? (openBlock(), createElementBlock("span", _hoisted_2$12, toDisplayString(state.value === "copied" ? __props.copiedLabel : __props.copyLabel), 1)) : createCommentVNode("", true)], true), createElementVNode("span", _hoisted_3$11, toDisplayString(state.value === "copied" ? __props.copiedLabel : state.value === "failed" ? __props.errorLabel ?? "" : ""), 1)], 10, _hoisted_1$14);
 		};
 	}
-}), [["__scopeId", "data-v-c481e140"]]);
+}), [["__scopeId", "data-v-446f2f89"]]);
 //#endregion
 //#region src/components/CodeBlock.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$13 = {
@@ -4721,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.
@@ -4765,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)),
@@ -4778,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,
@@ -5125,7 +5189,7 @@ function createI18nRuntime(options) {
 *
 * The fallback keeps `vitest` and `vite dev` honest, where no define runs.
 */
-var VERSION = "3.2.1";
+var VERSION = "3.4.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 };