@simplysm/solid 13.0.75 → 13.0.77

package/src/components/form-control/editor/EditorToolbar.tsx

@@ -1,9 +1,9 @@
-import { type Component } from "solid-js";
+import { type Component, For } from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
-import type { Editor } from "@tiptap/core";
+import type { ChainedCommands, Editor } from "@tiptap/core";
 import { createEditorTransaction } from "solid-tiptap";
-import { iconButtonBase } from "../../../styles/patterns.styles";
+import { Button } from "../Button";
 import {
   IconBold,
   IconItalic,
@@ -26,68 +26,97 @@ import {
   IconClearFormatting,
 } from "@tabler/icons-solidjs";
 import { Icon } from "../../display/Icon";
-import { useI18n } from "../../../providers/i18n/I18nContext";
+import { border, text } from "../../../styles/base.styles";
+import { gap, pad } from "../../../styles/control.styles";
+import { themeTokens } from "../../../styles/theme.styles";
+import { useI18n } from "../../../providers/i18n/I18nProvider";
 
 export interface EditorToolbarProps {
   editor: Editor;
   class?: string;
 }
 
-// Toolbar container style
-const toolbarClass = clsx(
-  "flex flex-wrap items-center gap-0.5",
-  "border-b border-base-300 dark:border-base-700",
-  "px-2 py-1",
-);
-
-// Toolbar button base style
-const toolbarBtnClass = twMerge(iconButtonBase, "size-7");
+// Toolbar button extra class
+const toolbarBtnExtra = "size-7";
 
 // Toolbar button active style
-const toolbarBtnActiveClass = clsx(
-  "bg-primary-100 text-primary-700",
-  "dark:bg-primary-900/40 dark:text-primary-300",
-);
+const toolbarBtnActiveClass = themeTokens.primary.light;
 
 // Separator style
 const separatorClass = clsx("mx-1 h-5 w-px", "bg-base-300 dark:bg-base-700");
 
 // Color picker label style
-const colorLabelClass = twMerge(iconButtonBase, "relative", "size-7");
+const colorLabelClass = clsx(
+  "inline-flex items-center justify-center",
+  "cursor-pointer",
+  "rounded",
+  "transition-colors",
+  text.muted,
+  themeTokens.base.hoverBg,
+  "relative",
+  "size-7",
+);
 
 // Color input hide style
 const colorInputClass = clsx("absolute opacity-0", "size-0");
 
-// Color indicator style
-const colorIndicatorClass = clsx("absolute inset-x-1 bottom-0.5", "h-0.5 rounded-full");
+interface ToolbarButtonItem {
+  icon: Component;
+  i18nKey: string;
+  /** Tiptap editor command — receives editor.chain().focus() */
+  command: (chain: ChainedCommands) => void;
+  /** Active state check — receives editor instance */
+  isActive?: (editor: Editor) => boolean;
+}
+
+type ToolbarItem = ToolbarButtonItem | "separator";
+
+// Items before color pickers: Headings + Text formatting
+const toolbarItemsBefore: ToolbarItem[] = [
+  // Headings
+  { icon: IconH1, i18nKey: "editorToolbar.heading1", command: (c) => c.toggleHeading({ level: 1 }).run(), isActive: (e) => e.isActive("heading", { level: 1 }) },
+  { icon: IconH2, i18nKey: "editorToolbar.heading2", command: (c) => c.toggleHeading({ level: 2 }).run(), isActive: (e) => e.isActive("heading", { level: 2 }) },
+  "separator",
+  // Text formatting
+  { icon: IconBold, i18nKey: "editorToolbar.bold", command: (c) => c.toggleBold().run(), isActive: (e) => e.isActive("bold") },
+  { icon: IconItalic, i18nKey: "editorToolbar.italic", command: (c) => c.toggleItalic().run(), isActive: (e) => e.isActive("italic") },
+  { icon: IconUnderline, i18nKey: "editorToolbar.underline", command: (c) => c.toggleUnderline().run(), isActive: (e) => e.isActive("underline") },
+  { icon: IconStrikethrough, i18nKey: "editorToolbar.strikethrough", command: (c) => c.toggleStrike().run(), isActive: (e) => e.isActive("strike") },
+];
+
+// Items after color pickers: Lists + Indent + Block + Alignment
+const toolbarItemsAfter: ToolbarItem[] = [
+  // Lists
+  { icon: IconList, i18nKey: "editorToolbar.bulletList", command: (c) => c.toggleBulletList().run(), isActive: (e) => e.isActive("bulletList") },
+  { icon: IconListNumbers, i18nKey: "editorToolbar.numberedList", command: (c) => c.toggleOrderedList().run(), isActive: (e) => e.isActive("orderedList") },
+  "separator",
+  // Indentation
+  { icon: IconIndentIncrease, i18nKey: "editorToolbar.increaseIndent", command: (c) => c.sinkListItem("listItem").run() },
+  { icon: IconIndentDecrease, i18nKey: "editorToolbar.decreaseIndent", command: (c) => c.liftListItem("listItem").run() },
+  "separator",
+  // Block
+  { icon: IconQuote, i18nKey: "editorToolbar.blockquote", command: (c) => c.toggleBlockquote().run(), isActive: (e) => e.isActive("blockquote") },
+  { icon: IconCode, i18nKey: "editorToolbar.codeBlock", command: (c) => c.toggleCodeBlock().run(), isActive: (e) => e.isActive("codeBlock") },
+  "separator",
+  // Alignment
+  { icon: IconAlignLeft, i18nKey: "editorToolbar.alignLeft", command: (c) => c.setTextAlign("left").run(), isActive: (e) => e.isActive({ textAlign: "left" }) },
+  { icon: IconAlignCenter, i18nKey: "editorToolbar.alignCenter", command: (c) => c.setTextAlign("center").run(), isActive: (e) => e.isActive({ textAlign: "center" }) },
+  { icon: IconAlignRight, i18nKey: "editorToolbar.alignRight", command: (c) => c.setTextAlign("right").run(), isActive: (e) => e.isActive({ textAlign: "right" }) },
+  { icon: IconAlignJustified, i18nKey: "editorToolbar.justify", command: (c) => c.setTextAlign("justify").run(), isActive: (e) => e.isActive({ textAlign: "justify" }) },
+];
 
 export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
   const e = () => props.editor;
   const i18n = useI18n();
 
   // Track active state reactively with createEditorTransaction
-  const isBold = createEditorTransaction(e, (editor) => editor.isActive("bold"));
-  const isItalic = createEditorTransaction(e, (editor) => editor.isActive("italic"));
-  const isUnderline = createEditorTransaction(e, (editor) => editor.isActive("underline"));
-  const isStrike = createEditorTransaction(e, (editor) => editor.isActive("strike"));
-  const isH1 = createEditorTransaction(e, (editor) => editor.isActive("heading", { level: 1 }));
-  const isH2 = createEditorTransaction(e, (editor) => editor.isActive("heading", { level: 2 }));
-  const isBulletList = createEditorTransaction(e, (editor) => editor.isActive("bulletList"));
-  const isOrderedList = createEditorTransaction(e, (editor) => editor.isActive("orderedList"));
-  const isBlockquote = createEditorTransaction(e, (editor) => editor.isActive("blockquote"));
-  const isCodeBlock = createEditorTransaction(e, (editor) => editor.isActive("codeBlock"));
-  const isAlignLeft = createEditorTransaction(e, (editor) =>
-    editor.isActive({ textAlign: "left" } as unknown as string),
-  );
-  const isAlignCenter = createEditorTransaction(e, (editor) =>
-    editor.isActive({ textAlign: "center" } as unknown as string),
-  );
-  const isAlignRight = createEditorTransaction(e, (editor) =>
-    editor.isActive({ textAlign: "right" } as unknown as string),
-  );
-  const isAlignJustify = createEditorTransaction(e, (editor) =>
-    editor.isActive({ textAlign: "justify" } as unknown as string),
-  );
+  const activeStates = new Map<ToolbarButtonItem, () => boolean>();
+  for (const item of [...toolbarItemsBefore, ...toolbarItemsAfter]) {
+    if (item !== "separator" && item.isActive) {
+      const check = item.isActive;
+      activeStates.set(item, createEditorTransaction(e, (editor) => check(editor)));
+    }
+  }
 
   // Current text color
   const currentColor = createEditorTransaction(
@@ -102,7 +131,29 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
   );
 
   const btnClass = (active: () => boolean) =>
-    twMerge(toolbarBtnClass, active() && toolbarBtnActiveClass);
+    twMerge(toolbarBtnExtra, active() && toolbarBtnActiveClass);
+
+  function renderToolbarItems(items: ToolbarItem[]) {
+    return (
+      <For each={items}>
+        {(item) =>
+          item === "separator" ? (
+            <div class={separatorClass} />
+          ) : (
+            <Button
+              variant="ghost"
+              size="xs"
+              class={item.isActive ? btnClass(() => activeStates.get(item)?.() ?? false) : toolbarBtnExtra}
+              title={i18n.t(item.i18nKey)}
+              onClick={() => item.command(props.editor.chain().focus())}
+            >
+              <Icon icon={item.icon} size="1em" />
+            </Button>
+          )
+        }
+      </For>
+    );
+  }
 
   // Image insert handler
   const handleImageInsert = () => {
@@ -126,69 +177,14 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
   };
 
   return (
-    <div class={twMerge(toolbarClass, props.class)}>
-      {/* 1. Header (H1, H2) */}
-      <button
-        type="button"
-        class={btnClass(isH1)}
-        title={i18n.t("editorToolbar.heading1")}
-        onClick={() => props.editor.chain().focus().toggleHeading({ level: 1 }).run()}
-      >
-        <Icon icon={IconH1} size="1em" />
-      </button>
-      <button
-        type="button"
-        class={btnClass(isH2)}
-        title={i18n.t("editorToolbar.heading2")}
-        onClick={() => props.editor.chain().focus().toggleHeading({ level: 2 }).run()}
-      >
-        <Icon icon={IconH2} size="1em" />
-      </button>
+    <div class={twMerge(clsx("flex flex-wrap items-center", gap.sm, "border-b", border.default, pad.default), props.class)}>
+      {renderToolbarItems(toolbarItemsBefore)}
 
-      {/* 2. Separator */}
+      {/* Color pickers */}
       <div class={separatorClass} />
-
-      {/* 3. Text format (Bold, Italic, Underline, Strike) */}
-      <button
-        type="button"
-        class={btnClass(isBold)}
-        title={i18n.t("editorToolbar.bold")}
-        onClick={() => props.editor.chain().focus().toggleBold().run()}
-      >
-        <Icon icon={IconBold} size="1em" />
-      </button>
-      <button
-        type="button"
-        class={btnClass(isItalic)}
-        title={i18n.t("editorToolbar.italic")}
-        onClick={() => props.editor.chain().focus().toggleItalic().run()}
-      >
-        <Icon icon={IconItalic} size="1em" />
-      </button>
-      <button
-        type="button"
-        class={btnClass(isUnderline)}
-        title={i18n.t("editorToolbar.underline")}
-        onClick={() => props.editor.chain().focus().toggleUnderline().run()}
-      >
-        <Icon icon={IconUnderline} size="1em" />
-      </button>
-      <button
-        type="button"
-        class={btnClass(isStrike)}
-        title={i18n.t("editorToolbar.strikethrough")}
-        onClick={() => props.editor.chain().focus().toggleStrike().run()}
-      >
-        <Icon icon={IconStrikethrough} size="1em" />
-      </button>
-
-      {/* 4. Separator */}
-      <div class={separatorClass} />
-
-      {/* 5. Text color + background color (using input[type=color]) */}
       <label class={colorLabelClass} title={i18n.t("editorToolbar.textColor")}>
         <span class={clsx("text-sm font-bold")}>A</span>
-        <div class={colorIndicatorClass} style={{ "background-color": currentColor() }} />
+        <div class="absolute inset-x-1 bottom-0.5 h-0.5 rounded-full" style={{ "background-color": currentColor() }} />
         <input
           type="color"
           class={colorInputClass}
@@ -213,138 +209,45 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
         />
       </label>
 
-      {/* 6. Separator */}
-      <div class={separatorClass} />
-
-      {/* 7. List (Bullet, Ordered) */}
-      <button
-        type="button"
-        class={btnClass(isBulletList)}
-        title={i18n.t("editorToolbar.bulletList")}
-        onClick={() => props.editor.chain().focus().toggleBulletList().run()}
-      >
-        <Icon icon={IconList} size="1em" />
-      </button>
-      <button
-        type="button"
-        class={btnClass(isOrderedList)}
-        title={i18n.t("editorToolbar.numberedList")}
-        onClick={() => props.editor.chain().focus().toggleOrderedList().run()}
-      >
-        <Icon icon={IconListNumbers} size="1em" />
-      </button>
-
-      {/* 8. Separator */}
-      <div class={separatorClass} />
-
-      {/* 9. Indentation (Increase, Decrease) */}
-      <button
-        type="button"
-        class={toolbarBtnClass}
-        title={i18n.t("editorToolbar.increaseIndent")}
-        onClick={() => props.editor.chain().focus().sinkListItem("listItem").run()}
-      >
-        <Icon icon={IconIndentIncrease} size="1em" />
-      </button>
-      <button
-        type="button"
-        class={toolbarBtnClass}
-        title={i18n.t("editorToolbar.decreaseIndent")}
-        onClick={() => props.editor.chain().focus().liftListItem("listItem").run()}
-      >
-        <Icon icon={IconIndentDecrease} size="1em" />
-      </button>
-
-      {/* 10. Separator */}
-      <div class={separatorClass} />
-
-      {/* 11. Block (Blockquote, CodeBlock) */}
-      <button
-        type="button"
-        class={btnClass(isBlockquote)}
-        title={i18n.t("editorToolbar.blockquote")}
-        onClick={() => props.editor.chain().focus().toggleBlockquote().run()}
-      >
-        <Icon icon={IconQuote} size="1em" />
-      </button>
-      <button
-        type="button"
-        class={btnClass(isCodeBlock)}
-        title={i18n.t("editorToolbar.codeBlock")}
-        onClick={() => props.editor.chain().focus().toggleCodeBlock().run()}
-      >
-        <Icon icon={IconCode} size="1em" />
-      </button>
-
-      {/* 12. Separator */}
       <div class={separatorClass} />
+      {renderToolbarItems(toolbarItemsAfter)}
 
-      {/* 13. Alignment (Left, Center, Right, Justify) */}
-      <button
-        type="button"
-        class={btnClass(isAlignLeft)}
-        title={i18n.t("editorToolbar.alignLeft")}
-        onClick={() => props.editor.chain().focus().setTextAlign("left").run()}
-      >
-        <Icon icon={IconAlignLeft} size="1em" />
-      </button>
-      <button
-        type="button"
-        class={btnClass(isAlignCenter)}
-        title={i18n.t("editorToolbar.alignCenter")}
-        onClick={() => props.editor.chain().focus().setTextAlign("center").run()}
-      >
-        <Icon icon={IconAlignCenter} size="1em" />
-      </button>
-      <button
-        type="button"
-        class={btnClass(isAlignRight)}
-        title={i18n.t("editorToolbar.alignRight")}
-        onClick={() => props.editor.chain().focus().setTextAlign("right").run()}
-      >
-        <Icon icon={IconAlignRight} size="1em" />
-      </button>
-      <button
-        type="button"
-        class={btnClass(isAlignJustify)}
-        title={i18n.t("editorToolbar.justify")}
-        onClick={() => props.editor.chain().focus().setTextAlign("justify").run()}
-      >
-        <Icon icon={IconAlignJustified} size="1em" />
-      </button>
-
-      {/* 14. Separator */}
+      {/* Insert table */}
       <div class={separatorClass} />
-
-      {/* 15. Insert table */}
-      <button
-        type="button"
-        class={toolbarBtnClass}
+      <Button
+        variant="ghost"
+        size="xs"
+        class={toolbarBtnExtra}
         title={i18n.t("editorToolbar.insertTable")}
         onClick={() =>
           props.editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
         }
       >
         <Icon icon={IconTablePlus} size="1em" />
-      </button>
+      </Button>
 
-      {/* 16. Insert image */}
-      <button type="button" class={toolbarBtnClass} title={i18n.t("editorToolbar.insertImage")} onClick={handleImageInsert}>
+      {/* Insert image */}
+      <Button
+        variant="ghost"
+        size="xs"
+        class={toolbarBtnExtra}
+        title={i18n.t("editorToolbar.insertImage")}
+        onClick={handleImageInsert}
+      >
         <Icon icon={IconPhoto} size="1em" />
-      </button>
+      </Button>
 
-      {/* 17. Separator */}
+      {/* Clear formatting */}
       <div class={separatorClass} />
-
-      {/* 18. Clear formatting */}
-      <button
-        type="button"
-        class={toolbarBtnClass}
+      <Button
+        variant="ghost"
+        size="xs"
+        class={toolbarBtnExtra}
         title={i18n.t("editorToolbar.clearFormatting")}
         onClick={() => props.editor.chain().focus().clearNodes().unsetAllMarks().run()}
       >
         <Icon icon={IconClearFormatting} size="1em" />
-      </button>
+      </Button>
     </div>
   );
 };

