drawnui-react 0.1.0-preview.1 → 0.1.0-preview.10

package/dist/controls/SkiaLayout.js

@@ -87,7 +87,11 @@ export class SkiaLayout extends SkiaControl {
      */
     ApplyIncrementalChange(old, items) {
         const n = items.length, o = old.length;
-        if (n <= o || o === 0)
+        if (o === 0)
+            return false;
+        if (n === o)
+            return this.ApplyReorderChange(old, items);
+        if (n < o)
             return false;
         const k = n - o;
         const scale = this.RenderingScale, gap = this.Spacing * scale, w = this.measuredWidthPx;
@@ -143,6 +147,65 @@ export class SkiaLayout extends SkiaControl {
         }
         return false;
     }
+    /**
+     * Same items in another order — a drag-to-reorder, or any code writing a permuted array. DrawnUi handles the
+     * matching `ObservableCollection.Move` by keeping the structure and only rebinding the contexts, because its
+     * arrange re-flows each row from its bound view (`HandleStructurePreservingMove` / `ApplyMoveChange`, 2026-09-08).
+     * The measured heights here are index-keyed and authoritative, so they travel with their items instead: nothing is
+     * remeasured, the extent cannot change, and the scroll keeps its offset. Rebuilding instead would reset
+     * `MeasureVisible` to "exact for the first screen, estimated after" and throw a scrolled list back towards the top.
+     * Returns false when the two arrays are not a permutation of each other, so a real content change still rebuilds.
+     */
+    ApplyReorderChange(old, items) {
+        const n = items.length;
+        if (this.MeasureItemsStrategy === "MeasureAll" && this.itemHeights.length !== n)
+            return false;
+        if (this.MeasureItemsStrategy === "MeasureVisible" && this.mvHeights.length !== n)
+            return false;
+        const moved = [];
+        for (let i = 0; i < n; i++)
+            if (old[i] !== items[i])
+                moved.push(i);
+        if (moved.length === 0) {
+            this.ChildrenFactory.UpdateItems(items);
+            return true;
+        } // same order, new array reference
+        // every slot that changed must hold an item that was in one of those slots before, otherwise this is not a reorder
+        const free = new Map();
+        for (const i of moved) {
+            const q = free.get(old[i]);
+            if (q)
+                q.push(i);
+            else
+                free.set(old[i], [i]);
+        }
+        const from = new Int32Array(n);
+        for (let i = 0; i < n; i++)
+            from[i] = i;
+        for (const i of moved) {
+            const q = free.get(items[i]);
+            if (!q || q.length === 0)
+                return false;
+            from[i] = q.shift();
+        }
+        if (this.MeasureItemsStrategy === "MeasureAll") {
+            const was = this.itemHeights;
+            this.itemHeights = Array.from({ length: n }, (_, i) => was[from[i]]);
+        }
+        else if (this.MeasureItemsStrategy === "MeasureVisible") {
+            const was = this.mvHeights, heights = new Float64Array(n);
+            for (let i = 0; i < n; i++)
+                heights[i] = was[from[i]];
+            this.mvHeights = heights;
+            // an item that was never measured can land inside the exact prefix: rebuild it over the leading measured run
+            this.mvPrefix = new Float64Array(n + 1);
+            this.mvMeasured = 0;
+            this.MvExtendPrefix(this.Spacing * this.RenderingScale);
+        }
+        // MeasureFirst has one height for every row, so a reorder is a pure rebind there (same as the C# note).
+        this.ChildrenFactory.UpdateItems(items);
+        return true;
+    }
     /** Factory creating one cell (DrawnUi DataTemplate). Cells receive the item as BindingContext. */
     get ItemTemplate() { return this.itemTemplate; }
     set ItemTemplate(value) {

package/dist/controls/SkiaRadioButton.js

@@ -37,8 +37,7 @@ export class SkiaRadioButton extends SkiaToggle {
         return table[this.UsingControlStyle]?.[name];
     }
     CreateDefaultContent() {
-        if (this.MinimumHeightRequest < 0)
-            this.MinimumHeightRequest = 24;
+        this.SetMinimumContentHeight(24);
         const s = this.usingStyle;
         const size = s === "Unset" ? 18 : 20;
         const box = new SkiaLayout();

package/dist/controls/SkiaScroll.d.ts

@@ -218,6 +218,15 @@ export declare class SkiaScroll extends SkiaControl {
     /** DrawnUi DecelerationRatio: FrictionScrolled / 100, floored at 0.1 friction. */
     private get DecelerationRatio();
     private ResetPan;
+    private draggedScrollBar?;
+    private scrollBarOwnsGesture;
+    /**
+     * Thumb drag and track press on a ScrollBar / ScrollBarHorizontal with IsDraggable set (C# ProcessScrollBarGestures).
+     * A gesture that starts on the bar belongs to it until the next down: the content neither pans nor gets the tap.
+     * True when the gesture was handled here.
+     */
+    protected ProcessScrollBarGestures(args: SkiaGesturesParameters, apply: GestureEventProcessingInfo): boolean;
+    private ApplyScrollBarDrag;
     ProcessGestures(args: SkiaGesturesParameters, apply: GestureEventProcessingInfo): SkiaControl | null;
     private Bounce;
     /** DrawnUi StartToFlingFrom + PrepareToFlingAfterInitialized: cut the curve so it stops exactly at the edge. */

package/dist/controls/SkiaScroll.js

@@ -121,7 +121,7 @@ export class SkiaScroll extends SkiaControl {
     }
     /** C# UpdateScrollBarIndicator: pushes progress / thumb ratio / overscroll / scrolling state when any changed. */
     UpdateScrollBarIndicator() {
-        const isScrolling = this.IsScrolling || this.IsUserPanning;
+        const isScrolling = this.IsScrolling || this.IsUserPanning || !!this.draggedScrollBar;
         const scale = this.RenderingScale;
         const viewportH = this.DrawingRect.Height / scale, viewportW = this.DrawingRect.Width / scale;
         const extentH = this.ContentSize.Units.Height + this.HeaderExtentPts + this.FooterExtentPts, extentW = this.ContentSize.Units.Width + this.HeaderExtentPts + this.FooterExtentPts;
@@ -560,6 +560,15 @@ export class SkiaScroll extends SkiaControl {
         const width = Math.max(0, this.ContentSize.Units.Width + (this.Orientation === "Horizontal" ? extra : 0) - viewportW);
         const height = Math.max(0, this.ContentSize.Units.Height + (this.Orientation !== "Horizontal" ? extra : 0) - viewportH);
         this.ContentOffsetBounds = new SKRect(-width, -height, 0, 0);
+        // C# InitializeViewport: pull an offset the new bounds no longer contain back inside them, here where
+        // the bounds change. Shrinking content (fewer items) otherwise leaves the viewport parked past its end
+        // with nothing on screen. Skipped under a live pan, a fling / bounce or pull-to-refresh, where being
+        // past the edge is intentional (rubber band, refresh indicator).
+        if (!this.IsUserPanning && !this.IsScrolling && !this.isRefreshing) {
+            const c = this.ClampOffset(this.offsetX, this.offsetY, this.ContentOffsetBounds, true);
+            this.ViewportOffsetX = c.X;
+            this.ViewportOffsetY = c.Y;
+        }
         this.ArrangeContent();
         this.CheckLoadMore();
     }
@@ -637,9 +646,18 @@ export class SkiaScroll extends SkiaControl {
         if (this.RefreshEnabled && this.refreshIndicator && this.refreshIndicator.IsVisible && (this.OverScrolled || this.isRefreshing))
             this.refreshIndicator.Render(ctx);
         this.UpdateScrollBarIndicator();
-        for (const bar of [this.scrollBar, this.scrollBarHorizontal])
-            if (bar && bar.IsVisible && bar.Opacity > 0)
-                bar.Render(ctx);
+        for (const bar of [this.scrollBar, this.scrollBarHorizontal]) {
+            if (!bar || !bar.IsVisible || bar.Opacity <= 0)
+                continue;
+            // the bar is parent-independent: its thumb resizing (squash on a bounce) invalidates the bar alone, so it is
+            // re-measured here on draw instead of dragging the scroll and every ancestor through a measure each frame
+            if (bar.NeedMeasure) {
+                const r = this.DrawingRect;
+                bar.Measure(r.Width, r.Height, this.RenderingScale);
+                bar.Arrange(r, bar.WidthRequest, bar.HeightRequest, this.RenderingScale);
+            }
+            bar.Render(ctx);
+        }
         canvas.restoreToCount(saved);
     }
     OnScrolled() {
@@ -754,13 +772,35 @@ export class SkiaScroll extends SkiaControl {
             return;
         const i = Math.max(0, Math.min(items.length - 1, index));
         const scale = this.RenderingScale;
-        const layoutTopPts = (layout.DrawingRect.Top - this.content.DrawingRect.Top) / scale;
-        let target = layoutTopPts + layout.GetItemOffsetPixels(i) / scale;
+        const horizontal = this.Orientation === "Horizontal";
+        const viewport = (horizontal ? this.DrawingRect.Width : this.DrawingRect.Height) / scale;
+        // Item start and size in points, relative to the content start along the scroll axis.
+        let itemStart, itemSize;
+        if (!horizontal && layout.Type === "Column" && layout.Split <= 1) {
+            // The virtualized list: cells past the viewport are not realized, the structure knows their offsets.
+            itemStart = (layout.DrawingRect.Top - this.content.DrawingRect.Top + layout.GetItemOffsetPixels(i)) / scale;
+            itemSize = (layout.GetItemOffsetPixels(i + 1) - layout.GetItemOffsetPixels(i)) / scale;
+        }
+        else {
+            // A templated Row / Wrap / Grid realizes every item (C# non-list layouts are not virtualized): read the cell's
+            // arranged rect, like C# reads the structure cell's Destination.
+            const cell = layout.ChildrenFactory.GetViewForIndex(i);
+            if (!cell)
+                return;
+            const r = cell.DrawingRect, c = this.content.DrawingRect;
+            itemStart = (horizontal ? r.Left - c.Left : r.Top - c.Top) / scale;
+            itemSize = (horizontal ? r.Width : r.Height) / scale;
+        }
+        let target = itemStart;
         if (option === "End")
-            target -= this.DrawingRect.Height / scale - layout.GetItemOffsetPixels(i + 1) / scale + layout.GetItemOffsetPixels(i) / scale;
+            target -= viewport - itemSize;
         else if (option === "Center")
-            target -= this.DrawingRect.Height / scale / 2;
-        this.ScrollTo(this.offsetX, -target, animate ? this.ScrollingSpeedMs / 1000 : 0, true);
+            target -= (viewport - itemSize) / 2;
+        const time = animate ? this.ScrollingSpeedMs / 1000 : 0;
+        if (horizontal)
+            this.ScrollTo(-target, this.offsetY, time, true);
+        else
+            this.ScrollTo(this.offsetX, -target, time, true);
     }
     StopAnimators() {
         this.flingEdgeX = null;
@@ -783,10 +823,68 @@ export class SkiaScroll extends SkiaControl {
         this.panningLastDelta = SKPoint.Empty;
         this.panningCurrentOffsetPts = new SKPoint(this.offsetX, this.offsetY);
     }
+    draggedScrollBar;
+    scrollBarOwnsGesture = false;
+    /**
+     * Thumb drag and track press on a ScrollBar / ScrollBarHorizontal with IsDraggable set (C# ProcessScrollBarGestures).
+     * A gesture that starts on the bar belongs to it until the next down: the content neither pans nor gets the tap.
+     * True when the gesture was handled here.
+     */
+    ProcessScrollBarGestures(args, apply) {
+        if (args.Type === "Down") {
+            this.draggedScrollBar = undefined;
+            this.scrollBarOwnsGesture = false;
+            const draggable = (b) => b && b.IsDraggable && b.BeginDrag && b.GetDragProgress ? b : undefined;
+            const v = draggable(this.scrollBar), h = draggable(this.scrollBarHorizontal);
+            if (!v && !h)
+                return false;
+            const x = apply.MappedLocation.X + apply.ChildOffset.X, y = apply.MappedLocation.Y + apply.ChildOffset.Y;
+            if (v && v.BeginDrag(x, y))
+                this.draggedScrollBar = v;
+            else if (h && h.BeginDrag(x, y))
+                this.draggedScrollBar = h;
+            if (!this.draggedScrollBar)
+                return false;
+            this.scrollBarOwnsGesture = true;
+            this.StopScrolling();
+            this.ApplyScrollBarDrag(x, y);
+            args.Event.Handled = true; // used: a touch on the bar is claimed, the page must not take the drag
+            return true;
+        }
+        if (!this.scrollBarOwnsGesture)
+            return false;
+        if (!this.draggedScrollBar)
+            return args.Type === "Tapped" || args.Type === "LongPressing"; // released already: only the tap that follows belongs to the bar
+        if (args.Type === "Panning") {
+            this.ApplyScrollBarDrag(apply.MappedLocation.X + apply.ChildOffset.X, apply.MappedLocation.Y + apply.ChildOffset.Y);
+            args.Event.Handled = true;
+        }
+        else if (args.Type === "Up") {
+            this.draggedScrollBar = undefined;
+            this.scrollBarLast = undefined; // push the idle state so an auto-hiding bar fades again
+            this.scrollBarHLast = undefined;
+            this.Repaint();
+        }
+        return true;
+    }
+    ApplyScrollBarDrag(x, y) {
+        const bar = this.draggedScrollBar;
+        if (!bar)
+            return;
+        const progress = bar.GetDragProgress(x, y);
+        const b = this.ContentOffsetBounds;
+        if (bar === this.scrollBarHorizontal)
+            this.ViewportOffsetX = this.ClampOffset(-progress * b.Width, this.offsetY, b, true).X;
+        else
+            this.ViewportOffsetY = this.ClampOffset(this.offsetX, -progress * b.Height, b, true).Y;
+        this.Repaint();
+    }
     ProcessGestures(args, apply) {
         const consumedDefault = this.BlockGesturesBelow ? this : null;
         const scale = this.RenderingScale;
         const e = args.Event;
+        if (this.ProcessScrollBarGestures(args, apply))
+            return this;
         if (args.Type === "Down") {
             this.hadDown = true;
             this.snapped = false;
@@ -801,15 +899,18 @@ export class SkiaScroll extends SkiaControl {
             const child = super.ProcessGestures(args, apply);
             if (child && child !== this)
                 return child;
-            if (!this.RespondsToGestures)
-                return child ?? consumedDefault;
-            return this.ApplyWheelScroll(e.Wheel.Delta) ? this : consumedDefault;
+            if (!this.RespondsToGestures || this.Orientation === "Neither")
+                return child ?? consumedDefault; // Neither: not used, a parent scroll may take it
+            if (!this.ApplyWheelScroll(e.Wheel.Delta))
+                return consumedDefault; // at its edge: not used, the page may take it
+            e.Handled = true;
+            return this;
         }
         this.velocityY = e.Distance.Velocity.Y / scale;
         this.velocityX = e.Distance.Velocity.X / scale;
         const wrongDirection = (this.Orientation === "Vertical" && Math.abs(e.Distance.Total.X) > Math.abs(e.Distance.Total.Y) && Math.abs(e.Distance.Total.X) > SkiaScroll.ScrollVelocityThreshold * scale) ||
             (this.Orientation === "Horizontal" && Math.abs(e.Distance.Total.Y) > Math.abs(e.Distance.Total.X) && Math.abs(e.Distance.Total.Y) > SkiaScroll.ScrollVelocityThreshold * scale);
-        if (args.Type === "Panning" && this.RespondsToGestures && this.hadDown) {
+        if (args.Type === "Panning" && this.RespondsToGestures && this.hadDown && this.Orientation !== "Neither") {
             if (!this.IsUserPanning) {
                 // A child may own the pan (slider, nested horizontal scroll); ask once before taking over.
                 const childConsumed = super.ProcessGestures(args, apply);
@@ -860,6 +961,12 @@ export class SkiaScroll extends SkiaControl {
             const swipeThreshold = SkiaScroll.ThesholdSwipeOnUp * scale;
             let vx = finalVelocity.X * this.ChangeVelocityScrolled;
             let vy = finalVelocity.Y * this.ChangeVelocityScrolled;
+            // a cancelled pointer (the browser took the pan to scroll the page, or a parent intercepted it) settles in place:
+            // flinging from the few moves that arrived before the cancel would scroll the list while the page scrolls
+            if (e.Type === "Cancelled") {
+                vx = 0;
+                vy = 0;
+            }
             let fling = false;
             if (this.OverScrolled) {
                 const rest = this.ClampOffset(this.offsetX, this.offsetY, this.ContentOffsetBounds, true);

package/dist/controls/SkiaScrollBar.d.ts

@@ -11,6 +11,12 @@ export type ScrollBarDock = "End" | "Start";
  */
 export interface IScrollBar {
     SetScrollProgress(orientation: ScrollOrientation, progress: number, thumbSizeRatio: number, overscrollPts: number, isScrolling: boolean): void;
+    /** Optional desktop behavior: the bar takes the gesture that starts on it (thumb drag, track press). */
+    IsDraggable?: boolean;
+    /** Canvas pixels; true when the point is on the bar and a drag starts. */
+    BeginDrag?(x: number, y: number): boolean;
+    /** Scroll progress 0..1 for the pointer during a drag started by BeginDrag. */
+    GetDragProgress?(x: number, y: number): number;
 }
 /**
  * Mirrors DrawnUi SkiaScrollBar: thin rounded thumb over an optional track, docked at the right edge for vertical
@@ -41,6 +47,19 @@ export declare class SkiaScrollBar extends SkiaLayout implements IScrollBar {
     /** Fade out after scrolling stops. */
     AutoHide: boolean;
     HideDelaySecs: number;
+    /** Duration in seconds of the fade-out once HideDelaySecs has passed. */
+    HideDurationSecs: number;
+    /**
+     * Lets the user drag the thumb and press the track to jump there (desktop scroll bar behavior). The owning
+     * SkiaScroll then takes the whole gesture, from down to up, when it starts on the bar. Default false: the bar only
+     * indicates and every gesture passes through to the content.
+     */
+    IsDraggable: boolean;
+    /** Extra grab area in points on both sides of the bar, across the scrolling axis, so a thin bar is easy to hit with a mouse. */
+    GrabPadding: number;
+    private thumbOffsetPts;
+    private dragGrabPx;
+    private hasTravel;
     protected readonly thumb: SkiaShape;
     protected readonly track: SkiaShape;
     private hideTimer;
@@ -52,5 +71,13 @@ export declare class SkiaScrollBar extends SkiaLayout implements IScrollBar {
     protected ApplyOrientation(): void;
     SetScrollProgress(orientation: ScrollOrientation, progress: number, thumbSizeRatio: number, overscrollPts: number, isScrolling: boolean): void;
     private CancelHide;
+    /**
+     * Called by the owning scroll on touch down, coordinates in canvas pixels. True when the point is on the bar (track
+     * plus GrabPadding) and a drag starts: on the thumb it keeps the grab point, on the track the thumb jumps to center
+     * under the pointer.
+     */
+    BeginDrag(x: number, y: number): boolean;
+    /** Scroll progress 0..1 for the pointer position during a drag started by BeginDrag, coordinates in canvas pixels. */
+    GetDragProgress(x: number, y: number): number;
     protected OnDisposing(): void;
 }

package/dist/controls/SkiaScrollBar.js

@@ -1,4 +1,4 @@
-import { Colors, Thickness } from "../core/Types";
+import { Colors, SKRect, Thickness } from "../core/Types";
 import { SkiaLayout } from "./SkiaLayout";
 import { SkiaShape } from "./SkiaShape";
 /**
@@ -49,6 +49,19 @@ export class SkiaScrollBar extends SkiaLayout {
     /** Fade out after scrolling stops. */
     AutoHide = true;
     HideDelaySecs = 1;
+    /** Duration in seconds of the fade-out once HideDelaySecs has passed. */
+    HideDurationSecs = 0.25;
+    /**
+     * Lets the user drag the thumb and press the track to jump there (desktop scroll bar behavior). The owning
+     * SkiaScroll then takes the whole gesture, from down to up, when it starts on the bar. Default false: the bar only
+     * indicates and every gesture passes through to the content.
+     */
+    IsDraggable = false;
+    /** Extra grab area in points on both sides of the bar, across the scrolling axis, so a thin bar is easy to hit with a mouse. */
+    GrabPadding = 8;
+    thumbOffsetPts = 0;
+    dragGrabPx = 0;
+    hasTravel = false;
     thumb = new SkiaShape();
     track = new SkiaShape();
     hideTimer = 0;
@@ -62,6 +75,7 @@ export class SkiaScrollBar extends SkiaLayout {
         this.HorizontalOptions = "Fill";
         this.VerticalOptions = "Fill";
         this.InputTransparent = true; // display only, gestures pass through
+        this.IsParentIndependent = true; // the bar's look (thumb squashed on overscroll) never changes the layout around it
         this.Opacity = 0; // hidden until the first scroll
         this.track.Type = "Rectangle";
         this.track.BackgroundColor = this.trackColor;
@@ -127,6 +141,8 @@ export class SkiaScrollBar extends SkiaLayout {
             thumbLen = Math.max(this.MinThumbSize / 2, thumbLen - Math.abs(overscrollPts)); // squash on bounce
         const travel = track - thumbLen;
         const offset = Math.max(0, Math.min(1, progress)) * travel;
+        this.thumbOffsetPts = offset;
+        this.hasTravel = travel > 0;
         if (Math.abs(thumbLen - this.lastThumbLen) > 0.5) {
             this.lastThumbLen = thumbLen;
             if (orientation === "Horizontal")
@@ -142,7 +158,7 @@ export class SkiaScrollBar extends SkiaLayout {
         this.CancelHide();
         this.Opacity = 1;
         if (this.AutoHide && !isScrolling) {
-            this.hideTimer = window.setTimeout(() => { this.hideTimer = 0; this.hideAbort = new AbortController(); void this.FadeToAsync(0, 250, undefined, this.hideAbort.signal); }, this.HideDelaySecs * 1000);
+            this.hideTimer = window.setTimeout(() => { this.hideTimer = 0; this.hideAbort = new AbortController(); void this.FadeToAsync(0, Math.max(0, this.HideDurationSecs * 1000), undefined, this.hideAbort.signal); }, this.HideDelaySecs * 1000);
         }
         this.RepaintComposition();
     }
@@ -154,5 +170,38 @@ export class SkiaScrollBar extends SkiaLayout {
         this.hideAbort?.abort();
         this.hideAbort = undefined;
     }
+    /**
+     * Called by the owning scroll on touch down, coordinates in canvas pixels. True when the point is on the bar (track
+     * plus GrabPadding) and a drag starts: on the thumb it keeps the grab point, on the track the thumb jumps to center
+     * under the pointer.
+     */
+    BeginDrag(x, y) {
+        if (!this.IsDraggable || !this.hasTravel)
+            return false;
+        const scale = this.RenderingScale || 1;
+        const track = this.track.DrawingRect;
+        const pad = this.GrabPadding * scale;
+        const vertical = this.orientation !== "Horizontal";
+        const hit = vertical ? new SKRect(track.Left - pad, track.Top, track.Right + pad, track.Bottom) : new SKRect(track.Left, track.Top - pad, track.Right, track.Bottom + pad);
+        if (x < hit.Left || x > hit.Right || y < hit.Top || y > hit.Bottom)
+            return false;
+        // an auto-hidden bar that gets grabbed shows again right away: never drag something invisible
+        this.CancelHide();
+        this.Opacity = 1;
+        const pos = vertical ? y - track.Top : x - track.Left;
+        const thumbStart = this.thumbOffsetPts * scale, thumbLen = this.lastThumbLen * scale;
+        this.dragGrabPx = pos >= thumbStart && pos <= thumbStart + thumbLen ? pos - thumbStart : thumbLen / 2;
+        this.RepaintComposition();
+        return true;
+    }
+    /** Scroll progress 0..1 for the pointer position during a drag started by BeginDrag, coordinates in canvas pixels. */
+    GetDragProgress(x, y) {
+        const scale = this.RenderingScale || 1;
+        const track = this.track.DrawingRect;
+        const vertical = this.orientation !== "Horizontal";
+        const pos = (vertical ? y - track.Top : x - track.Left) - this.dragGrabPx;
+        const travel = (vertical ? track.Height : track.Width) - this.lastThumbLen * scale;
+        return travel > 0 ? Math.max(0, Math.min(1, pos / travel)) : 0;
+    }
     OnDisposing() { this.CancelHide(); super.OnDisposing(); }
 }

package/dist/controls/SkiaShaderCarousel.d.ts

@@ -56,6 +56,11 @@ export declare class SkiaShaderCarousel extends SkiaCarousel {
     protected OnScrollProgressChanged(): void;
     /** Slides never move: the transition effect renders the change (C# AnimateVisibleChild no-op). */
     protected SlideOffset(_offset: SKPoint): SKPoint;
+    /**
+     * Slides all sit on the same rect, so only the selected one may take gestures: otherwise the topmost slide in the
+     * gesture list (the last on-screen one, a neighbour exactly one width away counts as on screen) caught every tap.
+     */
+    protected IsSlideHitTestable(index: number): boolean;
     ProcessGestures(args: SkiaGesturesParameters, apply: GestureEventProcessingInfo): SkiaControl | null;
     /**
      * Gesture targeting (C#): one gesture moves at most one slide from the slide it started on; a flick moves one slide

package/dist/controls/SkiaShaderCarousel.js

@@ -145,6 +145,11 @@ export class SkiaShaderCarousel extends SkiaCarousel {
     }
     /** Slides never move: the transition effect renders the change (C# AnimateVisibleChild no-op). */
     SlideOffset(_offset) { return SKPoint.Empty; }
+    /**
+     * Slides all sit on the same rect, so only the selected one may take gestures: otherwise the topmost slide in the
+     * gesture list (the last on-screen one, a neighbour exactly one width away counts as on screen) caught every tap.
+     */
+    IsSlideHitTestable(index) { return index === this.SelectedIndex; }
     ProcessGestures(args, apply) {
         if (args.Type === "Down") {
             const interrupted = this.InTransition;

package/dist/controls/SkiaSwitch.d.ts

@@ -14,7 +14,6 @@ export declare class SkiaSwitch extends SkiaToggle {
     private static readonly DefaultTrack;
     private static readonly MaterialOutline;
     protected StyleDefault(name: "ColorThumbOn" | "ColorFrameOn" | "ColorThumbOff" | "ColorFrameOff"): Color | undefined;
-    private SetContentSize;
     protected CreateDefaultContent(): void;
     /** C# GetThumbPosForOn: track width minus thumb width and margins, in points. */
     private ThumbPosForOn;

package/dist/controls/SkiaSwitch.js

@@ -25,12 +25,6 @@ export class SkiaSwitch extends SkiaToggle {
         };
         return table[s]?.[name];
     }
-    SetContentSize(w, h) {
-        if (this.WidthRequest < 0)
-            this.WidthRequest = w;
-        if (this.HeightRequest < 0)
-            this.HeightRequest = h;
-    }
     CreateDefaultContent() {
         const frame = new SkiaShape();
         frame.Tag = "Frame";

package/dist/controls/SkiaToggle.d.ts

@@ -5,11 +5,14 @@ import { type Color, type ScaledSize } from "../core/Types";
 import { SkiaLayout } from "./SkiaLayout";
 /**
  * Mirrors DrawnUi SkiaToggle: base of SkiaSwitch / SkiaCheckbox / SkiaRadioButton. Tapped flips IsToggled,
- * `Toggled` reports user changes, `ControlStyle` selects the look the default content is built with (once, at first
- * measure, like C# CreateDefaultContent). Colors left unset take the style defaults (C# SetStyleDefault).
+ * `Toggled` reports user changes, `ControlStyle` selects the look the default content is built with (at first
+ * measure, like C# CreateDefaultContent; a later change rebuilds it, C# RebuildDefaultContent). Colors left unset
+ * take the style defaults (C# SetStyleDefault).
  */
 export declare abstract class SkiaToggle extends SkiaLayout {
-    ControlStyle: PrebuiltControlStyle;
+    private controlStyle;
+    get ControlStyle(): PrebuiltControlStyle;
+    set ControlStyle(v: PrebuiltControlStyle);
     /** Fires on every IsToggled change; C# fires only on user/external changes, not on DefaultValue application. */
     Toggled?: (sender: SkiaToggle, value: boolean) => void;
     DefaultValue: boolean;
@@ -37,10 +40,21 @@ export declare abstract class SkiaToggle extends SkiaLayout {
     /** Per-style color defaults (C# SetStyleDefault); undefined = the SkiaToggle default. */
     protected StyleDefault(_name: "ColorThumbOn" | "ColorFrameOn" | "ColorThumbOff" | "ColorFrameOff"): Color | undefined;
     protected OnToggledChanged(): void;
-    /** Builds the look once (C# CreateDefaultContent) — subclasses add their views here. */
+    /** Builds the look (C# CreateDefaultContent) — subclasses add their views here; called again after a rebuild. */
     protected abstract CreateDefaultContent(): void;
     /** Pushes IsToggled + colors into the views (C# ApplyProperties). */
     abstract ApplyProperties(): void;
+    /** Size requests the style pinned (C# SetDefaultContentSize / SetDefaultMinimumContentSize); a rebuild releases only these. */
+    private stylePinned;
+    /** C# SetDefaultContentSize: the style's size, only where the app left the request unset. */
+    protected SetContentSize(w: number, h: number): void;
+    /** C# SetDefaultMinimumContentSize (height only): the style's minimum, only where the app left it unset. */
+    protected SetMinimumContentHeight(h: number): void;
+    /**
+     * C# RebuildDefaultContent: drops the content built for the previous style and the sizes it pinned (the app's own
+     * requests stay), so the next Measure builds the current style. No-op before the first build.
+     */
+    RebuildDefaultContent(): void;
     /** Content (and the size requests the style sets) must exist before Measure reads WidthRequest/HeightRequest. */
     Measure(widthConstraint: number, heightConstraint: number, scale: number): ScaledSize;
     protected DefaultAccessibilityCanInteract(): boolean;

package/dist/controls/SkiaToggle.js

@@ -3,11 +3,19 @@ import { Colors } from "../core/Types";
 import { SkiaLayout } from "./SkiaLayout";
 /**
  * Mirrors DrawnUi SkiaToggle: base of SkiaSwitch / SkiaCheckbox / SkiaRadioButton. Tapped flips IsToggled,
- * `Toggled` reports user changes, `ControlStyle` selects the look the default content is built with (once, at first
- * measure, like C# CreateDefaultContent). Colors left unset take the style defaults (C# SetStyleDefault).
+ * `Toggled` reports user changes, `ControlStyle` selects the look the default content is built with (at first
+ * measure, like C# CreateDefaultContent; a later change rebuilds it, C# RebuildDefaultContent). Colors left unset
+ * take the style defaults (C# SetStyleDefault).
  */
 export class SkiaToggle extends SkiaLayout {
-    ControlStyle = "Unset";
+    controlStyle = "Unset";
+    get ControlStyle() { return this.controlStyle; }
+    set ControlStyle(v) {
+        if (this.controlStyle === v)
+            return;
+        this.controlStyle = v;
+        this.RebuildDefaultContent();
+    }
     /** Fires on every IsToggled change; C# fires only on user/external changes, not on DefaultValue application. */
     Toggled;
     DefaultValue = false;
@@ -48,6 +56,40 @@ export class SkiaToggle extends SkiaLayout {
         this.Toggled?.(this, this.isToggled);
         this.NotifyAccessibility();
     }
+    /** Size requests the style pinned (C# SetDefaultContentSize / SetDefaultMinimumContentSize); a rebuild releases only these. */
+    stylePinned = [];
+    /** C# SetDefaultContentSize: the style's size, only where the app left the request unset. */
+    SetContentSize(w, h) {
+        if (this.WidthRequest < 0) {
+            this.WidthRequest = w;
+            this.stylePinned.push("WidthRequest");
+        }
+        if (this.HeightRequest < 0) {
+            this.HeightRequest = h;
+            this.stylePinned.push("HeightRequest");
+        }
+    }
+    /** C# SetDefaultMinimumContentSize (height only): the style's minimum, only where the app left it unset. */
+    SetMinimumContentHeight(h) {
+        if (this.MinimumHeightRequest < 0) {
+            this.MinimumHeightRequest = h;
+            this.stylePinned.push("MinimumHeightRequest");
+        }
+    }
+    /**
+     * C# RebuildDefaultContent: drops the content built for the previous style and the sizes it pinned (the app's own
+     * requests stay), so the next Measure builds the current style. No-op before the first build.
+     */
+    RebuildDefaultContent() {
+        if (!this.contentCreated)
+            return;
+        this.Children = [];
+        for (const p of this.stylePinned)
+            this[p] = -1;
+        this.stylePinned = [];
+        this.contentCreated = false;
+        this.Update();
+    }
     /** Content (and the size requests the style sets) must exist before Measure reads WidthRequest/HeightRequest. */
     Measure(widthConstraint, heightConstraint, scale) {
         if (!this.contentCreated) {