@omnitend/dashboard-for-laravel 0.22.0 → 0.23.0

package/dist/types/index.d.ts

@@ -231,6 +231,29 @@ export interface FieldDefinition {
      * applied as `disabled`.
      */
     readonly?: MaybeFn<boolean>;
+    /**
+     * Display the value as static text instead of a control — no border, no
+     * input box (Bootstrap's `.form-control-plaintext`). For values a
+     * profile/settings page shows but never lets you edit, where a `readonly`
+     * input still reads as "you could edit this, but can't".
+     *
+     * Implies read-only, for every field type. Anything backed by a real input
+     * — the text family, textarea, currency, percentage, autocomplete — renders
+     * as static text; control types with no native readonly state
+     * (select/radio/checkbox/switch/file) are disabled instead, exactly as they
+     * are for `readonly`.
+     *
+     * Enforced over `inputProps`: unlike the field's other bindings, which
+     * `inputProps` may override, a plaintext field cannot be made editable
+     * again through it.
+     */
+    plaintext?: MaybeFn<boolean>;
+    /**
+     * Only for `type: "password"`. Show the reveal (eye) toggle that switches
+     * the input between masked and plain text. Defaults to `true` — set
+     * `false` to render a bare password input.
+     */
+    revealable?: boolean;
     /**
      * Conditionally show or hide this field. When omitted the field is
      * always visible. Boolean or a function of the form model; evaluated

package/docs/public/api-reference.json

@@ -1,8 +1,8 @@
 {
-  "generated": "2026-07-11T04:13:01.837Z",
+  "generated": "2026-07-11T08:44:15.505Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.21.0"
+    "version": "0.22.0"
   },
   "components": {
     "base": [
@@ -1468,6 +1468,22 @@
               {
                 "name": "name",
                 "title": "binding"
+              },
+              {
+                "title": "binding",
+                "type": {
+                  "name": "function"
+                },
+                "name": "toggleSidebar",
+                "description": "Shows/hides the sidebar."
+              },
+              {
+                "title": "binding",
+                "type": {
+                  "name": "boolean"
+                },
+                "name": "sidebarHidden",
+                "description": "Whether the sidebar is currently hidden."
               }
             ]
           },
@@ -1562,7 +1578,7 @@
           },
           {
             "name": "user-icon",
-            "description": "Custom user avatar/icon in the dropdown trigger.",
+            "description": "Custom user avatar/icon in the dropdown trigger. To decorate the default avatar (e.g. add a notification dot) rather than replace it, render `DXUserAvatar` — the same component used here, so the styling comes with it.",
             "bindings": [
               {
                 "title": "binding",
@@ -1571,6 +1587,14 @@
                 },
                 "name": "initial",
                 "description": "The first letter of the user's name."
+              },
+              {
+                "title": "binding",
+                "type": {
+                  "name": "object"
+                },
+                "name": "user",
+                "description": "The signed-in user."
               }
             ]
           },
@@ -2857,6 +2881,39 @@
             "required": false,
             "description": "API endpoint for creating new items (e.g., \"/api/products\") — enables \"New\" button"
           },
+          {
+            "name": "showCreateButton",
+            "type": "boolean",
+            "required": false,
+            "default": "true",
+            "description": "Render the built-in \"New {item}\" button in the card header (default\n`true` whenever `createUrl` is set). Set `false` to drive the create\nmodal from your own trigger elsewhere — e.g. a button in the dashboard\nnavbar's actions slot calling the exposed `openCreate()`. With no\n`title` and no `header` slot, the header is then dropped entirely\nrather than left empty."
+          },
+          {
+            "name": "footClone",
+            "type": "boolean",
+            "required": false,
+            "default": "false",
+            "description": "Render a `<tfoot>` mirroring the header row, so `#foot(<key>)` slots can\nhold per-column totals that line up under their data (#99). Without it\nthere is no footer to put them in. For a fully custom footer, use the\n`custom-foot` slot instead."
+          },
+          {
+            "name": "showEmpty",
+            "type": "boolean",
+            "required": false,
+            "default": "true",
+            "description": "Show a message row when there are no rows (default `true`). An empty\ntable body is indistinguishable from a broken one, so the message is on\nby default. Override the wording with `emptyText`, or the whole row with\nthe `empty` slot."
+          },
+          {
+            "name": "emptyText",
+            "type": "string",
+            "required": false,
+            "description": "Message shown when there are no rows. Defaults to \"No {items} found\", or\n\"No {items} match your filters\" when a column filter is active."
+          },
+          {
+            "name": "expandedItems",
+            "type": "Array",
+            "required": false,
+            "description": "Rows currently expanded, as a `v-model`. Pair with the `row-expansion`\nslot to render detail content under a row (#112) instead of forcing every\nper-row detail into a modal."
+          },
           {
             "name": "clientSide",
             "type": "boolean",
@@ -2925,6 +2982,11 @@
             "description": "`v-model:sortBy` update, emitted with the normalized single-column sort array when sorting changes.",
             "properties": []
           },
+          {
+            "name": "update:expandedItems",
+            "description": "`v-model:expandedItems` update, emitted with the rows currently expanded.",
+            "properties": []
+          },
           {
             "name": "update:filters",
             "description": "`v-model:filters` update, emitted with the new filter map when a column filter changes.",
@@ -2949,7 +3011,7 @@
           },
           {
             "name": "name",
-            "description": "Custom rendering for a column's cell. Name it `cell(<fieldKey>)` to target a field; receives the underlying table cell scope.",
+            "description": "Any slot the underlying table supports, forwarded with its scope: `cell(<fieldKey>)` for a cell, `foot(<fieldKey>)` for a footer cell (needs `footClone`), `empty` for the no-rows message, `row-expansion` for expandable row detail, plus `custom-foot`, `top-row`, `bottom-row`, `thead-sub` and the `table-*` slots.",
             "bindings": [
               {
                 "name": "name",
@@ -3150,12 +3212,64 @@
           }
         ],
         "methods": []
+      },
+      {
+        "name": "DXUserAvatar",
+        "category": "extended",
+        "filePath": "resources/js/components/extended/DXUserAvatar.vue",
+        "description": "The circular user avatar shown in the dashboard navbar's user menu: a single initial on a solid disc, with an optional notification dot. It exists as its own component because `DXDashboardNavbar`'s `user-icon` slot is one consumers routinely *decorate* rather than replace — adding an unread badge, wrapping it in a link. The navbar's styles are scoped, so slot content (compiled in the consumer's scope) can't reuse them; without this component every override starts by re-implementing the avatar's CSS, which then drifts from the theme. Rendering it here means an override is one line and stays on theme.",
+        "props": [
+          {
+            "name": "user",
+            "type": "union",
+            "required": false,
+            "default": "null",
+            "description": "The user whose initial is shown. The first letter of `name` is used."
+          },
+          {
+            "name": "initial",
+            "type": "string",
+            "required": false,
+            "default": "\"\"",
+            "description": "Overrides the initial derived from `user.name` (e.g. two-letter initials)."
+          },
+          {
+            "name": "badge",
+            "type": "boolean",
+            "required": false,
+            "default": "false",
+            "description": "Show a notification dot on the avatar (e.g. unread updates)."
+          },
+          {
+            "name": "badgeVariant",
+            "type": "ColorVariant",
+            "required": false,
+            "default": "\"danger\"",
+            "description": "Colour of the notification dot."
+          },
+          {
+            "name": "badgeLabel",
+            "type": "string",
+            "required": false,
+            "default": "\"Unread notifications\"",
+            "description": "Accessible text for the notification dot, announced to screen readers\n(the dot itself is a colour-only signal). Ignored unless `badge` is set."
+          }
+        ],
+        "events": [],
+        "slots": [
+          {
+            "name": "default",
+            "description": "Replaces the initial inside the disc (e.g. a photo or an icon).",
+            "bindings": []
+          }
+        ],
+        "methods": []
       }
     ]
   },
   "stats": {
-    "totalComponents": 73,
+    "totalComponents": 74,
     "baseComponents": 57,
-    "extendedComponents": 16
+    "extendedComponents": 17
   }
 }

package/docs/public/docs-map.md

@@ -1,7 +1,7 @@
 # Documentation Map
 
 > Auto-generated hierarchical overview of all documentation
-> Last updated: 2026-07-11T04:13:01.900Z
+> Last updated: 2026-07-11T08:44:15.559Z
 
 This file provides a complete map of all available documentation for AI agents and developers.
 
@@ -82,6 +82,7 @@ This file provides a complete map of all available documentation for AI agents a
 - [DXStatCard](/components/extended/DXStatCard): A KPI / stat tile: a big formatted value with a title, optional subtitle, an
 - [DXSwitch](/components/extended/DXSwitch): A "filled box" toggle switch built on `DFormCheckbox`: a bordered box sized like
 - [DXTable](/components/extended/DXTable): A comprehensive data table component with built-in pagination, sorting, filtering, and CRUD operatio
+- [DXUserAvatar](/components/extended/DXUserAvatar): The circular user avatar shown in the dashboard navbar's user menu: a single
 
 ### Examples
 
@@ -100,4 +101,4 @@ This file provides a complete map of all available documentation for AI agents a
 
 ---
 
-**Total Pages**: 76
+**Total Pages**: 77

package/docs/public/llms.txt

@@ -2,7 +2,7 @@
 
 > Vue 3 dashboard components for Laravel with Bootstrap Vue Next
 >
-> A dual-package library (NPM + Composer) providing 68 Vue 3 components for building Laravel dashboards with Bootstrap Vue Next.
+> A dual-package library (NPM + Composer) providing 69 Vue 3 components for building Laravel dashboards with Bootstrap Vue Next.
 
 ## Installation
 
@@ -81,7 +81,7 @@ Lightweight type-safe wrappers around Bootstrap Vue Next components providing AP
 - [DToaster](/components/base/dtoaster): Bootstrap Vue Next Toaster wrapper
 - [DTooltip](/components/base/dtooltip): Bootstrap Vue Next Tooltip wrapper
 
-## Extended Components (11 components)
+## Extended Components (12 components)
 
 Custom dashboard components with advanced functionality beyond Bootstrap Vue Next.
 
@@ -96,6 +96,7 @@ Custom dashboard components with advanced functionality beyond Bootstrap Vue Nex
 - [DXStatCard](/components/extended/dxstatcard): Extended dashboard component
 - [DXSwitch](/components/extended/dxswitch): Extended dashboard component
 - [DXTable](/components/extended/dxtable): Data table with pagination, filtering, and sorting
+- [DXUserAvatar](/components/extended/dxuseravatar): Extended dashboard component
 
 ## Composables
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnitend/dashboard-for-laravel",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "Vue 3 dashboard components for Laravel with Bootstrap Vue Next",
   "type": "module",
   "main": "./dist/dashboard-for-laravel.umd.cjs",

package/resources/js/components/extended/DXDashboard.vue

@@ -25,8 +25,17 @@
         :key="strippedName"
         #[strippedName]="slotProps"
       >
-        <!-- @slot Forwards any `sidebar-*` slot to DXDashboardSidebar with the `sidebar-` prefix stripped (e.g. `sidebar-brand` becomes the sidebar's `brand` slot). -->
-        <slot :name="originalName" v-bind="slotProps" />
+        <!--
+          @slot Forwards any `sidebar-*` slot to DXDashboardSidebar with the `sidebar-` prefix stripped (e.g. `sidebar-brand` becomes the sidebar's `brand` slot).
+          @binding {function} toggleSidebar Shows/hides the sidebar — so slot content (e.g. a close affordance in the brand row) can drive it.
+          @binding {boolean} sidebarHidden Whether the sidebar is currently hidden.
+        -->
+        <slot
+          :name="originalName"
+          v-bind="slotProps"
+          :toggleSidebar="toggleSidebar"
+          :sidebarHidden="hidden"
+        />
       </template>
     </DXDashboardSidebar>
 
@@ -46,8 +55,17 @@
           :key="strippedName"
           #[strippedName]="slotProps"
         >
-          <!-- @slot Forwards any `navbar-*` slot to DXDashboardNavbar with the `navbar-` prefix stripped (e.g. `navbar-actions` becomes the navbar's `actions` slot). -->
-          <slot :name="originalName" v-bind="slotProps" />
+          <!--
+            @slot Forwards any `navbar-*` slot to DXDashboardNavbar with the `navbar-` prefix stripped (e.g. `navbar-actions` becomes the navbar's `actions` slot).
+            @binding {function} toggleSidebar Shows/hides the sidebar.
+            @binding {boolean} sidebarHidden Whether the sidebar is currently hidden.
+          -->
+          <slot
+            :name="originalName"
+            v-bind="slotProps"
+            :toggleSidebar="toggleSidebar"
+            :sidebarHidden="hidden"
+          />
         </template>
       </DXDashboardNavbar>
 
@@ -85,6 +103,12 @@ import type { Navigation, NavbarActionsOnMobile, NavbarSearchAlign } from '../..
 
 const slots = useSlots();
 
+// Slot-binding precedence: the forwarded slots bind the child's own slot props
+// FIRST and `toggleSidebar`/`sidebarHidden` after, so ours win a name clash.
+// That's deliberate — the dashboard guarantees those two bindings on every
+// forwarded slot, and a child that later grew a same-named prop must not be
+// able to silently take the guarantee away. No child uses those names today.
+
 interface Props {
   /** Navigation structure for sidebar */
   navigation: Navigation;
@@ -252,6 +276,20 @@ const toggleSidebar = () => {
     console.error('Error saving sidebar state:', error);
   }
 };
