@rogieking/figui3 6.23.4 → 6.24.0

package/README.md

@@ -119,6 +119,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 |
 | [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` |
@@ -1151,9 +1152,22 @@ Escape dismisses an open tooltip and returns focus to its trigger.
 
 ---
 
+#### Separator
+
+`<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.
+
+```html
+<fig-separator></fig-separator>
+<fig-separator label="More"></fig-separator>
+```
+
+---
+
 #### Menu
 
-`<fig-menu>` / `<fig-menu-item>` / `<fig-menu-separator>` — [demo](https://rog.ie/figui3/#menu)
+`<fig-menu>` / `<fig-menu-item>` / `<fig-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.
 
@@ -1175,14 +1189,14 @@ Triggered menu with native keyboard patterns. The trigger gets `aria-haspopup="m
   <fig-button fig-menu-trigger>Actions</fig-button>
   <fig-menu-item value="copy">Copy</fig-menu-item>
   <fig-menu-item value="paste">Paste</fig-menu-item>
-  <fig-menu-separator></fig-menu-separator>
+  <fig-separator></fig-separator>
   <fig-menu-item value="delete" disabled>Delete</fig-menu-item>
-  <fig-menu-separator label="More"></fig-menu-separator>
+  <fig-separator label="More"></fig-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.
+`fig-separator` accepts optional `label` — renders the rule, then secondary group text underneath.
 
 ---
 

package/components.css

@@ -1245,6 +1245,7 @@ fig-avatar,
   }
   &::after {
     content: attr(initials);
+    font-size: var(--body-medium-fontSize);
   }
   &[size="large"] {
     --size: 3rem;
@@ -4598,6 +4599,7 @@ fig-joystick {
 /* Shimmer */
 fig-shimmer {
   display: contents;
+  color: var(--figma-color-text-secondary);
   --fig-shimmer-angle: 90deg;
   --fig-shimmer-bright-fill-color: var(--figma-color-bg-tertiary);
   --fig-shimmer-bright-text-color: var(--figma-color-text);
@@ -5400,7 +5402,7 @@ fig-menu {
   display: contents;
 
   & > fig-menu-item,
-  & > fig-menu-separator {
+  & > fig-separator {
     display: none;
   }
 }
@@ -5571,11 +5573,10 @@ fig-select-options,
 
 }
 
-fig-select-options > fig-menu-separator {
+fig-select-options > fig-separator {
   /* Align labels with select option text after the checkmark column. */
   &[label]:not([label=""]) {
-    padding-left: var(--spacer-5);
-    padding-right: var(--spacer-2);
+    --fig-menu-inline-padding: 0 var(--spacer-2) 0 var(--spacer-5);
 
     &::before {
       margin-inline: unset;
@@ -5708,27 +5709,24 @@ fig-menu-item {
   }
 }
 
-fig-menu-separator {
-  --fig-menu-separator-color: var(--figma-color-border);
-  --fig-menu-separator-label-color: var(--figma-color-text-secondary);
+fig-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);
 
   display: block;
+  box-sizing: border-box;
+  width: 100%;
   height: 1px;
   margin: var(--spacer-2) 0;
   padding: 0;
   border: 0;
-  background: var(--fig-menu-separator-color);
-  color: var(--fig-menu-separator-label-color);
+  background: var(--fig-separator-color);
+  color: var(--fig-separator-label-color);
   font-weight: var(--body-medium-fontWeight);
   pointer-events: none;
   user-select: none;
 
-  &:first-of-type{
-    &[label]:not([label=""])::before {
-     display: none;
-    }
-  }
-
   /* Labeled: rule, then secondary group label (same pattern as menu optgroups). */
   &[label]:not([label=""]) {
     display: flex;
@@ -5737,29 +5735,46 @@ fig-menu-separator {
     height: auto;
     margin: var(--spacer-2) 0;
     margin-bottom: var(--spacer-1);
-    padding: 0 var(--fig-menu-item-padding, var(--spacer-4));
+    padding: var(--fig-menu-inline-padding);
     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);
+      margin-inline: calc(-1 * var(--spacer-3));
+      background: var(--fig-separator-color);
     }
 
     &::after {
       content: attr(label);
       display: block;
-      color: var(--fig-menu-separator-label-color);
+      color: var(--fig-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);
+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 {
+  display: none;
+}
+
+dialog[is="fig-popup"][theme="menu"] fig-separator,
+fig-select-options > fig-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 {
+  --fig-menu-inline-padding: 0
+    var(--fig-menu-item-padding, var(--spacer-4));
+
+  &[label]:not([label=""])::before {
+    margin-inline: calc(
+      -1 * var(--fig-menu-item-padding, var(--spacer-4))
+    );
+  }
 }