@rogieking/figui3 9.0.13 → 9.1.0

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

@@ -1,7 +1,7 @@
 ---
 name: fig-lab
 description: >-
-  Guides FigUI3 experimental Lab components: fig-canvas-control, fig-input-angle,
+  Guides FigUI3 experimental Lab components: fig-canvas-control,
   fig-input-wheel, fig-reorder, and AI composer components, including React JSX usage.
   APIs are unstable.
 user-invocable: false
@@ -22,4 +22,4 @@ import "@rogieking/figui3/fig-lab.css";
 import "@rogieking/figui3/fig-lab.js";
 ```
 
-Use Lab for canvas handles, angle/wheel inputs, reorder behavior, and AI composition surfaces. Keep Lab out of `fig.js`.
+Use Lab for canvas handles, wheel inputs, reorder behavior, and AI composition surfaces. Keep Lab out of `fig.js`.

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

@@ -26,19 +26,6 @@ Handlers below assume `onInput` / `onChange` from the React contract.
 - Attrs: `type`, `value` (JSON string), `color`, `name`, `tooltips`, `disabled`, `drag-surface`, `snapping` (`false` | `modifier` | `true`), `precision` (positions, radius, angle, and internal handles; default `2`)
 - React: JSON `value` as a string attr; do not remount during drag.
 
-### `fig-input-angle`
-
-```tsx
-<fig-input-angle
-  value={String(deg)}
-  text="true"
-  units="°"
-  onInput={onInput}
-/>
-```
-
-- Attrs: `value`, `precision`, `text`, `min`, `max`, `units`, `dial` (default true), `rotations`, `disabled`
-
 ### `fig-input-wheel`
 
 ```tsx

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

@@ -35,12 +35,6 @@ Parent must be `position: relative` (or similar) so the control can fill it. Wra
 
 Types: `point`, `color`, `point-radius`, `point-radius-angle`, `point-point`.
 
-## `fig-input-angle`
-
-Observed include `value`, `precision`, `text`, `min`, `max`, `units`, `dial`, plus `rotations`.
-
-`dial` defaults true. `text="true"` shows the numeric field.
-
 ## `fig-reorder`
 
 Observed: `axis`, `handle`, `disabled`.

package/.cursor/skills/figui3/SKILL.md

@@ -88,7 +88,7 @@ fig-menu            change → detail { value }
 fig-dialog/popup    native dialog close plus FigUI3 positioning attrs
 ```
 
-`fig-input-angle` and `fig-input-wheel` are **lab**, not core.
+`fig-angle` is core. `fig-input-wheel` remains **lab**.
 
 ## Maintainer workflow
 

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

@@ -86,7 +86,26 @@ Handlers below assume `onInput` / `onChange` / `onClick` from [react.md](react.m
 />
 ```
 
-- Attrs: `min`, `max`, `step`, `precision`, `units`, `units-disallow`, `steppers`, `disabled`, `full`
+- Attrs: `variant` (`ghost`), `min`, `max`, `step`, `precision`, `units`, `units-disallow`, `steppers`, `tabular`, `disabled`, `full`
+
+### `fig-angle`
+
+```tsx
+<fig-angle
+  value={String(angle)}
+  units="deg"
+  onInput={onInput}
+  onChange={onChange}
+/>
+```
+
+- Attrs: `value`, `default`, `precision` (defaults: deg/grad 0, rad 2, turn 3), `dial` (default true), optional `min`/`max`, `step` (defaults: deg/° 1, rad 0.01, turn 0.001, grad 0.1), `units` (`deg`, `°`, `rad`, `turn`, `grad`; degrees display as `°`), `rotations`, `disabled`, `full`
+- Property: `defaultValue` returns the resolved default; values are unbounded unless `min`/`max` are authored.
+- Changing `units` converts `value`, `default`, `min`, `max`, and `step` to preserve physical angles.
+- The surface shows the shared focus outline for dial/input focus and dragging. Dial Arrow keys use `step`; Shift-drag and dial Shift+Arrow move in 15° increments. The internal number input retains built-in Up/Down, Shift×10, and Alt-drag scrubbing.
+- An inset reset button appears when `value` differs from `default`; activating it emits `input` and `change`.
+- Events: `input` while editing and `change` on commit, with `{ value, angle, units }`; event values are rounded to `precision` without reducing stored precision
+- The arrow sweeps from zero to the signed angle directly over the outer dial boundary. `customElements.get("fig-angle").rotationIcon(angle, size)` returns a standalone SVG string (`size` defaults to 48).
 
 ### `fig-input-combo`
 

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

