@rogieking/figui3 4.1.3 → 4.2.0

package/components.css

@@ -1036,7 +1036,6 @@ fig-tab,
     }
   }
 
-  &:has(:checked),
   &[selected]:not([selected="false"]) {
     background-color: var(--figma-color-bg-secondary);
     font-weight: var(--body-medium-strong-fontWeight);
@@ -1046,22 +1045,13 @@ fig-tab,
   &:hover {
     background-color: var(--figma-color-bg-secondary);
   }
-
-  & [type="radio"] {
-    position: absolute;
-    inset: 0;
-    border-radius: 0;
-    opacity: 0;
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-  }
 }
 
 fig-tabs,
 .tabs {
   display: flex;
-  gap: var(--spacer-2);
+  gap: var(--spacer-1);
+  padding: var(--spacer-1) var(--spacer-2);
 }
 
 fig-tab-content,
@@ -1377,7 +1367,7 @@ fig-input-file {
 
 fig-image {
   --image-size: 2rem;
-  --fit: cover;
+  --fit: contain;
   --image-width: var(--image-size);
   --image-height: var(--image-size);
   --aspect-ratio: 1 / 1;
@@ -1990,52 +1980,52 @@ input[type="checkbox"].switch {
     transition: var(--input-transition);
     box-shadow: var(--handle-shadow);
   }
-}
-
-input[type="checkbox"].switch[indeterminate="true"]:after {
-  width: 0.625rem;
-  height: 0.125rem;
-  transform: none;
-}
 
-input[type="checkbox"].switch[indeterminate="true"],
-input[type="checkbox"].switch:checked {
-  background-color: var(--figma-color-bg-brand);
-}
+  &[indeterminate="true"]:after {
+    width: 0.625rem;
+    height: 0.125rem;
+    transform: none;
+  }
 
-input[type="checkbox"].switch:checked:after {
-  transform: translate(
-    calc(
-      (var(--width) - var(--knob-width)) * 0.5 +
-        (var(--height) - var(--knob-height)) * -0.5
-    )
-  );
-}
+  &[indeterminate="true"],
+  &:checked {
+    background-color: var(--figma-color-bg-brand);
+  }
 
-input[type="checkbox"].switch:disabled {
-  background-color: transparent;
-  cursor: not-allowed;
-  &:after {
-    background-color: var(--figma-color-icon-disabled);
-    box-shadow: none;
+  &:checked:after {
+    transform: translate(
+      calc(
+        (var(--width) - var(--knob-width)) * 0.5 +
+          (var(--height) - var(--knob-height)) * -0.5
+      )
+    );
   }
 
-  &:checked,
-  &[indeterminate="true"] {
-    background-color: var(--figma-color-bg-disabled);
-    box-shadow: none;
+  &:disabled {
+    background-color: transparent;
+    cursor: not-allowed;
     &:after {
-      background-color: var(--figma-color-bg);
+      background-color: var(--figma-color-icon-disabled);
+      box-shadow: none;
+    }
+
+    &:checked,
+    &[indeterminate="true"] {
+      background-color: var(--figma-color-bg-disabled);
+      box-shadow: none;
+      &:after {
+        background-color: var(--figma-color-bg);
+      }
     }
   }
-}
 
-input[type="checkbox"].switch:focus {
-  outline: 0;
-}
+  &:focus {
+    outline: 0;
+  }
 
-input[type="checkbox"].switch:checked:focus {
-  outline: 0;
+  &:checked:focus {
+    outline: 0;
+  }
 }
 
 /* Checkbox */
@@ -2143,6 +2133,22 @@ input[type="radio"] {
     }
   }
 
+  &:disabled {
+    background-color: transparent;
+    cursor: not-allowed;
+    &:after {
+      background-color: var(--figma-color-icon-disabled);
+      box-shadow: none;
+    }
+    &:checked {
+      background-color: var(--figma-color-bg-disabled);
+      box-shadow: none;
+      &:after {
+        background-color: var(--figma-color-icon-disabled);
+      }
+    }
+  }
+
   &::after {
     content: "";
     width: 0.375rem;
@@ -2242,7 +2248,6 @@ details {
 }
 
 /* Sliders */
-.fig-slider,
 fig-slider {
   --slider-field-height: 1.5rem;
   --slider-height: 1rem;
@@ -2274,17 +2279,28 @@ fig-slider {
   --slider-transition: none;
   --handle-transition: var(--slider-transition);
 
-  display: inline-flex;
+  display: flex;
   align-items: center;
   position: relative;
+  min-width: 0;
   height: var(--slider-field-height);
   transition: var(--slider-transition);
 
+  & .slider {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  & fig-input-number {
+    flex: 0 0 3rem;
+  }
+
   .fig-slider-input-container {
     height: var(--slider-height);
     position: relative;
     display: block;
-    width: 100%;
+    flex: 1 1 0;
+    min-width: 0;
     transition: var(--slider-transition);
     background: var(--figma-color-bg-secondary);
     border-radius: var(--slider-border-radius);
@@ -2356,31 +2372,36 @@ fig-slider {
     }
   }
 
-  /* Chromium */
   input[type="range"] {
     height: var(--slider-height);
     appearance: none;
     -webkit-appearance: none;
+    -moz-appearance: none;
     border-radius: var(--slider-border-radius);
     display: block;
     width: 100%;
+    min-width: 0;
     background-color: transparent;
     transition: var(--slider-transition);
     position: relative;
 
-    &:active::-webkit-slider-thumb {
-      cursor: grabbing;
-      cursor: -webkit-grabbing;
-    }
-
     &:focus {
       outline: none;
     }
 
+    &:disabled {
+      cursor: not-allowed;
+    }
+
+    /* Chromium thumb */
+    &:active::-webkit-slider-thumb {
+      cursor: grabbing;
+    }
+
     &::-webkit-slider-thumb {
       appearance: none;
-      background: transparent;
       -webkit-appearance: none;
+      background: transparent;
       color-scheme: inherit;
       transition: var(--handle-transition);
       border-radius: var(--slider-thumb-radius);
@@ -2391,7 +2412,6 @@ fig-slider {
       );
       outline: var(--slider-thumb-outline);
       outline-offset: var(--slider-thumb-outline-offset);
-
       aspect-ratio: 1;
       border: none;
       position: relative;
@@ -2401,22 +2421,8 @@ fig-slider {
       opacity: var(--slider-thumb-opacity);
     }
 
-    &:disabled {
-      cursor: not-allowed;
-
-      &::-webkit-slider-runnable-track {
-        color-scheme: inherit;
-        background: linear-gradient(
-          to right,
-          var(--figma-color-bg-secondary) 0%,
-          var(--figma-color-bg-secondary) var(--slider-percent),
-          var(--figma-color-bg) var(--slider-percent)
-        );
-      }
-
-      &::-webkit-slider-thumb {
-        box-shadow: inset 0 0 0 1rem var(--figma-color-bg-disabled);
-      }
+    &:disabled::-webkit-slider-thumb {
+      box-shadow: inset 0 0 0 1rem var(--figma-color-bg-disabled);
     }
 
     &::-webkit-slider-runnable-track {
@@ -2427,6 +2433,15 @@ fig-slider {
       border-radius: var(--slider-border-radius);
     }
 
+    &:disabled::-webkit-slider-runnable-track {
+      background: linear-gradient(
+        to right,
+        var(--figma-color-bg-secondary) 0%,
+        var(--figma-color-bg-secondary) var(--slider-percent),
+        var(--figma-color-bg) var(--slider-percent)
+      );
+    }
+
     &.hue::-webkit-slider-runnable-track {
       background: var(--bg-hue);
     }
@@ -2436,34 +2451,18 @@ fig-slider {
         linear-gradient(to right, transparent, var(--color)),
         var(--checkerboard);
     }
-  }
-
-  /* Firefox */
-  input[type="range"] {
-    height: var(--slider-height);
-    appearance: none;
-    -moz-appearance: none;
-    border-radius: var(--slider-border-radius);
-    display: block;
-    width: 100%;
-    background-color: transparent;
-    transition: var(--slider-transition);
-    position: relative;
-
-    &:focus {
-      outline: none;
-    }
 
+    /* Firefox thumb */
     &:active::-moz-range-thumb {
       cursor: grabbing;
-      cursor: -webkit-grabbing;
     }
 
     &::-moz-range-thumb {
-      color-scheme: inherit;
       appearance: none;
       -moz-appearance: none;
       background: transparent;
+      color-scheme: inherit;
+      transition: var(--handle-transition);
       border-radius: var(--slider-thumb-radius);
       height: var(--slider-thumb-height);
       width: var(--slider-thumb-width);
@@ -2475,26 +2474,11 @@ fig-slider {
       z-index: 1;
       cursor: default;
       box-shadow: var(--slider-handle-shadow);
-      transition: var(--handle-transition);
       opacity: var(--slider-thumb-opacity);
     }
 
-    &:disabled {
-      cursor: not-allowed;
-
-      &::-moz-range-track {
-        color-scheme: inherit;
-        background: linear-gradient(
-          to right,
-          var(--figma-color-bg-secondary) 0%,
-          var(--figma-color-bg-secondary) var(--slider-percent),
-          var(--figma-color-bg) var(--slider-percent)
-        );
-      }
-
-      &::-moz-range-thumb {
-        box-shadow: inset 0 0 0 1rem var(--figma-color-bg-disabled);
-      }
+    &:disabled::-moz-range-thumb {
+      box-shadow: inset 0 0 0 1rem var(--figma-color-bg-disabled);
     }
 
     &::-moz-range-track {
@@ -2504,6 +2488,15 @@ fig-slider {
       transition: var(--slider-transition);
     }
 
+    &:disabled::-moz-range-track {
+      background: linear-gradient(
+        to right,
+        var(--figma-color-bg-secondary) 0%,
+        var(--figma-color-bg-secondary) var(--slider-percent),
+        var(--figma-color-bg) var(--slider-percent)
+      );
+    }
+
     &.hue::-moz-range-track {
       background: var(--bg-hue);
     }
@@ -2584,7 +2577,7 @@ fig-slider {
     }
     fig-input-text,
     fig-input-number {
-      flex-basis: 5rem;
+      flex-basis: 3rem;
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
       border-left: 1px solid var(--figma-color-bg);
@@ -2617,7 +2610,8 @@ dialog,
 
   box-shadow: var(--figma-elevation-500-modal-window);
 
-  footer {
+  footer,
+  fig-footer {
     display: flex;
     justify-content: flex-end;
     padding: var(--spacer-2);
@@ -2693,6 +2687,19 @@ dialog,
 dialog[is="fig-dialog"] {
   --z-index: 999999;
   z-index: var(--z-index);
+
+  &[resizable]:not([resizable="false"]) {
+    resize: both;
+    overflow: auto;
+    min-width: 12rem;
+    min-height: 6rem;
+  }
+  & > fig-header[dialog-header]:not([borderless]):not([borderless="false"]) {
+    margin-bottom: var(--spacer-2-5);
+  }
+  & > fig-footer:not([borderless]):not([borderless="false"]) {
+    margin-top: var(--spacer-2-5);
+  }
 }
 
 dialog[is="fig-popup"] {
@@ -2948,7 +2955,6 @@ fig-input-fill,
 fig-checkbox,
 fig-radio,
 fig-tab,
-fig-tabs,
 fig-segmented-control,
 fig-input-palette {
   display: inline-flex;
@@ -3013,7 +3019,7 @@ fig-header {
 
 fig-group {
   display: block;
-  padding-bottom: var(--spacer-2-5);
+  margin-bottom: var(--spacer-2-5);
 
   /* Sibling groups  */
   & + fig-group {
@@ -3021,9 +3027,6 @@ fig-group {
     &:not([name]) {
       padding-top: var(--spacer-2-5);
     }
-    &:last-of-type {
-      padding-bottom: 0;
-    }
   }
 
   & > fig-header {
@@ -3048,7 +3051,7 @@ fig-group {
 
   &[collapsible]:not([open]):not([open="true"]),
   &[collapsible][open="false"] {
-    padding-bottom: 0;
+    margin-bottom: 0;
     fig-header {
       color: var(--figma-color-text-secondary);
       &:hover {
@@ -3442,39 +3445,27 @@ fig-input-palette {
   }
 }
 
-fig-slider {
-  display: flex;
-
-  & .slider {
-    flex-grow: 1;
-  }
-
-  & fig-input-number {
-    flex-basis: 5rem;
-  }
-
-  fig-field[direction="horizontal"] & {
-    flex: 1;
-    min-width: 0;
-  }
-}
-
-fig-field,
-.fig-field {
-  --field-label-width: 4rem;
-  display: flex;
-  padding: var(--spacer-1) var(--spacer-3);
+fig-field {
+  --fig-field-gap: var(--spacer-2);
+  --fig-field-left-padding: var(--spacer-3);
+  --fig-field-right-padding: var(--spacer-3);
+  --fig-field-top-padding: var(--spacer-1);
+  --fig-field-bottom-padding: var(--spacer-1);
+  --fig-field-label-ratio: 1fr;
+  --fig-field-input-ratio: 2fr;
+  display: grid;
+  grid-template-columns: var(--fig-field-left-padding) 1fr var(
+      --fig-field-right-padding
+    );
+  grid-template-rows: auto auto;
+  grid-template-areas:
+    "chevron label pad"
+    ".       input pad";
   margin: 0;
-  flex-direction: column;
+  padding: var(--fig-field-top-padding) 0 var(--fig-field-bottom-padding) 0;
   gap: 0;
   align-items: start;
 
-  &[direction="horizontal"] {
-    flex-direction: row;
-    align-items: center;
-    gap: var(--spacer-2);
-  }
-
   & > [full] {
     flex: 1 1 auto;
   }
@@ -3485,15 +3476,17 @@ fig-field,
   }
 
   & > label {
-    flex: 0;
+    grid-area: label;
+    display: block;
     padding: var(--spacer-1) 0;
-    min-height: calc(1rem + var(--spacer-1) * 2);
-    display: flex;
-    align-items: center;
-    width: 100%;
+    line-height: 1rem;
     user-select: none;
   }
 
+  & > *:not(.fig-field-chevron):not(label) {
+    grid-area: input;
+  }
+
   & > .fig-field-chevron {
     --icon: var(--icon-chevron);
     --size: 1rem;
@@ -3502,64 +3495,37 @@ fig-field,
     transition: transform var(--transition-duration)
       var(--transition-timing-function);
     flex-shrink: 0;
-    margin: var(--spacer-1) 0;
-    margin-left: calc(var(--spacer-3) * -1);
-    margin-right: calc(var(--spacer-2) * -1);
+    grid-area: chevron;
+    margin-top: var(--spacer-1);
   }
 
   &:has(> [open]:not([open="false"])) > .fig-field-chevron {
     transform: rotate(0deg);
   }
 
-  &[direction="horizontal"] > label {
-    display: block;
-    width: auto;
-    min-width: var(--field-label-width);
-    max-width: var(--field-label-width);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    padding: 0;
-    line-height: 1.5rem;
-  }
-
   &[direction="horizontal"] {
-    gap: var(--spacer-2);
+    display: grid;
+    grid-template-columns:
+      var(--fig-field-left-padding) minmax(0, var(--fig-field-label-ratio))
+      minmax(0, var(--fig-field-input-ratio)) var(--fig-field-right-padding);
+    grid-template-areas: "chevron label input pad";
+    gap: 0;
     align-items: start;
-    flex-direction: row;
-    &[columns="thirds"] {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: var(--spacer-2);
-
-      & > label {
-        grid-column: 1;
-      }
 
-      & > label ~ * {
-        grid-column: 2 / span 2;
-      }
-
-      &:not(:has(> label)) > * {
-        grid-column: 1 / -1;
-      }
-    }
     &[columns="half"] {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: var(--spacer-2);
-
-      & > label {
-        grid-column: 1;
-      }
-
-      & > label ~ * {
-        grid-column: 2 / span 2;
-      }
-
-      &:not(:has(> label)) > * {
-        grid-column: 1 / -1;
-      }
+      --fig-field-label-ratio: 2fr;
+    }
+    & > label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      padding-right: var(--fig-field-gap);
+      min-width: 0;
+    }
+    /* If the field has no label, set the input ratio to 1fr */
+    &:not(:has(> label)) {
+      --fig-field-input-ratio: 1fr;
+      --fig-field-label-ratio: 0fr;
     }
   }
 }
@@ -3617,14 +3583,18 @@ fig-segmented-control {
 
   & fig-segment {
     flex: 1 1 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    min-width: 0;
+    display: block;
+    text-align: center;
+    line-height: calc(1.5rem - 2px);
     position: relative;
     z-index: 1;
     appearance: none;
     color: var(--figma-color-text-secondary);
     padding: 0 var(--spacer-2);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     transition: none;
 
     &[selected]:not([selected="false"]),
@@ -4547,13 +4517,16 @@ fig-chooser {
 
   display: flex;
   flex-direction: column;
-  gap: var(--fig-chooser-gap);
+  gap: 0;
   overflow: visible auto;
   scrollbar-width: none;
   scroll-snap-type: y mandatory;
 
   > * {
     scroll-snap-align: start;
+    &:not(.fig-chooser-nav-start):not(.fig-chooser-nav-end) {
+      margin-block-end: var(--fig-chooser-gap);
+    }
   }
 
   &[padding="false"] {
@@ -4585,6 +4558,12 @@ fig-chooser {
     fig-image[full] {
       min-width: 3rem;
     }
+    > * {
+      &:not(.fig-chooser-nav-start):not(.fig-chooser-nav-end) {
+        margin-inline-end: var(--fig-chooser-gap);
+        margin-block-end: 0;
+      }
+    }
   }
 
   &[layout="grid"] {

package/fig.js

@@ -1110,6 +1110,8 @@ customElements.define("fig-truncate", FigTruncate);
  * @attr {boolean} drag - Whether the dialog is draggable
  * @attr {string} handle - CSS selector for the drag handle element (e.g., "fig-header"). If not specified, the entire dialog is draggable when drag is enabled.
  * @attr {string} position - Position of the dialog (e.g., "bottom right", "top left", "center center")
+ * @attr {string} title - Title text for the auto-generated header. If no fig-header[dialog-header] exists, one is prepended with this title and a close button.
+ * @attr {boolean} resizable - Whether the dialog can be manually resized by the user (default: false)
  */
 class FigDialog extends HTMLDialogElement {
   #isDragging = false;
@@ -1140,6 +1142,8 @@ class FigDialog extends HTMLDialogElement {
     this.drag =
       this.hasAttribute("drag") && this.getAttribute("drag") !== "false";
 
+    this.#ensureHeader();
+
     requestAnimationFrame(() => {
       this.#addCloseListeners();
       this.#setupDragListeners();
@@ -1154,6 +1158,29 @@ class FigDialog extends HTMLDialogElement {
     });
   }
 
+  #ensureHeader() {
+    if (this.querySelector("fig-header[dialog-header]")) return;
+    const header = document.createElement("fig-header");
+    header.setAttribute("dialog-header", "");
+    header.setAttribute("data-auto", "");
+    const h3 = document.createElement("h3");
+    h3.textContent = this.getAttribute("title") || "Dialog";
+    const tooltip = document.createElement("fig-tooltip");
+    tooltip.setAttribute("text", "Close");
+    const btn = document.createElement("fig-button");
+    btn.setAttribute("variant", "ghost");
+    btn.setAttribute("icon", "");
+    btn.setAttribute("close-dialog", "");
+    const icon = document.createElement("span");
+    icon.className = "fig-mask-icon";
+    icon.style.setProperty("--icon", "var(--icon-close)");
+    btn.appendChild(icon);
+    tooltip.appendChild(btn);
+    header.appendChild(h3);
+    header.appendChild(tooltip);
+    this.prepend(header);
+  }
+
   #addCloseListeners() {
     this.querySelectorAll("fig-button[close-dialog]").forEach((button) => {
       button.removeEventListener("click", this.#boundClose);
@@ -1370,7 +1397,7 @@ class FigDialog extends HTMLDialogElement {
   }
 
   static get observedAttributes() {
-    return ["modal", "drag", "position", "handle"];
+    return ["modal", "drag", "position", "handle", "title", "resizable"];
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -1391,6 +1418,13 @@ class FigDialog extends HTMLDialogElement {
     if (name === "position" && this.#positionInitialized) {
       this.#applyPosition();
     }
+
+    if (name === "title") {
+      const autoHeader = this.querySelector("fig-header[data-auto] h3");
+      if (autoHeader) {
+        autoHeader.textContent = newValue || "Dialog";
+      }
+    }
   }
 }
 figDefineCustomizedBuiltIn("fig-dialog", FigDialog, { extends: "dialog" });
@@ -7933,6 +7967,7 @@ class FigImage extends HTMLElement {
   }
 
   #handleFileInput(e) {
+    if (e.target !== this.#fileInput) return;
     const file = e.detail?.files?.[0];
 
     if (!file) {
@@ -7968,7 +8003,9 @@ class FigImage extends HTMLElement {
     );
 
     if (this.#fileInput) {
+      this.#fileInput.removeEventListener("change", this.#boundHandleFileInput);
       this.#fileInput.clear();
+      this.#fileInput.addEventListener("change", this.#boundHandleFileInput);
       this.#fileInput.setAttribute("label", "Replace");
     }
   }
@@ -10649,6 +10686,24 @@ class FigGroup extends HTMLElement {
 }
 customElements.define("fig-group", FigGroup);
 
+/**
+ * A presentational header element used inside fig-dialog, fig-group, and other containers.
+ * Styling is handled entirely in CSS; this registration makes it a known custom element.
+ *
+ * @attr {boolean} borderless - Removes the bottom border
+ * @attr {boolean} dialog-header - Marks this as a dialog header (auto-generated by fig-dialog)
+ */
+class FigHeader extends HTMLElement {}
+customElements.define("fig-header", FigHeader);
+
+/**
+ * fig-footer
+ * @element fig-footer
+ * @attr {boolean} borderless - Removes the top border
+ */
+class FigFooter extends HTMLElement {}
+customElements.define("fig-footer", FigFooter);
+
 // FigFillPicker
 /**
  * A comprehensive fill picker component supporting solid colors, gradients, images, video, and webcam.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "4.1.3",
+  "version": "4.2.0",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",