@rogieking/figui3 8.2.1 → 8.4.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

@@ -982,6 +982,8 @@ fig-button {
         [variant="destructiveGhost"]
       ):not(
         [variant="destructiveLink"]
+      ):not(
+        [variant="ghost"]
       ) {
       color: var(--figma-color-text-ondisabled);
       box-shadow: none;
@@ -1648,6 +1650,12 @@ fig-video {
     width: 100%;
   }
 
+  /* An explicit size wins over full/aspect-ratio stretching, which would
+     otherwise collapse to 0 inside a shrink-to-fit parent (e.g. fig-choice). */
+  &[size]:not([size=""]):not([size="auto"]) {
+    width: var(--fig-media-size);
+  }
+
   > fig-preview {
     --fig-preview-fit: var(--fig-media-fit);
     width: 100%;
@@ -1692,7 +1700,7 @@ fig-video {
     pointer-events: none;
   }
 
-  &:is(:not([src]), [src=""]):is(:not([poster]), [poster=""])
+  &:not(:has(> fig-preview > video.fig-media-element[data-generated][src]:not([src=""]))):is(:not([poster]), [poster=""])
     > fig-preview > video.fig-media-element[data-generated] {
     opacity: 0;
     pointer-events: none;
@@ -1732,7 +1740,11 @@ fig-video {
   &:has(> [slot="overlay"]:is(:focus, :focus-within, :active)) > [slot="overlay"],
   &:has(> fig-input-file[variant="overlay"]:is(:focus, :focus-within, :active)) > fig-input-file[variant="overlay"],
   > [slot="overlay"]:focus-within,
-  > fig-input-file[variant="overlay"]:focus-within {
+  > fig-input-file[variant="overlay"]:focus-within,
+  /* The overlay is a sibling of fig-preview, so hovering it drops the
+     preview's :hover. Keep it shown to avoid a show/hide flicker loop. */
+  > [slot="overlay"]:hover,
+  > fig-input-file[variant="overlay"]:hover {
     opacity: 1;
     pointer-events: all;
   }
@@ -2697,6 +2709,7 @@ fig-slider {
   --slider-stepper-padding: calc(
     (var(--slider-height) / 2) - var(--slider-tick-width) / 2
   );
+  --slider-track-color: var(--figma-color-bg-secondary);
   --slider-percent: calc(var(--slider-complete) * 100%);
   --start-percent: calc(var(--default, 0) * 100%);
   --slider-tick-width: calc(var(--slider-height) / 4);
@@ -2741,7 +2754,7 @@ fig-slider {
     flex: 1 1 0;
     min-width: 0;
     transition: var(--slider-transition);
-    background: var(--figma-color-bg-secondary);
+    background: var(--slider-track-color);
     border-radius: var(--slider-border-radius);
     box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
 
@@ -2764,6 +2777,13 @@ fig-slider {
       max-width: 100%;
     }
   }
+
+  /* Disabled: progress fill blends into the track so the bar stays legible */
+  &:has(input[type="range"]:disabled) .fig-slider-input-container::before {
+    background: var(--slider-track-color);
+    box-shadow: none;
+  }
+
   &[type="stepper"] {
     .fig-slider-input-container {
       &::before {
@@ -2877,12 +2897,7 @@ fig-slider {
     }
 
     &:disabled::-webkit-slider-runnable-track {
-      background: linear-gradient(
-        to right,
-        var(--figma-color-bg-secondary) 0%,
-        var(--figma-color-bg-secondary) var(--slider-percent),
-        var(--figma-color-bg) var(--slider-percent)
-      );
+      background-color: transparent;
     }
 
     &.hue::-webkit-slider-runnable-track {
@@ -2932,12 +2947,7 @@ fig-slider {
     }
 
     &:disabled::-moz-range-track {
-      background: linear-gradient(
-        to right,
-        var(--figma-color-bg-secondary) 0%,
-        var(--figma-color-bg-secondary) var(--slider-percent),
-        var(--figma-color-bg) var(--slider-percent)
-      );
+      background-color: transparent;
     }
 
     &.hue::-moz-range-track {
@@ -3003,6 +3013,7 @@ fig-slider {
       0 0 0 0.75px rgba(0, 0, 0, 0.075), inset 0 0 0 5px rgba(0, 0, 0, 0.1),
       var(--figma-elevation-100);
     --slider-checkerboard: var(--checkerboard-slider);
+    --slider-track-color: var(--figma-color-bg-tertiary);
 
     background-color: var(--figma-color-bg-secondary);
     border-radius: var(--radius-medium);
@@ -3018,7 +3029,7 @@ fig-slider {
       display: block;
       width: 100%;
       box-shadow: none;
-      background-color: var(--figma-color-bg-tertiary);
+      background-color: var(--slider-track-color);
     }
     fig-input-text,
     fig-input-number {
@@ -3511,7 +3522,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);
@@ -3563,6 +3574,7 @@ fig-footer {
     z-index: 10;
     margin-top: auto;
     background: var(--figma-color-bg);
+    border-radius: 0 0 var(--radius-large) var(--radius-large)
   }
 }
 
@@ -3578,13 +3590,17 @@ fig-content {
   &:has(>fig-group[name]:last-child){
     padding-bottom: 0;
   }
+  &>p{
+    padding-inline: var(--spacer-3);
+  }
 }
 
 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;
 }
 
@@ -4317,52 +4333,6 @@ fig-spinner {
   }
 }
 
-fig-interpolation-swatch {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
-  flex: 0 0 auto;
-  color: var(--figma-color-bordertranslucent);
-  overflow: visible;
-
-  &[size="large"] {
-    width: 2rem;
-    height: 2rem;
-
-    .fig-interpolation-swatch-svg,
-    .fig-interpolation-swatch-fill {
-      width: 1.25rem;
-      height: 1.25rem;
-    }
-  }
-
-  .fig-interpolation-swatch-svg {
-    display: block;
-    width: 1rem;
-    height: 1rem;
-    overflow: visible;
-  }
-
-  .fig-interpolation-swatch-fill {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 1rem;
-    height: 1rem;
-    background: linear-gradient(90deg, #ff0000, #4f9eff);
-    -webkit-mask-size: 100% 100%;
-    mask-size: 100% 100%;
-    -webkit-mask-repeat: no-repeat;
-    mask-repeat: no-repeat;
-    -webkit-mask-position: center;
-    mask-position: center;
-  }
-}
-
 /* Segmented control */
 .segmented-control,
 fig-segmented-control {
@@ -5539,7 +5509,7 @@ fig-menu {
   display: contents;
 
   & > fig-menu-item,
-  & > fig-separator {
+  & > :is(fig-separator, fig-menu-separator) {
     display: none;
   }
 }
@@ -5582,7 +5552,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 +5608,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));