@simplysm/solid 13.0.84 → 13.0.86

package/src/components/form-control/select/Select.tsx

@@ -32,12 +32,16 @@ import { TextInput } from "../field/TextInput";
 import { useI18n } from "../../../providers/i18n/I18nProvider";
 import {
   listItemBaseClass,
+  listItemSizeClasses,
   listItemSelectedClass,
   listItemDisabledClass,
   listItemIndentGuideClass,
   listItemContentClass,
   getListItemSelectedIconClass,
+  listItemBasePadLeft,
+  LIST_ITEM_INDENT_SIZE,
 } from "../../data/list/ListItem.styles";
+import { useListContext } from "../../data/list/ListContext";
 
 void ripple;
 
@@ -65,13 +69,15 @@ export interface SelectContextValue<TValue = unknown> {
 
   /** Register item template */
   setItemTemplate: (fn: ((...args: unknown[]) => JSX.Element) | undefined) => void;
+
+  /** Trigger size */
+  size: Accessor<ComponentSize>;
 }
 
 export const SelectContext = createContext<SelectContextValue>();
-const SelectCtx = SelectContext;
 
 function useSelectContext<TValue = unknown>(): SelectContextValue<TValue> {
-  const context = useContext(SelectCtx);
+  const context = useContext(SelectContext);
   if (!context) {
     throw new Error("useSelectContext can only be used inside Select component");
   }
@@ -90,6 +96,7 @@ const [SelectActionSlot, createActionSlotAccessor] = createSlot<{ children: JSX.
 
 const SelectAction = (props: SelectActionProps) => {
   const [local, rest] = splitProps(props, ["children", "class"]);
+  const ctx = useSelectContext();
 
   const handleClick: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> = (e) => {
     if (typeof rest.onClick === "function") {
@@ -104,8 +111,17 @@ const SelectAction = (props: SelectActionProps) => {
       <button
         {...rest}
         type="button"
+        use:ripple={!rest.disabled}
         onClick={handleClick}
-        class={twMerge("p-2", themeTokens.base.hoverBg, local.class)}
+        class={twMerge(
+          "inline-flex items-center",
+          pad[ctx.size()],
+          "border",
+          border.default,
+          groupFocusBorderClass,
+          themeTokens.base.hoverBg,
+          local.class,
+        )}
         data-select-action
       >
         {local.children}
@@ -116,6 +132,8 @@ const SelectAction = (props: SelectActionProps) => {
 
 //#endregion
 
+const groupFocusBorderClass = "group-focus-within:border-primary-400 dark:group-focus-within:border-primary-400";
+
 const selectAllBtnClass = clsx(
   "text-primary-500",
   "hover:text-primary-600 dark:hover:text-primary-400",
@@ -163,9 +181,11 @@ export interface SelectItemProps<TValue = unknown> extends Omit<
 const SelectItemInner = <TValue,>(
   props: SelectItemProps<TValue> & { children?: JSX.Element },
 ) => {
-  const [local, rest] = splitProps(props, ["children", "class", "value", "disabled"]);
+  const [local, rest] = splitProps(props, ["children", "class", "style", "value", "disabled"]);
 
   const context = useSelectContext<TValue>();
+  const listContext = useListContext();
+  const level = listContext.level;
 
   const [childrenSlot, ItemChildrenProvider] = createItemChildrenSlotAccessor();
   const hasChildren = () => childrenSlot() !== undefined;
@@ -186,12 +206,18 @@ const SelectItemInner = <TValue,>(
   const getClassName = () =>
     twMerge(
       listItemBaseClass,
+      listItemSizeClasses[context.size()],
       isSelected() && listItemSelectedClass,
       local.disabled && listItemDisabledClass,
       local.class,
     );
 
-  const getCheckIconClass = () => getListItemSelectedIconClass(isSelected());
+  const indentPaddingLeft = level >= 1
+    ? `${listItemBasePadLeft[context.size()] + level * LIST_ITEM_INDENT_SIZE}rem`
+    : undefined;
+
+  const getGuideLeft = () =>
+    `${listItemBasePadLeft[context.size()] + level * LIST_ITEM_INDENT_SIZE + LIST_ITEM_INDENT_SIZE * 0.5}rem`;
 
   return (
     <ItemChildrenProvider>
@@ -200,6 +226,7 @@ const SelectItemInner = <TValue,>(
         type="button"
         use:ripple={useRipple()}
         class={getClassName()}
+        style={{ ...(local.style as JSX.CSSProperties), "padding-left": indentPaddingLeft }}
         data-select-item
         data-list-item
         role="option"
@@ -209,15 +236,15 @@ const SelectItemInner = <TValue,>(
         onClick={handleClick}
       >
         <Show when={context.multiple() && !hasChildren()}>
-          <Icon icon={IconCheck} class={getCheckIconClass()} />
+          <Icon icon={IconCheck} class={getListItemSelectedIconClass(isSelected())} />
         </Show>
         <span class={listItemContentClass}>{local.children}</span>
       </button>
       <Show when={hasChildren()}>
         <Collapse open={true}>
-          <div class="flex">
-            <div class={listItemIndentGuideClass} />
-            <List inset class="flex-1">
+          <div class="relative">
+            <div class={listItemIndentGuideClass} style={{ left: getGuideLeft() }} />
+            <List inset>
               {childrenSlot()!.children}
             </List>
           </div>
@@ -440,6 +467,7 @@ const SelectInnerComponent = <TValue,>(props: SelectProps<TValue>) => {
     toggleValue,
     closeDropdown,
     setItemTemplate,
+    size: () => local.size ?? "md",
   };
 
   // Trigger keyboard handling (only Enter/Space, ArrowUp/Down handled by Dropdown)
@@ -608,7 +636,7 @@ const SelectInnerComponent = <TValue,>(props: SelectProps<TValue>) => {
       local.multiple === true && !local.hideSelectAll && local.items !== undefined;
 
     return (
-      <div {...rest} data-select class={clsx("group", local.inset ? "flex" : "inline-flex")}>
+      <div {...rest} data-select class={clsx("group", local.inset ? "flex" : "inline-flex", "[&>[data-dropdown-trigger]]:flex")}>
         <Dropdown disabled={local.disabled} open={open()} onOpenChange={setOpen} keyboardNav>
           <Dropdown.Trigger>
             <div
@@ -624,7 +652,7 @@ const SelectInnerComponent = <TValue,>(props: SelectProps<TValue>) => {
                 action() !== undefined &&
                   clsx(
                     "rounded-r-none border-r-0",
-                    "group-focus-within:border-primary-400 dark:group-focus-within:border-primary-400",
+                    groupFocusBorderClass,
                   ),
               )}
               style={local.style}
@@ -698,13 +726,13 @@ const SelectInnerComponent = <TValue,>(props: SelectProps<TValue>) => {
 
   return (
     <Invalid message={errorMsg()} variant="border" lazyValidation={local.lazyValidation}>
-      <SelectCtx.Provider value={contextValue as SelectContextValue}>
+      <SelectContext.Provider value={contextValue as SelectContextValue}>
         <HeaderProvider>
           <ActionProvider>
             <SelectInnerRender>{local.children}</SelectInnerRender>
           </ActionProvider>
         </HeaderProvider>
-      </SelectCtx.Provider>
+      </SelectContext.Provider>
     </Invalid>
   );
 };

package/src/components/form-control/state-preset/StatePreset.tsx

@@ -9,7 +9,6 @@ import { useNotification } from "../../feedback/notification/NotificationProvide
 import { Icon } from "../../display/Icon";
 import { bg, text } from "../../../styles/base.styles";
 import { type ComponentSize, gap, pad } from "../../../styles/control.styles";
-import { themeTokens } from "../../../styles/theme.styles";
 import { Button } from "../Button";
 import { useI18n } from "../../../providers/i18n/I18nProvider";
 
@@ -20,53 +19,33 @@ interface StatePresetItem<TValue> {
   state: TValue;
 }
 
-type StatePresetSize = ComponentSize;
-
 export interface StatePresetProps<TValue> {
   storageKey: string;
   value: TValue;
   onValueChange: (value: TValue) => void;
-  size?: StatePresetSize;
+  size?: ComponentSize;
   class?: string;
   style?: JSX.CSSProperties;
 }
 
 // ── Style constants ──
 
-const chipSizeClasses: Record<StatePresetSize, string> = {
+const sizeClasses: Record<ComponentSize, string> = {
   md: pad.md,
-  xs: clsx(pad.xs, "text-sm"),
+  xs: pad.xs,
   sm: pad.sm,
   lg: pad.lg,
-  xl: clsx(pad.xl, "text-lg"),
-};
-
-const iconBtnSizeClasses: Record<StatePresetSize, string> = {
-  md: "p-0.5",
-  xs: "p-0",
-  sm: "p-0.5",
-  lg: "p-1",
-  xl: "p-1.5",
-};
-
-const starBtnSizeClasses: Record<StatePresetSize, string> = {
-  md: "p-1",
-  xs: "p-0",
-  sm: "p-0.5",
-  lg: "p-1.5",
-  xl: "p-2",
+  xl: pad.xl,
 };
 
-const inputSizeClasses: Record<StatePresetSize, string> = {
-  md: clsx(pad.md, "w-24"),
-  xs: clsx("w-16", pad.xs, "text-sm"),
-  sm: clsx(pad.sm, "w-20"),
-  lg: clsx(pad.lg, "w-32"),
-  xl: clsx(pad.xl, "w-36 text-lg"),
+const iconSizeMap: Record<ComponentSize, string> = {
+  xs: "0.875em",
+  sm: "1em",
+  md: "1.25em",
+  lg: "1.5em",
+  xl: "1.75em",
 };
 
-const iconSize = "0.85em";
-
 // ── Component ──
 
 function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element {
@@ -191,43 +170,31 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
 
   // ── Render ──
 
-  const containerClass = () => twMerge(clsx("inline-flex items-center", gap.lg, "flex-wrap"), local.class);
-
-  const resolvedChipClass = () => twMerge(
-    clsx("inline-flex items-center", gap.md, "rounded-full", bg.subtle, text.default, "cursor-default"),
-    chipSizeClasses[local.size ?? "md"],
-  );
-
-  const resolvedIconBtnClass = () =>
-    twMerge("rounded-full", iconBtnSizeClasses[local.size ?? "md"]);
-
-  const resolvedStarBtnClass = () =>
-    twMerge(
-      clsx("inline-flex cursor-pointer items-center justify-center rounded-full text-warning-500 transition-colors focus:outline-none", themeTokens.warning.hoverBg),
-      starBtnSizeClasses[local.size ?? "md"],
-    );
-
-  const resolvedInputClass = () => twMerge(
-    clsx("rounded-full", bg.subtle, text.default, "border border-transparent focus:outline-none focus:ring-1 focus:ring-primary-400", text.placeholder),
-    inputSizeClasses[local.size ?? "md"],
-  );
+  const resolvedSize = () => local.size ?? "md";
 
   return (
-    <div class={containerClass()} style={local.style}>
+    <div class={twMerge(clsx("inline-flex items-center", gap.lg, "flex-wrap"), local.class)} style={local.style}>
       {/* Star button - add preset */}
-      <button
-        type="button"
-        class={resolvedStarBtnClass()}
+      <Button
+        size={local.size}
+        variant="ghost"
+        class="rounded-full text-warning-500"
         onClick={handleStartAdd}
         title={i18n.t("statePreset.addPreset")}
       >
-        <Icon icon={IconStar} size={iconSize} />
-      </button>
+        {"\u200B"}
+        <Icon icon={IconStar} size={iconSizeMap[resolvedSize()]} />
+      </Button>
 
       {/* Preset chips */}
       <For each={presets()}>
         {(preset, index) => (
-          <span class={resolvedChipClass()}>
+          <span
+            class={twMerge(
+              clsx("inline-flex items-center", gap.md, "rounded-full border border-transparent", bg.subtle, text.default, "cursor-default"),
+              sizeClasses[resolvedSize()],
+            )}
+          >
             <button
               type="button"
               class="cursor-pointer hover:underline focus:outline-none"
@@ -236,24 +203,22 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
             >
               {preset.name}
             </button>
-            <Button
-              variant="ghost"
-              size="xs"
-              class={resolvedIconBtnClass()}
+            <button
+              type="button"
+              class="cursor-pointer rounded-full opacity-50 hover:opacity-100 focus:outline-none"
               onClick={() => handleOverwrite(index())}
               title={i18n.t("statePreset.overwrite")}
             >
-              <Icon icon={IconDeviceFloppy} size={iconSize} />
-            </Button>
-            <Button
-              variant="ghost"
-              size="xs"
-              class={resolvedIconBtnClass()}
+              <Icon icon={IconDeviceFloppy} size={iconSizeMap[resolvedSize()]} />
+            </button>
+            <button
+              type="button"
+              class="cursor-pointer rounded-full opacity-50 hover:opacity-100 focus:outline-none"
               onClick={() => handleDelete(index())}
               title={i18n.t("statePreset.deletePreset")}
             >
-              <Icon icon={IconX} size={iconSize} />
-            </Button>
+              <Icon icon={IconX} size={iconSizeMap[resolvedSize()]} />
+            </button>
           </span>
         )}
       </For>
@@ -266,7 +231,10 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
             requestAnimationFrame(() => el.focus());
           }}
           type="text"
-          class={resolvedInputClass()}
+          class={twMerge(
+            clsx("inline-flex items-center rounded-full leading-normal", bg.subtle, text.default, "border border-transparent focus:outline-none focus:ring-1 focus:ring-primary-400", text.placeholder),
+            sizeClasses[resolvedSize()],
+          )}
           placeholder={i18n.t("statePreset.namePlaceholder")}
           autocomplete="one-time-code"
           value={inputValue()}

package/src/components/layout/FormGroup.tsx

@@ -43,7 +43,7 @@ const FormGroupBase: ParentComponent<FormGroupProps> = (props) => {
   const [local, rest] = splitProps(props, ["children", "class", "inline"]);
 
   const getClassName = () => twMerge(
-    local.inline ? "inline-flex flex-row flex-wrap items-center gap-2" : "inline-flex flex-col gap-2",
+    local.inline ? "inline-flex flex-row flex-wrap items-center gap-x-2 gap-y-1" : "inline-flex flex-col gap-2",
     local.class,
   );
 

package/src/components/layout/FormTable.tsx

@@ -11,7 +11,7 @@ export interface FormTableItemProps extends JSX.TdHTMLAttributes<HTMLTableCellEl
 
 const FormTableRow: ParentComponent<JSX.HTMLAttributes<HTMLTableRowElement>> = (props) => {
   const [local, rest] = splitProps(props, ["children", "class"]);
-  return <tr class={twMerge("[&>*:last-child]:pr-0 last:[&>*]:pb-0", local.class)} {...rest}>{local.children}</tr>;
+  return <tr class={twMerge("[&>td:last-child]:pr-0 [&:last-child>*]:pb-0", local.class)} {...rest}>{local.children}</tr>;
 };
 
 const FormTableItem: ParentComponent<FormTableItemProps> = (props) => {
@@ -26,9 +26,9 @@ const FormTableItem: ParentComponent<FormTableItemProps> = (props) => {
   return (
     <>
       <Show when={local.label}>
-        <th class="w-0 whitespace-nowrap pb-1 pl-1 pr-1.5 text-right align-middle">{local.label}</th>
+        <th class="w-0 whitespace-nowrap pb-1 pr-2 text-right align-middle">{local.label}</th>
       </Show>
-      <td class={twMerge("pb-1 pr-1.5 align-middle", local.class)} colspan={effectiveColspan()} {...rest}>
+      <td class={twMerge("pb-1 pr-2 align-middle", local.class)} colspan={effectiveColspan()} {...rest}>
         {local.children}
       </td>
     </>

package/src/components/layout/sidebar/Sidebar.tsx

@@ -216,7 +216,6 @@ const MenuContext = createContext<MenuContextValue>();
  */
 const SidebarMenu: Component<SidebarMenuProps> = (props) => {
   const [local, rest] = splitProps(props, ["menus", "class"]);
-  const i18n = useI18n();
 
   const location = useLocation();
 
@@ -252,9 +251,9 @@ const SidebarMenu: Component<SidebarMenuProps> = (props) => {
   return (
     <MenuContext.Provider value={{ initialOpenItems }}>
       <div {...rest} data-sidebar-menu class={getClassName()}>
-        <div class={clsx("px-4 py-2 text-xs font-bold", text.muted, "uppercase tracking-wider")}>{i18n.t("sidebarMenu.menu")}</div>
+        <div class={clsx("px-3.5 py-1 text-sm font-bold", text.muted, "uppercase tracking-wider")}>MENU</div>
         <List inset>
-          <For each={local.menus}>{(menu) => <MenuItem menu={menu} size="lg" />}</For>
+          <For each={local.menus}>{(menu) => <MenuItem menu={menu} />}</For>
         </List>
       </div>
     </MenuContext.Provider>

package/src/components/layout/topbar/Topbar.tsx

@@ -133,8 +133,8 @@ const TopbarInner: ParentComponent<TopbarProps> = (props) => {
   return (
     <header {...rest} data-topbar class={getClassName()}>
       <Show when={sidebarContext}>
-        <Button variant="ghost" onClick={handleToggle} class="p-2" aria-label={i18n.t("topbar.toggleSidebar")}>
-          <Icon icon={IconMenu2} size="1.5em" />
+        <Button variant="ghost" onClick={handleToggle} aria-label={i18n.t("topbar.toggleSidebar")}>
+          <Icon icon={IconMenu2} />
         </Button>
       </Show>
       {local.children}

package/src/hooks/createControllableStore.ts

@@ -39,10 +39,14 @@ export function createControllableStore<TValue extends object>(options: {
 
   // Wrap setter with a function wrapper to add onChange notification
   const wrappedSet = ((...args: any[]) => {
-    const before = obj.clone(unwrap(store));
-    (rawSet as any)(...args);
-    if (!obj.equal(before, unwrap(store))) {
-      options.onChange()?.(obj.clone(unwrap(store)));
+    if (options.onChange() != null) {
+      const before = obj.clone(unwrap(store));
+      (rawSet as any)(...args);
+      if (!obj.equal(before, unwrap(store))) {
+        options.onChange()!(obj.clone(unwrap(store)));
+      }
+    } else {
+      (rawSet as any)(...args);
     }
   }) as SetStoreFunction<TValue>;
 

package/src/hooks/useLocalStorage.ts

@@ -1,4 +1,5 @@
 import { type Accessor, createSignal } from "solid-js";
+import { json } from "@simplysm/core-common";
 import { useConfig } from "../providers/ConfigContext";
 
 type StorageSetter<TValue> = (
@@ -43,7 +44,7 @@ export function useLocalStorage<TValue>(
   try {
     const item = localStorage.getItem(prefixedKey);
     if (item !== null) {
-      storedValue = JSON.parse(item) as TValue;
+      storedValue = json.parse<TValue>(item);
     }
   } catch {
     // Use initial value on JSON parse failure
@@ -67,7 +68,7 @@ export function useLocalStorage<TValue>(
     if (resolved === undefined) {
       localStorage.removeItem(prefixedKey);
     } else {
-      localStorage.setItem(prefixedKey, JSON.stringify(resolved));
+      localStorage.setItem(prefixedKey, json.stringify(resolved));
     }
 
     return resolved;

package/src/hooks/useSyncConfig.ts

@@ -1,4 +1,5 @@
 import { type Accessor, type Setter, createEffect, createSignal, untrack } from "solid-js";
+import { json } from "@simplysm/core-common";
 import { useConfig } from "../providers/ConfigContext";
 import { useSyncStorage } from "../providers/SyncStorageProvider";
 
@@ -49,7 +50,7 @@ export function useSyncConfig<TValue>(
         try {
           const stored = localStorage.getItem(prefixedKey);
           if (stored !== null && writeVersion === versionBefore) {
-            setValue(() => JSON.parse(stored) as TValue);
+            setValue(() => json.parse<TValue>(stored));
           }
         } catch {
           // Ignore parse errors, keep default value
@@ -62,14 +63,14 @@ export function useSyncConfig<TValue>(
       try {
         const stored = await currentAdapter.getItem(prefixedKey);
         if (stored !== null && writeVersion === versionBefore) {
-          setValue(() => JSON.parse(stored) as TValue);
+          setValue(() => json.parse<TValue>(stored));
         }
       } catch {
         // Fall back to localStorage on error
         try {
           const stored = localStorage.getItem(prefixedKey);
           if (stored !== null && writeVersion === versionBefore) {
-            setValue(() => JSON.parse(stored) as TValue);
+            setValue(() => json.parse<TValue>(stored));
           }
         } catch {
           // Ignore parse errors
@@ -84,7 +85,7 @@ export function useSyncConfig<TValue>(
   createEffect(() => {
     if (!ready()) return; // Don't save until storage has been read
     const currentValue = value();
-    const serialized = JSON.stringify(currentValue);
+    const serialized = json.stringify(currentValue);
 
     // Read adapter untracked to avoid re-running save effect when adapter changes
     const currentAdapter = untrack(() => syncStorageCtx?.adapter());

package/src/providers/i18n/locales/en.ts

@@ -83,6 +83,8 @@ export default {
   },
   permissionTable: {
     permissionItem: "Permission Item",
+    use: "Use",
+    edit: "Edit",
   },
   crudSheet: {
     save: "Save",
@@ -180,9 +182,6 @@ export default {
   numpad: {
     enter: "ENT",
   },
-  sidebarMenu: {
-    menu: "MENU",
-  },
   validation: {
     required: "This is a required field",
     requiredField: "Required field",

package/src/providers/i18n/locales/ko.ts

@@ -83,6 +83,8 @@ export default {
   },
   permissionTable: {
     permissionItem: "권한 항목",
+    use: "사용",
+    edit: "편집",
   },
   crudSheet: {
     save: "저장",
@@ -180,9 +182,6 @@ export default {
   numpad: {
     enter: "입력",
   },
-  sidebarMenu: {
-    menu: "메뉴",
-  },
   validation: {
     required: "필수 입력 항목입니다",
     requiredField: "필수 항목",

package/src/providers/shared-data/SharedDataProvider.tsx

@@ -302,7 +302,6 @@ export function SharedDataProvider(props: { children: JSX.Element }): JSX.Elemen
       const entry = createSharedDataEntry(name, def, client);
       entries.set(name, entry);
       accessors[name] = entry;
-      void entry.initialize();
     }
   }
 

package/tests/components/features/crud-detail/CrudDetail.spec.tsx

@@ -5,6 +5,7 @@ import { CrudDetailTools } from "../../../../src/components/features/crud-detail
 import { CrudDetailBefore } from "../../../../src/components/features/crud-detail/CrudDetailBefore";
 import { CrudDetailAfter } from "../../../../src/components/features/crud-detail/CrudDetailAfter";
 import { CrudDetail } from "../../../../src/components/features/crud-detail/CrudDetail";
+import { Dialog } from "../../../../src/components/disclosure/Dialog";
 import { ConfigContext, ConfigProvider } from "../../../../src/providers/ConfigContext";
 import { NotificationProvider } from "../../../../src/components/feedback/notification/NotificationProvider";
 import { Topbar } from "../../../../src/components/layout/topbar/Topbar";
@@ -474,3 +475,51 @@ describe("CrudDetail button layout by mode", () => {
     expect(container.textContent).toContain("커스텀도구");
   });
 });
+
+describe("CrudDetail dialog mode layout", () => {
+  beforeEach(() => {
+    localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
+  });
+
+  afterEach(() => {
+    localStorage.removeItem("test.i18n-locale");
+  });
+
+  it("bottom bar's direct parent should not have gap-2 class", async () => {
+    render(() => (
+      <ConfigProvider clientName="test"><I18nProvider>
+        <TestWrapper>
+        <Dialog open={true}>
+          <Dialog.Header>Test</Dialog.Header>
+          <CrudDetail<TestData>
+            load={() =>
+              Promise.resolve({
+                data: { id: 1, name: "홍길동" },
+                info: { isNew: false, isDeleted: false },
+              })
+            }
+            submit={() => Promise.resolve(true)}
+            close={() => {}}
+          >
+            {(ctx) => <div>{ctx.data.name}</div>}
+          </CrudDetail>
+        </Dialog>
+      </TestWrapper>
+      </I18nProvider></ConfigProvider>
+    ));
+
+    await new Promise((r) => setTimeout(r, 100));
+
+    // Find the bottom bar via Confirm button
+    const confirmBtn = Array.from(document.querySelectorAll("button")).find(
+      (btn) => btn.textContent.includes("Confirm"),
+    );
+    expect(confirmBtn).toBeTruthy();
+
+    const bottomBar = confirmBtn!.closest(".border-t");
+    expect(bottomBar).toBeTruthy();
+
+    // Bottom bar's direct parent should NOT have gap-2 class
+    expect(bottomBar!.parentElement!.classList.contains("gap-2")).toBe(false);
+  });
+});