@rogieking/figui3 6.15.0 → 6.17.0

package/README.md

@@ -89,6 +89,7 @@ Minimal example:
 | [Switch](#switch) | `<fig-switch>` | Toggle switch |
 | [Slider](#slider) | `<fig-slider>` | Range, hue, opacity, delta, stepper |
 | [Propskit Slider](#propskit-slider) | `<propskit-slider>` | Labeled field + slider combo |
+| [Propskit Color](#propskit-color) | `<propskit-color>` | Full-surface labeled color control |
 | [Propskit Number](#propskit-number) | `<propskit-number>` | Full-surface labeled number control |
 | [Propskit Select](#propskit-select) | `<propskit-select>` | Full-surface labeled select control |
 | [Propskit Switch](#propskit-switch) | `<propskit-switch>` | Full-surface labeled switch control |
@@ -316,6 +317,22 @@ Composes a `<fig-field>` and `<fig-input-number>` into a full-surface property c
 
 ---
 
+#### Propskit Color
+
+`<propskit-color>`
+
+Composes a `<fig-field>` and `<fig-input-color>` into a full-surface property control. Color attributes are forwarded to the inner input and text editing remains enabled.
+
+**Attributes:** `label`, `value`, `alpha`, `disabled`, `experimental`, `size`
+
+**Events:** `input`, `change` — forwarded from the inner color input.
+
+```html
+<propskit-color label="Fill" value="#0D99FF" alpha="true"></propskit-color>
+```
+
+---
+
 #### Propskit Switch
 
 `<propskit-switch>`
@@ -1161,9 +1178,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);
 }