+
+defineExpose({
+  /**
+   * Show/hide the sidebar (same as clicking the navbar's hamburger). The
+   * dashboard owns the visibility state, so this is the supported way to drive
+   * it from outside — page content, a custom brand row, a keyboard shortcut.
+   * Also available as a slot binding on every forwarded `sidebar-*`/`navbar-*`
+   * slot, which is usually more convenient.
+   */
+  toggleSidebar,
+
+  /** Whether the sidebar is currently hidden. */
+  sidebarHidden: computed(() => hidden.value),
+});
 </script>
 
 <style scoped>

package/resources/js/components/extended/DXDashboardNavbar.vue

@@ -84,13 +84,12 @@
             >
               <template #button-content>
                 <!--
-                  @slot Custom user avatar/icon in the dropdown trigger.
+                  @slot Custom user avatar/icon in the dropdown trigger. To decorate the default avatar (e.g. add a notification dot) rather than replace it, render `DXUserAvatar` — the same component used here, so the styling comes with it.
                   @binding {string} initial The first letter of the user's name.
+                  @binding {object} user The signed-in user.
                 -->
-                <slot name="user-icon" :initial="getUserInitial(user)">
-                  <div class="user-avatar">
-                    {{ getUserInitial(user) }}
-                  </div>
+                <slot name="user-icon" :initial="getUserInitial(user)" :user="user">
+                  <DXUserAvatar :user="user" />
                 </slot>
               </template>
 
