@rogieking/figui3 6.16.0 → 6.18.0

package/README.md

@@ -353,18 +353,14 @@ Composes a `<fig-field>` and an Off/On `<fig-segmented-control>` into a full-sur
 
 `<propskit-select>`
 
-Composes a `<fig-field>` and `<fig-dropdown>` into a full-surface property control. Dropdown attributes and child `<option>` elements are forwarded to the inner control.
+Composes a `<fig-field>` and `<fig-select>` into a full-surface property control. Options come from the `options` attribute (same formats as `fig-options`: comma-separated, newline-delimited, or a JSON array).
 
-**Attributes:** `label`, `value`, `disabled`, `experimental`, `size`
+**Attributes:** `label`, `value`, `options`, `disabled`, `size`
 
-**Events:** `input`, `change` — forwarded from the inner dropdown.
+**Events:** `input`, `change` — forwarded from the inner select.
 
 ```html
-<propskit-select label="Alignment" value="center">
-  <option value="left">Left</option>
-  <option value="center">Center</option>
-  <option value="right">Right</option>
-</propskit-select>
+<propskit-select label="Alignment" value="Center" options="Left,Center,Right"></propskit-select>
 ```
 
 ---
@@ -1178,9 +1174,13 @@ Triggered menu with native keyboard patterns. The trigger gets `aria-haspopup="m
   <fig-menu-item value="paste">Paste</fig-menu-item>
   <fig-menu-separator></fig-menu-separator>
   <fig-menu-item value="delete" disabled>Delete</fig-menu-item>
+  <fig-menu-separator label="More"></fig-menu-separator>
+  <fig-menu-item value="settings">Settings</fig-menu-item>
 </fig-menu>
 ```
 
+`fig-menu-separator` accepts optional `label` — renders the rule, then secondary group text underneath.
+
 ---
 
 #### Header

package/components.css

@@ -5345,7 +5345,7 @@ fig-menu {
 }
 
 fig-menu-item {
-  --fig-menu-item-padding: var(--spacer-3);
+  --fig-menu-item-padding: var(--spacer-4);
   display: flex;
   align-items: center;
   gap: var(--spacer-2);
@@ -5383,8 +5383,51 @@ fig-menu-item {
 }
 
 fig-menu-separator {
+  --fig-menu-separator-color: var(--figma-color-border);
+  --fig-menu-separator-label-color: var(--figma-color-text-secondary);
+
   display: block;
   height: 1px;
-  background: var(--figma-color-border);
   margin: var(--spacer-2) 0;
+  padding: 0;
+  border: 0;
+  background: var(--fig-menu-separator-color);
+  color: var(--fig-menu-separator-label-color);
+  font-weight: var(--body-medium-fontWeight);
+  pointer-events: none;
+  user-select: none;
+
+  /* Labeled: rule, then secondary group label (same pattern as menu optgroups). */
+  &[label]:not([label=""]) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2);
+    height: auto;
+    margin: var(--spacer-2) 0;
+    margin-bottom: var(--spacer-1);
+    padding: 0 var(--fig-menu-item-padding, var(--spacer-4));
+    background: transparent;
+
+    &::before {
+      content: "";
+      display: block;
+      height: 1px;
+      margin-inline: calc(-1 * var(--fig-menu-item-padding, var(--spacer-4)));
+      background: var(--fig-menu-separator-color);
+    }
+
+    &::after {
+      content: attr(label);
+      display: block;
+      color: var(--fig-menu-separator-label-color);
+      line-height: var(--spacer-4);
+      min-height: var(--spacer-4);
+    }
+  }
+}
+
+dialog[is="fig-popup"][theme="menu"] fig-menu-separator,
+fig-select-options > fig-menu-separator {
+  --fig-menu-separator-color: var(--figma-color-border-menu);
+  --fig-menu-separator-label-color: var(--figma-color-text-menu-secondary);
 }