@rogieking/figui3 9.2.3 → 9.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md ADDED
@@ -0,0 +1,3951 @@
1
+ # Changelog
2
+
3
+ All notable changes to this project will be documented in this file.
4
+
5
+ ## [9.4.0]
6
+
7
+ ### Added
8
+
9
+ - Added `fig-toolbelt`, `fig-toolbelt-group`, and `fig-toolbelt-item`: a selectable horizontal or vertical toolbar with grouped separators, roving keyboard navigation, overflow fades, and optional paging buttons.
10
+ - Added experimental Lab `fig-input-audio` for single-audio uploads with a responsive waveform preview.
11
+ - Added `items` selector support to `fig-reorder` so only matching children are reorderable.
12
+ - Added playground examples and skill docs for toolbelt, audio input, and reorder items.
13
+
14
+ ### Changed
15
+
16
+ - Removed the unused `typescript` peer dependency so installs no longer require `--legacy-peer-deps`.
17
+ - `CHANGELOG.md` now ships in the npm package.
18
+ - Lab playground navigation adds an Inputs group and merges same-named nav groups.
19
+
20
+ ## [9.3.0]
21
+
22
+ ### Changed
23
+
24
+ - Merged all PropsKit examples into the FigUI3 playground with redirects for old `/propskit` routes; Lab now lives at `/lab`.
25
+ - Reorganized playground navigation into focused groups and ordered inputs from common to specialized controls.
26
+ - `fig-reorder` uses the secondary background color for the actively dragged item.
27
+ - Refined migrated examples with clearer names, full-width input fields, and simpler dialog content.
28
+
29
+ ### Fixed
30
+
31
+ - Prevented `fig-property-button` from receiving generic leading-SVG padding.
32
+
33
+ ## [9.2.3]
34
+
35
+ ### Fixed
36
+
37
+ - Secondary button and input combos keep one outer border and divider when controls are wrapped in `fig-tooltip`.
38
+
39
+ ### Changed
40
+
41
+ - FigUI3 playground Input Combo Fields example uses `fig-input-combo full`.
42
+
43
+ ## [9.2.2]
44
+
45
+ ### Added
46
+
47
+ - Added authored `slot="prepend"` icon support to `fig-property-button`, taking precedence over its generated `icon`.
48
+
49
+ ## [9.2.1]
50
+
51
+ ### Changed
52
+
53
+ - Made all-secondary button and input combos share one outer border and a non-overlapping internal divider.
54
+ - Added `full` width support to button and input combo wrappers.
55
+ - Added FigUI3 playground examples for `fig-input-combo` fields and property actions.
56
+
57
+ ## [9.2.0]
58
+
59
+ ### Added
60
+
61
+ - `fig-stack` layout element with `direction="horizontal|vertical|grid"`, token-aware `gap`, `align`, `justify`, `wrap`, `full`, and grid `columns` / `min-width`.
62
+ - `fig-property-button`, a full-width secondary trigger with an explicit generated icon, selected/disabled states, and popup ARIA forwarding.
63
+
64
+ ### Changed
65
+
66
+ - Deprecated `hstack` / `vstack`; they remain as styling aliases of `fig-stack`. Playground and tests now use `fig-stack`.
67
+ - Changed the default `fig-popup` radius from large to medium.
68
+
69
+ ## [9.1.6]
70
+
71
+ ### Fixed
72
+
73
+ - Restored the brand icon color on out-of-bounds `fig-origin-grid` handles.
74
+
75
+ ## [9.1.5]
76
+
77
+ ### Changed
78
+
79
+ - Made `fig-angle` sweeps originate from `default`, preserve signed complete turns, and retain the endpoint arrowhead across all angle units.
80
+ - Made `rotations` display the modulo angle with a signed full-turn counter while preserving the authored value during edits.
81
+
82
+ ### Fixed
83
+
84
+ - Kept multi-digit `fig-angle` rotation counts such as `×8` visible in the number input append slot.
85
+
86
+ ## [9.1.4]
87
+
88
+ ### Fixed
89
+
90
+ - Restored the inset outline on color handles with a valid outline value and offset.
91
+
92
+ ## [9.1.3]
93
+
94
+ ### Changed
95
+
96
+ - Refined menu-item padding, icon spacing, and prepend-slot alignment.
97
+ - Aligned menu separator labels and rules with menu-item content.
98
+ - Updated the icon Menu example to use full-size prepend icons.
99
+
100
+ ## [9.1.2]
101
+
102
+ ### Added
103
+
104
+ - Added a Menu playground example with icon-leading actions.
105
+
106
+ ### Changed
107
+
108
+ - Scoped secondary `fig-header` text styling to direct `span` and `label` children.
109
+
110
+ ## [9.1.1]
111
+
112
+ ### Changed
113
+
114
+ - Added live value tooltips to Bézier and spring easing handles, labeled Bézier handles as Start and End, and allowed spring duration to reach 100%.
115
+ - Matched easing-curve handle interiors to the secondary background token.
116
+
117
+ ### Fixed
118
+
119
+ - Kept the spring bounce handle on the first overshoot peak at full bounce.
120
+ - Kept the fill-picker saturation and brightness handle above the preview edge highlight.
121
+ - Removed padding from empty `fig-content` containers.
122
+
123
+ ## [9.1.0]
124
+
125
+ ### Added
126
+
127
+ - Added `variant="ghost"` to `fig-input-number` for a borderless control with secondary hover/focus fill.
128
+ - Added a `tabular` presence attribute to `fig-input-number` that applies Inter tabular numerals (`font-variant-numeric: tabular-nums`).
129
+ - Added core `fig-angle`, replacing the experimental Lab `fig-input-angle` with an instrument-style dial, unit conversion, unbounded winding, reset control, keyboard/scrub input, and reusable rotation icon.
130
+ - Added tertiary dot grids to easing preset icons.
131
+ - Added marked custom fill-picker swatches via `data-fig-fill-picker-swatch`, including solid, gradient, image, video, and webcam previews.
132
+ - Added extra-large and full radius tokens.
133
+
134
+ ### Changed
135
+
136
+ - Updated semantic UI3 colors, strong heading weight, and elevation contrast.
137
+ - `fig-angle` now always shows a centered ghost number input, uses a default degree step of `1`, and supports `deg`, `°`, `rad`, `turn`, and `grad`.
138
+
139
+ ## [9.0.14]
140
+
141
+ ### Fixed
142
+
143
+ - Restored `fig-ai-context` tucking under a following `fig-ai-prompt` so the composer stacks as one surface.
144
+
145
+ ## [9.0.13]
146
+
147
+ ### Fixed
148
+
149
+ - Corrected `fig-select` `menuAnchor` sizing and alignment, including selected-row overlay geometry, small anchors, viewport clamping, live anchor changes, and all explicit `position` values.
150
+
151
+ ## [9.0.12]
152
+
153
+ ### Added
154
+
155
+ - Added `menu-anchor` / `menuAnchor` on `fig-select` so the open menu can align against another element.
156
+
157
+ ### Fixed
158
+
159
+ - Honored `fig-select` `position` for popup placement instead of always overlaying the selected option on the trigger.
160
+ - Kept `fig-select` menus inside the viewport by capping listbox height and clamping after overlay alignment.
161
+ - Prevented `fig-popup` clamping from pushing oversized menus past the viewport start edge.
162
+
163
+ ## [9.0.11]
164
+
165
+ ### Changed
166
+
167
+ - Applied playground overflow fading to the sidebar’s inner scroll content so its border remains visible.
168
+
169
+ ### Fixed
170
+
171
+ - Prevented native image dragging from overriding `fig-chooser` drag-to-scroll behavior.
172
+
173
+ ## [9.0.10]
174
+
175
+ ### Added
176
+
177
+ - Added an `optionfocus` event to `fig-select` for previewing keyboard-focused options without changing selection, including playground event output and documentation.
178
+
179
+ ## [9.0.9]
180
+
181
+ ### Changed
182
+
183
+ - Refined the gradient fill picker with a semantic Stops heading, compact header padding, and a ghost gradient-type select.
184
+ - Added a selection-ring gutter to `fig-chooser` while preserving choice alignment and overflow navigation geometry.
185
+
186
+ ### Fixed
187
+
188
+ - Prevented pointer-dragged gradient stop handles from displaying keyboard focus outlines.
189
+ - Prevented selected `fig-choice` rings from being clipped by scrollable choosers.
190
+
191
+ ## [9.0.8]
192
+
193
+ ### Added
194
+
195
+ - Added `size="large"` support to `fig-segmented-control`, including height-matched segment minimum widths, playground controls, documentation, and component coverage.
196
+ - Added dedicated Inputs and Media groups to `/figui3`, with sections and examples sorted alphabetically within each group.
197
+ - Added standalone `fig-fill-picker` mode examples and expanded `fig-input-fill` examples, including a live WebGPU custom shader preview.
198
+
199
+ ### Changed
200
+
201
+ - Removed CSS containment declarations from core, lab, and editor component styles.
202
+ - Applied overflow fades to playground navigation and scrollbar-overflow choosers.
203
+ - Updated icon-only segments to remove inline padding and card labels to inherit font size.
204
+ - Limited the fill input playground section to sessions with editor components enabled.
205
+
206
+ ### Fixed
207
+
208
+ - Truncated long `fig-select-option` labels with ellipsis when the menu is width-clamped.
209
+ - Fixed equal segmented-control sizing so every segment remains the same width without clipping its padding.
210
+ - Fixed grid chooser spacing around injected overflow navigation buttons.
211
+ - Fixed labeled separators outside menus and selects hiding their rule, and stopped AI context panels from overlapping prompts.
212
+
213
+ ## [9.0.7]
214
+
215
+ ### Added
216
+
217
+ - Added `size="large"` support to `fig-input-number`, including large prepend spacing, playground controls and examples, documentation, and component coverage.
218
+
219
+ ## [9.0.6]
220
+
221
+ ### Added
222
+
223
+ - Added `.fig-overflow-fade` and `.fig-overflow-fade-horizontal`, CSS-only scroll utilities with tokenized, eased, direction-aware edge fades gated behind scroll-timeline support, plus vertical and horizontal playground examples.
224
+
225
+ ## [9.0.5]
226
+
227
+ ### Changed
228
+
229
+ - Refined padded `fig-choice` spacing, corner radius, and selected-state outline treatment.
230
+ - Added padding to every choice in the image chooser playground example.
231
+
232
+ ### Fixed
233
+
234
+ - Playground-only action controls now retain their original position and remain available after example markup updates.
235
+
236
+ ## [9.0.4]
237
+
238
+ ### Added
239
+
240
+ - Added a `fig-select` playground example with a prepended icon.
241
+
242
+ ### Changed
243
+
244
+ - Select prepend regions now span the trigger height, maintain a matching minimum width, and center their content at default and large sizes.
245
+
246
+ ## [9.0.3]
247
+
248
+ ### Added
249
+
250
+ - Added `size="large"` support to `fig-dropdown` and `fig-select`, including reactive sizing, playground examples, documentation, and component coverage.
251
+
252
+ ## [9.0.2]
253
+
254
+ ### Added
255
+
256
+ - Added structured object and serialized JSON values, initial velocity, and a `spring` property to `fig-easing-curve`.
257
+ - Added independent `presets` and `text` visibility controls to `fig-easing-curve`.
258
+
259
+ ### Changed
260
+
261
+ - Spring curves now use a normalized bounce number input linked to their damping ratio.
262
+ - Easing-curve events now include structured spring detail without leaking internal selector events.
263
+
264
+ ### Fixed
265
+
266
+ - Fixed easing SVG clipping at non-square aspect ratios while preserving the editor container padding.
267
+
268
+ ## [9.0.1]
269
+
270
+ ### Added
271
+
272
+ - Added a repository-native Codex publish skill with release verification for GitHub and npm.
273
+
274
+ ### Changed
275
+
276
+ - Easing-curve SVG containers now keep overflow clipped during hover, active, and focus states.
277
+ - Removed the stale nested Cursor publish-rule duplicate.
278
+
279
+ ## [9.0.0]
280
+
281
+ ### Changed
282
+
283
+ - Removed the legacy Lab property-control wrappers and their examples, tests, JSX types, and documentation.
284
+ - Removed the unused standalone editor scaffold.
285
+
286
+ ## [8.11.1]
287
+
288
+ ### Added
289
+
290
+
291
+ ### Changed
292
+
293
+ - Deleting an unselected editable-select option no longer emits unchanged `input` and `change` events.
294
+ - Added `optionschange` output to the playground, React guidance, README, bundled skills, and component contracts.
295
+
296
+ ## [8.11.0]
297
+
298
+ ### Added
299
+
300
+ - Added the medium checkmark icon and `size="large"` support to `fig-input-text`.
301
+
302
+ ### Changed
303
+
304
+ - Refined easing-curve sizing, icon mask rendering, and `fig-choice` selection rings.
305
+ - Expanded playground controls, JSX types, documentation, bundled skills, accessibility coverage, and component contracts for the new components.
306
+
307
+ ## [8.10.1]
308
+
309
+ ### Fixed
310
+
311
+
312
+ ## [8.10.0]
313
+
314
+ ### Added
315
+
316
+ - Added `mode="bezier|spring"` to `fig-easing-curve`, including filtered presets and constrained manual entry.
317
+ - Added `subtle`, `aria-label`, `slot="trigger"`, and `slot="prepend-trigger"` support to `fig-select`.
318
+ - Added body typography tokens, `--radius-medium-large`, `--fig-swatch-border-radius`, and button-control spacing variables.
319
+
320
+ ### Changed
321
+
322
+ - Refined `fig-input-palette` borders, `fig-joystick` axis-label layout, and small body typography.
323
+ - Expanded playground examples, attribute controls, JSX types, README documentation, and bundled skills for the new contracts and components.
324
+
325
+ ### Fixed
326
+
327
+ - Rich `fig-select` prepend and custom triggers now render, update after selection, preserve accessible names, and align their menus correctly.
328
+
329
+ ## [8.9.49]
330
+
331
+ ### Added
332
+
333
+ - Added `trash` to `fig-icon` at medium and small sizes, including playground icon and toast controls.
334
+
335
+ ### Changed
336
+
337
+
338
+ ## [8.9.48]
339
+
340
+ ### Added
341
+
342
+ - `fig-canvas-control` now supports configurable precision for positions, radius, angle, and internal handle dragging.
343
+
344
+ ### Changed
345
+
346
+ - Canvas-control radius rings and point-to-point lines reveal their shared halo and thicker stroke on hover.
347
+ - Added generic `--fig-canvas-control-stroke-halo` and `--fig-canvas-control-stroke-halo-hover` customization properties while preserving the previous radius halo property.
348
+
349
+ ### Fixed
350
+
351
+ - Playground examples and attribute controls now reset reliably when navigating between examples.
352
+
353
+ ## [8.9.47]
354
+
355
+ ### Added
356
+
357
+ - `fig-handle` now supports `precision` for percentage values and pixel dragging, defaulting to two decimal places.
358
+
359
+ ### Fixed
360
+
361
+ - Overflow navigation stays pinned to the edges when React appends delayed options, tabs, or choices.
362
+
363
+ ## [8.9.46]
364
+
365
+ ### Changed
366
+
367
+ - `fig-header` title styles now apply to all heading children, not only the first child.
368
+
369
+ ## [8.9.45]
370
+
371
+ ### Changed
372
+
373
+ - Split FigUI3, fig-editor, fig-lab, and propkit skills into thinner entry files with separate component catalogs and React usage docs.
374
+
375
+ ## [8.9.44]
376
+
377
+ ### Changed
378
+
379
+
380
+ ### Fixed
381
+
382
+ - Group headings retain ellipsis behavior while keeping disclosure chevrons vertically aligned.
383
+
384
+ ## [8.9.43]
385
+
386
+ ### Changed
387
+
388
+ - Slider handle fading begins at `--spacer-3` and completes at `--spacer-2`.
389
+ - Removed the inset border from avatar images.
390
+
391
+ ### Fixed
392
+
393
+ - Header titles now truncate overflowing text with an ellipsis.
394
+
395
+ ## [8.9.42]
396
+
397
+ ### Changed
398
+
399
+
400
+ ## [8.9.41]
401
+
402
+ ### Changed
403
+
404
+
405
+ ### Fixed
406
+
407
+
408
+ ## [8.9.40]
409
+
410
+ ### Added
411
+
412
+ - Added logical `start`, `center`, and `end` content alignment for `fig-button`.
413
+ - Added button playground examples for alignment and prepended icons.
414
+
415
+ ### Changed
416
+
417
+ - Refined `fig-button` padding when a prepended icon is present, including large buttons.
418
+
419
+ ## [8.9.39]
420
+
421
+ ### Fixed
422
+
423
+
424
+ ## [8.9.38]
425
+
426
+ ### Fixed
427
+
428
+
429
+ ## [8.9.37]
430
+
431
+ ### Added
432
+
433
+ - Fast `fig-input-wheel` scrubbing now applies a brief motion blur to its ticks.
434
+
435
+ ### Changed
436
+
437
+ - Doubled the horizontal inset around `fig-input-wheel` ticks.
438
+
439
+ ## [8.9.36]
440
+
441
+ ### Changed
442
+
443
+ - The default font stack now prefers Inter when the consuming app makes it available.
444
+
445
+ ## [8.9.35]
446
+
447
+ ### Added
448
+
449
+ - Added the shared `--font-variant-numeric` token for lining, tabular, slashed-zero numerals.
450
+
451
+ ### Fixed
452
+
453
+ - The playground now loads full Inter 3.19.3 so its slashed-zero OpenType glyph renders correctly.
454
+
455
+ ## [8.9.34]
456
+
457
+ ### Added
458
+
459
+ - Added `fig-input-wheel.spinTo(value)` plus playground controls and a static-wheel example.
460
+
461
+ ### Fixed
462
+
463
+
464
+ ## [8.9.33]
465
+
466
+ ### Added
467
+
468
+ - Added the experimental standalone `fig-input-wheel` numeric scrubber with projected ticks, centered handle, bounds, keyboard and pointer controls, and elastic feedback.
469
+ - Added standalone Input Wheel playground examples, attribute controls, JSX support, and component documentation.
470
+
471
+ ### Changed
472
+
473
+
474
+ ### Fixed
475
+
476
+
477
+ ## [8.9.32]
478
+
479
+ ### Added
480
+
481
+
482
+ ### Changed
483
+
484
+
485
+ ## [8.9.31]
486
+
487
+ ### Added
488
+
489
+ - `fig-chooser` supports `auto-scroll`, `scroll-behavior`, and `scrollSelectionIntoView()` for independent selection and scrolling control.
490
+ - Playground chooser controls and a manual-scroll example expose the new APIs.
491
+
492
+ ### Changed
493
+
494
+ - Chooser selection and overflow scrolling respect CSS scroll behavior and reduced-motion preferences.
495
+
496
+ ## [8.9.30]
497
+
498
+ ### Added
499
+
500
+ - `fig-slider.defaultValue` exposes the resolved slider baseline.
501
+
502
+ ### Fixed
503
+
504
+ - Slider defaults ignore non-numeric, out-of-range, and off-step values and remain synchronized when constraints change.
505
+ - `fig-group` removes its generated fallback header when authored header content is present.
506
+
507
+ ### Changed
508
+
509
+
510
+ ## [8.9.29]
511
+
512
+ ### Added
513
+
514
+ - `fig-button type="select"` automatically generates a small appended chevron; authored append-slot content overrides it.
515
+
516
+ ### Fixed
517
+
518
+ - `fig-combo-input` now contains its dropdown events and broadcasts `input` and `change` only from the combo host.
519
+ - Playground button type controls no longer inject sample dropdown markup when switching to `type="select"`.
520
+
521
+ ### Changed
522
+
523
+ - Refined select-button spacing for labeled and icon-only layouts.
524
+
525
+ ## [8.9.28]
526
+
527
+ ### Fixed
528
+
529
+ - Limit `fig-header` flexible title styling to a heading in the first-child position.
530
+
531
+ ## [8.9.27]
532
+
533
+ ### Changed
534
+
535
+ - Refined `fig-header` padding and title/action alignment.
536
+ - Added long-title, default dropdown, and ghost dropdown header examples.
537
+
538
+ ## [8.9.26]
539
+
540
+ ### Fixed
541
+
542
+ - Replacing a video fill clears the previous poster and applies the newly captured poster to both the swatch and dialog preview. Posters from `default-video` or an earlier URL cannot remain after the video URL changes.
543
+
544
+ ## [8.9.25]
545
+
546
+ ### Fixed
547
+
548
+ - Opening `fig-fill-picker` no longer emits `input` when nothing changed. Default-video apply, same-URL preview `loaded`, and the live webcam still are derived UI.
549
+ - `fig-media` / `fig-image` / `fig-video` fire `loaded` when the src actually loads, not only after a file upload. The fill picker and `fig-input-fill` forward it so playground Event output can show it.
550
+
551
+ ### Changed
552
+
553
+ - Playground theme switch uses `hstack` and tighter header padding.
554
+
555
+ ## [8.9.24]
556
+
557
+ ### Changed
558
+
559
+ - Split license: core stays MIT; editor and lab (`fig-editor.js`, `fig-lab.js`, their CSS, dist copies, and those skills) are PolyForm Shield 1.0.0. `package.json` is `SEE LICENSE IN LICENSE`. Copies already shipped under MIT stay MIT.
560
+
561
+ ## [8.9.23]
562
+
563
+ ### Fixed
564
+
565
+ - Automatic video poster capture paints the swatch without emitting `input`. The still is derived UI, not a fill change.
566
+
567
+ ## [8.9.22]
568
+
569
+ ### Added
570
+
571
+ - Fill `value` may be a bare video URL (`.mp4`, `.webm`, `.mov`, `.m4v`, `.ogv`, or `data:video/…`). JSON still works.
572
+
573
+ ### Changed
574
+
575
+ - Fill picker video preview stays paused after upload. First frame shows; play is opt-in.
576
+ - Lab Fill and Fill Input Video examples use a video URL instead of JSON.
577
+
578
+ ### Fixed
579
+
580
+ - Video fills without a poster paint a `createImageBitmap` still on the closed swatch. Capture runs on the picker when the URL is set, not only when the dialog opens.
581
+
582
+ ## [8.9.21]
583
+
584
+ ### Changed
585
+
586
+ - `fig-swatch` uses the same focus-inside split as `fig-input-gradient` (`:focus-within:not(:focus)`). Nested color inputs no longer draw their own ring.
587
+
588
+ ### Fixed
589
+
590
+
591
+ ## [8.9.20]
592
+
593
+ ### Added
594
+
595
+
596
+ ### Changed
597
+
598
+
599
+ ### Fixed
600
+
601
+ - Choosing Webcam on `fig-input-fill` paints the closed swatch from the first real camera frame instead of checkerboard or a black boot still.
602
+ - Built-in cameras that start black (FaceTime) keep retrying and prefer `ImageCapture` until the frame has actual pixels. Host writes of `snapshot: null` no longer wipe a live still.
603
+
604
+ ## [8.9.19]
605
+
606
+ ### Added
607
+
608
+ - `fig-input-fill` forwards custom `mode-*` slots to the inner picker and uses image-style chrome (type label + opacity) for non-built-in types.
609
+ - Fill picker playground **Custom** example: `slot="mode-shader"` tab with preview + source.
610
+
611
+ ### Changed
612
+
613
+ - Empty `fig-swatch background=""` shows the checkerboard instead of gray `#D9D9D9`.
614
+ - Webcam and custom fill swatches default to checkerboard unless a background is supplied.
615
+ - Fill picker `fig-preview { overflow: visible }` is limited to solid and gradient tabs.
616
+ - Popup `fig-header` no longer paints an opaque background over the panel.
617
+ - Removed unused `old.html`.
618
+
619
+ ### Fixed
620
+
621
+ - Custom mode `swatch-background` is read from the live slot before the picker dialog is created.
622
+ - Webcam camera select can switch when the live stream's `deviceId` is unknown.
623
+
624
+ ## [8.9.18]
625
+
626
+ ### Changed
627
+
628
+ - `fig-fill-picker` hides the gradient interpolation row and locks interpolation to `srgb`.
629
+ - `fig-fill-picker` dialog `fig-content` top padding is `--spacer-2`.
630
+ - `fig-fill-picker` type select is `variant="ghost"`.
631
+ - `fig-media-controls` play button no longer uses `size="small"`.
632
+ - `fig-icon` uses `contain: size` instead of `contain: strict`.
633
+
634
+ ### Fixed
635
+
636
+ - Video fills pass `poster` to `fig-swatch` `background` the same way image fills pass `url`.
637
+ - Fill picker video preview gets the poster while the clip loads. Playground video fills use a live MDN clip (Google sample bucket is 403).
638
+ - `fig-media-controls` play button stays visible without hover (`fig-tooltip` is a real flex item; `.has-media` only hides the replace overlay).
639
+
640
+ ## [8.9.17]
641
+
642
+ ### Added
643
+
644
+ - `fig-fill-picker` / `fig-input-fill` webcam JSON is now `{ type: "webcam", webcam: { live, snapshot, deviceId, scaleMode, scale, opacity } }`.
645
+ - `webcamStream`, `releaseWebcam()`, and `webcamstream` for the live `MediaStream` (not stored in `value`).
646
+ - `webcam-mode="live|snapshot"`. Choosing Webcam starts the live camera. Capture writes a still and switches to Image.
647
+ - `default-video` plus `video.poster`. Swatches paint the poster, never `url(file.mp4)`.
648
+
649
+ ### Changed
650
+
651
+ - Closing the picker no longer stops a live webcam. The stream stops when leaving Webcam, calling `releaseWebcam()`, or disconnecting the element.
652
+ - `fig-input-fill` gradient values include `css`. Solid `alpha` (0–1) stays canonical beside `opacity` (0–100).
653
+
654
+ ### Fixed
655
+
656
+ - Restoring `{ webcam }` or the legacy `{ type: "webcam", image: { url } }` snapshot no longer drops the still.
657
+ - `fig-input-fill` copies `detail.webcam` and has a video swatch case.
658
+ - Webcam/video blob URLs stay valid and are quoted onto the inner `fig-swatch` (`url("blob:…")`), including after `fig-input-fill` remounts.
659
+ - Choosing Webcam paints the swatch as soon as the live camera has a frame.
660
+
661
+ ## [8.9.16]
662
+
663
+ ### Added
664
+
665
+ - `fig-chooser value=""` keeps no choice selected. Omitting `value` still selects the first choice.
666
+
667
+ ### Fixed
668
+
669
+ - `fig-choice` selected outline radius includes the ring offset so corners stay concentric.
670
+
671
+ ## [8.9.15]
672
+
673
+ ### Changed
674
+
675
+
676
+ ### Fixed
677
+
678
+ - `fig-field` no longer shows a disclosure chevron when the control is a `fig-fill-picker`.
679
+ - `fig-swatch.focus()` still works when the native color input is gone.
680
+
681
+ ## [8.9.14]
682
+
683
+ ### Fixed
684
+
685
+ - Vertical `fig-separator`s stay 1px wide instead of picking up labeled-row padding.
686
+
687
+ ## [8.9.13]
688
+
689
+ ### Fixed
690
+
691
+ - Sticky labeled `fig-separator`s stack above scrolling list items.
692
+
693
+ ## [8.9.12]
694
+
695
+ ### Added
696
+
697
+ - `fig-popup` `title` auto-generates a header, matching `fig-dialog`.
698
+ - `fig-menu-item` works as a list row outside `fig-menu` — typically in a `fig-popup` with sticky `fig-separator`s and a nested `fig-menu` for row actions.
699
+
700
+ ### Changed
701
+
702
+ - `fig-menu` now slots `fig-menu-item` / `fig-separator` into the popup instead of relocating them, matching `fig-select`. Triggers get `slot="trigger"` automatically. React can add or remove items without `removeChild` errors.
703
+
704
+ ### Fixed
705
+
706
+ - `fig-menu-item` color inherits from the parent surface instead of always painting menu-white.
707
+ - Nested `fig-menu` inside a `fig-menu-item` only selects its own items and does not fire the parent row.
708
+ - Sticky labeled `fig-separator`s hide the rule (`::before`) while stuck.
709
+
710
+ ## [8.9.11]
711
+
712
+ ### Added
713
+
714
+ - `variant="ghost"` on `fig-dropdown` and `fig-select` for a borderless control with secondary hover fill.
715
+ - Shipped Cursor skills for the core, editor, and lab bundles (`figui3`, `fig-editor`, `fig-lab`), plus an updated PropKit skill.
716
+
717
+ ### Changed
718
+
719
+ - Documented `fig-select` in the README and clarified that `fig-layer` is a separate import, not part of `fig-editor.js`.
720
+
721
+ ## [8.9.10]
722
+
723
+ ### Added
724
+
725
+ - Select playground Sticky toggle applies `sticky` to each `fig-separator` and persists as `_sticky` in the URL.
726
+ - Expanded the AI models select example with a long grouped model list.
727
+
728
+ ### Changed
729
+
730
+ - Removed the Popup "With menu" playground example.
731
+
732
+ ### Fixed
733
+
734
+ - Sticky labeled `fig-separator`s in overflowed `fig-select-options` and `.fig-menu-options` sit below the overflow-start button.
735
+
736
+ ## [8.9.9]
737
+
738
+ ### Added
739
+
740
+ - Added a Popup playground example with a nested `fig-menu`.
741
+
742
+ ### Fixed
743
+
744
+ - `fig-menu` now opens on the top layer via `popover`, so nested menus inside `fig-popup` stay anchored to their trigger instead of offsetting by the parent popup.
745
+
746
+ ## [8.9.7]
747
+
748
+ ### Added
749
+
750
+ - Added subtle menu items with a secondary hover/focus treatment and playground example.
751
+
752
+ ## [8.9.6]
753
+
754
+ ### Added
755
+
756
+
757
+ ## [8.9.5]
758
+
759
+ ### Added
760
+
761
+ - Added a theme-aware `--fig-popover-shadow` drop-shadow token for popovers, tooltips, and color tips.
762
+
763
+ ### Changed
764
+
765
+ - Popup dialogs now use the menu-panel elevation by default.
766
+ - The popup playground defaults to the inherited theme and removes the `theme` attribute when Default is selected.
767
+
768
+ ## [8.9.4]
769
+
770
+ ### Added
771
+
772
+ - Added the minimal `fig-handle` type and playground example.
773
+
774
+ ### Changed
775
+
776
+ - `fig-easing-curve` uses minimal handles, edge-aligned curve geometry, 45px preview padding, and horizontal boundary snapping while Shift-dragging.
777
+ - Refined handle shadows, outlines, padding, and easing control-arm colors.
778
+
779
+ ### Fixed
780
+
781
+ - Handle inner backgrounds now respect the active light or dark color scheme.
782
+
783
+ ## [8.9.3]
784
+
785
+ ### Added
786
+
787
+ - Added non-removable image attachments to the user message in the Chat Message conversation example.
788
+
789
+ ### Changed
790
+
791
+ - Chat messages use column layout and consistent internal spacing for composed content.
792
+ - Removed the standalone Interpolation Swatch playground example.
793
+
794
+ ## [8.9.2]
795
+
796
+ ### Added
797
+
798
+ - Added a verbose `fig-select` playground example with rich version-history options.
799
+
800
+ ### Changed
801
+
802
+ - Added consistent spacing below headings in select and menu options.
803
+
804
+ ## [8.9.1]
805
+
806
+ ### Fixed
807
+
808
+ - `fig-select-options` now preserves top spacing when its overflow controls are adjacent in the DOM.
809
+
810
+ ## [8.9.0]
811
+
812
+ ### Added
813
+
814
+ - Added `copy` to `fig-icon` at medium and small sizes, including playground icon and toast controls.
815
+
816
+ ## [8.8.1]
817
+
818
+ ### Fixed
819
+
820
+ - `fig-icon` with a slotted `<svg>` no longer paints a solid `color` background block behind the SVG, and now applies the `color` attribute to the SVG via `currentColor`.
821
+
822
+ ## [8.8.0]
823
+
824
+ ### Added
825
+
826
+ - `fig-icon` `color` aliases map semantic names (`primary`, `brand`, `component`, `danger`, `success`, `warning`, `selected`, `onbrand`, …) to `--figma-color-icon*` tokens.
827
+ - Playground icon color controls use those aliases instead of raw CSS variables.
828
+
829
+ ### Changed
830
+
831
+ - Renamed the Icon Medium playground example to Default.
832
+
833
+ ## [8.7.0]
834
+
835
+ ### Added
836
+
837
+ - Added a Processing toast playground example composing a leading `fig-spinner`.
838
+
839
+ ### Changed
840
+
841
+ - Toasts pull a leading `fig-spinner` flush to the inline edge like a leading icon.
842
+
843
+ ## [8.6.1]
844
+
845
+ ### Fixed
846
+
847
+ - Dark-theme toasts no longer force the menu background color.
848
+
849
+ ## [8.6.0]
850
+
851
+ ### Added
852
+
853
+ - `fig-toast` supports optional `icon` (full-size `fig-icon` name) and `dismiss` (ghost close button).
854
+ - `dismiss="true"` inserts a vertical `fig-separator` before the close control.
855
+ - `fig-separator` supports `direction="vertical"`.
856
+ - Added toast playground examples for actions and error states with Retry.
857
+
858
+ ### Fixed
859
+
860
+ - Open toasts keep a horizontal flex row instead of inheriting the generic dialog column layout.
861
+
862
+ ### Changed
863
+
864
+ - Toast attribute controls gate the icon name picker behind an Icon switch.
865
+
866
+ ## [8.5.0]
867
+
868
+ ### Added
869
+
870
+ - Added experimental `fig-ai-context`, a reusable open container for attachments and status rows that can sit above `fig-ai-prompt`.
871
+ - Added AI composer playground examples for attachments, status, and action-needed context.
872
+
873
+ ### Changed
874
+
875
+ - Renamed the AI Prompt lab section to AI composer and split attachment vs sending examples.
876
+
877
+ ## [8.4.1]
878
+
879
+ ### Fixed
880
+
881
+ - `fig-input-fill` swatches preserve linear, radial, and angular gradient types while keeping radial previews centered.
882
+
883
+ ## [8.4.0]
884
+
885
+ ### Added
886
+
887
+ - Added segmented gradient interpolation presets with tooltips and an overflow menu for advanced hue directions.
888
+ - Added regression coverage that prevents HTML parsing sinks in shipped JavaScript.
889
+
890
+ ### Changed
891
+
892
+ - Simplified gradient editing by removing angle and radial center fields, keeping rotation available for radial gradients, and moving interpolation controls before stops.
893
+ - Moved `fig-interpolation-swatch` from core into the editor bundle (`fig-editor.js` / `fig-editor.css`).
894
+ - Rebuilt dynamic component markup with DOM APIs so authored values remain literal text and attributes.
895
+ - Updated dropdown examples with labeled option groups.
896
+
897
+ ### Fixed
898
+
899
+ - Fixed fixed-size media collapsing when combined with `full` and `aspect-ratio`.
900
+ - Fixed custom media overlay controls flickering when hovered.
901
+ - Fixed uploaded videos remaining hidden or disabled after selection.
902
+ - Fixed locked webcam pickers failing to report captured snapshots.
903
+ - Fixed disabled slider styling and related component layout regressions.
904
+
905
+ ## [8.3.0]
906
+
907
+ ### Added
908
+
909
+ - Restored `fig-menu-separator` as a backwards-compatible `FigSeparator` alias.
910
+
911
+ ### Changed
912
+
913
+ - The no-fields dialog example shows the footer divider again.
914
+ - Empty `fig-content` collapses padding even when it has no element children.
915
+
916
+ ### Fixed
917
+
918
+ - Gradient handle-mode stops stay selected and focused, so Delete/Backspace reliably removes them.
919
+
920
+ ## [8.2.1]
921
+
922
+ ### Fixed
923
+
924
+ - Non-range `fig-slider` types (`delta`, `hue`, `stepper`, `opacity`) now pass their resolved value through to the number input instead of showing the placeholder.
925
+
926
+ ## [8.2.0]
927
+
928
+ ### Added
929
+
930
+
931
+ ### Changed
932
+
933
+ - Generated image loading indicators use the small spinner size.
934
+
935
+ ### Fixed
936
+
937
+ - Disabled oscillators stop and resume their playhead animation correctly.
938
+ - Attachments keep a stable square size while loading, and loading spinners are no longer constrained by overlay sizing.
939
+
940
+ ## [8.1.0]
941
+
942
+ ### Added
943
+
944
+ - Added numeric spatial control event details with explicit `units`.
945
+
946
+ ### Changed
947
+
948
+ - Lab CSS loads only on lab-enabled playground routes instead of through `fig-editor.css`.
949
+
950
+ ## [8.0.3]
951
+
952
+ ### Changed
953
+
954
+ - `fig-input-gradient` swatches always preview as a left-to-right linear gradient, regardless of type or angle.
955
+
956
+ ## [8.0.2]
957
+
958
+ ### Fixed
959
+
960
+
961
+ ## [8.0.1]
962
+
963
+ ### Fixed
964
+
965
+
966
+ ## [8.0.0]
967
+
968
+ ### Changed
969
+
970
+ - Moved `fig-select`, `fig-select-option`, and `fig-select-options` from core into the editor bundle (`fig-editor.js` / `fig-editor.css`).
971
+ - Select playground docs now live under Editor components.
972
+
973
+ ### Breaking
974
+
975
+ - Import `fig-editor.js` (and `fig-editor.css`) to use `fig-select`. Core `fig.js` alone no longer registers it.
976
+
977
+ ## [7.1.0]
978
+
979
+ ### Added
980
+
981
+ - Added a populated multiline text input example for `fig-field`.
982
+
983
+ ### Changed
984
+
985
+ - Reduced vertical padding for `fig-tabs` and the maximum field-label height.
986
+ - Dialogs can now grow to the viewport height while retaining outer spacing.
987
+
988
+ ## [7.0.0]
989
+
990
+ ### Added
991
+
992
+ - Added `fig-chit` as a backwards-compatible alias for `fig-swatch`, including fill-picker support.
993
+
994
+ ### Changed
995
+
996
+ - `fig-card` now renders generated media and footers as direct children without a `.fig-card-link` wrapper.
997
+
998
+ ### Fixed
999
+
1000
+ - Long `fig-card` sublabels now truncate with an ellipsis.
1001
+ - Loading spinners stay centered in `fig-card` images and authored previews.
1002
+
1003
+ ### Removed
1004
+
1005
+ - Removed the `href` and `target` attributes and built-in link behavior from `fig-card`.
1006
+
1007
+ ## [6.40.1]
1008
+
1009
+ ### Fixed
1010
+
1011
+ - Empty `fig-content` elements no longer reserve padding.
1012
+ - Full-width `fig-chooser` elements now account for their inline margins.
1013
+
1014
+ ### Changed
1015
+
1016
+ - Updated dialog and helper-text examples to demonstrate `fig-content` padding behavior.
1017
+
1018
+ ## [6.40.0]
1019
+
1020
+ ### Changed
1021
+
1022
+
1023
+ ## [6.39.0]
1024
+
1025
+ ### Changed
1026
+
1027
+
1028
+ ## [6.38.0]
1029
+
1030
+ ### Changed
1031
+
1032
+
1033
+ ### Fixed
1034
+
1035
+ - Late-set delta slider values now sync to the nested `fig-input-number`.
1036
+
1037
+ ## [6.37.1]
1038
+
1039
+ ### Fixed
1040
+
1041
+ - Hovering options in an open `fig-select` no longer reopens a wrapping `fig-tooltip`.
1042
+
1043
+ ## [6.37.0]
1044
+
1045
+ ### Added
1046
+
1047
+ - Added the `borderless` attribute for `fig-separator`.
1048
+
1049
+ ### Changed
1050
+
1051
+ - `fig-select-options` now marks a leading separator as borderless.
1052
+ - Replaced the grouped select playground example with grouped AI models.
1053
+
1054
+ ## [6.36.0]
1055
+
1056
+ ### Added
1057
+
1058
+ - Added the `destructiveLink` variant for `fig-button`.
1059
+
1060
+ ### Changed
1061
+
1062
+ - Attribute controls in the playground now use `fig-select` instead of `fig-dropdown`.
1063
+ - Icon button examples now use `fig-icon` with the `visible` icon.
1064
+
1065
+ ### Fixed
1066
+
1067
+ - Button type, variant, and icon content now rehydrates correctly from playground URL state.
1068
+
1069
+ ## [6.35.0]
1070
+
1071
+ ### Added
1072
+
1073
+ - Added the `destructiveGhost` variant for `fig-button`.
1074
+
1075
+ ## [6.34.0]
1076
+
1077
+ ### Added
1078
+
1079
+ - Added `destructive` and `destructiveSecondary` variants for `fig-button`.
1080
+
1081
+ ### Changed
1082
+
1083
+ - Button variant controls in the FigUI3 playground now update the example label and correctly represent the default primary variant.
1084
+
1085
+ ## [6.33.1]
1086
+
1087
+ ### Fixed
1088
+
1089
+ - Checkbox and switch inputs no longer shrink in flex layouts, and `fig-checkbox` and `fig-switch` align multiline content from the top.
1090
+
1091
+ ## [6.33.0]
1092
+
1093
+ ### Added
1094
+
1095
+ - `fig-image`, `fig-media`, and `fig-video` now re-emit native image and video load lifecycle events from their host elements.
1096
+ - `fig-image` and image-mode `fig-media` now show a delayed default spinner while generated images load, with `loading-indicator="false"` as an opt-out.
1097
+ - Added a loading-state example for `fig-image`.
1098
+
1099
+ ### Fixed
1100
+
1101
+ - Loaded `fig-media` videos now keep upload overlay buttons hidden until hover or keyboard focus.
1102
+
1103
+ ## [6.32.2]
1104
+
1105
+ ### Changed
1106
+
1107
+ - `fig-preview` now defaults to a `4/3` aspect ratio, and its playground control uses the shared aspect-ratio dropdown.
1108
+ - `fig-avatar` no longer shrinks inside flex layouts.
1109
+ - Adjusted the secondary icon token to 50% black in light mode and 70% white in dark mode.
1110
+
1111
+ ## [6.32.1]
1112
+
1113
+ ### Changed
1114
+
1115
+ - Updated the 24px globe icon token and encoded it as an SVG data URI.
1116
+
1117
+ ## [6.32.0]
1118
+
1119
+ ### Added
1120
+
1121
+ - Added an `aspect-ratio` attribute to `fig-preview`.
1122
+
1123
+ ### Changed
1124
+
1125
+ - Updated the Card playground descriptions and manual example to document authored media and footer composition.
1126
+
1127
+ ## [6.31.2]
1128
+
1129
+ ### Changed
1130
+
1131
+ - `fig-card` now renders attribute-driven labels in a compact `fig-footer` and preserves authored footers without generating labels when no label attributes are present.
1132
+
1133
+ ## [6.31.1]
1134
+
1135
+ ### Fixed
1136
+
1137
+ - `fig-card[size="large"]` no longer adds extra horizontal padding on generated labels and sublabels.
1138
+
1139
+ ## [6.31.0]
1140
+
1141
+ ### Added
1142
+
1143
+ - Added `size="large"` to `fig-card` for `--spacer-2` card padding and `--spacer-1` label spacing.
1144
+ - Added `globe` icon tokens for `fig-icon` (24px and 16px).
1145
+
1146
+ ### Changed
1147
+
1148
+ - The playground Icon name dropdown is now sorted alphabetically.
1149
+
1150
+ ## [6.30.0]
1151
+
1152
+ ### Added
1153
+
1154
+ - Added experimental `fig-attachment` and `fig-attachments` lab components for removable image previews and wrapping AI prompt attachments.
1155
+
1156
+ ### Changed
1157
+
1158
+ - The playground event output now reports attachment `remove` events.
1159
+
1160
+ ## [6.29.1]
1161
+
1162
+ ### Changed
1163
+
1164
+
1165
+ ## [6.29.0]
1166
+
1167
+ ### Added
1168
+
1169
+
1170
+ ### Changed
1171
+
1172
+ - Large gradient inputs now size their swatch to the full control height.
1173
+
1174
+ ## [6.28.1]
1175
+
1176
+ ### Changed
1177
+
1178
+ - Horizontal `fig-field` labels now center within a capped large-control height while preserving ellipsis truncation.
1179
+
1180
+ ### Fixed
1181
+
1182
+ - `fig-input-gradient[edit="picker"]` now opens the gradient fill editor by pointer or keyboard and upgrades when the optional picker registers later.
1183
+
1184
+ ## [6.28.0]
1185
+
1186
+ ### Added
1187
+
1188
+ - Added `optionhover` support to the playground event output.
1189
+
1190
+ ## [6.27.0]
1191
+
1192
+ ### Added
1193
+
1194
+
1195
+ ### Changed
1196
+
1197
+ - Refined oscillator wave controls with a menu-based add action, zero-centered delta fields, and stronger waveform styling.
1198
+
1199
+ ### Fixed
1200
+
1201
+ - Opacity slider number fields remain directly editable above the range surface.
1202
+
1203
+ ## [6.26.0]
1204
+
1205
+ ### Added
1206
+
1207
+ - Added `--fig-preview-background` for customizing or removing preview surface backgrounds.
1208
+ - Added a manual `fig-card` example composed from an authored `fig-preview` and spinner.
1209
+
1210
+ ### Changed
1211
+
1212
+ - Direct color emitters now share additive `{ color, alpha, opacity }` fields while preserving legacy `fig-input-color` payloads.
1213
+ - `fig-card` now preserves authored children without `src`, generates media without a `.fig-card-media` wrapper, and uses semantic label elements.
1214
+ - Media with an explicit `aspect-ratio` now fills the available width automatically.
1215
+ - Refined tab strip inline margins with independent left and right variables.
1216
+
1217
+ ### Fixed
1218
+
1219
+ - `fig-canvas-control` now preserves color alpha aliases from its handle events.
1220
+ - Gradient color adapters now accept either fractional `alpha` or percentage `opacity`.
1221
+
1222
+ ## [6.25.0]
1223
+
1224
+ ### Changed
1225
+
1226
+ - `fig-reorder` now drags from any child surface while preserving nested controls with their own drag behavior.
1227
+
1228
+ ## [6.24.5]
1229
+
1230
+ ### Fixed
1231
+
1232
+ - Encoded the 24px chevron icon and added size-specific `fig-icon` mappings and playground coverage.
1233
+
1234
+ ## [6.24.4]
1235
+
1236
+ ### Added
1237
+
1238
+ - Added an AI prompt sending-state example with disabled controls and a spinner.
1239
+
1240
+ ### Fixed
1241
+
1242
+ - Disabled text inputs inside `fig-ai-prompt` no longer show an inner border.
1243
+
1244
+ ## [6.24.3]
1245
+
1246
+ ### Fixed
1247
+
1248
+ - `fig-ai-prompt` textareas now fill the input height without bottom padding.
1249
+
1250
+ ## [6.24.2]
1251
+
1252
+ ### Added
1253
+
1254
+ - Added 16px and 24px `send` icons to `fig-icon`, its playground catalogs, and documentation.
1255
+
1256
+ ### Changed
1257
+
1258
+ - Refined `fig-ai-prompt` spacing, input-only focus treatment, and footer layout with model selection and send actions.
1259
+
1260
+ ## [6.24.1]
1261
+
1262
+ ### Fixed
1263
+
1264
+ - `fig-ai-prompt` now lays out its textarea without absolute positioning and keeps it above the footer action area.
1265
+ - AI prompt actions now compose through `fig-footer`.
1266
+
1267
+ ## [6.24.0]
1268
+
1269
+ ### Added
1270
+
1271
+ - Added `fig-separator`, a reusable labeled divider for menus, selects, and general content.
1272
+ - Added experimental `fig-ai-prompt` and `fig-chat-message` styling components with AI playground examples.
1273
+
1274
+ ### Changed
1275
+
1276
+ - Replaced `fig-menu-separator` with `fig-separator` throughout the runtime, docs, and examples.
1277
+ - Improved avatar initials and shimmer text defaults for chat compositions.
1278
+
1279
+ ## [6.23.4]
1280
+
1281
+ ### Fixed
1282
+
1283
+ - `fig-slider` updates bounds and units in place and defers structural regeneration until pointer release.
1284
+
1285
+ ## [6.23.3]
1286
+
1287
+ ### Fixed
1288
+
1289
+
1290
+ ## [6.23.2]
1291
+
1292
+ ### Changed
1293
+
1294
+
1295
+ ## [6.23.1]
1296
+
1297
+ ### Changed
1298
+
1299
+ - Removed unintended standalone package entry points, generated bundles, isolation tests, and quickstart artifacts.
1300
+
1301
+ ## [6.23.0]
1302
+
1303
+ ### Added
1304
+
1305
+ - Added viewport-bounded top and bottom overflow controls to `fig-menu`, with paging, keyboard scrolling, and reconnect-safe behavior.
1306
+ - Added core playground examples for `fig-select`, icon-triggered menus, and overflowing menus.
1307
+
1308
+ ### Changed
1309
+
1310
+ - Shared vertical overflow helpers and menu chrome between `fig-select` and `fig-menu`.
1311
+ - Moved the `fig-select` playground documentation from Lab to FigUI3 core.
1312
+
1313
+ ### Fixed
1314
+
1315
+ - Regular menu separator labels now align with menu items while select separators retain checkmark-column alignment.
1316
+ - Header trailing icon menus now use the same edge alignment as direct icon buttons.
1317
+
1318
+ ## [6.22.0]
1319
+
1320
+ ### Added
1321
+
1322
+ - Promoted `fig-select`, `fig-select-option`, and `fig-select-options` from Lab into the core runtime and styles, with rich selected-option icons and content-sized menus.
1323
+ - Added focused core, editor, Lab, accessibility, layout, and component-contract regression coverage.
1324
+
1325
+ ### Changed
1326
+
1327
+ - Refined `fig-easing-curve` with 2px strokes, horizontal bounds, cleaner endpoints, improved layer order, preset selection via `fig-select`, and dynamic scaling for overshooting Bézier handles.
1328
+ - Improved select menu spacing, non-wrapping labels, checkmark geometry, viewport clamping, and selected-option presentation.
1329
+ - Migrated rich oscillator options to `fig-select`.
1330
+ - Removed legacy `experimental` dropdown styling and no-op fill/color picker attribute passthroughs.
1331
+
1332
+ ### Fixed
1333
+
1334
+ - Fill, gradient, media, field, and overlay controls now preserve consistent sizing, focus, labels, disabled states, and reconnect behavior across core and optional modules.
1335
+
1336
+ ## [6.21.1]
1337
+
1338
+ ### Fixed
1339
+
1340
+ - Custom elements now register idempotently, preventing duplicate-registration errors when FigUI modules are re-evaluated together.
1341
+
1342
+ ## [6.21.0]
1343
+
1344
+ ### Added
1345
+
1346
+ - `fig-interpolation-swatch` for compact linear and polar gradient interpolation previews, with small and large sizes.
1347
+ - HSL gradient interpolation with shorter, longer, increasing, and decreasing hue paths.
1348
+ - Gradient opacity editing in `fig-input-fill`.
1349
+
1350
+ ### Changed
1351
+
1352
+ - Gradient interpolation options are grouped in `fig-fill-picker` with live swatch previews and keyboard preview behavior.
1353
+ - Select option panels size to their content up to the viewport and improve edge positioning, keyboard navigation, and disabled-option handling.
1354
+
1355
+ ### Fixed
1356
+
1357
+ - Gradient previews and interpolation swatches stay synchronized when stops, colors, positions, or interpolation settings change.
1358
+ - Empty video media disables playback controls until a playable source is available.
1359
+
1360
+ ## [6.20.2]
1361
+
1362
+ ### Added
1363
+
1364
+ - `FigTooltip.dismissHoverTooltips()` — dismisses open/pending hover tooltips and programmatic `FigTooltip.show()` tips (skips `show`-persisted and `action="click"`).
1365
+
1366
+ ### Fixed
1367
+
1368
+ - Hover tooltips no longer stay open when a non-tooltip `fig-popup` (menu, select, etc.) or `fig-dialog` opens.
1369
+
1370
+ ## [6.20.1]
1371
+
1372
+ ### Changed
1373
+
1374
+
1375
+ ### Fixed
1376
+
1377
+
1378
+ ## [6.20.0]
1379
+
1380
+ ### Added
1381
+
1382
+ - `fig-card` — media card composing `fig-image`, with `label` / `sublabel`, optional real `<a>` via `href`, attribute-only `selected`, `disabled`, `full`, `aspect-ratio`, `fit`, and `label-line-clamp`.
1383
+ - Playground Card examples (default, selected, sublabel, link, aspect ratio, grid) plus README / attribute panel wiring.
1384
+
1385
+ ### Fixed
1386
+
1387
+ - Playground AttributesView string fields no longer remount (and steal focus) on each keystroke.
1388
+
1389
+ ## [6.19.1]
1390
+
1391
+ ### Fixed
1392
+
1393
+
1394
+ ## [6.19.0]
1395
+
1396
+ ### Added
1397
+
1398
+ - `--icon-24-reset` token; `fig-icon name="reset"` resolves medium/small sizes.
1399
+
1400
+ ### Fixed
1401
+
1402
+
1403
+ ## [6.18.4]
1404
+
1405
+ ### Fixed
1406
+
1407
+ - `fig-canvas-control` rotate cursor only on the outside hit-area ring; handle body keeps the normal point cursor (point-point + angle).
1408
+ - Active rotate drag keeps the rotate cursor (`fig-lab-rotate-active`) instead of switching to move.
1409
+
1410
+ ### Changed
1411
+
1412
+
1413
+ ## [6.18.3]
1414
+
1415
+ ### Fixed
1416
+
1417
+
1418
+ ## [6.18.2]
1419
+
1420
+ ### Fixed
1421
+
1422
+
1423
+ ## [6.18.1]
1424
+
1425
+ ### Fixed
1426
+
1427
+ - `fig-select` listbox now stays fully in-viewport when the trigger sits on viewport edges/corners (`::part(listbox) inset` no longer blocks clamped `left`/`top`).
1428
+ - Non-modal `fig-dialog` stacking uses `figGetHighestZIndex` on `show()` / markup `open` so dialogs sit above other FigUI overlays.
1429
+
1430
+ ## [6.18.0]
1431
+
1432
+ ### Added
1433
+
1434
+
1435
+ ### Changed
1436
+
1437
+
1438
+ ### Fixed
1439
+
1440
+ - `fig-field` no longer treats popup hosts (`fig-select`, `fig-menu`, etc.) as disclosures, which was injecting a duplicate field chevron.
1441
+ - Disabled `fig-select` trigger label uses tertiary text color.
1442
+
1443
+ ## [6.17.0]
1444
+
1445
+ ### Added
1446
+
1447
+ - Added `fig-select` with authored `fig-select-options` panel (slot=panel auto), overflow top/bottom buttons, and full-width menu matching.
1448
+ - Added optional `label` on `fig-separator` (rule + secondary group text underneath).
1449
+ - Added lab Select examples: full width, many options, grouped items; Menu labeled-separator example.
1450
+
1451
+ ### Changed
1452
+
1453
+ - `fig-popup` outside dismiss uses `composedPath()` so slotted menu/select clicks are not treated as outside.
1454
+
1455
+ ### Fixed
1456
+
1457
+ - Select overflow paging no longer gets yanked back by open-time menu repositioning.
1458
+ - Select `[full]` popup width now matches the trigger (part listbox width rules no longer win over inline sizing).
1459
+
1460
+ ## [6.16.0]
1461
+
1462
+ ### Added
1463
+
1464
+
1465
+ ### Changed
1466
+
1467
+
1468
+ ## [6.15.0]
1469
+
1470
+ ### Added
1471
+
1472
+
1473
+ ### Changed
1474
+
1475
+
1476
+ ## [6.14.1]
1477
+
1478
+ ### Added
1479
+
1480
+ - Added `adjust` icon tokens for `fig-icon` (24px and 16px).
1481
+ - Added `adjust` to `FIG_ICON_TOKENS` and the playground Icon attribute options.
1482
+
1483
+ ## [6.14.0]
1484
+
1485
+ ### Added
1486
+
1487
+ - Added `download`, `upload`, `sun`, and `moon` icon tokens for `fig-icon` (24px).
1488
+ - Added those names to `FIG_ICON_TOKENS` and the playground Icon attribute options.
1489
+
1490
+ ### Changed
1491
+
1492
+ - PropKit Icons theme example uses `fig-icon` for sun and moon segments.
1493
+
1494
+ ## [6.13.2]
1495
+
1496
+ ### Changed
1497
+
1498
+ - Added shared `--input-opacity-width` token (`calc(3.5rem - 2px)`) for opacity number fields on `fig-input-fill`, `fig-input-color`, and `fig-slider`.
1499
+
1500
+ ## [6.13.1]
1501
+
1502
+ ### Changed
1503
+
1504
+ - Changed `fig-slider` paired number input width to use `--slider-number-width` (default `3.5rem`).
1505
+ - Removed horizontal `fig-field` flex override from `fig-input-number` so intrinsic sizing matches other inputs.
1506
+
1507
+ ## [6.13.0]
1508
+
1509
+ ### Added
1510
+
1511
+ - Added `edit`, `eyedropper`, `settings`, and `more` icon tokens for `fig-icon` (24px and 16px where applicable).
1512
+ - Added Color visibility toggle playground example.
1513
+ - Added `settings` and `more` to Icon playground name options on `/figui3`.
1514
+
1515
+ ### Changed
1516
+
1517
+ - Simplified Icon playground to a single `fig-icon` example driven by the attributes panel.
1518
+ - Synced figui3 Color section demos from propkit source.
1519
+ - Reduced `fig-3d-rotate` face paint cost by replacing shadows with borders.
1520
+
1521
+ ## [6.12.0]
1522
+
1523
+ ### Added
1524
+
1525
+ - Added gradient stop reordering in `fig-fill-picker` via `fig-reorder`.
1526
+ - Added shared boolean attribute helpers so `attr="false"` is treated as unset across core and lab components.
1527
+ - Added CSS tokens for `--figma-color-bg-active`, `--font-size-small`, `--line-height`, `--spacer-half`, `--transition-duration`, `--transition-timing-function`, and `--control-height`.
1528
+ - Added browser tests for gradient stop reorder color persistence and audit regressions.
1529
+
1530
+ ### Changed
1531
+
1532
+ - Changed `fig-reorder` to show the grabbing cursor on pointer down, move the item on mouse up, highlight the dragged item with selected background, and raise the drop indicator above fill-picker dialogs.
1533
+ - Changed `fig-input-text` and `fig-input-number` to share the same intrinsic default width as `fig-input-color`, and to fill horizontal `fig-field` input columns.
1534
+ - Changed presence-style CSS attribute selectors (`icon`, `full`, `open`, `borderless`, `autoresize`, `multiline`, `resizable`, and related) to ignore `"false"`.
1535
+ - Styled native `fig-dropdown` option rows for Chromium webviews so popup menus stay readable.
1536
+ - Imported `fig-lab` from `fig-editor` so fill-picker reorder works without a lazy-load race.
1537
+
1538
+ ### Fixed
1539
+
1540
+ - Fixed gradient stop color edits so they persist through reorder after `fig-input-color` disconnect/reconnect.
1541
+ - Fixed `fig-input-color` hex text display to strip the leading `#`.
1542
+ - Fixed parent `disabled` handling for tabs and segments so already-disabled children are not incorrectly cleared.
1543
+
1544
+ ## [6.11.0]
1545
+
1546
+ ### Added
1547
+
1548
+ - Added `fig-reorder` lab component for drag-reordering direct children, with optional handle selector, axis control, and `reorder` event.
1549
+ - Added `size` attribute to `fig-input-gradient`; passes through to the internal `fig-swatch`.
1550
+ - Added playground attributes support for `fig-reorder` and `fig-input-gradient` size.
1551
+ - Added playground event logging for `reorder` events.
1552
+ - Added browser tests and lab fixture coverage for `fig-reorder`.
1553
+
1554
+ ### Changed
1555
+
1556
+ - Moved fill picker gradient color interpolation controls below stops with an updated header and label.
1557
+ - Updated oscillator amplitude and frequency handles to show axis-specific drag cursors while dragging.
1558
+ - Adjusted `fig-header` spacing when a leading `fig-dropdown` is present.
1559
+
1560
+ ## [6.10.0]
1561
+
1562
+ ### Added
1563
+
1564
+ - Added `elastic` and `size` attributes to `fig-field-slider`.
1565
+ - Added `compact` styling for `fig-header` and `fig-group`.
1566
+ - Reworked `fig-input-oscillator` wave rows into collapsible `fig-group` sections with per-row add and remove controls.
1567
+
1568
+ ### Changed
1569
+
1570
+ - Changed `fig-input-oscillator` parameter fields to use `fig-field-slider`.
1571
+ - Changed oscillator add-form control to an inline header action that inserts a waveform after the current row.
1572
+ - Updated oscillator and field-slider playground attribute panels.
1573
+
1574
+ ### Fixed
1575
+
1576
+ - Fixed `fig-field-slider` drag lock when used inside `fig-input-oscillator`.
1577
+ - Fixed duplicate waveform insertion when choosing a type from the add-form menu.
1578
+ - Fixed add-form and remove controls toggling wave group collapse.
1579
+
1580
+ ## [6.9.9]
1581
+
1582
+ ### Fixed
1583
+
1584
+ - Fixed `fig-field-slider` elastic pull so repeated drags keep tracking reliably.
1585
+
1586
+ ### Changed
1587
+
1588
+ - Changed `fig-field-slider` elastic pull to use scale-based stretching with a springier return and slightly longer pull distance.
1589
+
1590
+ ## [6.9.8]
1591
+
1592
+ ### Changed
1593
+
1594
+ - Changed media caption child support and generated captions to use native `figcaption` instead of `caption`.
1595
+
1596
+ ## [6.9.7]
1597
+
1598
+ ### Added
1599
+
1600
+ - Added caption support for `fig-media`, `fig-image`, and `fig-video`.
1601
+ - Added blank caption fields to the PropKit and FigUI3 attributes panels for media examples.
1602
+
1603
+ ### Changed
1604
+
1605
+ - Refined text wrapping defaults and footer action wrapping.
1606
+
1607
+ ## [6.9.6]
1608
+
1609
+ ### Fixed
1610
+
1611
+ - Fixed `fig-media` generated controls so duplicate `fig-media-controls` rows are reused and cleaned up.
1612
+ - Fixed `fig-tab-content` block layout styling.
1613
+
1614
+ ### Added
1615
+
1616
+ - Added composable oscillator controls.
1617
+
1618
+ ## [6.9.5]
1619
+
1620
+ ### Fixed
1621
+
1622
+ - Fixed `fig-joystick` rotated side axis labels sitting too far from the edge.
1623
+
1624
+ ## [6.9.4]
1625
+
1626
+ ### Fixed
1627
+
1628
+ - Fixed `fig-field-slider` handle edge positioning across range, delta, hue, opacity, and stepper variants.
1629
+ - Fixed `fig-field-slider` right-click reset menu positioning.
1630
+ - Fixed full-width layout behavior for `fig-header`, `fig-group`, and `fig-content`.
1631
+
1632
+ ### Changed
1633
+
1634
+ - Added `fig-field-slider` reset-to-default interactions and elastic edge feedback.
1635
+ - Added context menu support for `fig-menu` and documented programmatic `showAt(x, y)` usage.
1636
+ - Added support for custom `fig-field-slider` labels and inline SVG content inside `fig-icon`.
1637
+ - Refined hue and opacity field slider visual fades.
1638
+
1639
+ ## [6.9.3]
1640
+
1641
+ ### Changed
1642
+
1643
+ - Refined PropKit playground example alignment.
1644
+
1645
+ ## [6.9.2]
1646
+
1647
+ ### Changed
1648
+
1649
+ - Documented the `sticky` attribute for `fig-footer`.
1650
+ - Updated playground layout spacing for FigUI3 examples.
1651
+
1652
+ ## [6.9.1]
1653
+
1654
+ ### Fixed
1655
+
1656
+ - Fixed paragraph/list text defaults so plugin content uses secondary text color consistently.
1657
+ - Fixed the PropKit plugin alt demo width to better match the embedded panel.
1658
+
1659
+ ### Changed
1660
+
1661
+ - Updated FigUI3 agent guidance to preserve existing dev/playground servers during checks.
1662
+
1663
+ ## [6.9.0]
1664
+
1665
+ ### Fixed
1666
+
1667
+ - Fixed cross-browser media preview sizing so `fig-image`, `fig-media`, `fig-video`, and `fig-preview` fill their preview surface consistently in Safari and Chrome.
1668
+ - Fixed `fig-easing-curve` handle positioning in Safari by avoiding absolute-positioned `fig-handle` children inside SVG `foreignObject` handles.
1669
+ - Fixed `fig-input-fill` and `fig-input-color` value cells so solid, gradient, image, and color inputs size and truncate consistently.
1670
+ - Fixed fill picker header overflow caused by the color gamut selector and close button layout.
1671
+ - Fixed segmented control icon alignment by centering segment contents with flex layout.
1672
+ - Fixed horizontal chooser gradient previews from collapsing by preserving a minimum choice and gradient width.
1673
+
1674
+ ### Changed
1675
+
1676
+ - Styled native `<progress>` controls to match FigUI slider tracks, including determinate and indeterminate states.
1677
+ - Updated paragraph and content defaults for more predictable text rhythm in plugin layouts.
1678
+ - Updated playground video examples to use a larger randomized demo video pool.
1679
+
1680
+ ## [6.8.8]
1681
+
1682
+ ### Changed
1683
+
1684
+ - Added default section and fieldset padding for plugin content layout.
1685
+ - Updated the PropKit iframe demo with a canvas gradient preview.
1686
+
1687
+ ## [6.8.7]
1688
+
1689
+ ### Fixed
1690
+
1691
+ - Fixed `fig-chooser` selection scrolling so clicked and keyboard-selected choices center reliably after layout or size changes.
1692
+
1693
+ ## [6.8.6]
1694
+
1695
+ ### Fixed
1696
+
1697
+ - Fixed `fig-joystick` X/Y number fields not syncing when dragging the handle or clicking the plane.
1698
+
1699
+ ### Changed
1700
+
1701
+ - `fig-header` height now uses a `--fig-header-height` custom property; reset `fig-group` header `h3` margin.
1702
+
1703
+ ## [6.8.5]
1704
+
1705
+ ### Fixed
1706
+
1707
+ - Fixed `fig-tabs` overflow controls to stay pinned while focused tabs scroll into view.
1708
+ - Fixed overflow control activation to use click handling instead of pointer-down handling.
1709
+
1710
+ ### Changed
1711
+
1712
+ - Updated `fig-tabs` and `fig-chooser` overflow spacing.
1713
+ - Updated Tabs playground examples to show tab content source while keeping child controls out of Attributes View.
1714
+
1715
+ ## [6.8.4]
1716
+
1717
+ ### Fixed
1718
+
1719
+ - Fixed dialog `fig-content` sizing so content areas can flex and scroll correctly.
1720
+
1721
+ ## [6.8.3]
1722
+
1723
+ ### Fixed
1724
+
1725
+ - Fixed resizable dialogs forcing a `12rem` minimum width.
1726
+
1727
+ ## [6.8.2]
1728
+
1729
+ ### Fixed
1730
+
1731
+ - Fixed dialog and popup max width so narrow viewports respect available space.
1732
+
1733
+ ### Changed
1734
+
1735
+ - Restored the PropKit iframe demo header to the standard bordered style.
1736
+
1737
+ ## [6.8.1]
1738
+
1739
+ ### Fixed
1740
+
1741
+ - Fixed the PropKit iframe demo header to render borderless.
1742
+
1743
+ ### Changed
1744
+
1745
+ - Refined `fig-content` spacing for grouped content layouts.
1746
+
1747
+ ## [6.8.0]
1748
+
1749
+ ### Fixed
1750
+
1751
+ - Fixed `fig-field` setup so labels inserted after connection get focus/toggle behavior and overflow tooltips.
1752
+
1753
+ ### Changed
1754
+
1755
+ - Updated `fig-spinner` to use encoded icon masks, with small-size mask support.
1756
+ - Updated playground controls and PropKit examples for field labels, chooser grid layout, and footer working states.
1757
+
1758
+ ### Added
1759
+
1760
+ - Added `size="small"` support for `fig-spinner`.
1761
+ - Added Playwright coverage for dynamic `fig-field` label tooltip behavior.
1762
+
1763
+ ## [6.7.4]
1764
+
1765
+ ### Fixed
1766
+
1767
+ - Fixed `fig-slider` text inputs not updating the range value after listener binding moved ahead of number input lookup.
1768
+
1769
+ ### Added
1770
+
1771
+ - Added Playwright coverage for `fig-slider` text input and range value synchronization.
1772
+
1773
+ ## [6.7.3]
1774
+
1775
+ ### Fixed
1776
+
1777
+ - Fixed `fig-tabs` and `fig-chooser` overflow controls so options remain direct light-DOM children for React-safe rendering.
1778
+ - Fixed `fig-chooser` start overflow buttons showing before the user scrolls in initially-overflowed examples.
1779
+ - Fixed horizontal `fig-chooser` choices shrinking and visually losing gaps in compact color chooser examples.
1780
+ - Fixed chooser playground controls so `Columns` only appears for grid layout and chooser overflow/max-size controls appear consistently.
1781
+ - Fixed vulnerable dev dependency lockfile entries for Vite, PostCSS, Picomatch, and Brace Expansion.
1782
+
1783
+ ### Changed
1784
+
1785
+ - Updated chooser playground examples with more palette and gradient presets.
1786
+
1787
+ ## [6.7.2]
1788
+
1789
+ ### Fixed
1790
+
1791
+ - Fixed `fig-header` ghost icon button negative margin applying to clear buttons inside `fig-input-text`.
1792
+
1793
+ ## [6.7.1]
1794
+
1795
+ ### Fixed
1796
+
1797
+ - Fixed `fig-tooltip` staying open when the pointer leaves the window or document.
1798
+ - Fixed `fig-tooltip` staying open when the pointer leaves an iframe: dismisses on `frameElement` mouseleave, `figui:dismiss-tooltips` postMessage from parent `fig-dialog` iframes, and document exit listeners.
1799
+
1800
+ ### Added
1801
+
1802
+ - Added Playwright coverage for tooltip dismiss on document and iframe exit.
1803
+
1804
+ ## [6.7.0]
1805
+
1806
+ ### Fixed
1807
+
1808
+ - Fixed `fig-tooltip` warmup so hopping between tooltips after one is shown is instant again: warmup now lasts 1s after show/hide, includes open/recently-hidden tooltips, and warm hops show synchronously.
1809
+
1810
+ ### Changed
1811
+
1812
+ - `fig-footer` switches to a vertical layout when there are multiple actions (including tooltip-wrapped buttons).
1813
+ - `fig-footer` centers label-only footers with no buttons.
1814
+ - Playground footer examples: split long-label variants into separate examples and removed the long-label attributes toggle.
1815
+
1816
+ ### Added
1817
+
1818
+ - Playground footer examples: **Waiting**, **Long label**, **Long label/many actions** (with disabled-button tooltips), and **Lots of things**.
1819
+ - `fig-footer` `.fig-footer-action` wrapper pattern for tooltips on disabled buttons.
1820
+
1821
+ ## [6.6.6]
1822
+
1823
+ ### Fixed
1824
+
1825
+ - Fixed `fig-tooltip` hover tooltips not dismissing when the host uses `display: contents` (e.g. character grid tiles) by binding pointer events to the trigger child instead of the tooltip element.
1826
+ - Fixed multiple hover tooltips stacking open at once — only one hover tooltip is shown at a time.
1827
+ - Fixed `fig-tooltip` `delay` being ignored when moving between tiles; warmup now applies only when re-hovering the same tooltip, and the popup is created after the delay elapses.
1828
+ - Fixed popover tooltips not fully closing on destroy by calling `hidePopup()` before removal.
1829
+
1830
+ ### Added
1831
+
1832
+ - Added playground **Plugin (alt)** example with a static character-finder iframe demo (`plugin-alt.html`).
1833
+ - Added Playwright coverage for tooltip delay and `display: contents` hover dismissal.
1834
+
1835
+ ## [6.6.5]
1836
+
1837
+ ### Fixed
1838
+
1839
+ - Fixed `fig-popup` tooltips not repositioning when shown via the Popover API (`:popover-open` without `:open`).
1840
+ - Fixed tooltips stuck at the viewport top edge by flipping below the anchor when top placement overflows.
1841
+ - Fixed missing tooltip beaks after edge flip by no longer auto-hiding the pointer when alignment is imperfect.
1842
+ - Fixed tooltip popups inflating iframe/plugin autoresize by portaling them into a zero-size `[data-figui-overlay-root]` container.
1843
+
1844
+ ### Changed
1845
+
1846
+ - Updated playground `iframe.html` to load local `/fig.js` + `/fig.css` and include a search `fig-header` example.
1847
+
1848
+ ### Added
1849
+
1850
+ - Added Playwright coverage for popover tooltips, top-edge flip, and bottom beak visibility.
1851
+
1852
+ ## [6.6.4]
1853
+
1854
+ ### Fixed
1855
+
1856
+ - Fixed `fig-popup` tooltip/popover positioning at viewport edges: anchor-aware clamping keeps the beak on the anchor when possible, uses `visualViewport` bounds, prefers better placements when center overflows, and hides the pointer when alignment is impossible.
1857
+
1858
+ ### Added
1859
+
1860
+ - Added Playwright coverage for edge-anchored tooltip beak alignment.
1861
+
1862
+ ## [6.6.3]
1863
+
1864
+ ### Fixed
1865
+
1866
+ - Fixed `fig-header` layout when it contains only a `fig-input-text` by applying negative side margins to align with header padding.
1867
+ - Removed inherited text color from `fig-popup` tooltips so content uses its own color tokens.
1868
+
1869
+ ## [6.6.2]
1870
+
1871
+ ### Fixed
1872
+
1873
+ - Fixed `fig-input-text` search clear icon missing after reconnect by using `fig-icon name="close"` instead of imperative `--icon` styling.
1874
+ - Fixed framework remount/reconnect bugs across inputs and controls: skip redundant `innerHTML` rebuilds, guard duplicate DOM wiring, and repair generated affordances on reconnect.
1875
+ - Fixed `fig-dropdown` duplicating its internal `<select>` when reconnected.
1876
+ - Fixed `fig-slider`, `fig-options`, `fig-combo-input`, `fig-input-color`, `fig-origin-grid`, `fig-joystick`, and `fig-3d-rotate` rebuilding duplicate markup or leaking listeners on reconnect.
1877
+ - Fixed `fig-button` re-rendering shadow DOM and duplicating click listeners on every reconnect.
1878
+ - Added `figNextFrame()` guards so deferred `connectedCallback` work is skipped after disconnect.
1879
+
1880
+ ### Added
1881
+
1882
+ - Added reconnect resilience Playwright coverage for search clear, password toggle, dropdown, slider, options, combo input, color input, origin grid, and joystick.
1883
+
1884
+ ## [6.6.1]
1885
+
1886
+ ### Fixed
1887
+
1888
+ - Fixed `fig-tabs` so user tab selection emits `input` and `change` events for event output and integrations.
1889
+
1890
+ ## [6.6.0]
1891
+
1892
+ ### Added
1893
+
1894
+ - Added `columns` support for `fig-chooser layout="grid"` to control grid column count.
1895
+
1896
+ ### Changed
1897
+
1898
+ - Updated the `/figui3` chooser grid example to use 10 full-width random image choices.
1899
+
1900
+ ### Fixed
1901
+
1902
+ - Fixed explicit aspect-ratio media previews so `fig-image full aspect-ratio="1/1"` can render square in narrow grid cells.
1903
+
1904
+ ## [6.5.1]
1905
+
1906
+ ### Changed
1907
+
1908
+
1909
+ ## [6.5.0]
1910
+
1911
+ ### Added
1912
+
1913
+ - Added shared `.fig-overflow` button styling for scroll overflow controls.
1914
+ - Added examples for tab overflow plus header accessory text and search header patterns.
1915
+
1916
+ ### Changed
1917
+
1918
+ - Changed `fig-chooser` overflow buttons from sticky in-flow controls to absolute light-DOM overlays.
1919
+ - Changed overflowing `fig-tabs` so selecting a tab centers it in the scroll view like `fig-chooser`.
1920
+
1921
+ ### Fixed
1922
+
1923
+ - Fixed `fig-chooser` rebuilds via `innerHTML` so the light-DOM overflow buttons are restored after app code replaces choices.
1924
+ - Fixed overflowing `fig-tabs` so they expose start/end overflow buttons without moving the page.
1925
+
1926
+ ## [6.4.8]
1927
+
1928
+ ### Fixed
1929
+
1930
+ - Fixed `fig-input-text` and multiline textarea focus styling so inner native controls suppress their own ring and the host draws the shared focus outline.
1931
+
1932
+ ## [6.4.7]
1933
+
1934
+ ### Added
1935
+
1936
+ - Added focused Playwright accessibility coverage for media, form primitives, selection controls, overlays, loading indicators, display swatches, handles, color tips, layers, and toast live regions.
1937
+ - Added an axe-powered accessibility smoke suite covering representative form, selection, media, overlay, and loading fixtures.
1938
+ - Added regression coverage for combo input labels, fill picker controls, keyboard handles, overlay focus restoration, slider defaults, segmented focus movement, palette expansion, group semantics, image overlays, joystick/origin-grid handles, and skeleton tab suppression.
1939
+ - Added performance test scaffolding, budgets, and `npm run test:perf` / `npm run test:all` commands for render and runtime checks.
1940
+ - Added `fig-toast` and `fig-layer` registration/coverage in the main component contract flow.
1941
+ - Added a playground "Multiple radios" example to show independent, non-grouped radio tab behavior.
1942
+
1943
+ ### Changed
1944
+
1945
+ - Reworked `fig-media`, `fig-image`, and `fig-video` so generated media is contained in `fig-preview` and generated video controls attach below the preview instead of overlaying the media surface.
1946
+ - Improved accessible names, ARIA state sync, disabled behavior, and keyboard support across buttons, combo inputs, dropdowns, checkboxes, radios, switches, text inputs, number inputs, fields, sliders, color inputs, fill inputs, fill pickers, tabs, segmented controls, menus, dialogs, popups, toasts, chits, handles, color tips, joystick, origin grid, easing curves, spinners, shimmers, skeletons, and layers.
1947
+ - Updated shared focus styling with a stronger `--figma-focus-outline`, component-specific offsets, and the new inheritable `--figma-focus-outline-radius` token.
1948
+ - Updated `fig-slider type="range"` so an omitted `value` defaults to the midpoint of `min` and `max`, matching native range behavior.
1949
+ - Updated media and image custom overlays to use light-DOM `slot="overlay"` placement instead of reparenting child nodes, preserving framework ownership.
1950
+ - Documented accessibility coverage, media preview composition, keyboard patterns, loading semantics, fill/media naming guidance, overlay slots, focus tokens, and verification commands in the README, changelog, contributing guide, and playground component descriptions.
1951
+
1952
+ ### Fixed
1953
+
1954
+ - Fixed `fig-button type="select"` and combo-input select affordances so native controls keep accessible labels while the wrapper shows the correct focus state and opens the picker on keyboard activation.
1955
+ - Fixed `fig-fill-picker` icon-only buttons, generated dropdowns, swatches, gradient controls, and media controls so they expose usable labels and keyboard states.
1956
+ - Fixed keyboard movement and focus retention for `fig-handle`, `fig-easing-curve`, `fig-joystick`, and `fig-origin-grid`.
1957
+ - Fixed focus return for dialogs, popups, and tooltips after Escape or close interactions.
1958
+ - Fixed focus outlines for tabs, segments, palette rows, groups, handles, switches, checkboxes, radios, composite color/fill fields, and lab sliders.
1959
+ - Fixed `fig-input-palette` so the collapsed palette has one tab stop, expands on Enter/Space, and suppresses chunky nested swatch outlines.
1960
+ - Fixed `fig-input-gradient` focus behavior so editable gradients tab to the first stop handle, static gradients focus the host, and picker gradients open the fill picker from Enter/Space.
1961
+ - Fixed `fig-group` headers so collapsible groups expose `role`, `aria-expanded`, keyboard toggle behavior, and the shared focus outline.
1962
+ - Fixed `fig-image` custom overlay controls so they stay over the preview and remain visible during hover, focus, and active interaction.
1963
+ - Fixed `fig-skeleton` so descendant placeholder controls are inert and skipped by Tab.
1964
+ - Fixed generated icon-only media/file controls and dialog close controls so they expose accessible names.
1965
+ - Fixed generated media upload overlays to remain keyboard reachable while preserving the visible preview surface.
1966
+
1967
+ ## [6.4.0]
1968
+
1969
+ ### Added
1970
+
1971
+
1972
+ ### Changed
1973
+
1974
+ - Refined default slider tick sizing.
1975
+
1976
+ ## [6.3.0]
1977
+
1978
+ ### Added
1979
+
1980
+ - Added Playwright component contract tests covering every `fig.js` web component.
1981
+ - Added a playground `/tests` route with visual fixtures generated from the shared component manifest.
1982
+ - Added project testing skills for web component and CSS validation.
1983
+
1984
+ ## [6.2.0]
1985
+
1986
+ ### Added
1987
+
1988
+
1989
+ ### Changed
1990
+
1991
+
1992
+ ### Fixed
1993
+
1994
+
1995
+ ## [6.1.1]
1996
+
1997
+ ### Fixed
1998
+
1999
+ - Origin grid overflow handles now keep their icon-only treatment.
2000
+
2001
+ ## [6.1.0]
2002
+
2003
+ ### Added
2004
+
2005
+
2006
+ ### Changed
2007
+
2008
+ - Refined lab field slider styling.
2009
+
2010
+ ## [6.0.0]
2011
+
2012
+ ### Breaking
2013
+
2014
+ - `fig-handle` now uses `tip="color"`, `tip="add"`, or `tip="remove"` for persistent color tips. The old handle `color-tip` and `control` attributes were removed.
2015
+
2016
+ ### Added
2017
+
2018
+ - `fig-input-gradient` now supports `mode="handle"` and `mode="tip"` for color stop handle presentation.
2019
+
2020
+ ### Changed
2021
+
2022
+ - `fig-input-gradient` now defaults to `mode="handle"`; use `mode="tip"` for persistent color tips on gradient stops.
2023
+ - Refined `fig-input-gradient` handle sizing, border radius, and ghost handle stacking.
2024
+ - Disabled `fig-handle`s now render without elevation.
2025
+
2026
+ ## [5.1.1]
2027
+
2028
+ ### Fixed
2029
+
2030
+ - Restored classic script compatibility by removing module syntax from the built `fig.js` output.
2031
+ - Restored direct `fig-slider.value` reads for consumers using the host element property.
2032
+
2033
+ ## [5.1.0]
2034
+
2035
+ ### Added
2036
+
2037
+ - `fig-input-text type="search"` now adds a search icon and clear action.
2038
+ - `fig-input-text type="password"` now adds a show/hide password toggle.
2039
+ - Added visible and hidden icon tokens for medium and small `fig-icon` sizes.
2040
+ - `fig-fill-picker` image and video tabs now include rotate actions.
2041
+
2042
+ ### Changed
2043
+
2044
+ - Refined `fig-fill-picker` media preview spacing and webcam capture layout.
2045
+ - Updated `fig-field` examples and lab styles to use the default horizontal layout.
2046
+ - Improved secondary and input button hover/pressed states.
2047
+ - Refined easing editor, slider defaults, canvas handles, and layer label styling.
2048
+
2049
+ ### Fixed
2050
+
2051
+ - `fig-fill-picker` webcam captures now preview correctly and use blob URLs.
2052
+ - `fig-media` now clears uploaded file previews cleanly.
2053
+
2054
+ ## [5.0.0]
2055
+
2056
+ ### Breaking
2057
+
2058
+ - `fig-fill-picker` is now optional. Import `fig-editor.js` and `fig-editor.css` to register and style the full picker dialog.
2059
+ - `fig-input-color` no longer supports the `picker` attribute. It opens `fig-fill-picker` automatically when registered, otherwise it uses the native color input.
2060
+ - `picker-anchor` was removed. Picker popups anchor to the component that opens them.
2061
+
2062
+ ### Added
2063
+
2064
+ - New package exports: `@rogieking/figui3/fig-editor.js` and `@rogieking/figui3/fig-editor.css`.
2065
+ - `fig-input-color`, `fig-input-fill`, `fig-input-gradient`, `fig-handle type="color"`, and `fig-color-tip` now check for `fig-fill-picker` at interaction time.
2066
+
2067
+ ### Changed
2068
+
2069
+ - `fig.js` and `components.css` no longer include the full fill picker by default.
2070
+ - `fig-slider` now uses the compact modern appearance by default; use `variant="classic"` for the previous appearance.
2071
+ - `fig-slider` now shows its text input by default; use `text="false"` for compact slider-only controls.
2072
+ - `picker-*` attributes are still forwarded to `fig-fill-picker` when the optional picker is registered.
2073
+ - `fig-input-gradient edit="picker"` falls back to inline gradient editing when `fig-fill-picker` is unavailable.
2074
+ - `fig-handle type="color"` falls back to the native color picker when `fig-fill-picker` is unavailable.
2075
+ - `fig-input-color` now shows alpha/opacity controls by default; use `alpha="false"` to hide them.
2076
+ - `fig-color-tip` now preserves opacity from bare 4- and 8-digit hex values such as `CB0FFF5E`.
2077
+ - Playground imports the optional picker files explicitly and no longer uses removed `picker` or `picker-anchor` attributes.
2078
+
2079
+ ## [4.15.10]
2080
+
2081
+ ### Added
2082
+
2083
+ - PropKit Controls in dialogs: added an All Fields example with every field control using default `fig-field` layout.
2084
+
2085
+ ### Changed
2086
+
2087
+ - PropKit Attributes view uses `columns="2/5"` for attribute rows.
2088
+ - Playground sidebars use narrower nav and attributes widths.
2089
+ - `fig-handle`: default and color handles use clearer custom-property-driven styling.
2090
+ - `fig-media`/`fig-image` upload overlays are constrained to the preview width.
2091
+
2092
+ ## [4.15.9]
2093
+
2094
+ ### Changed
2095
+
2096
+ - `fig-handle type="color"` closes its color picker when dragging starts and uses an 8px popup offset.
2097
+
2098
+ ### Fixed
2099
+
2100
+ - `fig-fill-picker`: internal color-area handles no longer open nested color pickers.
2101
+
2102
+ ## [4.15.8]
2103
+
2104
+ ### Changed
2105
+
2106
+ - PropKit Design Token Editor keeps the standard 300px dialog width while using default horizontal field columns.
2107
+ - `fig-footer` vertical padding now uses `--spacer-2-5`.
2108
+
2109
+ ## [4.15.7]
2110
+
2111
+ ### Changed
2112
+
2113
+ - PropKit Animated Melty Gif dialog footer now uses the waiting-for-selection layout with an upload prompt before enabling placement.
2114
+ - `fig-footer` spacing now better supports label-driven action bars.
2115
+
2116
+ ## [4.15.6]
2117
+
2118
+ ### Changed
2119
+
2120
+ - PropKit header and footer container examples now focus on default usage, with footer states for waiting on selection and applying to a selection.
2121
+ - PropKit footer labels and actions now lay out cleanly with primary buttons pinned to the right.
2122
+
2123
+ ### Fixed
2124
+
2125
+ - PropKit Attributes view now shows `fig-footer` attributes directly instead of field attributes when editing standalone footers.
2126
+ - PropKit header attribute control now labels the header action toggle as "Button".
2127
+
2128
+ ## [4.15.5]
2129
+
2130
+ ### Added
2131
+
2132
+ - `fig-preview`: styled visual preview layer for arbitrary content such as images, canvas, SVG, and generated previews.
2133
+ - PropKit container examples for `fig-content`, `fig-header`, and `fig-footer`.
2134
+ - PropKit Animated Melty Gif dialog includes a collapsible "About this tool" section.
2135
+
2136
+ ### Changed
2137
+
2138
+ - `fig-fill-picker`: image and video tabs now use `fig-image` and `fig-media` upload components, keeping preview behavior consistent with the rest of FigUI.
2139
+ - `hstack`: vertically centers items by default and supports `align` overrides.
2140
+ - PropKit Preview canvas example now shows a shader-style preview.
2141
+ - PropKit plugin iframe More Info group is collapsed by default.
2142
+
2143
+ ### Fixed
2144
+
2145
+ - `fig-handle`: percentage values now remain responsive instead of being converted to fixed pixels, keeping gradient handles aligned when containers resize.
2146
+ - `fig-fill-picker`: gradient stop handles refresh correctly when switching into the Gradient tab from another fill type.
2147
+
2148
+ ## [4.15.4]
2149
+
2150
+ ### Added
2151
+
2152
+ - PropKit button examples with labeled and unlabeled action rows.
2153
+ - `fig-field`: `columns="2/5"` layout ratio for compact dialog rows.
2154
+ - Checkerboard sizing tokens for chits, sliders, and handles.
2155
+
2156
+ ### Changed
2157
+
2158
+ - PropKit dialog examples use 300px dialogs and half-column internal fields, with the design token editor using `columns="2/5"`.
2159
+ - `fig-input-palette`: expanded color rows always show alpha controls, and palette fields get tighter layout behavior inside `fig-field`.
2160
+ - Attribute panel label for `checkerboard` is now "Checkered".
2161
+ - PropKit plugin iframe More Info copy now uses short instructional paragraphs.
2162
+ - Opacity slider and handle checkerboards use component-specific checkerboard sizing.
2163
+
2164
+ ## [4.15.3]
2165
+
2166
+ ### Added
2167
+
2168
+ - `fig-handle`: `color-tip` attribute restores the compact color-tip interaction when needed.
2169
+
2170
+ ### Changed
2171
+
2172
+ - `fig-handle type="color"` now opens the solid fill picker directly by default while preserving `{ color, opacity }` input/change events.
2173
+ - `fig-input-gradient`: color stop handles opt into `color-tip` to keep the compact gradient-stop editing workflow.
2174
+ - `fig-menu`: popup placement happens before reveal and arrow-key navigation works from the trigger.
2175
+ - `fig-input-color`: tab flow skips nested swatch color inputs when a text input is present.
2176
+ - `fig-input-palette`: inline swatches are passive previews; clicking the inline strip or add button expands the palette; remove buttons include "Remove color" tooltips.
2177
+
2178
+ ### Fixed
2179
+
2180
+ - `fig-input-palette`: remove buttons re-enable after adding colors back above the minimum.
2181
+ - `fig-color-tip`: compact tip positioning is anchored correctly for non-drag color handles.
2182
+
2183
+ ## [4.15.2]
2184
+
2185
+ ### Fixed
2186
+
2187
+ - `fig-menu`: reopening after dismiss (outside click, Escape) works again — `fig-popup` now calls native `dialog.close()` via `:open` so the menu `open` state stays in sync; trigger ignores stale `open` when the popup is not showing.
2188
+
2189
+ ## [4.15.1]
2190
+
2191
+ ### Changed
2192
+
2193
+ - Propkit plugin iframe demo loads FigUI from `unpkg.com/@rogieking/figui3@latest` again (was local `/fig.css` and `/fig.js`).
2194
+
2195
+ ## [4.15.0]
2196
+
2197
+ ### Added
2198
+
2199
+ - `fig-icon` component — masked icons via `name`; `size="small"` (1rem) or `medium` (1.5rem, default); `color` sets fill via `background-color` (Figma icon tokens).
2200
+
2201
+ ### Changed
2202
+
2203
+ - **Breaking:** Icon design tokens renamed by artboard size: `--icon-16-*` (16×16) and `--icon-24-*` (24×24). Update custom CSS from e.g. `var(--icon-close)` to `var(--icon-24-close)`.
2204
+ - Library internals: `fig-mask-icon` spans replaced with `<fig-icon>` (dialog close, palette add/remove, fill picker, easing curve, chooser nav, media controls, etc.). Legacy `.fig-mask-icon` CSS still supported.
2205
+ - `fig-handle`: no longer auto-sets `type="canvas"` when `type` is omitted (default is the base brand dot handle).
2206
+
2207
+ ## [4.14.1]
2208
+
2209
+ ### Changed
2210
+
2211
+ - `:root.figma-light` / `:root.figma-dark`: set `color-scheme` and `background-color` from `--figma-color-bg`.
2212
+ - `fig-dialog`: `--dialog-radius` token; child `iframe` uses matching bottom corner radius.
2213
+
2214
+ ## [4.14.0]
2215
+
2216
+ ### Added
2217
+
2218
+ - `fig-input-palette` `fixed` attribute — when present or `fixed="true"`, palette length is locked (no add or remove buttons). Expanded rows show alpha controls when fixed.
2219
+
2220
+ ### Changed
2221
+
2222
+ - `fig-input-palette`: replaced `add` with `fixed` (breaking: use `fixed` instead of `add="false"` for preset palettes).
2223
+ - `fig-input-palette`: color swatches use the native color picker instead of `fig-fill-picker`.
2224
+ - `fig-chit`: checkerboard layer uses new `--checkerboard-chit` token (14px tiles); `fig-handle` color swatch checkerboard matches.
2225
+
2226
+ ### Fixed
2227
+
2228
+ - `fig-input-palette`: inline chit strip layout — nested `fig-chit` styles, swatch dividers, and full-width strip when `fixed`.
2229
+ - `fig-combo-input`: joined-border radius rules no longer apply to nested `fig-chit`.
2230
+
2231
+ ## [4.13.1]
2232
+
2233
+ ### Added
2234
+
2235
+ - `fig-canvas-control` radius ring: new white halo outer circle painted behind the brand-colored radius circle (sandwiched between `.fig-canvas-control-radius-hit` and the brand circle). Both halo and brand strokes thicken to `--fig-canvas-control-line-stroke-width-hover` on hover/active so hover and active drag look identical.
2236
+ - `--fig-canvas-control-radius-stroke` / `--fig-canvas-control-radius-stroke-halo` CSS vars to override radius ring colors.
2237
+
2238
+ ### Changed
2239
+
2240
+ - `fig-canvas-control` radius ring default stroke now `--figma-color-border-brand` (was a translucent white).
2241
+ - `fig-canvas-control` `type="point-radius-angle"` during radius drag: the angle handle (and its hit-area) is now `pointer-events: none` so the body's rotation/resize cursor wins and the angle tooltip cannot show. Restored on pointer up.
2242
+ - `fig-color-tip` popup nudged up another 2px (from `bottom: calc(100% + 6px)` to `+ 8px`) for breathing room above the handle.
2243
+
2244
+ ### Fixed
2245
+
2246
+ - `fig-canvas-control` radius drag: angle tooltip no longer leaks in if the cursor passes over the angle handle mid-drag. Hover guard now also returns early when `#isRadiusDragging` is true, and the tooltip is force-hidden at the start of radius drag.
2247
+
2248
+ ### Added
2249
+
2250
+ - `fig-canvas-control`: hover tooltips for all handles (point, angle, second, radius). Tooltip appears on `pointerenter` and hides on `pointerleave`, gated by drag state so it never flickers during interaction.
2251
+ - `fig-canvas-control` radius: the radius tooltip now follows the cursor via a virtual anchor (during both hover and drag) and is nudged 8px above the cursor.
2252
+ - `fig-canvas-control` `type="point-point"`: the connecting line is now draggable. A 12px transparent hit-line under the visible line uses `cursor: move` and translates both points by the same delta, clamped so both endpoints stay within `[0%, 100%]`. Emits a single `input`/`change` cycle.
2253
+ - `fig-canvas-control` `type="color"`: hover tooltip now shown (previously suppressed). Auto-hides when the color picker (`fig-color-tip`) opens via a MutationObserver on the handle, and re-enables when it closes.
2254
+ - `fig-popup` `set anchor`: now accepts any object with a `getBoundingClientRect()` method (virtual anchor), not just `Element` instances. Anchor-dependent code paths (`classList`, `contains`, ResizeObserver) are guarded so virtual anchors work safely.
2255
+
2256
+ ### Changed
2257
+
2258
+ - `fig-canvas-control`: all handle tooltips (point, angle, second, point-point line drag) are now hidden during drag rather than shown. Hover guards also check drag state so tooltips can't be re-shown mid-drag from a stray `pointerenter`.
2259
+ - `fig-handle[type="color"]` `fig-color-tip`: nudged the picker popover up by 4px (from `bottom: calc(100% + 2px)` to `+ 6px`).
2260
+ - Propkit dialogs (Rename, Shadow, Progressive Blur, Photo Stack, Export Settings, Design Token Editor, Prepress, Animated Melty Gif): dialog body content is now wrapped in `<fig-content>` so the scroll region and `fig-footer` placement matches the recommended structure. The Plugin dialog (which hosts an iframe) is intentionally left alone.
2261
+ - Lab Color canvas example: `name` changed from "Position" to "Click to edit color".
2262
+
2263
+ ### Fixed
2264
+
2265
+ - `fig-chooser` `layout="grid"`: the start nav button no longer shows up at the top when scrolled to the start. In grid mode the sticky `position: sticky` + negative-margin chevron trick used by flex layouts didn't collapse, so the nav buttons took real grid rows and pushed `scrollTop` to a non-zero value at "start". Grid mode now skips creating nav buttons entirely (and CSS hides them as a safety belt); use `overflow="scrollbar"` for native scrolling when grid content overflows.
2266
+ - `fig-chooser` `#syncOverflow`: added a `scrollable` guard so `overflow-start` / `overflow-end` classes are only applied when the chooser actually has overflow beyond a 2px threshold. Prevents spurious nav buttons when content fits exactly.
2267
+ - `fig-chooser`: `layout` is now an observed attribute; switching layout at runtime re-applies overflow mode and re-syncs nav button visibility immediately.
2268
+
2269
+ ### Changed
2270
+
2271
+ - `fig-chooser` `layout="grid"`: now uses `column-gap` + `row-gap` (both `--fig-chooser-gap`) with `fig-choice { margin: 0 !important }` so choices flow naturally into a 2-column grid without doubled spacing from the base flex `margin-block-end`.
2272
+
2273
+ ### Fixed
2274
+
2275
+ - `select > button` (customized select closed-state button): switched from `display: inline-block` (which silently ignored `align-items`/`justify-content`) to `display: inline-flex` with `justify-content: flex-start` so children align left and vertically center as intended.
2276
+ - `select`: removed the now-unneeded `&:has(> button) { padding-left: 0 }` override since the flex button already controls its own inner padding.
2277
+
2278
+ ## [4.12.0]
2279
+
2280
+ ### Added
2281
+
2282
+ - `fig-chooser` nav buttons now render an explicit `.fig-mask-icon.fig-chooser-nav-chevron` span (using `--icon: var(--icon-chevron)` and `--size: 1rem`) instead of a CSS `::after` pseudo-element. Rotation is still handled by class-scoped CSS (180° for nav-start, ±90° for horizontal layout).
2283
+ - `fig-chooser` nav buttons: `box-shadow` border edge switched from `--figma-color-border` to `--figma-color-bordertranslucent` for a softer divider.
2284
+
2285
+ ### Changed
2286
+
2287
+ - `fig-chooser`: removed the `padding` attribute entirely (was `padding="false"` to drop internal padding). The chooser no longer reads or styles a `padding` attribute; use `--fig-chooser-gap` and `fig-choice` padding controls instead. `fig-choice`'s own `padding` attribute is unchanged.
2288
+ - Propkit Chooser examples (Text, Images, Images + Labels, Colors, Palettes, Gradients): the wrapping `fig-field` now defaults to `direction="vertical"` so the chooser gets full panel width.
2289
+ - Propkit Chooser Text + Images + Labels examples: every `fig-choice` now has `padding` set so the selection ring frames the content with breathing room.
2290
+
2291
+ ### Removed
2292
+
2293
+ - `fig-chooser` `padding` from `observedAttributes`, the `&[padding="false"]` CSS block, the playground attributes rule, and the README attributes table row.
2294
+
2295
+ ### Added
2296
+
2297
+ - `fig-media`, `fig-image`, `fig-video`: new `size` attribute (`small` = 2rem, `medium` = 4rem, `large` = 6rem) for quick fixed-size media tiles. Exposes a `--fig-media-size` CSS var that drives both `max-width` and `max-height`.
2298
+ - `fig-handle`: new `type="canvas"` variant (used by `fig-canvas-control` for angle/second/non-color handles). Handles now default to `type="canvas"` when no type is set, and the canvas variant renders the `::after` indicator like `type="color"`.
2299
+ - Playground attributes panel: `type` enum (default/color/canvas) added for `fig-handle`.
2300
+
2301
+ ### Changed
2302
+
2303
+ - `fig-chooser`: initial scroll-to-selected is now reliable. After connect, the chooser waits for any child `<img>`/`<video>` media to load (or error) and then re-centers the selected choice without animation, so the first paint already lands on the right item. `#scrollToChoice` now measures via `getBoundingClientRect` instead of `offsetTop/Left`, so nested transforms and shadow layouts no longer offset the math.
2304
+ - `fig-chooser` nav buttons: replaced the linear-gradient fades with solid `var(--figma-color-bg)` backgrounds + a 1px `box-shadow` border on the leading/trailing edge (top/bottom for vertical, left/right for horizontal). No more hover-only border flash.
2305
+ - `fig-lab` `fig-canvas-control`: angle, second-point, and non-color handles now explicitly set `type="canvas"` so they pick up the new shared styling.
2306
+ - Propkit Chooser "Style" example: switched the inline `fig-image` tiles from `size="auto"` to `size="small"` for a tighter, consistent thumbnail row.
2307
+
2308
+ ### Fixed
2309
+
2310
+ - `components.css`: invalid `gap: var(--spacer-1),0.25rem;` on `fig-select > button` (stray comma + extra value) reverted to `gap: var(--spacer-1);`.
2311
+ - `fig-select`: closed-state padding now reserves room for the chevron (`0 var(--spacer-4) 0 var(--spacer-2)`) so long values no longer collide with the icon.
2312
+ - `fig-select` customized-button with a leading `<svg>`: icon now hangs into the left padding via negative `margin-left` instead of removing the padding, keeping text alignment consistent across icon/no-icon buttons.
2313
+
2314
+ ## [4.10.2]
2315
+
2316
+ ### Added
2317
+
2318
+ - `/propkit` Chooser: new "Gradients" example showcasing four distinct gradient styles (Sunset Glow, Aurora, Bubblegum hard-stops, Holographic 5-stop iridescence) using `fig-input-gradient` with `edit="false"` and `disabled`.
2319
+
2320
+ ## [4.10.1]
2321
+
2322
+ ### Added
2323
+
2324
+ - `fig-media-controls`: bidirectional sync with parent `fig-media`/`fig-video` is now robust during scrubbing — uses a pending-seek guard so the slider doesn't snap back while the browser settles on a seek target. Adds a `seeked` listener so loop restarts immediately reset the scrubber to 0.
2325
+ - Native `<select multiple>` example in the `/figui3` Native elements group.
2326
+ - Checkbox group + disabled checkbox examples in `/figui3`.
2327
+ - Attribute rules: `checked` switch added to the Attributes panel for `fig-checkbox` and `fig-radio`.
2328
+
2329
+ ### Changed
2330
+
2331
+ - `fig-media-controls`: slider updates are now applied via `setAttribute("value", …)` so `FigSlider`'s interacting-guard keeps the user's drag stable.
2332
+
2333
+ ### Fixed
2334
+
2335
+ - Playground description rendering: section/example names containing HTML-like tokens (e.g. `<select>`) are now escaped before being injected via `dangerouslySetInnerHTML`, preventing a stray native `<select>` from appearing inside the description paragraph.
2336
+
2337
+ ## [4.10.0]
2338
+
2339
+ ### Added
2340
+
2341
+ - `<fig-media-controls>`: new standalone playback controls element. Renders a play/pause button (with `--icon-play`/`--icon-pause` mask icons), a `fig-slider` scrubber, and a `MM:SS` time display. Holds its own state via `playing` (boolean presence), `duration`, and `time` (number, seconds) attributes/properties. Emits `play`, `pause`, and `seek` events. Supports an `overlay` attribute to render as a bottom overlay over media.
2342
+ - `--icon-play` and `--icon-pause` design tokens (matching the `data:image/svg+xml` URL format used by the other `--icon-*` tokens).
2343
+
2344
+ ### Changed
2345
+
2346
+ - `fig-media`/`fig-video`: native `<video controls>` chrome is now always suppressed. When the host's `controls` attribute is enabled (or a user places a `<fig-media-controls>` child), the host wires it up bidirectionally — video → controls for `playing`/`duration`/`time`/`seeked`/loop reset, controls → video for `play`/`pause`/`seek`. Auto-generated controls get `overlay` by default.
2347
+ - `fig-media` now exposes a `mediaEl` getter and `play()`/`pause()`/`toggle()` methods.
2348
+
2349
+ ### Fixed
2350
+
2351
+ - `fig-input-palette`: restored the `disabled !== "false"` guard in the add-button click handler that had been accidentally removed (the dangling `&&` was throwing a SyntaxError and breaking the whole class).
2352
+ - `--icon-play` / `--icon-pause` tokens: replaced raw inline `<svg>` values with proper `url("data:image/svg+xml,...")` strings so they actually work as mask images.
2353
+
2354
+ ## [4.9.1]
2355
+
2356
+ ### Fixed
2357
+
2358
+ - `fig-media`, `fig-image`, `fig-video`: `fit="cover"` and other `object-fit` values now correctly apply to the inner `<video>`/`<img>` elements. The cover selector was missing the `>` child combinator and only targeted the generated class, so the rule never matched `<video>`. Inner media now sizes via `width/height: 100%` instead of `min-*` + `auto`, so `cover`, `fill`, and friends all render as expected.
2359
+
2360
+ ### Changed
2361
+
2362
+ - `fig-media`, `fig-image`, `fig-video`: default `aspect-ratio` is now `4/3` (both in CSS and in the connectedCallback) so media elements have a sensible aspect ratio out of the box when no `aspect-ratio` attribute is set.
2363
+ - `fig-media`: removed the `type` attribute from the playground attributes panel (type is determined by the example markup, not toggled at runtime).
2364
+
2365
+ ## [4.9.0]
2366
+
2367
+ ### Changed
2368
+
2369
+ - `fig-input-palette`: layout reworked to a 2-row grid. Row 1: inline palette + add button (right-aligned). Row 2: expanded color list spans the full width. When `add="false"`, the inline palette spans both columns.
2370
+ - `fig-input-palette`: expanded `fig-input-color` rows no longer expose alpha (`alpha="false"`) — alpha editing is still available in the inline pickers.
2371
+ - `fig-input-gradient`: dropped hardcoded `size="medium"` on the chit so it inherits the default chit sizing.
2372
+ - `fig-input-gradient`: stop and ghost handles now use `size="small"` to match Figma's compact gradient affordances.
2373
+
2374
+ ## [4.8.3]
2375
+
2376
+ ### Fixed
2377
+
2378
+ - Safari: `fig-dialog` and `fig-toast` no longer throw `Cannot access invalid private field` / `Cannot access private method` errors when running through the customized built-in polyfill. The polyfill prototype-swaps existing nodes without invoking the constructor, so all `#privateField` members in `FigDialog` and `FigToast` were converted to underscore-prefixed (`_name`) members and initialized via an idempotent `_figInit()` that runs from both the constructor and lifecycle callbacks.
2379
+ - `fig-dialog`: merged duplicate `static get observedAttributes()` and `attributeChangedCallback()` declarations. The second pair was overriding the first, so `autoresize` was never actually observed.
2380
+
2381
+ ### Changed
2382
+
2383
+ - Playground `/propkit` "Plugin" iframe page: load the Inter font from Google Fonts so the iframe content matches the figui3 system font.
2384
+
2385
+ ## [4.8.2]
2386
+
2387
+ ### Fixed
2388
+
2389
+ - `fig-color-tip`: `selected` attribute now correctly toggles off when the fill picker dialog closes. Replaced the brittle `document.querySelector(".fig-fill-picker-dialog[open]")` watcher with a `MutationObserver` on the inner `fig-chit`'s `selected` attribute, mirroring its state to the host.
2390
+
2391
+ ## [4.8.1]
2392
+
2393
+ ### Changed
2394
+
2395
+ - Playground `/propkit` "Plugin" iframe page: removed unused IBM Plex Mono Google Fonts stylesheet and a redundant `flex: 1 1 auto` on `body > fig-content`.
2396
+
2397
+ ## [4.8.0]
2398
+
2399
+ ### Added
2400
+
2401
+ - `fig-dialog[autoresize]`: when a `<fig-content>` is a direct child, it becomes the scroll region (`flex: 1 1 auto; overflow: auto; overscroll-behavior: contain`). The dialog itself sizes to content via `height: max-content` and is capped by the base `dialog` `max-height`. `fig-header` and `fig-footer` siblings remain pinned naturally without `position: sticky` (no rubber-band bounce).
2402
+
2403
+ ### Changed
2404
+
2405
+ - `fig-dialog` autoresize: replaced JS-driven content-height measurement with pure CSS (`height: max-content`). JS only clears stale inline heights now; iframe `postMessage` sizing path is unchanged.
2406
+ - `dialog` base styles: removed the unused `&[tooltip]` block (legacy attribute-style tooltip styling that was superseded by `dialog[is="fig-popup"][variant="tooltip"]`).
2407
+ - Playground `/propkit` "Plugin" iframe page: scroll moved from `body` to `body > fig-content`; `fig-footer` is no longer `position: sticky` (flex layout pins it naturally).
2408
+ - Playground `figui3` Dialog example: wraps content in `<fig-content>` with longer prose so scroll behavior is visible.
2409
+
2410
+ ## [4.7.1]
2411
+
2412
+ ### Changed
2413
+
2414
+ - Playground `/propkit` "Plugin" iframe page: merged the `.plugin-body` flex/scroll rules into the `body` element directly, eliminating the wrapper div so the footer stays pinned via `margin-top: auto` and content scrolls within body.
2415
+
2416
+ ## [4.7.0]
2417
+
2418
+ ### Added
2419
+
2420
+ - `fig-dialog`: listens for `{ type: "figui:iframe-resize", height, width }` `postMessage` events from a descendant iframe and resizes itself to fit the broadcasted content, accounting for header/footer/padding chrome. Pairs with the new `dialog` `max-height: calc(100vh - var(--spacer-4))` so dialogs grow up to the viewport and stop there.
2421
+ - Playground `/propkit` "Plugin" example: iframe page broadcasts its natural content size (`scrollHeight` of scrollable regions + rendered footer height) on load, on DOM mutations, on font readiness, and on any descendant `ResizeObserver` change so dialog stays in sync.
2422
+
2423
+ ### Changed
2424
+
2425
+ - `dialog` base styles: added `max-height: calc(100vh - var(--spacer-4))` so dialogs never overflow the viewport.
2426
+ - `fig-dialog`: cleans up the iframe `message` listener on disconnect.
2427
+ - Playground "Plugin" example: iframe `src` is now relative (`/propkit/iframe.html`) so the example always loads the locally deployed version of the iframe page.
2428
+
2429
+ ## [4.6.1]
2430
+
2431
+ ### Changed
2432
+
2433
+ - Playground "Plugin" dialog example: iframe now points to the absolute `https://rog.ie/propkit/iframe.html` URL so the example works outside the dev playground.
2434
+
2435
+ ## [4.6.0]
2436
+
2437
+ ### Added
2438
+
2439
+ - `fig-media`: new unified media host component supporting `type="image"` and `type="video"` with shared sizing (`size`, `aspect-ratio`, `fit`), `upload` overlay, and video attributes (`controls`, `autoplay`, `loop`, `muted`, `poster`).
2440
+ - `fig-video`: new video component built on the media host with playback attributes and optional upload overlay.
2441
+ - `fig-image`: added `alt` attribute, `size` token sizing, and updated default sizing model (host shrinkwraps to intrinsic image size).
2442
+ - Base styles: added default `iframe` rules so iframes flex naturally inside dialogs and other flex containers.
2443
+ - Playground (`/propkit`): new "Plugin" example under "Controls in dialogs" hosting plugin UI inside an iframe (`/propkit/iframe.html`) with parent/child resize broadcasting.
2444
+ - Playground (`/propkit`): new "Media" field example demonstrating `fig-media` inside a `fig-field` row.
2445
+ - Playground (`/figui3`): added Image, Media, and Video sections with examples covering image, video, poster, and upload modes.
2446
+ - Playground attributes panel: added rules for `fig-media` and `fig-video` (type, fit, upload, checkerboard, controls, autoplay, loop, muted, poster).
2447
+
2448
+ ### Changed
2449
+
2450
+ - `fig-image`: rewritten as a thin wrapper over the new media host. Renders a real `<img>` inside the element; `getBase64()` now uses the inner `<img>` element directly (requires CORS-clean source).
2451
+ - `dialog`: `dialog[open]` now uses `display: flex; flex-direction: column;` so dialog contents (including iframes) can flex correctly. Removed the old `fig-header` / `fig-footer` margin rules in `fig-dialog` in favor of in-dialog layout.
2452
+ - `fig-segment`: option labels are now `text-transform: capitalize` for consistency with segmented control styling.
2453
+ - Playground routing: trailing slashes in `/figui3`, `/propkit`, `/propkit/lab`, and `/sandbox` paths are normalized so `mode` resolution and base path matching no longer break for `/propkit/` style URLs.
2454
+ - Playground attribute resolver: enum option matching now normalizes whitespace and `/` separators so values like `16 / 9` resolve correctly against `16/9`-style options.
2455
+
2456
+ ### Fixed
2457
+
2458
+ - `fig-image` / `fig-media` / `fig-video`: chit placeholder is now properly hidden when a real media source (or video poster) is present, and shown when the source is empty.
2459
+ - Playground: `fig-image` upload overlay defaults are no longer accidentally toggled when controlling other attributes.
2460
+
2461
+ ## [4.5.3]
2462
+
2463
+ ### Fixed
2464
+
2465
+ - Playground routing: `/propkit/lab` is now the canonical Lab route, with automatic migration from legacy `/lab` URLs.
2466
+
2467
+ ### Changed
2468
+
2469
+ - `fig-field-slider` lab styling now applies horizontal layout styles to `fig-field[direction="horizontal"]` and adds focus-visible container treatment.
2470
+
2471
+ ## [4.5.2]
2472
+
2473
+ ### Changed
2474
+
2475
+ - Playground: section list now has vertical padding only for ungrouped lists, while grouped (`fig-group`) lists remain flush.
2476
+
2477
+ ## [4.5.1]
2478
+
2479
+ ### Fixed
2480
+
2481
+ - `fig-options`: now captures internal `fig-segmented-control` / `fig-dropdown` events and re-emits normalized `input` and `change` events from `fig-options`.
2482
+ - `fig-options`: dropdown mode no longer propagates undefined event detail values; emitted event payloads now keep consistent string value shape.
2483
+
2484
+ ### Changed
2485
+
2486
+ - `fig-input-color`: removed `localStorage` persistence for color input mode from `fig.js`.
2487
+
2488
+ ### Added
2489
+
2490
+ - Playground `/propkit` Event output now shows both control `value` and raw `event.detail` (plus detail type) for easier event-shape debugging.
2491
+
2492
+ ## [4.5.0]
2493
+
2494
+ ### Fixed
2495
+
2496
+ - `fig-input-number`: `units="px"` no longer renders disallowed units by default.
2497
+
2498
+ ### Added
2499
+
2500
+ - `fig-input-number`: new `units-disallow` attribute with comma-separated unit filtering support in component docs and playground attribute controls.
2501
+
2502
+ ### Changed
2503
+
2504
+ - `fig-input-number`: disallowed units are now ignored even when explicitly provided via `units`; default disallow list now includes `"px"`.
2505
+ - Playground/dev setup: refreshed dependency lockfiles and launcher wiring for local playground dev startup.
2506
+
2507
+ ## [4.4.4]
2508
+
2509
+ ### Fixed
2510
+
2511
+ - `fig-input-palette`: expand/collapse no longer causes a flash — toggling `open` now skips unnecessary DOM re-render since CSS handles visibility.
2512
+
2513
+ ### Changed
2514
+
2515
+ - `fig-field`: label gap uses margin instead of padding for more consistent spacing behavior.
2516
+
2517
+ ## [4.4.3]
2518
+
2519
+ ### Fixed
2520
+
2521
+ - `fig-field`: only-child grid spanning now correctly covers `input1 + gap + input2` columns in label-less horizontal fields.
2522
+
2523
+ ### Changed
2524
+
2525
+ - Playground: added File Input example to FigUI3 tab, removed standalone Angle Input example, set default dev port to 6600.
2526
+
2527
+ ## [4.4.2]
2528
+
2529
+ ### Fixed
2530
+
2531
+ - `fig-menu`: Hide direct `fig-menu-item` and `fig-separator` children via CSS so items don't flash before JS moves them into the popup.
2532
+ - `fig-menu`: Detect late-arriving trigger elements (e.g. React rendering children after `connectedCallback`) via MutationObserver, wiring up click listener and popup anchor when the trigger appears.
2533
+
2534
+ ## [4.4.1]
2535
+
2536
+ ### Fixed
2537
+
2538
+ - Rebuild dist bundle — `dist/fig.css` and `dist/fig.js` now include all recent component additions (fig-menu, presentational elements, etc.).
2539
+
2540
+ ## [4.4.0]
2541
+
2542
+ ### Fixed
2543
+
2544
+ - `fig-tooltip`: no longer lingers after dialog close; clears pending show timeout in `disconnectedCallback` and bails from `showPopup` when parent dialog is closed.
2545
+ - `fig-tabs`: single-click tab activation now works correctly; fixed `#selectByValue("")` deselecting all tabs when tabs use `content` attribute instead of `value`.
2546
+ - `fig-tabs`: click targeting uses `closest("fig-tab")` for reliable hit detection on child elements.
2547
+ - `fig-tabs`: keyboard navigation now properly sets `selected` attribute on the new tab.
2548
+
2549
+ ### Added
2550
+
2551
+ - `fig-tabs`: `disabled` attribute fully disables all tab interaction with visual feedback.
2552
+ - `fig-tabs` / `fig-tab-content`: full-width by default (`width: 100%`).
2553
+ - `fig-palette`: expanded view uses named grid columns with `:has()` for flexible layout with/without remove buttons.
2554
+
2555
+ ### Changed
2556
+
2557
+ - Playground: Tabs example expanded with tabbed content panels; Prepress "Apply To" uses `fig-options`.
2558
+
2559
+ ## [4.3.0]
2560
+
2561
+ ### Added
2562
+
2563
+ - `fig-options`: supports newline-delimited and JSON array formats for the `options` attribute, enabling values that contain commas.
2564
+ - `fig-palette`: remove button (ghost variant, minus icon) on each color in expanded view; respects `min` attribute to prevent removal below minimum count.
2565
+
2566
+ ## [4.2.0]
2567
+
2568
+ ### Added
2569
+
2570
+ - `fig-footer`: new component mirroring `fig-header` with top border, `borderless` and `sticky` attribute support.
2571
+ - `fig-dialog`: `resizable` attribute allows user-resizable dialogs (off by default).
2572
+ - `fig-dialog`: auto-generates `fig-header` with title and close button when `title` attribute is set and no header exists.
2573
+ - `fig-segmented-control`: label truncation with ellipsis when segments overflow available space.
2574
+ - `fig-field`: refactored to CSS grid layout for more consistent label/input alignment.
2575
+
2576
+ ### Fixed
2577
+
2578
+ - `fig-slider`: no longer forces parent dialogs wider than other controls; intrinsic width now matches `fig-input-number` and `fig-input-color` in grid layouts.
2579
+ - `fig-slider`: consolidated duplicated range input styles and orphaned CSS blocks.
2580
+ - `fig-tab`: removed dead `:has(:checked)` and `[type="radio"]` CSS rules.
2581
+ - `input[type="checkbox"].switch`: nested pseudo-class rules for cleaner stylesheet structure.
2582
+
2583
+ ### Changed
2584
+
2585
+ - Dialog footer elements in propkit examples converted from `<footer>` to `<fig-footer>`.
2586
+ - Radio group example in `/figui3` now wraps each radio in its own `fig-field` with label passed via attribute.
2587
+
2588
+ ## [4.1.4]
2589
+
2590
+ ### Fixed
2591
+
2592
+ - `fig-image`: upload preview now works correctly by ignoring bubbled native input change events.
2593
+ - `fig-image`: prevent re-entrant clear event from wiping uploaded image source.
2594
+
2595
+ ### Changed
2596
+
2597
+ - `fig-image`: default `--fit` changed from `cover` to `contain`.
2598
+
2599
+ ## [4.1.3]
2600
+
2601
+ ### Added
2602
+
2603
+ - `fig-menu`: playground attribute controls for position, offset, closed-by, disabled, and open.
2604
+ - `fig-menu`: `disabled` attribute now forwards to the trigger element.
2605
+
2606
+ ## [4.1.2]
2607
+
2608
+ ### Added
2609
+
2610
+ - `fig-menu`: new context menu component with trigger detection, keyboard navigation (arrow keys, Home/End, Enter/Space), ARIA roles, `position`/`offset`/`closedby` forwarding, `open` attribute, and `change` event with `{ value, item }` detail.
2611
+ - `fig-menu-item`: menu item element with `value` attribute and `disabled` support.
2612
+ - `fig-separator`: visual divider between menu item groups.
2613
+ - Playground: added Menu examples (default + disabled items) to `/figui3` Core components.
2614
+ - Playground: EventView now serializes DOM elements in event output instead of showing `{}`.
2615
+
2616
+ ### Fixed
2617
+
2618
+ - `fig-button`: SVG fill selector now excludes `fill="none"` to prevent overriding transparent fills.
2619
+ - `fig-chooser`: fixed spacing with CSS custom property `--fig-chooser-gap`, updated choice padding and selection ring width.
2620
+ - `fig-layer`: removed extra margin-left on layer rows, adjusted padding and chevron position.
2621
+ - Playground: EventView now shown for Menu section in `/figui3`.
2622
+
2623
+ ## [4.1.1]
2624
+
2625
+ ### Changed
2626
+
2627
+ - Playground: added "Native elements" group to `/figui3` with 12 styled HTML element examples (button, select, inputs, textarea, checkbox, switch, radio, color, fieldset, details, hr).
2628
+ - Playground: refactored nav to use collapsible `fig-group` wrappers instead of `.nav-group-header` elements.
2629
+ - `details`: improved styling with padding, full width, and adjusted summary alignment.
2630
+
2631
+ ## [4.1.0]
2632
+
2633
+ ### Fixed
2634
+
2635
+ - `fig-combo-input`: rewrote to meet component standards — now emits `input`/`change` events, wires text input changes, uses private methods, synchronous render, proper cleanup in `disconnectedCallback`.
2636
+
2637
+ ### Changed
2638
+
2639
+ - `fig-input-fill`: gradient angle picker replaced with `fig-input-number` (removed internal dependency on `fig-input-angle`).
2640
+ - `fig-combo-input`: added `fig-combo-input` CSS display rule for proper flex layout participation.
2641
+ - Playground: moved `fig-canvas-control` and `fig-input-angle` to experimental `/lab` route (`fig-lab.js`/`fig-lab.css`).
2642
+ - Playground: moved `fig-handle` example from `/propkit` to `/figui3` under Utilities group.
2643
+ - Playground: added Radio "Group" and "Disabled" examples in `/figui3`.
2644
+
2645
+ ## [4.0.0]
2646
+
2647
+ ### Breaking Changes
2648
+
2649
+ - `fig-image`: removed `download` attribute and internal `<div>` wrapper. Upload overlay now uses `fig-input-file` instead of native `<input>` inside `fig-button`.
2650
+ - `fig-image`: `loaded` event detail changed from `{ blob, base64 }` to `{ file, src }`. Use the new `async getBase64()` method if base64 is needed.
2651
+ - `fig-image`: no longer auto-generates blob URLs or base64 on every load. Component is now synchronous on connect.
2652
+
2653
+ ### Added
2654
+
2655
+ - `fig-image`: `async getBase64()` method for on-demand base64 conversion.
2656
+ - `fig-image`: `file` getter to access the raw uploaded File object.
2657
+ - `fig-image`: preserves user-provided children (no more innerHTML wipe). Supports composable overlays.
2658
+ - `fig-image`: `aspect-ratio="auto"` uses `createImageBitmap` for fast, lazy dimension detection.
2659
+ - `fig-image`: auto-generated `fig-input-file` shows "Replace" label when an image is already set.
2660
+ - `fig-input-file`: `variant` attribute passthrough to internal `fig-button` (default "input").
2661
+ - `fig-input-file`: `url` attribute for display-only file state (extracts filename from URL, no network request).
2662
+ - Playground: "Plain" and "Custom Buttons" image examples in /propkit.
2663
+
2664
+ ### Changed
2665
+
2666
+ - `fig-image` CSS: hover-reveal now targets `fig-input-file[data-generated]` instead of `> div`.
2667
+
2668
+ ## [3.23.0]
2669
+
2670
+ ### Added
2671
+
2672
+ - `fig-input-file`: file upload input with filename display, clear button, accepts tooltip, drag-and-drop, and multiple file support.
2673
+ - `fig-truncate`: text truncation utility with `position` (right/left/middle), `tail` preservation, and overflow `tooltip`.
2674
+ - `fig-field`: auto-detects toggleable children (elements with `open` property) and injects an expand/collapse chevron.
2675
+ - Playground: File examples in /propkit, Truncate examples under Utilities group in /figui3.
2676
+
2677
+ ### Changed
2678
+
2679
+ - Playground EventView now serializes File objects (name, size, type) instead of empty objects.
2680
+ - Playground text input fields re-sync correctly when navigating between examples.
2681
+
2682
+ ## [3.22.0]
2683
+
2684
+ ### Changed
2685
+
2686
+ - Standardized collapse/expand pattern across `fig-layer`, `fig-group`, and `fig-input-palette`: all use `open` attribute and emit `openchange` event.
2687
+ - `fig-group`: replaced `collapse` attribute with `collapsible` (presence boolean) + `open` for state.
2688
+ - `fig-input-palette`: replaced `expanded` attribute with `open`; added public `open` getter/setter and `openchange` event.
2689
+ - `fig-input-color` and `fig-input-fill`: text input now shown by default (unless `text="false"`).
2690
+ - Removed `color-strip` attribute from `fig-input-palette`.
2691
+
2692
+ ### Added
2693
+
2694
+ - `fig-field`: auto-detects toggleable children (elements with an `open` property) and injects a chevron for expand/collapse toggle via label click.
2695
+ - Playground: palette field added to collapsible group example.
2696
+
2697
+ ## [3.21.2]
2698
+
2699
+ ### Fixed
2700
+
2701
+ - `fig-input-gradient` now always renders as a horizontal linear gradient at 90 degrees, regardless of the incoming gradient type (angular, radial, etc.) — preserves interpolationSpace, hueInterpolation, and stops.
2702
+ - `fig-color-tip` now preserves alpha when opening — extracts alpha from 8-char hex (`#RRGGBBAA`) and rgba strings, passing opacity to the fill picker's initial value.
2703
+ - `fig-color-tip` `#syncFromAttributes` no longer strips alpha when re-setting the fill picker value.
2704
+ - `fig-fill-picker` gradient stops list color input reads opacity from `e.detail.rgba.a` instead of the `alpha` HTML attribute.
2705
+ - `fig-input-fill` gradient opacity input no longer overrides individual stop opacities.
2706
+
2707
+ ### Changed
2708
+
2709
+ - Playground: `fig-switch` attributes view now includes Checked, Indeterminate, and Disabled toggles.
2710
+ - Playground: `fig-input-gradient` default example updated to 3 stops with a semi-transparent middle stop.
2711
+
2712
+ ## [3.21.1]
2713
+
2714
+ ### Fixed
2715
+
2716
+ - `fig-handle` type="color" now renders transparent colors — `#colorWithOpacity` converts hex + opacity to rgba for `--fill`, and events forward opacity from `fig-color-tip`.
2717
+ - `fig-color-tip` now derives opacity from `detail.alpha` when `detail.opacity` is absent, fixing the disconnect between `fig-fill-picker` (which emits alpha 0-1) and the color tip (which expected opacity 0-100).
2718
+ - `fig-handle` checkerboard behind color swatch — `::after` uses `linear-gradient(var(--fill), var(--fill)), var(--checkerboard)` so transparency is visible.
2719
+ - `fig-chit` solid color backgrounds now wrapped as `linear-gradient(color, color)` internally, enabling correct CSS layering with checkerboard for transparent colors.
2720
+ - `fig-input-gradient` MutationObserver no longer stores rgba strings back into stop data — skips non-hex color attribute values, preventing `figHexToRGB` NaN errors.
2721
+ - `fig-input-gradient` stop handles now display opacity via rgba color strings (`#stopColorCSS`) instead of a separate alpha attribute.
2722
+ - `fig-input-fill` gradient opacity input no longer overrides individual stop opacities — each gradient stop manages its own opacity independently.
2723
+ - `fig-fill-picker` gradient stops list color input now reads `e.detail.rgba.a` for opacity instead of the `alpha` HTML attribute, which returned `"true"` instead of a numeric value.
2724
+
2725
+ ### Added
2726
+
2727
+ - `fig-swatch` element as an alias for `fig-chit`.
2728
+
2729
+ ## [3.21.0]
2730
+
2731
+ ### Added
2732
+
2733
+ - `fig-input-gradient` `edit` attribute with three modes: `"true"` (default, full inline editing), `"false"` (display-only chit), and `"picker"` (opens fill picker dialog locked to gradient tab).
2734
+ - `fig-input-gradient` now supports color interpolation spaces — `#buildGradientCSS` includes the interpolation clause (`in oklab`, `in oklch shorter hue`, etc.) for correct gradient rendering.
2735
+ - `fig-input-gradient` color sampling (`#sampleGradientColor`) now uses the correct interpolation space and hue mode when adding stops, instead of basic sRGB canvas sampling.
2736
+ - Shared color math utilities: `figSampleGradientAt`, `figRGBToOklab`, `figOklabToRGB`, `figOklabToOklch`, `figOklchToOklab`, `figInterpolateHue` for accurate color interpolation across OKLab, OKLCH, and sRGB-linear spaces.
2737
+ - `fig-input-palette` `color-strip` toggle in playground attributes view.
2738
+
2739
+ ### Changed
2740
+
2741
+ - Fill picker gradient tab now uses an embedded `fig-input-gradient edit="true" size="large"` for visual stop editing, replacing the static gradient bar div.
2742
+ - Fill picker gradient stops list updates in-place when stop count is unchanged, preventing flash/flicker during drag interactions.
2743
+ - `fig-fill-picker` `#buildGradientCSS` now defaults gradient stop opacity to 100 when undefined, preventing invisible gradients.
2744
+ - Playground gradient example in `/figui3` now includes `opacity` and `angle` in the gradient value for correct rendering.
2745
+
2746
+ ## [3.20.3]
2747
+
2748
+ ### Fixed
2749
+
2750
+ - `fig-input-gradient` click-to-add no longer creates duplicate stops — the pointerdown handler now stops propagation to prevent the click handler from firing a second add.
2751
+ - `fig-input-gradient` click-to-add now correctly selects the new stop — the original pointerdown event no longer bubbles to document where the new handle's deselect listener would immediately undo the selection.
2752
+ - `fig-input-gradient` color-tip input/change events no longer trigger the drag tooltip — color events are now handled separately from position drag events on the track.
2753
+
2754
+ ### Changed
2755
+
2756
+ - `fig-input-gradient` stop handles now have `hit-area="4"` for easier interaction.
2757
+ - `fig-input-gradient` ghost handle uses native `control="add"` and `type="color"` on `fig-handle` instead of manually creating a `fig-color-tip` element.
2758
+ - `fig-handle` `control` attribute and color tip rendering now works on gradient ghost handles (removed `#isGhost` exclusion).
2759
+
2760
+ ## [3.20.2]
2761
+
2762
+ ### Fixed
2763
+
2764
+ - `fig-input-color` events now include `{ value, hex, rgba }` detail.
2765
+ - `fig-input-angle` events now include `{ value, angle }` detail.
2766
+ - `fig-joystick` events now include `{ value, x, y }` detail.
2767
+ - `fig-input-text` and `fig-input-number` mouse-drag events now include `{ detail: value }` (previously missing).
2768
+ - Playground event output panel now handles primitive event details (strings, numbers) by wrapping them in `{ value }`.
2769
+
2770
+ ### Changed
2771
+
2772
+ - Playground: number example defaults to steppers on, multiline text example defaults to autoresize on.
2773
+ - Playground: event output hidden for skeleton example (no interactive controls).
2774
+
2775
+ ## [3.20.1]
2776
+
2777
+ ### Fixed
2778
+
2779
+ - `fig-input-text` and `fig-input-number` now correctly update the inner element's placeholder when the `placeholder` attribute changes, and no longer show literal `"null"` when the attribute is removed.
2780
+
2781
+ ### Changed
2782
+
2783
+ - Multiline text input example in `/figui3` now starts empty with placeholder only.
2784
+
2785
+ ## [3.20.0]
2786
+
2787
+ ### Added
2788
+
2789
+ - `fig-tooltip` `theme` attribute — applies a color scheme to the tooltip popup (`"dark"`, `"light"`, or `"brand"`). Brand theme uses `--figma-color-bg-brand` background.
2790
+ - `fig-tooltip` `pointer` attribute — set `pointer="false"` to hide the tooltip arrow/caret.
2791
+ - `fig-handle` drag threshold — a 3px movement threshold before a drag begins, preventing accidental drags on click.
2792
+ - `fig-handle` color change events — color handle `input` and `change` events now bubble with `{ color }` detail, so parent components (like `fig-canvas-control`) can react to color edits.
2793
+ - `fig-canvas-control` color value — `value` getter now includes `color` for `type="color"` controls.
2794
+ - `fig-canvas-control` brand-themed tooltips with hidden pointers for a cleaner look during drag.
2795
+ - `fig-canvas-control` tooltip text now prefixed with labels ("Radius", "Angle") for clarity.
2796
+ - Playground event output panel — `/propkit` examples now show a live event output view in the attributes sidebar.
2797
+ - Playground `fig-tooltip` attribute controls for `theme` and `pointer`.
2798
+
2799
+ ### Changed
2800
+
2801
+ - `fig-tooltip` default colors now use `light-dark()` for proper light/dark mode support and `color-scheme: dark` base.
2802
+ - `fig-tooltip` box-shadow inner highlight adapts to light/dark mode via `light-dark()`.
2803
+ - `fig-canvas-control` line stroke color uses `light-dark()` for better light-mode visibility.
2804
+ - `fig-canvas-control` line stroke width reduced from 1.5px to 1.25px.
2805
+ - `fig-canvas-control` handle positioning switched from `value` attribute to direct `left`/`top` pixel placement for smoother updates.
2806
+ - `fig-canvas-control` dynamic cursor updates throttled to avoid redundant re-renders (only updates when rounded degree changes).
2807
+ - `fig-canvas-control` point-radius default changed from percentage to pixel radius in playground examples.
2808
+ - `readBooleanValue` in playground now respects `falseValue` for custom bool modes.
2809
+ - Playground uses `Fragment` instead of wrapper `div` around attribute panels.
2810
+
2811
+ ## [3.19.0]
2812
+
2813
+ ### Added
2814
+
2815
+ - `fig-canvas-control` `type="point-point"` — two full-size handles connected by a styled line, with angle and length inferred from the endpoints. Value shape: `{ x, y, x2, y2 }`.
2816
+ - `fig-canvas-control` `name` attribute supports comma-separated labels (e.g. `"Start, End"`) for dual-handle types.
2817
+ - `fig-canvas-control` point-point handles support direct drag (dynamic directional resize cursor) and rotation via hit area (dragging from hit area rotates around the opposite handle at fixed distance, with rotate cursor and 15-degree snapping).
2818
+
2819
+ ### Changed
2820
+
2821
+ - **BREAKING:** Renamed `fig-canvas-point` to `fig-canvas-control` (and class `FigCanvasPoint` to `FigCanvasControl`).
2822
+
2823
+ ## [3.18.0]
2824
+
2825
+ ### Added
2826
+
2827
+ - `fig-canvas-control` component — a spatial control for interactive point, radius, and angle editing on a user-provided canvas surface. Supports `type` variants: default (point only), `color` (color handle), `point-radius` (resizable circle), and `point-radius-angle` (circle + rotatable angle handle). Value is a JSON object (`{ x, y, radius?, angle? }`). Includes `name`, `tooltips`, `disabled`, `snapping`, `drag-surface`, and `color` attributes.
2828
+ - `fig-handle` `hit-area` attribute — expands the interactive zone around a handle without changing its visual size. Accepts a unitless px padding value, optionally with `circle` keyword (e.g., `hit-area="16"`, `hit-area="16 circle"`).
2829
+ - `fig-handle` `hit-area-mode` attribute — controls hit area behavior: `"handle"` (default) proxies interactions to the handle, `"delegate"` emits a `hitareadown` CustomEvent for parent components to define custom behavior.
2830
+ - `--fig-handle-hit-area-opacity` CSS custom property for debugging hit area bounds (red overlay, default `0`).
2831
+ - `fig-canvas-control` dynamic cursors — radius ring shows a directional resize cursor that rotates to point radially from center on hover and during drag; angle handle hit area shows a rotating cursor reflecting the current angle.
2832
+ - `fig-canvas-control` brand color highlight — radius ring, angle line, and angle handle turn `--figma-color-bg-brand` on hover and during drag.
2833
+ - `fig-canvas-control` radius ring hit area — invisible 12px-wide stroke for forgiving drag interaction without changing visual size.
2834
+ - Playground `/propkit` canvas controls: four `fig-canvas-control` examples (Point, Color, Point + Radius, Point + Radius + Angle) replacing the old standalone Point example.
2835
+ - Playground `fig-handle` hit area controls: size slider, shape segmented control, mode segmented control, and debug opacity slider.
2836
+ - `fig-canvas-control` and `fig-handle` hit area documented in README.
2837
+
2838
+ ### Changed
2839
+
2840
+ - `fig-handle` drag from hit area now calculates initial pointer-to-center offset to prevent drag jumps.
2841
+
2842
+ ## [3.17.0]
2843
+
2844
+ ### Added
2845
+
2846
+ - `fig-input-gradient` drag-to-add — pointerdown on empty track space creates a new stop and immediately begins dragging it.
2847
+ - CSS minification via lightningcss — `npm run build` now produces minified CSS alongside minified JS in `dist/`.
2848
+ - `npm run build:css` script for standalone CSS minification.
2849
+ - Unminified source exports via `@rogieking/figui3/src/*` for debugging.
2850
+ - README restructured with component index table, domain-grouped sections, per-component event documentation, and playground links.
2851
+ - 10 previously undocumented components added to README: field-slider, input-palette, easing-curve, 3d-rotate, origin-grid, skeleton, color-tip, choice, chooser, handle.
2852
+
2853
+ ### Changed
2854
+
2855
+ - Default package exports (`main`, `module`, `exports`) now point to minified `dist/` files instead of unminified source.
2856
+ - CDN URLs updated to reference `dist/` paths.
2857
+ - `figGetHighestZIndex` replaced with a monotonic counter — eliminates O(n) full DOM scan on every tooltip/popup open.
2858
+ - Shared reusable canvas for color normalization — `FigInputGradient`, `FigChit`, and `FigColorTip` no longer create throwaway canvases.
2859
+ - Gradient CSS support test results are now cached across `FigFillPicker` instances.
2860
+ - `FigHandle` drag path reduces redundant `getBoundingClientRect` calls by reusing the rect from clamp computation.
2861
+ - Deduplicated `#syncAspectRatioVar`, `#syncPerspectiveVar`, and `#syncCSSVar` into shared `figSyncCssVar` helper across `FigEasingCurve`, `Fig3DRotate`, `FigOriginGrid`, and `FigInputJoystick`.
2862
+
2863
+ ### Fixed
2864
+
2865
+ - Event listener leaks — `FigTooltip`, `FigTab`, `FigTabs`, `FigSegment`, `FigDialog`, `FigToast`, `FigDropdown`, and `FigInputAngle` now store bound listener references and correctly remove them in `disconnectedCallback`.
2866
+ - `FigDropdown` was missing `disconnectedCallback` entirely — added cleanup for slotchange, input, and change listeners.
2867
+ - `FigFillPicker` resource leaks — MutationObservers (`#dialogOpenObserver`, `#webcamTabObserver`) are now disconnected, webcam MediaStream tracks are stopped, and video blob URLs are revoked on disconnect.
2868
+ - `FigInputGradient` resource leaks — `#colorObserver` is disconnected, tooltip timer is cleared, and track event listeners are removed on disconnect.
2869
+ - Duplicate CSS declarations removed: button `color`, tab `content`, color swatch `color-scheme`/`border-radius`, chit pseudo-element sizing, segmented control `display`, switch `margin`, field `flex`, joystick crosshair `height`, 3D rotate `--border-end-color`.
2870
+ - Merged duplicate `&:active` blocks inside button `&:hover`.
2871
+ - Removed empty `&[expanded]` ruleset.
2872
+
2873
+ ## [3.16.0]
2874
+
2875
+ ### Added
2876
+
2877
+ - `fig-input-color` `disabled` attribute support — propagates disabled state to hex input, alpha input, fill picker, and chit.
2878
+ - `fig-input-fill` `#syncDisabled()` — updates child controls in-place instead of full re-render on disabled change.
2879
+ - `fig-input-palette` `add` attribute — set `add="false"` to hide the add-color button.
2880
+ - `fig-input-palette` dual-render layout with inline chit strip and expanded color rows always present in DOM, toggled via CSS.
2881
+ - `fig-chooser` scroll-snap support (`scroll-snap-type: y mandatory`) for smooth item alignment.
2882
+ - `fig-chooser` `padding="false"` attribute — removes internal padding and widens gap for edge-to-edge choice layouts.
2883
+ - `fig-choice` `padding="false"` attribute — zeroes choice padding via `--fig-choice-padding` CSS var.
2884
+ - `fig-choice` border-radius now derives from `--fig-choice-padding` for consistent inset ring appearance.
2885
+ - Disabled toggle in playground attributes for `fig-input-color`, `fig-input-gradient`, and `fig-input-palette`.
2886
+ - Padding toggle in playground attributes for `fig-chooser`.
2887
+ - `/propkit` nav group headers — sections are now grouped under labelled categories (Field controls, Composite controls, etc.).
2888
+ - `/propkit` overhauled sections with new Chooser examples (text, images, images + labels, colors) and consolidated field control catalog.
2889
+ - `data-playground-hide-field` attribute — hides the Field controls panel in the attributes sidebar for specific examples.
2890
+ - Playground `data-playground-*` attribute preservation during markup merge for roundtrip editing fidelity.
2891
+
2892
+ ### Changed
2893
+
2894
+ - `fig-chit` disabled selector tightened to `:not([disabled="false"])` to support explicit opt-out.
2895
+ - `fig-input-palette` layout switched from CSS grid to flex column with separate `.palette-colors-inline` and `.palette-colors-expanded` containers.
2896
+ - `fig-input-color` hover state now shows a subtle border outline.
2897
+ - `fig-easing-curve` duration bar width increased from 5 to 7 with radius from 3 to 4.
2898
+ - `fig-easing-curve` removed nested `fig-handle` sizing rules from `.fig-easing-curve-handle` (handled by component defaults).
2899
+ - `fig-choice` selection ring width increased from 1px to 1.25px.
2900
+ - `fig-chooser` overflow changed from `hidden auto` to `visible auto`.
2901
+ - `/propkit` sections reorganized alphabetically with group labels; removed standalone Handle section from `/figui3`.
2902
+ - Removed chooser content mode switcher from attributes sidebar (replaced by separate per-content-type examples).
2903
+ - Playground CSS formatting cleanup (whitespace normalization in App.css).
2904
+
2905
+ ### Fixed
2906
+
2907
+ - `fig-input-fill` disabled attribute change no longer triggers a full re-render — uses targeted `#syncDisabled()` instead.
2908
+ - `fig-input-palette` expanded state CSS scoping now correctly targets `.palette-colors-expanded` container.
2909
+
2910
+ ## [3.15.0]
2911
+
2912
+ ### Added
2913
+
2914
+ - `fig-input-color` `text` attribute is now observed and triggers UI rebuild, enabling runtime toggle of hex input visibility.
2915
+ - `fig-input-palette` `expanded` attribute for vertical layout with text and alpha inputs per color.
2916
+ - `fig-input-palette` incremental add — clicking "Add color" appends without re-rendering existing pickers.
2917
+ - `fig-input-palette` wraps color pickers in a `.palette-colors` div, separating them from the add button.
2918
+ - `/propkit` Expanded toggle for palette attributes panel.
2919
+ - `/propkit` Minimal palette example with two colors.
2920
+ - `/propkit` Skeleton example (moved from `/figui3`).
2921
+ - `/figui3` Fill segmented control (Solid/Gradient) for chit example.
2922
+ - `/figui3` Text toggle for `fig-input-color` attributes panel.
2923
+ - `fig-field[direction="horizontal"]:has(> fig-input-palette)` padding rule for proper field alignment.
2924
+
2925
+ ### Changed
2926
+
2927
+ - `fig-input-palette` uses `fig-input-color` instead of `fig-fill-picker` for each color swatch.
2928
+ - `fig-input-palette` add button is now a ghost icon button with tooltip in all states.
2929
+ - `fig-input-palette` layout uses CSS grid (`inputs` + `button` areas) instead of inline-flex.
2930
+ - `fig-chit` reworked selection ring: moved from `::before` box-shadow to element-level `box-shadow` for correct stacking.
2931
+ - `fig-chit` swapped `::before` / `::after` roles: `::before` now renders the color/gradient fill, `::after` renders the border overlay with `z-index: 1`.
2932
+ - `fig-chit` `::before`/`::after` sizing now respects `--padding` for inset thumbnails at all sizes.
2933
+ - `fig-input-gradient` scoped chit selector to direct child (`> fig-chit`).
2934
+ - `/propkit` Palette attributes panel header renamed from "Input-palette" to "Palette".
2935
+ - Exclude `src` attribute from playground URL parameter serialization.
2936
+
2937
+ ### Fixed
2938
+
2939
+ - `fig-chit` selected ring was invisible due to overlapping box-shadow spreads on `::before`.
2940
+ - `fig-chit` checkerboard background now targets `::after` to match the reworked pseudo-element roles.
2941
+ - `fig-input-color` `text="false"` now properly hides hex input (strict `=== "true"` check).
2942
+
2943
+ ## [3.14.1]
2944
+
2945
+ ### Added
2946
+
2947
+ - `fig-handle` `select()` and `deselect()` public API methods for programmatic selection with color tip management.
2948
+ - `fig-handle` `showColorTip()` and `hideColorTip()` public API methods to toggle color tip visibility without destroy/recreate.
2949
+ - `fig-input-gradient` Tab/Shift+Tab cycles selection through stop handles with wraparound.
2950
+ - `fig-input-gradient` Left/Right arrow keys nudge selected stop by 1% (Shift for 10%), with tooltip showing position.
2951
+ - `fig-handle` auto-selects on drag start if not already selected.
2952
+
2953
+ ### Fixed
2954
+
2955
+ - `fig-tooltip` `destroy()` now nulls `this.popup` reference, fixing tooltip not reappearing on subsequent show/hide cycles.
2956
+ - `fig-input-gradient` track-level click swallower after drag no longer eats clicks on other handles, fixing intermittent selection failures.
2957
+ - `fig-input-gradient` hides color tip during drag and arrow key nudge, restoring it when done.
2958
+
2959
+ ## [3.14.0]
2960
+
2961
+ ### Added
2962
+
2963
+ - `fig-tooltip` `show` attribute — persists the tooltip when present/true, ignoring hover and click interactions. Removing the attribute allows normal hide behavior.
2964
+ - `fig-tooltip` `text` getter/setter — updates tooltip content in-place without re-rendering the popup. Repositions automatically if open.
2965
+ - `fig-tooltip` `text` observed attribute — setting via `setAttribute("text", ...)` also updates content without re-render.
2966
+ - `fig-input-gradient` drag tooltips — each stop handle is wrapped in a `fig-tooltip` that shows the percentage position during drag.
2967
+ - `fig-handle` `.dragging` class — added during actual drag, removed on pointer up. Not applied on simple click.
2968
+ - `fig-chit` `medium` size (1.5rem) with full-area swatch style.
2969
+ - `/figui3` Tooltip playground: action segmented control (hover/click/manual), show switch, and button text updates per action mode.
2970
+
2971
+ ### Changed
2972
+
2973
+ - `fig-tooltip` `show` attribute callback now fires synchronously instead of via `requestAnimationFrame` for immediate persistence.
2974
+ - `fig-tooltip` `showPopup()` lazily creates the popup if not yet rendered, fixing manual action mode.
2975
+ - `fig-tooltip` `showPopup()` sets `display: block` before repositioning for accurate dimensions.
2976
+ - `fig-handle` cursor and `.dragging` class only apply on actual drag movement, not on click.
2977
+ - `fig-input-gradient` uses `fig-chit size="medium"` instead of `fig-fill-picker` for gradient preview.
2978
+ - `fig-input-gradient` stop handles use `drag-surface` to target the track container through tooltip wrappers.
2979
+ - `fig-chit` large size increased to 2rem.
2980
+ - `/figui3` Handle playground: merged Color and Color tip toggles into single Color toggle.
2981
+
2982
+ ### Fixed
2983
+
2984
+ - `fig-tooltip` crash when calling `showPopup()` on `action="manual"` tooltip (popup was never created).
2985
+ - `fig-input-gradient` drag tooltip not appearing due to `requestAnimationFrame` race in `show` attribute handler.
2986
+ - `fig-input-gradient` handle stacking/positioning when wrapped in `fig-tooltip` (`display: contents`).
2987
+
2988
+ ## [3.13.1]
2989
+
2990
+ ### Added
2991
+
2992
+ - `fig-color-tip` `add` attribute — replaces the internal chit with an add icon and emits an `add` event on click.
2993
+ - `fig-handle` `add` attribute — shows a `fig-color-tip` in add mode, always visible and not tied to select/deselect.
2994
+ - `fig-input-gradient` ghost handle now uses `add` mode instead of a tooltip, showing the add icon above the handle on hover.
2995
+ - Clicking empty gradient track space to add a stop now auto-selects and opens the color tip on the new handle.
2996
+
2997
+ ### Changed
2998
+
2999
+ - `/figui3` Color Tip attributes panel now shows Add toggle at the top; value/color field is hidden when Add is on.
3000
+ - `/figui3` Handle attributes panel now shows Add toggle; type and color fields are hidden when Add is on.
3001
+ - `/propkit` Gradient description updated to explain interaction model.
3002
+
3003
+ ### Fixed
3004
+
3005
+ - Removed `contain: layout style` from `fig-handle` color/add mode to prevent drag positioning issues.
3006
+
3007
+ ## [3.13.0]
3008
+
3009
+ ### Added
3010
+
3011
+ - `fig-handle` `type="color"` attribute — clicking a color-type handle opens a `fig-color-tip` positioned above it; deselecting closes it. Color changes from the tip update the handle's fill.
3012
+ - `fig-handle` `size="small"` support for compact handles.
3013
+ - `fig-handle` selection now uses `click` instead of `pointerdown`, so dragging no longer selects.
3014
+ - `fig-color-tip` `alpha` attribute — defaults to `true`, enabling opacity control in the fill picker. Set `alpha="false"` to disable.
3015
+ - `fig-color-tip` auto-selects when its picker opens and deselects when the picker dialog closes.
3016
+ - `fig-input-gradient` stop handles now use `type="color"` with `size="small"`, allowing inline color editing per stop.
3017
+ - `fig-input-gradient` ghost handle — hovering empty track space shows a preview handle at the cursor position with the interpolated gradient color and an "Add color stop" tooltip. Clicking adds a new stop.
3018
+ - `fig-tooltip` `action="manual"` mode — skips auto-binding event listeners so `render()`/`showPopup()`/`hidePopup()` can be called programmatically.
3019
+ - `fig-handle` now supports `drag-snapping` with `false` (default), `modifier` (hold Shift), and `true` (always) modes to snap drag position to edges, center, and diagonals.
3020
+ - New `fig-color-tip` component for compact solid-color picking, built on `fig-fill-picker` and supporting `value`, `selected`, and `disabled`.
3021
+ - New `/figui3` Color Tip playground section with default and state examples.
3022
+
3023
+ ### Changed
3024
+
3025
+ - `/figui3` Handle playground example defaults to `type="color"` with a Color toggle in the attributes panel.
3026
+ - `/figui3` Attributes View now exposes `fig-color-tip` `value` using `fig-input-color` (Figma picker) with alpha enabled, plus `selected`/`disabled` toggles.
3027
+ - Handle attributes panel shows Size segmented control (Default / Small) and hides Color row when type is not "color".
3028
+
3029
+ ### Fixed
3030
+
3031
+ - `fig-tooltip` positioning inside dialogs with `contain: layout` — tooltip popup now offsets by the container's position so tooltips render correctly inside fill picker dialogs.
3032
+ - `fig-handle` with `type="color"` no longer repositions on click — only drags move the handle.
3033
+ - Clicking inside a `fig-color-tip` picker dialog no longer deselects the parent `fig-handle`.
3034
+ - `fig-input-color` now reacts to `alpha` attribute changes so alpha controls appear/disappear reliably during live attribute updates.
3035
+
3036
+ ## [3.12.1]
3037
+
3038
+ ### Added
3039
+
3040
+ - CSS `contain` properties across components for reduced layout thrashing and paint invalidation:
3041
+ - `contain: strict` on fixed-size controls (switch, checkbox, radio, mask-icon, handle, close icon).
3042
+ - `contain: layout paint` on toast, slider track container, segmented control, avatar, and chit.
3043
+ - `contain: layout` on dialog/popup/tooltip surfaces and fill picker dialog.
3044
+ - `fig-handle` example in Propkit playground.
3045
+
3046
+ ### Changed
3047
+
3048
+ - Gradient interpolation UI merged into a single dropdown with optgroups (sRGB / OKLab / OKLCH) and a "Mixing" label, moved below the gradient preview.
3049
+ - Default gradient example updated to `#7AEA66` → `#FF00BF` at 90°.
3050
+
3051
+ ## [3.12.0]
3052
+
3053
+ ### Added
3054
+
3055
+ - Color input mode switcher in solid fill picker — dropdown to choose between Hex, RGB, HSL, HSB, LAB (OKLab), and LCH (OKLCH) input modes.
3056
+ - OKLab/OKLCH reverse conversion utilities (`#oklabToRGB`, `#oklchToRGB`) for bidirectional color editing in perceptual color spaces.
3057
+ - Tooltips on each color component input (e.g. "Red", "Hue", "Lightness", "Chroma").
3058
+ - Gamut selector (sRGB / Display P3) in fill picker dialog header, affecting both solid canvas rendering and gradient stop color format.
3059
+ - Eyedropper button repositioned into `.fig-fill-picker-sliders` grid with "Sample color" tooltip.
3060
+ - Color input mode preference persisted via localStorage.
3061
+
3062
+ ### Changed
3063
+
3064
+ - Solid fill picker inputs area now uses a `fig-dropdown` + dynamic `input-combo` fields instead of a single `fig-input-color`.
3065
+ - `.fig-fill-picker-sliders` uses CSS grid layout with eyedropper spanning the left column.
3066
+ - Sliders no longer wrapped in `fig-field` elements inside `.fig-fill-picker-sliders`.
3067
+ - Gradient interpolation dropdown trimmed to sRGB Linear, OKLab, and OKLCH (gamut selection moved to top-level header).
3068
+ - Default gradient `interpolationSpace` changed from `srgb` to `oklab`.
3069
+
3070
+ ## [3.11.0]
3071
+
3072
+ ### Added
3073
+
3074
+ - New `fig-input-gradient` component — a gradient-only fill input that opens `fig-fill-picker` locked to gradient mode.
3075
+ - Gradient color interpolation support: `interpolationSpace` (`srgb`, `srgb-linear`, `display-p3`, `oklab`, `oklch`) and `hueInterpolation` (`shorter`, `longer`, `increasing`, `decreasing`) for OKLCH.
3076
+ - `fig-preview` component for displaying gradient bar previews with stop handles.
3077
+ - Gradient interpolation UI in `fig-fill-picker`: space dropdown and hue interpolation dropdown (shown for OKLCH).
3078
+ - Playground section and Attributes View support for `fig-input-gradient`.
3079
+ - README documentation for `fig-input-gradient` and gradient interpolation spaces.
3080
+
3081
+ ### Fixed
3082
+
3083
+ - Fixed gradient CSS interpolation syntax — the `in <color-space>` clause was incorrectly placed as a separate comma-delimited argument instead of within the same argument group as the direction/angle (e.g. `conic-gradient(from 180deg in oklch shorter hue, ...)` instead of the invalid `conic-gradient(in oklch shorter hue, from 180deg, ...)`). This caused browsers to reject the interpolation and silently fall back to sRGB.
3084
+
3085
+ ### Changed
3086
+
3087
+ - `fig-input-fill` and `fig-fill-picker` gradient value shape now includes `interpolationSpace` (and `hueInterpolation` for OKLCH).
3088
+ - Updated `fig-input-fill` and `fig-input-color` focus/popup-open outline styling with `.has-popup-open` class.
3089
+ - Refined `fig-input-fill` internal CSS selectors for label/input padding to avoid conflicts with `fig-input-gradient`.
3090
+
3091
+ ## [3.10.0]
3092
+
3093
+ ### Added
3094
+
3095
+ - `fig-skeleton` component and editor scaffold.
3096
+
3097
+ ## [3.9.3]
3098
+
3099
+ ### Changed
3100
+
3101
+ - Added `dial` attribute support to `fig-input-angle` (defaults to `true`; `dial="false"` hides the circular dial).
3102
+ - Renamed `show-rotations` usage to `rotations` for `fig-input-angle` while keeping backward-compatible alias support.
3103
+ - Added `Dial` and `Rotations` controls to playground Attributes View for `fig-input-angle`.
3104
+ - Updated `fig-input-angle` layout so its number input keeps intrinsic width by default, while `full` mode still expands as expected.
3105
+ - Updated `README` docs for `fig-input-angle` to cover `dial` and `rotations`.
3106
+
3107
+ ## [3.9.2]
3108
+
3109
+ ### Changed
3110
+
3111
+ - Updated `fig-choice` styling with reusable tokens for padding and selection-ring width, and adjusted selected-state visuals to use a secondary background plus an image outline ring.
3112
+
3113
+ ### Fixed
3114
+
3115
+ - Removed disabled-state opacity dimming from `fig-chit` so disabled chips keep consistent text/icon contrast.
3116
+
3117
+ ## [3.9.1]
3118
+
3119
+ ### Fixed
3120
+
3121
+ - Synced segmented-control playground examples to explicitly use `sizing="equal"` so Attributes View and code markup stay aligned by default on `/figui3` and `/propkit`.
3122
+
3123
+ ## [3.9.0]
3124
+
3125
+ ### Added
3126
+
3127
+ - Added `animated` and `sizing` attributes to `fig-segmented-control`.
3128
+ - Added a sliding selected-segment indicator for `fig-segmented-control` when `animated` is enabled.
3129
+ - Added `Animated` and `Sizing` controls for segmented controls in playground Attributes View.
3130
+
3131
+ ### Changed
3132
+
3133
+ - Updated segmented-control sizing so `sizing="auto"` keeps intrinsic width, including when `full` is present.
3134
+ - Updated playground segmented-control examples on `/figui3` and `/propkit` so `Animated` defaults to off in Attributes View.
3135
+ - Updated 3D Rotate `fields` options in playground Attributes View to `None`, `X, Y, Z`, and `X, Y`.
3136
+ - Updated segmented-control docs in `README.md` to include `animated` and `sizing`.
3137
+
3138
+ ### Fixed
3139
+
3140
+ - Fixed animated segmented-control flicker by stabilizing indicator sync during transient layout/mutation frames.
3141
+ - Fixed playground animated segmented-control flashing by avoiding value persistence re-renders for animated controls.
3142
+
3143
+ ## [3.8.2]
3144
+
3145
+ ### Changed
3146
+
3147
+ - Changed easing curve arm stroke from `--figma-color-border-strong` to `--figma-color-bordertranslucent` for a softer appearance.
3148
+
3149
+ ## [3.8.1]
3150
+
3151
+ ### Changed
3152
+
3153
+ - Reduced easing curve handle radius from 6 to 5 for bezier and spring handles.
3154
+ - Updated duration bar width from 4.25 to 5.
3155
+ - Switched `fig-handle` inside easing curve handles to use explicit `--width`/`--height` CSS vars instead of `width: 100%; height: 100%`.
3156
+
3157
+ ## [3.8.0]
3158
+
3159
+ ### Added
3160
+
3161
+ - Added `fig-handle` component — a reusable, style-customizable handle element with CSS vars for `--width`, `--height`, `--fill`, `--border-radius`, `--box-shadow`, `--outline`, and `--border`.
3162
+ - Added `--icon-reset` icon token.
3163
+ - Added reset button to `fig-joystick` that appears when the value differs from the default (50% 50%) and resets on click. Exposes `default` attribute and `--is-not-default` CSS var.
3164
+ - Added `:host` selectors to `base.css` and `components.css` root rules for shadow DOM compatibility.
3165
+
3166
+ ### Changed
3167
+
3168
+ - Refactored `fig-joystick` to use `fig-handle` instead of a styled div.
3169
+ - Refactored `fig-origin-grid` to use `fig-handle` instead of a styled span, setting `--border-radius` to match the original rounded-square shape.
3170
+ - Refactored `fig-easing-curve` handles to use `foreignObject` + `fig-handle` instead of SVG circles, and the duration bar to use `foreignObject` + `fig-handle` instead of an SVG rect.
3171
+ - Increased easing curve handle size from 8.5 to 12 SVG units.
3172
+ - Removed unused easing curve CSS variables (`--easing-duration-bar-fill`, `--easing-duration-bar-stroke`, `--easing-duration-bar-stroke-width`).
3173
+ - Added `/sandbox` route documentation to README.
3174
+
3175
+ ## [3.7.0]
3176
+
3177
+ ### Added
3178
+
3179
+ - Added `steppers` passthrough support to `fig-field-slider`, forwarding to its internal `fig-input-number`.
3180
+ - Added a `Steppers` toggle to the `/propkit` field-slider attributes controls.
3181
+
3182
+ ### Changed
3183
+
3184
+ - Updated `fig-origin-grid` and `fig-joystick` handle visuals for a more consistent compact handle treatment.
3185
+ - Added configurable slider thumb outline tokens and applied focus-outline styling for `fig-field-slider` thumbs.
3186
+ - Refined `fig-field-slider` number-input pill styling with explicit border radius.
3187
+
3188
+ ### Fixed
3189
+
3190
+ - Fixed `fig-field-slider` steppers sync so the internal number input stays in sync after slider re-renders.
3191
+ - Fixed overflowed `fig-origin-grid` handles to suppress regular handle box-shadow in arrow-mask overflow states.
3192
+
3193
+ ## [3.6.0]
3194
+
3195
+ ### Added
3196
+
3197
+ - Added `fig-field-slider` component that composes `fig-field` + `fig-slider`, defaults to `label="Label"`, `direction="horizontal"`, and `text="true"`, and re-emits `input`/`change` events.
3198
+ - Added a top-level **Field Slider** section to `/propkit` playground with a dedicated example.
3199
+ - Added slider styling tokens: `--slider-thumb-color`, `--slider-thumb-radius`, `--slider-tick-width`, `--slider-tick-height`, `--slider-tick-radius`, `--slider-tick-opacity`, and `--slider-stepper-padding`.
3200
+
3201
+ ### Changed
3202
+
3203
+ - Refined `fig-field-slider` visuals to a full-surface style with custom thumb/tick sizing, opacity, radius, and masking behavior.
3204
+ - Updated `/propkit` field-slider attributes view ordering and visibility (type-first; removed direction/value/min/max/step/placeholder/default/precision controls).
3205
+
3206
+ ### Fixed
3207
+
3208
+ - Fixed `fig-field-slider` slider type updates not always reflecting visually by improving initial attribute sync timing.
3209
+ - Fixed field-slider type defaults so `type="delta"` and `type="stepper"` enforce `default="50"`, and stepper enforces `step="10"` when not explicitly provided.
3210
+ - Fixed blank label handling in `fig-field-slider` so `label=""` removes the rendered label element.
3211
+
3212
+ ## [3.5.0]
3213
+
3214
+ ### Added
3215
+
3216
+ - Added `checkerboard` attribute for `fig-image` — shows a checkerboard pattern behind the image, passed through to the inner `fig-chit`.
3217
+ - Added `checkerboard` attribute for `fig-chit` — displays a checkerboard background via CSS.
3218
+ - Added `--chit-bg-repeat` CSS variable to `fig-chit` for controllable background repeat behavior.
3219
+ - Added "Checker" toggle to image attributes view in playground.
3220
+
3221
+ ### Fixed
3222
+
3223
+ - Fixed `fig-chit` not resolving CSS variable backgrounds — added `#resolveBackground` that computes actual values from `var()` references.
3224
+ - Fixed `fig-chit` `#detectType` treating empty `url()` as an image type — now checks for a non-empty URL source.
3225
+ - Fixed `fig-chit` `::after` background shorthand resetting longhand properties (size, position, repeat) — switched to `background-image` with individual longhands.
3226
+ - Fixed `fig-image` defaulting to `background="url()"` when no source is set — now uses `var(--figma-color-bg-secondary)` or empty `url()` when checkerboard is active.
3227
+ - Fixed `fig-image` always forcing `data-type="image"` on its inner `fig-chit` for consistent thumbnail rendering.
3228
+
3229
+ ## [3.4.3]
3230
+
3231
+ ### Fixed
3232
+
3233
+ - Fixed drag toggle not syncing correctly in chooser attributes view — bare boolean attributes now read as `true` in string bool mode.
3234
+ - Fixed playground `#app` min-width to account for main content padding.
3235
+ - Fixed attributes sidebar switching to `absolute` positioning at narrow viewports to prevent overlap when horizontally scrolling.
3236
+
3237
+ ### Changed
3238
+
3239
+ - Added default `axis-labels="X Y"` to joystick example in `/propkit`.
3240
+ - Removed stale verification screenshots and reports.
3241
+
3242
+ ## [3.4.2]
3243
+
3244
+ ### Fixed
3245
+
3246
+ - Fixed `fig-segmented-control[full]` and `fig-dropdown[full]` to respect `full="false"` via `:not([full="false"])` guard.
3247
+ - Added missing `full` attribute support for `fig-dropdown`.
3248
+
3249
+ ## [3.4.1]
3250
+
3251
+ ### Fixed
3252
+
3253
+ - Fixed playground URL path handling to preserve trailing slash style, preventing routing issues when embedded in external sites.
3254
+ - Prevented no-op `replaceState` calls in playground navigation that could interfere with host routing.
3255
+
3256
+ ### Changed
3257
+
3258
+ - Removed chooser example from `/figui3` playground (still available in `/propkit`).
3259
+
3260
+ ## [3.4.0]
3261
+
3262
+ ### Added
3263
+
3264
+ - Added `fig-chooser` component with keyboard navigation, selection management, and scroll overflow detection.
3265
+ - Added `overflow` attribute for `fig-chooser` — `overflow="buttons"` (default) uses custom nav buttons with easing gradients, `overflow="scrollbar"` shows native scrollbars.
3266
+ - Added `drag` attribute for `fig-chooser` — enables drag-to-scroll (on by default, set `drag="false"` to disable).
3267
+ - Added `loop` attribute for `fig-chooser` — when present, arrow key navigation wraps around; when absent, stops at edges.
3268
+ - Added `fig-choice` element with selected, hover, and disabled states.
3269
+ - Added `--eased-fade-stops` CSS variable to `:root` for reusable easing gradients.
3270
+ - Added chooser example to `/propkit` playground with image grid, layout/overflow/max-size/drag/loop controls.
3271
+ - Added URL-based state sharing in the playground — attribute changes are reflected in the URL for shareable links.
3272
+ - Added right-pinned attributes sidebar to the playground layout.
3273
+
3274
+ ### Changed
3275
+
3276
+ - Moved `AttributesView` panels to a fixed right sidebar with separated sections.
3277
+ - Switched playground placeholder images to `picsum.photos` for reliability.
3278
+ - Removed `focus-visible` outline from `fig-choice` in favor of selected style for keyboard navigation.
3279
+ - Suppressed hover style on selected `fig-choice` elements.
3280
+
3281
+ ### Fixed
3282
+
3283
+ - Fixed `fig-chooser` layout change not syncing max-size style — moved handler from dead code path to dropdown onChange.
3284
+ - Fixed playground URL parameters being lost on page refresh.
3285
+ - Fixed `fig-field` label toggle state not persisting via URL parameters.
3286
+ - Added missing `*.svg?raw` module declaration to fix TypeScript build.
3287
+
3288
+ ## [3.3.0]
3289
+
3290
+ ### Fixed
3291
+
3292
+ - Fixed `fig-tabs` not selecting the initial tab when `value` attribute is set — `#selectByValue` and `handleClick` now properly set the `selected` attribute on the matching `fig-tab`.
3293
+ - Deferred initial tab selection in `fig-tabs` to `requestAnimationFrame` to ensure child elements are upgraded before selection runs.
3294
+
3295
+ ### Added
3296
+
3297
+ - Added `[full]` attribute support for `fig-input-angle` (CSS and playground toggle).
3298
+ - Added `theme="auto"` for `fig-toast` — automatically resolves to the opposite of the page's current `color-scheme` at show time.
3299
+ - Added `theme="success"` option for `fig-toast`.
3300
+ - Added "Icon" toggle and "Borderless" toggle to the `fig-header` playground attributes view.
3301
+ - Added "Prepend" field steppers to popup offset inputs in the playground.
3302
+
3303
+ ### Changed
3304
+
3305
+ - Renamed "Input Angle" section to "Angle input" and moved it below "Number input" in the `/figui3` playground nav.
3306
+ - Renamed tabs attributes view header to "Tabs" and removed unused `value`, `name`, and `disabled` fields.
3307
+ - Refactored copy prompt to derive from the code markup string instead of querying the live DOM, making it work for both `/figui3` and `/propkit` examples.
3308
+ - Applied sentence case to all playground attributes view labels and headings.
3309
+ - Set `columns="thirds"` on all attributes view fields for consistent layout.
3310
+
3311
+ ## [3.2.0]
3312
+
3313
+ ### Added
3314
+
3315
+ - Added a new `Icons` segmented control example to the `/figui3` playground, reusing the same icon set as `/propkit` for consistency.
3316
+
3317
+ ### Changed
3318
+
3319
+ - Updated `/figui3` segmented control attributes to hide `value` and `name` fields in the Attributes panel, matching `/propkit`.
3320
+ - Renamed the default `/figui3` segmented control example label from `Default` to `Text`.
3321
+
3322
+ ## [3.1.0]
3323
+
3324
+ ### Added
3325
+
3326
+ - Added value-driven segmented control behavior so setting `fig-segmented-control[value]` selects the matching segment, with fallback matching from `fig-segment` text content when segment `value` is omitted.
3327
+ - Added bubbling `input` and `change` events for `fig-segmented-control` with the resolved selected value in `event.detail`.
3328
+
3329
+ ### Changed
3330
+
3331
+ - Updated playground page titles for `/figui3` and `/propkit` routes with framework-agnostic descriptions.
3332
+ - Updated Propkit segmented control attributes UI to hide `value` and `name` controls.
3333
+ - Updated code/prompt export sanitization to strip `data-playground-*` attributes from generated snippets.
3334
+ - Documented segmented control matching rules, precedence, and event behavior in `README.md`.
3335
+
3336
+ ### Fixed
3337
+
3338
+ - Fixed a segmented control mutation-resync feedback loop that could cause the playground to hang on load.
3339
+
3340
+ ## [3.0.3]
3341
+
3342
+ ### Changed
3343
+
3344
+ - Updated segmented control playground examples in `/figui3` and `/propkit` to hide `value` and `name` in the Attributes panel.
3345
+ - Added per-example `data-playground-hide-attrs` support so demo controls can suppress specific attribute fields without changing global rules.
3346
+
3347
+ ## [3.0.2]
3348
+
3349
+ ### Changed
3350
+
3351
+ - Updated joystick and fill picker handle elevation styling to use `--figma-elevation-100-canvas` for consistent control depth.
3352
+ - Simplified related hover-shadow behavior for joystick/fill picker handles and cleaned up nested `fig-layer` open-state selector structure.
3353
+
3354
+ ## [3.0.1]
3355
+
3356
+ ### Fixed
3357
+
3358
+ - Fixed `fig-joystick` layering so axis labels render below the handle by adjusting z-index order.
3359
+
3360
+ ## [3.0.0]
3361
+
3362
+ ### Added
3363
+
3364
+ - Added new `fig-joystick` component tag with percentage-first value handling (`50% 50%` default), `fields`, `aspect-ratio`, and `axis-labels` support.
3365
+ - Added joystick axis label rendering around the control plane with top/left/right/bottom placement rules and PropKit attributes integration.
3366
+ - Added live joystick value persistence in the playground code/preview flow, matching origin-grid behavior to avoid scrub interruption re-renders.
3367
+
3368
+ ### Changed
3369
+
3370
+ - **Breaking:** Renamed joystick tag from `fig-input-joystick` to `fig-joystick` and updated docs/playground/type mappings to use the new element name.
3371
+ - Updated joystick handle visuals to match the color picker handle treatment and refined axis label typography styling.
3372
+
3373
+ ### Fixed
3374
+
3375
+ - Fixed joystick X/Y field scrubbing in playground scenarios by aligning commit semantics with origin-grid (`input` during interaction, `change` on focus-out/release).
3376
+
3377
+ ## [2.39.0]
3378
+
3379
+ ### Added
3380
+
3381
+ - Added WebKit/iOS customized built-in support by loading a vendored `@ungap/custom-elements-builtin` polyfill when native support is unavailable.
3382
+ - Added `polyfills/` to published package files so runtime polyfill imports resolve correctly for consumers.
3383
+
3384
+ ### Changed
3385
+
3386
+ - Updated customized built-in registrations (`fig-dialog`, `fig-popup`, `fig-toast`) to use a polyfill-aware define helper and avoid duplicate element definitions.
3387
+ - Updated README CDN script examples to use `type="module"` and documented SSR guidance for client-only `fig.js` imports.
3388
+ - Refined playground nav list styling with vertical spacing and scroll-edge gradient fades.
3389
+
3390
+ ### Fixed
3391
+
3392
+ - Fixed playground nav behavior by removing wheel-based auto-advance between examples so wheel/trackpad scrolling stays native.
3393
+ - Fixed playground dropdown value syncing by binding `<fig-dropdown value>` directly and removing per-option `selected` attributes.
3394
+ - Fixed attribute rules typing to allow nullable `trueValue` for boolean controls.
3395
+
3396
+ ## [2.38.3]
3397
+
3398
+ ### Changed
3399
+
3400
+ - Published a patch release with no runtime code changes to keep package and changelog versions aligned.
3401
+
3402
+ ## [2.38.2]
3403
+
3404
+ ### Changed
3405
+
3406
+ - Updated playground `/figui3` popup attributes controls so `offset` edits use split X/Y numeric inputs (`fig-input-number` with prepend labels) and serialize back to the single `offset="x y"` attribute.
3407
+ - Updated playground `/figui3` popup `viewport-margin` control to use `fig-input-number` for numeric editing.
3408
+
3409
+ ### Fixed
3410
+
3411
+ - Fixed popup `offset` attribute syncing in playground attributes when using numeric inputs by accepting both number and string event payloads.
3412
+
3413
+ ## [2.38.1]
3414
+
3415
+ ### Fixed
3416
+
3417
+ - Fixed playground layout so `.propkit-code-view` no longer shrinks in flex containers.
3418
+
3419
+ ## [2.38.0]
3420
+
3421
+ ### Added
3422
+
3423
+ - Added new `fig-origin-grid` component for transform-origin editing with optional `fields`, draggable handle interaction, and click-to-cell-center placement.
3424
+ - Added PropKit integration for `fig-origin-grid` including section example, JSX typing, and attributes panel support.
3425
+ - Added overflow-aware handle states for out-of-bounds values, including directional classes and masked arrow indicator styling.
3426
+
3427
+ ### Changed
3428
+
3429
+ - Updated `fig-origin-grid` drag and click behavior to separate click vs drag intent, enable freeform out-of-bounds dragging, and support Shift snapping.
3430
+ - Updated `fig-origin-grid` value parsing/sync so single-value origins mirror to both axes and X/Y fields stay synchronized with component value changes.
3431
+ - Updated origin handle overflow nudge behavior with aspect-ratio-aware offset scaling.
3432
+
3433
+ ### Fixed
3434
+
3435
+ - Fixed playground scrub interruptions for `fig-origin-grid` X/Y number fields by emitting commit `change` on field focus-out instead of every scrub tick.
3436
+ - Fixed `fig-origin-grid` drag cursor behavior so grabbing only appears after actual drag threshold crossing.
3437
+
3438
+ ## [2.37.0]
3439
+
3440
+ ### Added
3441
+
3442
+ - Added `placeholder` passthrough support on `fig-slider` so `text="true"` forwards placeholder text to its internal `fig-input-number`.
3443
+
3444
+ ### Changed
3445
+
3446
+ - `fig-slider` now normalizes missing/empty/invalid `value` inputs with type-aware fallbacks (`min` for standard sliders, `default` then `0` for delta) while keeping drag interaction available.
3447
+ - In slider text mode, clearing the value now keeps the numeric field visually blank (showing placeholder when present) while preserving an internal fallback thumb position.
3448
+ - Playground attributes now only shows `fig-slider` `placeholder` when `text` is enabled.
3449
+
3450
+ ## [2.36.0]
3451
+
3452
+ ### Added
3453
+
3454
+ - Added `selected` attribute to `fig-3d-rotate` that applies a `selected` class to the named face (e.g. `selected="front"`).
3455
+ - Added `drag` boolean attribute to `fig-3d-rotate` (default true). Setting `drag="false"` disables cube drag rotation and switches the cursor to default.
3456
+ - Added `.selected` face styling with `--figma-color-border-strong` background and border radius.
3457
+
3458
+ ## [2.35.0]
3459
+
3460
+ ### Added
3461
+
3462
+ - Added `perspective-origin` and `transform-origin` attributes to `fig-3d-rotate`, synced to CSS custom properties `--perspective-origin` and `--transform-origin`.
3463
+ - `transform-origin` auto-preserves the default `-50cqi` Z depth when only two values (X Y) are provided.
3464
+
3465
+ ### Fixed
3466
+
3467
+ - Fixed `fig-3d-rotate` drag release outside the window by using `setPointerCapture` with `pointercancel` and `lostpointercapture` listeners, matching the color picker fix.
3468
+
3469
+ ## [2.34.0]
3470
+
3471
+ ### Added
3472
+
3473
+ - Added configurable `perspective` attribute to `fig-3d-rotate` for controlling the 3D depth effect, with a `--perspective` CSS custom property.
3474
+ - Added gradient edge borders on each side face of the `fig-3d-rotate` cube that fade from the front face backward, using per-face `border-image` gradients with `--border-start-color` / `--border-end-color` tokens.
3475
+ - Added `perspective` toggle and `perspective-distance` slider controls to the playground attributes panel for `fig-3d-rotate`.
3476
+ - Added value persistence for `fig-3d-rotate` in the playground so drag interactions survive markup re-renders.
3477
+ - Added empty-string option to `fig-3d-rotate` `fields` enum for clearing visible input fields.
3478
+
3479
+ ### Changed
3480
+
3481
+ - Improved `fig-3d-rotate` cube centering with `container-type: inline-size` and `transform-origin: 50% 50% -50cqi` for more accurate 3D rotation.
3482
+ - Updated `fig-3d-rotate` to sync the `value` attribute on both `input` and `change` events during drag interactions.
3483
+
3484
+ ## [2.33.4]
3485
+
3486
+ ### Changed
3487
+
3488
+ - Improved playground nav wheel behavior to be overflow-aware: nav lists now scroll naturally first, then advance examples at scroll boundaries.
3489
+ - Updated `.nav-links` overflow styling with thin, low-profile scrollbars for a cleaner navigation panel appearance.
3490
+
3491
+ ### Fixed
3492
+
3493
+ - Fixed fill-picker color handle drag state to reliably end on pointer cancel/lost capture and when pointer buttons are released outside the picker/window.
3494
+ - Fixed numeric alt-drag scrubbing (`fig-input-text[type="number"]`, `fig-input-number`) so drag state and cursor reset correctly when release happens outside the window.
3495
+
3496
+ ## [2.33.3]
3497
+
3498
+ ### Changed
3499
+
3500
+ - Centered the playground example container within the main layout for more consistent `/figui3` presentation.
3501
+ - Updated `.propkit-example` spacing to use horizontal zero padding while preserving vertical padding.
3502
+
3503
+ ## [2.33.2]
3504
+
3505
+ ### Added
3506
+
3507
+ - Added a `Layer` section back to the `/figui3` playground with examples for icon and no-icon rows, including nested child layers.
3508
+
3509
+ ### Changed
3510
+
3511
+ - Updated the icon-based layer example to default to `open` and `selected` on the parent with a selected nested child for clearer selection-state demos.
3512
+ - Refined playground panel spacing and related component styling polish for the latest `/figui3` examples.
3513
+
3514
+ ### Fixed
3515
+
3516
+ - Simplified shimmer direction empty-state labeling in attributes view from `Default (horizontal)` to `Default`.
3517
+
3518
+ ## [2.33.1]
3519
+
3520
+ ### Changed
3521
+
3522
+ - Updated `README.md` to reflect current FigUI3 workflows, including a dedicated playground usage section and refreshed popup/field/toast docs.
3523
+ - Updated playground attributes panel spacing by increasing `.propkit-attributes-content` bottom padding to `var(--spacer-2-5)`.
3524
+
3525
+ ### Fixed
3526
+
3527
+ - Removed `index.html` from published package files and retained the docs source in-repo as `old.html`.
3528
+
3529
+ ## [2.33.0]
3530
+
3531
+ ### Added
3532
+
3533
+ - Added a new `/playground` app flow for both FigUI3 and PropKit examples, including interactive preview, attribute editing, and code view tooling.
3534
+ - Added richer FigUI3 field and popup authoring controls in the playground (field input presets, columns presets, popup theme/viewport margin/expanded position options).
3535
+
3536
+ ### Changed
3537
+
3538
+ - Replaced legacy standalone PropKit pages/app files with the unified playground implementation and refreshed related skills/docs references.
3539
+ - Updated FigUI3 examples for header, popup, and toast to use more realistic trigger/icon patterns and current component structure.
3540
+
3541
+ ### Fixed
3542
+
3543
+ - Fixed playground code view sanitization to hide internal-only field attributes while preserving them during code-edit roundtrips.
3544
+ - Fixed enum/dropdown value syncing in attributes view (including popup theme selection) and improved fig-popup beak alignment calculations on horizontal placements.
3545
+
3546
+ ## [2.32.0]
3547
+
3548
+ ### Added
3549
+
3550
+ - Added a PropKit nav footer install helper with a readonly `fig-input-text` command field plus copy buttons for both command and install prompt.
3551
+ - Added contextual nav copy toasts (`Command copied` / `Prompt copied`) to match existing PropKit copy feedback patterns.
3552
+ - Added SVG-focused CodeMirror folding behavior in PropKit code view, with subtle fold placeholder styling.
3553
+ - Added an icon-only `Icons` example to the segmented control section.
3554
+
3555
+ ### Changed
3556
+
3557
+ - Renamed the segment section to `Segmented control` and updated the text example label to `Text`.
3558
+ - Updated attributes input panel titles to use section-aware names (for example `Segmented control` instead of `Input`).
3559
+ - Hid empty attributes input panels when there are no visible controls to render.
3560
+ - Constrained PropKit code view/editor height with internal scrolling so long markup does not overflow the viewport.
3561
+
3562
+ ### Fixed
3563
+
3564
+ - Fixed PropKit image upload persistence by writing uploaded image sources into editable markup so subsequent attribute edits keep the uploaded image.
3565
+ - Fixed image fit attribute controls by removing `50%` from fit options and treating `fit=auto` as attribute removal for better sync.
3566
+ - Added `readonly` support to `fig-input-text` so readonly fields are truly non-editable and reactive to attribute changes.
3567
+
3568
+ ## [2.31.2]
3569
+
3570
+ ### Changed
3571
+
3572
+ - Tuned PropKit `.propkit-example` dash-inset spacing for cleaner vertical rhythm in preview blocks.
3573
+ - Updated units dropdown options in PropKit attributes by removing `turn` and `rem`.
3574
+
3575
+ ### Fixed
3576
+
3577
+ - Fixed PropKit slider variant controls by removing forced slider variant overrides in preview rendering and defaulting variant selection to `default` when no variant attribute is set.
3578
+ - Fixed `fig-slider` variant reactivity by observing `variant` attribute changes and regenerating internals when variant updates.
3579
+
3580
+ ## [2.31.1]
3581
+
3582
+ ### Changed
3583
+
3584
+ - Refined PropKit layout spacing by tightening `main` description spacing and updating `.propkit-example` vertical dash-inset margins.
3585
+
3586
+ ## [2.31.0]
3587
+
3588
+ ### Added
3589
+
3590
+ - Added context-aware copy toasts in PropKit code actions (`HTML copied` / `Prompt copied`).
3591
+ - Added new PropKit examples for dropdown optgroups (`Groups`, `Labelled groups`) and switch `Indeterminate`.
3592
+ - Added per-field `Label` toggle controls in PropKit attributes to add/remove the `label` element from each `fig-field`.
3593
+
3594
+ ### Changed
3595
+
3596
+ - Refined PropKit attributes UI into two stacked panels: `Field` controls (`Direction`, `Label`) and `Input` controls.
3597
+ - Updated PropKit nav behavior for single-example sections so the parent row is directly selectable without rendering a nested child row.
3598
+ - Curated PropKit examples by removing the Dial section and trimming extra Easing Curve and 3D Rotate variants.
3599
+
3600
+ ### Fixed
3601
+
3602
+ - Fixed `fig-input-number` native steppers to honor decimal `step` values (e.g. `0.5`) and keep native `min`/`max`/`step` attributes synchronized.
3603
+ - Fixed switch/checkbox indeterminate state syncing so setting `checked` clears indeterminate visuals correctly.
3604
+
3605
+ ## [2.30.1]
3606
+
3607
+ ### Fixed
3608
+
3609
+ - Ensure `.input-combo > label` uses explicit text-color token resolution so `fig-input-fill` labels render with the correct scheme-driven text color.
3610
+
3611
+ ## [2.30.0]
3612
+
3613
+ ### Added
3614
+
3615
+ - Added a full `propkit/` React + Vite app for interactive PropKit exploration, including section/example navigation and live preview composition.
3616
+ - Added live CodeMirror-to-preview syncing so editing example markup re-renders the active example immediately.
3617
+ - Added a dynamic `Attributes` panel in PropKit that parses `fig-field` + primary `fig-*` controls and maps attributes to native FigUI controls.
3618
+ - Added a new `Number` section with `fig-input-number` examples and attribute mappings.
3619
+ - Added a new project skill: `.cursor/skills/nested-css-selectors/`.
3620
+
3621
+ ### Changed
3622
+
3623
+ - Updated PropKit layout and styles, including nested CSS refactors, top-aligned centered main content, and refined code/attributes panel headers.
3624
+ - Updated PropKit example metadata and curation (removed redundant gradient/image/slider variants, removed combined panel, and refined example naming).
3625
+ - Renamed example wrapper usage from `.prop-panel` to `.propkit-example`, with backward-compatible unwrap handling and standardized re-wrap behavior.
3626
+ - Updated `.propkit-example` styling to remove the border and use opposite `color-scheme` for stronger visual contrast.
3627
+ - Updated `Attributes` panel behavior with targeted control rules (segmented control for `direction`, constrained aspect-ratio options, and specialized 3D rotate field labels/options).
3628
+ - Removed `fig-popover` and `fig-popover-2` component implementations and associated demo/docs usage; popup guidance now centers on `fig-popup`.
3629
+ - Updated `glitch.html` to use a `fig-popup` example instead of `fig-popover`.
3630
+
3631
+ ### Fixed
3632
+
3633
+ - Fixed `fig-image` attribute reactivity for `upload`/`download` by supporting presence-style booleans, observing `download`, and handling each attribute independently in `attributeChangedCallback`.
3634
+ - Fixed enum dropdown value handling in PropKit attributes so displayed sentence-case labels no longer corrupt raw attribute values (notably `fig-3d-rotate` fields).
3635
+
3636
+
3637
+ ## [2.29.3]
3638
+
3639
+ ### Fixed
3640
+
3641
+ - Fix `querySelector` crash in propkit when navigating to `#3d-rotate` (IDs starting with a digit are invalid CSS selectors); switched to `getElementById`.
3642
+
3643
+ ## [2.29.2]
3644
+
3645
+ ### Fixed
3646
+
3647
+ - Include `propkit.html` and `.cursor/skills/` in published npm package.
3648
+
3649
+ ## [2.29.1]
3650
+
3651
+ ### Changed
3652
+
3653
+ - Reduced `fig-3d-rotate` field input flex-basis from `4rem` to `3rem` for tighter layouts.
3654
+
3655
+ ## [2.29.0]
3656
+
3657
+ ### Added
3658
+
3659
+ - `fig-3d-rotate` now supports a `fields` attribute to render `fig-input-number` inputs for specified axes (e.g. `fields="rotateX,rotateY,rotateZ"`), with two-way sync between the cube preview and number fields.
3660
+ - Number fields use degree units, `precision="1"`, and flex-wrap responsively with a `4rem` min-width per field.
3661
+ - Added propkit examples for fields: all axes, Y only, X & Y, fields with 16:9 aspect ratio and preset values, and fields without a label.
3662
+
3663
+ ### Changed
3664
+
3665
+ - `fig-3d-rotate` layout updated to `flex-wrap: wrap` with gap for proper field stacking below the cube container.
3666
+ - `fig-3d-rotate` now constrains properly inside horizontal `fig-field` via `min-width: 0`.
3667
+
3668
+ ### Fixed
3669
+
3670
+ - `fig-3d-rotate` field inputs now intercept both `input` and `change` events from child `fig-input-number` elements, preventing mismatched event detail leaking to consumers.
3671
+
3672
+ ## [2.28.0]
3673
+
3674
+ ### Fixed
3675
+
3676
+ - Added missing `#wasDragged` private field declaration in `FigPopup` to prevent runtime syntax errors in popup drag/reposition logic.
3677
+
3678
+ ## [2.27.0]
3679
+
3680
+ ### Changed
3681
+
3682
+ - Refined easing curve editor visuals with rounded stroke caps/joins and padded drawing container for clearer spring/bezier presentation.
3683
+
3684
+ ### Fixed
3685
+
3686
+ - `fig-popup` now stops anchor-based auto-repositioning after the user manually drags an anchored, draggable popup, preserving manual placement.
3687
+
3688
+ ## [2.26.0]
3689
+
3690
+ ### Added
3691
+
3692
+ - New `fig-easing-curve` component with bezier and spring editing, preset dropdown support, and `input`/`change` events exposing `value`, `cssValue`, `mode`, and `preset`.
3693
+ - New `propkit.html` demo page with focused property-field examples, including image, color, fill, slider variants, switch, dropdown, segment, angle, and easing curve sections.
3694
+ - Copy-prompt helpers in `propkit.html` section subheaders, including one-click prompt copy and toast feedback.
3695
+
3696
+ ### Changed
3697
+
3698
+ - `fig-easing-curve` spring editor now keeps duration marker behavior aligned to the rendered spring timeline and improves handle interaction/visual consistency.
3699
+ - Easing curve icon generation now uses 24x24 icons with 6px padding and dynamic custom preset icon refresh.
3700
+ - Sliders in `propkit.html` now use the modern compact slider appearance.
3701
+ - `fig-image` now supports `aspect-ratio` and `fit` mapping to internal CSS vars for richer image layout control.
3702
+
3703
+ ### Fixed
3704
+
3705
+ - Tooltip warmup behavior: recently shown tooltips now open instantly during rapid hover transitions.
3706
+ - `fig-input-fill` now supports `alpha="false"` and hides opacity controls when alpha is disabled.
3707
+ - Easing curve bezier diagonal reference line visibility and spring duration marker rendering issues in demos.
3708
+
3709
+ ## [2.25.0]
3710
+
3711
+ ### Added
3712
+
3713
+ - Custom mode slots for `fig-fill-picker` — add custom tabs via `slot="mode-*"` children (e.g., `<div slot="mode-shader" label="Shader">`). The mode name must also appear in the `mode` attribute.
3714
+ - `modeready` event on `fig-fill-picker` — fires per custom mode with `{ mode, container }` detail, giving frameworks like React a stable DOM target to render into without DOM reparenting.
3715
+ - `picker-*` attribute forwarding on `fig-input-color` and `fig-input-fill` — attributes like `picker-anchor` and `picker-dialog-position` are forwarded to the underlying `fig-fill-picker`.
3716
+ - `picker-anchor` attribute on `fig-input-color` and `fig-input-fill` — set to `"self"` to anchor the fill picker to the entire input, or pass a CSS selector for a custom anchor element.
3717
+ - Custom trigger support examples for `fig-fill-picker` — buttons, icon buttons, inline text, and custom divs as triggers.
3718
+ - Custom mode demos: Shader mode with `fig-input-text multiline`, built-in mode override with a palette, and a React mode using `modeready`.
3719
+ - Prism.js syntax highlighting for code examples in the demo page.
3720
+
3721
+ ### Changed
3722
+
3723
+ - `fig-input-fill` fill picker now defaults its anchor to the component itself (not just the chit).
3724
+ - Custom mode tabs in `fig-fill-picker` automatically get zero padding on `.fig-fill-picker-content`, giving slot content full control over layout.
3725
+ - `dialog-position` removed from `FigInputColor.observedAttributes` — use `picker-dialog-position` instead.
3726
+ - `fig-fill-picker` trigger detection now skips `slot="mode-*"` children when identifying the trigger element.
3727
+
3728
+ ### Fixed
3729
+
3730
+ - Dropdown inner content now has `width: 100%` for proper sizing.
3731
+ - Ghost button active state now uses correct text color (`--figma-color-text`).
3732
+
3733
+ ## [2.24.0]
3734
+
3735
+ ### Changed
3736
+
3737
+ - Improved FigImage teardown safety.
3738
+
3739
+ ## [2.23.0]
3740
+
3741
+ ### Added
3742
+
3743
+ - `viewport-margin` attribute for `fig-popup` — defines per-edge safe areas (CSS margin shorthand: `top right bottom left`) that popups avoid during positioning. Useful for keeping popups clear of persistent UI like toolbars.
3744
+ - Viewport margin demo in the popup section showing a 64px bottom margin.
3745
+
3746
+ ### Fixed
3747
+
3748
+ - Scroll events originating inside a popup no longer trigger repositioning.
3749
+
3750
+ ## [2.22.3]
3751
+
3752
+ ### Fixed
3753
+
3754
+ - Large icon buttons now correctly sized at 32px: added `flex-basis` override and `padding: 0` to prevent `[icon]` flex-basis (24px) and `[size="large"]` padding from shrinking/padding the icon area.
3755
+ - Removed doubled padding on large text buttons: shadow DOM `:host([size="large"])` rule no longer adds its own padding (host padding suffices).
3756
+
3757
+ ## [2.22.2]
3758
+
3759
+ ### Added
3760
+
3761
+ - Button combo examples for `variant="input"` and `variant="ghost"` in the demo page.
3762
+ - `size="large"` support for segmented controls with corresponding CSS.
3763
+ - `size="large"` examples for all icon button variants with 24x24 icons.
3764
+
3765
+ ### Fixed
3766
+
3767
+ - Large buttons: shadow DOM inner `<button>` uses `:host([size="large"])` selectors to properly respond to the host's size attribute.
3768
+
3769
+ ## [2.22.1]
3770
+
3771
+ ### Changed
3772
+
3773
+ - Popup shorthand positioning (`position="left"`, etc.) now smoothly slides the cross-axis to fit the viewport instead of snapping to discrete top/center/bottom alignments. Stays on the preferred side as long as the primary axis fits.
3774
+ - Popup scroll tracking is now synchronous (no RAF delay), eliminating 1-frame lag when scrolling. Scroll listener uses `{ passive: true }` to avoid blocking scroll performance.
3775
+ - Demo page sidebar width is now viewport-based (`15vw`, clamped between 180px–280px).
3776
+
3777
+ ## [2.22.0]
3778
+
3779
+ ### Added
3780
+
3781
+ - `dialog-position` attribute pass-through for `fig-input-color` — allows controlling the popup direction of nested color pickers (defaults to `"left"`).
3782
+ - `#isInsideDescendantPopup` method on `fig-popup` — walks the popup anchor chain to determine logical containment across sibling `<dialog>` elements.
3783
+
3784
+ ### Fixed
3785
+
3786
+ - Nested popup dismissal: interacting with a child popup (e.g., a gradient stop's color picker) no longer closes the parent popup. The outside-click handler now recognizes popups whose anchor chain traces back into the current popup.
3787
+ - Gradient stop color pickers now open to the right (`dialog-position="right"`) to avoid viewport-edge fallback to top positioning.
3788
+
3789
+ ### Changed
3790
+
3791
+ - Refined popup fallback positioning: single-word `position` values (e.g., `left`) now try opposite then perpendicular axes; two-word values use smarter ordered candidates instead of a 3x3 matrix.
3792
+ - Removed hover `grab` cursor on draggable `fig-popup` (only shows `grabbing` while actively dragging).
3793
+
3794
+ ## [2.21.0]
3795
+
3796
+ ### Added
3797
+
3798
+ - `autoresize` attribute for `fig-popup` (default: true). Set `autoresize="false"` to disable content-driven repositioning and auto-sizing CSS (`width: max-content`, `max-width`, `max-height`, `overflow`).
3799
+ - Drag cursor behavior for `fig-dialog` and `fig-popup`: `grab` on hover, `grabbing` while dragging (previously used `move`).
3800
+ - Left shorthand popup position example in the demo page.
3801
+
3802
+ ### Changed
3803
+
3804
+ - Popup `position` semantics for two-word values: when vertical is `top` or `bottom`, horizontal `left`/`right` now means edge-alignment (e.g., `top left` = above anchor, left edges aligned) rather than side-placement. `center left`/`center right` retains side-placement behavior.
3805
+ - Fill picker popup (`fig-input-fill`, `fig-input-color`) now uses `position="left"` for correct side placement next to the trigger.
3806
+ - Nav width increased to 240px in the demo page.
3807
+
3808
+ ### Fixed
3809
+
3810
+ - Fill picker popup anchoring: now anchors to the trigger element (`fig-chit` or button) instead of the `fig-fill-picker` wrapper, which uses `display: contents` and has no bounding box.
3811
+ - Fill picker popup sets `autoresize="false"` to prevent unwanted content-driven repositioning.
3812
+
3813
+ ## [2.20.0]
3814
+
3815
+ ### Added
3816
+
3817
+ - Toolbelt component at the bottom of the demo page with sectioned icon button groups.
3818
+ - Non-modal dialog example with code showing `.show()` vs `.showModal()`.
3819
+ - `closedby` attribute documentation and live demos (`any`, `closerequest`, `none`) in the dialog section.
3820
+
3821
+ ### Changed
3822
+
3823
+ - Elevation shadow variables (`--figma-elevation-*`, `--handle-shadow`) now use `light-dark()` inline for theme switching, removing the need for separate `.figma-dark` and `@media (prefers-color-scheme: dark)` override blocks.
3824
+
3825
+ ### Fixed
3826
+
3827
+ - Dialog `closedby="none"` and `closedby="closerequest"` now properly prevent outside-click dismissal in the JS fallback handler.
3828
+
3829
+ ## [2.19.1]
3830
+
3831
+ ### Fixed
3832
+
3833
+ - `@media (prefers-color-scheme)` blocks no longer conflict with manual theme switching via `color-scheme`. Scoped with `:not(.figma-dark):not(.figma-light)` so they only apply as a no-JS fallback; class-based overrides are now the primary mechanism.
3834
+
3835
+ ## [2.19.0]
3836
+
3837
+ ### Added
3838
+
3839
+ - New `variant="input"` for `fig-button` — styled to match input fields with matching hover, active, and focus-visible states.
3840
+ - `--icon-chevron` added to the icons demo page.
3841
+ - Button demo examples for the input variant: default, with chevron icon, icon-only, and disabled states.
3842
+
3843
+ ### Fixed
3844
+
3845
+ - `fig-input-fill` gradient label now updates when changing gradient subtype (e.g., Radial → Linear) without switching fill types.
3846
+
3847
+ ## [2.18.3]
3848
+
3849
+ ### Fixed
3850
+
3851
+ - `fig-input-fill` gradient label now updates when changing gradient subtype (e.g., Radial → Linear) without switching fill types.
3852
+
3853
+ ## [2.18.2]
3854
+
3855
+ ### Fixed
3856
+
3857
+ - Gradient stop opacity at 0% no longer snaps back to 100% — replaced `|| 100` with `?? 100` (nullish coalescing) so zero is not treated as falsy.
3858
+ - Color picker handle now updates its color when the hue slider changes — added missing `#updateHandlePosition()` call.
3859
+
3860
+ ### Added
3861
+
3862
+ - Experimental attribute examples for `fig-fill-picker` and `fig-input-fill` in the demo page.
3863
+
3864
+ ## [2.18.1]
3865
+
3866
+ ### Added
3867
+
3868
+ - Prepend/append slot elements on `fig-input-number` and `fig-input-text[type="number"]` now act as scrub handles — click and drag to scrub the value without holding alt/option.
3869
+ - `cursor: ew-resize` on slot elements in numeric inputs to indicate the drag affordance.
3870
+ - `react.html` test page for verifying web component behavior under React state-driven re-renders.
3871
+
3872
+ ### Changed
3873
+
3874
+ - Alt-drag scrubbing no longer stops if the alt key is released mid-drag — once scrubbing starts, it continues until pointer release.
3875
+
3876
+ ## [2.18.0]
3877
+
3878
+ ### Fixed
3879
+
3880
+ - **Interaction guard for framework re-renders**: Components with drag/scrub interactions no longer get clobbered when React (or other frameworks) set the `value` attribute during an active user gesture. Follows the same `#isDraggingColor` pattern already used by `fig-fill-picker`.
3881
+ - `fig-input-number`: Guards alt-drag scrubbing and keyboard editing (focus/blur)
3882
+ - `fig-input-text`: Guards alt-drag scrubbing for number type
3883
+ - `fig-slider`: Guards native range input drag via pointerdown/pointerup
3884
+ - `fig-input-angle`: Guards handle drag
3885
+ - `fig-input-joystick`: Guards handle drag
3886
+ - **`fig-input-fill` no longer destroys DOM mid-interaction**: `attributeChangedCallback` now updates children in-place instead of doing a full re-render when the fill type hasn't changed.
3887
+
3888
+ ### Changed
3889
+
3890
+ - `fig-slider` with `text="true"` now skips the range input in tab order (`tabindex="-1"`), so Tab goes directly to the text input.
3891
+ - `fig-input-color`, `fig-input-fill`, and `fig-slider` now properly flex and shrink inside horizontal `fig-field` layouts (`flex: 1; min-width: 0`).
3892
+ - Updated horizontal fields demo section with a resizable container and `full` attribute on all inputs.
3893
+
3894
+ ## [2.17.2]
3895
+
3896
+ ### Added
3897
+
3898
+ - New `FigPopup` foundational floating component implemented as `<dialog is="fig-popup">`.
3899
+ - `FigPopup` supports:
3900
+ - `anchor` selector binding (local-first lookup, then document fallback)
3901
+ - `position` with two-value placement (`vertical horizontal`)
3902
+ - single-value shorthand placement (`top`, `bottom`, `left`, `right`)
3903
+ - `offset="x y"` with unitless values treated as pixels
3904
+ - observer-driven repositioning on popup content changes and anchor resize
3905
+ - Added comprehensive Popup examples in `index.html`, including:
3906
+ - default and explicit placements
3907
+ - property API usage (`popup.open = true/false`)
3908
+ - position matrix examples and single-value shorthand examples
3909
+ - per-example code snippets
3910
+
3911
+ ### Changed
3912
+
3913
+ - `FigPopup` outside-click behavior now closes by default (`closedby="any"` with fallback handling).
3914
+ - Popup open handling is idempotent (repeated open requests do not re-open/reinitialize when already open).
3915
+ - Default popup offsets are now `0 0` (both horizontal and vertical).
3916
+ - Popup demo anchors now bind directly to the corresponding open button (removed separate anchor-target buttons).
3917
+
3918
+ ## [2.17.1]
3919
+
3920
+ ### Changed
3921
+
3922
+ - Moved `fig-footer` styles from page-local `index.html` styles into `components.css` for reusable component-level styling.
3923
+ - Added component-level sticky support for `fig-footer[sticky]`, including bottom stickiness and theme-aware background treatment.
3924
+ - Kept demo markup clean by removing duplicated `fig-footer` style definitions from `index.html`.
3925
+
3926
+ ## [2.17.0]
3927
+
3928
+ ### Added
3929
+
3930
+ - Added a `fig-footer sticky="true"` demo to the main page with a settings control menu.
3931
+ - Added rich dropdown option examples using `fig-checkbox` controls for fill-application actions.
3932
+
3933
+ ### Changed
3934
+
3935
+ - Refined sticky footer behavior in `index.html` to use true sticky semantics (content-bottom when short, sticky on overflow).
3936
+ - Updated settings menu trigger to follow the `fig-button type="select"` pattern used in button examples.
3937
+ - Improved `fig-dropdown` handling for persistent controls (`fig-checkbox`, `fig-switch`, checkbox inputs) in option content so interaction does not behave like standard pick-and-close selection.
3938
+ - Fixed `fig-checkbox` lifecycle behavior to prevent duplicate internal rendering when checkbox elements are cloned inside dropdown option content.
3939
+
3940
+ ## [2.16.0]
3941
+
3942
+ ### Added
3943
+
3944
+ - `fig-segmented-control` now supports a `disabled` attribute
3945
+ - Added disabled segmented control examples in `index.html` for both text and icon variants
3946
+
3947
+ ## [2.15.0] - Breaking Changes
3948
+
3949
+ ### Changed
3950
+
3951
+ - The `variant` attribute is now reserved for visual styling only.