@@ -112,6 +111,7 @@ import { computed } from "vue";
 import DContainer from "../base/DContainer.vue";
 import DButton from "../base/DButton.vue";
 import DDropdown from "../base/DDropdown.vue";
+import DXUserAvatar from "./DXUserAvatar.vue";
 import type { NavbarActionsOnMobile, NavbarSearchAlign } from "../../types/navigation";
 
 const props = withDefaults(
@@ -246,17 +246,4 @@ const getUserInitial = (user: { name: string } | null) => {
     margin-left: 0;
   }
 }
-
-.user-avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background-color: var(--bs-dark);
-  color: var(--bs-white);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-  font-size: 14px;
-}
 </style>

package/resources/js/components/extended/DXField.vue

@@ -61,8 +61,8 @@
         <DFormCheckbox
             v-else
             v-model="fieldValue"
-            :disabled="isDisabled || isReadonly"
-            v-bind="field.inputProps"
+            :disabled="isDisabled || isReadonly || isPlaintext"
+            v-bind="controlPropsWithGuards"
         >
             <DXFieldLabel :label="resolvedLabel" class="visually-hidden" />
         </DFormCheckbox>
@@ -97,8 +97,8 @@
         <DFormCheckbox
             v-else
             v-model="fieldValue"
-            :disabled="isDisabled || isReadonly"
-            v-bind="field.inputProps"
+            :disabled="isDisabled || isReadonly || isPlaintext"
+            v-bind="controlPropsWithGuards"
         >
             <DXFieldLabel :label="resolvedLabel" :info="resolvedInfo" />
         </DFormCheckbox>
