@rogieking/figui3 11.6.8 → 11.6.10

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` | `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`
+- Attrs: `value`, `label`, `options` (comma / newline / JSON), `menu-anchor` (alternate anchor selector), `variant` (`primary` | `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="primary"` uses brand button colors for emphasis
 - `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

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 All notable changes to this project will be documented in this file.
 
+## [11.6.10]
+
+### Added
+
+- Added a `primary` variant to `fig-select` with brand, interaction, open, and disabled states.
+
+## [11.6.9]
+
+### Added
+
+- Added a native `<meter>` playground example.
+- Added token-driven native `<meter>` styling with customizable `--meter-color`.
+
+### Changed
+
+- Vertically centered native meters inside `fig-field`, matching progress elements.
+
 ## [11.6.8]
 
 ### Added

package/README.md

@@ -236,7 +236,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 or `"input"` for input-style fill and interaction states |
+| `variant` | string | — | `"primary"` for brand emphasis, `"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 |

package/components.css

@@ -666,6 +666,49 @@ progress {
   }
 }
 
+meter {
+  --meter-height: 0.375rem;
+  --meter-radius: calc(var(--meter-height) / 2);
+  --meter-color: var(--figma-color-bg-brand);
+
+  display: block;
+  width: 100%;
+  min-width: 0;
+  height: var(--meter-height);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  appearance: none;
+  -webkit-appearance: none;
+  overflow: hidden;
+  background: var(--figma-color-bg-secondary);
+  border-radius: var(--meter-radius);
+
+  &::-webkit-meter-bar {
+    height: var(--meter-height);
+    border: 0;
+    background: var(--figma-color-bg-secondary);
+    border-radius: var(--meter-radius);
+    box-shadow: none;
+  }
+
+  &::-webkit-meter-optimum-value,
+  &::-webkit-meter-suboptimum-value,
+  &::-webkit-meter-even-less-good-value {
+    background: var(--meter-color);
+    border-radius: var(--meter-radius);
+    box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+    min-width: var(--meter-height);
+  }
+
+  &::-moz-meter-bar {
+    background: var(--meter-color);
+    border-radius: var(--meter-radius);
+    box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+    min-width: var(--meter-height);
+  }
+}
+
 fig-input-number .fig-steppers {
   order: 3;
   display: flex;
@@ -5068,7 +5111,7 @@ fig-field {
     }
   }
 
-  & > progress {
+  & > :is(progress, meter) {
     align-self: center;
   }