@simplysm/solid 13.0.29 → 13.0.30

package/dist/components/form-control/field/TimePicker.js

@@ -2,19 +2,20 @@ import { template as _$template } from "solid-js/web";
 import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
 import { setAttribute as _$setAttribute } from "solid-js/web";
-import { className as _$className } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
 import { insert as _$insert } from "solid-js/web";
-import { memo as _$memo } from "solid-js/web";
 import { spread as _$spread } from "solid-js/web";
 import { mergeProps as _$mergeProps } from "solid-js/web";
-var _tmpl$ = /* @__PURE__ */ _$template(`<input type=time>`), _tmpl$2 = /* @__PURE__ */ _$template(`<div><div data-time-field-content>`), _tmpl$3 = /* @__PURE__ */ _$template(`<div><input type=time>`), _tmpl$4 = /* @__PURE__ */ _$template(`<div>`);
+import { memo as _$memo } from "solid-js/web";
+var _tmpl$ = /* @__PURE__ */ _$template(`<div><input type=time>`), _tmpl$2 = /* @__PURE__ */ _$template(`<div><div data-time-field-content>`), _tmpl$3 = /* @__PURE__ */ _$template(`<div>`);
 import clsx from "clsx";
-import { Show, splitProps } from "solid-js";
+import { createMemo, Show, splitProps } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import { Time } from "@simplysm/core-common";
 import { createControllableSignal } from "../../../hooks/createControllableSignal.js";
