@rogieking/figui3 6.9.2 → 6.9.4

package/README.md

@@ -25,7 +25,7 @@ FigUI3 components are built to preserve native semantics where possible and add
 - Selection components use standard keyboard patterns: tabs use roving focus and `aria-controls`, segmented controls expose a radio-group pattern with focus following arrow selection, choosers expose listbox/options, and menus support trigger state, item focus, Escape close, and disabled items.
 - Dialog, popup, tooltip, and toast surfaces expose names, close affordances, live-region behavior, Escape dismissal, and focus return behavior appropriate to their role.
 - Media components render their visual surface inside `fig-preview`; image/video semantics stay on the native media element, upload controls remain keyboard reachable, slotted image overlays stay in light DOM for framework ownership, and generated video controls render below the preview instead of as an overlay.
-- Display and pointer components expose useful semantics when interactive or informative: handles, chits, color tips, layers, spinners, shimmers, and skeletons sync names, busy states, disabled states, keyboard movement, inert states, or hidden states as appropriate.
+- Display and pointer components expose useful semantics when interactive or informative: handles, swatches, color tips, layers, spinners, shimmers, and skeletons sync names, busy states, disabled states, keyboard movement, inert states, or hidden states as appropriate.
 - Focus styling uses shared `--figma-focus-outline`, `--figma-focus-outline-offset`, and `--figma-focus-outline-radius` tokens so visible focus treatment stays consistent across components.
 - Component contracts include Playwright keyboard/focus coverage plus an axe smoke suite for representative form, media, overlay, selection, and loading fixtures.
 
