@rogieking/figui3 9.4.12 → 10.0.0

package/.cursor/skills/fig-editor/components.md

@@ -49,7 +49,7 @@ Data-driven (no authored options):
 ```
 
 - Auto `slot="panel"` if missing. Use `slot="panel"` when the panel is slotted (rich / verbose options).
-- First `fig-separator` child is auto-`borderless`. `sticky` pins the label while scrolling.
+- A leading labeled `fig-separator` omits its rule. `sticky` pins the label while scrolling.
 - Overflow adds `.overflow-start` / `.overflow-end`. Sticky `top` sits below the overflow chevron (`--fig-vertical-overflow-size`).
 - Methods: `syncOverflow()`, `scrollToOption(option, behavior)`.
 - Options stay in light DOM. Author them as React children.

package/.cursor/skills/fig-editor/reference.md

@@ -15,7 +15,7 @@ Observed: `value`, `disabled`, `selected`, `label`.
 
 - Auto `slot="panel"` if missing
 - Unwraps a legacy nested `fig-chooser`
-- First `fig-separator` child gets `borderless`
+- A leading labeled `fig-separator` omits its rule
 - Overflow nav buttons: `data-fig-select-nav`, classes `overflow-start` / `overflow-end`
 - Methods: `syncOverflow()`, `scrollToOption(option, behavior)`
 

package/.cursor/skills/figui3/components.md

@@ -455,7 +455,8 @@ Handlers below assume `onInput` / `onChange` / `onClick` from [react.md](react.m
 <fig-separator label="Darken" sticky />
 ```
 
-- Attrs: `label`, `sticky`, `borderless`. First separator in a panel is auto-`borderless`.
+- Attrs: `label`, `sticky`.
+- `label` generates a child `<label>`; an authored child `<label>` is preserved instead.
 
 ### `fig-menu` / `fig-menu-item`
 

package/.cursor/skills/figui3/reference.md

@@ -103,7 +103,7 @@ Toast: `theme`, `duration`, `offset`, `dismiss`, `live="polite|assertive"`, `ico
 - `position`, `offset`, `closedby="auto|any|none"`, `open`
 - Items stay in light DOM and slot into the popup (do not relocate)
 - Items: `fig-menu-item` (`value`, `disabled`, `subtle`). Also a list row outside `fig-menu` (popup, sticky separators, nested row `fig-menu`).
-- Dividers: `fig-separator` / `fig-menu-separator` (`label`, `sticky`, `borderless`)
+- Dividers: `fig-separator` / `fig-menu-separator` (`label`, `sticky`)
 - Popup uses `popover="manual"` (top layer) and stays in the menu shadow so slots keep working
 
 ## Color / fill values

package/CHANGELOG.md

@@ -2,6 +2,29 @@
 
 All notable changes to this project will be documented in this file.
 
+## [10.0.0]
+
+### Added
+
+- Added a vertical separator playground example.
+
+### Changed
+
+- `fig-separator` labels now render as child `<label>` elements and preserve authored labels.
+- Removed the `borderless` separator attribute; leading labeled menu and select separators now omit their rule automatically.
+- Refined separator spacing and sticky behavior, and reduced chooser selection-ring thickness.
+
+### Fixed
+
+- Visual-only `fig-select-option` rows no longer render stray ellipses or extra height.
+
+## [9.4.13]
+
+### Changed
+
+- `fig-menu-item` append content now aligns directly to the trailing edge without requiring a wrapper.
+- Simplified the standalone menu-item checkbox example to slot the checkbox directly.
+
 ## [9.4.12]
 
 ### Added

package/README.md

@@ -1386,12 +1386,11 @@ Escape dismisses an open tooltip and returns focus to its trigger.
 
 `<fig-separator>` — [demo](https://rog.ie/figui3/#separator)
 
-A visual divider between content groups. The optional `label` attribute adds a group label and accessible name. Add `borderless` to hide the separator line. `<fig-menu-separator>` is a backwards-compatible alias.
+A visual divider between content groups. The optional `label` attribute adds a group label and accessible name. `<fig-menu-separator>` is a backwards-compatible alias.
 
 ```html
 <fig-separator></fig-separator>
 <fig-separator label="More"></fig-separator>
-<fig-separator label="First group" borderless></fig-separator>
 <fig-menu-separator></fig-menu-separator>
 ```
 
@@ -1451,7 +1450,7 @@ Popup list (no wrapping `fig-menu`):
 </dialog>
 ```
 
-`fig-separator` and `fig-menu-separator` accept optional `label` — renders the rule, then secondary group text underneath.
+`fig-separator` and `fig-menu-separator` accept optional `label` — renders the rule, then a generated `<label>` with secondary group text underneath. An authored child `<label>` takes precedence and is preserved.
 
 ---
 

package/components.css

