@rogieking/figui3 11.0.3 → 11.1.1

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

@@ -29,7 +29,7 @@ Data-driven (no authored options):
 />
 ```
 
-- Attrs: `value`, `label`, `options` (comma / newline / JSON), `menu-anchor` (alternate anchor selector), `variant` (`ghost`), `size` (`large`, 32px trigger), `icon` (square chevron-only trigger; provide `aria-label`), `subtle` (applies the secondary hover/focus fill to every option), `full`, `disabled`, `position` (omit to overlay the selected option on the trigger; set `bottom left`, `bottom right`, `top left`, `top right`, `bottom center`, or `top center` to place the menu like a popup), `offset`, `closedby`, `open`
+- Attrs: `value`, `label`, `options` (comma / newline / JSON), `menu-anchor` (alternate anchor selector), `variant` (`ghost` | `input`), `size` (`large`, 32px trigger), `icon` (square chevron-only trigger; provide `aria-label`), `subtle` (applies the secondary hover/focus fill to every option), `full`, `disabled`, `position` (omit to overlay the selected option on the trigger; set `bottom left`, `bottom right`, `top left`, `top right`, `bottom center`, or `top center` to place the menu like a popup), `offset`, `closedby`, `open`
 - Property: `menuAnchor` accepts an `Element`, selector string, or `null`. The menu matches the anchor width and centers its selected row over it; if the anchor is narrower than the menu’s usable minimum, default overlay mode centers the wider menu over the anchor. Clear it to restore trigger-text alignment. Explicit `position` keeps anchor-derived sizing while applying normal popup placement and edge alignment.
 - Events: `input` / `change` on commit; `optionhover` for pointer previews; `optionfocus` for open-menu keyboard previews. Both preview events provide the option value in `detail` without changing selection and require native listeners.
 - Do not `stopPropagation` on option click — React light-DOM handlers must run.

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

@@ -24,6 +24,7 @@ Observed: `value`, `disabled`, `selected`, `label`.
 `value`, `disabled`, `label`, `options`, `menu-anchor`, `position`, `offset`, `closedby`, `open`, `variant`, `size`
 
 - `icon` renders a square chevron-only trigger; provide `aria-label`
+- `variant="input"` matches input-style fill, hover, press, and focus states
 - `subtle` applies the secondary hover/focus fill to every option
 - `size="large"` sets a 32px trigger
 - `menu-anchor` accepts an alternate anchor selector; the `menuAnchor` property accepts an `Element`, selector string, or `null`

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

@@ -53,12 +53,13 @@ Handlers below assume `onInput` / `onChange` / `onClick` from [react.md](react.m
 - Events: `input` / `change` → `currentTarget.value`
 - Prefer `fig-select` (editor) for Figma-style menus.
 
-### `fig-combo-input`
+### `fig-split-input`
 
 ```tsx
-<fig-combo-input
+<fig-split-input
+  type="number"
   value={value}
-  options="Small,Medium,Large"
+  options="8,16,24"
   placeholder="Size"
   full
   onInput={onInput}
