@rogieking/figui3 8.10.1 → 8.11.0

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

@@ -33,8 +33,9 @@ import "@rogieking/figui3/fig-lab.js";
 
 ## Shared propskit
 
-- Plain labeled component surfaces; joystick, origin, easing, and spring use a
-  vertical label-above-control layout
+- Plain labeled component surfaces; joystick, origin, easing, spring, and image
+  use a vertical label-above-control layout. Editable select is intentionally
+  label-free with separate edit and add actions.
 - `label` (omitted renders `"Label"`; `label=""` hides it), `disabled`
 - Optional `name` reflects to the host and appears in event details only when non-empty
 - `default` — reset target (may differ from initial `value`)
@@ -56,7 +57,9 @@ import "@rogieking/figui3/fig-lab.js";
 | Labeled exact number | `propskit-number` |
 | Labeled text | `propskit-text` |
 | Labeled discrete list | `propskit-select` (not `fig-dropdown`) |
+| Editable / removable discrete list | `propskit-editable-select` |
 | Labeled palette choice | `propskit-palette` |
+| Labeled image choice/upload | `propskit-image` |
 | Labeled color / fill / gradient | `propskit-color` / `propskit-fill` / `propskit-gradient` |
 | X/Y | `propskit-position` |
 | Interactive X/Y plane | `propskit-joystick` |

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

@@ -8,7 +8,8 @@ Handlers below assume `onInput` / `onChange` from the React contract.
 
 ## Shared propskit
 
-Plain horizontal component surfaces. Prefer these over hand-rolled label+control rows.
+Plain labeled component surfaces. Most are horizontal; spatial, curve, and
+image controls are vertical. Prefer these over hand-rolled label+control rows.
 
 Shared attrs: `label` (omitted renders `"Label"`; `label=""` hides it), optional `name`, `disabled`, `default` (reset target, may differ from initial `value`).
 
@@ -98,6 +99,28 @@ rowRef.current?.resetToDefault();
 - `options` is an array of palette arrays. Public and event values are typed `{ color, alpha }[]`; omission of `value` selects the first palette.
 - Supports `optionhover`, typed `defaultValue`, `isDefault`, and `resetToDefault()`.
 
+### `propskit-image`
+
+```tsx
+<propskit-image
+  label="Image"
+  options='["/images/one.webp","/images/two.webp"]'
+  default="/images/one.webp"
+  onInput={onInput}
+  onChange={onChange}
+/>
+```
+
+- Inner: a permanent ghost icon upload button plus a conditional
+  `fig-chooser layout="grid" columns="2"`.
+- Every `fig-choice` contains a square, cover-fit `fig-image` with an
+  attachment-style remove control. Delete and Backspace remove a focused choice.
+- `options` and `.options` are URL arrays; `.value`, `defaultValue`, and event
+  values are the selected URL. Omitted or unmatched values select the first.
+- File selection appends local object URLs and selects the first new image.
+  Removing a choice updates `options` and revokes its object URL when needed;
+  removing the selection falls back to the first remaining image.
+
 ### `propskit-select`
 
 ```tsx
@@ -123,6 +146,38 @@ Rich options (requires editor):
 
 - Inner: always `fig-select`; editor registration is required. Authored `fig-select-options slot="panel"` wins. Options stay in light DOM.
 
+### `propskit-editable-select`
+
+```tsx
+<propskit-editable-select
+  aria-label="Layer style"
+  name="style"
+  value="primary"
+  options='[{"value":"primary","label":"Primary"},{"value":"secondary","label":"Secondary"}]'
+  onInput={onInput}
+  onChange={onChange}
+/>
+```
+
+- Label-free, always-subtle, content-width `fig-select` on the left in one
+  full-row PropsKit surface with default-size secondary edit and add buttons on
+  the right.
+- The entire host opens the select except for the edit and add actions.
+- The options menu aligns to and spans the full PropsKit row.
+- Add creates and selects an `item-{index}` value using its zero-based array
+  index with the label `"New item"`, then enters rename mode.
+- Edit swaps in a default-size, full-width `fig-input-text`; checkmark, Enter,
+  or moving focus outside the input saves, while Escape cancels.
+- Each option has an appended ghost trash action. Delete or Backspace removes
+  the focused option from the keyboard.
+- Edit/save, add, and trash icon buttons include descriptive tooltips.
+- The select and trash action disable at one remaining item; edit and add stay
+  available.
+- `.options` is normalized `{ value, label }[]`. Renaming changes the label
+  while preserving its stable value.
+- `input`, `change`, and `optionhover` detail includes both the stable `value`
+  and current `label`.
+
 ### `propskit-text`
 
 ```tsx

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

