@rogieking/figui3 6.4.6 → 6.4.8

package/fig.js

@@ -1,3 +1,5 @@
+import "./fig-layer.js";
+
 /**
  * Generates a unique ID string using timestamp and random values
  * @returns {string} A unique identifier
@@ -132,15 +134,20 @@ function figSupportsPopover() {
 class FigButton extends HTMLElement {
   type;
   #selected;
+  #a11yAttributes = ["aria-label", "aria-labelledby", "aria-describedby", "title"];
+  #boundHandleControlKeydown = this.#handleControlKeydown.bind(this);
   constructor() {
     super();
     this.attachShadow({ mode: "open", delegatesFocus: true });
   }
   connectedCallback() {
     this.type = this.getAttribute("type") || "button";
+    const isControlWrapper = this.type === "select" || this.type === "upload";
+    const controlTag = isControlWrapper ? "span" : "button";
+    const typeAttr = isControlWrapper ? "" : ` type="${this.type}"`;
     this.shadowRoot.innerHTML = `
             <style>
-                button, button:hover, button:active {
+                button, button:hover, button:active, .fig-button-control {
                     padding: 0 var(--spacer-2);
                     appearance: none;
                     display: flex;
@@ -162,36 +169,38 @@ class FigButton extends HTMLElement {
                     width: 100%;
                     min-width: 0;
                 }
-                :host([size="large"]) button {
+                :host([size="large"]) button,
+                :host([size="large"]) .fig-button-control {
                     height: var(--spacer-5);
                 }
-                :host([size="large"][icon]) button {
+                :host([size="large"][icon]) button,
+                :host([size="large"][icon]) .fig-button-control {
                     padding: 0;
                 }
             </style>
-            <button type="${this.type}">
+            <${controlTag} class="fig-button-control"${typeAttr}>
                 <slot></slot>
-            </button>
+            </${controlTag}>
             `;
 
     this.#selected =
       this.hasAttribute("selected") &&
       this.getAttribute("selected") !== "false";
 
-    requestAnimationFrame(() => {
-      this.button = this.shadowRoot.querySelector("button");
-      this.button.addEventListener("click", this.#handleClick.bind(this));
+    this.button = this.shadowRoot.querySelector("button, .fig-button-control");
+    this.#syncButtonAttributes();
+    this.button.addEventListener("click", this.#handleClick.bind(this));
 
-      // Forward focus-visible state to host element
-      this.button.addEventListener("focus", () => {
-        if (this.button.matches(":focus-visible")) {
-          this.setAttribute("data-focus-visible", "");
-        }
-      });
-      this.button.addEventListener("blur", () => {
-        this.removeAttribute("data-focus-visible");
-      });
+    // Forward focus-visible state to host element
+    this.button.addEventListener("focus", () => {
+      if (this.button.matches(":focus-visible")) {
+        this.setAttribute("data-focus-visible", "");
+      }
     });
+    this.button.addEventListener("blur", () => {
+      this.removeAttribute("data-focus-visible");
+    });
+    this.addEventListener("keydown", this.#boundHandleControlKeydown);
   }
 
   get type() {
@@ -207,7 +216,12 @@ class FigButton extends HTMLElement {
     this.setAttribute("selected", value);
   }
 
+  #isDisabled() {
+    return this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false";
+  }
+
   #handleClick() {
+    if (this.#isDisabled()) return;
     if (this.type === "toggle") {
       this.toggleAttribute("selected", !this.hasAttribute("selected"));
     }
@@ -229,28 +243,103 @@ class FigButton extends HTMLElement {
       }
     }
   }
+  #getSlottedControl() {
+    if (this.type === "select") {
+      return this.querySelector("select, fig-dropdown");
+    }
+    if (this.type === "upload") {
+      return this.querySelector('input[type="file"], input');
+    }
+    return null;
+  }
+  #getSlottedSelect() {
+    const control = this.#getSlottedControl();
+    if (control instanceof HTMLSelectElement) return control;
+    if (control?.tagName === "FIG-DROPDOWN") {
+      return control.select || control.querySelector?.("select") || null;
+    }
+    return null;
+  }
+  #handleControlKeydown(e) {
+    if (this.type !== "select") return;
+    if (e.key !== "Enter") return;
+    if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
+    const select = this.#getSlottedSelect();
+    if (!select || select.disabled || select.multiple) return;
+    if (typeof select.showPicker !== "function") return;
+    e.preventDefault();
+    try {
+      select.showPicker();
+    } catch {
+      // showPicker can be blocked outside trusted user activation.
+    }
+  }
+  #syncPressedState() {
+    if (!this.button) return;
+    if (this.type !== "toggle") {
+      this.removeAttribute("aria-pressed");
+      this.button.removeAttribute("aria-pressed");
+      return;
+    }
+    const pressed = this.hasAttribute("selected") && this.getAttribute("selected") !== "false";
+    this.setAttribute("aria-pressed", pressed ? "true" : "false");
+    this.button.setAttribute("aria-pressed", pressed ? "true" : "false");
+  }
+  #syncA11yAttributes() {
+    if (!this.button) return;
+    if (!(this.button instanceof HTMLButtonElement)) return;
+    this.#a11yAttributes.forEach((name) => {
+      const value = this.getAttribute(name);
+      if (value === null) {
+        this.button.removeAttribute(name);
+      } else {
+        this.button.setAttribute(name, value);
+      }
+    });
+  }
+  #syncButtonAttributes() {
+    if (!this.button) return;
+    const disabled =
+      this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false";
+    this.disabled = disabled;
+    if (this.button instanceof HTMLButtonElement) {
+      this.button.disabled = disabled;
+      this.button.type = this.type;
+      this.button.setAttribute("type", this.type);
+    }
+    this.#syncA11yAttributes();
+    this.#syncPressedState();
+  }
   static get observedAttributes() {
-    return ["disabled", "selected"];
+    return [
+      "disabled",
+      "selected",
+      "type",
+      "aria-label",
+      "aria-labelledby",
+      "aria-describedby",
+      "title",
+    ];
   }
   attributeChangedCallback(name, oldValue, newValue) {
-    if (this.button) {
-      this.button[name] = newValue;
-      switch (name) {
-        case "disabled":
-          this.disabled = this.button.disabled =
-            newValue !== null && newValue !== "false";
-          break;
-        case "type":
-          this.type = newValue;
-          this.button.type = this.type;
-          this.button.setAttribute("type", this.type);
-          break;
-        case "selected":
-          this.#selected = newValue === "true";
-          break;
-      }
+    if (oldValue === newValue) return;
+    switch (name) {
+      case "disabled":
+      case "type":
+        this.#syncButtonAttributes();
+        break;
+      case "selected":
+        this.#selected = newValue !== null && newValue !== "false";
+        this.#syncPressedState();
+        break;
+      default:
+        this.#syncA11yAttributes();
+        break;
     }
   }
+  disconnectedCallback() {
+    this.removeEventListener("keydown", this.#boundHandleControlKeydown);
+  }
 }
 customElements.define("fig-button", FigButton);
 
@@ -264,6 +353,7 @@ class FigDropdown extends HTMLElement {
   #selectedValue = null; // Stores last selected value for dropdown type
   #boundHandleSelectInput;
   #boundHandleSelectChange;
+  #boundHandleSelectKeydown;
   #selectedContentEnabled = false;
   #selectedContentEl = null;
 
@@ -281,6 +371,7 @@ class FigDropdown extends HTMLElement {
     this.attachShadow({ mode: "open" });
     this.#boundHandleSelectInput = this.#handleSelectInput.bind(this);
     this.#boundHandleSelectChange = this.#handleSelectChange.bind(this);
+    this.#boundHandleSelectKeydown = this.#handleSelectKeydown.bind(this);
     this.#boundSlotChange = this.slotChange.bind(this);
   }
 
@@ -333,6 +424,7 @@ class FigDropdown extends HTMLElement {
   #addEventListeners() {
     this.select.addEventListener("input", this.#boundHandleSelectInput);
     this.select.addEventListener("change", this.#boundHandleSelectChange);
+    this.select.addEventListener("keydown", this.#boundHandleSelectKeydown);
   }
 
   #hasPersistentControl(optionEl) {
@@ -360,6 +452,7 @@ class FigDropdown extends HTMLElement {
 
     this.#label = this.getAttribute("label") || this.#label;
     this.select.setAttribute("aria-label", this.#label);
+    this.#syncDisabled();
 
     this.appendChild(this.select);
     this.shadowRoot.appendChild(this.optionsSlot);
@@ -448,6 +541,21 @@ class FigDropdown extends HTMLElement {
     );
   }
 
+  #handleSelectKeydown(e) {
+    if (this.closest('fig-button[type="select"]')) return;
+    if (e.key !== "Enter" || e.defaultPrevented) return;
+    if (this.#selectedContentEnabled && this.select.matches(":open")) return;
+    if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
+    if (this.select.disabled || this.select.multiple) return;
+    if (typeof this.select.showPicker !== "function") return;
+    e.preventDefault();
+    try {
+      this.select.showPicker();
+    } catch {
+      // showPicker can be unavailable during non-user-initiated key events.
+    }
+  }
+
   focus() {
     this.select.focus();
   }
@@ -469,7 +577,12 @@ class FigDropdown extends HTMLElement {
     this.setAttribute("value", value);
   }
   static get observedAttributes() {
-    return ["value", "type", "experimental"];
+    return ["value", "type", "experimental", "label", "disabled"];
+  }
+  #syncDisabled() {
+    const disabled =
+      this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false";
+    this.select.disabled = disabled;
   }
   #syncSelectedValue(value) {
     // For dropdown type, don't sync the visual selection - it should always show the hidden placeholder
@@ -499,12 +612,16 @@ class FigDropdown extends HTMLElement {
       this.#label = newValue;
       this.select.setAttribute("aria-label", this.#label);
     }
+    if (name === "disabled") {
+      this.#syncDisabled();
+    }
   }
 
   disconnectedCallback() {
     this.optionsSlot.removeEventListener("slotchange", this.#boundSlotChange);
     this.select.removeEventListener("input", this.#boundHandleSelectInput);
     this.select.removeEventListener("change", this.#boundHandleSelectChange);
+    this.select.removeEventListener("keydown", this.#boundHandleSelectKeydown);
   }
 }
 
@@ -533,6 +650,7 @@ class FigTooltip extends HTMLElement {
   #boundHandleTouchEnd;
   #boundHandleTouchCancel;
   #boundHandleDialogClose;
+  #boundHandleEscape;
   #parentDialog = null;
   #touchTimeout;
   #isTouching = false;
@@ -550,6 +668,7 @@ class FigTooltip extends HTMLElement {
     this.#boundHandleTouchMove = this.#handleTouchMove.bind(this);
     this.#boundHandleTouchEnd = this.#handleTouchEnd.bind(this);
     this.#boundHandleTouchCancel = this.#handleTouchCancel.bind(this);
+    this.#boundHandleEscape = this.#handleEscape.bind(this);
     this.#boundHandleDialogClose = () => {
       clearTimeout(this.timeout);
       this.destroy();
@@ -573,6 +692,7 @@ class FigTooltip extends HTMLElement {
       this.#boundHideOnChromeOpen,
       true,
     );
+    document.removeEventListener("keydown", this.#boundHandleEscape, true);
     if (this.#parentDialog) {
       this.#parentDialog.removeEventListener("close", this.#boundHandleDialogClose);
       this.#parentDialog = null;
@@ -620,7 +740,7 @@ class FigTooltip extends HTMLElement {
     this.popup.setAttribute("variant", "tooltip");
     this.popup.setAttribute("data-tooltip-managed", "");
     this.popup.setAttribute("role", "tooltip");
-    this.popup.setAttribute("closedby", "none");
+    this.popup.setAttribute("closedby", "closerequest");
     if (supportsPopover) this.popup.setAttribute("popover", "manual");
 
     const tooltipId = figUniqueId();
@@ -708,6 +828,7 @@ class FigTooltip extends HTMLElement {
     }
 
     document.addEventListener("mousedown", this.#boundHideOnChromeOpen, true);
+    document.addEventListener("keydown", this.#boundHandleEscape, true);
   }
 
   get #showPersisted() {
@@ -804,6 +925,13 @@ class FigTooltip extends HTMLElement {
     }
   }
 
+  #handleEscape(event) {
+    if ((!this.isOpen && !this.popup) || event.key !== "Escape") return;
+    event.preventDefault();
+    this.hidePopup();
+    this.firstElementChild?.focus?.();
+  }
+
   static get observedAttributes() {
     return ["action", "delay", "open", "pointer", "show", "text", "theme"];
   }
@@ -912,7 +1040,7 @@ class FigTooltip extends HTMLElement {
       popup.setAttribute("variant", "tooltip");
       popup.setAttribute("data-tooltip-managed", "");
       popup.setAttribute("role", "tooltip");
-      popup.setAttribute("closedby", "none");
+      popup.setAttribute("closedby", "closerequest");
       if (supportsPopover) popup.setAttribute("popover", "manual");
       const content = document.createElement("span");
       content.innerText = text;
@@ -1068,6 +1196,8 @@ class FigDialog extends HTMLDialogElement {
     this._boundIframeMessage = this._handleIframeMessage.bind(this);
     this._boundContentMutation = this._scheduleAutoResize.bind(this);
     this._boundContentResize = this._scheduleAutoResize.bind(this);
+    this._boundRestoreFocus = this._restoreFocus.bind(this);
+    this._previousFocus = null;
   }
 
   get autoresize() {
@@ -1093,6 +1223,7 @@ class FigDialog extends HTMLDialogElement {
       this._setupDragListeners();
       this._applyPosition();
       this._syncAutoResize();
+      this._syncA11y();
     });
 
     window.addEventListener("message", this._boundIframeMessage);
@@ -1106,6 +1237,36 @@ class FigDialog extends HTMLDialogElement {
     });
     window.removeEventListener("message", this._boundIframeMessage);
     this._teardownAutoResize();
+    this.removeEventListener("close", this._boundRestoreFocus);
+  }
+
+  _captureFocusBeforeOpen() {
+    const active = document.activeElement;
+    this._previousFocus =
+      active instanceof HTMLElement && active !== document.body && !this.contains(active)
+        ? active
+        : null;
+  }
+
+  _restoreFocus() {
+    const target = this._previousFocus;
+    this._previousFocus = null;
+    if (!target?.isConnected) return;
+    const active = document.activeElement;
+    if (active && active !== document.body && !this.contains(active)) return;
+    requestAnimationFrame(() => target.focus?.());
+  }
+
+  show() {
+    this._captureFocusBeforeOpen();
+    this.addEventListener("close", this._boundRestoreFocus, { once: true });
+    return super.show();
+  }
+
+  showModal() {
+    this._captureFocusBeforeOpen();
+    this.addEventListener("close", this._boundRestoreFocus, { once: true });
+    return super.showModal();
   }
 
   _handleIframeMessage(event) {
@@ -1246,6 +1407,7 @@ class FigDialog extends HTMLDialogElement {
     const btn = document.createElement("fig-button");
     btn.setAttribute("variant", "ghost");
     btn.setAttribute("icon", "");
+    btn.setAttribute("aria-label", "Close dialog");
     btn.setAttribute("close-dialog", "");
     btn.appendChild(createFigIcon("close"));
     tooltip.appendChild(btn);
@@ -1256,11 +1418,25 @@ class FigDialog extends HTMLDialogElement {
 
   _addCloseListeners() {
     this.querySelectorAll("fig-button[close-dialog]").forEach((button) => {
+      if (!button.hasAttribute("aria-label")) {
+        button.setAttribute("aria-label", "Close dialog");
+      }
       button.removeEventListener("click", this._boundClose);
       button.addEventListener("click", this._boundClose);
     });
   }
 
+  _syncA11y() {
+    if (!this.hasAttribute("aria-label") && !this.hasAttribute("aria-labelledby")) {
+      const heading = this.querySelector("fig-header[dialog-header] h1, fig-header[dialog-header] h2, fig-header[dialog-header] h3, fig-header[dialog-header] h4, fig-header[dialog-header] h5, fig-header[dialog-header] h6");
+      if (heading) {
+        const id = heading.getAttribute("id") || figUniqueId();
+        heading.setAttribute("id", id);
+        this.setAttribute("aria-labelledby", id);
+      }
+    }
+  }
+
   _applyPosition() {
     const position = this.getAttribute("position") || "";
 
@@ -1479,6 +1655,8 @@ class FigDialog extends HTMLDialogElement {
       "resizable",
       "closedby",
       "autoresize",
+      "aria-label",
+      "aria-labelledby",
     ];
   }
 
@@ -1525,11 +1703,125 @@ class FigDialog extends HTMLDialogElement {
       if (autoHeader) {
         autoHeader.textContent = newValue || "Dialog";
       }
+      this._syncA11y();
+    }
+
+    if (name === "aria-label" || name === "aria-labelledby") {
+      this._syncA11y();
     }
   }
 }
 figDefineCustomizedBuiltIn("fig-dialog", FigDialog, { extends: "dialog" });
 
+/* Toast */
+class FigToast extends HTMLDialogElement {
+  constructor() {
+    super();
+    this._figInit();
+  }
+
+  _figInit() {
+    if (this._figInitialized) return;
+    this._figInitialized = true;
+    this._defaultOffset = 16;
+    this._autoCloseTimer = null;
+    this._boundHandleClose = this.handleClose.bind(this);
+  }
+
+  connectedCallback() {
+    this._figInit();
+    if (!this.hasAttribute("theme")) this.setAttribute("theme", "dark");
+    this.syncLiveRegion();
+    this.addCloseListeners();
+    this.applyPosition();
+    if (this.hasAttribute("open") && this.getAttribute("open") !== "false") {
+      this.showToast();
+    }
+  }
+
+  disconnectedCallback() {
+    this._figInit();
+    this.clearAutoClose();
+  }
+
+  addCloseListeners() {
+    this.querySelectorAll("[close-toast]").forEach((button) => {
+      if (!button.hasAttribute("aria-label")) button.setAttribute("aria-label", "Close notification");
+      button.removeEventListener("click", this._boundHandleClose);
+      button.addEventListener("click", this._boundHandleClose);
+    });
+  }
+
+  handleClose() {
+    this.hideToast();
+  }
+
+  applyPosition() {
+    this.style.position = "fixed";
+    this.style.margin = "0";
+    this.style.top = "auto";
+    this.style.bottom = `${parseInt(this.getAttribute("offset") ?? this._defaultOffset)}px`;
+    this.style.left = "50%";
+    this.style.right = "auto";
+    this.style.transform = "translateX(-50%)";
+  }
+
+  syncLiveRegion() {
+    const assertive =
+      this.getAttribute("live") === "assertive" ||
+      this.getAttribute("theme") === "danger";
+    if (!this.hasAttribute("role")) this.setAttribute("role", assertive ? "alert" : "status");
+    if (!this.hasAttribute("aria-live")) this.setAttribute("aria-live", assertive ? "assertive" : "polite");
+    if (!this.hasAttribute("aria-atomic")) this.setAttribute("aria-atomic", "true");
+  }
+
+  startAutoClose() {
+    this.clearAutoClose();
+    const duration = parseInt(this.getAttribute("duration") ?? "5000");
+    if (duration > 0) {
+      this._autoCloseTimer = setTimeout(() => this.hideToast(), duration);
+    }
+  }
+
+  clearAutoClose() {
+    if (this._autoCloseTimer) {
+      clearTimeout(this._autoCloseTimer);
+      this._autoCloseTimer = null;
+    }
+  }
+
+  showToast() {
+    this.syncLiveRegion();
+    if (!this.open) this.show();
+    this.applyPosition();
+    this.startAutoClose();
+    this.dispatchEvent(new CustomEvent("toast-show", { bubbles: true }));
+  }
+
+  hideToast() {
+    this.clearAutoClose();
+    if (this.open) this.close();
+    this.dispatchEvent(new CustomEvent("toast-hide", { bubbles: true }));
+  }
+
+  static get observedAttributes() {
+    return ["duration", "offset", "open", "theme", "live"];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    this._figInit();
+    if (oldValue === newValue) return;
+    if (!this.isConnected) return;
+    if (name === "offset") this.applyPosition();
+    if (name === "open") {
+      if (newValue !== null && newValue !== "false") this.showToast();
+      else this.hideToast();
+    }
+    if (name === "theme" || name === "live") this.syncLiveRegion();
+  }
+}
+figDefineCustomizedBuiltIn("fig-toast", FigToast, { extends: "dialog" });
+
 /* Popup */
 /**
  * A floating popup foundation component based on <dialog>.
@@ -1562,14 +1854,17 @@ class FigPopup extends HTMLDialogElement {
   _boundPointerMove;
   _boundPointerUp;
   _wasDragged = false;
+  _previousFocus = null;
+  _boundDocumentKeydown;
 
   constructor() {
     super();
     this._boundReposition = this.queueReposition.bind(this);
     this._boundScroll = (e) => {
+      const target = e.target;
       if (
         this.open &&
-        !this.contains(e.target) &&
+        (!(target instanceof Node) || !this.contains(target)) &&
         this.shouldAutoReposition()
       ) {
         this.queueReposition();
@@ -1579,6 +1874,7 @@ class FigPopup extends HTMLDialogElement {
     this._boundPointerDown = this.handlePointerDown.bind(this);
     this._boundPointerMove = this.handlePointerMove.bind(this);
     this._boundPointerUp = this.handlePointerUp.bind(this);
+    this._boundDocumentKeydown = this.handleDocumentKeydown.bind(this);
   }
 
   ensureInitialized() {
@@ -1603,15 +1899,17 @@ class FigPopup extends HTMLDialogElement {
       this._dragOffset = { x: 0, y: 0 };
     if (typeof this._dragThreshold !== "number") this._dragThreshold = 3;
     if (typeof this._wasDragged === "undefined") this._wasDragged = false;
+    if (typeof this._previousFocus === "undefined") this._previousFocus = null;
 
     if (typeof this._boundReposition !== "function") {
       this._boundReposition = this.queueReposition.bind(this);
     }
     if (typeof this._boundScroll !== "function") {
       this._boundScroll = (e) => {
+        const target = e.target;
         if (
           this.open &&
-          !this.contains(e.target) &&
+          (!(target instanceof Node) || !this.contains(target)) &&
           this.shouldAutoReposition()
         ) {
           this.queueReposition();
@@ -1630,6 +1928,9 @@ class FigPopup extends HTMLDialogElement {
     if (typeof this._boundPointerUp !== "function") {
       this._boundPointerUp = this.handlePointerUp.bind(this);
     }
+    if (typeof this._boundDocumentKeydown !== "function") {
+      this._boundDocumentKeydown = this.handleDocumentKeydown.bind(this);
+    }
   }
 
   static get observedAttributes() {
@@ -1699,7 +2000,10 @@ class FigPopup extends HTMLDialogElement {
       this.setAttribute("position", "top center");
     }
     if (!this.hasAttribute("role")) {
-      this.setAttribute("role", "dialog");
+      this.setAttribute(
+        "role",
+        this.getAttribute("variant") === "tooltip" ? "tooltip" : "dialog",
+      );
     }
     if (!this.hasAttribute("closedby")) {
       this.setAttribute("closedby", "any");
@@ -1735,6 +2039,7 @@ class FigPopup extends HTMLDialogElement {
       this._boundOutsidePointerDown,
       true,
     );
+    document.removeEventListener("keydown", this._boundDocumentKeydown, true);
     if (this._rafId !== null) {
       cancelAnimationFrame(this._rafId);
       this._rafId = null;
@@ -1780,6 +2085,7 @@ class FigPopup extends HTMLDialogElement {
     this.style.inset = "auto";
     this.style.margin = "0";
     this.style.zIndex = String(figGetHighestZIndex() + 1);
+    this.captureFocusBeforeOpen();
 
     // When the popup opts into the native popover API, prefer showPopover()
     // so the element is promoted into the browser's top layer (above any
@@ -1817,6 +2123,7 @@ class FigPopup extends HTMLDialogElement {
       this._boundOutsidePointerDown,
       true,
     );
+    document.addEventListener("keydown", this._boundDocumentKeydown, true);
     this._wasDragged = false;
     this.queueReposition();
     this._isPopupActive = true;
@@ -1826,6 +2133,10 @@ class FigPopup extends HTMLDialogElement {
   }
 
   hidePopup() {
+    const wasActive =
+      this._isPopupActive ||
+      this.matches?.(":open") ||
+      this.matches?.(":popover-open");
     const anchor = this.resolveAnchor();
     if (anchor?.classList) anchor.classList.remove("has-popup-open");
 
@@ -1838,6 +2149,7 @@ class FigPopup extends HTMLDialogElement {
       this._boundOutsidePointerDown,
       true,
     );
+    document.removeEventListener("keydown", this._boundDocumentKeydown, true);
 
     if (
       this.hasAttribute("popover") &&
@@ -1860,6 +2172,39 @@ class FigPopup extends HTMLDialogElement {
         // Ignore when dialog is not in an open state.
       }
     }
+    if (wasActive) this.restoreFocusAfterClose();
+  }
+
+  shouldRestoreFocus() {
+    return this.getAttribute("variant") !== "tooltip";
+  }
+
+  captureFocusBeforeOpen() {
+    if (!this.shouldRestoreFocus()) return;
+    const active = document.activeElement;
+    this._previousFocus =
+      active instanceof HTMLElement && active !== document.body && !this.contains(active)
+        ? active
+        : null;
+  }
+
+  restoreFocusAfterClose() {
+    if (!this.shouldRestoreFocus()) {
+      this._previousFocus = null;
+      return;
+    }
+    const anchor = this.resolveAnchor();
+    const target =
+      this._previousFocus?.isConnected
+        ? this._previousFocus
+        : anchor instanceof HTMLElement
+          ? anchor
+          : null;
+    this._previousFocus = null;
+    if (!target?.isConnected) return;
+    const active = document.activeElement;
+    if (active && active !== document.body && !this.contains(active)) return;
+    requestAnimationFrame(() => target.focus?.());
   }
 
   get autoresize() {
@@ -2002,6 +2347,27 @@ class FigPopup extends HTMLDialogElement {
     this.open = false;
   }
 
+  handleDocumentKeydown(event) {
+    if (event.key !== "Escape" || event.defaultPrevented) return;
+    if (!this.open) return;
+    if (this.getAttribute("role") === "menu") return;
+    const closedby = this.getAttribute("closedby");
+    if (closedby === "none") return;
+    const openPopups = Array.from(
+      document.querySelectorAll('dialog[is="fig-popup"][open]'),
+    ).filter((popup) => popup.open);
+    const topPopup = openPopups
+      .map((popup) => ({
+        popup,
+        z: Number.parseInt(getComputedStyle(popup).zIndex || "0", 10) || 0,
+      }))
+      .sort((a, b) => a.z - b.z)
+      .at(-1)?.popup;
+    if (topPopup && topPopup !== this) return;
+    event.preventDefault();
+    this.open = false;
+  }
+
   isInsideDescendantPopup(target) {
     const targetDialog = target.closest?.('dialog[is="fig-popup"]');
     if (!targetDialog || targetDialog === this) return false;
@@ -2676,14 +3042,20 @@ class FigTab extends HTMLElement {
   connectedCallback() {
     this.setAttribute("label", this.innerText);
     this.setAttribute("role", "tab");
-    this.setAttribute("tabindex", "0");
+    if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "-1");
     this.addEventListener("click", this.#boundHandleClick);
 
     requestAnimationFrame(() => {
       if (typeof this.getAttribute("content") === "string") {
         this.content = document.querySelector(this.getAttribute("content"));
         if (this.content) {
+          const tabId = this.getAttribute("id") || figUniqueId();
+          const panelId = this.content.getAttribute("id") || figUniqueId();
+          this.setAttribute("id", tabId);
+          this.content.setAttribute("id", panelId);
+          this.setAttribute("aria-controls", panelId);
           this.content.setAttribute("role", "tabpanel");
+          this.content.setAttribute("aria-labelledby", tabId);
           if (this.#selected) {
             this.content.style.display = "block";
             this.setAttribute("aria-selected", "true");
@@ -2713,16 +3085,27 @@ class FigTab extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["selected"];
+    return ["selected", "disabled"];
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === "selected") {
       this.#selected = newValue !== null && newValue !== "false";
       this.setAttribute("aria-selected", this.#selected ? "true" : "false");
+      this.setAttribute("tabindex", this.#selected ? "0" : "-1");
       if (this?.content) {
         this.content.style.display = this.#selected ? "block" : "none";
       }
     }
+    if (name === "disabled") {
+      const disabled = newValue !== null && newValue !== "false";
+      if (disabled) {
+        this.setAttribute("aria-disabled", "true");
+        this.setAttribute("tabindex", "-1");
+      } else {
+        this.removeAttribute("aria-disabled");
+        this.setAttribute("tabindex", this.#selected ? "0" : "-1");
+      }
+    }
   }
 }
 customElements.define("fig-tab", FigTab);
@@ -2770,9 +3153,24 @@ class FigTabs extends HTMLElement {
       } else {
         tab.removeAttribute("disabled");
         tab.removeAttribute("aria-disabled");
-        tab.setAttribute("tabindex", "0");
       }
     });
+    this.#syncTabIndexes();
+  }
+
+  #availableTabs() {
+    return Array.from(this.querySelectorAll("fig-tab")).filter(
+      (tab) => !tab.hasAttribute("disabled") || tab.getAttribute("disabled") === "false",
+    );
+  }
+
+  #syncTabIndexes() {
+    const tabs = Array.from(this.querySelectorAll("fig-tab"));
+    const selected = tabs.find((tab) => tab.hasAttribute("selected")) || this.#availableTabs()[0];
+    tabs.forEach((tab) => {
+      const disabled = tab.hasAttribute("disabled") && tab.getAttribute("disabled") !== "false";
+      tab.setAttribute("tabindex", !disabled && tab === selected ? "0" : "-1");
+    });
   }
 
   disconnectedCallback() {
@@ -2781,9 +3179,10 @@ class FigTabs extends HTMLElement {
   }
 
   #handleKeyDown(event) {
-    const tabs = Array.from(this.querySelectorAll("fig-tab"));
+    const tabs = this.#availableTabs();
+    if (!tabs.length) return;
     const currentIndex = tabs.findIndex((tab) => tab.hasAttribute("selected"));
-    let newIndex = currentIndex;
+    let newIndex = currentIndex >= 0 ? currentIndex : 0;
 
     switch (event.key) {
       case "ArrowLeft":
@@ -2809,12 +3208,13 @@ class FigTabs extends HTMLElement {
     }
 
     if (newIndex !== currentIndex && tabs[newIndex]) {
-      tabs.forEach((tab) => tab.removeAttribute("selected"));
+      this.querySelectorAll("fig-tab").forEach((tab) => tab.removeAttribute("selected"));
       this.selectedTab = tabs[newIndex];
       tabs[newIndex].setAttribute("selected", "true");
       const val = tabs[newIndex].getAttribute("value");
       if (val) this.setAttribute("value", val);
       tabs[newIndex].focus();
+      this.#syncTabIndexes();
     }
   }
 
@@ -2836,6 +3236,7 @@ class FigTabs extends HTMLElement {
         tab.removeAttribute("selected");
       }
     }
+    this.#syncTabIndexes();
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -2866,6 +3267,7 @@ class FigTabs extends HTMLElement {
     }
     const val = target.getAttribute("value");
     if (val) this.setAttribute("value", val);
+    this.#syncTabIndexes();
   }
 }
 customElements.define("fig-tabs", FigTabs);
@@ -2885,6 +3287,9 @@ class FigSegment extends HTMLElement {
     this.#boundHandleClick = this.handleClick.bind(this);
   }
   connectedCallback() {
+    if (!this.hasAttribute("role")) this.setAttribute("role", "radio");
+    if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "-1");
+    this.#syncA11yState();
     this.addEventListener("click", this.#boundHandleClick);
   }
   disconnectedCallback() {
@@ -2916,7 +3321,21 @@ class FigSegment extends HTMLElement {
     this.setAttribute("selected", value);
   }
   static get observedAttributes() {
-    return ["selected", "value"];
+    return ["selected", "value", "disabled"];
+  }
+  #syncA11yState() {
+    const selected =
+      this.hasAttribute("selected") && this.getAttribute("selected") !== "false";
+    const disabled =
+      this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false";
+    this.setAttribute("aria-checked", selected ? "true" : "false");
+    if (disabled) {
+      this.setAttribute("aria-disabled", "true");
+      this.setAttribute("tabindex", "-1");
+    } else {
+      this.removeAttribute("aria-disabled");
+      this.setAttribute("tabindex", selected ? "0" : "-1");
+    }
   }
   attributeChangedCallback(name, oldValue, newValue) {
     switch (name) {
@@ -2925,6 +3344,10 @@ class FigSegment extends HTMLElement {
         break;
       case "selected":
         this.#selected = newValue;
+        this.#syncA11yState();
+        break;
+      case "disabled":
+        this.#syncA11yState();
         break;
     }
   }
@@ -2941,6 +3364,7 @@ customElements.define("fig-segment", FigSegment);
 class FigSegmentedControl extends HTMLElement {
   #selectedSegment = null;
   #boundHandleClick = this.handleClick.bind(this);
+  #boundHandleKeyDown = this.#handleKeyDown.bind(this);
   #mutationObserver = null;
   #resizeObserver = null;
   #indicatorFrame = 0;
@@ -2957,7 +3381,9 @@ class FigSegmentedControl extends HTMLElement {
 
   connectedCallback() {
     this.name = this.getAttribute("name") || "segmented-control";
+    if (!this.hasAttribute("role")) this.setAttribute("role", "radiogroup");
     this.addEventListener("click", this.#boundHandleClick);
+    this.addEventListener("keydown", this.#boundHandleKeyDown);
     this.#applyDisabled(
       this.hasAttribute("disabled") &&
         this.getAttribute("disabled") !== "false",
@@ -2975,6 +3401,7 @@ class FigSegmentedControl extends HTMLElement {
 
   disconnectedCallback() {
     this.removeEventListener("click", this.#boundHandleClick);
+    this.removeEventListener("keydown", this.#boundHandleKeyDown);
     this.#mutationObserver?.disconnect();
     this.#mutationObserver = null;
     this.#resizeObserver?.disconnect();
@@ -3004,6 +3431,7 @@ class FigSegmentedControl extends HTMLElement {
     }
     this.#selectedSegment =
       segment instanceof HTMLElement && this.contains(segment) ? segment : null;
+    this.#syncSegmentA11y();
     this.#queueIndicatorSync();
   }
 
@@ -3054,39 +3482,133 @@ class FigSegmentedControl extends HTMLElement {
     return null;
   }
 
-  #selectByValue(value) {
-    const normalizedValue = String(value ?? "").trim();
-    if (!normalizedValue) return false;
-
-    const segments = this.querySelectorAll("fig-segment");
-    for (const segment of segments) {
-      const segmentValue = this.#resolveSegmentValue(segment);
-      if (!segmentValue) continue;
-      if (segmentValue === normalizedValue) {
-        this.selectedSegment = segment;
-        return true;
-      }
-    }
-
-    return false;
-  }
-
-  #isAnimatedEnabled() {
-    const rawAnimated = this.getAttribute("animated");
-    if (rawAnimated === null) return false;
-    if (rawAnimated === "") return true;
-    return rawAnimated.trim().toLowerCase() === "true";
+  #availableSegments() {
+    return Array.from(this.querySelectorAll("fig-segment")).filter(
+      (segment) =>
+        !segment.hasAttribute("disabled") ||
+        segment.getAttribute("disabled") === "false",
+    );
   }
 
-  #queueIndicatorSync({ forceInstant = false } = {}) {
-    this.#indicatorSyncInstant = this.#indicatorSyncInstant || forceInstant;
-    if (this.#indicatorFrame) return;
-
-    this.#indicatorFrame = requestAnimationFrame(() => {
-      this.#indicatorFrame = 0;
-      const nextForceInstant = this.#indicatorSyncInstant;
-      this.#indicatorSyncInstant = false;
-      this.#syncIndicator({ forceInstant: nextForceInstant });
+  #syncSegmentA11y() {
+    const segments = Array.from(this.querySelectorAll("fig-segment"));
+    const selected = segments.find((segment) => segment.hasAttribute("selected"));
+    segments.forEach((segment) => {
+      const disabled =
+        segment.hasAttribute("disabled") &&
+        segment.getAttribute("disabled") !== "false";
+      const isSelected = segment === selected;
+      segment.setAttribute("aria-checked", isSelected ? "true" : "false");
+      segment.setAttribute("tabindex", !disabled && isSelected ? "0" : "-1");
+    });
+  }
+
+  #selectSegment(segment) {
+    if (!segment) return;
+    const previousSegment = this.selectedSegment;
+    const previousValue = this.value;
+    this.selectedSegment = segment;
+    const resolvedValue = this.#resolveSegmentValue(segment);
+
+    if (resolvedValue) {
+      this.setAttribute("value", resolvedValue);
+    } else {
+      this.removeAttribute("value");
+    }
+
+    const nextValue = this.value;
+    if (previousSegment !== segment || previousValue !== nextValue) {
+      this.#emitSelectionEvents(nextValue);
+    }
+  }
+
+  #handleKeyDown(event) {
+    if (
+      this.hasAttribute("disabled") &&
+      this.getAttribute("disabled") !== "false"
+    ) {
+      return;
+    }
+    const segments = this.#availableSegments();
+    if (!segments.length) return;
+    const currentIndex = segments.findIndex((segment) =>
+      segment.hasAttribute("selected"),
+    );
+    let nextIndex = currentIndex >= 0 ? currentIndex : 0;
+
+    switch (event.key) {
+      case "ArrowLeft":
+      case "ArrowUp":
+        event.preventDefault();
+        nextIndex = nextIndex > 0 ? nextIndex - 1 : segments.length - 1;
+        break;
+      case "ArrowRight":
+      case "ArrowDown":
+        event.preventDefault();
+        nextIndex = nextIndex < segments.length - 1 ? nextIndex + 1 : 0;
+        break;
+      case "Home":
+        event.preventDefault();
+        nextIndex = 0;
+        break;
+      case "End":
+        event.preventDefault();
+        nextIndex = segments.length - 1;
+        break;
+      case " ":
+      case "Enter": {
+        const active = event.target.closest("fig-segment");
+        if (active && this.contains(active)) {
+          event.preventDefault();
+          this.#selectSegment(active);
+        }
+        return;
+      }
+      default:
+        return;
+    }
+
+    const next = segments[nextIndex];
+    this.#selectSegment(next);
+    next.focus();
+    requestAnimationFrame(() => {
+      if (this.contains(next)) next.focus();
+    });
+  }
+
+  #selectByValue(value) {
+    const normalizedValue = String(value ?? "").trim();
+    if (!normalizedValue) return false;
+
+    const segments = this.querySelectorAll("fig-segment");
+    for (const segment of segments) {
+      const segmentValue = this.#resolveSegmentValue(segment);
+      if (!segmentValue) continue;
+      if (segmentValue === normalizedValue) {
+        this.selectedSegment = segment;
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  #isAnimatedEnabled() {
+    const rawAnimated = this.getAttribute("animated");
+    if (rawAnimated === null) return false;
+    if (rawAnimated === "") return true;
+    return rawAnimated.trim().toLowerCase() === "true";
+  }
+
+  #queueIndicatorSync({ forceInstant = false } = {}) {
+    this.#indicatorSyncInstant = this.#indicatorSyncInstant || forceInstant;
+    if (this.#indicatorFrame) return;
+
+    this.#indicatorFrame = requestAnimationFrame(() => {
+      this.#indicatorFrame = 0;
+      const nextForceInstant = this.#indicatorSyncInstant;
+      this.#indicatorSyncInstant = false;
+      this.#syncIndicator({ forceInstant: nextForceInstant });
     });
   }
 
@@ -3226,6 +3748,7 @@ class FigSegmentedControl extends HTMLElement {
         );
         this.#refreshResizeObserverTargets();
         this.#syncSelectionFromAttributes({ enforceFallback: true });
+        this.#syncSegmentA11y();
       }
     });
 
@@ -3248,22 +3771,7 @@ class FigSegmentedControl extends HTMLElement {
     const segment = event.target.closest("fig-segment");
     if (!segment || !this.contains(segment)) return;
 
-    const previousSegment = this.selectedSegment;
-    const previousValue = this.value;
-
-    this.selectedSegment = segment;
-    const resolvedValue = this.#resolveSegmentValue(segment);
-
-    if (resolvedValue) {
-      this.setAttribute("value", resolvedValue);
-    } else {
-      this.removeAttribute("value");
-    }
-
-    const nextValue = this.value;
-    if (previousSegment !== segment || previousValue !== nextValue) {
-      this.#emitSelectionEvents(nextValue);
-    }
+    this.#selectSegment(segment);
   }
 
   #applyDisabled(disabled) {
@@ -3277,6 +3785,7 @@ class FigSegmentedControl extends HTMLElement {
         segment.removeAttribute("aria-disabled");
       }
     });
+    this.#syncSegmentA11y();
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -3634,6 +4143,14 @@ class FigSlider extends HTMLElement {
   #showEmptyTextValue = false;
   #isSyncingValueAttribute = false;
   #value = "";
+  #a11yAttributes = [
+    "aria-label",
+    "aria-labelledby",
+    "aria-describedby",
+    "aria-invalid",
+    "aria-required",
+    "aria-valuetext",
+  ];
   // Private fields declarations
   #typeDefaults = {
     range: { min: 0, max: 100, step: 1 },
@@ -3647,6 +4164,12 @@ class FigSlider extends HTMLElement {
   #boundHandleChange;
   #boundHandleTextInput;
   #boundHandleTextChange;
+  #boundHandleKeyDown;
+  #boundRangePointerDown;
+  #boundRangePointerUp;
+  #lastSliderComplete = null;
+  #lastSliderDefault = null;
+  #lastSliderUnchanged = null;
 
   constructor() {
     super();
@@ -3662,6 +4185,9 @@ class FigSlider extends HTMLElement {
       e.stopPropagation();
       this.#handleChange();
     };
+    this.#boundHandleKeyDown = (e) => {
+      this.#handleKeyDown(e);
+    };
 
     this.#boundHandleTextInput = (e) => {
       e.stopPropagation();
@@ -3672,6 +4198,12 @@ class FigSlider extends HTMLElement {
       e.stopPropagation();
       this.#handleTextChange();
     };
+    this.#boundRangePointerDown = () => {
+      this.#isInteracting = true;
+    };
+    this.#boundRangePointerUp = () => {
+      this.#isInteracting = false;
+    };
   }
 
   #regenerateInnerHTML() {
@@ -3701,8 +4233,9 @@ class FigSlider extends HTMLElement {
         ? 0
         : this.min;
     this.#showEmptyTextValue =
-      rawValue === null ||
-      (typeof rawValue === "string" && rawValue.trim() === "");
+      this.type !== "range" &&
+      (rawValue === null ||
+        (typeof rawValue === "string" && rawValue.trim() === ""));
     this.value = this.#normalizeSliderValue(rawValue);
 
     if (this.color) {
@@ -3742,86 +4275,85 @@ class FigSlider extends HTMLElement {
     }
     this.innerHTML = html;
 
-    //child nodes hack
-    requestAnimationFrame(() => {
-      this.input = this.querySelector("[type=range]");
-      this.inputContainer = this.querySelector(".fig-slider-input-container");
-      this.input.removeEventListener("input", this.#boundHandleInput);
-      this.input.addEventListener("input", this.#boundHandleInput);
-      this.input.removeEventListener("change", this.#boundHandleChange);
-      this.input.addEventListener("change", this.#boundHandleChange);
-      this.input.addEventListener("pointerdown", () => {
-        this.#isInteracting = true;
-      });
-      this.input.addEventListener("pointerup", () => {
-        this.#isInteracting = false;
-      });
-
-      if (this.default) {
-        this.style.setProperty(
-          "--default",
-          this.#calculateNormal(this.default),
-        );
-      }
+    this.input = this.querySelector("[type=range]");
+    this.inputContainer = this.querySelector(".fig-slider-input-container");
+    this.#syncInputA11yAttributes();
+    this.input.removeEventListener("input", this.#boundHandleInput);
+    this.input.addEventListener("input", this.#boundHandleInput);
+    this.input.removeEventListener("change", this.#boundHandleChange);
+    this.input.addEventListener("change", this.#boundHandleChange);
+    this.input.removeEventListener("keydown", this.#boundHandleKeyDown);
+    this.input.addEventListener("keydown", this.#boundHandleKeyDown);
+    this.input.removeEventListener("pointerdown", this.#boundRangePointerDown);
+    this.input.addEventListener("pointerdown", this.#boundRangePointerDown);
+    this.input.removeEventListener("pointerup", this.#boundRangePointerUp);
+    this.input.addEventListener("pointerup", this.#boundRangePointerUp);
+
+    if (this.default) {
+      this.style.setProperty(
+        "--default",
+        this.#calculateNormal(this.default),
+      );
+    }
 
-      this.datalist = this.querySelector("datalist");
-      this.figInputNumber = this.querySelector("fig-input-number");
-      if (this.datalist) {
-        this.inputContainer.append(this.datalist);
-        this.datalist.setAttribute(
-          "id",
-          this.datalist.getAttribute("id") || figUniqueId(),
-        );
-        this.input.setAttribute("list", this.datalist.getAttribute("id"));
-      } else if (this.type === "stepper") {
-        this.datalist = document.createElement("datalist");
-        this.datalist.setAttribute("id", figUniqueId());
-        let steps = (this.max - this.min) / this.step + 1;
-        for (let i = 0; i < steps; i++) {
-          let option = document.createElement("option");
-          option.setAttribute("value", this.min + i * this.step);
-          this.datalist.append(option);
-        }
-        this.inputContainer.append(this.datalist);
-        this.input.setAttribute("list", this.datalist.getAttribute("id"));
-      } else if (this.type === "delta") {
-        this.datalist = document.createElement("datalist");
-        this.datalist.setAttribute("id", figUniqueId());
+    this.datalist = this.querySelector("datalist");
+    this.figInputNumber = this.querySelector("fig-input-number");
+    if (this.datalist) {
+      this.inputContainer.append(this.datalist);
+      this.datalist.setAttribute(
+        "id",
+        this.datalist.getAttribute("id") || figUniqueId(),
+      );
+      this.input.setAttribute("list", this.datalist.getAttribute("id"));
+    } else if (this.type === "stepper") {
+      this.datalist = document.createElement("datalist");
+      this.datalist.setAttribute("id", figUniqueId());
+      let steps = (this.max - this.min) / this.step + 1;
+      for (let i = 0; i < steps; i++) {
         let option = document.createElement("option");
-        option.setAttribute("value", this.default);
+        option.setAttribute("value", this.min + i * this.step);
         this.datalist.append(option);
-        this.inputContainer.append(this.datalist);
-        this.input.setAttribute("list", this.datalist.getAttribute("id"));
       }
-      if (this.datalist) {
-        let defaultOption = this.datalist.querySelector(
-          `option[value='${this.default}']`,
-        );
-        if (defaultOption) {
-          defaultOption.setAttribute("default", "true");
-        }
-      }
-      if (this.figInputNumber) {
-        this.figInputNumber.removeEventListener(
-          "input",
-          this.#boundHandleTextInput,
-        );
-        this.figInputNumber.addEventListener(
-          "input",
-          this.#boundHandleTextInput,
-        );
-        this.figInputNumber.removeEventListener(
-          "change",
-          this.#boundHandleTextChange,
-        );
-        this.figInputNumber.addEventListener(
-          "change",
-          this.#boundHandleTextChange,
-        );
+      this.inputContainer.append(this.datalist);
+      this.input.setAttribute("list", this.datalist.getAttribute("id"));
+    } else if (this.type === "delta") {
+      this.datalist = document.createElement("datalist");
+      this.datalist.setAttribute("id", figUniqueId());
+      let option = document.createElement("option");
+      option.setAttribute("value", this.default);
+      this.datalist.append(option);
+      this.inputContainer.append(this.datalist);
+      this.input.setAttribute("list", this.datalist.getAttribute("id"));
+    }
+    if (this.datalist) {
+      let defaultOption = this.datalist.querySelector(
+        `option[value='${this.default}']`,
+      );
+      if (defaultOption) {
+        defaultOption.setAttribute("default", "true");
       }
+    }
+    if (this.figInputNumber) {
+      this.#syncTextInputA11yAttributes();
+      this.figInputNumber.removeEventListener(
+        "input",
+        this.#boundHandleTextInput,
+      );
+      this.figInputNumber.addEventListener(
+        "input",
+        this.#boundHandleTextInput,
+      );
+      this.figInputNumber.removeEventListener(
+        "change",
+        this.#boundHandleTextChange,
+      );
+      this.figInputNumber.addEventListener(
+        "change",
+        this.#boundHandleTextChange,
+      );
+    }
 
-      this.#syncValue();
-    });
+    this.#syncValue();
   }
 
   connectedCallback() {
@@ -3864,6 +4396,9 @@ class FigSlider extends HTMLElement {
     if (this.input) {
       this.input.removeEventListener("input", this.#boundHandleInput);
       this.input.removeEventListener("change", this.#boundHandleChange);
+      this.input.removeEventListener("keydown", this.#boundHandleKeyDown);
+      this.input.removeEventListener("pointerdown", this.#boundRangePointerDown);
+      this.input.removeEventListener("pointerup", this.#boundRangePointerUp);
     }
     if (this.figInputNumber) {
       this.figInputNumber.removeEventListener(
@@ -3925,6 +4460,10 @@ class FigSlider extends HTMLElement {
       if (deltaDefault !== null) return this.#clampToBounds(deltaDefault);
       return this.#clampToBounds(0);
     }
+    if (this.type === "range") {
+      const { min, max } = this.#getBounds();
+      return this.#clampToBounds(min + (max - min) / 2);
+    }
     const { min } = this.#getBounds();
     return min;
   }
@@ -3934,11 +4473,22 @@ class FigSlider extends HTMLElement {
     return this.#clampToBounds(parsed);
   }
   #syncProperties() {
-    let complete = this.#calculateNormal(this.value);
-    this.style.setProperty("--slider-complete", complete);
-    let defaultValue = this.#calculateNormal(this.default);
-    this.style.setProperty("--default", defaultValue);
-    this.style.setProperty("--unchanged", complete === defaultValue ? 1 : 0);
+    const complete = this.#calculateNormal(this.value);
+    const defaultValue = this.#calculateNormal(this.default);
+    const unchanged = complete === defaultValue ? 1 : 0;
+
+    if (this.#lastSliderComplete !== complete) {
+      this.style.setProperty("--slider-complete", complete);
+      this.#lastSliderComplete = complete;
+    }
+    if (this.#lastSliderDefault !== defaultValue) {
+      this.style.setProperty("--default", defaultValue);
+      this.#lastSliderDefault = defaultValue;
+    }
+    if (this.#lastSliderUnchanged !== unchanged) {
+      this.style.setProperty("--unchanged", unchanged);
+      this.#lastSliderUnchanged = unchanged;
+    }
   }
   #syncValue() {
     let val = this.input.value;
@@ -3953,6 +4503,39 @@ class FigSlider extends HTMLElement {
       );
     }
   }
+  #syncInputA11yAttributes() {
+    if (!this.input) return;
+    if (this.text) {
+      this.input.setAttribute("aria-hidden", "true");
+      ["aria-label", "aria-labelledby", "aria-describedby", "aria-valuetext"].forEach(
+        (name) => this.input.removeAttribute(name),
+      );
+      this.#syncTextInputA11yAttributes();
+      return;
+    }
+    this.input.removeAttribute("aria-hidden");
+    this.#a11yAttributes.forEach((name) => {
+      const value = this.getAttribute(name);
+      if (value === null) {
+        this.input.removeAttribute(name);
+      } else {
+        this.input.setAttribute(name, value);
+      }
+    });
+  }
+  #syncTextInputA11yAttributes() {
+    if (!this.figInputNumber) return;
+    ["aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-required"].forEach(
+      (name) => {
+        const value = this.getAttribute(name);
+        if (value === null) {
+          this.figInputNumber.removeAttribute(name);
+        } else {
+          this.figInputNumber.setAttribute(name, value);
+        }
+      },
+    );
+  }
 
   #handleInput() {
     this.#showEmptyTextValue = false;
@@ -3971,6 +4554,34 @@ class FigSlider extends HTMLElement {
     );
   }
 
+  #handleKeyDown(event) {
+    if (this.disabled || !event.shiftKey) return;
+    if (
+      !["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key)
+    ) {
+      return;
+    }
+
+    event.preventDefault();
+    this.#showEmptyTextValue = false;
+
+    const direction =
+      event.key === "ArrowRight" || event.key === "ArrowUp" ? 1 : -1;
+    const current = this.#toFiniteNumber(this.input.value) ?? this.#getFallbackValue();
+    const step = this.#toFiniteNumber(this.step) ?? 1;
+    const nextValue = this.#normalizeSliderValue(current + step * 10 * direction);
+
+    this.value = nextValue;
+    this.input.value = String(nextValue);
+    this.#syncValue();
+    this.dispatchEvent(
+      new CustomEvent("input", { detail: this.value, bubbles: true }),
+    );
+    this.dispatchEvent(
+      new CustomEvent("change", { detail: this.value, bubbles: true }),
+    );
+  }
+
   #handleTextChange() {
     if (this.figInputNumber) {
       const rawTextValue = this.figInputNumber.value;
@@ -4004,10 +4615,20 @@ class FigSlider extends HTMLElement {
       "placeholder",
       "default",
       "precision",
+      "aria-label",
+      "aria-labelledby",
+      "aria-describedby",
+      "aria-invalid",
+      "aria-required",
+      "aria-valuetext",
     ];
   }
 
   focus() {
+    if (this.text && this.figInputNumber) {
+      this.figInputNumber.focus();
+      return;
+    }
     this.input.focus();
   }
 
@@ -4082,6 +4703,14 @@ class FigSlider extends HTMLElement {
           this.text = newValue !== "false";
           this.#regenerateInnerHTML();
           break;
+        case "aria-label":
+        case "aria-labelledby":
+        case "aria-describedby":
+        case "aria-invalid":
+        case "aria-required":
+        case "aria-valuetext":
+          this.#syncInputA11yAttributes();
+          break;
         default:
           this[name] = this.input[name] = newValue;
           this.#syncValue();
@@ -4113,6 +4742,14 @@ class FigInputText extends HTMLElement {
   #boundMouseDown;
   #boundInputChange;
   #boundNativeInput;
+  #boundFocusControl;
+  #a11yAttributes = [
+    "aria-label",
+    "aria-labelledby",
+    "aria-describedby",
+    "aria-invalid",
+    "aria-required",
+  ];
 
   constructor() {
     super();
@@ -4128,6 +4765,7 @@ class FigInputText extends HTMLElement {
     this.#boundNativeInput = () => {
       this.#syncSearchClearVisibility();
     };
+    this.#boundFocusControl = this.focus.bind(this);
   }
 
   connectedCallback() {
@@ -4144,16 +4782,6 @@ class FigInputText extends HTMLElement {
       if (this.getAttribute("step")) {
         this.step = Number(this.getAttribute("step"));
       }
-
-      if (this.getAttribute("min")) {
-        this.input.setAttribute("min", String(this.min));
-      }
-      if (this.getAttribute("max")) {
-        this.input.setAttribute("max", String(this.max));
-      }
-      if (this.getAttribute("step")) {
-        this.input.setAttribute("step", String(this.step));
-      }
       if (this.getAttribute("min")) {
         this.min = Number(this.getAttribute("min"));
       }
@@ -4178,46 +4806,46 @@ class FigInputText extends HTMLElement {
       placeholder="${this.placeholder}">${this.value}</textarea>`;
     }
 
-    //child nodes hack
-    requestAnimationFrame(() => {
-      let append = this.querySelector("[slot=append]");
-      let prepend = this.querySelector("[slot=prepend]");
+    let append = this.querySelector("[slot=append]");
+    let prepend = this.querySelector("[slot=prepend]");
 
-      this.innerHTML = html;
+    this.innerHTML = html;
 
-      if (prepend) {
-        prepend.addEventListener("click", this.focus.bind(this));
-        this.prepend(prepend);
-      }
-      if (append) {
-        append.addEventListener("click", this.focus.bind(this));
-        this.append(append);
-      }
+    if (prepend) {
+      prepend.removeEventListener("click", this.#boundFocusControl);
+      prepend.addEventListener("click", this.#boundFocusControl);
+      this.prepend(prepend);
+    }
+    if (append) {
+      append.removeEventListener("click", this.#boundFocusControl);
+      append.addEventListener("click", this.#boundFocusControl);
+      this.append(append);
+    }
 
-      this.input = this.querySelector("input,textarea");
-      this.input.readOnly = this.readonly;
-      this.#syncSearchPrefix();
-      this.#syncSearchClear();
-      this.#syncSearchClearVisibility();
-      this.#syncPasswordToggle();
+    this.input = this.querySelector("input,textarea");
+    this.input.readOnly = this.readonly;
+    this.#syncInputA11yAttributes();
+    this.#syncSearchPrefix();
+    this.#syncSearchClear();
+    this.#syncSearchClearVisibility();
+    this.#syncPasswordToggle();
 
-      if (this.type === "number") {
-        if (this.getAttribute("min")) {
-          this.input.setAttribute("min", this.#transformNumber(this.min));
-        }
-        if (this.getAttribute("max")) {
-          this.input.setAttribute("max", this.#transformNumber(this.max));
-        }
-        if (this.getAttribute("step")) {
-          this.input.setAttribute("step", this.#transformNumber(this.step));
-        }
-        this.addEventListener("pointerdown", this.#boundMouseDown);
+    if (this.type === "number") {
+      if (this.getAttribute("min")) {
+        this.input.setAttribute("min", this.#transformNumber(this.min));
       }
-      this.input.removeEventListener("change", this.#boundInputChange);
-      this.input.addEventListener("change", this.#boundInputChange);
-      this.input.removeEventListener("input", this.#boundNativeInput);
-      this.input.addEventListener("input", this.#boundNativeInput);
-    });
+      if (this.getAttribute("max")) {
+        this.input.setAttribute("max", this.#transformNumber(this.max));
+      }
+      if (this.getAttribute("step")) {
+        this.input.setAttribute("step", this.#transformNumber(this.step));
+      }
+      this.addEventListener("pointerdown", this.#boundMouseDown);
+    }
+    this.input.removeEventListener("change", this.#boundInputChange);
+    this.input.addEventListener("change", this.#boundInputChange);
+    this.input.removeEventListener("input", this.#boundNativeInput);
+    this.input.addEventListener("input", this.#boundNativeInput);
   }
 
   disconnectedCallback() {
@@ -4234,6 +4862,17 @@ class FigInputText extends HTMLElement {
   focus() {
     this.input.focus();
   }
+  #syncInputA11yAttributes() {
+    if (!this.input) return;
+    this.#a11yAttributes.forEach((name) => {
+      const value = this.getAttribute(name);
+      if (value === null) {
+        this.input.removeAttribute(name);
+      } else {
+        this.input.setAttribute(name, value);
+      }
+    });
+  }
   #syncSearchPrefix() {
     const generated = this.querySelector(
       '[slot="prepend"][data-generated="search-prefix"]',
@@ -4483,6 +5122,11 @@ class FigInputText extends HTMLElement {
       "max",
       "transform",
       "name",
+      "aria-label",
+      "aria-labelledby",
+      "aria-describedby",
+      "aria-invalid",
+      "aria-required",
     ];
   }
 
@@ -4540,6 +5184,13 @@ class FigInputText extends HTMLElement {
           this.#syncSearchClearVisibility();
           this.#syncPasswordToggle();
           break;
+        case "aria-label":
+        case "aria-labelledby":
+        case "aria-describedby":
+        case "aria-invalid":
+        case "aria-required":
+          this.#syncInputA11yAttributes();
+          break;
         default:
           this[name] = this.input[name] = newValue;
           break;
@@ -4574,6 +5225,7 @@ class FigInputNumber extends HTMLElement {
   #boundFocus;
   #boundBlur;
   #boundKeyDown;
+  #boundFocusControl;
   #units;
   #rawUnits;
   #unitsDisallow;
@@ -4581,6 +5233,13 @@ class FigInputNumber extends HTMLElement {
   #precision;
   #isInteracting = false;
   #stepperEl = null;
+  #a11yAttributes = [
+    "aria-label",
+    "aria-labelledby",
+    "aria-describedby",
+    "aria-invalid",
+    "aria-required",
+  ];
   static #DEFAULT_UNITS_DISALLOW = "px";
 
   #parseUnitsDisallowList(value) {
@@ -4659,6 +5318,7 @@ class FigInputNumber extends HTMLElement {
     this.value = value;
     this.input.value = this.#formatWithUnit(this.value);
     this.#syncStepperState();
+    this.#syncSpinbuttonAria();
     this.dispatchEvent(
       new CustomEvent("input", { detail: this.value, bubbles: true }),
     );
@@ -4691,6 +5351,7 @@ class FigInputNumber extends HTMLElement {
     this.#boundKeyDown = (e) => {
       this.#handleKeyDown(e);
     };
+    this.#boundFocusControl = this.focus.bind(this);
   }
 
   connectedCallback() {
@@ -4734,55 +5395,56 @@ class FigInputNumber extends HTMLElement {
       placeholder="${this.placeholder}"
       value="${this.#formatWithUnit(this.value)}" />`;
 
-    //child nodes hack
-    requestAnimationFrame(() => {
-      let append = this.querySelector("[slot=append]");
-      let prepend = this.querySelector("[slot=prepend]");
+    let append = this.querySelector("[slot=append]");
+    let prepend = this.querySelector("[slot=prepend]");
 
-      this.innerHTML = html;
+    this.innerHTML = html;
 
-      if (prepend) {
-        prepend.addEventListener("click", this.focus.bind(this));
-        this.prepend(prepend);
-      }
-      if (append) {
-        append.addEventListener("click", this.focus.bind(this));
-        this.append(append);
-      }
+    if (prepend) {
+      prepend.removeEventListener("click", this.#boundFocusControl);
+      prepend.addEventListener("click", this.#boundFocusControl);
+      this.prepend(prepend);
+    }
+    if (append) {
+      append.removeEventListener("click", this.#boundFocusControl);
+      append.addEventListener("click", this.#boundFocusControl);
+      this.append(append);
+    }
 
-      this.input = this.querySelector("input");
+    this.input = this.querySelector("input");
+    this.#syncInputA11yAttributes();
 
-      if (this.getAttribute("min")) {
-        this.min = Number(this.getAttribute("min"));
-      }
-      if (this.getAttribute("max")) {
-        this.max = Number(this.getAttribute("max"));
-      }
-      if (this.getAttribute("step")) {
-        this.step = Number(this.getAttribute("step"));
-      }
+    if (this.getAttribute("min")) {
+      this.min = Number(this.getAttribute("min"));
+    }
+    if (this.getAttribute("max")) {
+      this.max = Number(this.getAttribute("max"));
+    }
+    if (this.getAttribute("step")) {
+      this.step = Number(this.getAttribute("step"));
+    }
 
-      this.#syncSteppers(hasSteppers);
+    this.#syncSteppers(hasSteppers);
 
-      // Set disabled state if present
-      if (this.hasAttribute("disabled")) {
-        const disabledAttr = this.getAttribute("disabled");
-        this.disabled = this.input.disabled = disabledAttr !== "false";
-      }
-      this.#syncStepperState();
+    // Set disabled state if present
+    if (this.hasAttribute("disabled")) {
+      const disabledAttr = this.getAttribute("disabled");
+      this.disabled = this.input.disabled = disabledAttr !== "false";
+    }
+    this.#syncStepperState();
+    this.#syncSpinbuttonAria();
 
-      this.addEventListener("pointerdown", this.#boundMouseDown);
-      this.input.removeEventListener("change", this.#boundInputChange);
-      this.input.addEventListener("change", this.#boundInputChange);
-      this.input.removeEventListener("input", this.#boundInput);
-      this.input.addEventListener("input", this.#boundInput);
-      this.input.removeEventListener("focus", this.#boundFocus);
-      this.input.addEventListener("focus", this.#boundFocus);
-      this.input.removeEventListener("blur", this.#boundBlur);
-      this.input.addEventListener("blur", this.#boundBlur);
-      this.input.removeEventListener("keydown", this.#boundKeyDown);
-      this.input.addEventListener("keydown", this.#boundKeyDown);
-    });
+    this.addEventListener("pointerdown", this.#boundMouseDown);
+    this.input.removeEventListener("change", this.#boundInputChange);
+    this.input.addEventListener("change", this.#boundInputChange);
+    this.input.removeEventListener("input", this.#boundInput);
+    this.input.addEventListener("input", this.#boundInput);
+    this.input.removeEventListener("focus", this.#boundFocus);
+    this.input.addEventListener("focus", this.#boundFocus);
+    this.input.removeEventListener("blur", this.#boundBlur);
+    this.input.addEventListener("blur", this.#boundBlur);
+    this.input.removeEventListener("keydown", this.#boundKeyDown);
+    this.input.addEventListener("keydown", this.#boundKeyDown);
   }
 
   disconnectedCallback() {
@@ -4803,6 +5465,41 @@ class FigInputNumber extends HTMLElement {
     this.input.focus();
   }
 
+  #syncInputA11yAttributes() {
+    if (!this.input) return;
+    this.#a11yAttributes.forEach((name) => {
+      const value = this.getAttribute(name);
+      if (value === null) {
+        this.input.removeAttribute(name);
+      } else {
+        this.input.setAttribute(name, value);
+      }
+    });
+  }
+
+  #syncSpinbuttonAria() {
+    if (!this.input) return;
+    this.input.setAttribute("role", "spinbutton");
+    if (typeof this.min === "number") {
+      this.input.setAttribute("aria-valuemin", String(this.min));
+    } else {
+      this.input.removeAttribute("aria-valuemin");
+    }
+    if (typeof this.max === "number") {
+      this.input.setAttribute("aria-valuemax", String(this.max));
+    } else {
+      this.input.removeAttribute("aria-valuemax");
+    }
+    const value = this.value === "" ? null : Number(this.value);
+    if (Number.isFinite(value)) {
+      this.input.setAttribute("aria-valuenow", String(value));
+      this.input.setAttribute("aria-valuetext", this.#formatWithUnit(this.value));
+    } else {
+      this.input.removeAttribute("aria-valuenow");
+      this.input.removeAttribute("aria-valuetext");
+    }
+  }
+
   #getNumericValue(str) {
     if (!str) return "";
     if (!this.#units) {
@@ -4882,6 +5579,7 @@ class FigInputNumber extends HTMLElement {
       e.target.value = "";
     }
     this.#syncStepperState();
+    this.#syncSpinbuttonAria();
     this.dispatchEvent(
       new CustomEvent("change", { detail: this.value, bubbles: true }),
     );
@@ -4908,6 +5606,7 @@ class FigInputNumber extends HTMLElement {
     this.value = value;
     this.input.value = this.#formatWithUnit(this.value);
     this.#syncStepperState();
+    this.#syncSpinbuttonAria();
 
     this.dispatchEvent(
       new CustomEvent("input", { detail: this.value, bubbles: true }),
@@ -4925,6 +5624,7 @@ class FigInputNumber extends HTMLElement {
       this.value = "";
     }
     this.#syncStepperState();
+    this.#syncSpinbuttonAria();
     this.dispatchEvent(
       new CustomEvent("input", { detail: this.value, bubbles: true }),
     );
@@ -4943,6 +5643,7 @@ class FigInputNumber extends HTMLElement {
       e.target.value = "";
     }
     this.#syncStepperState();
+    this.#syncSpinbuttonAria();
     this.dispatchEvent(
       new CustomEvent("input", { detail: this.value, bubbles: true }),
     );
@@ -4964,6 +5665,7 @@ class FigInputNumber extends HTMLElement {
     this.value = value;
     this.input.value = this.#formatWithUnit(this.value);
     this.#syncStepperState();
+    this.#syncSpinbuttonAria();
     this.dispatchEvent(
       new CustomEvent("input", { detail: this.value, bubbles: true }),
     );
@@ -5037,6 +5739,11 @@ class FigInputNumber extends HTMLElement {
       "unit-position",
       "steppers",
       "precision",
+      "aria-label",
+      "aria-labelledby",
+      "aria-describedby",
+      "aria-invalid",
+      "aria-required",
     ];
   }
 
@@ -5052,6 +5759,7 @@ class FigInputNumber extends HTMLElement {
           this.#rawUnits = newValue || "";
           this.#setUnitsFromAttributes();
           this.input.value = this.#formatWithUnit(this.value);
+          this.#syncSpinbuttonAria();
           break;
         case "units-disallow":
           this.#unitsDisallow = this.#parseUnitsDisallowList(
@@ -5061,14 +5769,17 @@ class FigInputNumber extends HTMLElement {
           );
           this.#setUnitsFromAttributes();
           this.input.value = this.#formatWithUnit(this.value);
+          this.#syncSpinbuttonAria();
           break;
         case "unit-position":
           this.#unitPosition = newValue || "suffix";
           this.input.value = this.#formatWithUnit(this.value);
+          this.#syncSpinbuttonAria();
           break;
         case "transform":
           this.transform = Number(newValue) || 1;
           this.input.value = this.#formatWithUnit(this.value);
+          this.#syncSpinbuttonAria();
           break;
         case "value":
           if (this.#isInteracting) break;
@@ -5080,6 +5791,7 @@ class FigInputNumber extends HTMLElement {
           this.value = value;
           this.input.value = this.#formatWithUnit(this.value);
           this.#syncStepperState();
+          this.#syncSpinbuttonAria();
           break;
         case "min":
         case "max":
@@ -5087,10 +5799,12 @@ class FigInputNumber extends HTMLElement {
           if (newValue === null || newValue === "") {
             this[name] = undefined;
             this.#syncStepperState();
+            this.#syncSpinbuttonAria();
             break;
           }
           this[name] = Number(newValue);
           this.#syncStepperState();
+          this.#syncSpinbuttonAria();
           break;
         case "steppers": {
           const hasSteppers = newValue !== null && newValue !== "false";
@@ -5100,6 +5814,7 @@ class FigInputNumber extends HTMLElement {
         case "precision":
           this.#precision = newValue !== null ? Number(newValue) : 2;
           this.input.value = this.#formatWithUnit(this.value);
+          this.#syncSpinbuttonAria();
           break;
         case "name":
           this[name] = this.input[name] = newValue;
@@ -5109,6 +5824,13 @@ class FigInputNumber extends HTMLElement {
           this.placeholder = newValue ?? "";
           this.input.placeholder = this.placeholder;
           break;
+        case "aria-label":
+        case "aria-labelledby":
+        case "aria-describedby":
+        case "aria-invalid":
+        case "aria-required":
+          this.#syncInputA11yAttributes();
+          break;
         default:
           this[name] = this.input[name] = newValue;
           break;
@@ -5129,9 +5851,7 @@ class FigAvatar extends HTMLElement {
     this.initials = this.getInitials(this.name);
     this.setAttribute("initials", this.initials);
     this.setSrc(this.src);
-    requestAnimationFrame(() => {
-      this.img = this.querySelector("img");
-    });
+    this.img = this.querySelector("img");
   }
   setSrc(src) {
     this.src = src;
@@ -5172,9 +5892,15 @@ class FigField extends HTMLElement {
   #toggleable = false;
   #chevron = null;
   #boundToggle = null;
+  #boundFocus = null;
+  #boundLabelEnter = null;
+  #boundLabelLeave = null;
 
   constructor() {
     super();
+    this.#boundFocus = this.focus.bind(this);
+    this.#boundLabelEnter = this.#onLabelEnter.bind(this);
+    this.#boundLabelLeave = this.#onLabelLeave.bind(this);
   }
 
   static get observedAttributes() {
@@ -5182,51 +5908,52 @@ class FigField extends HTMLElement {
   }
 
   connectedCallback() {
-    requestAnimationFrame(() => {
-      this.label = this.querySelector(":scope>label");
-      this.input = Array.from(this.childNodes).find((node) =>
-        node.nodeName.toLowerCase().startsWith("fig-"),
-      );
+    queueMicrotask(() => {
+      if (this.isConnected) this.#setup();
+    });
+  }
+
+  #setup() {
+    this.label = this.querySelector(":scope>label");
+    this.input = Array.from(this.childNodes).find((node) =>
+      node.nodeName.toLowerCase().startsWith("fig-"),
+    );
 
-      this.#toggleable = !!(this.input && "open" in this.input);
+    this.#toggleable = !!(this.input && "open" in this.input);
 
-      if (this.#toggleable && this.label) {
+    if (this.#toggleable && this.label) {
+      if (!this.#chevron || !this.#chevron.isConnected) {
         this.#chevron = createFigIcon("chevron", {
           size: "small",
           className: "fig-field-chevron",
         });
         this.insertBefore(this.#chevron, this.label);
-
-        this.#boundToggle = (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          if (this.input && typeof this.input.open !== "undefined") {
-            this.input.open = !this.input.open;
-          }
-        };
-        this.#chevron.addEventListener("click", this.#boundToggle);
-        this.label.addEventListener("click", this.#boundToggle);
-      } else if (this.input && this.label) {
-        this.label.addEventListener("click", this.focus.bind(this));
       }
 
-      if (this.input && this.label && !this.#toggleable) {
-        let inputId = this.input.getAttribute("id") || figUniqueId();
-        this.input.setAttribute("id", inputId);
-        this.label.setAttribute("for", inputId);
-      }
+      this.#boundToggle = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (this.input && typeof this.input.open !== "undefined") {
+          this.input.open = !this.input.open;
+        }
+      };
+      this.#chevron.addEventListener("click", this.#boundToggle);
+      this.label.addEventListener("click", this.#boundToggle);
+    } else if (this.input && this.label) {
+      this.label.removeEventListener("click", this.#boundFocus);
+      this.label.addEventListener("click", this.#boundFocus);
+    }
+
+    if (this.input && this.label && !this.#toggleable) {
+      this.#syncLabelAssociation();
+    }
 
-      if (this.label) {
-        this.label.addEventListener(
-          "pointerenter",
-          this.#onLabelEnter.bind(this),
-        );
-        this.label.addEventListener(
-          "pointerleave",
-          this.#onLabelLeave.bind(this),
-        );
-      }
-    });
+    if (this.label) {
+      this.label.removeEventListener("pointerenter", this.#boundLabelEnter);
+      this.label.addEventListener("pointerenter", this.#boundLabelEnter);
+      this.label.removeEventListener("pointerleave", this.#boundLabelLeave);
+      this.label.addEventListener("pointerleave", this.#boundLabelLeave);
+    }
   }
 
   disconnectedCallback() {
@@ -5234,6 +5961,15 @@ class FigField extends HTMLElement {
     if (this.label && this.#boundToggle) {
       this.label.removeEventListener("click", this.#boundToggle);
     }
+    if (this.label && this.#boundFocus) {
+      this.label.removeEventListener("click", this.#boundFocus);
+    }
+    if (this.label && this.#boundLabelEnter) {
+      this.label.removeEventListener("pointerenter", this.#boundLabelEnter);
+    }
+    if (this.label && this.#boundLabelLeave) {
+      this.label.removeEventListener("pointerleave", this.#boundLabelLeave);
+    }
     if (this.#chevron && this.#boundToggle) {
       this.#chevron.removeEventListener("click", this.#boundToggle);
     }
@@ -5248,11 +5984,36 @@ class FigField extends HTMLElement {
     if (this.label) FigTooltip.hide(this.label);
   }
 
+  #syncLabelAssociation() {
+    if (!this.input || !this.label) return;
+    const labelId = this.label.getAttribute("id") || figUniqueId();
+    this.label.setAttribute("id", labelId);
+    const nativeInputs = this.input.querySelectorAll("input, select, textarea");
+    if (nativeInputs.length === 1) {
+      const nativeInput = nativeInputs[0];
+      const inputId = nativeInput.getAttribute("id") || figUniqueId();
+      nativeInput.setAttribute("id", inputId);
+      this.label.setAttribute("for", inputId);
+      if (this.input.getAttribute("aria-labelledby") === labelId) {
+        this.input.removeAttribute("aria-labelledby");
+      }
+      if (!nativeInput.hasAttribute("aria-labelledby")) {
+        nativeInput.setAttribute("aria-labelledby", labelId);
+      }
+      return;
+    }
+    this.label.removeAttribute("for");
+    if (!this.input.hasAttribute("aria-label") && !this.input.hasAttribute("aria-labelledby")) {
+      this.input.setAttribute("aria-labelledby", labelId);
+    }
+  }
+
   attributeChangedCallback(name, oldValue, newValue) {
     switch (name) {
       case "label":
         if (this.label) {
           this.label.textContent = newValue;
+          this.#syncLabelAssociation();
         }
         break;
     }
@@ -5323,15 +6084,9 @@ class FigInputColor extends HTMLElement {
   }
 
   connectedCallback() {
-    if (this.#renderRAF) cancelAnimationFrame(this.#renderRAF);
-    this.#renderRAF = requestAnimationFrame(() => {
-      this.#renderRAF = null;
-      this.#buildUI();
-    });
+    this.#buildUI();
   }
 
-  #renderRAF = null;
-
   #buildUI() {
     this.#setValues(this.getAttribute("value"));
 
@@ -5371,61 +6126,60 @@ class FigInputColor extends HTMLElement {
     }
     this.innerHTML = html;
 
-    requestAnimationFrame(() => {
-      this.#swatch = this.querySelector("fig-chit");
-      this.#fillPicker = this.querySelector("fig-fill-picker");
-      this.#textInput = this.querySelector("fig-input-text:not([type=number])");
-      this.#alphaInput = this.querySelector("fig-input-number");
+    this.#swatch = this.querySelector("fig-chit");
+    this.#fillPicker = this.querySelector("fig-fill-picker");
+    this.#textInput = this.querySelector("fig-input-text:not([type=number])");
+    this.#alphaInput = this.querySelector("fig-input-number");
+    this.#syncA11yAttributes();
 
-      // Setup swatch (native picker)
-      if (this.#swatch) {
-        this.#swatch.disabled = this.hasAttribute("disabled");
-        const swatchInput = this.#swatch.querySelector('input[type="color"]');
-        if (this.#textInput || this.hasAttribute("swatch-disabled")) {
-          swatchInput?.setAttribute("tabindex", "-1");
-        }
-        if (this.hasAttribute("swatch-disabled")) {
-          swatchInput?.setAttribute("disabled", "");
-          if (swatchInput) swatchInput.style.pointerEvents = "none";
-        }
-        this.#swatch.addEventListener("pointerdown", this.#handleSwatchPointerDown.bind(this), {
-          capture: true,
-        });
-        this.#swatch.addEventListener("click", this.#handleSwatchClick.bind(this), {
-          capture: true,
-        });
-        swatchInput?.addEventListener("keydown", this.#handleSwatchKeyDown.bind(this));
-        this.#swatch.addEventListener("input", this.#handleInput.bind(this));
+    // Setup swatch (native picker)
+    if (this.#swatch) {
+      this.#swatch.disabled = this.hasAttribute("disabled");
+      const swatchInput = this.#swatch.querySelector('input[type="color"]');
+      if (this.#textInput || this.hasAttribute("swatch-disabled")) {
+        swatchInput?.setAttribute("tabindex", "-1");
       }
-
-      if (this.#textInput) {
-        const hex = this.rgbAlphaToHex(this.rgba, 1);
-        // Display without # prefix
-        this.#textInput.value = hex.slice(1).toUpperCase();
-        if (this.#swatch) {
-          this.#swatch.background = hex;
-        }
-        this.#textInput.addEventListener(
-          "input",
-          this.#handleTextInput.bind(this),
-        );
-        this.#textInput.addEventListener(
-          "change",
-          this.#handleChange.bind(this),
-        );
+      if (this.hasAttribute("swatch-disabled")) {
+        swatchInput?.setAttribute("disabled", "");
+        if (swatchInput) swatchInput.style.pointerEvents = "none";
       }
+      this.#swatch.addEventListener("pointerdown", this.#handleSwatchPointerDown.bind(this), {
+        capture: true,
+      });
+      this.#swatch.addEventListener("click", this.#handleSwatchClick.bind(this), {
+        capture: true,
+      });
+      swatchInput?.addEventListener("keydown", this.#handleSwatchKeyDown.bind(this));
+      this.#swatch.addEventListener("input", this.#handleInput.bind(this));
+    }
 
-      if (this.#alphaInput) {
-        this.#alphaInput.addEventListener(
-          "input",
-          this.#handleAlphaInput.bind(this),
-        );
-        this.#alphaInput.addEventListener(
-          "change",
-          this.#handleChange.bind(this),
-        );
+    if (this.#textInput) {
+      const hex = this.rgbAlphaToHex(this.rgba, 1);
+      // Display without # prefix
+      this.#textInput.value = hex.slice(1).toUpperCase();
+      if (this.#swatch) {
+        this.#swatch.background = hex;
       }
-    });
+      this.#textInput.addEventListener(
+        "input",
+        this.#handleTextInput.bind(this),
+      );
+      this.#textInput.addEventListener(
+        "change",
+        this.#handleChange.bind(this),
+      );
+    }
+
+    if (this.#alphaInput) {
+      this.#alphaInput.addEventListener(
+        "input",
+        this.#handleAlphaInput.bind(this),
+      );
+      this.#alphaInput.addEventListener(
+        "change",
+        this.#handleChange.bind(this),
+      );
+    }
   }
 
   #syncFillPicker() {
@@ -5590,6 +6344,56 @@ class FigInputColor extends HTMLElement {
     this.#swatch?.focus();
   }
 
+  #accessibleName() {
+    return this.getAttribute("aria-label") || "Color";
+  }
+
+  #syncA11yAttributes() {
+    if (!this.hasAttribute("role")) this.setAttribute("role", "group");
+    if (this.#disabled) this.setAttribute("aria-disabled", "true");
+    else this.removeAttribute("aria-disabled");
+
+    const describedBy = this.getAttribute("aria-describedby");
+    const invalid = this.getAttribute("aria-invalid");
+    const required = this.getAttribute("aria-required");
+    const labelledBy = this.getAttribute("aria-labelledby");
+    const name = this.#accessibleName();
+
+    if (this.#textInput) {
+      this.#textInput.setAttribute("aria-label", `${name} hex color`);
+      if (describedBy) this.#textInput.setAttribute("aria-describedby", describedBy);
+      else this.#textInput.removeAttribute("aria-describedby");
+      if (invalid) this.#textInput.setAttribute("aria-invalid", invalid);
+      else this.#textInput.removeAttribute("aria-invalid");
+      if (required) this.#textInput.setAttribute("aria-required", required);
+      else this.#textInput.removeAttribute("aria-required");
+    }
+
+    if (this.#alphaInput) {
+      this.#alphaInput.setAttribute("aria-label", `${name} opacity`);
+      if (describedBy) this.#alphaInput.setAttribute("aria-describedby", describedBy);
+      else this.#alphaInput.removeAttribute("aria-describedby");
+      if (invalid) this.#alphaInput.setAttribute("aria-invalid", invalid);
+      else this.#alphaInput.removeAttribute("aria-invalid");
+      if (required) this.#alphaInput.setAttribute("aria-required", required);
+      else this.#alphaInput.removeAttribute("aria-required");
+    }
+
+    if (!this.#textInput) {
+      const swatchInput = this.#swatch?.querySelector('input[type="color"]');
+      if (!swatchInput) return;
+      if (labelledBy) {
+        swatchInput.setAttribute("aria-labelledby", labelledBy);
+        swatchInput.removeAttribute("aria-label");
+      } else {
+        swatchInput.setAttribute("aria-label", name);
+        swatchInput.removeAttribute("aria-labelledby");
+      }
+      if (describedBy) swatchInput.setAttribute("aria-describedby", describedBy);
+      else swatchInput.removeAttribute("aria-describedby");
+    }
+  }
+
   #handleInput(event) {
     //do not propagate to onInput handler for web component
     event.stopPropagation();
@@ -5662,6 +6466,11 @@ class FigInputColor extends HTMLElement {
       "alpha",
       "text",
       "disabled",
+      "aria-label",
+      "aria-labelledby",
+      "aria-describedby",
+      "aria-invalid",
+      "aria-required",
     ];
   }
 
@@ -5713,6 +6522,13 @@ class FigInputColor extends HTMLElement {
       case "disabled":
         this.#syncDisabled();
         break;
+      case "aria-label":
+      case "aria-labelledby":
+      case "aria-describedby":
+      case "aria-invalid":
+      case "aria-required":
+        this.#syncA11yAttributes();
+        break;
     }
   }
 
@@ -5729,6 +6545,7 @@ class FigInputColor extends HTMLElement {
       if (disabled) child.setAttribute("disabled", "");
       else child.removeAttribute("disabled");
     }
+    this.#syncA11yAttributes();
     if (this.#fillPicker) {
       this.#syncFillPicker();
     }
@@ -5848,18 +6665,15 @@ const GRADIENT_HUE_INTERPOLATIONS = [
   "decreasing",
 ];
 
-const GRADIENT_PICKER_SPACES = ["srgb-linear", "oklab", "oklch"];
+const GRADIENT_PICKER_SPACES = ["srgb", "srgb-linear", "oklab", "oklch"];
 
 function normalizeGradientConfig(gradient) {
   const next = { ...(gradient ?? {}) };
   let interpolationSpace = String(
-    next.interpolationSpace ?? "oklab",
+    next.interpolationSpace ?? "srgb",
   ).toLowerCase();
   if (!GRADIENT_INTERPOLATION_SPACES.includes(interpolationSpace)) {
-    interpolationSpace = "oklab";
-  }
-  if (interpolationSpace === "srgb" || interpolationSpace === "display-p3") {
-    interpolationSpace = "oklab";
+    interpolationSpace = "srgb";
   }
   next.interpolationSpace = interpolationSpace;
 
@@ -5888,6 +6702,9 @@ function gradientToValueShape(gradient) {
 
 function gradientInterpolationClause(gradient) {
   const normalized = normalizeGradientConfig(gradient);
+  if (normalized.interpolationSpace === "srgb") {
+    return "";
+  }
   if (normalized.interpolationSpace === "oklch") {
     return `in oklch ${normalized.hueInterpolation} hue`;
   }
@@ -6115,7 +6932,7 @@ class FigInputFill extends HTMLElement {
   #gradient = {
     type: "linear",
     angle: 180,
-    interpolationSpace: "oklab",
+    interpolationSpace: "srgb",
     hueInterpolation: "shorter",
     stops: [
       { position: 0, color: "#D9D9D9", opacity: 100 },
@@ -6131,10 +6948,21 @@ class FigInputFill extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["value", "disabled", "mode", "experimental", "alpha"];
+    return [
+      "value",
+      "disabled",
+      "mode",
+      "experimental",
+      "alpha",
+      "aria-label",
+      "aria-describedby",
+      "aria-invalid",
+      "aria-required",
+    ];
   }
 
   connectedCallback() {
+    if (!this.hasAttribute("role")) this.setAttribute("role", "group");
     this.#parseValue();
     this.#render();
   }
@@ -6257,6 +7085,7 @@ class FigInputFill extends HTMLElement {
 
   #syncDisabled() {
     const disabled = this.hasAttribute("disabled");
+    this.setAttribute("aria-disabled", disabled ? "true" : "false");
     for (const child of [
       this.#fillPicker,
       this.#opacityInput,
@@ -6268,6 +7097,28 @@ class FigInputFill extends HTMLElement {
     }
   }
 
+  #syncA11y() {
+    if (!this.hasAttribute("role")) this.setAttribute("role", "group");
+    this.#syncDisabled();
+    const name = this.getAttribute("aria-label") || "Fill";
+    const describedBy = this.getAttribute("aria-describedby");
+    const invalid = this.getAttribute("aria-invalid");
+    const required = this.getAttribute("aria-required");
+    const syncState = (el, label) => {
+      if (!el) return;
+      el.setAttribute("aria-label", label);
+      if (describedBy) el.setAttribute("aria-describedby", describedBy);
+      else el.removeAttribute("aria-describedby");
+      if (invalid) el.setAttribute("aria-invalid", invalid);
+      else el.removeAttribute("aria-invalid");
+      if (required) el.setAttribute("aria-required", required);
+      else el.removeAttribute("aria-required");
+    };
+    syncState(this.#fillPicker, `${name} picker`);
+    syncState(this.#hexInput, `${name} hex color`);
+    syncState(this.#opacityInput, `${name} opacity`);
+  }
+
   #render() {
     const disabled = this.hasAttribute("disabled");
     const fillPickerValue = JSON.stringify(this.value);
@@ -6347,127 +7198,126 @@ class FigInputFill extends HTMLElement {
   }
 
   #setupEventListeners() {
-    requestAnimationFrame(() => {
-      this.#fillPicker = this.querySelector("fig-fill-picker");
-      this.#opacityInput = this.querySelector(".fig-input-fill-opacity");
-      this.#hexInput = this.querySelector(".fig-input-fill-hex");
-      const label = this.querySelector(".fig-input-fill-label");
-
-      // Label click triggers fill picker
-      if (label && this.#fillPicker) {
-        label.addEventListener("click", () => {
-          const chit = this.#fillPicker.querySelector("fig-chit");
-          if (chit) {
-            chit.click();
-          }
-        });
+    this.#fillPicker = this.querySelector("fig-fill-picker");
+    this.#opacityInput = this.querySelector(".fig-input-fill-opacity");
+    this.#hexInput = this.querySelector(".fig-input-fill-hex");
+    const label = this.querySelector(".fig-input-fill-label");
+    this.#syncA11y();
+
+    // Label click triggers fill picker
+    if (label && this.#fillPicker) {
+      label.addEventListener("click", () => {
+        const chit = this.#fillPicker.querySelector("fig-chit");
+        if (chit) {
+          chit.click();
+        }
+      });
+    }
+
+    if (this.#fillPicker) {
+      const anchor = this.getAttribute("picker-anchor");
+      if (!anchor || anchor === "self") {
+        this.#fillPicker.anchorElement = this;
+      } else {
+        const el = document.querySelector(anchor);
+        if (el) this.#fillPicker.anchorElement = el;
       }
 
-      if (this.#fillPicker) {
-        const anchor = this.getAttribute("picker-anchor");
-        if (!anchor || anchor === "self") {
-          this.#fillPicker.anchorElement = this;
-        } else {
-          const el = document.querySelector(anchor);
-          if (el) this.#fillPicker.anchorElement = el;
+      this.#fillPicker.addEventListener("input", (e) => {
+        e.stopPropagation();
+        const detail = e.detail;
+        if (!detail) return;
+
+        const newType = detail.type;
+        const typeChanged = newType !== this.#fillType;
+
+        // Update internal state
+        this.#fillType = newType;
+        switch (newType) {
+          case "solid":
+            this.#solid.color = detail.color;
+            this.#solid.alpha = detail.alpha;
+            break;
+          case "gradient":
+            if (detail.gradient) {
+              this.#gradient = normalizeGradientConfig({
+                ...this.#gradient,
+                ...detail.gradient,
+              });
+            }
+            break;
+          case "image":
+            if (detail.image) this.#image = detail.image;
+            break;
+          case "video":
+            if (detail.video) this.#video = detail.video;
+            break;
         }
 
-        this.#fillPicker.addEventListener("input", (e) => {
-          e.stopPropagation();
-          const detail = e.detail;
-          if (!detail) return;
-
-          const newType = detail.type;
-          const typeChanged = newType !== this.#fillType;
-
-          // Update internal state
-          this.#fillType = newType;
-          switch (newType) {
-            case "solid":
-              this.#solid.color = detail.color;
-              this.#solid.alpha = detail.alpha;
-              break;
-            case "gradient":
-              if (detail.gradient) {
-                this.#gradient = normalizeGradientConfig({
-                  ...this.#gradient,
-                  ...detail.gradient,
-                });
-              }
-              break;
-            case "image":
-              if (detail.image) this.#image = detail.image;
-              break;
-            case "video":
-              if (detail.video) this.#video = detail.video;
-              break;
-          }
-
-          // Update controls (don't re-render to keep dialog open)
-          if (typeChanged) {
-            this.#updateControlsForType();
-          } else {
-            this.#updateControls();
-          }
+        // Update controls (don't re-render to keep dialog open)
+        if (typeChanged) {
+          this.#updateControlsForType();
+        } else {
+          this.#updateControls();
+        }
 
-          this.#emitInput();
-        });
+        this.#emitInput();
+      });
 
-        this.#fillPicker.addEventListener("change", (e) => {
-          e.stopPropagation();
-          this.#emitChange();
-        });
-      }
+      this.#fillPicker.addEventListener("change", (e) => {
+        e.stopPropagation();
+        this.#emitChange();
+      });
+    }
 
-      // Hex input (solid only)
-      if (this.#hexInput) {
-        this.#hexInput.addEventListener("input", (e) => {
-          e.stopPropagation();
-          const hex = "#" + e.target.value.replace("#", "");
-          this.#solid.color = hex;
-          this.#updateFillPicker();
-          this.#emitInput();
-        });
-        this.#hexInput.addEventListener("change", (e) => {
-          e.stopPropagation();
-          this.#emitChange();
-        });
-      }
+    // Hex input (solid only)
+    if (this.#hexInput) {
+      this.#hexInput.addEventListener("input", (e) => {
+        e.stopPropagation();
+        const hex = "#" + e.target.value.replace("#", "");
+        this.#solid.color = hex;
+        this.#updateFillPicker();
+        this.#emitInput();
+      });
+      this.#hexInput.addEventListener("change", (e) => {
+        e.stopPropagation();
+        this.#emitChange();
+      });
+    }
 
-      // Opacity input (all fill types)
-      if (this.#opacityInput) {
-        this.#opacityInput.addEventListener("input", (e) => {
-          e.stopPropagation();
-          const parsed = parseFloat(e.target.value);
-          const opacity = isNaN(parsed) ? 100 : parsed;
-          const alpha = opacity / 100;
-          switch (this.#fillType) {
-            case "solid":
-              this.#solid.alpha = alpha;
-              break;
-            case "gradient":
-              break;
-            case "image":
-              this.#image.opacity = alpha;
-              break;
-            case "video":
-              this.#video.opacity = alpha;
-              break;
-            case "webcam":
-              this.#webcam.opacity = alpha;
-              break;
-          }
-          this.#updateFillPicker();
-          // Update the chit's alpha
-          this.#updateChitAlpha(alpha);
-          this.#emitInput();
-        });
-        this.#opacityInput.addEventListener("change", (e) => {
-          e.stopPropagation();
-          this.#emitChange();
-        });
-      }
-    });
+    // Opacity input (all fill types)
+    if (this.#opacityInput) {
+      this.#opacityInput.addEventListener("input", (e) => {
+        e.stopPropagation();
+        const parsed = parseFloat(e.target.value);
+        const opacity = isNaN(parsed) ? 100 : parsed;
+        const alpha = opacity / 100;
+        switch (this.#fillType) {
+          case "solid":
+            this.#solid.alpha = alpha;
+            break;
+          case "gradient":
+            break;
+          case "image":
+            this.#image.opacity = alpha;
+            break;
+          case "video":
+            this.#video.opacity = alpha;
+            break;
+          case "webcam":
+            this.#webcam.opacity = alpha;
+            break;
+        }
+        this.#updateFillPicker();
+        // Update the chit's alpha
+        this.#updateChitAlpha(alpha);
+        this.#emitInput();
+      });
+      this.#opacityInput.addEventListener("change", (e) => {
+        e.stopPropagation();
+        this.#emitChange();
+      });
+    }
   }
 
   #updateControls() {
@@ -6634,69 +7484,68 @@ class FigInputFill extends HTMLElement {
     combo.insertAdjacentHTML("beforeend", controlsHtml);
 
     // Re-setup event listeners for the new controls
-    requestAnimationFrame(() => {
-      this.#opacityInput = this.querySelector(".fig-input-fill-opacity");
-      this.#hexInput = this.querySelector(".fig-input-fill-hex");
-      const label = this.querySelector(".fig-input-fill-label");
-
-      // Label click triggers fill picker
-      if (label && this.#fillPicker) {
-        label.addEventListener("click", () => {
-          const chit = this.#fillPicker.querySelector("fig-chit");
-          if (chit) {
-            chit.click();
-          }
-        });
-      }
+    this.#opacityInput = this.querySelector(".fig-input-fill-opacity");
+    this.#hexInput = this.querySelector(".fig-input-fill-hex");
+    const label = this.querySelector(".fig-input-fill-label");
+    this.#syncA11y();
+
+    // Label click triggers fill picker
+    if (label && this.#fillPicker) {
+      label.addEventListener("click", () => {
+        const chit = this.#fillPicker.querySelector("fig-chit");
+        if (chit) {
+          chit.click();
+        }
+      });
+    }
 
-      // Hex input (solid only)
-      if (this.#hexInput) {
-        this.#hexInput.addEventListener("input", (e) => {
-          e.stopPropagation();
-          const hex = "#" + e.target.value.replace("#", "");
-          this.#solid.color = hex;
-          this.#updateFillPicker();
-          this.#emitInput();
-        });
-        this.#hexInput.addEventListener("change", (e) => {
-          e.stopPropagation();
-          this.#emitChange();
-        });
-      }
+    // Hex input (solid only)
+    if (this.#hexInput) {
+      this.#hexInput.addEventListener("input", (e) => {
+        e.stopPropagation();
+        const hex = "#" + e.target.value.replace("#", "");
+        this.#solid.color = hex;
+        this.#updateFillPicker();
+        this.#emitInput();
+      });
+      this.#hexInput.addEventListener("change", (e) => {
+        e.stopPropagation();
+        this.#emitChange();
+      });
+    }
 
-      // Opacity input
-      if (this.#opacityInput) {
-        this.#opacityInput.addEventListener("input", (e) => {
-          e.stopPropagation();
-          const parsed = parseFloat(e.target.value);
-          const opacity = isNaN(parsed) ? 100 : parsed;
-          const alpha = opacity / 100;
-          switch (this.#fillType) {
-            case "solid":
-              this.#solid.alpha = alpha;
-              break;
-            case "gradient":
-              break;
-            case "image":
-              this.#image.opacity = alpha;
-              break;
-            case "video":
-              this.#video.opacity = alpha;
-              break;
-            case "webcam":
-              this.#webcam.opacity = alpha;
-              break;
-          }
-          this.#updateFillPicker();
-          this.#updateChitAlpha(alpha);
-          this.#emitInput();
-        });
-        this.#opacityInput.addEventListener("change", (e) => {
-          e.stopPropagation();
-          this.#emitChange();
-        });
-      }
-    });
+    // Opacity input
+    if (this.#opacityInput) {
+      this.#opacityInput.addEventListener("input", (e) => {
+        e.stopPropagation();
+        const parsed = parseFloat(e.target.value);
+        const opacity = isNaN(parsed) ? 100 : parsed;
+        const alpha = opacity / 100;
+        switch (this.#fillType) {
+          case "solid":
+            this.#solid.alpha = alpha;
+            break;
+          case "gradient":
+            break;
+          case "image":
+            this.#image.opacity = alpha;
+            break;
+          case "video":
+            this.#video.opacity = alpha;
+            break;
+          case "webcam":
+            this.#webcam.opacity = alpha;
+            break;
+        }
+        this.#updateFillPicker();
+        this.#updateChitAlpha(alpha);
+        this.#emitInput();
+      });
+      this.#opacityInput.addEventListener("change", (e) => {
+        e.stopPropagation();
+        this.#emitChange();
+      });
+    }
   }
 
   #updateFillPicker() {
@@ -6804,6 +7653,12 @@ class FigInputFill extends HTMLElement {
           }
         }
         break;
+      case "aria-label":
+      case "aria-describedby":
+      case "aria-invalid":
+      case "aria-required":
+        this.#syncA11y();
+        break;
     }
   }
 }
@@ -6826,6 +7681,7 @@ class FigInputPalette extends HTMLElement {
   #inlinePickers = [];
   #expandedPickers = [];
   #renderRAF = null;
+  #boundHandleKeyDown = this.#handleKeyDown.bind(this);
 
   static get observedAttributes() {
     return ["value", "disabled", "min", "max", "open", "fixed"];
@@ -6870,6 +7726,8 @@ class FigInputPalette extends HTMLElement {
 
   connectedCallback() {
     if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "0");
+    this.removeEventListener("keydown", this.#boundHandleKeyDown);
+    this.addEventListener("keydown", this.#boundHandleKeyDown);
     if (this.#renderRAF) cancelAnimationFrame(this.#renderRAF);
     this.#renderRAF = requestAnimationFrame(() => {
       this.#renderRAF = null;
@@ -6883,10 +7741,21 @@ class FigInputPalette extends HTMLElement {
       cancelAnimationFrame(this.#renderRAF);
       this.#renderRAF = null;
     }
+    this.removeEventListener("keydown", this.#boundHandleKeyDown);
     this.#inlinePickers = [];
     this.#expandedPickers = [];
   }
 
+  #handleKeyDown(event) {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    if (event.target !== this && !event.target?.closest?.(".palette-colors-inline")) return;
+    if (this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false") return;
+    event.preventDefault();
+    event.stopPropagation();
+    this.open = true;
+    this.querySelector(".palette-colors-inline")?.setAttribute("aria-expanded", "true");
+  }
+
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue === newValue) return;
 
@@ -6999,13 +7868,24 @@ class FigInputPalette extends HTMLElement {
 
     const inlineWrap = document.createElement("div");
     inlineWrap.className = "palette-colors-inline";
-    inlineWrap.addEventListener("click", () => {
+    inlineWrap.setAttribute("role", "button");
+    inlineWrap.setAttribute("aria-expanded", String(this.open));
+    inlineWrap.setAttribute("aria-label", "Edit palette colors");
+    const openPalette = () => {
       if (
         this.hasAttribute("disabled") &&
         this.getAttribute("disabled") !== "false"
       )
         return;
       this.open = true;
+      inlineWrap.setAttribute("aria-expanded", "true");
+    };
+    inlineWrap.addEventListener("click", openPalette);
+    inlineWrap.addEventListener("keydown", (event) => {
+      if (event.key !== "Enter" && event.key !== " ") return;
+      event.preventDefault();
+      event.stopPropagation();
+      openPalette();
     });
 
     const wrap = document.createElement("div");
@@ -7258,10 +8138,11 @@ class FigInputGradient extends HTMLElement {
   #handleDragging = false;
   #arrowTooltipTimer = null;
   #colorObserver = null;
+  #repositionRAF = null;
   #gradient = {
     type: "linear",
-    angle: 180,
-    interpolationSpace: "oklab",
+    angle: 90,
+    interpolationSpace: "srgb",
     hueInterpolation: "shorter",
     stops: [
       { position: 0, color: "#D9D9D9", opacity: 100 },
@@ -7292,18 +8173,49 @@ class FigInputGradient extends HTMLElement {
     return this.getAttribute("mode") === "tip" ? "tip" : "handle";
   }
 
+  #firstStopHandle() {
+    if (!this.#track) return null;
+    return this.#track.querySelector(
+      "fig-handle:not(.fig-input-gradient-ghost):not([disabled])",
+    );
+  }
+
+  #syncFocusTarget() {
+    const disabled = this.hasAttribute("disabled");
+    if (disabled) {
+      this.setAttribute("tabindex", "-1");
+      return;
+    }
+    this.setAttribute("tabindex", this.#isEditable ? "-1" : "0");
+  }
+
+  #normalizeGradient(gradient) {
+    return {
+      ...normalizeGradientConfig(gradient),
+      type: "linear",
+      angle: 90,
+    };
+  }
+
   connectedCallback() {
     this.#parseValue();
     this.#render();
+    this.removeEventListener("keydown", this.#onPickerKeyDown);
+    this.addEventListener("keydown", this.#onPickerKeyDown);
     if (this.#isEditable) document.addEventListener("keydown", this.#onKeyDown);
   }
 
   disconnectedCallback() {
     document.removeEventListener("keydown", this.#onKeyDown);
+    this.removeEventListener("keydown", this.#onPickerKeyDown);
     if (this.#colorObserver) {
       this.#colorObserver.disconnect();
       this.#colorObserver = null;
     }
+    if (this.#repositionRAF !== null) {
+      cancelAnimationFrame(this.#repositionRAF);
+      this.#repositionRAF = null;
+    }
     clearTimeout(this.#arrowTooltipTimer);
     this.removeEventListener("pointerenter", this.#onTrackEnter);
     this.removeEventListener("pointermove", this.#onTrackMove);
@@ -7391,27 +8303,34 @@ class FigInputGradient extends HTMLElement {
     this.#emitChange();
   };
 
+  #onPickerKeyDown = (e) => {
+    if (this.#editMode !== "picker") return;
+    if (e.key !== "Enter" && e.key !== " ") return;
+    if (e.altKey || e.ctrlKey || e.metaKey) return;
+    if (this.hasAttribute("disabled")) return;
+    const picker = this.querySelector("fig-fill-picker");
+    if (!picker || typeof picker.open !== "function") return;
+    e.preventDefault();
+    picker.open();
+  };
+
   #parseValue() {
     const valueAttr = this.getAttribute("value");
     if (!valueAttr) return;
     try {
       const parsed = JSON.parse(valueAttr);
       if (parsed?.type === "gradient" && parsed.gradient) {
-        this.#gradient = normalizeGradientConfig({
+        this.#gradient = this.#normalizeGradient({
           ...this.#gradient,
           ...parsed.gradient,
         });
-        this.#gradient.type = "linear";
-        this.#gradient.angle = 90;
         return;
       }
       if (parsed?.gradient) {
-        this.#gradient = normalizeGradientConfig({
+        this.#gradient = this.#normalizeGradient({
           ...this.#gradient,
           ...parsed.gradient,
         });
-        this.#gradient.type = "linear";
-        this.#gradient.angle = 90;
       }
     } catch (e) {
       // Ignore invalid JSON and keep current/default gradient.
@@ -7419,7 +8338,8 @@ class FigInputGradient extends HTMLElement {
   }
 
   #buildGradientCSS() {
-    const sorted = [...this.#gradient.stops].sort(
+    const gradient = this.#normalizeGradient(this.#gradient);
+    const sorted = [...gradient.stops].sort(
       (a, b) => a.position - b.position,
     );
     const stops = sorted
@@ -7430,8 +8350,9 @@ class FigInputGradient extends HTMLElement {
         return `rgba(${r}, ${g}, ${b}, ${alpha}) ${s.position}%`;
       })
       .join(", ");
-    const interp = gradientInterpolationClause(this.#gradient);
-    return `linear-gradient(${this.#gradient.angle}deg ${interp}, ${stops})`;
+    const interp = gradientInterpolationClause(gradient);
+    const interpolation = interp ? ` ${interp}` : "";
+    return `linear-gradient(${gradient.angle}deg${interpolation}, ${stops})`;
   }
 
   #stopColorCSS(stop) {
@@ -7470,6 +8391,7 @@ class FigInputGradient extends HTMLElement {
       this.#chit = this.querySelector("fig-chit");
       this.#track = null;
       this.#setupPickerEvents();
+      this.#syncFocusTarget();
       return;
     }
 
@@ -7482,8 +8404,8 @@ class FigInputGradient extends HTMLElement {
     if (mode === "true" || mode === "picker") {
       this.#setupGhostHandle();
       this.#setupEventListeners();
-      requestAnimationFrame(() => this.#repositionHandles());
     }
+    this.#syncFocusTarget();
   }
 
   #setupPickerEvents() {
@@ -7495,7 +8417,7 @@ class FigInputGradient extends HTMLElement {
       e.stopPropagation();
       const detail = e.detail;
       if (!detail?.gradient) return;
-      this.#gradient = normalizeGradientConfig({
+      this.#gradient = this.#normalizeGradient({
         ...this.#gradient,
         ...detail.gradient,
       });
@@ -7658,6 +8580,8 @@ class FigInputGradient extends HTMLElement {
   };
 
   #repositionHandles() {
+    this.#repositionRAF = null;
+    if (!this.isConnected) return;
     if (!this.#track) return;
     const stops = this.#gradient.stops;
     this.#track
@@ -7673,6 +8597,11 @@ class FigInputGradient extends HTMLElement {
     this.#repositionHandles();
   }
 
+  #scheduleRepositionHandles() {
+    if (this.#repositionRAF !== null) return;
+    this.#repositionRAF = requestAnimationFrame(() => this.#repositionHandles());
+  }
+
   #syncHandles() {
     if (!this.#track) return;
     const handles = this.#track.querySelectorAll(
@@ -7686,7 +8615,7 @@ class FigInputGradient extends HTMLElement {
       if (ghost) this.#track.appendChild(ghost);
       this.#syncHandleMode();
       this.#reobserveHandleColors();
-      requestAnimationFrame(() => this.#repositionHandles());
+      this.#scheduleRepositionHandles();
       return;
     }
 
@@ -7987,7 +8916,7 @@ class FigInputGradient extends HTMLElement {
   get value() {
     return {
       type: "gradient",
-      gradient: gradientToValueShape(this.#gradient),
+      gradient: gradientToValueShape(this.#normalizeGradient(this.#gradient)),
     };
   }
 
@@ -7999,6 +8928,18 @@ class FigInputGradient extends HTMLElement {
     }
   }
 
+  focus(options) {
+    if (this.hasAttribute("disabled")) return;
+    if (this.#isEditable) {
+      const firstHandle = this.#firstStopHandle();
+      if (firstHandle) {
+        firstHandle.focus(options);
+        return;
+      }
+    }
+    HTMLElement.prototype.focus.call(this, options);
+  }
+
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue === newValue) return;
     switch (name) {
@@ -8026,6 +8967,7 @@ class FigInputGradient extends HTMLElement {
 
   #syncDisabled() {
     const disabled = this.hasAttribute("disabled");
+    this.#syncFocusTarget();
     if (this.#chit) {
       if (disabled) this.#chit.setAttribute("disabled", "");
       else this.#chit.removeAttribute("disabled");
@@ -8061,7 +9003,6 @@ class FigCheckbox extends HTMLElement {
     this.input.setAttribute("id", figUniqueId());
     this.input.setAttribute("name", this.name);
     this.input.setAttribute("type", "checkbox");
-    this.input.setAttribute("role", "checkbox");
     this.#boundHandleInput = this.handleInput.bind(this);
   }
   connectedCallback() {
@@ -8073,18 +9014,9 @@ class FigCheckbox extends HTMLElement {
       this.append(this.input);
     }
 
-    this.input.checked =
-      this.hasAttribute("checked") && this.getAttribute("checked") !== "false";
     this.input.removeEventListener("change", this.#boundHandleInput);
     this.input.addEventListener("change", this.#boundHandleInput);
-
-    if (this.hasAttribute("disabled")) {
-      this.input.disabled = true;
-    }
-    if (this.hasAttribute("indeterminate")) {
-      this.input.indeterminate = true;
-      this.input.setAttribute("indeterminate", "true");
-    }
+    this.#syncInputState();
 
     const existingLabel = this.querySelector(":scope > label");
     if (existingLabel) {
@@ -8119,7 +9051,36 @@ class FigCheckbox extends HTMLElement {
     }
   }
 
-  render() {}
+  render() {}
+
+  #isAttrOn(name) {
+    return this.hasAttribute(name) && this.getAttribute(name) !== "false";
+  }
+
+  #syncAriaChecked() {
+    if (this.input.indeterminate) {
+      this.input.setAttribute("aria-checked", "mixed");
+    } else {
+      this.input.setAttribute("aria-checked", this.input.checked ? "true" : "false");
+    }
+  }
+
+  #syncInputState() {
+    const checked = this.#isAttrOn("checked");
+    const indeterminate = this.#isAttrOn("indeterminate") && !checked;
+    const disabled = this.#isAttrOn("disabled");
+    this.input.checked = checked;
+    this.input.indeterminate = indeterminate;
+    this.input.disabled = disabled;
+    this.input.value = this.getAttribute("value") || "";
+    this.input.setAttribute("name", this.getAttribute("name") || this.name);
+    if (indeterminate) {
+      this.input.setAttribute("indeterminate", "true");
+    } else {
+      this.input.removeAttribute("indeterminate");
+    }
+    this.#syncAriaChecked();
+  }
 
   focus() {
     this.input.focus();
@@ -8164,35 +9125,22 @@ class FigCheckbox extends HTMLElement {
         }
         break;
       case "checked":
-        this.input.checked =
-          this.hasAttribute("checked") &&
-          this.getAttribute("checked") !== "false";
-        if (this.input.checked && this.hasAttribute("indeterminate")) {
+        if (this.#isAttrOn("checked") && this.hasAttribute("indeterminate")) {
           this.removeAttribute("indeterminate");
         }
-        this.input.indeterminate =
-          this.hasAttribute("indeterminate") &&
-          this.getAttribute("indeterminate") !== "false" &&
-          !this.input.checked;
-        if (this.input.indeterminate) {
-          this.input.setAttribute("indeterminate", "true");
-        } else {
-          this.input.removeAttribute("indeterminate");
-        }
+        this.#syncInputState();
         break;
       case "indeterminate":
-        this.input.indeterminate =
-          this.hasAttribute("indeterminate") &&
-          this.getAttribute("indeterminate") !== "false" &&
-          !this.input.checked;
-        if (this.input.indeterminate) {
-          this.input.setAttribute("indeterminate", "true");
-        } else {
-          this.input.removeAttribute("indeterminate");
-        }
+        this.#syncInputState();
+        break;
+      case "disabled":
+        this.#syncInputState();
+        break;
+      case "name":
+        this.input.setAttribute("name", newValue || this.name);
         break;
       case "value":
-        this.input.value = newValue;
+        this.input.value = newValue || "";
         break;
       default:
         this.input[name] = newValue;
@@ -8205,8 +9153,10 @@ class FigCheckbox extends HTMLElement {
     e.stopPropagation();
     this.input.indeterminate = false;
     this.input.removeAttribute("indeterminate");
-    // Update ARIA state
-    this.input.setAttribute("aria-checked", this.input.checked);
+    if (this.hasAttribute("indeterminate")) {
+      this.removeAttribute("indeterminate");
+    }
+    this.#syncAriaChecked();
     // Sync attribute with input state (without triggering setter loop)
     if (this.input.checked) {
       this.setAttribute("checked", "");
@@ -8267,166 +9217,6 @@ class FigSwitch extends FigCheckbox {
 }
 customElements.define("fig-switch", FigSwitch);
 
-/* Toast */
-/**
- * A toast notification element for non-modal, time-based messages.
- * Always positioned at bottom center of the screen.
- * @attr {number} duration - Auto-dismiss duration in ms (0 = no auto-dismiss, default: 5000)
- * @attr {number} offset - Distance from bottom edge in pixels (default: 16)
- * @attr {string} theme - Visual theme: "dark" (default), "light", "danger", "brand"
- * @attr {boolean} open - Whether the toast is visible
- */
-class FigToast extends HTMLDialogElement {
-  constructor() {
-    super();
-    this._figInit();
-  }
-
-  _figInit() {
-    if (this._figInitialized) return;
-    this._figInitialized = true;
-    this._defaultOffset = 16;
-    this._autoCloseTimer = null;
-    this._boundHandleClose = this.handleClose.bind(this);
-  }
-
-  getOffset() {
-    return parseInt(this.getAttribute("offset") ?? this._defaultOffset);
-  }
-
-  connectedCallback() {
-    this._figInit();
-
-    // Set default theme if not specified
-    if (!this.hasAttribute("theme")) {
-      this.setAttribute("theme", "dark");
-    }
-
-    // Ensure toast is closed by default
-    // Remove native open attribute if present and not explicitly "true"
-    const shouldOpen =
-      this.getAttribute("open") === "true" || this.getAttribute("open") === "";
-    if (this.hasAttribute("open") && !shouldOpen) {
-      this.removeAttribute("open");
-    }
-
-    // Close the dialog initially (override native behavior)
-    if (!shouldOpen) {
-      this.close();
-    }
-
-    requestAnimationFrame(() => {
-      this.addCloseListeners();
-      this.applyPosition();
-
-      // Auto-show if open attribute is explicitly true
-      if (shouldOpen) {
-        this.showToast();
-      }
-    });
-  }
-
-  disconnectedCallback() {
-    this._figInit();
-    this.clearAutoClose();
-  }
-
-  addCloseListeners() {
-    this.querySelectorAll("[close-toast]").forEach((button) => {
-      button.removeEventListener("click", this._boundHandleClose);
-      button.addEventListener("click", this._boundHandleClose);
-    });
-  }
-
-  handleClose() {
-    this.hideToast();
-  }
-
-  applyPosition() {
-    // Always bottom center
-    this.style.position = "fixed";
-    this.style.margin = "0";
-    this.style.top = "auto";
-    this.style.bottom = `${this.getOffset()}px`;
-    this.style.left = "50%";
-    this.style.right = "auto";
-    this.style.transform = "translateX(-50%)";
-  }
-
-  startAutoClose() {
-    this.clearAutoClose();
-
-    const duration = parseInt(this.getAttribute("duration") ?? "5000");
-    if (duration > 0) {
-      this._autoCloseTimer = setTimeout(() => {
-        this.hideToast();
-      }, duration);
-    }
-  }
-
-  clearAutoClose() {
-    if (this._autoCloseTimer) {
-      clearTimeout(this._autoCloseTimer);
-      this._autoCloseTimer = null;
-    }
-  }
-
-  _resolveAutoTheme() {
-    if (this.getAttribute("theme") !== "auto") return;
-    const cs = getComputedStyle(document.documentElement).colorScheme || "";
-    const isDark = cs.includes("dark");
-    this.style.colorScheme = isDark ? "light" : "dark";
-  }
-
-  /**
-   * Show the toast notification (non-modal)
-   */
-  showToast() {
-    this._resolveAutoTheme();
-    this.show(); // Non-modal show
-    this.applyPosition();
-    this.startAutoClose();
-    this.dispatchEvent(new CustomEvent("toast-show", { bubbles: true }));
-  }
-
-  /**
-   * Hide the toast notification
-   */
-  hideToast() {
-    this.clearAutoClose();
-    this.close();
-    this.dispatchEvent(new CustomEvent("toast-hide", { bubbles: true }));
-  }
-
-  static get observedAttributes() {
-    return ["duration", "offset", "open", "theme"];
-  }
-
-  attributeChangedCallback(name, oldValue, newValue) {
-    this._figInit();
-    if (name === "offset") {
-      this.applyPosition();
-    }
-
-    if (name === "open") {
-      if (newValue !== null && newValue !== "false") {
-        this.showToast();
-      } else {
-        this.hideToast();
-      }
-    }
-
-    if (name === "theme") {
-      if (newValue === "auto") {
-        this._resolveAutoTheme();
-      } else {
-        this.style.removeProperty("color-scheme");
-      }
-    }
-  }
-}
-figDefineCustomizedBuiltIn("fig-toast", FigToast, { extends: "dialog" });
-
 /* Combo Input */
 /**
  * A custom combo input with text and dropdown.
@@ -8443,6 +9233,11 @@ class FigComboInput extends HTMLElement {
     "value",
     "disabled",
     "experimental",
+    "aria-label",
+    "aria-labelledby",
+    "aria-describedby",
+    "aria-invalid",
+    "aria-required",
   ];
 
   #usesCustomDropdown = false;
@@ -8451,6 +9246,13 @@ class FigComboInput extends HTMLElement {
   #button = null;
   #customDropdown = null;
   #internalUpdate = false;
+  #a11yAttributes = [
+    "aria-label",
+    "aria-labelledby",
+    "aria-describedby",
+    "aria-invalid",
+    "aria-required",
+  ];
 
   #boundHandleDropdownInput = this.#handleDropdownInput.bind(this);
   #boundHandleTextInput = this.#handleTextInput.bind(this);
@@ -8492,10 +9294,11 @@ class FigComboInput extends HTMLElement {
     const currentValue = this.value;
     const experimental = this.getAttribute("experimental");
     const expAttr = experimental ? ` experimental="${experimental}"` : "";
+    const dropdownLabel = this.#dropdownLabel();
 
     const dropdownHTML = this.#usesCustomDropdown
       ? ""
-      : `<fig-dropdown type="dropdown"${expAttr}>${options.map((o) => `<option>${o.trim()}</option>`).join("")}</fig-dropdown>`;
+      : `<fig-dropdown type="dropdown" label="${dropdownLabel}"${expAttr}>${options.map((o) => `<option>${o.trim()}</option>`).join("")}</fig-dropdown>`;
 
     this.innerHTML = `<div class="input-combo">
   <fig-input-text placeholder="${placeholder}" value="${currentValue}"></fig-input-text>
@@ -8514,6 +9317,9 @@ class FigComboInput extends HTMLElement {
       if (!this.#customDropdown.hasAttribute("type")) {
         this.#customDropdown.setAttribute("type", "dropdown");
       }
+      if (!this.#customDropdown.hasAttribute("label")) {
+        this.#customDropdown.setAttribute("label", dropdownLabel);
+      }
       if (experimental) {
         this.#customDropdown.setAttribute("experimental", experimental);
       }
@@ -8521,6 +9327,7 @@ class FigComboInput extends HTMLElement {
     }
 
     this.#dropdown = this.querySelector("fig-dropdown");
+    this.#syncA11yAttributes();
   }
 
   #setupListeners() {
@@ -8591,6 +9398,31 @@ class FigComboInput extends HTMLElement {
       .filter(Boolean);
   }
 
+  #controlName() {
+    return (
+      this.getAttribute("aria-label") ||
+      this.getAttribute("placeholder") ||
+      "Combo input"
+    ).trim();
+  }
+
+  #dropdownLabel() {
+    return `${this.#controlName()} options`;
+  }
+
+  #syncA11yAttributes() {
+    if (this.#input) {
+      this.#a11yAttributes.forEach((name) => {
+        const value = this.getAttribute(name);
+        if (value === null) this.#input.removeAttribute(name);
+        else this.#input.setAttribute(name, value);
+      });
+    }
+    if (this.#dropdown && !this.#dropdown.hasAttribute("aria-label")) {
+      this.#dropdown.setAttribute("label", this.#dropdownLabel());
+    }
+  }
+
   #applyDisabled(disabled) {
     if (this.#input) {
       if (disabled) this.#input.setAttribute("disabled", "");
@@ -8600,6 +9432,10 @@ class FigComboInput extends HTMLElement {
       if (disabled) this.#button.setAttribute("disabled", "");
       else this.#button.removeAttribute("disabled");
     }
+    if (this.#dropdown) {
+      if (disabled) this.#dropdown.setAttribute("disabled", "");
+      else this.#dropdown.removeAttribute("disabled");
+    }
   }
 
   focus() {
@@ -8619,6 +9455,7 @@ class FigComboInput extends HTMLElement {
         break;
       case "placeholder":
         if (this.#input) this.#input.setAttribute("placeholder", newValue || "");
+        this.#syncA11yAttributes();
         break;
       case "value":
         if (!this.#internalUpdate && this.#input) {
@@ -8635,6 +9472,13 @@ class FigComboInput extends HTMLElement {
             this.#dropdown.removeAttribute("experimental");
         }
         break;
+      case "aria-label":
+      case "aria-labelledby":
+      case "aria-describedby":
+      case "aria-invalid":
+      case "aria-required":
+        this.#syncA11yAttributes();
+        break;
     }
   }
 }
@@ -8660,12 +9504,22 @@ class FigChit extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["background", "size", "selected", "disabled", "alpha"];
+    return [
+      "background",
+      "size",
+      "selected",
+      "disabled",
+      "alpha",
+      "aria-label",
+      "aria-labelledby",
+      "aria-describedby",
+    ];
   }
 
   connectedCallback() {
     this.#render();
     this.#updateAlpha();
+    this.#syncA11y();
   }
 
   #updateAlpha() {
@@ -8732,9 +9586,11 @@ class FigChit extends HTMLElement {
         if (!isVar) {
           this.input.addEventListener("input", this.#boundHandleInput);
         }
+        this.#syncA11y();
       } else {
         this.innerHTML = "<div></div>";
         this.input = null;
+        this.#syncA11y();
       }
     } else if (this.#type === "color" && this.input) {
       const hex = this.#toHex(bg);
@@ -8753,6 +9609,36 @@ class FigChit extends HTMLElement {
     );
   }
 
+  #syncA11y() {
+    const disabled =
+      this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false";
+    this.setAttribute("aria-disabled", disabled ? "true" : "false");
+    if (this.input) {
+      this.input.disabled = disabled;
+      const labelledBy = this.getAttribute("aria-labelledby");
+      const label = this.getAttribute("aria-label") || "Color swatch";
+      const describedBy = this.getAttribute("aria-describedby");
+      if (labelledBy) {
+        this.input.setAttribute("aria-labelledby", labelledBy);
+        this.input.removeAttribute("aria-label");
+      } else {
+        this.input.setAttribute("aria-label", label);
+        this.input.removeAttribute("aria-labelledby");
+      }
+      if (describedBy) this.input.setAttribute("aria-describedby", describedBy);
+      else this.input.removeAttribute("aria-describedby");
+      this.removeAttribute("role");
+      this.removeAttribute("aria-hidden");
+      return;
+    }
+    if (!this.hasAttribute("aria-label") && !this.hasAttribute("aria-labelledby")) {
+      this.setAttribute("aria-hidden", "true");
+    } else {
+      this.setAttribute("role", "img");
+      this.removeAttribute("aria-hidden");
+    }
+  }
+
   #handleInput(e) {
     // Update background attribute without triggering full re-render
     this.#internalUpdate = true;
@@ -8790,6 +9676,13 @@ class FigChit extends HTMLElement {
       this.#render();
     } else if (name === "alpha") {
       this.#updateAlpha();
+    } else if (
+      name === "disabled" ||
+      name === "aria-label" ||
+      name === "aria-labelledby" ||
+      name === "aria-describedby"
+    ) {
+      this.#syncA11y();
     }
   }
 
@@ -8825,6 +9718,8 @@ customElements.define("fig-swatch", FigSwatch);
  * @attr {boolean} loop - Video loop
  * @attr {boolean} muted - Video muted
  * @attr {string} poster - Video poster image URL
+ * @attr {string} aria-label - Accessible label forwarded to generated video
+ * @attr {string} aria-labelledby - Accessible label reference forwarded to generated video
  *
  * Sizing model:
  *   - Default: host shrinkwraps to its inner <img>/<video> intrinsic size.
@@ -8834,6 +9729,7 @@ customElements.define("fig-swatch", FigSwatch);
 class FigMedia extends HTMLElement {
   #src = null;
   #mediaEl = null;
+  #previewEl = null;
   #fileInput = null;
   #blobUrl = null;
   #previewSrc = null;
@@ -8865,6 +9761,9 @@ class FigMedia extends HTMLElement {
       "loop",
       "muted",
       "poster",
+      "aria-label",
+      "aria-labelledby",
+      "title",
     ];
   }
 
@@ -8939,8 +9838,10 @@ class FigMedia extends HTMLElement {
     }
 
     this.querySelectorAll("fig-chit[data-generated]").forEach((el) => el.remove());
+    this.#ensurePreviewElement();
     this.#ensureMediaElement();
     this.#syncGeneratedMediaElement();
+    this.#syncMediaAccessibility();
 
     const isUpload = this.hasAttribute("upload") && this.getAttribute("upload") !== "false";
     if (isUpload && !this.querySelector("fig-input-file[data-generated]")) {
@@ -8968,6 +9869,19 @@ class FigMedia extends HTMLElement {
     }
   }
 
+  #ensurePreviewElement() {
+    if (this.#previewEl?.isConnected) return;
+    const existing = this.querySelector(":scope > fig-preview");
+    if (existing) {
+      this.#previewEl = existing;
+      return;
+    }
+    const preview = document.createElement("fig-preview");
+    preview.setAttribute("data-generated", "");
+    this.prepend(preview);
+    this.#previewEl = preview;
+  }
+
   #userProvidedMediaEl() {
     const tag = this.mediaKind === "video" ? "video" : "img";
     return this.querySelector(`${tag}:not([data-generated])`);
@@ -8976,6 +9890,7 @@ class FigMedia extends HTMLElement {
   #ensureMediaElement() {
     const userEl = this.#userProvidedMediaEl();
     if (userEl) {
+      this.#ensurePreviewElement();
       if (this.#mediaEl && this.#mediaEl !== userEl) {
         this.#removeMediaElementListeners();
         if (this.#mediaEl.hasAttribute("data-generated")) {
@@ -8983,9 +9898,14 @@ class FigMedia extends HTMLElement {
         }
       }
       this.#mediaEl = userEl;
+      if (this.#previewEl && userEl.parentElement !== this.#previewEl) {
+        this.#previewEl.append(userEl);
+      }
+      this.#syncMediaAccessibility();
       return;
     }
 
+    this.#ensurePreviewElement();
     const expectedTag = this.mediaKind === "video" ? "VIDEO" : "IMG";
     if (this.#mediaEl && this.#mediaEl.tagName !== expectedTag) {
       this.#removeMediaElementListeners();
@@ -9002,7 +9922,7 @@ class FigMedia extends HTMLElement {
       video.className = "fig-media-element";
       video.setAttribute("playsinline", "");
       video.preload = "auto";
-      this.prepend(video);
+      this.#previewEl.append(video);
       this.#mediaEl = video;
       this.#mediaEl.addEventListener("play", this.#boundHandleMediaPlay);
       this.#mediaEl.addEventListener("pause", this.#boundHandleMediaPause);
@@ -9021,11 +9941,33 @@ class FigMedia extends HTMLElement {
       img.loading = "lazy";
       img.decoding = "async";
       img.alt = this.getAttribute("alt") || "";
-      this.prepend(img);
+      this.#previewEl.append(img);
       this.#mediaEl = img;
     }
   }
 
+  #syncMediaAccessibility() {
+    if (!this.#mediaEl) return;
+    if (this.#mediaEl.tagName === "IMG") {
+      if (
+        this.hasAttribute("alt") ||
+        this.#mediaEl.hasAttribute("data-generated")
+      ) {
+        this.#mediaEl.alt = this.getAttribute("alt") || "";
+      }
+      return;
+    }
+    if (this.#mediaEl.tagName !== "VIDEO") return;
+    ["aria-label", "aria-labelledby", "title"].forEach((name) => {
+      const value = this.getAttribute(name);
+      if (value === null) {
+        this.#mediaEl.removeAttribute(name);
+      } else {
+        this.#mediaEl.setAttribute(name, value);
+      }
+    });
+  }
+
   #isEnabledAttr(name, defaultEnabled = false) {
     if (!this.hasAttribute(name)) return defaultEnabled;
     return this.getAttribute(name) !== "false";
@@ -9044,7 +9986,7 @@ class FigMedia extends HTMLElement {
       }
     }
     if (this.#mediaEl.tagName === "IMG") {
-      this.#mediaEl.alt = this.getAttribute("alt") || "";
+      this.#syncMediaAccessibility();
       return;
     }
     const poster = this.getAttribute("poster");
@@ -9059,6 +10001,7 @@ class FigMedia extends HTMLElement {
     this.#mediaEl.loop = this.#isEnabledAttr("loop", false);
     this.#mediaEl.muted = this.#isEnabledAttr("muted", false);
     this.#mediaEl.playsInline = true;
+    this.#syncMediaAccessibility();
     this.#syncControlsVisibility();
   }
 
@@ -9096,7 +10039,6 @@ class FigMedia extends HTMLElement {
     }
     const controls = document.createElement("fig-media-controls");
     controls.setAttribute("data-generated", "");
-    controls.setAttribute("overlay", "");
     this.append(controls);
     this.#controlsEl = controls;
     this.#wireControlsToMedia();
@@ -9225,7 +10167,8 @@ class FigMedia extends HTMLElement {
       fi.setAttribute("url", this.#src);
     }
     fi.addEventListener("change", this.#boundHandleFileInput);
-    this.append(fi);
+    this.#ensurePreviewElement();
+    this.#previewEl.append(fi);
     this.#fileInput = fi;
   }
 
@@ -9366,8 +10309,8 @@ class FigMedia extends HTMLElement {
       }
     }
 
-    if (name === "alt" && this.#mediaEl && this.#mediaEl.tagName === "IMG") {
-      this.#mediaEl.alt = newValue || "";
+    if (["alt", "aria-label", "aria-labelledby", "title"].includes(name)) {
+      this.#syncMediaAccessibility();
     }
 
     if (name === "upload") {
@@ -9501,6 +10444,10 @@ class FigMediaControls extends HTMLElement {
   #render() {
     if (this.#rendered) return;
     this.#rendered = true;
+    if (!this.hasAttribute("role")) this.setAttribute("role", "group");
+    if (!this.hasAttribute("aria-label") && !this.hasAttribute("aria-labelledby")) {
+      this.setAttribute("aria-label", "Media controls");
+    }
 
     const tooltip = document.createElement("fig-tooltip");
     tooltip.setAttribute("text", "Play");
@@ -9524,10 +10471,15 @@ class FigMediaControls extends HTMLElement {
     slider.setAttribute("text", "false");
     slider.setAttribute("min", "0");
     slider.setAttribute("max", String(this.duration));
-    slider.setAttribute("step", "0.1");
+    slider.setAttribute("step", "1");
     slider.setAttribute("value", String(this.time));
     slider.setAttribute("full", "");
-    const timeEl = document.createElement("label");
+    slider.setAttribute("aria-label", "Seek");
+    slider.setAttribute(
+      "aria-valuetext",
+      this.#formatTimeValueText(this.time, this.duration),
+    );
+    const timeEl = document.createElement("span");
     timeEl.className = "fig-media-controls-time";
     timeEl.textContent = this.#formatTime(this.time);
 
@@ -9567,6 +10519,12 @@ class FigMediaControls extends HTMLElement {
     return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
   }
 
+  #formatTimeValueText(time, duration = 0) {
+    const current = this.#formatTime(time);
+    if (!Number.isFinite(duration) || duration <= 0) return current;
+    return `${current} of ${this.#formatTime(duration)}`;
+  }
+
   #syncPlayingUi() {
     if (!this.#playBtn) return;
     const playing = this.playing;
@@ -9588,6 +10546,10 @@ class FigMediaControls extends HTMLElement {
     if (!this.#userSeeking) {
       this.#timeSlider.setAttribute("value", String(t));
     }
+    this.#timeSlider.setAttribute(
+      "aria-valuetext",
+      this.#formatTimeValueText(t, duration),
+    );
     if (this.#timeEl) this.#timeEl.textContent = this.#formatTime(t);
   }
 
@@ -9823,6 +10785,7 @@ class FigInputFile extends HTMLElement {
       this.#clearBtn = document.createElement("fig-button");
       this.#clearBtn.setAttribute("variant", variant === "overlay" ? "overlay" : "ghost");
       this.#clearBtn.setAttribute("icon", "true");
+      this.#clearBtn.setAttribute("aria-label", "Remove");
       this.#clearBtn.className = "fig-input-file-clear";
       if (disabled) this.#clearBtn.setAttribute("disabled", "");
       this.#clearBtn.replaceChildren(createFigIcon("minus"));
@@ -10284,8 +11247,8 @@ class FigEasingCurve extends HTMLElement {
         <line class="fig-easing-curve-target" x1="0" y1="${targetY}" x2="${size}" y2="${targetY}"/>
         <line class="fig-easing-curve-diagonal" x1="0" y1="${startY}" x2="0" y2="${startY}"/>
         <path class="fig-easing-curve-path"/>
-        <foreignObject class="fig-easing-curve-handle" data-handle="bounce" width="20" height="20"><fig-handle size="small"></fig-handle></foreignObject>
-        <foreignObject class="fig-easing-curve-handle fig-easing-curve-duration-bar" data-handle="duration" width="20" height="20"><fig-handle size="small"></fig-handle></foreignObject>
+        <foreignObject class="fig-easing-curve-handle" data-handle="bounce" width="20" height="20"><fig-handle size="small" drag aria-label="Spring bounce handle"></fig-handle></foreignObject>
+        <foreignObject class="fig-easing-curve-handle fig-easing-curve-duration-bar" data-handle="duration" width="20" height="20"><fig-handle size="small" drag drag-axes="x" aria-label="Spring duration handle"></fig-handle></foreignObject>
       </svg></div>${valueInput}`;
     }
 
@@ -10297,8 +11260,8 @@ class FigEasingCurve extends HTMLElement {
       <path class="fig-easing-curve-path"/>
       <circle class="fig-easing-curve-endpoint" data-endpoint="start" r="${this.#bezierEndpointRadius}"/>
       <circle class="fig-easing-curve-endpoint" data-endpoint="end" r="${this.#bezierEndpointRadius}"/>
-      <foreignObject class="fig-easing-curve-handle" data-handle="1" width="20" height="20"><fig-handle size="small"></fig-handle></foreignObject>
-      <foreignObject class="fig-easing-curve-handle" data-handle="2" width="20" height="20"><fig-handle size="small"></fig-handle></foreignObject>
+      <foreignObject class="fig-easing-curve-handle" data-handle="1" width="20" height="20"><fig-handle size="small" drag aria-label="First easing control point"></fig-handle></foreignObject>
+      <foreignObject class="fig-easing-curve-handle" data-handle="2" width="20" height="20"><fig-handle size="small" drag aria-label="Second easing control point"></fig-handle></foreignObject>
     </svg></div>${valueInput}`;
   }
 
@@ -10473,6 +11436,18 @@ class FigEasingCurve extends HTMLElement {
       this.#bezierEndpointEnd.setAttribute("cx", p3.x);
       this.#bezierEndpointEnd.setAttribute("cy", p3.y);
     }
+    this.#syncBezierHandleTabOrder();
+  }
+
+  #syncBezierHandleTabOrder() {
+    if (!this.#svg || !this.#handle1 || !this.#handle2) return;
+    const handles =
+      this.#cp1.y >= this.#cp2.y
+        ? [this.#handle1, this.#handle2]
+        : [this.#handle2, this.#handle1];
+    for (const handle of handles) {
+      this.#svg.append(handle);
+    }
   }
 
   #updateSpringPaths() {
@@ -10611,29 +11586,160 @@ class FigEasingCurve extends HTMLElement {
     }
   }
 
-  #refreshCustomPresetIcons() {
-    if (!this.#dropdown) return;
-    if (!this.#isEditEnabled()) return;
-    const bezierIcon = FigEasingCurve.curveIcon(
-      this.#cp1.x,
-      this.#cp1.y,
-      this.#cp2.x,
-      this.#cp2.y,
-    );
-    const springIcon = FigEasingCurve.#springIcon(this.#spring);
+  #refreshCustomPresetIcons() {
+    if (!this.#dropdown) return;
+    if (!this.#isEditEnabled()) return;
+    const bezierIcon = FigEasingCurve.curveIcon(
+      this.#cp1.x,
+      this.#cp1.y,
+      this.#cp2.x,
+      this.#cp2.y,
+    );
+    const springIcon = FigEasingCurve.#springIcon(this.#spring);
+
+    // Update both slotted options and the cloned native select options.
+    this.#setOptionIconByValue(this.#dropdown, "Custom bezier", bezierIcon);
+    this.#setOptionIconByValue(this.#dropdown, "Custom spring", springIcon);
+    this.#setOptionIconByValue(
+      this.#dropdown.select,
+      "Custom bezier",
+      bezierIcon,
+    );
+    this.#setOptionIconByValue(
+      this.#dropdown.select,
+      "Custom spring",
+      springIcon,
+    );
+  }
+
+  #syncAfterHandleInput(eventType) {
+    this.#updatePaths();
+    this.#presetName = this.#matchPreset();
+    this.#syncDropdown();
+    this.#syncValueInput();
+    this.#emit(eventType);
+  }
+
+  #handleBezierKeyboard(event, handle) {
+    const step = event.shiftKey ? 0.1 : 0.01;
+    const point = handle === 1 ? this.#cp1 : this.#cp2;
+
+    switch (event.key) {
+      case "ArrowLeft":
+        point.x -= step;
+        break;
+      case "ArrowRight":
+        point.x += step;
+        break;
+      case "ArrowUp":
+        point.y += step;
+        break;
+      case "ArrowDown":
+        point.y -= step;
+        break;
+      case "Home":
+        point.x = 0;
+        point.y = 0;
+        break;
+      case "End":
+        point.x = 1;
+        point.y = 1;
+        break;
+      default:
+        return false;
+    }
+
+    point.x = Math.max(0, Math.min(1, Math.round(point.x * 100) / 100));
+    point.y = Math.round(point.y * 100) / 100;
+    this.#syncAfterHandleInput("input");
+    this.#emit("change");
+    return true;
+  }
+
+  #handleSpringKeyboard(event, handleType) {
+    const unit = event.shiftKey ? 10 : 1;
+
+    if (handleType === "bounce") {
+      switch (event.key) {
+        case "ArrowUp":
+          this.#spring.damping = Math.max(1, Math.round(this.#spring.damping - unit));
+          break;
+        case "ArrowDown":
+          this.#spring.damping = Math.max(1, Math.round(this.#spring.damping + unit));
+          break;
+        case "Home":
+          this.#spring.damping = 1;
+          break;
+        case "End":
+          this.#spring.damping = 50;
+          break;
+        default:
+          return false;
+      }
+    } else {
+      const dx = unit * 2;
+      switch (event.key) {
+        case "ArrowLeft":
+          this.#springDuration = Math.max(0.05, this.#springDuration - dx / 200);
+          this.#spring.stiffness = Math.max(10, Math.round(this.#spring.stiffness + dx * 1.5));
+          break;
+        case "ArrowRight":
+          this.#springDuration = Math.min(0.95, this.#springDuration + dx / 200);
+          this.#spring.stiffness = Math.max(10, Math.round(this.#spring.stiffness - dx * 1.5));
+          break;
+        case "Home":
+          this.#springDuration = 0.05;
+          break;
+        case "End":
+          this.#springDuration = 0.95;
+          break;
+        default:
+          return false;
+      }
+    }
+
+    this.#syncAfterHandleInput("input");
+    this.#emit("change");
+    return true;
+  }
+
+  #setupHandleInteraction(handleContainer, handle) {
+    const handleEl = handleContainer?.querySelector("fig-handle");
+    if (!handleEl) return;
 
-    // Update both slotted options and the cloned native select options.
-    this.#setOptionIconByValue(this.#dropdown, "Custom bezier", bezierIcon);
-    this.#setOptionIconByValue(this.#dropdown, "Custom spring", springIcon);
-    this.#setOptionIconByValue(
-      this.#dropdown.select,
-      "Custom bezier",
-      bezierIcon,
+    handleEl.addEventListener(
+      "pointerdown",
+      (event) => {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        if (this.#mode === "bezier") {
+          this.#startBezierDrag(event, Number(handle));
+        } else {
+          this.#startSpringDrag(event, handle);
+        }
+      },
+      { capture: true },
     );
-    this.#setOptionIconByValue(
-      this.#dropdown.select,
-      "Custom spring",
-      springIcon,
+
+    handleEl.addEventListener(
+      "keydown",
+      (event) => {
+        if (
+          !["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(
+            event.key,
+          )
+        ) {
+          return;
+        }
+        const handled =
+          this.#mode === "bezier"
+            ? this.#handleBezierKeyboard(event, Number(handle))
+            : this.#handleSpringKeyboard(event, handle);
+        if (!handled) return;
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      },
+      { capture: true },
     );
   }
 
@@ -10655,6 +11761,8 @@ class FigEasingCurve extends HTMLElement {
 
   #setupEvents() {
     if (this.#svg && this.#mode === "bezier") {
+      this.#setupHandleInteraction(this.#handle1, "1");
+      this.#setupHandleInteraction(this.#handle2, "2");
       this.#handle1.addEventListener("pointerdown", (e) =>
         this.#startBezierDrag(e, 1),
       );
@@ -10673,6 +11781,8 @@ class FigEasingCurve extends HTMLElement {
         });
       }
     } else if (this.#svg) {
+      this.#setupHandleInteraction(this.#handle1, "bounce");
+      this.#setupHandleInteraction(this.#handle2, "duration");
       this.#handle1.addEventListener("pointerdown", (e) => {
         e.stopPropagation();
         this.#startSpringDrag(e, "bounce");
@@ -11518,6 +12628,46 @@ class FigOriginGrid extends HTMLElement {
     };
   }
 
+  #moveHandleByKeyboard(event) {
+    if (!this.#dragEnabled) return false;
+    const step = event.shiftKey ? 10 : 1;
+    let nextX = this.#x;
+    let nextY = this.#y;
+
+    switch (event.key) {
+      case "ArrowLeft":
+        nextX -= step;
+        break;
+      case "ArrowRight":
+        nextX += step;
+        break;
+      case "ArrowUp":
+        nextY -= step;
+        break;
+      case "ArrowDown":
+        nextY += step;
+        break;
+      case "Home":
+        nextX = 0;
+        nextY = 0;
+        break;
+      case "End":
+        nextX = 100;
+        nextY = 100;
+        break;
+      default:
+        return false;
+    }
+
+    this.#setFromPercent(
+      this.#clampPercentage(nextX),
+      this.#clampPercentage(nextY),
+      "input",
+    );
+    this.#emit("change");
+    return true;
+  }
+
   #detachHandleDragListeners() {
     if (
       !this.#grid ||
@@ -11621,6 +12771,12 @@ class FigOriginGrid extends HTMLElement {
       this.#clearHoveredCells();
     });
 
+    this.#handle.addEventListener("keydown", (e) => {
+      if (!this.#moveHandleByKeyboard(e)) return;
+      e.preventDefault();
+      e.stopPropagation();
+    });
+
     const bindValueInput = (inputEl, axis) => {
       if (!inputEl) return;
       const handle = (e) => {
@@ -11652,7 +12808,7 @@ customElements.define("fig-origin-grid", FigOriginGrid);
  * @attr {number} transform - A scaling factor for the output.
  * @attr {boolean} fields - Whether to display X and Y inputs.
  * @attr {string} aspect-ratio - Aspect ratio for the joystick plane container.
- * @attr {string} axis-labels - Space-delimited labels. 1 token: top. 2 tokens: x y. 4 tokens: left right top bottom.
+ * @attr {string} axis-labels - Comma- or space-delimited labels. 1 token: top. 2 tokens: x y. 4 tokens: left right top bottom.
  */
 class FigInputJoystick extends HTMLElement {
   #boundPlanePointerDown = null;
@@ -11736,7 +12892,7 @@ class FigInputJoystick extends HTMLElement {
     if (!raw) {
       return { left: "", right: "", top: "", bottom: "", leftNoRotate: false };
     }
-    const tokens = raw.split(/\s+/).filter(Boolean);
+    const tokens = raw.split(/[\s,]+/).filter(Boolean);
     if (tokens.length === 1) {
       return {
         left: "",
@@ -11775,7 +12931,7 @@ class FigInputJoystick extends HTMLElement {
     ].join("");
 
     return `        
-          <div class="fig-input-joystick-plane-container" tabindex="0">
+          <div class="fig-input-joystick-plane-container">
             ${labelsMarkup}
             <div class="fig-input-joystick-plane">
               <div class="fig-input-joystick-guides"></div>
@@ -11977,8 +13133,7 @@ class FigInputJoystick extends HTMLElement {
   }
 
   focus() {
-    const container = this.querySelector(".fig-input-joystick-plane-container");
-    container?.focus();
+    this.cursor?.focus();
   }
   static get observedAttributes() {
     return [
@@ -12069,10 +13224,11 @@ class FigShimmer extends HTMLElement {
     if (duration) {
       this.style.setProperty(this.durationPropertyName, duration);
     }
+    this.#syncA11y();
   }
 
   static get observedAttributes() {
-    return ["duration", "playing"];
+    return ["duration", "playing", "aria-label", "aria-labelledby"];
   }
 
   get playing() {
@@ -12091,138 +13247,44 @@ class FigShimmer extends HTMLElement {
     if (name === "duration") {
       this.style.setProperty(this.durationPropertyName, newValue || "1.5s");
     }
-    // playing is handled purely by CSS attribute selectors
-  }
-}
-customElements.define("fig-shimmer", FigShimmer);
-
-// FigSkeleton
-class FigSkeleton extends FigShimmer {}
-customElements.define("fig-skeleton", FigSkeleton);
-
-// FigLayer
-class FigLayer extends HTMLElement {
-  static get observedAttributes() {
-    return ["open", "visible"];
-  }
-
-  #chevron = null;
-  #boundHandleChevronClick = null;
-
-  connectedCallback() {
-    // Use requestAnimationFrame to ensure child elements have rendered
-    requestAnimationFrame(() => {
-      this.#injectChevron();
-    });
-  }
-
-  disconnectedCallback() {
-    if (this.#chevron && this.#boundHandleChevronClick) {
-      this.#chevron.removeEventListener("click", this.#boundHandleChevronClick);
-    }
-  }
-
-  #injectChevron() {
-    const row = this.querySelector(":scope > .fig-layer-row");
-    if (!row) return;
-
-    // Check if chevron already exists
-    if (row.querySelector(".fig-layer-chevron")) return;
-
-    // Always create chevron element - CSS handles visibility via :has(fig-layer)
-    this.#chevron = document.createElement("span");
-    this.#chevron.className = "fig-layer-chevron";
-    row.prepend(this.#chevron);
-
-    // Add click listener to chevron only
-    this.#boundHandleChevronClick = this.#handleChevronClick.bind(this);
-    this.#chevron.addEventListener("click", this.#boundHandleChevronClick);
-  }
-
-  #handleChevronClick(e) {
-    e.stopPropagation();
-    this.open = !this.open;
-  }
-
-  get open() {
-    const attr = this.getAttribute("open");
-    return attr !== null && attr !== "false";
-  }
-
-  set open(value) {
-    const oldValue = this.open;
-    if (value) {
-      this.setAttribute("open", "true");
-    } else {
-      this.setAttribute("open", "false");
-    }
-    if (oldValue !== value) {
-      this.dispatchEvent(
-        new CustomEvent("openchange", {
-          detail: { open: value },
-          bubbles: true,
-        }),
-      );
+    if (name === "playing" || name === "aria-label" || name === "aria-labelledby") {
+      this.#syncA11y();
     }
   }
 
-  get visible() {
-    const attr = this.getAttribute("visible");
-    return attr !== "false";
-  }
-
-  set visible(value) {
-    const oldValue = this.visible;
-    if (value) {
-      this.setAttribute("visible", "true");
+  #syncA11y() {
+    const playing = this.playing;
+    this.setAttribute("aria-busy", playing ? "true" : "false");
+    if (this.hasAttribute("aria-label") || this.hasAttribute("aria-labelledby")) {
+      if (!this.hasAttribute("role")) this.setAttribute("role", "status");
+      this.removeAttribute("aria-hidden");
     } else {
-      this.setAttribute("visible", "false");
-    }
-    if (oldValue !== value) {
-      this.dispatchEvent(
-        new CustomEvent("visibilitychange", {
-          detail: { visible: value },
-          bubbles: true,
-        }),
-      );
+      this.removeAttribute("role");
+      this.setAttribute("aria-hidden", "true");
     }
   }
+}
+customElements.define("fig-shimmer", FigShimmer);
 
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (oldValue === newValue) return;
-
-    if (name === "open") {
-      const isOpen = newValue !== null && newValue !== "false";
-      this.dispatchEvent(
-        new CustomEvent("openchange", {
-          detail: { open: isOpen },
-          bubbles: true,
-        }),
-      );
-    }
-
-    if (name === "visible") {
-      const isVisible = newValue !== "false";
-      this.dispatchEvent(
-        new CustomEvent("visibilitychange", {
-          detail: { visible: isVisible },
-          bubbles: true,
-        }),
-      );
-    }
+// FigSkeleton
+class FigSkeleton extends FigShimmer {
+  connectedCallback() {
+    super.connectedCallback();
+    this.inert = true;
+    this.setAttribute("inert", "");
   }
 }
-customElements.define("fig-layer", FigLayer);
+customElements.define("fig-skeleton", FigSkeleton);
 
 // FigGroup
 class FigGroup extends HTMLElement {
-  static observedAttributes = ["name", "collapsible"];
+  static observedAttributes = ["name", "collapsible", "open"];
 
   #header = null;
   #chevron = null;
 
   connectedCallback() {
-    requestAnimationFrame(() => this.#render());
+    this.#render();
   }
 
   disconnectedCallback() {
@@ -12231,11 +13293,17 @@ class FigGroup extends HTMLElement {
     }
     if (this.#header) {
       this.#header.removeEventListener("click", this.#handleToggle);
+      this.#header.removeEventListener("keydown", this.#handleHeaderKeyDown);
+      this.#header.querySelector("h3")?.removeEventListener("click", this.#handleToggle);
     }
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue === newValue) return;
+    if (name === "open") {
+      this.#header?.setAttribute("aria-expanded", String(this.open));
+      return;
+    }
     this.#render();
   }
 
@@ -12251,6 +13319,7 @@ class FigGroup extends HTMLElement {
     } else {
       this.setAttribute("open", "false");
     }
+    this.#header?.setAttribute("aria-expanded", String(!!value));
     if (was !== !!value) {
       this.dispatchEvent(
         new CustomEvent("openchange", {
@@ -12266,6 +13335,13 @@ class FigGroup extends HTMLElement {
     this.open = !this.open;
   };
 
+  #handleHeaderKeyDown = (e) => {
+    if (e.key !== "Enter" && e.key !== " ") return;
+    e.preventDefault();
+    e.stopPropagation();
+    this.open = !this.open;
+  };
+
   #render() {
     const isCollapsible = this.hasAttribute("collapsible");
     const nameAttr = this.getAttribute("name");
@@ -12298,9 +13374,14 @@ class FigGroup extends HTMLElement {
       h3 = document.createElement("h3");
       this.#header.prepend(h3);
     }
+    if (!h3.id) h3.id = figUniqueId();
     if (this.#header.dataset.generated) {
       h3.textContent = label;
     }
+    if (!this.hasAttribute("role")) this.setAttribute("role", "group");
+    if (!this.hasAttribute("aria-label") && !this.hasAttribute("aria-labelledby")) {
+      this.setAttribute("aria-labelledby", h3.id);
+    }
 
     if (isCollapsible) {
       if (!h3.querySelector(".fig-group-chevron")) {
@@ -12311,12 +13392,26 @@ class FigGroup extends HTMLElement {
         h3.prepend(chevron);
       }
       this.#chevron = h3.querySelector(".fig-group-chevron");
-      h3.addEventListener("click", this.#handleToggle);
+      h3.removeEventListener("click", this.#handleToggle);
+      this.#header.removeEventListener("click", this.#handleToggle);
+      this.#header.addEventListener("click", this.#handleToggle);
+      this.#header.setAttribute("role", "button");
+      this.#header.setAttribute("tabindex", "0");
+      this.#header.setAttribute("aria-expanded", String(this.open));
+      this.#header.removeEventListener("keydown", this.#handleHeaderKeyDown);
+      this.#header.addEventListener("keydown", this.#handleHeaderKeyDown);
 
       if (!this.hasAttribute("open")) {
         this.setAttribute("open", "false");
+        this.#header.setAttribute("aria-expanded", "false");
       }
     } else {
+      h3.removeEventListener("click", this.#handleToggle);
+      this.#header.removeEventListener("click", this.#handleToggle);
+      this.#header.removeAttribute("role");
+      this.#header.removeAttribute("tabindex");
+      this.#header.removeAttribute("aria-expanded");
+      this.#header.removeEventListener("keydown", this.#handleHeaderKeyDown);
       if (this.#chevron) {
         this.#chevron.remove();
         this.#chevron = null;
@@ -12346,7 +13441,14 @@ class FigFooter extends HTMLElement {}
 customElements.define("fig-footer", FigFooter);
 
 /* Presentational elements (CSS-only, no behavior) */
-class FigSpinner extends HTMLElement {}
+class FigSpinner extends HTMLElement {
+  connectedCallback() {
+    if (!this.hasAttribute("role")) this.setAttribute("role", "status");
+    if (!this.hasAttribute("aria-label") && !this.hasAttribute("aria-labelledby")) {
+      this.setAttribute("aria-label", "Loading");
+    }
+  }
+}
 customElements.define("fig-spinner", FigSpinner);
 
 /**
@@ -12486,7 +13588,16 @@ class FigColorTip extends HTMLElement {
   #boundHandleChange = this.#handlePickerChange.bind(this);
 
   static get observedAttributes() {
-    return ["value", "selected", "disabled", "alpha", "control"];
+    return [
+      "value",
+      "selected",
+      "disabled",
+      "alpha",
+      "control",
+      "aria-label",
+      "aria-labelledby",
+      "aria-describedby",
+    ];
   }
 
   get #controlMode() {
@@ -12549,10 +13660,12 @@ class FigColorTip extends HTMLElement {
     const mode = this.#controlMode;
     if (mode === "add" || mode === "remove") {
       const iconName = mode === "add" ? "add" : "minus";
-      this.innerHTML = `<fig-button icon variant="ghost"><fig-icon name="${iconName}"></fig-icon></fig-button>`;
+      const label = this.getAttribute("aria-label") || (mode === "add" ? "Add color stop" : "Remove color stop");
+      this.innerHTML = `<fig-button icon variant="ghost" aria-label="${label}"><fig-icon name="${iconName}"></fig-icon></fig-button>`;
       this.#fillPicker = null;
       this.#chit = null;
       this.addEventListener("click", this.#handleControlClick);
+      this.#syncA11y();
       return;
     }
     this.removeEventListener("click", this.#handleControlClick);
@@ -12586,6 +13699,7 @@ class FigColorTip extends HTMLElement {
       this.#chit?.addEventListener("change", this.#boundHandleChange);
     }
     this.#observeChitSelected();
+    this.#syncA11y();
   }
 
   #handleControlClick = () => {
@@ -12681,6 +13795,7 @@ class FigColorTip extends HTMLElement {
     }
 
     if (this.#fillPicker) {
+      this.#syncA11y();
       const pickerVal =
         alpha < 1
           ? { type: "solid", color, opacity: Math.round(alpha * 100) }
@@ -12699,6 +13814,7 @@ class FigColorTip extends HTMLElement {
     }
 
     if (this.#chit) {
+      this.#syncA11y();
       this.#chit.setAttribute("background", color);
       if (alpha < 1) {
         this.#chit.setAttribute("alpha", String(alpha));
@@ -12713,6 +13829,39 @@ class FigColorTip extends HTMLElement {
     }
   }
 
+  #syncA11y() {
+    const mode = this.#controlMode;
+    const disabled =
+      this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false";
+    const selected =
+      this.hasAttribute("selected") && this.getAttribute("selected") !== "false";
+    this.setAttribute("aria-disabled", disabled ? "true" : "false");
+    this.setAttribute("aria-pressed", selected ? "true" : "false");
+    if (mode === "add" || mode === "remove") {
+      const button = this.querySelector("fig-button");
+      const label = this.getAttribute("aria-label") || (mode === "add" ? "Add color stop" : "Remove color stop");
+      button?.setAttribute("aria-label", label);
+      if (disabled) button?.setAttribute("disabled", "");
+      else button?.removeAttribute("disabled");
+      return;
+    }
+
+    const target = this.#fillPicker || this.#chit;
+    if (!target) return;
+    const label = this.getAttribute("aria-label") || "Color stop";
+    const labelledBy = this.getAttribute("aria-labelledby");
+    const describedBy = this.getAttribute("aria-describedby");
+    if (labelledBy) {
+      target.setAttribute("aria-labelledby", labelledBy);
+      target.removeAttribute("aria-label");
+    } else {
+      target.setAttribute("aria-label", label);
+      target.removeAttribute("aria-labelledby");
+    }
+    if (describedBy) target.setAttribute("aria-describedby", describedBy);
+    else target.removeAttribute("aria-describedby");
+  }
+
   #updateColorFromPicker(detail, type) {
     const nextColor = this.#normalizeColor(detail?.color);
     const prevColor = this.#normalizeColor(this.getAttribute("value"));
@@ -12762,7 +13911,11 @@ class FigColorTip extends HTMLElement {
       case "value":
       case "selected":
       case "disabled":
+      case "aria-label":
+      case "aria-labelledby":
+      case "aria-describedby":
         this.#syncFromAttributes();
+        this.#syncA11y();
         break;
     }
   }
@@ -13426,6 +14579,8 @@ class FigHandle extends HTMLElement {
     "tip",
     "hit-area",
     "hit-area-mode",
+    "aria-label",
+    "aria-labelledby",
   ];
 
   #isDragging = false;
@@ -13653,6 +14808,7 @@ class FigHandle extends HTMLElement {
   }
 
   connectedCallback() {
+    this.#syncA11y();
     this.#syncDrag();
     this.#syncHitArea();
     this.addEventListener("click", this.#handleSelect);
@@ -13709,7 +14865,32 @@ class FigHandle extends HTMLElement {
   };
 
   #handleKeyDown = (e) => {
+    if (e.defaultPrevented) return;
+    if (
+      e.target === this &&
+      this.#dragEnabled &&
+      ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(e.key)
+    ) {
+      if (this.#moveByKeyboard(e)) {
+        e.preventDefault();
+        if (!this.hasAttribute("selected")) this.select();
+      }
+      return;
+    }
     if (e.key !== "Enter" && e.key !== " ") return;
+    if (e.target === this && !this.hasAttribute("selected")) {
+      e.preventDefault();
+      if (
+        this.getAttribute("type") === "color" &&
+        this.#canOpenColorPicker &&
+        !this.#tipMode
+      ) {
+        this.#openDirectColorPicker();
+      } else {
+        this.select();
+      }
+      return;
+    }
     if (!this.hasAttribute("selected")) return;
     if (this.getAttribute("type") !== "color") return;
     if (!this.#canOpenColorPicker) return;
@@ -13719,6 +14900,64 @@ class FigHandle extends HTMLElement {
     }
   };
 
+  #moveByKeyboard(event) {
+    if (this.hasAttribute("disabled")) return false;
+    const container = this.#getContainer();
+    if (!container) return false;
+    const rect = container.getBoundingClientRect();
+    if (rect.width <= 0 || rect.height <= 0) return false;
+
+    const axes = this.#axes;
+    const current = this.#positionDetail(rect);
+    const pctStep = event.shiftKey ? 0.1 : 0.01;
+    let px = current.px;
+    let py = current.py;
+
+    switch (event.key) {
+      case "ArrowLeft":
+        if (!axes.x) return false;
+        px -= pctStep;
+        break;
+      case "ArrowRight":
+        if (!axes.x) return false;
+        px += pctStep;
+        break;
+      case "ArrowUp":
+        if (!axes.y) return false;
+        py -= pctStep;
+        break;
+      case "ArrowDown":
+        if (!axes.y) return false;
+        py += pctStep;
+        break;
+      case "Home":
+        if (axes.x) px = 0;
+        if (axes.y) py = 0;
+        break;
+      case "End":
+        if (axes.x) px = 1;
+        if (axes.y) py = 1;
+        break;
+      default:
+        return false;
+    }
+
+    px = Math.max(0, Math.min(1, px));
+    py = Math.max(0, Math.min(1, py));
+    this.#syncPositionTranslate(axes);
+    if (axes.x) this.style.left = `${Math.round(px * rect.width)}px`;
+    if (axes.y) this.style.top = `${Math.round(py * rect.height)}px`;
+    this.#syncValueAttribute();
+    const detail = {
+      ...this.#positionDetail(rect),
+      shiftKey: event.shiftKey,
+      keyboard: true,
+    };
+    this.dispatchEvent(new CustomEvent("input", { bubbles: true, detail }));
+    this.dispatchEvent(new CustomEvent("change", { bubbles: true, detail }));
+    return true;
+  }
+
   attributeChangedCallback(name, _old, value) {
     if (name === "color") {
       if (!value || value === "false" || value === "true") {
@@ -13734,6 +14973,16 @@ class FigHandle extends HTMLElement {
     if (name === "drag") this.#syncDrag();
     if (name === "hit-area") this.#syncHitArea();
     if (name === "selected") this.#syncColorTipSelected();
+    if (
+      name === "selected" ||
+      name === "disabled" ||
+      name === "type" ||
+      name === "tip" ||
+      name === "aria-label" ||
+      name === "aria-labelledby"
+    ) {
+      this.#syncA11y();
+    }
     if (name === "value" && !this.#applyingValue && !this.#isDragging) {
       this.#applyValue(value);
     }
@@ -13755,6 +15004,25 @@ class FigHandle extends HTMLElement {
     }
   }
 
+  #syncA11y() {
+    const disabled =
+      this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false";
+    const selected =
+      this.hasAttribute("selected") && this.getAttribute("selected") !== "false";
+    if (!this.hasAttribute("role")) this.setAttribute("role", "button");
+    if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", disabled ? "-1" : "0");
+    else if (disabled) this.setAttribute("tabindex", "-1");
+    this.setAttribute("aria-disabled", disabled ? "true" : "false");
+    this.setAttribute("aria-pressed", selected ? "true" : "false");
+    if (!this.hasAttribute("aria-label") && !this.hasAttribute("aria-labelledby")) {
+      const mode = this.#tipMode || this.getAttribute("type") || "handle";
+      this.setAttribute(
+        "aria-label",
+        mode === "color" ? "Color handle" : mode === "add" ? "Add handle" : mode === "remove" ? "Remove handle" : "Handle",
+      );
+    }
+  }
+
   #teardownDrag() {
     if (this.#boundPointerDown) {
       this.removeEventListener("pointerdown", this.#boundPointerDown);
@@ -14240,9 +15508,29 @@ class FigMenuItem extends HTMLElement {
     if (!this.hasAttribute("tabindex")) {
       this.setAttribute("tabindex", "-1");
     }
+    this.#syncDisabled();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (name === "disabled") {
+      this.#syncDisabled();
+    }
   }
 
-  attributeChangedCallback() {}
+  #syncDisabled() {
+    const disabled =
+      this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false";
+    if (disabled) {
+      this.setAttribute("aria-disabled", "true");
+      this.setAttribute("tabindex", "-1");
+    } else {
+      this.removeAttribute("aria-disabled");
+      if (!this.hasAttribute("tabindex")) {
+        this.setAttribute("tabindex", "-1");
+      }
+    }
+  }
 }
 customElements.define("fig-menu-item", FigMenuItem);
 
@@ -14312,6 +15600,7 @@ class FigMenu extends HTMLElement {
 
   disconnectedCallback() {
     this.#teardownListeners();
+    document.removeEventListener("keydown", this.#boundMenuKeydown, true);
     if (this.#observer) {
       this.#observer.disconnect();
       this.#observer = null;
@@ -14366,6 +15655,7 @@ class FigMenu extends HTMLElement {
     this.#popup.setAttribute("is", "fig-popup");
     this.#popup.setAttribute("theme", "menu");
     this.#popup.setAttribute("role", "menu");
+    this.#popup.setAttribute("id", this.#popup.getAttribute("id") || figUniqueId());
 
     const position = this.getAttribute("position") || "bottom left";
     this.#popup.setAttribute("position", position);
@@ -14399,9 +15689,11 @@ class FigMenu extends HTMLElement {
       this.#trigger.addEventListener("click", this.#boundTriggerClick);
       this.#trigger.setAttribute("aria-haspopup", "menu");
       this.#trigger.setAttribute("aria-expanded", "false");
+      this.#trigger.setAttribute("aria-controls", this.#popup.getAttribute("id"));
     }
     if (this.#popup) {
       this.#popup.addEventListener("click", this.#boundPopupClick);
+      this.#popup.addEventListener("keydown", this.#boundMenuKeydown);
     }
   }
 
@@ -14412,6 +15704,7 @@ class FigMenu extends HTMLElement {
     }
     if (this.#popup) {
       this.#popup.removeEventListener("click", this.#boundPopupClick);
+      this.#popup.removeEventListener("keydown", this.#boundMenuKeydown);
     }
   }
 
@@ -14431,6 +15724,7 @@ class FigMenu extends HTMLElement {
               this.#trigger.addEventListener("click", this.#boundTriggerClick);
               this.#trigger.setAttribute("aria-haspopup", "menu");
               this.#trigger.setAttribute("aria-expanded", "false");
+              this.#trigger.setAttribute("aria-controls", this.#popup.getAttribute("id"));
               this.#popup.anchor = this.#trigger;
               this.#syncDisabled();
             }
@@ -14443,7 +15737,10 @@ class FigMenu extends HTMLElement {
 
   #getItems() {
     if (!this.#popup) return [];
-    return Array.from(this.#popup.querySelectorAll("fig-menu-item:not([disabled]):not([disabled='true'])"));
+    return Array.from(this.#popup.querySelectorAll("fig-menu-item")).filter(
+      (item) =>
+        !item.hasAttribute("disabled") || item.getAttribute("disabled") === "false",
+    );
   }
 
   #syncFocusedIndex() {
@@ -14462,9 +15759,9 @@ class FigMenu extends HTMLElement {
   #focusItemAt(index) {
     const items = this.#getItems();
     if (!items.length) return;
-    const clamped = Math.max(0, Math.min(index, items.length - 1));
-    this.#focusedIndex = clamped;
-    items[clamped].focus();
+    const wrapped = (index + items.length) % items.length;
+    this.#focusedIndex = wrapped;
+    items[wrapped].focus();
   }
 
   #syncDisabled() {
@@ -14472,8 +15769,11 @@ class FigMenu extends HTMLElement {
     const disabled = this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false";
     if (disabled) {
       this.#trigger.setAttribute("disabled", "");
+      this.#trigger.setAttribute("aria-disabled", "true");
+      this.#trigger.setAttribute("aria-expanded", "false");
     } else {
       this.#trigger.removeAttribute("disabled");
+      this.#trigger.removeAttribute("aria-disabled");
     }
   }
 
@@ -14501,7 +15801,19 @@ class FigMenu extends HTMLElement {
   }
 
   #handleMenuKeydown(e) {
-    if (!this.open || !this.#popup?.matches?.(":open")) return;
+    if (e.currentTarget === document && e.key !== "Escape") return;
+    if (e.currentTarget === this && this.#popup?.contains(e.target)) return;
+    if (!this.open || !this.#popup?.matches?.(":open")) {
+      if (
+        this.#trigger?.contains(e.target) &&
+        (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ")
+      ) {
+        e.preventDefault();
+        this.open = true;
+        requestAnimationFrame(() => this.#focusItemAt(0));
+      }
+      return;
+    }
 
     const items = this.#getItems();
     if (!items.length) return;
@@ -14529,6 +15841,12 @@ class FigMenu extends HTMLElement {
         this.#focusItemAt(items.length - 1);
         break;
       }
+      case "Escape": {
+        e.preventDefault();
+        this.open = false;
+        this.#trigger?.focus();
+        break;
+      }
       case "Enter":
       case " ": {
         this.#syncFocusedIndex();
@@ -14567,6 +15885,7 @@ class FigMenu extends HTMLElement {
   #openMenu() {
     if (!this.#popup) return;
     this.#popup.open = true;
+    document.addEventListener("keydown", this.#boundMenuKeydown, true);
     if (this.#trigger) {
       this.#trigger.setAttribute("aria-expanded", "true");
     }
@@ -14579,7 +15898,9 @@ class FigMenu extends HTMLElement {
 
   #closeMenu() {
     if (!this.#popup) return;
+    document.removeEventListener("keydown", this.#boundMenuKeydown, true);
     this.#popup.open = false;
+    this.#trigger?.setAttribute("aria-expanded", "false");
   }
 }
 customElements.define("fig-menu", FigMenu);