@@ -66,7 +67,9 @@ Handlers below assume `onInput` / `onChange` / `onClick` from [react.md](react.m
 />
 ```
 
-- Attrs: `value`, `options`, `placeholder`, `disabled`, `full`
+- Attrs: `type` (`text` | `number`, default `text`), `value`, `options`, `placeholder`, `disabled`, `full`
+- Uses `fig-select` when the editor bundle is registered; otherwise uses core `fig-dropdown`.
+- Legacy alias: `fig-combo-input`
 
 ### `fig-input-text`
 

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

@@ -60,6 +60,7 @@ type FigTag =
   | "fig-choice"
   | "fig-chooser"
   | "fig-color-tip"
+  | "fig-split-input"
   | "fig-combo-input"
   | "fig-content"
   | "fig-dropdown"

package/CHANGELOG.md

@@ -2,6 +2,33 @@
 
 All notable changes to this project will be documented in this file.
 
+## [11.1.1]
+
+### Changed
+
+- Added missing disabled controls to the playground Attributes view.
+
+### Fixed
+
+- Forwarded the `fig-slider` disabled state to its internal `fig-input-number`.
+
+## [11.1.0]
+
+### Added
+
+- Added `fig-split-input` with text and number modes, full-width layout, and custom selector support; `fig-combo-input` remains as a legacy alias.
+- Added `variant="input"` to `fig-select`.
+
+### Changed
+
+- Updated split inputs to prefer `fig-select` when available, fall back to `fig-dropdown`, and anchor select menus to the full split input.
+- Added matching split-input playground examples, type presets, typings, and documentation.
+
+### Fixed
+
+- Prevented hover styles from overriding the open state of `fig-select`.
+- Preserved split-input values, accessibility attributes, events, and generated controls across updates and reconnects.
+
 ## [11.0.3]
 
 ### Fixed

package/README.md

@@ -98,7 +98,7 @@ Minimal example:
 | [Button](#button) | `<fig-button>` | Buttons with variants, toggle, select, upload |
 | [Dropdown](#dropdown) | `<fig-dropdown>` | Native select wrapper with Figma styling |
 | [Select](#select) | `<fig-select>` | Custom listbox select (requires `fig-editor.js`) |
-| [Combo Input](#combo-input) | `<fig-combo-input>` | Text input with dropdown suggestions |
+| [Split Input](#split-input) | `<fig-split-input>` | Text or number input with dropdown suggestions |
 | [Checkbox](#checkbox) | `<fig-checkbox>` | Checkbox with indeterminate state |
 | [Radio](#radio) | `<fig-radio>` | Radio button |
 | [Switch](#switch) | `<fig-switch>` | Toggle switch |
@@ -226,7 +226,7 @@ Custom listbox select with overflow chevrons, grouped options, and sticky separa
 | `label` | string | — | Closed-state / accessible label |
 | `options` | string | — | Comma, newline, or JSON options if no authored `fig-select-option` children |
 | `menu-anchor` | CSS selector | — | Alternate element to align the open menu against |
-| `variant` | string | — | `"ghost"` for a borderless control with secondary hover fill |
+| `variant` | string | — | `"ghost"` for a borderless control or `"input"` for input-style fill and interaction states |
 | `size` | string | — | `"large"` for a 32px-tall trigger |
 | `icon` | boolean | `false` | Render a square chevron-only trigger; provide `aria-label` |
 | `subtle` | boolean | `false` | Use the secondary hover/focus fill for every option |
@@ -257,21 +257,29 @@ document.querySelector("fig-select").menuAnchor =
 
 ---
 
-#### Combo Input
+<a id="combo-input"></a>
+
+#### Split Input
 
-`<fig-combo-input>` — [demo](https://rog.ie/figui3/#combo-input)
+`<fig-split-input>` — [demo](https://rog.ie/figui3/#split-input)
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
+| `type` | `text` \| `number` | `text` | Main input control |
 | `options` | string | — | Comma-separated suggestion list |
 | `placeholder` | string | — | Placeholder text |
 | `value` | string | — | Current value |
 | `disabled` | boolean | `false` | Disabled state |
+| `full` | boolean | `false` | Expand to the available width |
 
 ```html
-<fig-combo-input options="House, Apartment, Condo" placeholder="Residence type"></fig-combo-input>
+<fig-split-input options="House, Apartment, Condo" placeholder="Residence type"></fig-split-input>
+<fig-split-input type="number" options="8, 16, 24, 32" value="16"></fig-split-input>
 ```
 
+`<fig-combo-input>` remains available as a legacy alias.
+The suggestion trigger uses `fig-select` when `fig-editor.js` is registered and falls back to core `fig-dropdown`.
+
 ---
 
 #### Checkbox

package/components.css

@@ -2652,25 +2652,37 @@ fig-origin-grid {
   }
 }
 
-/* Combo input */
+/* Split input */
+fig-split-input,
 fig-combo-input {
   display: inline-flex;
   flex: 1;
   min-width: 0;
 
+  &[full]:not([full="false"]) {
+    width: 100%;
+  }
+
   > .input-combo {
     flex: 1 1 auto;
     width: 100%;
     min-width: 0;
   }
 
-  fig-input-text {
+  fig-input-text,
+  fig-input-number {
     flex: 1 1 auto;
     min-width: 0;
   }
 }
 
+fig-split-input fig-button[type="select"],
 fig-combo-input fig-button[type="select"] {
+  &[icon]:not([icon="false"]) {
+    width: var(--spacer-4);
+    padding: 0;
+  }
+
   > fig-dropdown,
   > fig-dropdown > select {
     width: 100%;