@@ -19,9 +19,10 @@ and `input` / `change` event values are boolean.
 
 ## Propskit surfaces and events
 
-Surface controls are horizontal and do not compose `fig-field`. Omitted `label`
-renders `"Label"` and `label=""` hides the visible label. Optional non-empty
-`name` reflects on the host.
+Surface controls do not compose `fig-field`. Most are horizontal; spatial,
+curve, and image controls use vertical layouts. Omitted `label` renders
+`"Label"` and `label=""` hides the visible label. Optional non-empty `name`
+reflects on the host.
 
 `input` and `change` dispatch from the outer host with
 `{ control, value, name? }`; `event.target.value` equals `detail.value`.
@@ -47,9 +48,33 @@ Import `fig-editor.js` and `fig-editor.css`.
 - Palette entries: color strings or `{ "color": string, "alpha": number }`
 - `.value`, `defaultValue`, and event `detail.value`: typed `{ color, alpha }[]`
 - First option is the fallback when `value` is omitted or does not match
-- `input`, `change`, and `optionhover` use the shared PropsKit envelope
+- `input`, `change`, and `optionhover` extend the shared PropsKit envelope with
+  `label`; `value` remains the stable option value
 - `isDefault` uses structural equality; `resetToDefault()` restores `default`
 
+## `propskit-image`
+
+Observed: `options`, `value`, `default`, `label`, `aria-label`, `disabled`.
+
+Renders a label and permanent ghost upload button above a conditional
+`fig-chooser`. The chooser always uses `layout="grid"` and `columns="2"`;
+each `fig-choice` contains a square, cover-fit `fig-image` and an
+attachment-style remove control.
+
+- `options`: optional JSON string array of image URLs
+- `.options`: normalized, de-duplicated URL array
+- `.value`, `defaultValue`, and event `detail.value`: selected URL string
+- First option is the fallback when `value` is omitted or does not match
+- Selecting one or more image files appends object URLs and selects the first
+  new image; applications own durable upload and URL replacement
+- Removing a choice reflects the reduced `options` array and revokes an object
+  URL when needed; removing the selected choice falls back to the first option
+  and emits `input` and `change`
+- Delete and Backspace remove the focused choice
+- `input` and `change` use the shared PropsKit envelope
+- Supports `variant="minimal"`, `isDefault`, `resetToDefault()`, and focus
+  delegation
+
 ## `propskit-select`
 
 Observed: `label`, `aria-label`, `options`, `value`.
@@ -58,6 +83,34 @@ Always renders `fig-select`. Import `fig-editor.js` and `fig-editor.css`; delaye
 
 Options attr: JSON array, comma, or newline. Authored `fig-select-options slot="panel"` wins for rich menus.
 
+## `propskit-editable-select`
+
+Observed: `options`, `value`, `default`, `aria-label`, `disabled`.
+
+Renders a label-free, always-subtle, content-width `fig-select` on the left,
+with default-size secondary edit and add buttons on the right inside one
+full-row PropsKit surface. The row uses the standard PropsKit padding,
+background, border, color, hover, and focus variables.
+
+- `options` accepts comma, newline, or JSON values supported by `fig-select`
+- `.options` returns normalized `{ value, label }[]` entries
+- Clicking the host opens the select except when edit or add is clicked
+- The options menu is positioned and sized to the full PropsKit row
+- Add creates an `item-{index}` value using its zero-based array index with the
+  label `"New item"`, selects it, and opens rename mode
+- Edit replaces the select with a default-size, full-width `fig-input-text`;
+  checkmark, Enter, or moving focus outside the input commits, while Escape
+  cancels
+- Each menu option has an appended ghost trash action; Delete or Backspace
+  removes the focused option
+- Edit/save, add, and trash icon buttons include descriptive tooltips
+- At one remaining item, the select and trash action are disabled; add and edit
+  remain available
+- Renaming updates the reflected options JSON while preserving the option value
+- `input`, `change`, and `optionhover` use the shared PropsKit envelope
+- Supports `defaultValue`, `isDefault`, `editing`, `resetToDefault()`, disabled
+  state propagation, and focus delegation
+
 ## `propskit-text`
 
 Composes `fig-input-text` with `multiline` and `autoresize` enabled by default.

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