@@ -44,6 +44,7 @@ type FigAttrs = React.DetailedHTMLProps<
 
 type FigTag =
   | "fig-3d-rotate"
+  | "fig-angle"
   | "fig-ai-context"
   | "fig-ai-prompt"
   | "fig-attachment"
@@ -71,7 +72,6 @@ type FigTag =
   | "fig-header"
   | "fig-icon"
   | "fig-image"
-  | "fig-input-angle"
   | "fig-input-color"
   | "fig-input-combo"
   | "fig-input-file"

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

@@ -23,6 +23,24 @@ Public API: `README.md`. React recipes: [components.md](components.md).
 - `value`, `placeholder`, `multiline`, `autoresize`, `resizable`, `disabled`, `readonly`, `full`
 - Adornments: `slot="prepend"` and `slot="append"`
 
+## `fig-input-number`
+
+- `size`: `""`, `large` (32px tall)
+- `variant`: `""`, `ghost`
+- `value`, `placeholder`, `min`, `max`, `step`, `precision`, `units`, `units-disallow`, `steppers`, `tabular`, `disabled`, `full`
+- Adornments: `slot="prepend"` and `slot="append"`
+
+## `fig-angle`
+
+- `value`, `default`, `precision` (defaults: deg/grad `0`, rad `2`, turn `3`), `dial`, optional `min`/`max`, `step` (defaults: deg/° `1`, rad `0.01`, turn `0.001`, grad `0.1`), `rotations`, `disabled`, `full`
+- `defaultValue`: resolved numeric default; values are otherwise unbounded
+- `units`: `deg` (default; `°` alias), `rad`, `turn`, or `grad`. Degree units display as `°` in the number field.
+- Changing `units` converts `value`, `default`, `min`, `max`, and `step`.
+- Shared surface focus outline for dial/input focus and dragging; dial Arrow keys use `step`, Shift-drag/dial Shift+Arrow move by 15°, and the number input retains built-in Up/Down, Shift×10, and Alt-drag scrubbing
+- An inset reset button appears when `value` differs from `default`
+- Events: `input` while editing; `change` on commit; detail `{ value, angle, units }`, rounded to `precision` while stored values remain high precision
+- Static `rotationIcon(angle, size)` returns the centered SVG arc/arrow swept from zero to the signed angle; `size` defaults to `48`.
+
 ## `fig-dropdown`
 
 - `value`, `type="select|dropdown"`, `variant="ghost"`, `size="large"` (32px), `full`, `disabled`

package/README.md

