@rogieking/figui3 8.2.1 → 8.3.0

package/README.md

@@ -132,7 +132,7 @@ Minimal example:
 | [Popup](#popup) | `<fig-popup>` | Anchored floating surface |
 | [Toast](#toast) | `<fig-toast>` | Toast notification |
 | [Tooltip](#tooltip) | `<fig-tooltip>` | Hover/click tooltip |
-| [Separator](#separator) | `<fig-separator>` | Visual divider with an optional label |
+| [Separator](#separator) | `<fig-separator>` / `<fig-menu-separator>` | Visual divider with an optional label |
 | [Menu](#menu) | `<fig-menu>` | Triggered menu with keyboard navigation |
 | [Header](#header) | `<fig-header>` | Section header |
 | [Layer](#layer) | `<fig-layer>` | Collapsible layer list item from `fig-layer.js` |
@@ -1381,19 +1381,20 @@ 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.
+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.
 
 ```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>
 ```
 
 ---
 
 #### Menu
 
-`<fig-menu>` / `<fig-menu-item>` / `<fig-separator>` — [demo](https://rog.ie/figui3/#menu)
+`<fig-menu>` / `<fig-menu-item>` / `<fig-separator>` / `<fig-menu-separator>` — [demo](https://rog.ie/figui3/#menu)
 
 Triggered menu with native keyboard patterns. The trigger gets `aria-haspopup="menu"`, `aria-expanded`, and `aria-controls`; menu items use `role="menuitem"` and disabled items are skipped by keyboard navigation.
 
@@ -1422,7 +1423,7 @@ Triggered menu with native keyboard patterns. The trigger gets `aria-haspopup="m
 </fig-menu>
 ```
 
-`fig-separator` accepts optional `label` — renders the rule, then secondary group text underneath.
+`fig-separator` and `fig-menu-separator` accept optional `label` — renders the rule, then secondary group text underneath.
 
 ---
 

package/components.css

@@ -3511,7 +3511,7 @@ fig-footer {
   justify-content: flex-end;
   gap: var(--spacer-2);
   padding: var(--spacer-2-5);
-  box-shadow: inset 0 1px 0 0 var(--figma-color-border);
+  box-shadow: 0 -1px 0 0 var(--figma-color-border);
 
   & h3 {
     font-weight: var(--body-medium-strong-fontWeight);
@@ -3584,7 +3584,8 @@ fig-content[padding]:not([padding="false"]):not(:empty) {
   padding-inline: var(--spacer-3);
 }
 
-fig-content:empty {
+fig-content:empty,
+fig-content:not(:has(*)) {
   padding: 0;
 }
 
@@ -5539,7 +5540,7 @@ fig-menu {
   display: contents;
 
   & > fig-menu-item,
-  & > fig-separator {
+  & > :is(fig-separator, fig-menu-separator) {
     display: none;
   }
 }
@@ -5582,7 +5583,7 @@ fig-menu-item {
   }
 }
 
-fig-separator {
+:is(fig-separator, fig-menu-separator) {
   --fig-separator-color: var(--figma-color-border);
   --fig-separator-label-color: var(--figma-color-text-secondary);
   --fig-menu-inline-padding: 0 var(--spacer-3);
@@ -5638,18 +5639,18 @@ fig-separator {
 }
 
 dialog[is="fig-popup"][theme="menu"]
-  fig-separator:first-child[label]:not([label=""])::before,
-fig-select-options > fig-separator:first-child[label]:not([label=""])::before {
+  :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"] fig-separator,
-fig-select-options > fig-separator {
+dialog[is="fig-popup"][theme="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);
 }
 
-dialog[is="fig-popup"][theme="menu"] fig-separator {
+dialog[is="fig-popup"][theme="menu"] :is(fig-separator, fig-menu-separator) {
   --fig-menu-inline-padding: 0
     var(--fig-menu-item-padding, var(--spacer-4));