@@ -68,7 +68,7 @@ Handlers below assume `onInput` / `onChange` / `onClick` from [react.md](react.m
 />
 ```
 
-- Attrs: `type` (`text`, `email`, `password`, `search`, `url`), `multiline`, `autoresize`, `resizable`, `disabled`, `readonly`, `placeholder`, `full`
+- Attrs: `type` (`text`, `email`, `password`, `search`, `url`), `size` (`large`), `multiline`, `autoresize`, `resizable`, `disabled`, `readonly`, `placeholder`, `full`
 
 ### `fig-input-number`
 

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

@@ -118,6 +118,7 @@ type FigTag =
   | "propskit-gradient"
   | "propskit-group"
   | "propskit-easing"
+  | "propskit-image"
   | "propskit-number"
   | "propskit-oscillator"
   | "propskit-point-point"
@@ -126,6 +127,7 @@ type FigTag =
   | "propskit-position"
   | "propskit-joystick"
   | "propskit-origin"
+  | "propskit-editable-select"
   | "propskit-select"
   | "propskit-slider"
   | "propskit-spring"

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

@@ -17,6 +17,13 @@ Shared by `fig-dropdown`/`fig-options`/`fig-select`/`propskit-select` `options`:
 - `size`: `""`, `large`, `compact`
 - `selected`, `disabled`, `icon` (presence)
 
+## `fig-input-text`
+
+- `type`: `text`, `email`, `password`, `search`, `url`
+- `size`: `""`, `large` (32px tall)
+- `value`, `placeholder`, `multiline`, `autoresize`, `resizable`, `disabled`, `readonly`, `full`
+- Adornments: `slot="prepend"` and `slot="append"`
+
 ## `fig-dropdown`
 
 - `value`, `type="select|dropdown"`, `variant="ghost"`, `full`, `disabled`

package/.cursor/skills/propkit/SKILL.md

@@ -59,17 +59,22 @@ Core tags: `figui3` skill + [../figui3/components.md](../figui3/components.md).
 | Text | `fig-input-text` | `propskit-text` |
 | Small discrete set (2–5) | `fig-segmented-control` | — |
 | Larger / rich list | `fig-select` (editor) | `propskit-select` |
+| Addable / renameable / removable list | `fig-select` + action buttons | `propskit-editable-select` |
 | Native select only | `fig-dropdown` | — |
 | Color | `fig-input-color` `text="true"` | `propskit-color` (fill-picker swatch) |
 | Fill | `fig-input-fill` | `propskit-fill` (fill-picker swatch) |
 | Gradient | `fig-input-gradient` | `propskit-gradient` |
-| Image | `fig-image` `upload` | — |
+| Image | `fig-image` `upload` | `propskit-image` |
 | Easing | `fig-easing-curve` | — |
 | Angle | `fig-input-angle` (**lab**) | — |
 | X/Y | `fig-joystick` or two numbers | `propskit-position` |
 
 Do not use dropdown/slider for pure on/off. Do not use `fig-dropdown` for Figma-style property selects when `fig-select` is available.
 
+Secondary `fig-button` controls nested in PropsKit use the same borderless
+`--propskit-bg-subfield` treatment as ghost subfield selects. This treatment
+persists on hover and while disabled.
+
 ## Slider rules
 
 - Default `type="range"`. Always set `min`, `max`, `step`.

package/README.md

@@ -110,6 +110,7 @@ Minimal example:
 | [Propskit Fill](#propskit-fill) | `<propskit-fill>` | Full-surface labeled fill control |
 | [Propskit Gradient](#propskit-gradient) | `<propskit-gradient>` | Full-surface labeled gradient control |
 | [Propskit Palette](#propskit-palette) | `<propskit-palette>` | Labeled palette selector |
+| [Propskit Image](#propskit-image) | `<propskit-image>` | Labeled image chooser with upload |
 | [Propskit Number](#propskit-number) | `<propskit-number>` | Full-surface labeled number control |
 | [Propskit Position](#propskit-position) | `<propskit-position>` | Compact X/Y control |
 | [Propskit Joystick](#propskit-joystick) | `<propskit-joystick>` | Labeled two-axis joystick |
@@ -121,6 +122,7 @@ Minimal example:
 | [Propskit Point Radius](#propskit-point-radius) | `<propskit-point-radius>` | Collapsible position and radius group |
 | [Propskit Point Radius Angle](#propskit-point-radius-angle) | `<propskit-point-radius-angle>` | Collapsible position, radius, and angle group |
 | [Propskit Select](#propskit-select) | `<propskit-select>` | Full-surface labeled select control |
+| [Propskit Editable Select](#propskit-editable-select) | `<propskit-editable-select>` | Addable and renameable select control |
 | [Propskit Switch](#propskit-switch) | `<propskit-switch>` | Full-surface labeled switch control |
 | [Propskit Text](#propskit-text) | `<propskit-text>` | Full-surface labeled text control |
 | [Text Input](#text-input) | `<fig-input-text>` | Styled text/textarea input |
@@ -395,6 +397,11 @@ Shared surface variables are `--propskit-padding-block`,
 such as `--propskit-select-background` or
 `--propskit-number-input-inline-size`.
 
+Nested subfields use `--propskit-bg-subfield` and
+`--propskit-color-border-subfield`. Secondary `fig-button` controls inside any
+PropsKit component use the same borderless subfield background, including
+hover and disabled states.
+
 | Attribute | Type | Default | Description |
 |---|---|---|---|
 | `label` | string | `"Label"` | Field label text; use an empty value to hide it |
@@ -506,6 +513,46 @@ Uses a plain horizontal surface with a selection-only `<fig-input-palette>` prev
 
 ---
 
+#### Propskit Image
+
+`<propskit-image>`
+
+A vertical PropsKit surface with a label and permanent ghost upload button in
+the header. When images exist, it renders a two-column `fig-chooser`; every
+choice contains a square, cover-fit `fig-image` and an attachment-style remove
+control.
+
+`options` is an optional JSON array of image URLs. `.options` returns the
+normalized URL array, while `.value`, `defaultValue`, and event values are the
+selected URL string. An omitted or unmatched value falls back to the first
+image.
+
+Selecting files appends browser object URLs to `options` and selects the first
+new image. The component previews local files; applications remain responsible
+for uploading and replacing object URLs with durable URLs. Removing an image
+updates the reflected `options` array and revokes its object URL when needed.
+Removing the selected image falls back to the first remaining image and emits
+`input` and `change`; focused choices also support Delete and Backspace.
+
+**Attributes:** `label`, `name`, `value`, `default`, `options`, `disabled`,
+`variant="minimal"`
+
+**Events:** `input`, `change` — shared PropsKit envelope with the selected URL.
+
+**Methods and state:** `defaultValue`, `isDefault`, `resetToDefault()`, and
+focus delegation to the current choice or upload input.
+
+```html
+<propskit-image
+  label="Image"
+  name="image"
+  options='["/images/one.webp","/images/two.webp"]'
+  default="/images/one.webp"
+></propskit-image>
+```
+
+---
+
 #### Propskit Switch
 
 `<propskit-switch>`
@@ -554,6 +601,53 @@ Right-click and choose **Reset**, or call `resetToDefault()`, to restore `defaul
 
 ---
 
+#### Propskit Editable Select
+
+`<propskit-editable-select>`
+
+A compact, label-free, subtle `fig-select` aligned to the left at its intrinsic
+width inside one full-row PropsKit surface. Default-size secondary edit and add
+buttons sit on the right within the same row.
+Clicking anywhere on the host opens the select, except the edit and add actions.
+The options menu spans and aligns to the full PropsKit row.
+Edit replaces the select with a default-size, full-width `fig-input-text`; the
+checkmark, Enter, or moving focus outside the input saves, while Escape cancels.
+Add creates a choice with an `item-{index}` value using its zero-based array
+index and a `"New item"` label, selects it, and immediately
+opens rename mode. Every menu
+option includes an appended ghost trash action. Delete removes the item;
+keyboard users can press Delete or Backspace while its option is focused.
+Edit/save, add, and delete icon buttons include descriptive tooltips.
+
+`options` accepts the same comma, newline, and JSON formats as `fig-select`.
+`.options` returns normalized `{ value, label }[]` entries. Add, rename, and
+delete mutations reflect this normalized JSON back to `options`. Renaming
+changes only the label, preserving the stable selected value. Deleting the
+selected item falls forward to the next option, then backward at the end. With
+one item remaining, the select and trash action are disabled so the final item
+cannot be deleted; edit and add remain available.
+
+**Attributes:** `name`, `value`, `default`, `options`, `aria-label`, `disabled`
+
+**Events:** `input`, `change`, `optionhover` — the shared PropsKit envelope is
+extended to `{ control, name?, value, label }`. `value` is the stable option
+value and `label` is its current display label. Add, delete, and successful
+rename actions emit `input` and `change`.
+
+**Methods and state:** `.options`, `defaultValue`, `isDefault`, `editing`,
+`resetToDefault()`, and focus delegation.
+
+```html
+<propskit-editable-select
+  aria-label="Layer style"
+  name="style"
+  value="primary"
+  options='[{"value":"primary","label":"Primary"},{"value":"secondary","label":"Secondary"}]'
+></propskit-editable-select>
+```
+
+---
+
 #### Propskit Text
 
 `<propskit-text>`
@@ -895,6 +989,7 @@ The internal group always has `compact`. `value` uses the same `{ x, y, x2, y2 }
 | `value` | string | — | Input value |
 | `placeholder` | string | — | Placeholder text |
 | `type` | string | `"text"` | `"text"` or `"number"` |
+| `size` | string | — | Set to `"large"` for a 32px-tall input |
 | `disabled` | boolean | `false` | Disabled state |
 | `multiline` | boolean | `false` | Use textarea |
 | `min` | number | — | Min (number type) |
@@ -904,6 +999,7 @@ The internal group always has `compact`. `value` uses the same `{ x, y, x2, y2 }
 
 ```html
 <fig-input-text value="Hello" placeholder="Enter text..."></fig-input-text>
+<fig-input-text size="large" placeholder="Large input"></fig-input-text>
 <fig-input-text multiline placeholder="Enter description..."></fig-input-text>
 ```
 

package/components.css

@@ -363,6 +363,8 @@
   /* Icons - colorless shapes for use with mask-image */
   --icon-16-chevron: 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='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='grey' stroke-linecap='round'/%3E%3C/svg%3E%0A");
   --icon-24-chevron: 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.64645 10.1464C7.84171 9.95118 8.15829 9.95118 8.35355 10.1464L12 13.7929L15.6464 10.1464C15.8417 9.95118 16.1583 9.95118 16.3536 10.1464C16.5488 10.3417 16.5488 10.6583 16.3536 10.8536L12.3536 14.8536C12.1583 15.0488 11.8417 15.0488 11.6464 14.8536L7.64645 10.8536C7.45118 10.6583 7.45118 10.3417 7.64645 10.1464Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
+  --icon-24-checkmark: 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='M15.584 7.72241C15.7372 7.49272 16.0476 7.4306 16.2773 7.58374C16.5071 7.73691 16.5691 8.04735 16.416 8.2771L11.416 15.7771C11.3329 15.9017 11.1979 15.983 11.0488 15.9978C10.8999 16.0124 10.7523 15.9591 10.6465 15.8533L7.64648 12.8533C7.45126 12.658 7.45125 12.3415 7.64648 12.1462C7.84174 11.9511 8.15827 11.951 8.35352 12.1462L10.9219 14.7146L15.584 7.72241Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
+
   --icon-16-checkmark: 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.5839 3.72266C11.7371 3.49298 12.0476 3.43085 12.2773 3.58399C12.5069 3.73716 12.569 4.04762 12.416 4.27735L7.41596 11.7773C7.33289 11.9019 7.19778 11.9833 7.04877 11.998C6.8999 12.0126 6.75223 11.9593 6.64642 11.8535L3.64642 8.85352C3.4512 8.65826 3.45119 8.34174 3.64642 8.14649C3.84169 7.95133 4.15822 7.95128 4.35346 8.14649L6.92182 10.7148L11.5839 3.72266Z' fill='white'/%3E%3C/svg%3E");
   --icon-16-reset: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' fill-rule='evenodd' d='M6.354 2.146a.5.5 0 0 1 0 .708L5.207 4H8.5a5 5 0 1 1-5 5 .5.5 0 0 1 1 0 4 4 0 1 0 4-4H5.207l1.147 1.146a.5.5 0 1 1-.708.708l-2-2a.5.5 0 0 1 0-.708l2-2a.5.5 0 0 1 .708 0' clip-rule='evenodd'/%3E%3C/svg%3E");
   --icon-24-reset: 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='M8.22473 5.08203C8.41872 4.9541 8.68285 4.97586 8.85364 5.14648C9.0244 5.31725 9.046 5.58134 8.91809 5.77539L8.85364 5.85352L7.70715 7H12.0001C15.3136 7.00005 17.9999 9.68652 18.0001 13C18.0001 16.3137 15.3138 19 12.0001 19C8.68641 19 6.00012 16.3137 6.00012 13C6.00036 12.7241 6.22413 12.5 6.50012 12.5C6.77608 12.5 6.99989 12.7241 7.00012 13C7.00012 15.7614 9.2387 18 12.0001 18C14.7615 18 17.0001 15.7614 17.0001 13C16.9999 10.2388 14.7614 8.00005 12.0001 8H7.70715L8.85364 9.14648L8.91809 9.22461C9.04619 9.41859 9.02426 9.68264 8.85364 9.85352C8.68277 10.0244 8.41881 10.0461 8.22473 9.91797L8.14661 9.85352L6.14661 7.85352C5.95152 7.65824 5.9514 7.34169 6.14661 7.14648L8.14661 5.14648L8.22473 5.08203Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
@@ -1396,7 +1398,7 @@ fig-avatar,
     content: attr(initials);
     font-size: var(--body-medium-fontSize);
   }