package/{dist/components/form-control/editor/editor.css → src/components/form-control/editor/RichTextEditor.tiptap.css}

@@ -46,7 +46,6 @@
   height: auto;
 }
 
-/* stylelint-disable-next-line selector-class-pattern -- ProseMirror library class */
 [data-rich-text-editor] .tiptap img.ProseMirror-selectednode {
   outline: 2px solid #3b82f6;
 }

package/src/components/form-control/editor/RichTextEditor.tsx

@@ -9,7 +9,7 @@ import {
   untrack,
 } from "solid-js";
 import clsx from "clsx";
-import "./editor.css";
+import "./RichTextEditor.tiptap.css";
 import { twMerge } from "tailwind-merge";
 import { createTiptapEditor } from "solid-tiptap";
 import StarterKit from "@tiptap/starter-kit";
@@ -24,6 +24,8 @@ import TableCell from "@tiptap/extension-table-cell";
 import Image from "@tiptap/extension-image";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import type { FieldSize } from "../field/Field.styles";
+import { bg, border, text } from "../../../styles/base.styles";
+import { pad } from "../../../styles/control.styles";
 import { EditorToolbar } from "./EditorToolbar";
 
 export interface RichTextEditorProps {
@@ -46,34 +48,13 @@ export interface RichTextEditorProps {
   style?: JSX.CSSProperties;
 }
 
-// Editor wrapper style
-const editorWrapperClass = clsx(
-  "flex flex-col",
-  "bg-primary-50 dark:bg-primary-950/30",
-  "text-base-900 dark:text-base-100",
-  "border border-base-300 dark:border-base-700",
-  "rounded",
-  "focus-within:border-primary-500",
-);
-
-// Editor disabled style
-const editorDisabledClass = clsx("bg-base-100 dark:bg-base-800", "text-base-500");
-
-// Editor content area style
-const editorContentClass = clsx(
-  "px-4 py-3",
-  "min-h-32",
-  "outline-none",
-  "prose prose-sm max-w-none",
-  "dark:prose-invert",
-);
-
 // Editor content size-based style
 const editorContentSizeClasses: Record<FieldSize, string> = {
-  xs: clsx("px-1.5 py-1", "min-h-12"),
-  sm: clsx("px-3 py-2", "min-h-24"),
-  lg: clsx("px-5 py-4", "min-h-48"),
-  xl: clsx("px-6 py-5", "min-h-64"),
+  default: clsx(pad.xl, "min-h-32"),
+  xs: clsx(pad.xs, "min-h-12"),
+  sm: clsx(pad.sm, "min-h-24"),
+  lg: clsx(pad.lg, "min-h-48"),
+  xl: clsx(pad.xl, "min-h-64"),
 };
 
 export const RichTextEditor: Component<RichTextEditorProps> = (props) => {
@@ -166,10 +147,14 @@ export const RichTextEditor: Component<RichTextEditorProps> = (props) => {
   });
 
   const getWrapperClass = () =>
-    twMerge(editorWrapperClass, local.disabled && editorDisabledClass, local.class);
+    twMerge(
+      clsx("flex flex-col bg-primary-50 dark:bg-primary-950/30", text.default, "border", border.default, "rounded focus-within:border-primary-500"),
+      local.disabled && clsx(bg.muted, text.muted),
+      local.class,
+    );
 
   const getContentClass = () =>
-    twMerge(editorContentClass, local.size && editorContentSizeClasses[local.size]);
+    twMerge("outline-none prose prose-sm max-w-none dark:prose-invert", editorContentSizeClasses[local.size ?? "default"]);
 
   return (
     <div {...rest} data-rich-text-editor class={getWrapperClass()} style={local.style}>

package/src/components/form-control/field/DatePicker.tsx

@@ -1,11 +1,9 @@
-import clsx from "clsx";
-import { type Component, createMemo, type JSX, Show, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { type Component, createMemo, type JSX, splitProps } from "solid-js";
 import { DateOnly } from "@simplysm/core-common";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { fieldInputClass, type FieldSize, getFieldWrapperClass } from "./Field.styles";
-import { Invalid } from "../../form-control/Invalid";
-import { useI18n } from "../../../providers/i18n/I18nContext";
+import { useI18n } from "../../../providers/i18n/I18nProvider";
+import { FieldShell } from "./FieldShell";
 
 type DatePickerUnit = "year" | "month" | "date";
 
@@ -32,7 +30,7 @@ export interface DatePickerProps {
   disabled?: boolean;
 
   /** Read-only */
-  readonly?: boolean;
+  readOnly?: boolean;
 
   /** Size */
   size?: FieldSize;
@@ -52,8 +50,8 @@ export interface DatePickerProps {
   /** Custom validation function */
   validate?: (value: DateOnly | undefined) => string | undefined;
 
-  /** touchMode: show errors only after blur */
-  touchMode?: boolean;
+  /** lazyValidation: show errors only after blur */
+  lazyValidation?: boolean;
 }
 
 /**
@@ -146,14 +144,14 @@ export const DatePicker: Component<DatePickerProps> = (props) => {
     "max",
     "title",
     "disabled",
-    "readonly",
+    "readOnly",
     "size",
     "inset",
     "class",
     "style",
     "required",
     "validate",
-    "touchMode",
+    "lazyValidation",
   ]);
 
   const i18n = useI18n();
@@ -188,7 +186,7 @@ export const DatePicker: Component<DatePickerProps> = (props) => {
     });
 
   // Editable check
-  const isEditable = () => !local.disabled && !local.readonly;
+  const isEditable = () => !local.disabled && !local.readOnly;
 
   // Validation message (check in order, return first error)
   const errorMsg = createMemo(() => {
@@ -204,71 +202,31 @@ export const DatePicker: Component<DatePickerProps> = (props) => {
   });
 
   return (
-    <Invalid
-      message={errorMsg()}
-      variant={local.inset ? "dot" : "border"}
-      touchMode={local.touchMode}
+    <FieldShell
+      errorMsg={errorMsg()}
+      invalidVariant={local.inset ? "dot" : "border"}
+      lazyValidation={local.lazyValidation}
+      inset={local.inset}
+      isEditable={isEditable()}
+      wrapperClass={getWrapperClass}
+      dataAttr="data-date-field"
+      readonlyExtraClass="sd-date-field"
+      style={local.style}
+      title={local.title}
+      class={local.class}
+      rest={rest}
+      displayContent={displayValue() || "\u00A0"}
     >
-      <Show
-        when={local.inset}
-        fallback={
-          // standalone mode: maintain existing Show pattern
-          <Show
-            when={isEditable()}
-            fallback={
-              <div
-                {...rest}
-                data-date-field
-                class={twMerge(getWrapperClass(true), "sd-date-field")}
-                style={local.style}
-                title={local.title}
-              >
-                {displayValue() || "\u00A0"}
-              </div>
-            }
-          >
-            <div {...rest} data-date-field class={getWrapperClass(true)} style={local.style}>
-              <input
-                type={getInputType(fieldType())}
-                class={fieldInputClass}
-                value={displayValue()}
-                title={local.title}
-                min={formatDateValue(local.min, fieldType())}
-                max={formatDateValue(local.max, fieldType())}
-                autocomplete="one-time-code"
-                onChange={handleChange}
-              />
-            </div>
-          </Show>
-        }
-      >
-        {/* inset mode: dual-element overlay pattern */}
-        <div {...rest} data-date-field class={clsx("relative", local.class)} style={local.style}>
-          <div
-            data-date-field-content
-            class={getWrapperClass(false)}
-            style={{ visibility: isEditable() ? "hidden" : undefined }}
-            title={local.title}
-          >
-            {displayValue() || "\u00A0"}
-          </div>
-
-          <Show when={isEditable()}>
-            <div class={twMerge(getWrapperClass(false), "absolute left-0 top-0 size-full")}>
-              <input
-                type={getInputType(fieldType())}
-                class={fieldInputClass}
-                value={displayValue()}
-                title={local.title}
-                min={formatDateValue(local.min, fieldType())}
-                max={formatDateValue(local.max, fieldType())}
-                autocomplete="one-time-code"
-                onChange={handleChange}
-              />
-            </div>
-          </Show>
-        </div>
-      </Show>
-    </Invalid>
+      <input
+        type={getInputType(fieldType())}
+        class={fieldInputClass}
+        value={displayValue()}
+        title={local.title}
+        min={formatDateValue(local.min, fieldType())}
+        max={formatDateValue(local.max, fieldType())}
+        autocomplete="one-time-code"
+        onChange={handleChange}
+      />
+    </FieldShell>
   );
 };