@rogieking/figui3 4.1.4 → 4.3.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,
@@ -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 {
@@ -3412,7 +3415,7 @@ fig-input-palette {
   }
   &[open]:not([open="false"]):not([edit="false"]) {
     .palette-colors-expanded {
-      display: flex;
+      display: grid;
     }
   }
   &[add="false"] {
@@ -3423,7 +3426,7 @@ fig-input-palette {
   }
   .palette-colors-expanded {
     display: none;
-    flex-direction: column;
+    grid-template-columns: [input] 1fr [button] 1.5rem;
     overflow: visible;
     border-radius: 0;
     gap: var(--spacer-2);
@@ -3431,6 +3434,16 @@ fig-input-palette {
 
     > fig-input-color {
       min-width: 0;
+      grid-column: input / -1;
+
+      &:has(+ fig-button) {
+        grid-column: input;
+      }
+    }
+
+    > fig-button,
+    > button {
+      grid-column: button;
     }
 
     fig-chit {
@@ -3442,39 +3455,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 +3486,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 +3505,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 +3593,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"]),
@@ -3708,6 +3688,21 @@ fig-segmented-control {
   }
 }
 
+/* Options */
+fig-options {
+  display: flex;
+  width: 100%;
+
+  & > fig-segmented-control {
+    flex: 1;
+    min-width: 0;
+  }
+
+  & > fig-dropdown {
+    flex: 1;
+  }
+}
+
 fig-joystick {
   --size: 100%;
   --aspect-ratio: 1 / 1;
@@ -4547,13 +4542,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 +4583,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

@@ -517,6 +517,8 @@ class FigTooltip extends HTMLElement {
   #boundHandleTouchMove;
   #boundHandleTouchEnd;
   #boundHandleTouchCancel;
+  #boundHandleDialogClose;
+  #parentDialog = null;
   #touchTimeout;
   #isTouching = false;
   #observer = null;
@@ -535,10 +537,15 @@ class FigTooltip extends HTMLElement {
     this.#boundHandleTouchMove = this.#handleTouchMove.bind(this);
     this.#boundHandleTouchEnd = this.#handleTouchEnd.bind(this);
     this.#boundHandleTouchCancel = this.#handleTouchCancel.bind(this);
+    this.#boundHandleDialogClose = () => this.hidePopup();
   }
   connectedCallback() {
     this.setup();
     this.setupEventListeners();
+    this.#parentDialog = this.closest("dialog");
+    if (this.#parentDialog) {
+      this.#parentDialog.addEventListener("close", this.#boundHandleDialogClose);
+    }
   }
 
   disconnectedCallback() {
@@ -549,6 +556,10 @@ class FigTooltip extends HTMLElement {
       true,
     );
     this.#stopObserving();
+    if (this.#parentDialog) {
+      this.#parentDialog.removeEventListener("close", this.#boundHandleDialogClose);
+      this.#parentDialog = null;
+    }
 
     if (this.action === "click") {
       document.body.removeEventListener(
@@ -1110,6 +1121,9 @@ 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)
+ * @attr {string} closedby - Controls how the dialog can be dismissed: "any" (default, Escape + light dismiss), "closerequest" (Escape only), "none" (programmatic only)
  */
 class FigDialog extends HTMLDialogElement {
   #isDragging = false;
@@ -1140,6 +1154,8 @@ class FigDialog extends HTMLDialogElement {
     this.drag =
       this.hasAttribute("drag") && this.getAttribute("drag") !== "false";
 
+    this.#ensureHeader();
+
     requestAnimationFrame(() => {
       this.#addCloseListeners();
       this.#setupDragListeners();
@@ -1154,6 +1170,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 +1409,7 @@ class FigDialog extends HTMLDialogElement {
   }
 
   static get observedAttributes() {
-    return ["modal", "drag", "position", "handle"];
+    return ["modal", "drag", "position", "handle", "title", "resizable", "closedby"];
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -1391,6 +1430,27 @@ class FigDialog extends HTMLDialogElement {
     if (name === "position" && this.#positionInitialized) {
       this.#applyPosition();
     }
+
+    if (name === "modal") {
+      const wasModal = this.modal;
+      this.modal = newValue !== null && newValue !== "false";
+      if (this.open && wasModal !== this.modal) {
+        this.close();
+        if (this.modal) this.showModal();
+        else this.show();
+      }
+    }
+
+    if (name === "closedby") {
+      this.closedby = newValue || "any";
+    }
+
+    if (name === "title") {
+      const autoHeader = this.querySelector("fig-header[data-auto] h3");
+      if (autoHeader) {
+        autoHeader.textContent = newValue || "Dialog";
+      }
+    }
   }
 }
 figDefineCustomizedBuiltIn("fig-dialog", FigDialog, { extends: "dialog" });
@@ -3071,6 +3131,277 @@ class FigSegmentedControl extends HTMLElement {
 }
 customElements.define("fig-segmented-control", FigSegmentedControl);
 
+/* Options */
+/**
+ * A responsive option picker that renders as a segmented control by default,
+ * automatically swapping to a dropdown when any label overflows.
+ * @attr {string} options - Comma-separated list of option labels
+ * @attr {string} value - Currently selected value
+ * @attr {boolean} disabled - Disables the control
+ * @attr {boolean} full - Full-width segmented control
+ * @attr {string} sizing - Segment sizing mode: "equal" (default) or "auto"
+ */
+class FigOptions extends HTMLElement {
+  static get observedAttributes() {
+    return ["options", "value", "disabled", "full", "sizing"];
+  }
+
+  #currentMode = "segments"; // "segments" | "dropdown"
+  #naturalWidth = 0;
+  #resizeObserver = null;
+  #parsedOptions = [];
+  #childControl = null;
+  #suppressEvents = false;
+
+  connectedCallback() {
+    this.#parseOptions();
+    this.#renderSegments();
+    this.#startResizeObserver();
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => this.#checkOverflow());
+    });
+  }
+
+  disconnectedCallback() {
+    this.#resizeObserver?.disconnect();
+    this.#resizeObserver = null;
+  }
+
+  get value() {
+    return this.getAttribute("value") || "";
+  }
+
+  set value(val) {
+    if (val === null || val === undefined) {
+      this.removeAttribute("value");
+    } else {
+      this.setAttribute("value", String(val));
+    }
+  }
+
+  get options() {
+    return this.#parsedOptions.slice();
+  }
+
+  set options(val) {
+    if (Array.isArray(val)) {
+      const hasComma = val.some((v) => String(v).includes(","));
+      const str = hasComma ? JSON.stringify(val) : val.join(",");
+      this.setAttribute("options", str);
+    } else {
+      this.setAttribute("options", String(val || ""));
+    }
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+
+    if (name === "options") {
+      this.#parseOptions();
+      this.#rebuildCurrentControl();
+      return;
+    }
+
+    if (name === "value") {
+      this.#syncValueToChild();
+      return;
+    }
+
+    if (name === "disabled") {
+      this.#syncAttrToChild("disabled");
+      return;
+    }
+
+    if (name === "full") {
+      this.#syncAttrToChild("full");
+      return;
+    }
+
+    if (name === "sizing") {
+      this.#syncAttrToChild("sizing");
+      this.#rebuildCurrentControl();
+    }
+  }
+
+  #parseOptions() {
+    const raw = this.getAttribute("options") || "";
+    if (raw.startsWith("[")) {
+      try { this.#parsedOptions = JSON.parse(raw); return; } catch {}
+    }
+    const delimiter = raw.includes("\n") ? "\n" : ",";
+    this.#parsedOptions = raw.split(delimiter).map((s) => s.trim()).filter(Boolean);
+  }
+
+  #renderSegments() {
+    this.innerHTML = "";
+    if (this.#parsedOptions.length === 0) return;
+
+    const sc = document.createElement("fig-segmented-control");
+    sc.setAttribute("sizing", this.getAttribute("sizing") || "equal");
+
+    if (this.hasAttribute("disabled")) sc.setAttribute("disabled", "");
+    if (this.hasAttribute("full")) sc.setAttribute("full", "");
+
+    const currentValue = this.getAttribute("value");
+    let hasSelection = false;
+
+    for (const opt of this.#parsedOptions) {
+      const seg = document.createElement("fig-segment");
+      seg.setAttribute("value", opt);
+      seg.textContent = opt;
+      if (currentValue === opt) {
+        seg.setAttribute("selected", "true");
+        hasSelection = true;
+      }
+      sc.appendChild(seg);
+    }
+
+    if (currentValue) sc.setAttribute("value", currentValue);
+
+    sc.addEventListener("input", (e) => {
+      if (this.#suppressEvents) return;
+      this.#suppressEvents = true;
+      this.setAttribute("value", e.detail);
+      this.#suppressEvents = false;
+      this.dispatchEvent(
+        new CustomEvent("input", { detail: e.detail, bubbles: true }),
+      );
+    });
+    sc.addEventListener("change", (e) => {
+      if (this.#suppressEvents) return;
+      this.dispatchEvent(
+        new CustomEvent("change", { detail: e.detail, bubbles: true }),
+      );
+    });
+
+    this.appendChild(sc);
+    this.#childControl = sc;
+    this.#currentMode = "segments";
+  }
+
+  #renderDropdown() {
+    this.innerHTML = "";
+    if (this.#parsedOptions.length === 0) return;
+
+    const dd = document.createElement("fig-dropdown");
+    if (this.hasAttribute("disabled")) dd.setAttribute("disabled", "");
+
+    const currentValue = this.getAttribute("value");
+
+    for (const opt of this.#parsedOptions) {
+      const option = document.createElement("option");
+      option.value = opt;
+      option.textContent = opt;
+      if (currentValue === opt) option.selected = true;
+      dd.appendChild(option);
+    }
+
+    if (currentValue) dd.setAttribute("value", currentValue);
+
+    dd.addEventListener("input", (e) => {
+      if (this.#suppressEvents) return;
+      this.#suppressEvents = true;
+      this.setAttribute("value", e.detail);
+      this.#suppressEvents = false;
+      this.dispatchEvent(
+        new CustomEvent("input", { detail: e.detail, bubbles: true }),
+      );
+    });
+    dd.addEventListener("change", (e) => {
+      if (this.#suppressEvents) return;
+      this.dispatchEvent(
+        new CustomEvent("change", { detail: e.detail, bubbles: true }),
+      );
+    });
+
+    this.appendChild(dd);
+    this.#childControl = dd;
+    this.#currentMode = "dropdown";
+  }
+
+  #rebuildCurrentControl() {
+    if (this.#currentMode === "segments") {
+      this.#renderSegments();
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => this.#checkOverflow());
+      });
+    } else {
+      this.#renderDropdown();
+    }
+  }
+
+  #syncValueToChild() {
+    if (!this.#childControl || this.#suppressEvents) return;
+    const val = this.getAttribute("value") || "";
+    this.#childControl.value = val;
+  }
+
+  #syncAttrToChild(attr) {
+    if (!this.#childControl) return;
+    if (this.hasAttribute(attr)) {
+      this.#childControl.setAttribute(attr, this.getAttribute(attr) || "");
+    } else {
+      this.#childControl.removeAttribute(attr);
+    }
+  }
+
+  #startResizeObserver() {
+    this.#resizeObserver?.disconnect();
+    this.#resizeObserver = new ResizeObserver(() => {
+      this.#checkOverflow();
+    });
+    this.#resizeObserver.observe(this);
+  }
+
+  #isSegmentTruncated(seg) {
+    const range = document.createRange();
+    range.selectNodeContents(seg);
+    const textWidth = range.getBoundingClientRect().width;
+    const segRect = seg.getBoundingClientRect();
+    const segWidth = segRect.width;
+    const cs = getComputedStyle(seg);
+    const padL = parseFloat(cs.paddingLeft) || 0;
+    const padR = parseFloat(cs.paddingRight) || 0;
+    const contentWidth = segWidth - padL - padR;
+    return textWidth > contentWidth + 0.5;
+  }
+
+  #anySegmentTruncated() {
+    const segments = this.querySelectorAll("fig-segment");
+    for (const seg of segments) {
+      if (this.#isSegmentTruncated(seg)) return true;
+    }
+    return false;
+  }
+
+  #checkOverflow() {
+    if (this.#parsedOptions.length <= 1) return;
+
+    if (this.#currentMode === "segments") {
+      const sc = this.#childControl;
+      const containerOverflow = sc && sc.scrollWidth > sc.clientWidth + 1;
+      if (containerOverflow || this.#anySegmentTruncated()) {
+        this.#naturalWidth = this.clientWidth;
+        this.#renderDropdown();
+      }
+    } else {
+      if (this.#naturalWidth > 0 && this.clientWidth >= this.#naturalWidth) {
+        this.#renderSegments();
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            const sc = this.#childControl;
+            const containerOverflow = sc && sc.scrollWidth > sc.clientWidth + 1;
+            if (containerOverflow || this.#anySegmentTruncated()) {
+              this.#renderDropdown();
+            }
+          });
+        });
+      }
+    }
+  }
+}
+customElements.define("fig-options", FigOptions);
+
 /* Slider */
 /**
  * A custom slider input element.
@@ -6105,6 +6436,7 @@ class FigInputPalette extends HTMLElement {
     expandedWrap.className = "palette-colors-expanded";
     this.#colors.forEach((entry, i) => {
       expandedWrap.appendChild(this.#createPicker(entry, i, disabled));
+      expandedWrap.appendChild(this.#createRemoveButton(i, disabled));
     });
     this.appendChild(expandedWrap);
   }
@@ -6169,6 +6501,31 @@ class FigInputPalette extends HTMLElement {
     return ic;
   }
 
+  #createRemoveButton(index, disabled) {
+    const btn = document.createElement("fig-button");
+    btn.setAttribute("variant", "ghost");
+    btn.setAttribute("icon", "true");
+    btn.setAttribute("aria-label", "Remove color");
+    btn.className = "palette-remove-btn";
+    if (disabled || this.#colors.length <= this.#min) btn.setAttribute("disabled", "");
+    btn.innerHTML = `<span class="fig-mask-icon" style="--icon: var(--icon-minus)"></span>`;
+    btn.addEventListener("click", () => {
+      if (this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false") return;
+      this.#removeColor(index);
+    });
+    return btn;
+  }
+
+  #removeColor(index) {
+    if (index < 0 || index >= this.#colors.length) return;
+    if (this.#colors.length <= this.#min) return;
+    this.#colors.splice(index, 1);
+    this.#inlinePickers = [];
+    this.#expandedPickers = [];
+    this.#render();
+    this.#emitChange();
+  }
+
   #createAddButton(disabled, parent = this) {
     const atMax = this.#colors.length >= this.#max;
     const addBtn = document.createElement("fig-button");
@@ -6208,7 +6565,10 @@ class FigInputPalette extends HTMLElement {
 
     const expandedIc = this.#createPicker(entry, index, disabled);
     const expandedWrap = this.querySelector(".palette-colors-expanded");
-    if (expandedWrap) expandedWrap.appendChild(expandedIc);
+    if (expandedWrap) {
+      expandedWrap.appendChild(expandedIc);
+      expandedWrap.appendChild(this.#createRemoveButton(index, disabled));
+    }
 
     if (this.#colors.length >= this.#max) {
       const addBtn = this.querySelector(".palette-add-btn");
@@ -10652,6 +11012,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.4",
+  "version": "4.3.0",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",