-  &[size="large"] {
+  &:where(fig-input-text)[size="large"] {
     --size: 3rem;
   }
 }
@@ -1929,7 +1931,8 @@ fig-easing-curve {
   .fig-easing-curve-svg-container {
     border-radius: var(--radius-medium);
     background: var(--figma-color-bg-secondary);
-    padding: 45px;
+    padding: var(--spacer-4);
+    aspect-ratio: var(--aspect-ratio);
     overflow: hidden;
     &:is(:hover, :active, :focus, :focus-visible, :focus-within) {
       overflow: visible;
@@ -3807,6 +3810,12 @@ fig-input-number {
     flex: 1;
     width: 100%;
   }
+  &:where(fig-input-text)[size="large"] {
+    & > input,
+    & > textarea {
+      padding: var(--spacer-2);
+    }
+  }
   &[multiline]:not([multiline="false"]) {
     display: flex;
     width: 100%;
@@ -3845,12 +3854,20 @@ fig-input-number {
     order: 0;
     padding-right: 0;
     margin-right: calc(var(--spacer-2) * -1);
+    &[size="large"] {
+      height: var(--spacer-6);
+      min-width: var(--spacer-6);
+    }
   }
 
   & [slot="append"] {
     order: 2;
     padding-left: 0;
     margin-left: calc(var(--spacer-2) * -1);
+    &[size="large"] {
+      height: var(--spacer-5);
+      min-width: var(--spacer-5);
+    }
   }
 
   &[type="search"]:not([data-search-has-value]) [data-generated="search-clear"] {
@@ -5025,12 +5042,12 @@ fig-icon {
   height: var(--size);
   background: currentColor;
   mask-image: var(--icon);
-  mask-size: contain;
+  mask-size: auto;
   mask-repeat: no-repeat;
   mask-position: center;
   flex-shrink: 0;
   -webkit-mask-image: var(--icon);
-  -webkit-mask-size: contain;
+  -webkit-mask-size: auto;
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-position: center;
 
@@ -5405,7 +5422,7 @@ fig-card {
 }
 
 fig-choice {
-  --fig-choice-selection-ring-width: 1px;
+  --fig-choice-selection-ring-width: 2px;
   --fig-choice-padding: 0px;
   --fig-choice-text-padding-inline: var(--spacer-2);
   --fig-choice-border-radius: var(--radius-medium);
@@ -5428,7 +5445,6 @@ fig-choice {
     padding-inline: var(--fig-choice-text-padding-inline);
   }
 
-
   &:hover:not([selected]:not([selected="false"])):not([disabled]:not([disabled="false"])):not([aria-disabled="true"]) {
     background-color: var(--figma-color-bg-secondary);
   }