@@ -159,8 +159,8 @@
         <DXSwitch
             v-else
             v-model="switchModel"
-            :disabled="isDisabled || isReadonly"
-            v-bind="field.inputProps"
+            :disabled="isDisabled || isReadonly || isPlaintext"
+            v-bind="controlPropsWithGuards"
         >
             <DXFieldLabel
                 :label="switchText"
@@ -201,8 +201,8 @@
         <DXSwitch
             v-else
             v-model="switchModel"
-            :disabled="isDisabled || isReadonly"
-            v-bind="field.inputProps"
+            :disabled="isDisabled || isReadonly || isPlaintext"
+            v-bind="controlPropsWithGuards"
         >
             <DXFieldLabel :label="switchText" :info="resolvedInfo" />
         </DXSwitch>
@@ -306,8 +306,8 @@
             v-model="fieldValue"
             :field="field"
             :model="model"
-            :disabled="isDisabled || isReadonly"
-            v-bind="field.inputProps"
+            :disabled="isDisabled || isReadonly || isPlaintext"
+            v-bind="controlPropsWithGuards"
         />
 
         <!-- Textarea. Error clearing happens in the v-model setter. -->
@@ -319,8 +319,9 @@
             :rows="field.rows || 3"
             :state="fieldState"
             :disabled="isDisabled"
