rei-kit 3.0.0 → 3.2.0

package/dist/motion/index.d.ts

@@ -6,21 +6,65 @@
  * asked for less motion, keeps assistive tech to the finished value, and
  * stops when hovered or focused if it moves on its own. The utilities that go
  * with them are in `rei-kit/motion.css`, which both presets include.
+ *
+ * @example
+ * ```vue
+ * <NumberTicker :value="balance" :format="{ style: 'currency', currency: 'TRY' }" />
+ * ```
+ *
+ * @see {@link CountUp} — the near-neighbour this is mistaken for
  */
 export { default as NumberTicker } from './NumberTicker.vue';
-/** A number that counts up to its value once it scrolls into view. */
+/**
+ * A number that counts up to its value once it scrolls into view.
+ *
+ * @example
+ * ```vue
+ * <CountUp :value="12480" />
+ * ```
+ *
+ * @see {@link NumberTicker} — the near-neighbour this is mistaken for
+ */
 export { default as CountUp } from './CountUp.vue';
 /**
  * One word in a sentence that changes on its own: "Build it *glass*", then
  * *brutal*, then *soft*.
+ *
+ * @example
+ * ```vue
+ * <h1>Build it <TextRotate :words="['glass', 'brutal', 'soft']" /></h1>
+ * ```
  */
 export { default as TextRotate } from './TextRotate.vue';
 /**
  * Text that types itself out, and — given several lines — deletes each one
  * and types the next.
+ *
+ * @example
+ * ```vue
+ * <TypeWriter :text="['Write it once.', 'Change the look.', 'Ship it.']" />
+ * ```
  */
 export { default as TypeWriter } from './TypeWriter.vue';
-/** Content that fades or rises into place as it scrolls into view. */
+/**
+ * Content that fades or rises into place as it scrolls into view.
+ *
+ * @example
+ * ```vue
+ * <BaseReveal v-for="(item, i) in items" :key="item" :delay="i * 80">
+ *   <BaseCard>{{ item }}</BaseCard>
+ * </BaseReveal>
+ * ```
+ */
 export { default as BaseReveal } from './BaseReveal.vue';
-/** A row that scrolls sideways without end: logos, testimonials, a ticker. */
+/**
+ * A row that scrolls sideways without end: logos, testimonials, a ticker.
+ *
+ * @example
+ * ```vue
+ * <BaseMarquee :duration="40">
+ *   <BaseBadge v-for="name in names" :key="name">{{ name }}</BaseBadge>
+ * </BaseMarquee>
+ * ```
+ */
 export { default as BaseMarquee } from './BaseMarquee.vue';

package/dist/pwa/index.d.ts

@@ -14,9 +14,49 @@ export { useSnooze } from './use-snooze';
 /**
  * The card that offers to install the app, and remembers being turned
  * down.
+ *
+ * @example
+ * ```vue
+ * <InstallPrompt
+ *   storage-key="my-app-install"
+ *   title="Install My app"
+ *   body="Open it from your home screen, even offline."
+ *   action="Install"
+ *   later="Not now"
+ * />
+ * ```
  */
 export { default as InstallPrompt } from './InstallPrompt.vue';
-/** The way back to installing after the card has been dismissed. */
+/**
+ * The way back to installing after the card has been dismissed.
+ *
+ * @example
+ * ```vue
+ * <InstallSettings
+ *   title="App"
+ *   label="Install on this device"
+ *   installed-label="Installed"
+ *   body="Opens from your home screen, works offline."
+ *   ios-body="Tap Share, then Add to Home Screen."
+ *   action="Install"
+ * />
+ * ```
+ */
 export { default as InstallSettings } from './InstallSettings.vue';
-/** The card that says a new version is waiting. */
+/**
+ * The card that says a new version is waiting.
+ *
+ * @example
+ * ```vue
+ * <UpdatePrompt
+ *   :open="needRefresh"
+ *   title="A new version is ready"
+ *   body="Reload to get it."
+ *   action="Reload"
+ *   dismiss-label="Later"
+ *   @update="reload"
+ *   @dismiss="needRefresh = false"
+ * />
+ * ```
+ */
 export { default as UpdatePrompt } from './UpdatePrompt.vue';

