@rogieking/figui3 8.9.29 → 8.9.31

package/README.md

@@ -1093,6 +1093,8 @@ When app code rebuilds a chooser by setting `fig-chooser.innerHTML`, the chooser
 | `drag` | boolean | `false` | Enable drag-to-scroll |
 | `overflow` | string | — | Overflow behavior |
 | `loop` | boolean | `false` | Loop keyboard navigation |
+| `auto-scroll` | boolean | `true` | Automatically center the selection after selection, layout, resize, or media changes. Set to `"false"` to disable. |
+| `scroll-behavior` | string | `"smooth"` | Selection and overflow-button scrolling behavior: `"smooth"` or `"auto"`. The CSS `scroll-behavior` property can also override it. |
 
 **fig-choice attributes:**
 
@@ -1104,6 +1106,10 @@ When app code rebuilds a chooser by setting `fig-chooser.innerHTML`, the chooser
 
 **Events (on fig-chooser):** `input`, `change` — detail is the selected value string.
 
+Selection follows the native `<select>` pattern: set `chooser.value` with a choice value, or set `chooser.selectedChoice` with a choice element. Neither programmatic selection nor scrolling emits events.
+
+When `auto-scroll="false"`, reveal the current selection explicitly with `chooser.scrollSelectionIntoView(options?)`. It accepts native-style `ScrollIntoViewOptions` (`behavior`, `block`, and `inline`) and centers by default.
+
 ```html
 <fig-chooser value="opt1">
   <fig-choice value="opt1">Option 1</fig-choice>

package/components.css

@@ -5017,9 +5017,18 @@ fig-chooser {
   overflow: hidden auto;
   padding: 0;
   margin: 0 var(--fig-chooser-inline-margin);
+  scroll-behavior: smooth;
   scrollbar-width: none;
   width: calc(100% - var(--fig-chooser-inline-margin) * 2);
 
+  &[scroll-behavior="auto"] {
+    scroll-behavior: auto;
+  }
+
+  &[scroll-behavior="smooth"] {
+    scroll-behavior: smooth;
+  }
+
   fig-field > &{
     --fig-chooser-inline-margin:0;
   }
@@ -5184,6 +5193,12 @@ fig-chooser {
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  fig-chooser:not([scroll-behavior="smooth"]) {
+    scroll-behavior: auto;
+  }
+}
+
 fig-card {
   --fig-card-label-line-clamp: 1;
   --fig-card-media-radius: var(--radius-medium);