@rogieking/figui3 2.1.7 → 2.1.8

package/components.css

@@ -2434,6 +2434,7 @@ fig-slider {
 
 fig-field,
 .fig-field {
+  --field-label-width: 4rem;
   display: flex;
   padding: var(--spacer-1) var(--spacer-3);
   margin: 0;
@@ -2441,6 +2442,13 @@ fig-field,
   gap: 0;
   align-items: start;
 
+  &[direction="row"],
+  &[direction="horizontal"] {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacer-2);
+  }
+
   & > [full] {
     flex: 1;
   }
@@ -2455,6 +2463,12 @@ fig-field,
     width: 100%;
   }
 
+  &[direction="row"] > label,
+  &[direction="horizontal"] > label {
+    width: auto;
+    min-width: var(--field-label-width);
+  }
+
   &[direction="horizontal"] {
     gap: var(--spacer-2);
     align-items: start;

package/fig.js

@@ -2292,7 +2292,7 @@ class FigField extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["direction", "label"];
+    return ["label"];
   }
 
   connectedCallback() {
@@ -2307,19 +2307,11 @@ class FigField extends HTMLElement {
         this.input.setAttribute("id", inputId);
         this.label.setAttribute("for", inputId);
       }
-      // Apply direction
-      const direction = this.getAttribute("direction");
-      if (direction) {
-        this.style.flexDirection = direction === "row" ? "row" : "column";
-      }
     });
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
     switch (name) {
-      case "direction":
-        this.style.flexDirection = newValue === "row" ? "row" : "column";
-        break;
       case "label":
         if (this.label) {
           this.label.textContent = newValue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "module": "index.ts",
   "type": "module",
   "devDependencies": {