@rogieking/figui3 11.4.1 → 11.5.0

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

@@ -2,18 +2,18 @@
 name: fig-editor
 description: >-
   Guides FigUI3 editor bundle (`fig-editor.js` / `fig-editor.css`): fig-select,
-  fig-select-options, fig-select-option, fig-fill-picker, fig-palette-editor,
-  fig-reorder, and fig-interpolation-swatch,
+  fig-select-options, fig-select-option, fig-property, fig-input-point,
+  fig-fill-picker, fig-palette-editor, fig-reorder, and fig-interpolation-swatch,
   including React JSX usage. Use when building custom selects, grouped option lists,
-  sticky separators, ghost selects, fill picker dialogs, reorderable lists, or
-  interpolation swatches.
+  sticky separators, ghost selects, composable property rows, fill picker dialogs,
+  reorderable lists, or interpolation swatches.
   Requires fig.js.
 user-invocable: false
 ---
 
 # FigUI3 editor (`fig-editor.js`)
 
-Custom select and full fill-picker. Not in core `fig.js`.
+Custom selects, property rows, point inputs, and full fill editing. Not in core `fig.js`.
 
 React: [../figui3/react.md](../figui3/react.md). Per-tag JSX: [components.md](components.md). Attrs: [reference.md](reference.md).
 
@@ -37,6 +37,8 @@ Registered tags:
 | `fig-select-options` | Scrollable panel (`slot="panel"`), overflow chevrons |
 | `fig-select-option` | Option (`value`, `label`, `selected`, `disabled`, `subtle`) |
 | `fig-fill-picker` | Full fill editor dialog (solid, gradient, image, video, webcam, custom modes) |
+| `fig-property` | Composable property row with leading, input, and trailing slots |
+| `fig-input-point` | Paired X/Y numeric point input |
 | `fig-palette-editor` | Ordered palette editor |
 | `fig-reorder` | Pointer- and keyboard-reorderable direct-child list |
 | `fig-interpolation-swatch` | Gradient interpolation preview swatch |
@@ -55,7 +57,7 @@ Do not use `picker` or `picker-anchor` on `fig-input-color`. Forward picker chro
 
 ## Maintainer notes
 
-- Implementation: `fig-editor.js`, styles: `fig-editor.css`
+- Implementation: `fig-editor.js` / `fig-editor.css`; property row: `fig-property.js` / `fig-property.css` (imported by the editor bundle)
 - Do not move fill-picker or select into `fig.js`
 - Nested overlay positioning: keep `popover="manual"` on the select popup
 - Tests: `tests/figui/component-contracts.spec.ts` (ghost variant, sticky separator vs overflow-start)

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

@@ -66,6 +66,61 @@ Data-driven (no authored options):
 - Attrs: `value` (falls back to trimmed `textContent`), `label` (closed-trigger text when content is rich), `selected`, `disabled`, `subtle` (secondary hover/focus fill)
 - `role="option"`, `aria-selected`, `aria-disabled`
 
+## `fig-input-point`
+
+```tsx
+<fig-input-point
+  x={String(point.x)}
+  y={String(point.y)}
+  units="%"
+  full
+  onInput={onInput}
+  onChange={onChange}
+/>
+```
+
+- Attrs: `x`, `y`, `units` (forwarded to both number inputs), `full`
+- Renders two equally sized `fig-input-number` controls in a `fig-input-combo`.
+- Events: `input` while editing and `change` on commit, with `{ x, y }`.
+
+## `fig-property`
+
+Default playground example (`/figui3#property/default`):
+
+```html
+<fig-property label="Size">
+  <fig-input-number
+    slot="input"
+    value="16"
+    units="px"
+    steppers="true"
+    full
+  ></fig-input-number>
+</fig-property>
+```
+
+Generated accessories:
+
+```html
+<fig-property
+  label="Color"
+  leading="drag"
+  trailing="remove"
+  show-leading="hover"
+  show-trailing
+>
+  <fig-input-color slot="input" value="#0D99FF" text="true" full></fig-input-color>
+</fig-property>
+```
+
+- Attrs: `label`, `leading` (`drag` | `chevron`), `trailing` (`remove` | `add` | `bind`), `show-leading`, `show-trailing`
+- Slots: `input` (one direct primary control), `label`, `leading`, `trailing`
+- Authored label markup overrides the `label` attribute.
+- Authored accessory slots override generated shortcuts.
+- Omitted or `"hover"` show attributes use hover visibility; `"false"` never shows the slot; an empty/present attribute always shows it.
+- Generated trailing controls emit bubbling, composed `remove`, `add`, or `bind` events with the slotted control in `detail.input`.
+- Child input events bubble unchanged.
+
 ## `fig-palette-editor`
 
 Reusable ordered palette editor used by `fig-input-palette edit="picker"`.

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