package/dist/styles.css

@@ -209,12 +209,12 @@
    cannot reach slot content, which belongs to the caller's scope, so
    `.tour-forward-*` and `.tour-backward-*` ship unscoped in
    `rei-kit/shell/mobile.css` where the caller's slide can actually see them. */
-.tour-enter-active[data-v-8c293eec],
-.tour-leave-active[data-v-8c293eec] {
+.tour-enter-active[data-v-8daef303],
+.tour-leave-active[data-v-8daef303] {
   transition: opacity var(--duration-base) ease;
 }
-.tour-enter-from[data-v-8c293eec],
-.tour-leave-to[data-v-8c293eec] {
+.tour-enter-from[data-v-8daef303],
+.tour-leave-to[data-v-8daef303] {
   opacity: 0;
 }
 
@@ -763,24 +763,24 @@
 /* The buttons are out of the Tab order: the keyboard already has the arrows,
    and three stops for one number is two too many. They stay reachable by
    pointer and by touch, which is who they are for. */
-.rk-number[data-v-082bd3d7] {
+.rk-number[data-v-d8a8fb7e] {
   display: flex;
   align-items: center;
   height: 2.75rem;
   border-radius: var(--radius-card);
   padding: 0 0.25rem;
 }
-.rk-number[data-v-082bd3d7]:focus-within {
+.rk-number[data-v-d8a8fb7e]:focus-within {
   outline: 2px solid var(--color-primary);
   outline-offset: 1px;
 }
-.rk-number.is-invalid[data-v-082bd3d7] {
+.rk-number.is-invalid[data-v-d8a8fb7e] {
   --surface-border-color: var(--color-negative);
 }
-.rk-number.is-disabled[data-v-082bd3d7] {
+.rk-number.is-disabled[data-v-d8a8fb7e] {
   opacity: 0.5;
 }
-.rk-number-field[data-v-082bd3d7] {
+.rk-number-field[data-v-d8a8fb7e] {
   min-width: 0;
   flex: 1;
   background: transparent;
@@ -790,7 +790,7 @@
   color: var(--color-ink);
   outline: none;
 }
-.rk-number-step[data-v-082bd3d7] {
+.rk-number-step[data-v-d8a8fb7e] {
   display: grid;
   width: 2.25rem;
   height: 2.25rem;
@@ -800,10 +800,10 @@
   color: var(--color-ink);
   transition: background-color var(--duration-fast) var(--ease-standard);
 }
-.rk-number-step[data-v-082bd3d7]:hover:not(:disabled) {
+.rk-number-step[data-v-d8a8fb7e]:hover:not(:disabled) {
   background: var(--color-muted);
 }
-.rk-number-step[data-v-082bd3d7]:disabled {
+.rk-number-step[data-v-d8a8fb7e]:disabled {
   opacity: 0.35;
 }
 
@@ -1769,7 +1769,7 @@ to {
   color: var(--color-ink-soft);
 }
 
-.rk-color-row[data-v-5ca23aa9] {
+.rk-color-row[data-v-721fcae8] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -1779,7 +1779,7 @@ to {
 /* The well is what is seen; the input inside it is the whole target. A
    native colour input cannot be styled past its swatch in every browser, so
    it is stretched over a box that can be. */
-.rk-color-well[data-v-5ca23aa9] {
+.rk-color-well[data-v-721fcae8] {
   position: relative;
   display: block;
   width: 2.75rem;
@@ -1789,7 +1789,7 @@ to {
   border: 1px solid var(--color-hair);
   background: var(--rk-color);
 }
-.rk-color-native[data-v-5ca23aa9] {
+.rk-color-native[data-v-721fcae8] {
   position: absolute;
   inset: 0;
   width: 100%;
@@ -1799,14 +1799,14 @@ to {
 }
 
 /* The ring goes on the well, since the input it belongs to is invisible. */
-.rk-color-well[data-v-5ca23aa9]:has(.rk-color-native:focus-visible) {
+.rk-color-well[data-v-721fcae8]:has(.rk-color-native:focus-visible) {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
-.rk-color-native[data-v-5ca23aa9]:disabled {
+.rk-color-native[data-v-721fcae8]:disabled {
   cursor: not-allowed;
 }
-.rk-color-hex[data-v-5ca23aa9] {
+.rk-color-hex[data-v-721fcae8] {
   width: 7.5rem;
   height: 2.75rem;
   border-radius: var(--radius-card);
@@ -1817,19 +1817,19 @@ to {
   font-size: 1rem;
   color: var(--color-ink);
 }
-.rk-color-hex[data-v-5ca23aa9]:focus-visible {
+.rk-color-hex[data-v-721fcae8]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: -1px;
 }
-.rk-color-hex[data-v-5ca23aa9]:disabled {
+.rk-color-hex[data-v-721fcae8]:disabled {
   opacity: 0.5;
 }
-.rk-color-swatches[data-v-5ca23aa9] {
+.rk-color-swatches[data-v-721fcae8] {
   display: flex;
   flex-wrap: wrap;
   gap: 0.375rem;
 }
-.rk-color-swatch[data-v-5ca23aa9] {
+.rk-color-swatch[data-v-721fcae8] {
   display: block;
   width: 1.75rem;
   height: 1.75rem;
@@ -1838,25 +1838,25 @@ to {
   background: var(--rk-color);
   transition: transform var(--duration-fast) var(--ease-standard);
 }
-.rk-color-swatch[data-v-5ca23aa9]:hover:not(:disabled) {
+.rk-color-swatch[data-v-721fcae8]:hover:not(:disabled) {
   transform: scale(1.1);
 }
 
 /* A ring around the chosen one rather than a tick: a tick has to be dark or
    light to be seen, and the swatch beneath it is whatever the app chose. */
-.rk-color-swatch.is-chosen[data-v-5ca23aa9] {
+.rk-color-swatch.is-chosen[data-v-721fcae8] {
   box-shadow:
     0 0 0 2px var(--color-surface),
     0 0 0 4px var(--color-primary);
 }
-.rk-color-swatch[data-v-5ca23aa9]:disabled {
+.rk-color-swatch[data-v-721fcae8]:disabled {
   opacity: 0.5;
 }
 @media (prefers-reduced-motion: reduce) {
-.rk-color-swatch[data-v-5ca23aa9] {
+.rk-color-swatch[data-v-721fcae8] {
     transition: none;
 }
-.rk-color-swatch[data-v-5ca23aa9]:hover:not(:disabled) {
+.rk-color-swatch[data-v-721fcae8]:hover:not(:disabled) {
     transform: none;
 }
 }
@@ -2054,7 +2054,7 @@ to {
   color: var(--color-ink);
 }
 
-.rk-tags[data-v-1fd08921] {
+.rk-tags[data-v-572364bd] {
   display: flex;
   min-height: 2.75rem;
   cursor: text;
@@ -2067,18 +2067,18 @@ to {
 
 /* `:has(input:focus-visible)` rather than `:focus-within`: the ring belongs
    to the field, not to the chips' remove buttons, which carry their own. */
-.rk-tags[data-v-1fd08921]:has(.rk-tags-field:focus-visible) {
+.rk-tags[data-v-572364bd]:has(.rk-tags-field:focus-visible) {
   outline: 2px solid var(--color-primary);
   outline-offset: 1px;
 }
-.rk-tags.is-invalid[data-v-1fd08921] {
+.rk-tags.is-invalid[data-v-572364bd] {
   --surface-border-color: var(--color-negative);
 }
-.rk-tags.is-disabled[data-v-1fd08921] {
+.rk-tags.is-disabled[data-v-572364bd] {
   cursor: not-allowed;
   opacity: 0.5;
 }
-.rk-tags-field[data-v-1fd08921] {
+.rk-tags-field[data-v-572364bd] {
   min-width: 6rem;
   flex: 1;
   background: transparent;
@@ -2138,10 +2138,10 @@ to {
   transform: translateY(4px) scale(0.98);
 }
 
-.rk-time[data-v-ad58b4f3] {
+.rk-time[data-v-2ae98769] {
   display: block;
 }
-.rk-time-field[data-v-ad58b4f3] {
+.rk-time-field[data-v-2ae98769] {
   display: flex;
   width: 100%;
   height: 2.75rem;
@@ -2154,16 +2154,16 @@ to {
   font-variant-numeric: tabular-nums;
   color: var(--color-ink);
 }
-.rk-time-field.is-empty[data-v-ad58b4f3] {
+.rk-time-field.is-empty[data-v-2ae98769] {
   color: var(--color-ink-soft);
 }
-.rk-time-field.is-invalid[data-v-ad58b4f3] {
+.rk-time-field.is-invalid[data-v-2ae98769] {
   --surface-border-color: var(--color-negative);
 }
-.rk-time-field[data-v-ad58b4f3]:disabled {
+.rk-time-field[data-v-2ae98769]:disabled {
   opacity: 0.5;
 }
-.rk-time-columns[data-v-ad58b4f3] {
+.rk-time-columns[data-v-2ae98769] {
   display: grid;
   grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
   gap: 0.5rem;
@@ -2232,16 +2232,16 @@ to {
   margin-top: 0.5rem;
 }
 
-.rk-date[data-v-42390973] {
+.rk-date[data-v-2c91e3bb] {
   display: block;
 }
 
 /* Wider than a popover's default: a calendar and a column of presets side by
    side do not fit in 24rem, and the month title wraps in two. */
-.rk-date[data-v-42390973] .rk-popover-panel {
+.rk-date[data-v-2c91e3bb] .rk-popover-panel {
   max-width: min(34rem, calc(100vw - 1rem));
 }
-.rk-date-wrap[data-v-42390973] {
+.rk-date-wrap[data-v-2c91e3bb] {
   display: flex;
   width: 100%;
   height: 2.75rem;
@@ -2249,7 +2249,7 @@ to {
   border-radius: var(--radius-card);
   padding-inline-end: 0.375rem;
 }
-.rk-date-field[data-v-42390973] {
+.rk-date-field[data-v-2c91e3bb] {
   display: flex;
   min-width: 0;
   flex: 1;
@@ -2262,16 +2262,16 @@ to {
   font-size: 1rem;
   color: var(--color-ink);
 }
-.rk-date-field.is-empty[data-v-42390973] {
+.rk-date-field.is-empty[data-v-2c91e3bb] {
   color: var(--color-ink-soft);
 }
-.rk-date-wrap.is-invalid[data-v-42390973] {
+.rk-date-wrap.is-invalid[data-v-2c91e3bb] {
   --surface-border-color: var(--color-negative);
 }
-.rk-date-field[data-v-42390973]:disabled {
+.rk-date-field[data-v-2c91e3bb]:disabled {
   opacity: 0.5;
 }
-.rk-date-clear[data-v-42390973] {
+.rk-date-clear[data-v-2c91e3bb] {
   display: grid;
   width: 1.375rem;
   height: 1.375rem;
@@ -2280,27 +2280,27 @@ to {
   border-radius: 9999px;
   color: var(--color-ink-soft);
 }
-.rk-date-clear[data-v-42390973]:hover {
+.rk-date-clear[data-v-2c91e3bb]:hover {
   background: var(--color-muted);
   color: var(--color-ink);
 }
-.rk-date-clear[data-v-42390973]:focus-visible {
+.rk-date-clear[data-v-2c91e3bb]:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 1px;
 }
 
 /* As wide as its contents rather than as narrow as they will go: in a flex
    panel the calendar shrinks, and a squeezed month title wraps in two. */
-.rk-date-panel[data-v-42390973] {
+.rk-date-panel[data-v-2c91e3bb] {
   display: flex;
   width: max-content;
   max-width: 100%;
   gap: 0.75rem;
 }
-.rk-date-panel[data-v-42390973] .rk-cal {
+.rk-date-panel[data-v-2c91e3bb] .rk-cal {
   width: 17rem;
 }
-.rk-date-presets[data-v-42390973] {
+.rk-date-presets[data-v-2c91e3bb] {
   display: flex;
   min-width: 8rem;
   flex-direction: column;
@@ -2308,7 +2308,7 @@ to {
   border-inline-end: 1px solid var(--surface-border-color);
   padding-inline-end: 0.75rem;
 }
-.rk-date-preset[data-v-42390973] {
+.rk-date-preset[data-v-2c91e3bb] {
   width: 100%;
   border-radius: var(--radius-cell);
   padding: 0.375rem 0.5rem;
@@ -2317,14 +2317,14 @@ to {
   color: var(--color-ink);
   transition: background-color var(--duration-fast) var(--ease-standard);
 }
-.rk-date-preset[data-v-42390973]:hover {
+.rk-date-preset[data-v-2c91e3bb]:hover {
   background: var(--color-muted);
 }
 @media (max-width: 30rem) {
-.rk-date-panel[data-v-42390973] {
+.rk-date-panel[data-v-2c91e3bb] {
     flex-direction: column;
 }
-.rk-date-presets[data-v-42390973] {
+.rk-date-presets[data-v-2c91e3bb] {
     flex-direction: row;
     flex-wrap: wrap;
     border-inline-end: 0;
@@ -2332,7 +2332,7 @@ to {
     padding-inline-end: 0;
     padding-bottom: 0.5rem;
 }
-.rk-date-preset[data-v-42390973] {
+.rk-date-preset[data-v-2c91e3bb] {
     width: auto;
 }
 }

package/dist/{use-announce-B_JGTXHZ.js → use-announce-D8SKsiqn.js}

@@ -1,5 +1,5 @@
 import { c as useBoundValue } from "./focus-target-BtcoJdmz.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createStaticVNode, createTextVNode, defineComponent, isRef, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, readonly, ref, renderSlot, toDisplayString, unref, useAttrs, useId, vModelDynamic, watch, withCtx, withDirectives } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createStaticVNode, createTextVNode, defineComponent, isRef, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, readonly, ref, renderSlot, toDisplayString, unref, useAttrs, useId, useSlots, vModelDynamic, watch, withCtx, withDirectives } from "vue";
 //#region src/utils/redirect.ts
 /**
 * Resolves a `?redirect=` query value into a safe in-app path.
@@ -325,8 +325,8 @@ function useToast() {
 //#endregion
 //#region src/components/BaseAlert.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$3 = ["role", "aria-live"];
-var _hoisted_2$1 = { class: "min-w-0 flex-1" };
-var _hoisted_3$1 = {
+var _hoisted_2$2 = { class: "min-w-0 flex-1" };
+var _hoisted_3$2 = {
 	key: 0,
 	class: "text-ink font-semibold"
 };
@@ -367,7 +367,7 @@ var BaseAlert_default = /* @__PURE__ */ defineComponent({
 					class: normalizeClass(["mt-px grid size-6 shrink-0 place-items-center rounded-full text-xs font-semibold", mark.value]),
 					"aria-hidden": "true"
 				}, [renderSlot(_ctx.$slots, "mark")], 2)) : createCommentVNode("", true),
-				createElementVNode("div", _hoisted_2$1, [_ctx.$slots.title ? (openBlock(), createElementBlock("p", _hoisted_3$1, [renderSlot(_ctx.$slots, "title")])) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(_ctx.$slots.title ? "mt-1" : "") }, [renderSlot(_ctx.$slots, "default")], 2)]),
+				createElementVNode("div", _hoisted_2$2, [_ctx.$slots.title ? (openBlock(), createElementBlock("p", _hoisted_3$2, [renderSlot(_ctx.$slots, "title")])) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(_ctx.$slots.title ? "mt-1" : "") }, [renderSlot(_ctx.$slots, "default")], 2)]),
 				renderSlot(_ctx.$slots, "action")
 			], 10, _hoisted_1$3);
 		};
@@ -376,8 +376,8 @@ var BaseAlert_default = /* @__PURE__ */ defineComponent({
 //#endregion
 //#region src/components/FormField.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$2 = ["for"];
-var _hoisted_2 = ["id"];
-var _hoisted_3 = ["id"];
+var _hoisted_2$1 = ["id"];
+var _hoisted_3$1 = ["id"];
 //#endregion
 //#region src/components/FormField.vue
 var FormField_default = /* @__PURE__ */ defineComponent({
@@ -418,11 +418,11 @@ var FormField_default = /* @__PURE__ */ defineComponent({
 					key: 0,
 					id: errorId.value,
 					class: "text-negative text-xs"
-				}, toDisplayString(__props.error), 9, _hoisted_2)) : __props.hint ? (openBlock(), createElementBlock("p", {
+				}, toDisplayString(__props.error), 9, _hoisted_2$1)) : __props.hint ? (openBlock(), createElementBlock("p", {
 					key: 1,
 					id: hintId.value,
 					class: "text-ink-soft text-xs"
-				}, toDisplayString(__props.hint), 9, _hoisted_3)) : createCommentVNode("", true)
+				}, toDisplayString(__props.hint), 9, _hoisted_3$1)) : createCommentVNode("", true)
 			], 2);
 		};
 	}
@@ -452,7 +452,21 @@ function useFieldAttrs() {
 }
 //#endregion
 //#region src/components/BaseInput.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$1 = [
+var _hoisted_1$1 = {
+	key: 0,
+	class: "text-ink-soft flex shrink-0 items-center ps-3"
+};
+var _hoisted_2 = [
+	"id",
+	"type",
+	"aria-invalid",
+	"aria-describedby"
+];
+var _hoisted_3 = {
+	key: 1,
+	class: "text-ink-soft flex shrink-0 items-center pe-3"
+};
+var _hoisted_4 = [
 	"id",
 	"type",
 	"aria-invalid",
@@ -475,7 +489,8 @@ var BaseInput_default = /* @__PURE__ */ defineComponent({
 		},
 		type: { default: "text" },
 		size: { default: "md" },
-		variant: { default: "default" }
+		variant: { default: "default" },
+		fieldId: { default: () => void 0 }
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -486,10 +501,45 @@ var BaseInput_default = /* @__PURE__ */ defineComponent({
 		* Every attribute of a native input — `placeholder`, `autocomplete`,
 		* `inputmode` — goes to the input itself, not to the wrapper around it.
 		*/
+		const slots = useSlots();
+		const grouped = computed(() => __props.variant !== "unstyled" && Boolean(slots.prefix || slots.suffix));
+		/**
+		* A number field's value is a number.
+		*
+		* Typed to `string` alone, `type="number"` forced the caller to keep a string
+		* ref and convert on both sides of it — and a component you have to wrap in
+		* order to use is one you write yourself instead, which is exactly what the
+		* first numeric field tried to reach for it did.
+		*
+		* Generic rather than `string | number`, so the value is whatever the app
+		* bound: a `ref('')` gets strings back and a `ref(0)` numbers, and a
+		* `string | undefined` from a form library is accepted as it is.
+		*/
+		/**
+		* Something attached to the field: a currency mark, a unit, a button.
+		*
+		* Both of these were written by hand inside this kit before they were a
+		* slot — `PasswordInput` positions a toggle over the field and `NumberInput`
+		* two steppers — and an app that wanted "€" in front of an amount had to
+		* rebuild the whole field to get it, losing the label wiring and
+		* `aria-describedby` on the way. That is the gap test, with the kit itself
+		* as the app.
+		*
+		* Given either slot, the border and the ground move to a wrapper and the
+		* input goes transparent inside it, so the edge encloses the addon whatever
+		* width it is. With neither, the field renders exactly as it did before the
+		* slots existed.
+		*
+		* **What goes in them is yours, including whether it is read out.** A `€`
+		* beside a field labelled "Amount" is decoration and belongs behind
+		* `aria-hidden`; a unit that is the only place "kilograms" appears is not,
+		* and belongs in the label instead. The kit cannot tell which it is.
+		*/
 		const emit = __emit;
 		const model = useBoundValue(() => __props.modelValue, (value) => emit("update:modelValue", value));
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(FormField_default, {
+				"field-id": __props.fieldId,
 				class: normalizeClass(unref(fieldClass)),
 				style: normalizeStyle(unref(fieldStyle)),
 				label: __props.label,
@@ -498,9 +548,23 @@ var BaseInput_default = /* @__PURE__ */ defineComponent({
 				"label-hidden": __props.labelHidden,
 				size: __props.size
 			}, {
-				default: withCtx(({ id, describedBy, invalid }) => [withDirectives(createElementVNode("input", mergeProps({
+				default: withCtx(({ id, describedBy, invalid }) => [grouped.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(["control rounded-card has-focus-visible:outline-primary flex items-stretch overflow-hidden has-focus-visible:outline-2 has-focus-visible:outline-offset-1", [CONTROL_CLASS, invalid ? "border-negative" : ""]])
+				}, [
+					_ctx.$slots.prefix ? (openBlock(), createElementBlock("span", _hoisted_1$1, [renderSlot(_ctx.$slots, "prefix")])) : createCommentVNode("", true),
+					withDirectives(createElementVNode("input", mergeProps({
+						id,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(model) ? model.value = $event : null),
+						type: __props.type,
+						"aria-invalid": invalid,
+						"aria-describedby": describedBy
+					}, unref(controlAttrs), { class: "text-ink min-w-0 flex-1 bg-transparent px-3 text-base focus-visible:outline-none" }), null, 16, _hoisted_2), [[vModelDynamic, unref(model)]]),
+					_ctx.$slots.suffix ? (openBlock(), createElementBlock("span", _hoisted_3, [renderSlot(_ctx.$slots, "suffix")])) : createCommentVNode("", true)
+				], 2)) : withDirectives((openBlock(), createElementBlock("input", mergeProps({
+					key: 1,
 					id,
-					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(model) ? model.value = $event : null),
+					"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(model) ? model.value = $event : null),
 					type: __props.type,
 					"aria-invalid": invalid,
 					"aria-describedby": describedBy
@@ -508,9 +572,10 @@ var BaseInput_default = /* @__PURE__ */ defineComponent({
 					__props.variant === "unstyled" ? "" : "control text-ink rounded-card focus-visible:outline-primary px-3 focus-visible:outline-2 focus-visible:outline-offset-1",
 					__props.variant === "unstyled" ? "text-base" : CONTROL_CLASS,
 					__props.variant !== "unstyled" && invalid ? "border-negative" : ""
-				] }), null, 16, _hoisted_1$1), [[vModelDynamic, unref(model)]])]),
-				_: 1
+				] }), null, 16, _hoisted_4)), [[vModelDynamic, unref(model)]])]),
+				_: 3
 			}, 8, [
+				"field-id",
 				"class",
 				"style",
 				"label",
@@ -593,4 +658,4 @@ function useAnnounce() {
 //#endregion
 export { toRedirectPath as _, useFieldAttrs as a, useToast as c, isThemePreference as d, readStoredTheme as f, safeRedirect as g, tapFeedback as h, BaseInput_default as i, useOnline as l, useTheme as m, useAnnounce as n, FormField_default as o, setThemeStorageKey as p, GoogleButton_default as r, BaseAlert_default as s, announce as t, applyTheme as u };
 
-//# sourceMappingURL=use-announce-B_JGTXHZ.js.map
+//# sourceMappingURL=use-announce-D8SKsiqn.js.map