@globalbrain/sefirot 4.59.1 → 4.61.0

package/lib/blocks/lens/FieldData.ts

@@ -61,6 +61,16 @@ export interface FieldDataBase {
   showOnDetail?: boolean
   showOnCreate?: boolean
   showOnUpdate?: boolean
+  /**
+   * The server-declared blank for the field's input, as a wire-format
+   * payload value — the server owns this entirely: types whose blank isn't
+   * null (a multiple select's `[]`) declare it here, and an entity may set
+   * its own (e.g. `'draft'` for a status select). Feeds `inputEmptyValue`:
+   * the create form seeds from it, and an editor opening on a null stored
+   * value falls back to it. Null or absent (backends predating the key)
+   * means a null blank.
+   */
+  emptyValue?: any
 }
 
 export interface AvatarFieldData extends FieldDataBase {

package/lib/blocks/lens/components/LensCatalog.vue

@@ -74,6 +74,11 @@ export interface Props {
   // normally. The value remains accessible via `record[indexField]` in
   // `cell-clicked` events and through the `selected` model regardless.
   //
+  // When omitted, the identifier defaults to `id`, and the `selected`
+  // model is keyed by it on any catalog — editable or not — whenever the
+  // loaded rows carry it (server-default selects typically do). Only rows
+  // without the identifier fall back to positional selection keys.
+  //
   // If the caller's `select` is empty or `null` (i.e. "use server
   // defaults"), the index field is **not** auto-appended — that would
   // narrow the result to just that single column on backends that treat
@@ -584,33 +589,59 @@ const tableSelect = computed(() => {
 const idField = computed(() => props.indexField ?? 'id')
 
 // Whether the currently loaded rows actually carry the effective row identifier.
-// Editing / opening a row needs it (`resolveId`), but rows fetched while
-// `editable` was still false — or before an `indexField` change settled — won't
-// have it until the triggered refetch lands. Editing is gated on this (see the
-// `editable` getter) so a quick save in that window can't post `id: undefined`.
-// An empty result has nothing to edit, so it doesn't block.
+// Editing / opening a row needs it (`resolveId`), and the table's selection key
+// only switches onto it when present (`tableIndexField` below). Rows fetched
+// while `editable` was still false — or before an `indexField` change settled —
+// won't have it until the triggered refetch lands. Editing is gated on this (see
+// the `editable` getter) so a quick save in that window can't post
+// `id: undefined`. An empty result has nothing to edit or select, so it
+// doesn't block.
 const rowsCarryIndexField = computed(() => {
   const rows = result.value?.data
   if (!rows || rows.length === 0) { return true }
   return idField.value in rows[0]
 })
 
-// The row-identifier the table uses as its selection key. An explicit
-// `indexField`, or `id` for editable catalogs (which always carry it). Without
-// this, an editable catalog that relies on the default would leave the table on
-// positional selection keys, so an optimistic create/delete that shifts rows
-// would leave `selected` pointing at the wrong records. Mirrors `edit.indexField`.
+// The row-identifier the table uses as its selection key: the effective
+// `idField`, on any catalog whose loaded rows carry it. Without this, a catalog
+// relying on the default `id` would leave the table on positional selection
+// keys, so anything that shifts rows — an optimistic create/delete, a page
+// change, a re-sort, a refresh-banner apply — would leave `selected` pointing
+// at the wrong records. Editable or not: a read-only catalog with
+// `v-model:selected` (a picker dialog, say) needs identity keys just as much,
+// and a server-default select typically already carries `id`. Mirrors
+// `edit.indexField`.
 //
-// Gated on `rowsCarryIndexField`: when `editable` flips true (or `indexField`
-// changes) the on-screen rows don't carry the new key until the triggered refetch
-// lands. Switching STable onto it during that window keys every row's selection to
-// `undefined` — wiping the current selection and making any row-select emit
-// `[undefined]` (so parent bulk actions act on no/wrong records). Stay on the
-// previous positional key until the loaded rows carry it, matching the
-// `edit.editable` gate so selection and editing flip together.
+// Gated on `rowsCarryIndexField`: while the loaded rows don't carry the key —
+// an explicit `select` that omits it, or an `indexField` change (on an editable
+// catalog the triggered refetch below brings the new key in; a read-only
+// catalog stays positional until a fetch happens to include it) — switching
+// STable onto it would key every row's selection to `undefined`, wiping the
+// current selection and making any row-select emit `[undefined]` (so parent
+// bulk actions act on no/wrong records). Stay on the positional key until the
+// loaded rows carry it.
 const tableIndexField = computed(() => {
-  const field = props.indexField ?? (props.editable ? 'id' : undefined)
-  return field && rowsCarryIndexField.value ? field : undefined
+  return rowsCarryIndexField.value ? idField.value : undefined
+})
+
+// `selected` keys live in `tableIndexField`'s domain — record identity vs row
+// position. If that domain changes while rows are on screen (a view change
+// dropping the identifier column, one re-adding it, a runtime `indexField`
+// swap), the held keys mean nothing under the new domain — but STable's
+// selection pruning keeps any that happen to *collide* with it (a numeric id
+// surviving as a row position, or vice versa), silently re-pointing the
+// selection at wrong rows for the parent's bulk actions. Clear it instead.
+//
+// A flip settling on a fetch that follows an empty table (`hadRows` false —
+// first load, or a filter state with no matches) doesn't count: nothing was
+// selectable under the previous domain, so anything already in `selected` is a
+// parent-provided seed targeting the domain being settled, and must survive it.
+let hadRows = false
+watch([tableIndexField, () => result.value?.data], ([field], [prevField]) => {
+  if (field !== prevField && hadRows && selected.value?.length) {
+    selected.value = []
+  }
+  hadRows = (result.value?.data?.length ?? 0) > 0
 })
 
 // The `indexField` is appended to the request `select` so the server
@@ -622,10 +653,16 @@ const tableIndexField = computed(() => {
 //
 // Editable catalogs must carry a row identifier so updates / deletes can
 // address each row; when no `indexField` is configured the identifier
-// defaults to `id`. When the caller has no concrete select list, nothing
-// is added either — leaving the request empty lets the server use its own
-// defaults (which include `id`, so the read-only sheet still opens). See
-// `indexField` prop docs above.
+// defaults to `id`. Read-only catalogs get no *default* identifier appended
+// (an explicit `indexField` is always included, per its prop doc): the
+// selection key (`tableIndexField` above) is opportunistic — it keys by the
+// identifier when the rows already carry it (server defaults typically
+// include `id`) and stays positional when an explicit `select` omits it,
+// rather than growing every read-only request by an extra column. When the
+// caller has no concrete select list, nothing is added either — leaving the
+// request empty lets the server use its own defaults (which typically
+// include `id`, so the read-only sheet still opens). See `indexField` prop
+// docs above.
 function withIndexField(fields: string[]): string[] {
   if (fields.length === 0) { return [] }
   const field = props.indexField ?? (props.editable ? 'id' : null)

package/lib/blocks/lens/components/LensSheet.vue

@@ -14,6 +14,7 @@ import { type FieldData } from '../FieldData'
 import { type LensCreateExtension } from '../LensCreateExtension'
 import { useFieldFactory } from '../composables/FieldFactory'
 import { useLensEdit } from '../composables/LensEdit'
+import { provideLensInlineEdit } from '../composables/LensInlineEdit'
 import { extractServerErrors, extractServerMessage } from '../validation/ServerErrors'
 import LensSheetAvatarField from './LensSheetAvatarField.vue'
 import LensSheetField from './LensSheetField.vue'
@@ -66,6 +67,11 @@ const edit = useLensEdit()
 const factory = useFieldFactory()
 const snackbars = useSnackbars()
 
+// One field editor open at a time across the sheet: fields derive their
+// `editing` state from this shared context (mirroring the table's inline
+// cells), so opening an editor closes any other.
+provideLensInlineEdit()
+
 // Provide the data-list label width directly (instead of wrapping rows in
 // SDataList) so each LensSheetField wrapper doesn't make its SDataListItem a
 // `:first-child`, which would otherwise double SDataList's dashed dividers.

package/lib/blocks/lens/components/LensSheetField.vue

@@ -1,13 +1,22 @@
 <script setup lang="ts">
+import IconChevronUp from '~icons/lucide/chevron-up'
+import IconCommand from '~icons/lucide/command'
+import IconCornerDownLeft from '~icons/lucide/corner-down-left'
 import IconPencilSimple from '~icons/ph/pencil-simple'
-import { computed, nextTick, ref, watch } from 'vue'
+import { type Component, computed, nextTick, onUnmounted, ref, watch } from 'vue'
 import SButton from '../../../components/SButton.vue'
 import SDataListItem from '../../../components/SDataListItem.vue'
 import { useTrans } from '../../../composables/Lang'
 import { useValidation } from '../../../composables/Validation'
-import { dispatchEditorKeydown, focusFirstEditable } from '../../../support/Dom'
+import {
+  type EditorSubmitShortcut,
+  dispatchEditorKeydown,
+  editorSubmitShortcutForTarget,
+  focusFirstEditable
+} from '../../../support/Dom'
 import { type FieldData } from '../FieldData'
 import { useLensEdit } from '../composables/LensEdit'
+import { useLensInlineEdit } from '../composables/LensInlineEdit'
 import { type Field } from '../fields/Field'
 
 const props = defineProps<{
@@ -71,19 +80,40 @@ const canEdit = computed(() =>
   && props.field.supportsOptimisticUpdate()
 )
 
-const editing = ref(false)
+// The editor's visible label. The input's own label — the one that carries the
+// required marker — is visually hidden (the row label stands in for it), so
+// re-attach the marker here.
+const editorLabel = computed(() =>
+  (props.field as any).data?.required ? `${props.field.label()} *` : props.field.label()
+)
+
+// One sheet editor open at a time: `editing` derives from the sheet-scoped
+// inline-edit context (provided by LensSheet), so opening another field's
+// editor closes this one — mirroring the table's inline cells.
+const inline = useLensInlineEdit()
+const editing = computed(() => inline?.activeKey.value === props.fieldKey)
 const model = ref<any>(null)
+const activeEditorTarget = ref<EventTarget | null>(null)
+
+// The sheet can close (or flip to create mode) while an editor is open; the
+// field unmounts but the shared key would survive and reopen this field's
+// editor on the next mount. Release it if it's still ours.
+onUnmounted(() => {
+  if (editing.value) {
+    inline?.stop()
+  }
+})
 
 // If the backing record is replaced/rebound while this editor is open (the
 // refresh banner, a parent `refresh()`, or a `/show` merge filling detail keys),
 // the `model` captured in `start()` is stale; applying it would overwrite the
 // freshly bound value. Close the editor so the user re-opens against the current
-// value. Our own optimistic save also mutates this value, but `apply()` sets
-// `editing = false` synchronously right after, so this async watcher sees it
-// already closed; user typing only touches the local `model`, never the record.
+// value. Our own optimistic save also mutates this value, but `apply()` stops
+// the edit synchronously right after, so this async watcher sees it already
+// closed; user typing only touches the local `model`, never the record.
 watch(
   () => props.record[props.fieldKey],
-  () => { if (editing.value) { editing.value = false } }
+  () => { if (editing.value) { inline?.stop() } }
 )
 
 const { validation, validate, reset } = useValidation(
@@ -93,19 +123,39 @@ const { validation, validate, reset } = useValidation(
 
 const formEl = ref<HTMLElement | null>(null)
 
+// No hint while nothing inside the form is focused (e.g. a radio-group editor,
+// whose options aren't keyboard-focusable): keydowns don't route through the
+// form then, so no shortcut would actually work.
+const submitShortcut = computed(() =>
+  activeEditorTarget.value ? editorSubmitShortcutForTarget(activeEditorTarget.value) : null
+)
+const submitShortcutModifierIcon = computed<Component | null>(() => {
+  return submitShortcut.value === 'command-enter'
+    ? IconCommand
+    : submitShortcut.value === 'control-enter'
+      ? IconChevronUp
+      : null
+})
+const submitShortcutLabel = computed(() =>
+  submitShortcut.value ? shortcutLabel(submitShortcut.value) : null
+)
+
 function start() {
   const raw = props.record[props.fieldKey]
-  model.value = props.field.payloadToInput(raw ?? props.field.inputEmptyValue())
+  model.value = raw != null ? props.field.payloadToInput(raw) : props.field.inputEmptyValue()
   reset()
-  editing.value = true
+  inline?.start(props.fieldKey)
   // Focus the input on open (matching the inline table editor): better UX, and
   // it routes the editor's keydowns — notably Escape — through the form handler
   // so Escape cancels the edit rather than closing the sheet.
-  nextTick(() => focusFirstEditable(formEl.value))
+  nextTick(() => {
+    focusFirstEditable(formEl.value)
+    syncActiveEditorTarget()
+  })
 }
 
 function cancel() {
-  editing.value = false
+  inline?.stop()
 }
 
 async function apply() {
@@ -132,7 +182,11 @@ async function apply() {
   // is open (e.g. a refresh marks it locked). Re-check before persisting so an
   // already-open editor can't save a row the policy now rejects.
   if (!canEdit.value) {
-    editing.value = false
+    // Only release the shared key if it's still ours: another field's editor
+    // may have opened during the awaited validation above.
+    if (editing.value) {
+      inline?.stop()
+    }
     return
   }
 
@@ -140,7 +194,9 @@ async function apply() {
   edit!.save(props.record, {
     [props.fieldKey]: props.field.inputToPayload(model.value)
   })
-  editing.value = false
+  if (editing.value) {
+    inline?.stop()
+  }
 }
 
 function onEditorKeydown(event: KeyboardEvent) {
@@ -148,13 +204,53 @@ function onEditorKeydown(event: KeyboardEvent) {
   // closes on it (via SSheet's window-level handler).
   dispatchEditorKeydown(event, { cancel, submit: apply, shield: true })
 }
+
+function onEditorFocusin(event: FocusEvent) {
+  if (event.target instanceof HTMLElement && event.target.closest('.actions')) {
+    return
+  }
+
+  activeEditorTarget.value = event.target
+}
+
+function onEditorFocusout(event: FocusEvent) {
+  // Focus moving within the form (including onto the action buttons) keeps the
+  // hint stable; focus leaving the editor entirely clears it, so the hint can't
+  // keep advertising a control that's no longer focused.
+  if (!(event.relatedTarget instanceof HTMLElement && formEl.value?.contains(event.relatedTarget))) {
+    activeEditorTarget.value = null
+  }
+}
+
+function syncActiveEditorTarget() {
+  const activeElement = document.activeElement
+  activeEditorTarget.value = activeElement instanceof HTMLElement
+    && formEl.value?.contains(activeElement)
+    && !activeElement.closest('.actions')
+    ? activeElement
+    : null
+}
+
+function shortcutLabel(shortcut: EditorSubmitShortcut): string {
+  return shortcut === 'enter'
+    ? 'Enter'
+    : shortcut === 'command-enter'
+      ? 'Command+Enter'
+      : 'Control+Enter'
+}
 </script>
 
 <template>
-  <div class="LensSheetField" :class="{ editing }">
+  <div class="LensSheetField" :class="{ editing, 'is-editable': canEdit }">
     <div v-if="!editing" class="display">
-      <component :is="displayComponent" v-if="displayComponent" :value="record[fieldKey]" />
-      <SDataListItem v-else>
+      <component
+        :is="displayComponent"
+        v-if="displayComponent"
+        :value="record[fieldKey]"
+        :value-action="canEdit"
+        @click:value="start"
+      />
+      <SDataListItem v-else :value-action="canEdit" @click:value="start">
         <template #label>{{ field.label() }}</template>
         <template v-if="displayValue !== null" #value>{{ displayValue }}</template>
       </SDataListItem>
@@ -163,18 +259,54 @@ function onEditorKeydown(event: KeyboardEvent) {
         class="edit"
         type="button"
         :aria-label="`${t.edit} ${field.label()}`"
-        @click="start"
+        @click.stop="start"
       >
         <IconPencilSimple class="edit-icon" />
       </button>
     </div>
 
-    <div v-else ref="formEl" class="form" @keydown="onEditorKeydown">
-      <component :is="inputComponent" v-model="model" :validation="validation.input" />
-      <div class="actions">
-        <SButton size="mini" :label="t.cancel" @click="cancel" />
-        <SButton size="mini" mode="info" :label="t.apply" @click="apply" />
-      </div>
+    <div
+      v-else
+      ref="formEl"
+      class="form"
+      @keydown="onEditorKeydown"
+      @focusin="onEditorFocusin"
+      @focusout="onEditorFocusout"
+    >
+      <SDataListItem>
+        <template #label>{{ editorLabel }}</template>
+        <template #value>
+          <div class="editor">
+            <div class="editor-input">
+              <component
+                :is="inputComponent"
+                v-model="model"
+                size="mini"
+                :validation="validation.input"
+              />
+            </div>
+            <div class="actions">
+              <SButton size="mini" :label="t.cancel" @click="cancel" />
+              <SButton size="mini" mode="info" @click="apply">
+                <span class="apply-content">
+                  <span>{{ t.apply }}</span>
+                  <template v-if="submitShortcut">
+                    <span class="visually-hidden">({{ submitShortcutLabel }})</span>
+                    <span class="shortcut" :title="submitShortcutLabel ?? undefined" aria-hidden="true">
+                      <component
+                        :is="submitShortcutModifierIcon"
+                        v-if="submitShortcutModifierIcon"
+                        class="shortcut-icon"
+                      />
+                      <IconCornerDownLeft class="shortcut-icon" />
+                    </span>
+                  </template>
+                </span>
+              </SButton>
+            </div>
+          </div>
+        </template>
+      </SDataListItem>
     </div>
   </div>
 </template>
@@ -186,29 +318,63 @@ function onEditorKeydown(event: KeyboardEvent) {
 }
 
 .form {
-  padding: 8px 0;
+  position: relative;
 }
 
 .display {
   position: relative;
+  isolation: isolate;
+}
+
+/* Scope the hover chrome to the data-list row's own cell: display renderers
+   can nest their own `.value` (e.g. `SDescPill`), which must not grow a second
+   hover border. */
+.display :deep(.SDataListItem > .content > .value),
+.display :deep(.SDataListItem > .content > .empty) {
+  position: relative;
+  z-index: 0;
+}
+
+.LensSheetField.is-editable .display :deep(.SDataListItem > .content > .value)::before,
+.LensSheetField.is-editable .display :deep(.SDataListItem > .content > .empty)::before {
+  content: "";
+  position: absolute;
+  inset: -6px 0 -6px -16px;
+  z-index: -1;
+  pointer-events: none;
+  border: 1px solid var(--c-border);
+  border-radius: 8px;
+  background-color: var(--c-bg-1);
+  box-shadow: var(--shadow-depth-2);
+  opacity: 0;
+  transition: opacity 0.1s;
+}
+
+.LensSheetField.is-editable:hover .display :deep(.SDataListItem > .content > .value)::before,
+.LensSheetField.is-editable:hover .display :deep(.SDataListItem > .content > .empty)::before {
+  opacity: 1;
 }
 
 .edit {
   position: absolute;
-  top: 10px;
-  right: 0;
+  top: 50%;
+  right: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: 6px;
+  z-index: 1;
+  width: 32px;
+  height: 32px;
+  transform: translateY(-50%);
+  border-radius: 8px;
   color: var(--c-text-2);
+  background-color: var(--c-bg-1);
+  box-shadow: var(--shadow-depth-1);
   opacity: 0;
   transition: opacity 0.1s, background-color 0.1s, color 0.1s;
 }
 
-.LensSheetField:hover .edit {
+.LensSheetField.is-editable:hover .edit {
   opacity: 1;
 }
 
@@ -222,10 +388,74 @@ function onEditorKeydown(event: KeyboardEvent) {
   height: 16px;
 }
 
+.form :deep(.value) {
+  position: relative;
+}
+
+.editor {
+  position: relative;
+  z-index: 2;
+  margin: -8px 0 0 -16px;
+  width: calc(100% + 16px);
+  border: 1px solid var(--c-border);
+  border-radius: 8px;
+  background-color: var(--c-bg-1);
+  box-shadow: var(--shadow-depth-2);
+  overflow: visible;
+}
+
+.editor-input {
+  position: relative;
+  z-index: 2;
+  padding: 8px;
+}
+
+/* Visually hidden but kept in the accessibility tree (`display: none` would
+   drop it): the input's own label keeps naming the input for screen readers
+   while the row label stands in for it visually, and the shortcut text keeps
+   reaching screen readers alongside the icon-only hint. */
+.editor-input :deep(.SInputBase > .label),
+.visually-hidden {
+  position: absolute;
+  margin: -1px;
+  padding: 0;
+  width: 1px;
+  height: 1px;
+  min-height: 0;
+  border: 0;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  overflow: hidden;
+}
+
 .actions {
+  position: relative;
+  z-index: 1;
   display: flex;
   justify-content: flex-end;
   gap: 8px;
-  margin-top: 8px;
+  padding: 8px;
+  border-top: 1px solid var(--c-divider);
+}
+
+.apply-content {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.shortcut {
+  display: inline-flex;
+  align-items: center;
+  gap: 1px;
+  padding: 2px 3px;
+  border-radius: 5px;
+  background-color: color-mix(in oklab, currentColor 16%, transparent);
+}
+
+.shortcut-icon {
+  width: 12px;
+  height: 12px;
+  opacity: 0.9;
 }
 </style>

package/lib/blocks/lens/components/LensTable.vue

@@ -236,9 +236,10 @@ const table = useTable({
   orders,
   columns,
   // A getter (not a snapshot) so the selection key stays reactive: `indexField`
-  // can change after mount — e.g. an editable catalog resolves permissions async
-  // and flips from positional keys to `id`. STable reads this inside a computed,
-  // so the getter establishes the dependency and selection re-keys correctly.
+  // can change after mount — e.g. rows landing without the identifier flip the
+  // catalog from identity keys back to positional, and an `indexField` change
+  // settling re-keys it. STable reads this inside a computed, so the getter
+  // establishes the dependency and selection re-keys correctly.
   get indexField() { return props.indexField },
   borderless: true
 })

package/lib/blocks/lens/components/LensTableAvatarCell.vue

@@ -193,7 +193,8 @@ function startNames() {
     return
   }
   for (const entry of nameEntries.value) {
-    nameModel[entry.key] = entry.field.payloadToInput(props.record[entry.key] ?? entry.field.inputEmptyValue())
+    const raw = props.record[entry.key]
+    nameModel[entry.key] = raw != null ? entry.field.payloadToInput(raw) : entry.field.inputEmptyValue()
   }
   reset()
   inline?.start(myKey.value)

package/lib/blocks/lens/components/LensTableEditableCell.vue

@@ -156,7 +156,8 @@ function start() {
   }
 
   inputComponent.value = props.field.formInputComponent()
-  model.value = props.field.payloadToInput(props.value ?? props.field.inputEmptyValue())
+  const raw = props.value
+  model.value = raw != null ? props.field.payloadToInput(raw) : props.field.inputEmptyValue()
   reset()
   inline?.start(myKey.value)
   nextTick(() => {

package/lib/blocks/lens/composables/LensInlineEdit.ts

@@ -1,14 +1,16 @@
 import { type InjectionKey, type Ref, inject, provide, ref } from 'vue'
 
 /**
- * Tracks which table cell currently has its inline editor open, so that
- * opening one editor closes any other. The key is `${recordId}:${fieldKey}`.
+ * Tracks which inline editor is currently open within the providing scope, so
+ * that opening one editor closes any other. The table provides an instance for
+ * its cells (keyed `${recordId}:${fieldKey}`) and the record sheet provides
+ * its own for its fields (keyed by field key) — the scopes are independent.
  */
 export interface LensInlineEditContext {
-  /** The key of the cell currently being edited, or null. */
+  /** The key of the editor currently open, or null. */
   activeKey: Ref<string | null>
 
-  /** Open the editor for the given cell key (closing any other). */
+  /** Open the editor for the given key (closing any other). */
   start: (key: string) => void
 
   /** Close the active editor. */

package/lib/blocks/lens/fields/AvatarField.ts

@@ -56,10 +56,6 @@ export class AvatarField extends Field<AvatarFieldData> {
     return false
   }
 
-  override inputEmptyValue(): any {
-    return null
-  }
-
   override formInputComponent(): any {
     return this.defineFormInputComponent((props, { emit }) => {
       return () => h(LensInputAvatar, {

package/lib/blocks/lens/fields/DateField.ts

@@ -59,7 +59,7 @@ export class DateField extends Field<DateFieldData> {
   override formInputComponent(): any {
     return this.defineFormInputComponent((props, { emit }) => {
       return () => h(SInputDate, {
-        'size': 'md',
+        'size': props.size ?? 'md',
         'label': this.formInputLabel(),
         'placeholder': this.placeholder() || undefined,
         'help': this.help() || undefined,