@simplysm/solid 13.0.84 → 13.0.85

package/src/components/data/sheet/DataSheet.tsx

@@ -368,7 +368,6 @@ const DataSheetInner = <TItem,>(props: DataSheetProps<TItem>) => {
     );
 
   // #region Display
-  const displayItems = flatItems;
 
   // #region Selection
   const {
@@ -387,7 +386,7 @@ const DataSheetInner = <TItem,>(props: DataSheetProps<TItem>) => {
       get onSelectionChange() { return local.onSelectionChange; },
       get isItemSelectable() { return local.isItemSelectable; },
     },
-    displayItems,
+    flatItems,
   );
 
   // #region AutoSelect
@@ -408,7 +407,7 @@ const DataSheetInner = <TItem,>(props: DataSheetProps<TItem>) => {
       get onItemsReorder() { return local.onItemsReorder; },
       get itemChildren() { return local.itemChildren; },
     },
-    displayItems,
+    flatItems,
   );
 
   // #region Keyboard Navigation (move rows with Enter/Shift+Enter)
@@ -428,11 +427,8 @@ const DataSheetInner = <TItem,>(props: DataSheetProps<TItem>) => {
     if (!tbody) return;
 
     const rows = tbody.rows;
-    const rowIndex = Array.from(rows).indexOf(tr);
-    if (rowIndex < 0) return;
-
-    const cellIndex = Array.from(tr.cells).indexOf(td);
-    if (cellIndex < 0) return;
+    const rowIndex = tr.sectionRowIndex;
+    const cellIndex = td.cellIndex;
 
     const targetRowIndex = e.shiftKey ? rowIndex - 1 : rowIndex + 1;
     if (targetRowIndex < 0 || targetRowIndex >= rows.length) return;
@@ -784,7 +780,7 @@ const DataSheetInner = <TItem,>(props: DataSheetProps<TItem>) => {
                         <div class={featureCellClickableClass} onClick={() => toggleSelectAll()}>
                           <Checkbox
                             checked={(() => {
-                              const selectableItems = displayItems()
+                              const selectableItems = flatItems()
                                 .map((flat) => flat.item)
                                 .filter((item) => getItemSelectable(item) === true);
                               return (
@@ -829,7 +825,7 @@ const DataSheetInner = <TItem,>(props: DataSheetProps<TItem>) => {
             {renderSummaryRow()}
           </thead>
           <tbody>
-            <For each={displayItems()}>
+            <For each={flatItems()}>
               {(flat) => (
                 <tr
                   data-selected={selection().includes(flat.item) ? "" : undefined}

package/src/components/data/sheet/hooks/createDataSheetExpansion.ts

@@ -37,20 +37,6 @@ export function createDataSheetExpansion<TItem>(
     }
   }
 
-  function toggleExpandAll(): void {
-    if (!props.itemChildren) return;
-    const indexMap = originalIndexMap();
-    const allExpandable = collectAllExpandable(
-      pagedItems(),
-      props.itemChildren,
-      (item) => indexMap.get(item) ?? -1,
-    );
-    const isAllCurrentlyExpanded = allExpandable.every((item) =>
-      expandedItems().includes(item),
-    );
-    setExpandedItems(isAllCurrentlyExpanded ? [] : allExpandable);
-  }
-
   const flatItems = createMemo((): FlatItem<TItem>[] => {
     const indexMap = originalIndexMap();
     return flattenTree(
@@ -61,16 +47,29 @@ export function createDataSheetExpansion<TItem>(
     );
   });
 
-  const isAllExpanded = createMemo(() => {
-    if (!props.itemChildren) return false;
+  const allExpandable = createMemo(() => {
+    if (!props.itemChildren) return [];
     const indexMap = originalIndexMap();
-    const allExpandable = collectAllExpandable(
+    return collectAllExpandable(
       pagedItems(),
       props.itemChildren,
       (item) => indexMap.get(item) ?? -1,
     );
+  });
+
+  function toggleExpandAll(): void {
+    const items = allExpandable();
+    if (items.length === 0) return;
+    const isAllCurrentlyExpanded = items.every((item) =>
+      expandedItems().includes(item),
+    );
+    setExpandedItems(isAllCurrentlyExpanded ? [] : items);
+  }
+
+  const isAllExpanded = createMemo(() => {
+    const items = allExpandable();
     return (
-      allExpandable.length > 0 && allExpandable.every((item) => expandedItems().includes(item))
+      items.length > 0 && items.every((item) => expandedItems().includes(item))
     );
   });
 

package/src/components/data/sheet/hooks/createDataSheetReorder.ts

@@ -37,11 +37,13 @@ export function createDataSheetReorder<TItem>(
     const tableEl = target.closest("table")!;
     const tbody = tableEl.querySelector("tbody")!;
     const rows = Array.from(tbody.rows);
+    const scrollContainer = tableEl.closest<HTMLElement>("[data-sheet-scroll]");
 
     setDragState({ draggingItem: item, targetItem: null, position: null });
 
     startPointerDrag(target, e.pointerId, {
       onMove(ev) {
+        const items = displayItems();
         let foundTarget: TItem | null = null;
         let foundPosition: "before" | "after" | "inside" | null = null;
 
@@ -50,8 +52,8 @@ export function createDataSheetReorder<TItem>(
           const rect = row.getBoundingClientRect();
           if (ev.clientY < rect.top || ev.clientY > rect.bottom) continue;
 
-          if (i >= displayItems().length) break;
-          const flat = displayItems()[i];
+          if (i >= items.length) break;
+          const flat = items[i];
           if (flat.item === item) break;
 
           // Cannot drop to child items of self
@@ -82,8 +84,8 @@ export function createDataSheetReorder<TItem>(
           rows[i].removeAttribute("data-dragging");
           rows[i].removeAttribute("data-drag-over");
 
-          if (i < displayItems().length) {
-            const flat = displayItems()[i];
+          if (i < items.length) {
+            const flat = items[i];
             if (flat.item === item) {
               rows[i].setAttribute("data-dragging", "");
             }
@@ -94,22 +96,20 @@ export function createDataSheetReorder<TItem>(
         }
 
         // before/after indicator
-        const indicatorEl = tableEl
-          .closest("[data-sheet-scroll]")
+        const indicatorEl = scrollContainer
           ?.querySelector("[data-reorder-indicator]") as HTMLElement | null;
         if (indicatorEl) {
           if (foundTarget != null && foundPosition != null && foundPosition !== "inside") {
-            const targetIdx = displayItems().findIndex((f) => f.item === foundTarget);
+            const targetIdx = items.findIndex((f) => f.item === foundTarget);
             if (targetIdx >= 0) {
               const targetRow = rows[targetIdx];
-              const containerRect = tableEl.closest("[data-sheet-scroll]")!.getBoundingClientRect();
+              const containerRect = scrollContainer!.getBoundingClientRect();
               const rowRect = targetRow.getBoundingClientRect();
-              const scrollEl = tableEl.closest("[data-sheet-scroll]") as HTMLElement;
 
               const top =
                 foundPosition === "before"
-                  ? rowRect.top - containerRect.top + scrollEl.scrollTop
-                  : rowRect.bottom - containerRect.top + scrollEl.scrollTop;
+                  ? rowRect.top - containerRect.top + scrollContainer!.scrollTop
+                  : rowRect.bottom - containerRect.top + scrollContainer!.scrollTop;
 
               indicatorEl.style.display = "block";
               indicatorEl.style.top = `${top}px`;
@@ -134,8 +134,7 @@ export function createDataSheetReorder<TItem>(
           row.removeAttribute("data-dragging");
           row.removeAttribute("data-drag-over");
         }
-        const indicatorEl = tableEl
-          .closest("[data-sheet-scroll]")
+        const indicatorEl = scrollContainer
           ?.querySelector("[data-reorder-indicator]") as HTMLElement | null;
         if (indicatorEl) {
           indicatorEl.style.display = "none";

package/src/components/data/sheet/hooks/createDataSheetSelection.ts

@@ -57,7 +57,8 @@ export function createDataSheetSelection<TItem>(
     const selectableItems = displayItems()
       .map((flat) => flat.item)
       .filter((item) => getItemSelectable(item) === true);
-    const isAllSelected = selectableItems.every((item) => selection().includes(item));
+    const selectionSet = new Set(selection());
+    const isAllSelected = selectableItems.every((item) => selectionSet.has(item));
     setSelection(isAllSelected ? [] : selectableItems);
   }
 
@@ -74,13 +75,18 @@ export function createDataSheetSelection<TItem>(
       .filter((item) => getItemSelectable(item) === true);
 
     if (lastClickAction() === "select") {
+      const selectionSet = new Set(selection());
       const newItems = [...selection()];
       for (const item of rangeItems) {
-        if (!newItems.includes(item)) newItems.push(item);
+        if (!selectionSet.has(item)) {
+          newItems.push(item);
+          selectionSet.add(item);
+        }
       }
       setSelection(newItems);
     } else {
-      setSelection(selection().filter((item) => !rangeItems.includes(item)));
+      const rangeSet = new Set(rangeItems);
+      setSelection(selection().filter((item) => !rangeSet.has(item)));
     }
   }
 

package/src/components/disclosure/Dialog.tsx

@@ -478,70 +478,38 @@ const DialogInner: ParentComponent<DialogProps> = (props) => {
     return style;
   };
 
-  // Animation class
-  const animationClass = () => {
-    const base = clsx("transition-[opacity,transform]", "duration-200", "ease-out");
-    if (animating()) {
-      return clsx(base, "translate-y-0 opacity-100");
-    } else {
-      return clsx(base, "-translate-y-4 opacity-0");
-    }
-  };
-
-  // Wrapper class
-  const wrapperClass = () =>
-    // eslint-disable-next-line tailwindcss/enforces-shorthand -- inset-0 not supported in Chrome 84
-    clsx(
-      "fixed bottom-0 left-0 right-0 top-0",
-      "flex flex-col items-center",
-      local.mode !== "fill" && "pt-[calc(3rem+0.5rem)]",
-      local.mode === "float" && "pointer-events-none",
-    );
-
-  // Backdrop class
-  const backdropClass = () =>
-    // eslint-disable-next-line tailwindcss/enforces-shorthand -- inset-0 not supported in Chrome 84
-    clsx(
-      "absolute bottom-0 left-0 right-0 top-0",
-      "bg-black/30",
-      "dark:bg-black/50",
-      "transition-opacity",
-      "duration-200",
-      "ease-out",
-      animating() ? "opacity-100" : "opacity-0",
-    );
-
-  // Dialog class
-  const dialogBaseClass = () =>
-    clsx(
-      "relative",
-      "mx-auto",
-      "w-fit min-w-[200px]",
-      bg.surface,
-      local.mode === "float"
-        ? clsx("shadow-md dark:shadow-black/30", "border", border.subtle)
-        : "shadow-2xl dark:shadow-black/40",
-      local.mode === "fill" ? "rounded-none border-none" : "rounded-lg",
-      "overflow-hidden",
-      "flex flex-col",
-      "focus:outline-none",
-      local.mode === "float" && "pointer-events-auto",
-      animationClass(),
-    );
-
-  // Header class
-  const headerClass = () =>
-    clsx("flex items-center gap-2", "px-3 py-1", "select-none", "border-b", border.subtle);
-
   return (
     <Show when={mounted()}>
       <Portal>
         <HeaderProvider>
           <ActionProvider>
-          <div ref={setWrapperRef} data-dialog class={wrapperClass()}>
+          <div
+            ref={setWrapperRef}
+            data-dialog
+            // eslint-disable-next-line tailwindcss/enforces-shorthand -- inset-0 not supported in Chrome 84
+            class={clsx(
+              "fixed bottom-0 left-0 right-0 top-0",
+              "flex flex-col items-center",
+              local.mode !== "fill" && "pt-[calc(3rem+0.5rem)]",
+              local.mode === "float" && "pointer-events-none",
+            )}
+          >
             {/* Backdrop */}
             <Show when={local.mode !== "float"}>
-              <div data-dialog-backdrop class={backdropClass()} onClick={handleBackdropClick} />
+              <div
+                data-dialog-backdrop
+                // eslint-disable-next-line tailwindcss/enforces-shorthand -- inset-0 not supported in Chrome 84
+                class={clsx(
+                  "absolute bottom-0 left-0 right-0 top-0",
+                  "bg-black/30",
+                  "dark:bg-black/50",
+                  "transition-opacity",
+                  "duration-200",
+                  "ease-out",
+                  animating() ? "opacity-100" : "opacity-0",
+                )}
+                onClick={handleBackdropClick}
+              />
             </Show>
 
             {/* Dialog */}
@@ -554,7 +522,25 @@ const DialogInner: ParentComponent<DialogProps> = (props) => {
               aria-modal={local.mode === "float" ? undefined : true}
               aria-labelledby={hasHeader() ? headerId : undefined}
               tabIndex={0}
-              class={twMerge(dialogBaseClass(), local.class)}
+              class={twMerge(
+                clsx(
+                  "relative",
+                  "mx-auto",
+                  "w-fit min-w-[200px]",
+                  bg.surface,
+                  local.mode === "float"
+                    ? clsx("shadow-md dark:shadow-black/30", "border", border.subtle)
+                    : "shadow-2xl dark:shadow-black/40",
+                  local.mode === "fill" ? "rounded-none border-none" : "rounded-lg",
+                  "overflow-hidden",
+                  "flex flex-col",
+                  "focus:outline-none",
+                  local.mode === "float" && "pointer-events-auto",
+                  "transition-[opacity,transform] duration-200 ease-out",
+                  animating() ? "translate-y-0 opacity-100" : "-translate-y-4 opacity-0",
+                ),
+                local.class,
+              )}
               style={dialogStyle()}
               onFocus={handleDialogFocus}
               onTransitionEnd={handleTransitionEnd}
@@ -563,7 +549,7 @@ const DialogInner: ParentComponent<DialogProps> = (props) => {
               <Show when={hasHeader()}>
                 <div
                   data-dialog-header
-                  class={clsx(headerClass(), "touch-none")}
+                  class={clsx("flex items-center gap-2", "px-3 py-1", "select-none", "border-b", border.subtle, "touch-none")}
                   style={
                     typeof local.headerStyle === "string"
                       ? mergeStyles(local.headerStyle)

package/src/components/disclosure/Dropdown.tsx

@@ -402,19 +402,6 @@ const DropdownInner: ParentComponent<DropdownProps> = (props: DropdownProps) =>
 
   const maxHeight = () => local.maxHeight ?? 300;
 
-  // Animation class (only transition opacity and transform, not position properties)
-  const animationClass = () => {
-    const base = "transition-[opacity,transform] duration-150 ease-out";
-    const visible = animating();
-    const dir = direction();
-
-    if (visible) {
-      return clsx(base, "translate-y-0 opacity-100");
-    } else {
-      return clsx(base, "opacity-0", dir === "down" ? "-translate-y-1" : "translate-y-1");
-    }
-  };
-
   return (
     <TriggerProvider>
       <ContentProvider>
@@ -452,7 +439,10 @@ const DropdownInner: ParentComponent<DropdownProps> = (props: DropdownProps) =>
                   "shadow-lg dark:shadow-black/30",
                   "rounded-md",
                   "overflow-y-auto",
-                  animationClass(),
+                  "transition-[opacity,transform] duration-150 ease-out",
+                  animating()
+                    ? "translate-y-0 opacity-100"
+                    : clsx("opacity-0", direction() === "down" ? "-translate-y-1" : "translate-y-1"),
                 ),
                 local.class,
               )}

package/src/components/disclosure/Tabs.tsx

@@ -39,21 +39,6 @@ function TabsTabInner(props: TabsTabProps) {
     xl: "px-5 py-3 text-lg",
   };
 
-  const sizeClasses = () => tabSizeClasses[ctx.size() ?? "md"];
-
-  const stateClass = () =>
-    isSelected()
-      ? clsx(
-          "border-b-2 border-primary-500 dark:border-primary-400",
-          themeTokens.primary.text,
-        )
-      : clsx(
-          "border-b-2 border-transparent",
-          text.muted,
-          "hover:border-base-300 hover:text-base-700",
-          "dark:hover:border-base-600 dark:hover:text-base-200",
-        );
-
   return (
     <button
       type="button"
@@ -63,8 +48,18 @@ function TabsTabInner(props: TabsTabProps) {
       tabIndex={props.disabled ? -1 : 0}
       class={twMerge(
         "relative cursor-pointer select-none font-medium transition-colors -mb-px",
-        sizeClasses(),
-        stateClass(),
+        tabSizeClasses[ctx.size() ?? "md"],
+        isSelected()
+          ? clsx(
+              "border-b-2 border-primary-500 dark:border-primary-400",
+              themeTokens.primary.text,
+            )
+          : clsx(
+              "border-b-2 border-transparent",
+              text.muted,
+              "hover:border-base-300 hover:text-base-700",
+              "dark:hover:border-base-600 dark:hover:text-base-200",
+            ),
         props.disabled && "opacity-50 pointer-events-none",
         props.class,
       )}

package/src/components/features/crud-detail/CrudDetail.tsx

@@ -201,7 +201,6 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
       <>
         <Show when={showSave()}>
           <Button
-            size="lg"
             variant="ghost"
             theme="primary"
             onClick={() => formRef?.requestSubmit()}
@@ -213,7 +212,6 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
         <Show when={showDelete()}>
           {(_) => (
             <Button
-              size="lg"
               variant="ghost"
               theme="danger"
               onClick={() => void handleToggleDelete()}
@@ -223,7 +221,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
             </Button>
           )}
         </Show>
-        <Button size="lg" variant="ghost" theme="info" onClick={() => void handleRefresh()}>
+        <Button variant="ghost" theme="info" onClick={() => void handleRefresh()}>
           <Icon icon={IconRefresh} class="mr-1" />
           {i18n.t("crudDetail.refresh")}
         </Button>
@@ -259,8 +257,9 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
           <BusyContainer
             ready={ready()}
             busy={busyCount() > 0}
-            class={clsx("flex h-full flex-col gap-2", local.class)}
+            class={clsx("flex h-full flex-col", local.class)}
           >
+            <div class="flex min-h-0 flex-1 flex-col gap-2">
             {/* Toolbar */}
             <Show when={(!isInDialog && !topbarCtx) || tools()}>
               <div class="flex gap-2 pb-0">
@@ -318,6 +317,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
 
             {/* After (outside form) */}
             <Show when={after()}>{(afterSlot) => afterSlot().children}</Show>
+            </div>
 
             {/* Dialog mode: bottom bar */}
             <Show when={isInDialog && canEdit()}>

package/src/components/features/crud-sheet/CrudSheet.tsx

@@ -369,13 +369,13 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, unknown>>(
 
   // -- Keyboard Shortcuts --
   createEventListener(document, "keydown", async (e: KeyboardEvent) => {
-    if (!isActiveCrud(crudId)) return;
-    if (e.ctrlKey && e.key === "s" && !isSelectMode()) {
+    if (!e.ctrlKey || !isActiveCrud(crudId)) return;
+    if (e.key === "s" && !isSelectMode()) {
       e.preventDefault();
       e.stopImmediatePropagation();
       formRef?.requestSubmit();
     }
-    if (e.ctrlKey && e.altKey && e.key === "l") {
+    if (e.altKey && e.key === "l") {
       e.preventDefault();
       e.stopImmediatePropagation();
       if (!checkIgnoreChanges()) return;
@@ -402,7 +402,6 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, unknown>>(
       <>
         <Show when={canEdit() && local.inlineEdit}>
           <Button
-            size="lg"
             variant="ghost"
             theme="primary"
             onClick={() => formRef?.requestSubmit()}
@@ -411,7 +410,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, unknown>>(
             {i18n.t("crudSheet.save")}
           </Button>
         </Show>
-        <Button size="lg" variant="ghost" theme="info" onClick={handleRefresh}>
+        <Button variant="ghost" theme="info" onClick={handleRefresh}>
           <Icon icon={IconRefresh} class="mr-1" />
           {i18n.t("crudSheet.refresh")}
         </Button>

package/src/components/feedback/busy/BusyContainer.tsx

@@ -72,27 +72,21 @@ export const BusyContainer: ParentComponent<BusyContainerProps> = (props) => {
     );
   });
 
-   
-  const screenClass = () =>
-    clsx(
-      "absolute inset-0 z-busy bg-white/70 transition-opacity duration-150 dark:bg-base-900/70",
-      animating() ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0",
-    );
-
-  // spinner: slide down animation
-  const rectClass = () => {
-    if (currVariant() !== "spinner") return "";
-    return clsx(
-      "transition-transform duration-100",
-      animating() ? "translate-y-0 ease-out" : "-translate-y-full ease-in",
-    );
-  };
-
   return (
     <div ref={containerRef} class={twMerge("relative size-full min-h-[70px] min-w-[70px] overflow-auto", local.class)} {...rest}>
       <Show when={mounted()}>
-        <div class={screenClass()} onTransitionEnd={handleTransitionEnd}>
-          <div class={rectClass()}>
+        <div
+          class={clsx(
+            "absolute inset-0 z-busy bg-white/70 transition-opacity duration-150 dark:bg-base-900/70",
+            animating() ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0",
+          )}
+          onTransitionEnd={handleTransitionEnd}
+        >
+          <div
+            class={currVariant() === "spinner"
+              ? clsx("transition-transform duration-100", animating() ? "translate-y-0 ease-out" : "-translate-y-full ease-in")
+              : ""}
+          >
             <Show when={currVariant() === "spinner"}>
               <div class="mx-auto mt-5 size-8 animate-spin rounded-full border-[6px] border-base-200 border-b-primary-500 shadow-md dark:border-base-700 dark:border-b-primary-400" />
             </Show>

package/src/components/form-control/checkbox/SelectableBase.tsx

@@ -76,20 +76,6 @@ export const SelectableBase: ParentComponent<SelectableBaseProps & { config: Sel
     }
   };
 
-  const getWrapperClass = () =>
-    twMerge(
-      checkboxBaseClass,
-      checkboxSizeClasses[local.size ?? "md"],
-      local.inset && checkboxInsetClass,
-      local.inset && checkboxInsetSizeHeightClasses[local.size ?? "md"],
-      local.inline && checkboxInlineClass,
-      local.disabled && checkboxDisabledClass,
-      local.class,
-    );
-
-  const getIndicatorClass = () =>
-    twMerge(indicatorBaseClass, local.config.indicatorShape, checked() && checkedClass);
-
   const errorMsg = createMemo(() => {
     const v = local.checked ?? false;
     if (local.required && !v) return i18n.t("validation.requiredSelection");
@@ -104,12 +90,20 @@ export const SelectableBase: ParentComponent<SelectableBaseProps & { config: Sel
         role={local.config.role}
         aria-checked={checked()}
         tabIndex={local.disabled ? -1 : 0}
-        class={getWrapperClass()}
+        class={twMerge(
+          checkboxBaseClass,
+          checkboxSizeClasses[local.size ?? "md"],
+          local.inset && checkboxInsetClass,
+          local.inset && checkboxInsetSizeHeightClasses[local.size ?? "md"],
+          local.inline && checkboxInlineClass,
+          local.disabled && checkboxDisabledClass,
+          local.class,
+        )}
         style={local.style}
         onClick={handleClick}
         onKeyDown={handleKeyDown}
       >
-        <div class={getIndicatorClass()}>
+        <div class={twMerge(indicatorBaseClass, local.config.indicatorShape, checked() && checkedClass)}>
           <Show when={checked()}>
             {local.config.indicatorContent}
           </Show>

package/src/components/form-control/date-range-picker/DateRangePicker.tsx

@@ -153,11 +153,8 @@ export const DateRangePicker: Component<DateRangePickerProps> = (props) => {
     setTo(newTo);
   };
 
-  // Wrapper CSS class
-  const getWrapperClass = () => twMerge(clsx("inline-flex items-center", gap.md), local.class);
-
   return (
-    <div {...rest} data-date-range-picker class={getWrapperClass()} style={local.style}>
+    <div {...rest} data-date-range-picker class={twMerge(clsx("inline-flex items-center", gap.md), local.class)} style={local.style}>
       <Select
         value={periodType()}
         onValueChange={handlePeriodTypeChange}

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

@@ -146,18 +146,17 @@ export const RichTextEditor: Component<RichTextEditorProps> = (props) => {
     editor()?.destroy();
   });
 
-  const getWrapperClass = () =>
-    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("outline-none prose prose-sm max-w-none dark:prose-invert", editorContentSizeClasses[local.size ?? "md"]);
-
   return (
-    <div {...rest} data-rich-text-editor class={getWrapperClass()} style={local.style}>
+    <div
+      {...rest}
+      data-rich-text-editor
+      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,
+      )}
+      style={local.style}
+    >
       <Show when={editor()}>
         {(instance) => (
           <Show when={!local.disabled}>
@@ -165,7 +164,7 @@ export const RichTextEditor: Component<RichTextEditorProps> = (props) => {
           </Show>
         )}
       </Show>
-      <div ref={editorRef} class={getContentClass()} />
+      <div ref={editorRef} class={twMerge("outline-none prose prose-sm max-w-none dark:prose-invert", editorContentSizeClasses[local.size ?? "md"])} />
     </div>
   );
 };

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

@@ -19,13 +19,6 @@ import { useI18n } from "../../../providers/i18n/I18nProvider";
 import { FieldShell } from "./FieldShell";
 import clsx from "clsx";
 
-// NumberInput-specific input style (right-aligned + spinner hidden)
-const numberInputClass = clsx(
-  fieldInputClass,
-  "text-right",
-  "[&::-webkit-outer-spin-button]:appearance-none",
-  "[&::-webkit-inner-spin-button]:appearance-none",
-);
 
 const [NumberInputPrefixSlot, createNumberInputPrefixAccessor] = createSlot<{ children: JSX.Element }>();
 export const NumberInputPrefix = NumberInputPrefixSlot;
@@ -331,7 +324,12 @@ const NumberInputInner = (props: NumberInputProps): JSX.Element => {
         <input
           type="text"
           inputmode="numeric"
-          class={numberInputClass}
+          class={clsx(
+            fieldInputClass,
+            "text-right",
+            "[&::-webkit-outer-spin-button]:appearance-none",
+            "[&::-webkit-inner-spin-button]:appearance-none",
+          )}
           value={displayValue()}
           placeholder={local.placeholder}
           title={local.title}