-            :readonly="isReadonly"
-            v-bind="field.inputProps"
+            :readonly="isReadonly || isPlaintext"
+            :plaintext="isPlaintext"
+            v-bind="inputPropsWithGuards"
         />
 
         <!-- Select (sync or async options) -->
@@ -330,8 +331,8 @@
             :required="field.required"
             :options="resolvedOptions"
             :state="fieldState"
-            :disabled="isDisabled || isReadonly"
-            v-bind="field.inputProps"
+            :disabled="isDisabled || isReadonly || isPlaintext"
+            v-bind="controlPropsWithGuards"
         />
 
         <!-- Radio group -->
@@ -341,8 +342,8 @@
             :options="resolvedOptions"
             :required="field.required"
             :state="fieldState"
-            :disabled="isDisabled || isReadonly"
-            v-bind="field.inputProps"
+            :disabled="isDisabled || isReadonly || isPlaintext"
+            v-bind="controlPropsWithGuards"
         />
 
         <!-- File / image upload -->
@@ -352,8 +353,8 @@
                 :accept="field.accept || (field.type === 'image' ? 'image/*' : undefined)"
                 :required="field.required"
                 :state="fieldState"
-                :disabled="isDisabled || isReadonly"
-                v-bind="field.inputProps"
+                :disabled="isDisabled || isReadonly || isPlaintext"
+                v-bind="controlPropsWithGuards"
                 @change="handleFileChange"
             />
             <img
@@ -384,8 +385,9 @@
                 :max="field.max"
                 :state="fieldState"
                 :disabled="isDisabled"
-                :readonly="isReadonly"
-                v-bind="field.inputProps"
+                :readonly="isReadonly || isPlaintext"
+                :plaintext="isPlaintext"
+                v-bind="inputPropsWithGuards"
                 @input="handleCurrencyInput"
                 @focus="handleCurrencyFocus"
                 @blur="handleCurrencyBlur"
@@ -401,8 +403,9 @@
                 :max="field.max"
                 :state="fieldState"
                 :disabled="isDisabled"
-                :readonly="isReadonly"
-                v-bind="field.inputProps"
+                :readonly="isReadonly || isPlaintext"
+                :plaintext="isPlaintext"
+                v-bind="inputPropsWithGuards"
             />
 
             <template v-if="field.type === 'percentage'" #append>
@@ -422,9 +425,10 @@
                 :placeholder="field.placeholder"
                 :state="fieldState"
                 :disabled="isDisabled"
-                :readonly="isReadonly"
+                :readonly="isReadonly || isPlaintext"
+                :plaintext="isPlaintext"
                 autocomplete="off"
-                v-bind="field.inputProps"
+                v-bind="inputPropsWithGuards"
             />
             <datalist :id="datalistId">
                 <option
@@ -437,6 +441,31 @@
             </datalist>
         </template>
 
