@rogieking/figui3 8.9.43 → 8.9.44

package/fig-lab.css

@@ -250,6 +250,7 @@ propskit-group {
   & > fig-header {
     cursor: default;
     padding-left: var(--spacer-3);
+    gap: 0;
 
     &:focus-visible {
       --figma-focus-outline-radius: var(--radius-medium);
@@ -258,19 +259,28 @@ propskit-group {
       border-radius: var(--figma-focus-outline-radius);
     }
 
-    h3 {
+    & > h3 {
+      flex: 1 1 auto;
+      min-width: 0;
+      display: block;
       margin: 0;
+      padding-left: 0;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      max-width: 100%;
       user-select: none;
+    }
 
-      .propskit-group-chevron {
-        --icon: var(--icon-16-chevron);
-        --size: 1rem;
-        color: var(--figma-color-text-tertiary);
-        transform: rotate(-90deg);
-        transition: transform var(--transition-duration)
-          var(--transition-timing-function);
-        margin-left: calc(var(--spacer-3) * -1);
-      }
+    & > .propskit-group-chevron {
+      --icon: var(--icon-16-chevron);
+      --size: 1rem;
+      flex: 0 0 auto;
+      color: var(--figma-color-text-tertiary);
+      transform: rotate(-90deg);
+      transition: transform var(--transition-duration)
+        var(--transition-timing-function);
+      margin-left: calc(var(--spacer-2) * -1);
     }
   }
 

package/fig-lab.js

@@ -4589,10 +4589,7 @@ class PropskitGroup extends HTMLElement {
 
     if (!h3.id) h3.id = figLabUniqueId("propskit-group");
     if (this.#header.dataset.generated) {
-      // Preserve chevron while updating the title text node.
-      const chevron = h3.querySelector(".propskit-group-chevron");
       h3.textContent = label;
-      if (chevron) h3.prepend(chevron);
     }
     if (!this.hasAttribute("role")) this.setAttribute("role", "group");
     if (
@@ -4602,14 +4599,17 @@ class PropskitGroup extends HTMLElement {
       this.setAttribute("aria-labelledby", h3.id);
     }
 
-    if (!h3.querySelector(".propskit-group-chevron")) {
-      const chevron = document.createElement("fig-icon");
+    let chevron =
+      this.#header.querySelector(":scope > .propskit-group-chevron") ||
+      h3.querySelector(":scope > .propskit-group-chevron");
+    if (!chevron) {
+      chevron = document.createElement("fig-icon");
       chevron.setAttribute("name", "chevron");
       chevron.setAttribute("size", "small");
       chevron.className = "propskit-group-chevron";
-      h3.prepend(chevron);
     }
-    this.#chevron = h3.querySelector(".propskit-group-chevron");
+    this.#header.insertBefore(chevron, h3);
+    this.#chevron = chevron;
     this.#syncResetButton();
     this.#header.setAttribute("role", "button");
     this.#syncDisabled();

package/fig.js

@@ -16987,14 +16987,15 @@ class FigGroup extends HTMLElement {
     }
 
     if (isCollapsible) {
-      if (!h3.querySelector(".fig-group-chevron")) {
-        const chevron = createFigIcon("chevron", {
+      let chevron = this.#header.querySelector(".fig-group-chevron");
+      if (!chevron) {
+        chevron = createFigIcon("chevron", {
           size: "small",
           className: "fig-group-chevron",
         });
-        h3.prepend(chevron);
       }
-      this.#chevron = h3.querySelector(".fig-group-chevron");
+      this.#header.insertBefore(chevron, h3);
+      this.#chevron = chevron;
       h3.removeEventListener("click", this.#handleToggle);
       this.#header.removeEventListener("click", this.#handleToggle);
       this.#header.addEventListener("click", this.#handleToggle);

package/package.json

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