@@ -6075,7 +6075,7 @@ fig-chooser {
   --fig-chooser-inline-padding: var(--spacer-2);
   --fig-chooser-block-padding: var(--spacer-2);
   --fig-chooser-inline-margin: 0px;
-  --fig-choice-selection-ring-width: 2px;
+  --fig-choice-selection-ring-width: 1.5px;
   --fig-choice-selection-ring-gutter: calc(
     var(--fig-choice-selection-ring-width) * 2
   );
@@ -6811,6 +6811,10 @@ fig-menu-item {
     margin-top: calc(var(--spacer-1) * -1);
     margin-bottom: calc(var(--spacer-1) * -1);
   }
+  & > [slot="append"] {
+    margin-left: auto;
+    flex: 0 0 auto;
+  }
 
   &:has(> [slot="append"]) {
     --fig-menu-item-padding: var(--spacer-1,0.25rem) var(--spacer-3,0.75rem) var(--spacer-1,0.25rem) var(--spacer-3,0.75rem);
@@ -6846,69 +6850,58 @@ fig-menu-item {
 :is(fig-separator, fig-menu-separator) {
   --fig-separator-color: var(--figma-color-border);
   --fig-separator-label-color: var(--figma-color-text-secondary);
-  --fig-separator-padding: 0 var(--spacer-4,1rem);
+  --fig-separator-margin-block: var(--spacer-2,0.5rem);
+  --fig-separator-padding-block: 0;
+  --fig-separator-padding-inline: var(--spacer-4,1rem);
 
   display: block;
   box-sizing: border-box;
   flex-shrink: 0;
   width: 100%;
   height: 1px;
-  margin: var(--spacer-2,0.5rem) 0;
-  padding: var(--fig-separator-padding);
+  margin-block: var(--fig-separator-margin-block);
+  margin-inline: 0;
+  padding-block: var(--fig-separator-padding-block);
+  padding-inline: var(--fig-separator-padding-inline);
   border: 0;
-  background: var(--fig-separator-color);
+  border-block-start: 1px solid var(--fig-separator-color);
+  background: transparent;
   color: var(--fig-separator-label-color);
   font-weight: var(--body-medium-fontWeight);
   pointer-events: none;
   user-select: none;
 
   &[direction="vertical"] {
+    --fig-separator-margin-block: 0;
     align-self: stretch;
     width: 1px;
     max-width: 1px;
     height: auto;
     min-height: var(--spacer-3);
-    margin: 0;
     padding: 0;
+    border-block-start: 0;
+    border-inline-start: 1px solid var(--fig-separator-color);
   }
 
-  &[borderless]:not([borderless="false"]) {
-    background: transparent;
-
-    &[label]:not([label=""])::before {
-      display: none;
-    }
+  & > label {
+    display: block;
+    line-height: var(--spacer-4,1rem);
+    min-height: var(--spacer-4,1rem);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   /* Labeled: rule, then secondary group label (same pattern as menu optgroups). */
-  &[label]:not([label=""]) {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacer-2,0.5rem);
+  &:has(> label) {
+    --fig-separator-margin-block: var(--spacer-2,0.5rem) var(--spacer-1,0.25rem);
+    --fig-separator-padding-block: var(--spacer-2,0.5rem) 0;
     height: auto;
-    margin: var(--spacer-2,0.5rem) 0;
-    margin-bottom: var(--spacer-1,0.25rem);
-    background: transparent;
-
-    &:first-of-type,
-    &:first-child {
-      margin-top: 0;
-    }
-
-    &::before {
-      content: "";
-      display: block;
-      height: 1px;
-      margin-inline: calc(-1 * var(--spacer-4,1rem));
-      background: var(--fig-separator-color);
-    }
 
-    &::after {
-      content: attr(label);
-      display: block;
-      color: var(--fig-separator-label-color);
-      line-height: var(--spacer-4,1rem);
-      min-height: var(--spacer-4,1rem);
+    &:first-child{
+      --fig-separator-padding-block: 0;
+      --fig-separator-color: transparent;
+      --fig-separator-margin-block: 0;
     }
 
     &[sticky]:not([sticky="false"]) {
@@ -6918,38 +6911,23 @@ fig-menu-item {
       background: var(--fig-popup-bg-color, var(--figma-color-bg));
 
       &[stuck] {
-        --fig-separator-padding: var(--spacer-2,0.5rem) var(--spacer-4,1rem);
-        &::before {
-          display: none;
-        }
+        --fig-separator-padding-block: var(--fig-separator-stuck-padding-block, var(--spacer-2,0.5rem));
+        --fig-separator-padding-inline: var(--spacer-4,1rem);
+        --fig-separator-color: transparent;
       }
     }
   }
 }
 
-:is(fig-select-options, .fig-menu-options, fig-menu).overflow-start
-  > :is(fig-separator, fig-menu-separator)[label]:not([label=""])[sticky]:not([sticky="false"]) {
-  top: var(--fig-vertical-overflow-size, var(--spacer-4, 1rem)) !important;
-}
-
-dialog[is="fig-popup"][theme="menu"]
-  :is(fig-separator, fig-menu-separator):first-child[label]:not([label=""])::before,
-fig-select-options > :is(fig-separator, fig-menu-separator):first-child[label]:not([label=""])::before {
-  display: none;
-}
-
-dialog[is="fig-popup"][theme="menu"] :is(fig-separator, fig-menu-separator),
-fig-menu > :is(fig-separator, fig-menu-separator),
-fig-select-options > :is(fig-separator, fig-menu-separator) {
-  --fig-separator-color: var(--figma-color-border-menu);
-  --fig-separator-label-color: var(--figma-color-text-menu-secondary);
-}
-
 fig-menu > :is(fig-separator, fig-menu-separator) {
-  --fig-separator-padding: 0 var(--spacer-4,1rem) 0 var(--spacer-3,0.75rem);
+  --fig-separator-padding-inline: var(--spacer-3,0.75rem) var(--spacer-4,1rem);
+}
 
-  &[label]:not([label=""])::before {
-    margin-inline-start: calc(-1 * var(--spacer-3,0.75rem));
-    margin-inline-end: calc(-1 * var(--spacer-4,1rem));
-  }
+fig-select-options > :is(fig-separator, fig-menu-separator):has(> label):first-child,
+fig-select-options > [data-fig-select-nav="start"] + :is(fig-separator, fig-menu-separator):has(> label),
+fig-menu > [slot="trigger"] + :is(fig-separator, fig-menu-separator):has(> label) {
+  --fig-separator-padding-block: 0;
+  --fig-separator-stuck-padding-block: 0;
+  --fig-separator-color: transparent;
+  --fig-separator-margin-block: 0;
 }