@@ -105,7 +105,7 @@ 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 Angle](#input-angle) | `<fig-input-angle>` | Angle/rotation dial and text input |
+| [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 |
@@ -344,7 +344,7 @@ document.querySelector("fig-select").menuAnchor =
 | `precision` | number | — | Decimal places for output |
 | `disabled` | boolean | `false` | Disabled state |
 
-**Events:** `input` (continuous), `change` (on release).
+**Events:** `input` (continuous), `change` (on release), with detail `{ value, angle, units }`. Event values are rounded to `precision`; the component retains its higher-precision internal value.
 
 ```html
 <fig-slider min="0" max="100" value="50" units="%"></fig-slider>
@@ -417,6 +417,7 @@ The `value`, `min`, `max`, and `step` properties mirror their attributes. `aria-
 | `value` | string | — | Numeric value |
 | `placeholder` | string | — | Placeholder text |
 | `size` | string | — | Set to `"large"` for a 32px-tall input |
+| `variant` | string | — | Set to `"ghost"` for a borderless control |
 | `min` | number | — | Minimum |
 | `max` | number | — | Maximum |
 | `step` | number | — | Step increment |
@@ -426,39 +427,48 @@ The `value`, `min`, `max`, and `step` properties mirror their attributes. `aria-
 | `transform` | number | — | Display multiplier |
 | `precision` | number | — | Fixed displayed decimal places; omitted values use up to two places |
 | `steppers` | boolean | `false` | Show spin buttons |
+| `tabular` | boolean | `false` | Tabular numerals (`font-variant-numeric: tabular-nums`) |
 | `disabled` | boolean | `false` | Disabled state |
 
 ```html
 <fig-input-number value="100" units="px"></fig-input-number>
 <fig-input-number size="large" value="100" units="px"></fig-input-number>
+<fig-input-number variant="ghost" value="100" units="px"></fig-input-number>
+<fig-input-number tabular value="100" units="px"></fig-input-number>
 <fig-input-number value="50" units="%" min="0" max="100"></fig-input-number>
 ```
 
 ---
 
-#### Input Angle
+#### Angle
+
+`<fig-angle>` — [demo](https://rog.ie/figui3/#angle)
 
-`<fig-input-angle>` — [demo](https://rog.ie/figui3/#angle-input)
+Instrument-style angle/rotation control with an interactive dial, text input, CSS angle units, 15-degree Shift snapping, and unbounded positive/negative winding by default. Degree units display as `°` in the number field. Accepts unit suffixes in text input (`90°`, `90deg`, `3.14rad`, `0.5turn`, `100grad`). Add `min` and/or `max` to clamp the value. Changing `units` preserves the physical angle and converts `value`, `default`, `min`, `max`, and `step` (for example, `90deg` becomes `0.250turn`). When the value differs from `default`, an inset reset button restores the default and emits `input` and `change`.
 
-Angle/rotation input with circular dial, optional text input, multi-unit support, and unbounded winding past 360deg. Accepts unit suffixes in text input (`90deg`, `3.14rad`, `0.5turn`).
+The rotation arrow starts at zero and sweeps along the outer dial boundary to the current angle, clockwise for positive values and counterclockwise for negative values. The surface receives the shared focus outline when the dial or number input is focused or dragged. Dial Arrow keys move by `step`, with Shift+Arrow moving by 15°. The internal number input keeps its built-in Up/Down stepping, Shift×10 stepping, and Alt-drag scrubbing. `customElements.get("fig-angle").rotationIcon(angle, size)` returns a standalone SVG version for reuse elsewhere; `size` defaults to `48`.
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
 | `value` | number | `0` | Angle value |
-| `precision` | number | `1` | Decimal places |
-| `text` | boolean | `false` | Show text input |
+| `default` | number | `0` | Default/reset value, clamped to bounds |
+| `precision` | number | unit-dependent | Decimal places (`0` deg/grad, `2` rad, `3` turn) |
 | `dial` | boolean | `true` | Show circular dial |
 | `min` | number | — | Minimum (omit for unbounded) |
 | `max` | number | — | Maximum (omit for unbounded) |
-| `units` | string | `"°"` | `"°"` / `"deg"`, `"rad"`, `"turn"` |
+| `step` | number | unit-dependent | Keyboard and text-input step (`1` deg/°, `0.01` rad, `0.001` turn, `0.1` grad) |
+| `units` | string | `"deg"` | `"deg"` / `"°"`, `"rad"`, `"turn"`, `"grad"` |
 | `rotations` | boolean | `false` | Show rotation counter |
 
+The `defaultValue` property returns the resolved numeric default in the active unit.
+
 **Events:** `input` (continuous), `change` (on release).
 
 ```html
-<fig-input-angle value="90" text="true"></fig-input-angle>
-<fig-input-angle text="true" units="rad" value="3.14159"></fig-input-angle>
-<fig-input-angle text="true" rotations value="1080"></fig-input-angle>
+<fig-angle value="90"></fig-angle>
+<fig-angle units="rad" value="3.14159"></fig-angle>
+<fig-angle units="grad" value="100"></fig-angle>
+<fig-angle rotations value="1080"></fig-angle>
 ```
 
 ---

package/components.css

@@ -14,7 +14,7 @@
   --figma-color-bg-brand-tertiary: light-dark(#e5f4ff, #394360);
   --figma-color-bg-component: light-dark(#9747ff, #8a38f5);
   --figma-color-bg-component-hover: light-dark(#8638e5, #7a2ed6);
-  --figma-color-bg-component-pressed: light-dark(#8638e5, #7a2ed6);
+  --figma-color-bg-component-pressed: light-dark(#7c2bda, #652ca8);
   --figma-color-bg-component-secondary: light-dark(#7c2bda, #652ca8);
   --figma-color-bg-component-tertiary: light-dark(#f1e5ff, #473956);
   --figma-color-bg-danger: light-dark(#f24822, #e03e1a);
@@ -27,26 +27,26 @@
   --figma-color-bg-hover: light-dark(#f5f5f5, #383838);
   --figma-color-bg-active: var(--figma-color-bg-pressed);
   --figma-color-bg-inverse: light-dark(#2c2c2c, #ffffff);
-  --figma-color-bg-onselected: light-dark(#bde3ff, #667799);
-  --figma-color-bg-onselected-hover: light-dark(#bde3ff, #667799);
-  --figma-color-bg-onselected-pressed: light-dark(#bde3ff, #667799);
+  --figma-color-bg-onselected: light-dark(#bde3ff, #4a5878);
+  --figma-color-bg-onselected-hover: light-dark(#bde3ff, #4a5878);
+  --figma-color-bg-onselected-pressed: light-dark(#bde3ff, #4a5878);
   --figma-color-bg-pressed: light-dark(#f5f5f5, #383838);
   --figma-color-bg-secondary: light-dark(#f5f5f5, #383838);
-  --figma-color-bg-selected: light-dark(#e5f4ff, #4a5878);
-  --figma-color-bg-selected-hover: light-dark(#bde3ff, #536383);
-  --figma-color-bg-selected-pressed: light-dark(#bde3ff, #536383);
-  --figma-color-bg-selected-secondary: light-dark(#f2f9ff, #394360);
+  --figma-color-bg-selected: light-dark(#e5f4ff, #394360);
+  --figma-color-bg-selected-hover: light-dark(#bde3ff, #4a5878);
+  --figma-color-bg-selected-pressed: light-dark(#80caff, #394360);
+  --figma-color-bg-selected-secondary: light-dark(#f2f9ff, #32394d);
   --figma-color-bg-selected-strong: light-dark(#0d99ff, #0c8ce9);
-  --figma-color-bg-selected-tertiary: light-dark(#f2f9ff, #394360);
+  --figma-color-bg-selected-tertiary: light-dark(#f2f9ff, #32394d);
   --figma-color-bg-success: light-dark(#14ae5c, #198f51);
   --figma-color-bg-success-hover: light-dark(#009951, #078348);
-  --figma-color-bg-success-pressed: light-dark(#009951, #078348);
+  --figma-color-bg-success-pressed: light-dark(#008043, #0a5c35);
   --figma-color-bg-success-secondary: light-dark(#008043, #0a5c35);
-  --figma-color-bg-success-tertiary: light-dark(#cff7d3, #476656);
+  --figma-color-bg-success-tertiary: light-dark(#e0f6e5, #2f483c);
   --figma-color-bg-tertiary: light-dark(#e6e6e6, #444444);
   --figma-color-bg-warning: light-dark(#ffcd29, #f3c11b);
   --figma-color-bg-warning-hover: light-dark(#ffc21a, #f2b50d);
-  --figma-color-bg-warning-pressed: light-dark(#ffc21a, #f2b50d);
+  --figma-color-bg-warning-pressed: light-dark(#fab815, #e4a711);
   --figma-color-bg-warning-secondary: light-dark(#fab815, #e4a711);
   --figma-color-bg-warning-tertiary: light-dark(#fff1c2, #5c4100);
   --figma-color-bg-switch: light-dark(#e6e6e6, #444444);
@@ -59,7 +59,7 @@
   --figma-color-border: light-dark(#e6e6e6, #444444);
   --figma-color-border-brand: light-dark(#bde3ff, #105cad);
   --figma-color-border-brand-strong: light-dark(#007be5, #7cc4f8);
-  --figma-color-border-component: light-dark(#e4ccff, #652ca8);
+  --figma-color-border-component: light-dark(#e4ccff, #604d75);
   --figma-color-border-component-hover: light-dark(#9747ff, #8a38f5);
   --figma-color-border-component-strong: light-dark(#8638e5, #d6b6fb);
   --figma-color-border-danger: light-dark(#ffc7c2, #963323);
@@ -82,9 +82,9 @@
   --figma-color-border-selected: light-dark(#0d99ff, #0c8ce9);
   --figma-color-border-selected-strong: light-dark(#007be5, #7cc4f8);
   --figma-color-border-strong: light-dark(#2c2c2c, #ffffffe5);
-  --figma-color-border-success: light-dark(#aff4c6, #0a5c35);
-  --figma-color-border-success-strong: light-dark(#009951, #79d297);
-  --figma-color-border-warning: light-dark(#ffe8a3, #925711);
+  --figma-color-border-success: light-dark(#b9ebc6, #517361);
+  --figma-color-border-success-strong: light-dark(#009951, #7cd797);
+  --figma-color-border-warning: light-dark(#f5dfa8, #7a5800);
   --figma-color-border-warning-strong: light-dark(#b86200, #f7d15f);
   --figma-color-border-slot: light-dark(#ff24bd, #f316b0);
 
@@ -101,8 +101,8 @@
   --figma-color-icon-brand-tertiary: light-dark(#bde3ff, #394360);
   --figma-color-icon-component: light-dark(#8638e5, #d1a8ff);
   --figma-color-icon-component-pressed: light-dark(#7c2bda, #d6b6fb);
-  --figma-color-icon-component-secondary: light-dark(#6f3bb2, #d1a8ff);
-  --figma-color-icon-component-tertiary: light-dark(#6f3bb2, #d1a8ff);
+  --figma-color-icon-component-secondary: light-dark(#a38cc0, #7f699b);
+  --figma-color-icon-component-tertiary: light-dark(#c5b2dc, #7f699b);
   --figma-color-icon-danger: light-dark(#f24822, #e03e1a);
   --figma-color-icon-danger-hover: light-dark(#bd2915, #fbbcb6);
   --figma-color-icon-danger-pressed: light-dark(#bd2915, #fbbcb6);
@@ -133,21 +133,21 @@
   --figma-color-icon-onwarning-secondary: #00000080;
   --figma-color-icon-onwarning-tertiary: #0000004d;
   --figma-color-icon-pressed: light-dark(#007be5, #0a6dc2);
-  --figma-color-icon-secondary: light-dark(#00000080, #ffffffb3);
+  --figma-color-icon-secondary: light-dark(#00000080, #ffffffb2);
   --figma-color-icon-secondary-hover: light-dark(#000000e5, #ffffff);
   --figma-color-icon-selected: light-dark(#007be5, #7cc4f8);
-  --figma-color-icon-selected-secondary: light-dark(#007be5, #7cc4f8);
-  --figma-color-icon-selected-tertiary: light-dark(#007be5, #7cc4f8);
-  --figma-color-icon-success: light-dark(#14ae5c, #198f51);
-  --figma-color-icon-success-pressed: light-dark(#008043, #a1e8b9);
-  --figma-color-icon-success-secondary: light-dark(#14ae5c, #198f51);
-  --figma-color-icon-success-tertiary: light-dark(#14ae5c, #198f51);
-  --figma-color-icon-tertiary: light-dark(#00000099, #ffffff99);
+  --figma-color-icon-selected-secondary: light-dark(#0d99ff, #0c8ce9);
+  --figma-color-icon-selected-tertiary: light-dark(#80caff, #0a6dc2);
+  --figma-color-icon-success: light-dark(#009951, #7cd797);
+  --figma-color-icon-success-pressed: light-dark(#008043, #a5e5b7);
+  --figma-color-icon-success-secondary: light-dark(#009951, #7cd797);
+  --figma-color-icon-success-tertiary: light-dark(#009951, #7cd797);
+  --figma-color-icon-tertiary: light-dark(#0000004d, #fff6);
   --figma-color-icon-tertiary-hover: light-dark(#000000e5, #ffffff);
-  --figma-color-icon-warning: light-dark(#ffcd29, #f3c11b);
+  --figma-color-icon-warning: light-dark(#b86200, #f7d15f);
   --figma-color-icon-warning-pressed: light-dark(#b86200, #f7d15f);
-  --figma-color-icon-warning-secondary: light-dark(#ffcd29, #f3c11b);
-  --figma-color-icon-warning-tertiary: light-dark(#ffcd29, #f3c11b);
+  --figma-color-icon-warning-secondary: light-dark(#b86200, #f7d15f);
+  --figma-color-icon-warning-tertiary: light-dark(#b86200, #f7d15f);
 
   /* Text Colors */
   --figma-color-text: light-dark(#000000e5, #ffffff);
@@ -156,8 +156,8 @@
   --figma-color-text-brand-tertiary: light-dark(#007be5, #7cc4f8);
   --figma-color-text-component: light-dark(#8638e5, #d1a8ff);
   --figma-color-text-component-pressed: light-dark(#7c2bda, #d6b6fb);
-  --figma-color-text-component-secondary: light-dark(#6f3bb2, #d1a8ff);
-  --figma-color-text-component-tertiary: light-dark(#6f3bb2, #d1a8ff);
+  --figma-color-text-component-secondary: light-dark(#a38cc0, #a38cc0);
+  --figma-color-text-component-tertiary: light-dark(#c5b2dc, #7f699b);
   --figma-color-text-danger: light-dark(#dc3412, #fca397);
   --figma-color-text-danger-secondary: light-dark(#dc3412, #fca397);
   --figma-color-text-danger-tertiary: light-dark(#dc3412, #fca397);
@@ -184,16 +184,16 @@
   --figma-color-text-onwarning: #000000e5;
   --figma-color-text-onwarning-secondary: #00000080;
   --figma-color-text-onwarning-tertiary: #0000004d;
-  --figma-color-text-secondary: light-dark(#00000099, #ffffffcc);
+  --figma-color-text-secondary: light-dark(#00000099, #ffffffb2);
   --figma-color-text-secondary-hover: light-dark(#000000e5, #ffffff);
   --figma-color-text-selection: rgba(13, 153, 255, 0.4);
   --figma-color-text-selected: light-dark(#007be5, #7cc4f8);
   --figma-color-text-selected-secondary: light-dark(#007be5, #7cc4f8);
   --figma-color-text-selected-tertiary: light-dark(#007be5, #7cc4f8);
-  --figma-color-text-success: light-dark(#009951, #79d297);
-  --figma-color-text-success-secondary: light-dark(#009951, #79d297);
-  --figma-color-text-success-tertiary: light-dark(#009951, #79d297);
-  --figma-color-text-tertiary: light-dark(#00000099, #ffffff99);
+  --figma-color-text-success: light-dark(#009951, #7cd797);
+  --figma-color-text-success-secondary: light-dark(#009951, #7cd797);
+  --figma-color-text-success-tertiary: light-dark(#009951, #7cd797);
+  --figma-color-text-tertiary: light-dark(#0000004d, #ffffff66);
   --figma-color-text-tertiary-hover: light-dark(#000000e5, #ffffff);
   --figma-color-text-warning: light-dark(#b86200, #f7d15f);
   --figma-color-text-warning-secondary: light-dark(#b86200, #f7d15f);
@@ -221,12 +221,13 @@
   --body-large-fontSize: var(--text-body-large-font-size);
   --body-letter-spacing: 0.055px;
   --body-medium-strong-fontWeight: 550;
-  --body-large-strong-fontWeight: 500;
+  --body-large-strong-fontWeight: 550;
   --body-medium-fontWeight: 450;
 
   --line-height: 1rem;
 
   /* Spacing */
+  --spacer-0: 0;
   --spacer-1: 0.25rem;
   --spacer-2: 0.5rem;
   --spacer-2-5: 0.75rem;
@@ -242,11 +243,19 @@
   --radius-medium: 0.3125rem;
   --radius-medium-large: 0.5625rem;
   --radius-large: 0.8125rem;
+  --radius-xlarge: 1.3125rem;
+  --radius-xxlarge: 1.8125rem;
+  --radius-xxxlarge: 2.3125rem;
+  --radius-full: 9999px;
   --figma-radius-none: var(--radius-none);
   --figma-radius-small: var(--radius-small);
   --figma-radius-medium: var(--radius-medium);
   --figma-radius-medium-large: var(--radius-medium-large);
   --figma-radius-large: var(--radius-large);
+  --figma-radius-xlarge: var(--radius-xlarge);
+  --figma-radius-xxlarge: var(--radius-xxlarge);
+  --figma-radius-xxxlarge: var(--radius-xxxlarge);
+  --figma-radius-full: var(--radius-full);
 
   /* Transitions */
   --input-transition: all 0.08s ease-out;
@@ -281,8 +290,8 @@
     rgba(255, 255, 255, 0.1)
   );
   --figma-color-bg-transparent-secondary: light-dark(
-    rgba(0, 0, 0, 0.2),
-    rgba(255, 255, 255, 0.2)
+    rgba(0, 0, 0, 0.1),
+    rgba(255, 255, 255, 0.1)
   );
 
   /* Gradients */
@@ -1998,6 +2007,185 @@ fig-easing-curve {
   }
 }
 
+/* Angle */
+fig-angle {
+  --stroke-width: 1.5;
+  --aspect-ratio: 1 / 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacer-2);
+  width: 100%;
+  min-width: 0;
+  user-select: none;
+
+  .fig-angle-surface {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    aspect-ratio: var(--aspect-ratio);
+    display: grid;
+    place-items: center;
+    padding: var(--spacer-3);
+    border-radius: var(--radius-medium);
+    background: var(--figma-color-bg-secondary);
+    overflow: hidden;
+
+    &:has(.fig-angle-svg:focus, .fig-angle-input:focus-within),
+    &.dragging {
+      outline: var(--figma-focus-outline);
+      outline-offset: var(--figma-focus-outline-offset);
+    }
+
+    &.dragging .fig-angle-svg {
+      cursor: grabbing;
+    }
+  }
+
+  .fig-angle-svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    overflow: visible;
+    cursor: grab;
+    touch-action: none;
+    pointer-events: auto;
+
+    &:focus {
+      outline: 0;
+    }
+  }
+
+  .fig-angle-boundary,
+  .fig-angle-tick,
+  .fig-angle-indicator,
+  .fig-angle-indicator-halo,
+  .fig-angle-reference-path {
+    vector-effect: non-scaling-stroke;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    pointer-events: none;
+    stroke-width: var(--stroke-width);
+  }
+
+  .fig-angle-boundary {
+    fill: none;
+    stroke: var(--figma-color-bordertranslucent);
+    stroke-width: var(--stroke-width);
+  }
+
+  .fig-angle-tick {
+    stroke: var(--figma-color-icon-tertiary);
+    stroke-width: var(--stroke-width);
+  }
+
+  .fig-angle-reference {
+    color: var(--figma-color-icon-secondary);
+    pointer-events: none;
+  }
+
+  .fig-angle-indicator-halo {
+    stroke: var(--figma-color-border);
+    stroke-width: calc(var(--stroke-width) * 3);
+  }
+
+  .fig-angle-indicator {
+    stroke: var(--figma-color-icon);
+    stroke-width: calc(var(--stroke-width) * 2);
+  }
+
+  .fig-angle-input {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+
+  .fig-angle-surface > .fig-angle-input {
+    position: absolute;
+    z-index: 2;
+    top: 50%;
+    left: 50%;
+    width: fit-content;
+    transform: translate(-50%, -50%);
+    outline: 0;
+
+    input {
+      field-sizing: content;
+      flex: 0 0 auto;
+    }
+  }
+
+  .fig-angle-reset {
+    position: absolute;
+    right: var(--spacer-1);
+    bottom: var(--spacer-1);
+    z-index: 3;
+    background-color: var(--figma-color-bg-secondary) !important;
+
+    &:hover fig-icon {
+      background-color: var(--figma-color-text);
+    }
+
+    fig-icon {
+      background-color: var(--figma-color-text-tertiary);
+    }
+  }
+
+  .fig-angle-rotations {
+    font-variant-numeric: tabular-nums;
+    color: var(--figma-color-text-secondary);
+  }
+
+  &[full] {
+    display: flex;
+    width: 100%;
+  }
+
+  &[disabled]:not([disabled="false"]) {
+    .fig-angle-surface {
+      .fig-angle-svg {
+        cursor: default;
+      }
+    }
+
+    .fig-angle-boundary,
+    .fig-angle-tick,
+    .fig-angle-indicator-halo {
+      stroke: var(--figma-color-border-disabled-strong);
+    }
+
+    .fig-angle-reference {
+      color: var(--figma-color-icon-disabled);
+    }
+
+    .fig-angle-indicator {
+      stroke: var(--figma-color-icon-disabled);
+    }
+  }
+
+  fig-field:not([direction="vertical"]) & {
+    flex: 1;
+  }
+}
+
+@media (forced-colors: active) {
+  fig-angle {
+    .fig-angle-boundary,
+    .fig-angle-tick,
+    .fig-angle-indicator-halo {
+      stroke: CanvasText;
+    }
+
+    .fig-angle-reference {
+      color: CanvasText;
+    }
+
+    .fig-angle-indicator {
+      stroke: Highlight;
+    }
+  }
+}
+
 /* 3D Rotate */
 fig-3d-rotate {
   display: flex;
@@ -3805,6 +3993,13 @@ fig-input-number {
     flex: 1;
     width: 100%;
   }
+  &[tabular]:not([tabular="false"]) {
+    font-variant-numeric: tabular-nums;
+
+    & input {
+      font-variant-numeric: tabular-nums;
+    }
+  }
   &[size="large"] {
     & > input,
     & > textarea {
@@ -3934,6 +4129,24 @@ fig-input-number {
     background-color: var(--figma-color-bg);
     box-shadow: inset 0 0 0 1px var(--figma-color-border-disabled);
   }
+
+  &:is(fig-input-number)[variant="ghost"] {
+    background-color: transparent;
+    box-shadow: none;
+
+    &:hover {
+      box-shadow: none;
+    }
+
+    &:is(:hover, :focus-within):not([disabled]):not([disabled="false"]) {
+      background-color: var(--figma-color-bg-secondary);
+    }
+
+    &[disabled]:not([disabled="false"]) {
+      background-color: transparent;
+      box-shadow: none;
+    }
+  }
 }
 
 fig-input-number > [slot],