+        <!-- Password with a reveal toggle (the default for `type: "password"`).
+             Typing a long password blind is the one place the eye really earns
+             its keep, so it's opt-out (`revealable: false`) rather than opt-in. -->
+        <DInputGroup v-else-if="isRevealablePassword">
+            <DFormInput
+                v-model="textFieldModel"
+                :required="field.required"
+                :placeholder="field.placeholder"
+                :state="fieldState"
+                :disabled="isDisabled"
+                :readonly="isReadonly"
+                v-bind="passwordInputProps"
+            />
+            <template #append>
+                <DButton
+                    variant="outline-secondary"
+                    :icon="passwordRevealed ? 'eye-slash' : 'eye'"
+                    :aria-label="passwordRevealed ? 'Hide password' : 'Show password'"
+                    :aria-pressed="passwordRevealed"
+                    :disabled="isDisabled"
+                    @click="passwordRevealed = !passwordRevealed"
+                />
+            </template>
+        </DInputGroup>
+
         <!-- Text-based inputs (text/email/password/number/url/tel/date/time/datetime) -->
         <DFormInput
             v-else
@@ -449,8 +478,9 @@
             :max="field.max"
             :state="fieldState"
             :disabled="isDisabled"
-            :readonly="isReadonly"
-            v-bind="field.inputProps"
+            :readonly="isReadonly || isPlaintext"
+            :plaintext="isPlaintext"
+            v-bind="inputPropsWithGuards"
         />
 
         <!-- Validation error -->
@@ -505,6 +535,7 @@ import DXSwitch from "./DXSwitch.vue";
 import DFormInvalidFeedback from "../base/DFormInvalidFeedback.vue";
 import DFormText from "../base/DFormText.vue";
 import DInputGroup from "../base/DInputGroup.vue";
+import DButton from "../base/DButton.vue";
 import DXFieldLabel from "./DXFieldLabel.vue";
 import type { UseFormReturn } from "../../composables/useForm";
 import type { FieldDefinition, FieldOption, FieldType, LabelCols } from "../../types";
@@ -880,6 +911,71 @@ const isDisabled = computed(() => {
 
 const isReadonly = computed(() => resolveMaybe(props.field.readonly) ?? false);
 
+// Display-only: the value as static text rather than a control. bvn's
+// `plaintext` only swaps the class, so pair it with `readonly` at every call
+// site — otherwise the "static text" is still editable.
+const isPlaintext = computed(() => resolveMaybe(props.field.plaintext) ?? false);
+
+const passwordRevealed = ref(false);
+
+const isRevealablePassword = computed(
+    () =>
+        props.field.type === "password" &&
+        (props.field.revealable ?? true) &&
+        !isPlaintext.value,
+);
+
+// DXTable reuses ONE DXField instance per field key across modal opens (the
+// v-for is keyed on `field.key`, which is stable across rows) and swaps in a
+// fresh form per record. Without this, revealing row A's password leaves row
+// B's — and the create form's — showing in clear text.
+watch(
+    () => [props.form, props.field.key],
+    () => {
+        passwordRevealed.value = false;
+    },
+);
+
+/*
+ * `inputProps` is an escape hatch that deliberately wins over the field's own
+ * bindings — it is spread last. But it must not win over the guarantees the
+ * field makes, or those guarantees are only documentation: a `plaintext` field
+ * that `inputProps: { readonly: false }` re-opens for editing isn't read-only,
+ * and a password whose `type` `inputProps` sets to "text" is unmasked under a
+ * toggle still reading "Show password". So the guards are re-applied ON TOP of
+ * inputProps. Everything else in inputProps still passes through, and a field
+ * that isn't plaintext/readonly is untouched — `inputProps: { readonly: true }`
+ * still works as before.
+ */
+
+// For controls with a native readonly state (the text family + textarea).
+const inputPropsWithGuards = computed(() => {
+    const merged: Record<string, any> = { ...props.field.inputProps };
+    if (isPlaintext.value) {
+        merged.plaintext = true;
+        merged.readonly = true;
+    } else if (isReadonly.value) {
+        merged.readonly = true;
+    }
+    return merged;
+});
+
+// For controls with NO native readonly state (select/radio/checkbox/switch/
+// file/component), where read-only is expressed as `disabled`.
+const controlPropsWithGuards = computed(() => {
+    const merged: Record<string, any> = { ...props.field.inputProps };
+    if (isDisabled.value || isReadonly.value || isPlaintext.value) {
+        merged.disabled = true;
+    }
+    return merged;
+});
+
+// The reveal toggle owns the password input's `type`.
+const passwordInputProps = computed(() => ({
+    ...inputPropsWithGuards.value,
+    type: passwordRevealed.value ? "text" : "password",
+}));
+
 const inputType = computed<string>(() => {
     const type: FieldType = props.field.type;
     if (type === "datetime") return "datetime-local";