@rogieking/figui3 11.5.0 → 11.6.1

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

@@ -3,7 +3,7 @@ name: fig-editor
 description: >-
   Guides FigUI3 editor bundle (`fig-editor.js` / `fig-editor.css`): fig-select,
   fig-select-options, fig-select-option, fig-property, fig-input-point,
-  fig-fill-picker, fig-palette-editor, fig-reorder, and fig-interpolation-swatch,
+  fig-fill-picker, fig-palette-editor, fig-gradient-editor, fig-reorder, and fig-interpolation-swatch,
   including React JSX usage. Use when building custom selects, grouped option lists,
   sticky separators, ghost selects, composable property rows, fill picker dialogs,
   reorderable lists, or interpolation swatches.
@@ -40,6 +40,7 @@ Registered tags:
 | `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-gradient-editor` | Full gradient editor with reorderable stops |
 | `fig-reorder` | Pointer- and keyboard-reorderable direct-child list |
 | `fig-interpolation-swatch` | Gradient interpolation preview swatch |
 

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

@@ -113,6 +113,17 @@ Generated accessories:
 </fig-property>
 ```
 
+Authored trailing accessory (`/figui3#property/custom-accessory`):
+
+```html
+<fig-property label="Opacity" show-trailing>
+  <fig-slider slot="input" value="75" min="0" max="100" units="%" text="true" full></fig-slider>
+  <fig-button slot="trailing" variant="ghost" icon aria-label="Reset opacity">
+    <fig-icon name="reset"></fig-icon>
+  </fig-button>
+</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.
@@ -121,6 +132,25 @@ Generated accessories:
 - Generated trailing controls emit bubbling, composed `remove`, `add`, or `bind` events with the slotted control in `detail.input`.
 - Child input events bubble unchanged.
 
+## `fig-popup-easing`
+
+Reusable easing dialog with an internal
+`<fig-easing-curve aspect-ratio="4/3">`.
+
+```html
+<fig-button id="easing-trigger">Edit easing</fig-button>
+<dialog
+  is="fig-popup-easing"
+  anchor="#easing-trigger"
+  value="0.42, 0, 0.58, 1"
+  open
+></dialog>
+```
+
+- Attrs: `value`, `mode`, `precision`, `edit`, `presets`, `text`, plus inherited `fig-popup` attributes.
+- Events: bubbling `input` / `change` forwarded from the easing curve.
+- Create it as `<dialog is="fig-popup-easing">`, not `<fig-popup-easing>`.
+
 ## `fig-palette-editor`
 
 Reusable ordered palette editor used by `fig-input-palette edit="picker"`.
@@ -138,6 +168,63 @@ Reusable ordered palette editor used by `fig-input-palette edit="picker"`.
 - Events: `input` / `change` with the normalized ordered color array in `detail`
 - Uses `fig-reorder` for pointer and keyboard reordering.
 
+## `fig-gradient-editor`
+
+Reusable full gradient editor used by the Gradient tab in `fig-fill-picker`.
+
+```tsx
+<fig-gradient-editor
+  value='{"type":"linear","angle":90,"stops":[{"position":0,"color":"#0D99FF","opacity":100},{"position":100,"color":"#9747FF","opacity":100}]}'
+  onInput={onInput}
+  onChange={onChange}
+/>
+```
+
+- Attrs: `value`, `color-space` (`srgb` | `display-p3`), `disabled`.
+- Property: `value` is the normalized gradient config; `cssValue` is the rendered CSS gradient.
+- Property: `pickerAnchor` accepts an element used to anchor nested stop color pickers.
+- Events: `input` / `change` with `{ type: "gradient", gradient, css }`.
+- Includes type, flip/rotate, stop bar, add/remove, and pointer/keyboard reorder controls.
+
+## `fig-popup-gradient`
+
+Reusable popup containing one `fig-gradient-editor`. It is the picker opened by
+`fig-input-gradient edit="picker"`.
+
+```html
+<fig-button id="gradient-trigger">Edit gradient</fig-button>
+<dialog
+  is="fig-popup-gradient"
+  anchor="#gradient-trigger"
+  value='{"type":"linear","angle":90,"stops":[{"position":0,"color":"#0D99FF","opacity":100},{"position":100,"color":"#9747FF","opacity":100}]}'
+  open
+></dialog>
+```
+
+- Attrs: `value`, `color-space`, `disabled`, plus inherited `fig-popup` attributes.
+- Events: bubbling `input` / `change` with `{ type: "gradient", gradient, css }`.
+- Create it as `<dialog is="fig-popup-gradient">`.
+
+## `fig-popup-palette`
+
+Reusable palette dialog used by `fig-input-palette edit="picker"`. It extends
+`fig-popup` and owns its `fig-palette-editor`.
+
+```html
+<fig-button id="palette-trigger">Edit palette</fig-button>
+<dialog
+  is="fig-popup-palette"
+  anchor="#palette-trigger"
+  value='["#94BD00","#83AD00","#1A632A","#003905"]'
+  open
+></dialog>
+```
+
+- Attrs: `value`, `min`, `max`, `fixed`, `disabled`, plus inherited `fig-popup` attributes.
+- Property: `value` returns the normalized `{ color, alpha }[]`.
+- Events: bubbling `input` / `change` with the normalized color array in `detail`.
+- Create it as `<dialog is="fig-popup-palette">`, not `<fig-popup-palette>`.
+
 ## `fig-reorder`
 
 ```tsx

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

