@bigtablet/design-system 2.2.2 → 2.2.3

package/dist/index.css

@@ -1525,46 +1525,13 @@
   width: 100%;
   font-family: "Pretendard", sans-serif;
 }
-.select_label {
-  position: absolute;
-  top: -8px;
-  left: 16px;
-  padding: 0 4px;
-  background: var(--select-surface, #FFFFFF);
-  font-family: "Pretendard", sans-serif;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  letter-spacing: 0.32px;
-  color: #121212;
-  white-space: nowrap;
-  pointer-events: none;
-}
-.select_control {
-  width: 100%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  cursor: pointer;
-  color: #121212;
-  background: var(--select-surface, #FFFFFF);
+.select_fieldset {
+  padding: 0;
+  margin: 0;
+  min-inline-size: 0;
   border-radius: 12px;
-  transition:
-    border-color 0.2s ease-in-out,
-    box-shadow 0.2s ease-in-out,
-    background 0.2s ease-in-out;
-  font-size: 15px;
-  font-weight: 400;
-  line-height: 22.5px;
-  letter-spacing: 0px;
-}
-.select_control:disabled,
-.select_control.is_disabled {
-  cursor: not-allowed;
-  opacity: 0.38;
-  background: #F4F4F4;
-  color: #888888;
+  background-color: #FFFFFF;
+  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
 }
 .select_variant_outline {
   border: 1px solid #E5E5E5;
@@ -1584,7 +1551,7 @@
   background: rgb(251.7, 251.7, 251.7);
 }
 .select_variant_filled.is_open {
-  background: var(--select-surface, #FFFFFF);
+  background: #FFFFFF;
   border-color: #121212;
   box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.15);
 }
@@ -1596,28 +1563,75 @@
   background: rgba(0, 0, 0, 0.05);
 }
 .select_variant_ghost.is_open {
-  background: var(--select-surface, #FFFFFF);
+  background: #FFFFFF;
   border-color: #121212;
   box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.15);
 }
+.select_fieldset.is_disabled {
+  background-color: #F4F4F4;
+}
 .select_size_sm {
   min-height: 40px;
+}
+.select_size_md {
+  min-height: 52px;
+}
+.select_size_lg {
+  min-height: 52px;
+}
+.select_label {
+  margin-inline-start: 12px;
+  padding: 0 4px;
+  color: #121212;
+  transition: color 0.2s ease-in-out;
+}
+.select_label > label {
+  display: block;
+  font-family: "Pretendard", sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0.32px;
+  color: inherit;
+  pointer-events: none;
+  cursor: default;
+}
+.select_fieldset.is_disabled .select_label {
+  color: rgba(26, 26, 26, 0.38);
+}
+.select_control {
+  width: 100%;
+  min-height: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  color: #121212;
+}
+.select_control:disabled,
+.select_control.is_disabled {
+  cursor: not-allowed;
+  opacity: 0.38;
+  color: #888888;
+}
+.select_size_sm .select_control {
   padding: 8px 16px;
   font-size: 12px;
   font-weight: 400;
   line-height: 16px;
   letter-spacing: 0px;
 }
-.select_size_md {
-  min-height: 52px;
+.select_size_md .select_control {
   padding: 12px 20px;
   font-size: 15px;
   font-weight: 400;
   line-height: 22.5px;
   letter-spacing: 0px;
 }
-.select_size_lg {
-  min-height: 52px;
+.select_size_lg .select_control {
   padding: 16px 24px;
   font-size: 16px;
   font-weight: 400;
@@ -1712,10 +1726,6 @@
   cursor: not-allowed;
   color: #888888;
 }
-.select:has(.select_control:disabled) .select_label,
-.select:has(.select_control.is_disabled) .select_label {
-  color: rgba(26, 26, 26, 0.38);
-}
 
 /* src/ui/spinner/style.scss */
 @keyframes skeleton_loading {

package/dist/index.js

@@ -2157,8 +2157,8 @@ var Select = ({
     setDropUp(spaceBelow < listHeight && spaceAbove > spaceBelow);
   }, [isOpen, options.length]);
   const rootClassName = cn("select", { select_has_label: !!label }, className);
-  const controlClassName = cn(
-    "select_control",
+  const fieldsetClassName = cn(
+    "select_fieldset",
     `select_variant_${variant}`,
     `select_size_${size}`,
     { is_open: isOpen, is_disabled: disabled }
@@ -2171,33 +2171,35 @@ var Select = ({
       className: rootClassName,
       style: fullWidth ? { width: "100%" } : void 0,
       children: [
-        label && /* @__PURE__ */ jsx("label", { htmlFor: selectId, className: "select_label", children: label }),
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            ref: controlRef,
-            id: selectId,
-            type: "button",
-            className: controlClassName,
-            "aria-haspopup": "listbox",
-            "aria-expanded": isOpen,
-            "aria-controls": `${selectId}_listbox`,
-            onClick: () => !disabled && setIsOpen((o) => !o),
-            onKeyDown,
-            disabled,
-            children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: currentOption ? "select_value" : "select_placeholder",
-                  style: textAlign === "left" ? { textAlign: "start" } : void 0,
-                  children: currentOption ? currentOption.label : placeholder
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: "select_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDown, { size: 16 }) })
-            ]
-          }
-        ),
+        /* @__PURE__ */ jsxs("fieldset", { className: fieldsetClassName, children: [
+          label && /* @__PURE__ */ jsx("legend", { className: "select_label", children: /* @__PURE__ */ jsx("label", { htmlFor: selectId, children: label }) }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ref: controlRef,
+              id: selectId,
+              type: "button",
+              className: cn("select_control", { is_disabled: disabled }),
+              "aria-haspopup": "listbox",
+              "aria-expanded": isOpen,
+              "aria-controls": `${selectId}_listbox`,
+              onClick: () => !disabled && setIsOpen((o) => !o),
+              onKeyDown,
+              disabled,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: currentOption ? "select_value" : "select_placeholder",
+                    style: textAlign === "left" ? { textAlign: "start" } : void 0,
+                    children: currentOption ? currentOption.label : placeholder
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "select_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDown, { size: 16 }) })
+              ]
+            }
+          )
+        ] }),
         isOpen && /* @__PURE__ */ jsx("div", { id: `${selectId}_listbox`, role: "listbox", className: listClassName, children: options.map((opt, i) => {
           const selected = currentValue === opt.value;
           const active = i === activeIndex;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bigtablet/design-system",
-	"version": "2.2.2",
+	"version": "2.2.3",
 	"description": "Bigtablet Design System UI Components",
 	"type": "module",
 	"types": "dist/index.d.ts",