-import { fieldBaseClass, fieldSizeClasses, fieldInsetClass, fieldInsetHeightClass, fieldInsetSizeHeightClasses, fieldDisabledClass, fieldInputClass } from "./Field.styles.js";
+import { fieldInputClass, getFieldWrapperClass } from "./Field.styles.js";
+import { Invalid } from "../../form-control/Invalid.js";
 function formatValue(value, unit) {
   if (value == null) return "";
   switch (unit) {
@@ -40,7 +41,7 @@ function parseValue(str, unit) {
   }
 }
 const TimePicker = (props) => {
-  const [local, rest] = splitProps(props, ["value", "onValueChange", "unit", "title", "disabled", "readonly", "size", "inset", "class", "style"]);
+  const [local, rest] = splitProps(props, ["value", "onValueChange", "unit", "title", "disabled", "readonly", "size", "inset", "class", "style", "min", "max", "required", "validate", "touchMode"]);
   const fieldType = () => local.unit ?? "minute";
   const [value, setValue] = createControllableSignal({
     value: () => local.value,
@@ -52,111 +53,142 @@ const TimePicker = (props) => {
     const parsed = parseValue(newValue, fieldType());
     setValue(parsed);
   };
-  const getWrapperClass = (includeCustomClass) => twMerge(fieldBaseClass, local.size && fieldSizeClasses[local.size], local.disabled && fieldDisabledClass, local.inset && fieldInsetClass + " block", local.inset && (local.size ? fieldInsetSizeHeightClasses[local.size] : fieldInsetHeightClass), includeCustomClass && local.class);
+  const getWrapperClass = (includeCustomClass) => getFieldWrapperClass({
+    size: local.size,
+    disabled: local.disabled,
+    inset: local.inset,
+    includeCustomClass: includeCustomClass && local.class
+  });
   const isEditable = () => !local.disabled && !local.readonly;
   const getStep = () => fieldType() === "second" ? "1" : void 0;
-  return _$createComponent(Show, {
-    get when() {
-      return local.inset;
+  const errorMsg = createMemo(() => {
+    var _a;
+    const v = value();
+    if (local.required && v === void 0) return "\uD544\uC218 \uC785\uB825 \uD56D\uBAA9\uC785\uB2C8\uB2E4";
+    if (v !== void 0) {
+      if (local.min !== void 0 && v.tick < local.min.tick) return `${local.min.toFormatString("HH:mm:ss")}\uBCF4\uB2E4 \uD06C\uAC70\uB098 \uAC19\uC544\uC57C \uD569\uB2C8\uB2E4`;
+      if (local.max !== void 0 && v.tick > local.max.tick) return `${local.max.toFormatString("HH:mm:ss")}\uBCF4\uB2E4 \uC791\uAC70\uB098 \uAC19\uC544\uC57C \uD569\uB2C8\uB2E4`;
+    }
+    return (_a = local.validate) == null ? void 0 : _a.call(local, v);
+  });
+  return _$createComponent(Invalid, {
+    get message() {
+      return errorMsg();
     },
-    get fallback() {
-      return (
-        // standalone 모드
-        _$createComponent(Show, {
-          get when() {
-            return isEditable();
-          },
-          get fallback() {
-            return (() => {
-              var _el$6 = _tmpl$4();
-              _$spread(_el$6, _$mergeProps(rest, {
-                "data-time-field": "",
-                get ["class"]() {
-                  return twMerge(getWrapperClass(true), "sd-time-field");
-                },
-                get style() {
-                  return local.style;
-                },
-                get title() {
-                  return local.title;
-                }
-              }), false, true);
-              _$insert(_el$6, () => displayValue() || "\xA0");
-              return _el$6;
-            })();
-          },
-          get children() {
-            var _el$4 = _tmpl$3(), _el$5 = _el$4.firstChild;
-            _$spread(_el$4, _$mergeProps(rest, {
-              "data-time-field": "",
-              get ["class"]() {
-                return getWrapperClass(true);
-              },
-              get style() {
-                return local.style;
-              }
-            }), false, true);
-            _el$5.addEventListener("change", handleChange);
-            _$className(_el$5, fieldInputClass);
-            _$effect((_p$) => {
-              var _v$6 = local.title, _v$7 = getStep();
-              _v$6 !== _p$.e && _$setAttribute(_el$5, "title", _p$.e = _v$6);
-              _v$7 !== _p$.t && _$setAttribute(_el$5, "step", _p$.t = _v$7);
-              return _p$;
-            }, {
-              e: void 0,
-              t: void 0
-            });
-            _$effect(() => _el$5.value = displayValue());
-            return _el$4;
-          }
-        })
-      );
+    get variant() {
+      return local.inset ? "dot" : "border";
+    },
+    get touchMode() {
+      return local.touchMode;
     },
     get children() {
-      var _el$ = _tmpl$2(), _el$2 = _el$.firstChild;
-      _$spread(_el$, _$mergeProps(rest, {
-        "data-time-field": "",
-        get ["class"]() {
-          return twMerge(getWrapperClass(false), "relative", local.class);
-        },
-        get style() {
-          return local.style;
-        }
-      }), false, true);
-      _$insert(_el$2, () => displayValue() || "\xA0");
-      _$insert(_el$, _$createComponent(Show, {
+      return _$createComponent(Show, {
         get when() {
-          return isEditable();
+          return local.inset;
+        },
+        get fallback() {
+          return (
+            // standalone 모드
+            _$createComponent(Show, {
+              get when() {
+                return isEditable();
+              },
+              get fallback() {
+                return (() => {
+                  var _el$7 = _tmpl$3();
+                  _$spread(_el$7, _$mergeProps(rest, {
+                    "data-time-field": "",
+                    get ["class"]() {
+                      return twMerge(getWrapperClass(true), "sd-time-field");
+                    },
+                    get style() {
+                      return local.style;
+                    },
+                    get title() {
+                      return local.title;
+                    }
+                  }), false, true);
+                  _$insert(_el$7, () => displayValue() || "\xA0");
+                  return _el$7;
+                })();
+              },
+              get children() {
+                var _el$5 = _tmpl$(), _el$6 = _el$5.firstChild;
+                _$spread(_el$5, _$mergeProps(rest, {
+                  "data-time-field": "",
+                  get ["class"]() {
+                    return getWrapperClass(true);
+                  },
+                  get style() {
+                    return local.style;
+                  }
+                }), false, true);
+                _el$6.addEventListener("change", handleChange);
+                _$className(_el$6, fieldInputClass);
+                _$effect((_p$) => {
+                  var _v$7 = local.title, _v$8 = getStep();
+                  _v$7 !== _p$.e && _$setAttribute(_el$6, "title", _p$.e = _v$7);
+                  _v$8 !== _p$.t && _$setAttribute(_el$6, "step", _p$.t = _v$8);
+                  return _p$;
+                }, {
+                  e: void 0,
+                  t: void 0
+                });
+                _$effect(() => _el$6.value = displayValue());
+                return _el$5;
+              }
+            })
+          );
         },
         get children() {
-          var _el$3 = _tmpl$();
-          _el$3.addEventListener("change", handleChange);
+          var _el$ = _tmpl$2(), _el$2 = _el$.firstChild;
+          _$spread(_el$, _$mergeProps(rest, {
+            "data-time-field": "",
+            get ["class"]() {
+              return clsx("relative", local.class);
+            },
+            get style() {
+              return local.style;
+            }
+          }), false, true);
+          _$insert(_el$2, () => displayValue() || "\xA0");
+          _$insert(_el$, _$createComponent(Show, {
+            get when() {
+              return isEditable();
+            },
+            get children() {
+              var _el$3 = _tmpl$(), _el$4 = _el$3.firstChild;
+              _el$4.addEventListener("change", handleChange);
+              _$className(_el$4, fieldInputClass);
+              _$effect((_p$) => {
+                var _v$ = twMerge(getWrapperClass(false), "absolute left-0 top-0 size-full"), _v$2 = local.title, _v$3 = getStep();
+                _v$ !== _p$.e && _$className(_el$3, _p$.e = _v$);
+                _v$2 !== _p$.t && _$setAttribute(_el$4, "title", _p$.t = _v$2);
+                _v$3 !== _p$.a && _$setAttribute(_el$4, "step", _p$.a = _v$3);
+                return _p$;
+              }, {
+                e: void 0,
+                t: void 0,
+                a: void 0
+              });
+              _$effect(() => _el$4.value = displayValue());
+              return _el$3;
+            }
+          }), null);
           _$effect((_p$) => {
-            var _v$ = clsx(fieldInputClass, "absolute left-0 top-0 size-full", "px-2 py-1"), _v$2 = local.title, _v$3 = getStep();
-            _v$ !== _p$.e && _$className(_el$3, _p$.e = _v$);
-            _v$2 !== _p$.t && _$setAttribute(_el$3, "title", _p$.t = _v$2);
-            _v$3 !== _p$.a && _$setAttribute(_el$3, "step", _p$.a = _v$3);
+            var _v$4 = getWrapperClass(false), _v$5 = isEditable() ? "hidden" : void 0, _v$6 = local.title;
+            _v$4 !== _p$.e && _$className(_el$2, _p$.e = _v$4);
+            _v$5 !== _p$.t && _$setStyleProperty(_el$2, "visibility", _p$.t = _v$5);
+            _v$6 !== _p$.a && _$setAttribute(_el$2, "title", _p$.a = _v$6);
             return _p$;
           }, {
             e: void 0,
             t: void 0,
             a: void 0
           });
-          _$effect(() => _el$3.value = displayValue());
-          return _el$3;
+          return _el$;
         }
-      }), null);
-      _$effect((_p$) => {
-        var _v$4 = isEditable() ? "hidden" : void 0, _v$5 = local.title;
-        _v$4 !== _p$.e && _$setStyleProperty(_el$2, "visibility", _p$.e = _v$4);
-        _v$5 !== _p$.t && _$setAttribute(_el$2, "title", _p$.t = _v$5);
-        return _p$;
-      }, {
-        e: void 0,
-        t: void 0
       });
-      return _el$;
     }
   });
 };

package/dist/components/form-control/field/TimePicker.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/form-control/field/TimePicker.tsx"],
-  "mappings": "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",
-  "names": ["clsx", "Show", "splitProps", "twMerge", "Time", "createControllableSignal", "fieldBaseClass", "fieldSizeClasses", "fieldInsetClass", "fieldInsetHeightClass", "fieldInsetSizeHeightClasses", "fieldDisabledClass", "fieldInputClass", "formatValue", "value", "unit", "toFormatString", "parseValue", "str", "undefined", "match", "exec", "Number", "TimePicker", "props", "local", "rest", "fieldType", "setValue", "onChange", "onValueChange", "displayValue", "handleChange", "e", "newValue", "currentTarget", "parsed", "getWrapperClass", "includeCustomClass", "size", "disabled", "inset", "class", "isEditable", "readonly", "getStep", "_$createComponent", "when", "fallback", "_el$6", "_tmpl$4", "_$spread", "_$mergeProps", "style", "title", "_$insert", "children", "_el$4", "_tmpl$3", "_el$5", "firstChild", "addEventListener", "_$className", "_$effect", "_p$", "_v$6", "_v$7", "_$setAttribute", "t", "_el$", "_tmpl$2", "_el$2", "_el$3", "_tmpl$", "_v$", "_v$2", "_v$3", "a", "_v$4", "_v$5", "_$setStyleProperty"]
+  "mappings": "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",
+  "names": ["clsx", "createMemo", "Show", "splitProps", "twMerge", "Time", "createControllableSignal", "fieldInputClass", "getFieldWrapperClass", "Invalid", "formatValue", "value", "unit", "toFormatString", "parseValue", "str", "undefined", "match", "exec", "Number", "TimePicker", "props", "local", "rest", "fieldType", "setValue", "onChange", "onValueChange", "displayValue", "handleChange", "e", "newValue", "currentTarget", "parsed", "getWrapperClass", "includeCustomClass", "size", "disabled", "inset", "class", "isEditable", "readonly", "getStep", "errorMsg", "v", "required", "min", "tick", "max", "validate", "_$createComponent", "message", "variant", "touchMode", "children", "when", "fallback", "_el$7", "_tmpl$3", "_$spread", "_$mergeProps", "style", "title", "_$insert", "_el$5", "_tmpl$", "_el$6", "firstChild", "addEventListener", "_$className", "_$effect", "_p$", "_v$7", "_v$8", "_$setAttribute", "t", "_el$", "_tmpl$2", "_el$2", "_el$3", "_el$4", "_v$", "_v$2", "_v$3", "a", "_v$4", "_v$5", "_v$6", "_$setStyleProperty"]
 }

package/dist/components/form-control/select/Select.d.ts

@@ -11,15 +11,9 @@ declare const SelectAction: ParentComponent<SelectActionProps>;
  * 드롭다운 상단 커스텀 영역 서브 컴포넌트
  */
 declare const SelectHeader: ParentComponent;
-/**
- * items prop 방식일 때 아이템 렌더링 템플릿
- *
- * 함수 참조를 저장하기 위해 전역 Map 사용
- */
-interface SelectItemTemplateProps<TValue> {
-    children: (item: TValue, index: number, depth: number) => JSX.Element;
-}
-declare const SelectItemTemplate: <T>(props: SelectItemTemplateProps<T>) => JSX.Element;
+declare const SelectItemTemplate: (props: {
+    children(item: unknown, index: number, depth: number): JSX.Element;
+}) => JSX.Element;
 interface SelectCommonProps {
     /** 비활성화 */
     disabled?: boolean;
@@ -31,6 +25,10 @@ interface SelectCommonProps {
     size?: ComponentSize;
     /** 테두리 없는 스타일 */
     inset?: boolean;
+    /** 커스텀 유효성 검사 함수 */
+    validate?: (value: unknown) => string | undefined;
+    /** touchMode: 포커스 해제 후에만 에러 표시 */
+    touchMode?: boolean;
     /** 커스텀 class */
     class?: string;
     /** 커스텀 style */

package/dist/components/form-control/select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/form-control/select/Select.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/form-control/select/Select.tsx"],"names":[],"mappings":"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"}

package/dist/components/form-control/select/Select.js

@@ -6,12 +6,12 @@ import { effect as _$effect } from "solid-js/web";
 import { className as _$className } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
-import { use as _$use } from "solid-js/web";
 import { insert as _$insert } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
 import { spread as _$spread } from "solid-js/web";
 import { mergeProps as _$mergeProps } from "solid-js/web";
-var _tmpl$ = /* @__PURE__ */ _$template(`<button>`), _tmpl$2 = /* @__PURE__ */ _$template(`<div data-select-header>`), _tmpl$3 = /* @__PURE__ */ _$template(`<span data-select-item-template style=display:none>`), _tmpl$4 = /* @__PURE__ */ _$template(`<span>`), _tmpl$5 = /* @__PURE__ */ _$template(`<div>`), _tmpl$6 = /* @__PURE__ */ _$template(`<div><div role=combobox aria-haspopup=listbox><div></div><div>`);
-import { children, createSignal, For, Show, splitProps } from "solid-js";
+var _tmpl$ = /* @__PURE__ */ _$template(`<button>`), _tmpl$2 = /* @__PURE__ */ _$template(`<div data-select-header>`), _tmpl$3 = /* @__PURE__ */ _$template(`<span>`), _tmpl$4 = /* @__PURE__ */ _$template(`<div>`), _tmpl$5 = /* @__PURE__ */ _$template(`<div><div role=combobox aria-haspopup=listbox><div></div><div>`);
+import { children, createMemo, createSignal, For, Show, splitProps } from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { IconChevronDown } from "@tabler/icons-solidjs";
@@ -24,7 +24,9 @@ import { ripple } from "../../../directives/ripple.js";
 import { splitSlots } from "../../../helpers/splitSlots.js";
 import { borderDefault, textMuted } from "../../../styles/tokens.styles.js";
 import { createControllableSignal } from "../../../hooks/createControllableSignal.js";
+import { createItemTemplate } from "../../../hooks/createItemTemplate.js";
 import { chevronWrapperClass, getTriggerClass } from "../DropdownTrigger.styles.js";
+import { Invalid } from "../Invalid.js";
 void ripple;
 const multiTagClass = clsx("rounded", "bg-base-200 px-1", "dark:bg-base-600");
 const selectedValueClass = clsx("flex-1", "whitespace-nowrap");
@@ -32,17 +34,12 @@ const SelectAction = (props) => {
   const [local, rest] = splitProps(props, ["children", "class"]);
   return (() => {
     var _el$ = _tmpl$();
+    _$use(ripple, _el$, () => true);
     _$spread(_el$, _$mergeProps(rest, {
       "type": "button",
       "data-select-action": "",
       get ["class"]() {
-        return twMerge(clsx("border", borderDefault, "px-1.5", "rounded-r", "font-bold text-primary-500", "hover:bg-base-100 dark:hover:bg-base-700"), local.class);
-      },
-      "onClick": (e) => {
-        e.stopPropagation();
-        if (typeof rest.onClick === "function") {
-          rest.onClick(e);
-        }
+        return twMerge(clsx("border", borderDefault, "px-1.5", "font-bold text-primary-500", "hover:bg-base-100 dark:hover:bg-base-700", "group-focus-within:border-y-primary-400", "last:group-focus-within:border-r-primary-400", "dark:group-focus-within:border-y-primary-400", "dark:last:group-focus-within:border-r-primary-400", "focus:relative focus:z-10 focus:border-primary-400", "dark:focus:border-primary-400"), local.class);
       }
     }), false, true);
     _$insert(_el$, () => local.children);
@@ -54,16 +51,12 @@ const SelectHeader = (props) => (() => {
   _$insert(_el$2, () => props.children);
   return _el$2;
 })();
-const templateFnMap = /* @__PURE__ */ new WeakMap();
-const SelectItemTemplate = (props) => (() => {
-  var _el$3 = _tmpl$3();
-  _$use((el) => {
-    templateFnMap.set(el, props.children);
-  }, _el$3);
-  return _el$3;
-})();
+const {
+  TemplateSlot: SelectItemTemplate,
+  getTemplate: getSelectItemTemplate
+} = createItemTemplate("data-select-item-template");
 const Select = (props) => {
-  const [local, rest] = splitProps(props, ["children", "class", "style", "value", "onValueChange", "multiple", "disabled", "required", "placeholder", "size", "inset", "multiDisplayDirection", "hideSelectAll", "items", "getChildren", "renderValue"]);
+  const [local, rest] = splitProps(props, ["children", "class", "style", "value", "onValueChange", "multiple", "disabled", "required", "placeholder", "size", "inset", "multiDisplayDirection", "hideSelectAll", "items", "getChildren", "renderValue", "validate", "touchMode"]);
   let triggerRef;
   const [open, setOpen] = createSignal(false);
   const [getValue, setInternalValue] = createControllableSignal({
@@ -111,6 +104,12 @@ const Select = (props) => {
       setOpen(true);
     }
   };
+  const errorMsg = createMemo(() => {
+    var _a;
+    const v = getValue();
+    if (local.required && (v === void 0 || v === null || v === "")) return "\uD544\uC218 \uC785\uB825 \uD56D\uBAA9\uC785\uB2C8\uB2E4";
+    return (_a = local.validate) == null ? void 0 : _a.call(local, v);
+  });
   const getTriggerClassName = () => getTriggerClass({
     size: local.size,
     disabled: local.disabled,
@@ -121,9 +120,7 @@ const Select = (props) => {
     const resolved = children(() => innerProps.children);
     const [slots, items] = splitSlots(resolved, ["selectHeader", "selectAction", "selectItemTemplate"]);
     const getItemTemplate = () => {
-      const templateSlots = slots().selectItemTemplate;
-      if (templateSlots.length === 0) return void 0;
-      return templateFnMap.get(templateSlots[0]);
+      return getSelectItemTemplate(slots().selectItemTemplate);
     };
     const renderItems = (itemList, depth) => {
       const itemTemplate = getItemTemplate();
@@ -169,60 +166,63 @@ const Select = (props) => {
       const current = getValue();
       if (current === void 0 || Array.isArray(current) && current.length === 0) {
         return (() => {
-          var _el$4 = _tmpl$4();
-          _$className(_el$4, textMuted);
-          _$insert(_el$4, () => local.placeholder ?? "");
-          return _el$4;
+          var _el$3 = _tmpl$3();
+          _$className(_el$3, textMuted);
+          _$insert(_el$3, () => local.placeholder ?? "");
+          return _el$3;
         })();
       }
       if (local.multiple && Array.isArray(current)) {
         const direction = local.multiDisplayDirection ?? "horizontal";
         return (() => {
-          var _el$5 = _tmpl$5();
-          _$insert(_el$5, _$createComponent(For, {
+          var _el$4 = _tmpl$4();
+          _$insert(_el$4, _$createComponent(For, {
             each: current,
             children: (v) => (() => {
-              var _el$6 = _tmpl$4();
-              _$className(_el$6, multiTagClass);
-              _$insert(_el$6, () => renderValue(v));
-              return _el$6;
+              var _el$5 = _tmpl$3();
+              _$className(_el$5, multiTagClass);
+              _$insert(_el$5, () => renderValue(v));
+              return _el$5;
             })()
           }));
-          _$effect(() => _$className(_el$5, clsx("flex gap-1", direction === "vertical" ? "flex-col" : "flex-wrap")));
-          return _el$5;
+          _$effect(() => _$className(_el$4, clsx("flex gap-1", direction === "vertical" ? "flex-col" : "flex-wrap")));
+          return _el$4;
         })();
       }
       return renderValue(current);
     };
     return (() => {
-      var _el$7 = _tmpl$6(), _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild, _el$0 = _el$9.nextSibling;
-      _$spread(_el$7, _$mergeProps(rest, {
+      var _el$6 = _tmpl$5(), _el$7 = _el$6.firstChild, _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling;
+      _$spread(_el$6, _$mergeProps(rest, {
         "data-select": "",
         get ["class"]() {
-          return local.inset ? "flex" : "inline-flex";
+          return clsx("group", local.inset ? "flex" : "inline-flex");
         }
       }), false, true);
-      _el$8.$$keydown = handleTriggerKeyDown;
-      _el$8.$$click = handleTriggerClick;
-      _$use(ripple, _el$8, () => !local.disabled);
+      _el$7.$$keydown = handleTriggerKeyDown;
+      _el$7.$$click = handleTriggerClick;
+      _$use(ripple, _el$7, () => !local.disabled);
       var _ref$ = triggerRef;
-      typeof _ref$ === "function" ? _$use(_ref$, _el$8) : triggerRef = _el$8;
-      _$className(_el$9, selectedValueClass);
-      _$insert(_el$9, renderSelectedValue);
-      _$className(_el$0, chevronWrapperClass);
-      _$insert(_el$0, _$createComponent(Icon, {
+      typeof _ref$ === "function" ? _$use(_ref$, _el$7) : triggerRef = _el$7;
+      _$className(_el$8, selectedValueClass);
+      _$insert(_el$8, renderSelectedValue);
+      _$className(_el$9, chevronWrapperClass);
+      _$insert(_el$9, _$createComponent(Icon, {
         icon: IconChevronDown,
         size: "1em"
       }));
-      _$insert(_el$7, _$createComponent(Show, {
+      _$insert(_el$6, _$createComponent(Show, {
         get when() {
           return slots().selectAction.length > 0;
         },
         get children() {
-          return slots().selectAction;
+          var _el$0 = _tmpl$4();
+          _$insert(_el$0, () => slots().selectAction);
+          _$effect(() => _$className(_el$0, clsx("contents", "[&>[data-select-action]:last-child]:rounded-r", "[&>[data-select-action]+[data-select-action]]:-ml-px")));
+          return _el$0;
         }
       }), null);
-      _$insert(_el$7, _$createComponent(Dropdown, {
+      _$insert(_el$6, _$createComponent(Dropdown, {
         triggerRef: () => triggerRef,
         get open() {
           return open();
@@ -257,13 +257,13 @@ const Select = (props) => {
         }
       }), null);
       _$effect((_p$) => {
-        var _v$ = open(), _v$2 = local.disabled || void 0, _v$3 = local.required || void 0, _v$4 = local.disabled ? -1 : 0, _v$5 = twMerge(getTriggerClassName(), slots().selectAction.length > 0 && "rounded-r-none border-r-0"), _v$6 = local.style;
-        _v$ !== _p$.e && _$setAttribute(_el$8, "aria-expanded", _p$.e = _v$);
-        _v$2 !== _p$.t && _$setAttribute(_el$8, "aria-disabled", _p$.t = _v$2);
-        _v$3 !== _p$.a && _$setAttribute(_el$8, "aria-required", _p$.a = _v$3);
-        _v$4 !== _p$.o && _$setAttribute(_el$8, "tabindex", _p$.o = _v$4);
-        _v$5 !== _p$.i && _$className(_el$8, _p$.i = _v$5);
-        _p$.n = _$style(_el$8, _v$6, _p$.n);
+        var _v$ = open(), _v$2 = local.disabled || void 0, _v$3 = local.required || void 0, _v$4 = local.disabled ? -1 : 0, _v$5 = twMerge(getTriggerClassName(), slots().selectAction.length > 0 && clsx("rounded-r-none border-r-0", "group-focus-within:border-primary-400 dark:group-focus-within:border-primary-400")), _v$6 = local.style;
+        _v$ !== _p$.e && _$setAttribute(_el$7, "aria-expanded", _p$.e = _v$);
+        _v$2 !== _p$.t && _$setAttribute(_el$7, "aria-disabled", _p$.t = _v$2);
+        _v$3 !== _p$.a && _$setAttribute(_el$7, "aria-required", _p$.a = _v$3);
+        _v$4 !== _p$.o && _$setAttribute(_el$7, "tabindex", _p$.o = _v$4);
+        _v$5 !== _p$.i && _$className(_el$7, _p$.i = _v$5);
+        _p$.n = _$style(_el$7, _v$6, _p$.n);
         return _p$;
       }, {
         e: void 0,
@@ -273,15 +273,26 @@ const Select = (props) => {
         i: void 0,
         n: void 0
       });
-      return _el$7;
+      return _el$6;
     })();
   };
-  return _$createComponent(SelectContext.Provider, {
-    value: contextValue,
+  return _$createComponent(Invalid, {
+    get message() {
+      return errorMsg();
+    },
+    variant: "border",
+    get touchMode() {
+      return local.touchMode;
+    },
     get children() {
-      return _$createComponent(SelectInner, {
+      return _$createComponent(SelectContext.Provider, {
+        value: contextValue,
         get children() {
-          return local.children;
+          return _$createComponent(SelectInner, {
+            get children() {
+              return local.children;
+            }
+          });
         }
       });
     }