@@ -60,6 +60,15 @@ Events: `input`, `change`, `optionhover`, `optionfocus`.
 - Generated trailing events bubble across shadow roots with `detail: { input }`.
 - Child control events are not normalized or re-emitted.
 
+## Easing popup
+
+`dialog[is="fig-popup-easing"]` extends `fig-popup` and owns a
+`fig-easing-curve` with `aspect-ratio="4/3"`.
+
+- Observes and forwards `value`, `mode`, `precision`, `edit`, `presets`, and `text`.
+- Forwards bubbling `input` / `change` events and reflects the current easing value.
+- Defaults: `position="bottom left"`, `offset="0 8"`, `viewport-margin="8"`, and `popover="manual"`.
+
 ## Reorder
 
 `fig-reorder` observes `axis`, `handle`, `items`, `indicator`, and `disabled`.
@@ -78,6 +87,34 @@ Events: `input`, `change`, `optionhover`, `optionfocus`.
 - `value` property and `input` / `change` event `detail`: normalized ordered `{ color, alpha }[]`
 - Rows are direct `fig-reorder` items and support pointer or keyboard reordering.
 
+## Gradient editor
+
+`fig-gradient-editor` observes `value`, `color-space`, and `disabled`.
+
+- `value` accepts a gradient config or `{ type: "gradient", gradient }` and returns a normalized gradient config.
+- `cssValue` returns the current CSS gradient.
+- `pickerAnchor` anchors nested stop color pickers.
+- Bubbling `input` / `change` detail is `{ type: "gradient", gradient, css }`.
+- Interpolation remains locked to sRGB to match the fill picker’s current behavior.
+
+## Gradient popup
+
+`dialog[is="fig-popup-gradient"]` extends `fig-popup`, owns a
+`fig-gradient-editor`, and observes `value`, `color-space`, and `disabled`.
+
+- Defaults: `position="bottom left"`, `offset="0 8"`, `viewport-margin="8"`, and `popover="manual"`.
+- Bubbling `input` / `change` detail is `{ type: "gradient", gradient, css }`.
+
+## Palette popup
+
+`dialog[is="fig-popup-palette"]` extends `fig-popup`, owns a
+`fig-palette-editor`, and observes `value`, `min`, `max`, `fixed`, and
+`disabled` in addition to inherited popup attributes.
+
+- `value` property and bubbling `input` / `change` detail are normalized `{ color, alpha }[]`.
+- Defaults: `position="bottom left"`, `offset="0 8"`, `viewport-margin="8"`, and `popover="manual"`.
+- Import through `fig-editor.js`; create it with `document.createElement("dialog", { is: "fig-popup-palette" })` or matching HTML.
+
 ## Fill picker modes
 
 Built-in: `solid`, `gradient`, `image`, `video`, `webcam`.

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