@@ -35,6 +35,31 @@ Position: omit to overlay the selected option on the trigger. Set to place the m
 
 Events: `input`, `change`, `optionhover`, `optionfocus`.
 
+## Input point
+
+`fig-input-point` observes `x`, `y`, and `units`.
+
+- Missing or invalid coordinates resolve to `0`.
+- The generated X/Y `fig-input-number` controls stay synchronized with the host attributes.
+- `units` is forwarded to both generated number inputs and removed from both when omitted.
+- `input` and `change` events provide numeric `{ x, y }` in `detail`.
+- `full` makes the host fill its parent.
+
+## Property
+
+`fig-property` observes `label`, `leading`, `trailing`, `show-leading`, and `show-trailing`.
+
+- Direct slots: `input`, `label`, `leading`, `trailing`
+- Authored `slot="label"` markup takes precedence over the `label` attribute.
+- `leading`: `drag` or `chevron`
+- `trailing`: `remove`, `add`, or `bind`
+- `show-leading` / `show-trailing`: omitted or `hover` reveals on hover, `false` hides, and an empty attribute always shows
+- Authored accessory slots override generated shortcuts.
+- `input` returns the direct `slot="input"` element.
+- Generated labels associate to the input with `aria-labelledby` unless it already has an accessible name.
+- Generated trailing events bubble across shadow roots with `detail: { input }`.
+- Child control events are not normalized or re-emitted.
+
 ## Reorder
 
 `fig-reorder` observes `axis`, `handle`, `items`, `indicator`, and `disabled`.

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