@@ -92,7 +92,7 @@ Minimal example:
 | [Text Input](#text-input) | `<fig-input-text>` | Styled text/textarea input |
 | [Number Input](#number-input) | `<fig-input-number>` | Numeric input with units |
 | [Input Angle](#input-angle) | `<fig-input-angle>` | Angle/rotation dial and text input |
-| [Chit](#chit) | `<fig-chit>` | Color/gradient/image swatch |
+| [Swatch](#swatch) | `<fig-swatch>` | Color/gradient/image swatch |
 | [Color Tip](#color-tip) | `<fig-color-tip>` | Compact color tip with picker |
 | [Color Input](#color-input) | `<fig-input-color>` | Color picker with hex/alpha |
 | [Input Palette](#input-palette) | `<fig-input-palette>` | Editable multi-color palette |
@@ -305,6 +305,10 @@ Wraps a `<fig-field>` and `<fig-slider>` into a single labeled control. All slid
 
 **Events:** `input`, `change` — forwarded from the inner slider.
 
+Double-click or right-click and choose "Reset to default" to reset to the `default` value, falling back to the slider minimum.
+
+**Methods:** `resetToDefault()` triggers the same reset behavior.
+
 ```html
 <fig-field-slider label="Opacity" min="0" max="100" value="75" units="%"></fig-field-slider>
 ```
@@ -388,9 +392,9 @@ Angle/rotation input with circular dial, optional text input, multi-unit support
 
 ### Color & Fill
 
-#### Chit
+#### Swatch
 
-`<fig-chit>` — [demo](https://rog.ie/figui3/#chit)
+`<fig-swatch>` — [demo](https://rog.ie/figui3/#swatch)
 
 A color/gradient/image swatch element with checkerboard background for alpha.
 
@@ -403,8 +407,8 @@ A color/gradient/image swatch element with checkerboard background for alpha.
 | `alpha` | number | — | Opacity (0-1) |
 
 ```html
-<fig-chit background="#FF5733"></fig-chit>
-<fig-chit background="linear-gradient(90deg, #FF0000, #0000FF)" size="large"></fig-chit>
+<fig-swatch background="#FF5733"></fig-swatch>
+<fig-swatch background="linear-gradient(90deg, #FF0000, #0000FF)" size="large"></fig-swatch>
 ```
 
 ---
@@ -584,7 +588,7 @@ Optional full fill picker dialog supporting solid, gradient, image, video, and w
 
 ```html
 <fig-fill-picker value='{"type":"solid","color":"#FF5733"}'>
-  <fig-chit></fig-chit>
+  <fig-swatch></fig-swatch>
 </fig-fill-picker>
 ```
 
@@ -1034,9 +1038,12 @@ Triggered menu with native keyboard patterns. The trigger gets `aria-haspopup="m
 | `position` | string | `"bottom left"` | Popup placement |
 | `offset` | string | — | Popup offset |
 | `closedby` | string | — | Popup close behavior |
+| `trigger` | string | — | Use `"contextmenu"` to open on right-click |
 
 **Keyboard:** Arrow keys move between enabled items, Home/End jump to edges, Enter/Space selects, Escape closes and returns focus to the trigger.
 
+**Methods:** `showAt(x, y)` opens the menu at viewport coordinates, useful for custom context menu behavior.
+
 ```html
 <fig-menu position="bottom left">
   <fig-button fig-menu-trigger>Actions</fig-button>

package/components.css

@@ -293,7 +293,7 @@
       rgba(255, 255, 255, 0.2) 0% 50%
     )
     0 0 / 0.5rem 0.5rem;
-  --checkerboard-chit: repeating-conic-gradient(
+  --checkerboard-swatch: repeating-conic-gradient(
       rgba(0, 0, 0, 0.2) 0% 25%,
       rgba(255, 255, 255, 0.2) 0% 50%
     )
@@ -1466,15 +1466,15 @@ input[type="color"] {
   }
 }
 
-fig-chit {
+fig-swatch {
   --size: 1.5rem;
   --padding: 5px;
   --width: var(--size);
   --height: var(--size);
   --border-radius: var(--radius-medium);
-  --chit-background: linear-gradient(#d9d9d9, #d9d9d9);
-  --chit-bg-size: cover;
-  --chit-bg-position: center;
+  --swatch-background: linear-gradient(#d9d9d9, #d9d9d9);
+  --swatch-bg-size: cover;
+  --swatch-bg-position: center;
   --selected: 0;
   --alpha: 1;
 
@@ -1494,7 +1494,7 @@ fig-chit {
     grid-area: 1/1;
   }
   & > div {
-    background: var(--checkerboard-chit);
+    background: var(--checkerboard-swatch);
     border-radius: var(--border-radius);
   }
 
@@ -1546,9 +1546,9 @@ fig-chit {
   }
   &::before {
     content: "";
-    background: var(--chit-background);
-    background-size: var(--chit-bg-size);
-    background-position: var(--chit-bg-position);
+    background: var(--swatch-background);
+    background-size: var(--swatch-bg-size);
+    background-position: var(--swatch-bg-position);
     background-repeat: no-repeat;
     border-radius: calc(var(--border-radius) - (var(--padding) / 2));
     mask-image: linear-gradient(
@@ -2020,7 +2020,7 @@ fig-3d-rotate {
         width: var(--figma-3d-rotate-handle-size);
         height: var(--figma-3d-rotate-handle-size);
         border-radius: 50%;
-        background: var(--figma-color-border-strong);
+        background: var(--figma-color-icon-brand);
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
@@ -2340,7 +2340,7 @@ fig-combo-input fig-button[type="select"] {
     color: var(--figma-color-text);
   }
 
-  & > *:not(fig-chit){
+  & > *:not(fig-swatch){
     &:first-child:not(:last-child),
     &:first-child:not(:last-child) > * {
       border-top-right-radius: 0;
@@ -3094,11 +3094,6 @@ dialog,
     display: flex;
     flex-direction: column;
   }
-  >fig-header{
-    fig-button[icon][variant="ghost"]:not(fig-input-text fig-button) {
-      margin: 0;
-    }
-  }
 }
 dialog[is="fig-dialog"] {
   --z-index: 999999;
@@ -3376,6 +3371,7 @@ fig-header {
   --fig-header-height: var(--spacer-6);
   height: var(--fig-header-height);
   flex-shrink: 0;
+  width: 100%;
   margin: 0;
   padding: var(--spacer-1) var(--spacer-3);
   display: flex;
@@ -3405,6 +3401,7 @@ fig-header {
 
 fig-group {
   display: block;
+  width: 100%;
   margin-bottom: var(--spacer-2-5);
 
   p{
@@ -3475,10 +3472,12 @@ fig-group {
 fig-footer {
   display: flex;
   flex-shrink: 0;
+  width: 100%;
+  flex-wrap: wrap;
   align-items: flex-start;
   justify-content: flex-end;
   gap: var(--spacer-2);
-  padding: var(--spacer-2-5) var(--spacer-3);
+  padding: var(--spacer-2-5);
   box-shadow: inset 0 1px 0 0 var(--figma-color-border);
 
   & h3 {
@@ -3508,7 +3507,7 @@ fig-footer {
     text-align: center;
   }
 
-  &:has(> :is(fig-button, fig-tooltip) ~ :is(fig-button, fig-tooltip)) {
+  /*&:has(> :is(fig-button, fig-tooltip) ~ :is(fig-button, fig-tooltip)) {
     flex-direction: column;
     align-items: stretch;
 
@@ -3526,7 +3525,7 @@ fig-footer {
     & > .fig-footer-action fig-button {
       width: 100%;
     }
-  }
+  }*/
 
   &[borderless] {
     box-shadow: none;
@@ -3545,6 +3544,7 @@ main,
 fig-content {
   padding: var(--spacer-2-5) 0;
   display: block;
+  width: 100%;
   gap: 0;
   &:has(>fig-group[name]:first-child){
     padding-top: 0;
@@ -3747,14 +3747,14 @@ fig-input-fill {
     outline-offset: -1px !important;
   }
 
-  & > .input-combo > fig-chit:not(:only-child),
-  & > .input-combo > fig-chit:not(:only-child) input,
+  & > .input-combo > fig-swatch:not(:only-child),
+  & > .input-combo > fig-swatch:not(:only-child) input,
   & > .input-combo > fig-fill-picker:not(:only-child),
-  & > .input-combo > fig-fill-picker:not(:only-child) > fig-chit > input,
+  & > .input-combo > fig-fill-picker:not(:only-child) > fig-swatch > input,
   & > .input-combo > label,
   & fig-fill-picker:not(:only-child),
   fig-input-text,
-  fig-chit {
+  fig-swatch {
     &,
     &:focus,
     &:hover {
@@ -3765,8 +3765,8 @@ fig-input-fill {
       --selected: 0;
     }
   }
-  fig-chit ~ fig-input-text > input,
-  fig-chit ~ label,
+  fig-swatch ~ fig-input-text > input,
+  fig-swatch ~ label,
   fig-fill-picker ~ fig-input-text > input {
     padding-left: 0 !important;
   }
@@ -3813,6 +3813,11 @@ fig-input-fill {
   }
 }
 
+fig-input-color,
+fig-input-fill {
+  width: 8.9375rem;
+}
+
 fig-input-fill {
   & > .input-combo > fig-fill-picker {
     display: contents;
@@ -3853,7 +3858,7 @@ fig-input-gradient {
   --fig-input-gradient-height: 1.5rem;
   --fig-input-gradient-padding: var(--spacer-1);
   --fig-input-gradient-handle-size: 14px;
-  --fig-input-gradient-chit-border-radius: var(--radius-large);
+  --fig-input-gradient-swatch-border-radius: var(--radius-large);
   position: relative;
   height: var(--fig-input-gradient-height);
   width: 100%;
@@ -3890,13 +3895,13 @@ fig-input-gradient {
     .fig-input-gradient-track {
       inset: 0 calc(var(--fig-input-gradient-padding) + 2px);
     }
-    --fig-input-gradient-chit-border-radius: var(--radius-medium);
+    --fig-input-gradient-swatch-border-radius: var(--radius-medium);
   }
 
   &[edit="false"],
   &[edit="picker"] {
     pointer-events: none;
-    --fig-input-gradient-chit-border-radius: var(--radius-medium);
+    --fig-input-gradient-swatch-border-radius: var(--radius-medium);
 
   }
 
@@ -3905,15 +3910,15 @@ fig-input-gradient {
       display: contents;
     }
   }
-  & > fig-chit,
-  & > fig-fill-picker > fig-chit {
+  & > fig-swatch,
+  & > fig-fill-picker > fig-swatch {
     --width: 100%;
     width: var(--width);
-    --border-radius: var(--fig-input-gradient-chit-border-radius);
+    --border-radius: var(--fig-input-gradient-swatch-border-radius);
   }
   &[size="large"] {
     --fig-input-gradient-height: 2rem;
-    --fig-input-gradient-chit-border-radius: var(--radius-medium);
+    --fig-input-gradient-swatch-border-radius: var(--radius-medium);
     height: var(--fig-input-gradient-height) !important;
     
     .fig-input-gradient-track {
@@ -3994,7 +3999,7 @@ fig-input-palette {
         &:focus-within {
           outline: 0 !important;
         }
-        fig-chit {
+        fig-swatch {
           --border-radius: 0px;
           --width: 100%;
           --padding: 0px;
@@ -4015,7 +4020,7 @@ fig-input-palette {
           }
         }
         &:first-child{
-          & fig-chit::after{
+          & fig-swatch::after{
             box-shadow: none;
           }
         }
@@ -4068,7 +4073,7 @@ fig-input-palette {
       grid-column: button;
     }
 
-    fig-chit {
+    fig-swatch {
       --border-radius: var(--radius-medium);
       width: auto !important;
       height: var(--size);
@@ -4751,6 +4756,20 @@ fig-icon {
   -webkit-mask-size: contain;
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-position: center;
+
+  &:has(> svg) {
+    background: transparent;
+    mask-image: none;
+    -webkit-mask-image: none;
+  }
+
+  & > svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+    color: inherit;
+    flex-shrink: 0;
+  }
 }
 
 @keyframes fig-spinner-spin {
@@ -5162,6 +5181,7 @@ fig-handle {
 }
 
 fig-color-tip {
+  --size: 1.5rem;
   --tip-selection-width: 1px;
   --tip-selection-scale: 1;
   --beak-offset: 50%;
@@ -5174,10 +5194,10 @@ fig-color-tip {
   position: relative;
   color: var(--figma-color-text);
   color-scheme: light only;
+  width: var(--size);
+  height: var(--size);
   aspect-ratio: 1 / 1;
   flex-shrink: 0;
-  min-width: max-content;
-  min-height: max-content;
   background-color: var(--figma-color-bg);
   border-radius: var(--radius-medium, 0.3125rem);
   box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.1);
@@ -5190,7 +5210,7 @@ fig-color-tip {
     cursor: pointer;
   }
 
-  fig-chit {
+  fig-swatch {
     input[type="color"] {
       background: transparent;
     }