@@ -170,7 +170,7 @@ Handlers below assume `onInput` / `onChange` / `onClick` from [react.md](react.m
 
 - Attrs: `preview`, `label`, `accepts`, `multiple`, `disabled`, `variant` (forwards `fig-button` variants; defaults to `property`)
 - Blank or omitted `label` defaults to `Upload audio`, `Upload image`, or `Upload file` based on the known file type. An explicit label overrides it.
-- `preview` renders supported image extensions in a full-width checkerboard `fig-image` at `4/3`, or turns known audio files into play/pause buttons with a waveform and filename tooltip.
+- For known audio files, `preview` shows the audio icon and filename at rest, reveals play and waveform controls on hover/focus, and keeps pause plus waveform visible while playing.
 - `accepts` controls the native chooser filter; file icons and previews are detected independently.
 - Events: `change` / `input` with files on the host
 
@@ -321,6 +321,7 @@ Handlers below assume `onInput` / `onChange` / `onClick` from [react.md](react.m
 ```
 
 - Attrs: `value`, `edit`, `mode` (`handle` | `tip`), `disabled`
+- `edit="picker"` opens `dialog[is="fig-popup-gradient"]` when `fig-editor.js` is loaded.
 
 ### `fig-swatch`
 
@@ -713,6 +714,10 @@ toastRef.current?.showToast();
 Set `mode="bezier"` or `mode="spring"` to constrain the editor and preset list
 to one curve type.
 
+With `edit="false"`, the compact preset control opens `fig-popup-easing` when
+`fig-editor.js` is loaded; without the editor bundle it retains the preset
+dropdown fallback.
+
 ### `fig-3d-rotate`
 
 ```tsx

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

@@ -83,6 +83,7 @@ type FigTag =
   | "fig-input-point"
   | "fig-input-palette"
   | "fig-palette-editor"
+  | "fig-gradient-editor"
   | "fig-property"
   | "fig-input-text"
   | "fig-input-wheel"

package/CHANGELOG.md

@@ -2,6 +2,34 @@
 
 All notable changes to this project will be documented in this file.
 
+## [11.6.1]
+
+### Changed
+
+- Refined color tips with the tooltip surface color and inset highlight in dark mode.
+
+### Fixed
+
+- Kept recursively nested and portaled popups open while interacting with their owning popup chain.
+- Ensured gradient editors keep only one color-stop handle selected at a time.
+
+## [11.6.0]
+
+### Added
+
+- Added reusable `fig-gradient-editor`, `fig-popup-gradient`, `fig-popup-palette`, and `fig-popup-easing` editor components.
+- Added package source files, playground examples, tests, manifests, typings, and skill documentation for the new editor components.
+
+### Changed
+
+- Rebuilt the fill picker’s gradient tab with `fig-gradient-editor`.
+- Routed gradient, palette, and compact easing picker modes through their dedicated reusable popups.
+- Refined audio file previews to show the filename at rest, waveform controls on hover, and persistent playback state with focus styling.
+
+### Fixed
+
+- Kept gradient and easing popup values, trigger previews, and selected preset labels synchronized while editing.
+
 ## [11.5.0]
 
 ### Added

package/README.md

@@ -117,6 +117,9 @@ Minimal example:
 | [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 |
+| [Gradient Editor](#gradient-editor) | `<fig-gradient-editor>` | Full gradient editor with reorderable stops |
+| [Gradient Popup](#gradient-popup) | `<dialog is="fig-popup-gradient">` | Reusable full gradient editor popup |
+| [Palette Popup](#palette-popup) | `<dialog is="fig-popup-palette">` | Reusable palette editor popup |
 | [Reorder](#reorder) | `<fig-reorder>` | Pointer- and keyboard-reorderable list |
 | [Gradient Input](#gradient-input) | `<fig-input-gradient>` | Gradient editor with stops |
 | [Fill Input](#fill-input) | `<fig-input-fill>` | Solid, gradient, image, video fill |
@@ -130,6 +133,7 @@ Minimal example:
 | [Joystick](#joystick) | `<fig-joystick>` | 2D position input |
 | [Origin Grid](#origin-grid) | `<fig-origin-grid>` | Transform-origin grid |
 | [Easing Curve](#easing-curve) | `<fig-easing-curve>` | Bezier/spring curve editor |
+| [Easing Popup](#easing-popup) | `<dialog is="fig-popup-easing">` | Reusable easing editor popup |
 | [3D Rotate](#3d-rotate) | `<fig-3d-rotate>` | 3D cube rotation control |
 | [Handle](#handle) | `<fig-handle>` | Draggable handle on a surface |
 | [Canvas Control](#canvas-control) | `<fig-canvas-control>` | Point with optional radius, angle, or second point |
@@ -546,7 +550,7 @@ Requires `fig-editor.js` and `fig-editor.css`.
 | `disabled` | boolean | `false` | Disabled state |
 | `variant` | string | `"property"` | Internal button variant |
 
-Known image and audio files use media-specific icons; unmatched files retain the upload icon. A present or `"true"` `preview` uses the compact image swatch, audio waveform playback, or video icon. `preview="large"` renders known images and videos as upload-enabled `fig-image` or `fig-video` previews; audio and other formats retain their compact preview behavior. `preview="false"` disables previews. Image preview supports `.png`, `.jpg`, `.jpeg`, `.gif`, `.webp`, `.svg`, and `.avif`; audio playback supports `.mp3`, `.wav`, `.aac`, `.m4a`, `.ogg`, and `.flac`; video detection supports common formats including `.mp4`, `.webm`, `.mov`, `.m4v`, `.avi`, `.mkv`, `.ogv`, `.mpeg`, `.mpg`, and `.3gp`.
+Known image and audio files use media-specific icons; unmatched files retain the upload icon. A present or `"true"` `preview` uses the compact image swatch, audio playback preview, or video icon. Audio previews show the audio icon and filename at rest, reveal play and waveform controls on hover or focus, and keep the pause control and waveform visible while playing. `preview="large"` renders known images and videos as upload-enabled `fig-image` or `fig-video` previews; audio and other formats retain their compact preview behavior. `preview="false"` disables previews. Image preview supports `.png`, `.jpg`, `.jpeg`, `.gif`, `.webp`, `.svg`, and `.avif`; audio playback supports `.mp3`, `.wav`, `.aac`, `.m4a`, `.ogg`, and `.flac`; video detection supports common formats including `.mp4`, `.webm`, `.mov`, `.m4v`, `.avi`, `.mkv`, `.ogv`, `.mpeg`, `.mpg`, and `.3gp`.
 
 ```html
 <fig-input-file accepts="image/*"></fig-input-file>
@@ -731,6 +735,61 @@ A reusable editor-bundle component for ordered color arrays. It uses `<fig-reord
 <fig-palette-editor value='["#94BD00","#83AD00","#1A632A","#003905"]'></fig-palette-editor>
 ```
 
+#### Gradient Editor
+
+`<fig-gradient-editor>`
+
+A reusable editor-bundle component for gradient type, direction, stop handles,
+and reorderable stop rows. It supports `value`, `color-space`, and `disabled`;
+its `value` property is the normalized gradient config. Bubbling `input` and
+`change` events include `{ type, gradient, css }`.
+
+```html
+<fig-gradient-editor
+  value='{"type":"linear","angle":90,"stops":[{"position":0,"color":"#0D99FF","opacity":100},{"position":100,"color":"#9747FF","opacity":100}]}'
+></fig-gradient-editor>
+```
+
+`fig-fill-picker` uses this component for its Gradient tab.
+
+#### Gradient Popup
+
+`<dialog is="fig-popup-gradient">`
+
+A reusable `fig-popup` subclass that owns a `<fig-gradient-editor>`. It
+supports `value`, `color-space`, and `disabled`, plus inherited popup
+positioning. Its bubbling `input` and `change` events include
+`{ type, gradient, css }`.
+
+```html
+<fig-button id="gradient-trigger">Edit gradient</fig-button>
+<dialog
+  is="fig-popup-gradient"
+  anchor="#gradient-trigger"
+  value='{"type":"linear","angle":90,"stops":[{"position":0,"color":"#0D99FF","opacity":100},{"position":100,"color":"#9747FF","opacity":100}]}'
+  open
+></dialog>
+```
+
+#### Palette Popup
+
+`<dialog is="fig-popup-palette">`
+
+A reusable `fig-popup` subclass that owns a `<fig-palette-editor>`. It supports
+`value`, `min`, `max`, `fixed`, and `disabled`, plus the standard popup
+positioning attributes. Its `value` property and bubbling `input` / `change`
+events use normalized `{ color, alpha }[]` values.
+
+```html
+<fig-button id="palette-trigger">Edit palette</fig-button>
+<dialog
+  is="fig-popup-palette"
+  anchor="#palette-trigger"
+  value='["#94BD00","#83AD00","#1A632A","#003905"]'
+  open
+></dialog>
+```
+
 #### Reorder
 
 `<fig-reorder>`
@@ -752,7 +811,7 @@ Attributes: `axis`, `handle`, `items`, `indicator`, and `disabled`. The bubbling
 
 `<fig-input-gradient>`
 
-A gradient editor with draggable stops. With `edit="picker"` and the optional picker registered, it opens `<fig-fill-picker>` locked to gradient mode; otherwise it falls back to inline stop editing.
+A gradient editor with draggable stops. With `edit="picker"` and the editor bundle registered, it opens the reusable `dialog[is="fig-popup-gradient"]`; otherwise it renders the gradient swatch without opening a picker.
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
@@ -1058,7 +1117,7 @@ An interactive bezier or spring easing curve editor with a preset dropdown and m
 | `mode` | string | — | Optional `"bezier"` or `"spring"` constraint; filters presets and rejects the other value type |
 | `precision` | number | `2` | Decimal places |
 | `aspect-ratio` | string | — | Editor aspect ratio |
-| `edit` | boolean | `true` | Show the editor and custom bezier/spring options; set to `"false"` for preset-only |
+| `edit` | boolean | `true` | Show the inline editor; `"false"` uses the compact preset control and opens `fig-popup-easing` when `fig-editor.js` is loaded |
 | `presets` | boolean | `true` | Show the preset selector; set to `"false"` to hide it |
 | `text` | boolean | `true` | Show the bezier value or normalized spring bounce input; set to `"false"` to hide it |
 
@@ -1107,6 +1166,24 @@ In spring mode, the compact number input edits normalized bounce from `0` (criti
 
 Editable bezier and spring handles are keyboard operable. Bezier handles keep tab order aligned with the visual handle order.
 
+#### Easing Popup
+
+`<dialog is="fig-popup-easing">`
+
+A reusable `fig-popup` subclass containing a
+`<fig-easing-curve aspect-ratio="4/3">`. Easing attributes and events are
+forwarded through the popup.
+
+```html
+<fig-button id="easing-trigger">Edit easing</fig-button>
+<dialog
+  is="fig-popup-easing"
+  anchor="#easing-trigger"
+  value="0.42, 0, 0.58, 1"
+  open
+></dialog>
+```
+
 ---
 
 #### 3D Rotate
@@ -1431,7 +1508,10 @@ An anchored floating surface built on `<dialog>` with collision-aware positionin
 </dialog>
 ```
 
-Popups restore focus on close. Escape dismissal is scoped so nested menu and overlay behavior can keep its own keyboard handling.
+Popups restore focus on close. Escape dismissal is scoped so nested menu and
+overlay behavior can keep its own keyboard handling. Anchored popups may be
+rendered in the global overlay root; interacting with a child popup keeps every
+owning ancestor popup open, including recursively nested chains.
 
 ---
 

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-24-audio: 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='M14.6656 6.26416C15.3163 6.0337 15.9993 6.51735 15.9996 7.20752V13.9995C15.9996 14.0271 15.9951 14.0542 15.9908 14.0806C16.0105 14.4275 15.8783 14.7588 15.6842 15.0229C15.4249 15.3758 15.0243 15.6647 14.5553 15.8354C14.0864 16.006 13.5949 16.0416 13.1696 15.938C12.7483 15.8354 12.3322 15.5752 12.1627 15.1099C11.9933 14.6444 12.1442 14.1771 12.401 13.8276C12.6603 13.4748 13.0609 13.1868 13.5299 13.0161C13.9989 12.8455 14.4903 12.809 14.9156 12.9126C14.9438 12.9195 14.9716 12.9287 14.9996 12.937V9.58154L9.99963 11.353V15.7495C9.99963 15.7513 9.99868 15.7536 9.99866 15.7554C9.99828 16.073 9.87635 16.3744 9.69885 16.6196C9.44355 16.9721 9.04803 17.26 8.58362 17.4292C8.11893 17.5983 7.62996 17.6327 7.20764 17.5269C6.78881 17.4217 6.37881 17.1587 6.21057 16.6968C6.04238 16.2347 6.18775 15.7693 6.44104 15.4194C6.69651 15.067 7.09269 14.7789 7.55725 14.6099C8.02183 14.4409 8.51007 14.4073 8.93225 14.5132C8.95486 14.5189 8.97711 14.5261 8.99963 14.5327V8.97803C9.00002 8.55491 9.26679 8.17702 9.66565 8.03564L14.6656 6.26416ZM8.68811 15.4829C8.48414 15.4318 8.201 15.4405 7.89905 15.5503C7.59687 15.6603 7.37402 15.836 7.25061 16.0063C7.12544 16.1792 7.13042 16.2972 7.151 16.354C7.17165 16.4107 7.24354 16.5051 7.45081 16.5571C7.65482 16.6083 7.93868 16.5996 8.24084 16.4897C8.54293 16.3797 8.7659 16.204 8.88928 16.0337C9.01464 15.8606 9.00954 15.7418 8.98889 15.6851C8.96813 15.6283 8.89516 15.5349 8.68811 15.4829ZM14.6793 13.8843C14.4709 13.8335 14.181 13.843 13.8717 13.9556C13.5624 14.0682 13.3338 14.2465 13.2067 14.4194C13.0773 14.5954 13.0838 14.7134 13.1031 14.7671C13.1226 14.8206 13.1934 14.9155 13.4059 14.9673C13.6144 15.0181 13.9041 15.0076 14.2135 14.895C14.5229 14.7824 14.7515 14.6041 14.8785 14.4312C15.008 14.2549 15.0015 14.137 14.9821 14.0835C14.9626 14.03 14.8916 13.9361 14.6793 13.8843ZM9.99963 8.97803V10.2915L14.9996 8.52002V7.20752L9.99963 8.97803Z' fill='black'/%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");
 
@@ -1824,6 +1825,16 @@ fig-input-file {
   .fig-input-file-filename:has(> .fig-input-file-audio-waveform) {
     column-gap: var(--spacer-1);
     overflow: hidden;
+
+    &:is(:focus, :focus-within) {
+      outline: var(--figma-focus-outline);
+      outline-offset: var(--figma-focus-outline-offset);
+    }
+  }
+
+  .fig-input-file-audio-control,
+  .fig-input-file-audio-waveform {
+    display: none;
   }
 
   .fig-input-file-audio-waveform {
@@ -1837,6 +1848,22 @@ fig-input-file {
     }
   }
 
+  &:is(:hover, :focus-within, [data-audio-playing])
+    .fig-input-file-filename {
+    > .fig-input-file-audio-icon,
+    > .fig-input-file-audio-label {
+      display: none;
+    }
+
+    > .fig-input-file-audio-control {
+      display: inline-flex;
+    }
+
+    > .fig-input-file-audio-waveform {
+      display: block;
+    }
+  }
+
   .fig-input-file-filename[selected]:not([selected="false"])
     > .fig-input-file-audio-waveform {
     --fig-audio-waveform-stroke-color: var(
@@ -7237,8 +7264,10 @@ fig-color-tip {
   height: var(--size);
   aspect-ratio: 1 / 1;
   flex-shrink: 0;
-  background-color: var(--figma-color-bg);
+  background-color: light-dark(var(--figma-color-bg), var(--bg-tooltip));
   border-radius: var(--radius-medium, 0.3125rem);
+  box-shadow: inset 0 0.5px 0 0
+    light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.1));
   filter: var(--fig-popover-shadow);
 
   &[control="add"],