@@ -358,6 +358,7 @@ Handlers below assume `onInput` / `onChange` / `onClick` from [react.md](react.m
 ```
 
 - Attrs: `direction` (`horizontal` | `vertical`), `label`, `columns`
+- Slots: `leading` for an accessory before the label; `trailing` for an end action.
 - Put control attrs on the control, not the field.
 
 ### `fig-stack`

package/.cursor/skills/figui3/react.md

@@ -80,8 +80,10 @@ type FigTag =
   | "fig-input-fill"
   | "fig-input-gradient"
   | "fig-input-number"
+  | "fig-input-point"
   | "fig-input-palette"
   | "fig-palette-editor"
+  | "fig-property"
   | "fig-input-text"
   | "fig-input-wheel"
   | "fig-interpolation-swatch"

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

@@ -64,6 +64,8 @@ Public API: `README.md`. React recipes: [components.md](components.md).
 
 - `direction="horizontal|vertical"`
 - `label` or a child `<label>`
+- `slot="leading"` places an accessory before the label
+- `slot="trailing"` places an end action in the input area
 
 ## `fig-toolbelt`
 

package/CHANGELOG.md

@@ -2,6 +2,33 @@
 
 All notable changes to this project will be documented in this file.
 
+## [11.5.0]
+
+### Added
+
+- Added the composable `fig-property` editor row with generated leading/trailing accessories, visibility controls, accessible labels, and action events.
+- Added `fig-input-point` for paired X/Y numeric values.
+- Added standalone `fig-property.js` and `fig-property.css` package exports and editor skill guidance.
+
+### Changed
+
+- Rebuilt palette editor rows and fill-picker gradient stop rows with `fig-property`.
+- Expanded playground editor controls, property examples, event output, and direct hash loading.
+- Updated easing preset artwork to use `fig-icon` prepend content and added the drag-handle icon token.
+- Refined `fig-field` leading/trailing slot handling and property-row hover layout.
+
+### Fixed
+
+- Kept hover-only trailing property actions from reserving space or shifting the input.
+- Made generated property actions bubble across shadow roots with their slotted input in event detail.
+
+## [11.4.2]
+
+### Changed
+
+- Simplified character prepend icons in number inputs to use direct text content.
+- Refined prepend icon color inheritance and number-input secondary coloring.
+
 ## [11.4.1]
 
 ### Changed

package/README.md

@@ -108,12 +108,14 @@ Minimal example:
 | [Input Wheel](#input-wheel) | `<fig-input-wheel>` | Standalone SVG tick-and-handle numeric scrubber |
 | [Text Input](#text-input) | `<fig-input-text>` | Styled text/textarea input |
 | [Number Input](#number-input) | `<fig-input-number>` | Numeric input with units |
+| [Input Point](#input-point) | `<fig-input-point>` | Paired X/Y numeric input |
 | [File Input](#file-input) | `<fig-input-file>` | File upload with image previews and audio playback waveforms |
 | [Angle](#angle) | `<fig-angle>` | Instrument-style angle/rotation dial |
 | [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 |
+| [Property](#property) | `<fig-property>` | Composable editor property row |
 | [Palette Editor](#palette-editor) | `<fig-palette-editor>` | Reusable reorderable palette editor |
 | [Reorder](#reorder) | `<fig-reorder>` | Pointer- and keyboard-reorderable list |
 | [Gradient Input](#gradient-input) | `<fig-input-gradient>` | Gradient editor with stops |
@@ -510,6 +512,27 @@ The `value`, `min`, `max`, and `step` properties mirror their attributes. `aria-
 
 ---
 
+#### Input Point
+
+`<fig-input-point>` — [demo](https://rog.ie/figui3/#input-point)
+
+An editor-bundle point control that renders two equally sized `<fig-input-number>` controls inside `<fig-input-combo>`. User edits reflect to the `x` and `y` attributes, and `units` is forwarded to both fields. Its `input` and `change` events provide numeric `{ x, y }` in `detail`.
+
+| Attribute | Type | Default | Description |
+|---|---|---|---|
+| `x` | number | `0` | Horizontal coordinate |
+| `y` | number | `0` | Vertical coordinate |
+| `units` | string | — | Unit string forwarded to both number inputs |
+| `full` | boolean | `false` | Fill the parent width |
+
+```html
+<fig-input-point x="24" y="16" units="%"></fig-input-point>
+```
+
+Requires `fig-editor.js` and `fig-editor.css`.
+
+---
+
 #### File Input
 
 `<fig-input-file>` — [demo](https://rog.ie/figui3/#file-input)
@@ -684,6 +707,20 @@ An editable palette of solid colors, each rendered as a `<fig-input-color>` swat
 
 The editable palette is a single tab stop. Enter or Space expands inline mode or opens picker mode. `edit="false"` renders only the compact preview. Picker mode requires `fig-editor.js`.
 
+#### Property
+
+`<fig-property>`
+
+An editor-bundle property row. Supply one control in `slot="input"` and optionally author `slot="label"`, `slot="leading"`, or `slot="trailing"` content. Authored label markup takes precedence over the `label` attribute. The `leading="drag|chevron"` and `trailing="remove|add|bind"` attributes generate common accessories; authored slot content takes precedence. Leading and trailing content appears on hover or focus by default. Set `show-leading="false"` or `show-trailing="false"` to hide it, or add an empty `show-leading` or `show-trailing` attribute to always show it. Generated trailing actions emit bubbling, composed events named `remove`, `add`, or `bind` with the slotted control in `detail.input`. Input events bubble directly from the supplied control.
+
+```html
+<fig-property label="Size" leading="drag" trailing="remove">
+  <fig-input-number slot="input" value="16" units="px" full></fig-input-number>
+</fig-property>
+```
+
+Import `fig-property.js` and `fig-property.css` directly, or use the `fig-editor` bundle, which includes both.
+
 #### Palette Editor
 
 `<fig-palette-editor>`
@@ -1290,6 +1327,8 @@ Adjacent `fig-field` children in a horizontal stack share compact gutters.
 
 A form field wrapper with flexible layout. Automatically links `<label>` to the first `fig-*` child for accessibility.
 
+Use `slot="leading"` for an accessory before the label, such as a disclosure or drag handle. Use `slot="trailing"` for an action at the end of the input area, such as reset or remove.
+
 | Attribute | Type | Default | Description |
 |---|---|---|---|
 | `direction` | string | `"column"` | `"column"`, `"row"`, `"horizontal"` |
@@ -1298,8 +1337,12 @@ A form field wrapper with flexible layout. Automatically links `<label>` to the
 
 ```html
 <fig-field direction="horizontal" columns="thirds">
+  <fig-icon slot="leading" name="drag-handle" size="small"></fig-icon>
   <label>Opacity</label>
   <fig-slider value="50" units="%"></fig-slider>
+  <fig-button slot="trailing" variant="ghost" icon aria-label="Reset">
+    <fig-icon name="reset"></fig-icon>
+  </fig-button>
 </fig-field>
 ```
 

package/components.css

@@ -433,6 +433,7 @@
   --icon-24-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.5 6C6.67157 6 6 6.67157 6 7.5V16.5C6 17.3284 6.67157 18 7.5 18H16.5C17.3284 18 18 17.3284 18 16.5V7.5C18 6.67157 17.3284 6 16.5 6H7.5ZM7 7.5C7 7.22386 7.22386 7 7.5 7H16.5C16.7761 7 17 7.22386 17 7.5V14.793L14.3536 12.1464C14.1583 11.9512 13.8417 11.9512 13.6464 12.1464L12 13.7929L9.85355 11.6464C9.65829 11.4512 9.34171 11.4512 9.14645 11.6464L7 13.7929V7.5ZM7 15.2071V16.5C7 16.7761 7.22386 17 7.5 17H16.5C16.7761 17 17 16.7761 17 16.5V16.2071L14 13.2071L12.3536 14.8536C12.1583 15.0488 11.8417 15.0488 11.6464 14.8536L9.5 12.7071L7 15.2071ZM13.5 8C14.3284 8 15 8.67157 15 9.5C15 10.3284 14.3284 11 13.5 11C12.6716 11 12 10.3284 12 9.5C12 8.67157 12.6716 8 13.5 8ZM13.5 9C13.2239 9 13 9.22386 13 9.5C13 9.77614 13.2239 10 13.5 10C13.7761 10 14 9.77614 14 9.5C14 9.22386 13.7761 9 13.5 9Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
   --icon-24-video: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 6C17.1046 6 18 6.89543 18 8V16C18 17.1046 17.1046 18 16 18H8C6.89543 18 6 17.1046 6 16V8C6 6.89543 6.89543 6 8 6H16ZM8 7C7.44772 7 7 7.44772 7 8V16C7 16.5523 7.44772 17 8 17H16C16.5523 17 17 16.5523 17 16V8C17 7.44772 16.5523 7 16 7H8ZM9.99805 9.13477C10.3063 8.95591 10.6866 8.955 10.9961 9.13184L14.4961 11.1318C14.8077 11.3099 15 11.6411 15 12C15 12.3589 14.8077 12.6901 14.4961 12.8682L10.9961 14.8682C10.6866 15.045 10.3063 15.0441 9.99805 14.8652C9.68973 14.6863 9.5 14.3565 9.5 14V10C9.5 9.64353 9.68973 9.31369 9.99805 9.13477ZM10.5 14L14 12L10.5 10V14Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
   --icon-16-video: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.5 3C12.3284 3 13 3.67157 13 4.5V11.5C13 12.3284 12.3284 13 11.5 13H4.5L4.34668 12.9922C3.59028 12.9154 3 12.2767 3 11.5V4.5C3 3.67157 3.67157 3 4.5 3H11.5ZM4.5 4C4.22386 4 4 4.22386 4 4.5V11.5C4 11.7761 4.22386 12 4.5 12H11.5C11.7761 12 12 11.7761 12 11.5V4.5C12 4.22386 11.7761 4 11.5 4H4.5ZM6.50684 5.62988C6.82034 5.45238 7.20572 5.45722 7.51465 5.64258L10.0146 7.14258C10.3158 7.32332 10.5 7.64879 10.5 8C10.5 8.35121 10.3158 8.67668 10.0146 8.85742L7.51465 10.3574C7.20572 10.5428 6.82034 10.5476 6.50684 10.3701C6.19356 10.1926 6 9.86012 6 9.5V6.5C6 6.13988 6.19356 5.80744 6.50684 5.62988ZM7 9.5L9.5 8L7 6.5V9.5Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
+  --icon-16-drag-handle: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 11.5C11 11.7761 10.7761 12 10.5 12H5.5C5.22386 12 5 11.7761 5 11.5C5 11.2239 5.22386 11 5.5 11H10.5C10.7761 11 11 11.2239 11 11.5ZM11 8C11 8.27614 10.7761 8.5 10.5 8.5H5.5C5.22386 8.5 5 8.27614 5 8C5 7.72386 5.22386 7.5 5.5 7.5H10.5C10.7761 7.5 11 7.72386 11 8ZM11 4.5C11 4.77614 10.7761 5 10.5 5H5.5C5.22386 5 5 4.77614 5 4.5C5 4.22386 5.22386 4 5.5 4H10.5C10.7761 4 11 4.22386 11 4.5Z' fill='black' fill-opacity='0.5'/%3E%3C/svg%3E");
   --tip-pointer: path("M8 6L2 0H14L8 6Z");
 
 
@@ -4341,6 +4342,7 @@ fig-input-number {
   & [slot="prepend"] {
     order: 0;
     padding-right: 0;
+    color: var(--figma-color-text-secondary);
     margin-right: calc(var(--spacer-2) * -1);
   }
 
@@ -4889,32 +4891,32 @@ fig-field {
   grid-template-columns:
     var(--fig-field-left-padding) minmax(0, var(--fig-field-label-ratio))
     minmax(0, var(--fig-field-input-ratio)) var(--fig-field-right-padding);
-  grid-template-areas: "chevron label input pad";
+  grid-template-areas: "leading label input pad";
   margin: 0;
   padding: var(--fig-field-top-padding) 0 var(--fig-field-bottom-padding) 0;
   gap: 0;
   align-items: start;
 
   &:not([direction="vertical"]):has(> label):has(
-      > :not(label):not(.fig-field-chevron):not(
+      > :not(label):not([slot="leading"]):not([slot="trailing"]):not(
           fig-button[icon]:not([icon="false"])
         )
         + fig-button[icon]:not([icon="false"])
     ) {
-    & > :not(label):not(.fig-field-chevron):not(
+    & > :not(label):not([slot="leading"]):not([slot="trailing"]):not(
         fig-button[icon]:not([icon="false"])
       ):has(+ fig-button[icon]:not([icon="false"])) {
       justify-self: start;
       width: calc(100% - var(--spacer-4) - var(--spacer-1));
     }
 
-    & > :not(label):not(.fig-field-chevron):not(
+    & > :not(label):not([slot="leading"]):not([slot="trailing"]):not(
         fig-button[icon]:not([icon="false"])
       ):has(+ fig-button[icon]:not([icon="false"])[variant="ghost"]) {
       width: calc(100% - var(--spacer-4));
     }
 
-    & > :not(label):not(.fig-field-chevron):not(
+    & > :not(label):not([slot="leading"]):not([slot="trailing"]):not(
         fig-button[icon]:not([icon="false"])
       )
       + fig-button[icon]:not([icon="false"]) {
@@ -4923,7 +4925,7 @@ fig-field {
       z-index: 1;
     }
 
-    & > :not(label):not(.fig-field-chevron):not(
+    & > :not(label):not([slot="leading"]):not([slot="trailing"]):not(
         fig-button[icon]:not([icon="false"])
       )
       + fig-button[icon]:not([icon="false"])[variant="ghost"] {
@@ -4931,6 +4933,18 @@ fig-field {
     }
   }
 
+  &:has(> label):has(> [slot="trailing"]) {
+    & > :not(label):not([slot="leading"]):not([slot="trailing"]) {
+      justify-self: start;
+      width: calc(100% - var(--spacer-4) - var(--spacer-1));
+    }
+
+    &:has(> [slot="trailing"][variant="ghost"])
+      > :not(label):not([slot="leading"]):not([slot="trailing"]) {
+      width: calc(100% - var(--spacer-4));
+    }
+  }
+
 
   &[columns="half"] {
     --fig-field-label-ratio: 2fr;
@@ -4971,10 +4985,34 @@ fig-field {
     padding-block: 0;
   }
 
-  & > *:not(.fig-field-chevron):not(label) {
+  & > *:not([slot="leading"]):not([slot="trailing"]):not(label) {
     grid-area: input;
   }
 
+  & > [slot="leading"] {
+    grid-area: leading;
+    &[size="small"]{
+      margin-top: var(--spacer-1);
+    }
+
+    &[name="drag-handle"]{
+      visibility: hidden;
+    }
+  }
+  &:hover > [slot="leading"][name="drag-handle"]{
+    visibility: visible;
+  }
+
+  & > [slot="trailing"] {
+    grid-area: input;
+    justify-self: end;
+    z-index: 1;
+
+    &[variant="ghost"] {
+      margin-right: calc(var(--spacer-1) * -1);
+    }
+  }
+
   & > progress {
     align-self: center;
   }
@@ -4987,7 +5025,6 @@ fig-field {
     transition: transform var(--transition-duration)
       var(--transition-timing-function);
     flex-shrink: 0;
-    grid-area: chevron;
     margin-top: var(--spacer-1);
   }
 
@@ -5005,10 +5042,19 @@ fig-field {
       padding-inline: var(--fig-field-left-padding) calc(var(--fig-field-right-padding) * 0.5);
     }
 
-    & > *:not(fig-button):not(.fig-field-chevron) {
+    & > *:not(fig-button):not([slot="leading"]):not([slot="trailing"]) {
       flex: 1 1 0;
       min-width: 0;
     }
+
+    & > [slot="leading"] {
+      order: -1;
+    }
+
+    & > [slot="trailing"] {
+      order: 1;
+      margin-left: auto;
+    }
   }
 
   &[direction="vertical"] {
@@ -5017,7 +5063,7 @@ fig-field {
       );
     grid-template-rows: auto auto;
     grid-template-areas:
-      "chevron label pad"
+      "leading label pad"
       ".       input pad";
 
     & > label {
@@ -6489,6 +6535,7 @@ fig-toolbelt {
 fig-icon {
   --size: var(--spacer-4);
   --icon: none;
+  color: var(--icon-color, inherit);
 
   &[size="small"] {
     --size: var(--spacer-3);
@@ -6516,7 +6563,7 @@ fig-icon {
   &:has(> *),
   &:not([name]) {
     background: transparent !important;
-    color: var(--icon-color, inherit);
+
     -webkit-mask-image: none;
     mask-image: none;
   }
@@ -6524,6 +6571,7 @@ fig-icon {
   &:not([name]) {
     align-items: center;
     justify-content: center;
+    line-height: 1;
   }
 
   & > label {
@@ -7282,6 +7330,7 @@ fig-menu::part(listbox) {
   display: flex;
   flex-shrink: 0;
   align-items: center;
+  text-align: left;
   gap: 0;
   width: 100%;
   padding: var(--fig-menu-item-padding);