feat(widgets): Add ScrollbarWidget

docs/api-reference/widgets/scrollbar-widget.md

@@ -0,0 +1,110 @@
+
+# ScrollbarWidget
+
+<img src="https://img.shields.io/badge/from-v9.3-green.svg?style=flat-square" alt="from v9.3" />
+
+This widget renders a scrollbar UI that mimics the native HTML scrolling behavior. It works with the [OrthographicView](../core/orthographic-view.md) to create a "scrollable" canvas of arbitrary size.
+
+## Usage
+
+```ts
+import {Deck, OrthographicView} from '@deck.gl/core';
+import {ScrollbarWidget} from '@deck.gl/widgets';
+
+new Deck({
+  views: new OrthographicView(),
+  widgets: [
+    new ScrollbarWidget({
+      viewId: 'ortho-view',
+      contentBounds: [
+        [0, 0, 0],
+        [100000, 100, 0]
+      ],
+      placement: 'bottom-right',
+      orientation: 'horizontal',
+      captureWheel: true
+    })
+  ]
+});
+```
+
+## Types
+
+### `ScrollbarWidgetProps`
+
+The `ScrollbarWidget` accepts the generic [`WidgetProps`](../core/widget.md#widgetprops) and:
+
+#### contentBounds ([min: number[], max: number[]])
+
+The full extent of the scrollable content, in world coordinates.
+The widget relies on this value to calculate the position and size of the slider button and track.
+If not supplied, the scrollbar will always be hidden.
+
+#### orientation (string, optional)
+
+Direction of the scrollbar. `'horizontal'` scrolls the camera along the X axis, and `'vertical'` scrolls the camera along the Y axis.
+
+* Default: `'vertical'`
+
+#### stepSize (number, optional)
+
+Pixels scrolled when clicked on the navigation buttons.
+
+* Default: 1/10 of the viewport size
+
+#### pageSize (number, optional)
+
+Pixels scrolled when clicked on the track.
+
+* Default: 100% of the viewport size
+
+#### startButtonAriaLabel (string, optional)
+
+Label of the step button at the start.
+
+* Default: `'Scroll left'` if horizontal, `'Scroll up'` if vertical
+
+
+#### endButtonAriaLabel (string, optional)
+
+Label of the step button at the end.
+
+* Default: `'Scroll right'` if horizontal, `'Scroll down'` if vertical
+
+#### captureWheel (boolean, optional)
+
+If `true`, mouse wheel events over the canvas will be intercepted by this scrollbar. This is useful when the app wants to simulate the HTML native page scrolling behavior.
+
+* Default: `false`
+
+#### decorations (ScrollbarDecoration[], optional)
+
+Custom markers to overlay on the track.
+This can serve as visual reference or highlights of areas of interest even when they are outside of the current viewport.
+
+
+### ScrollbarDecoration
+
+A `ScrollbarDecoration` object 
+
+- `contentBounds` ([min: number[], max: number[]]) - world position that the decoration represents
+- `color` (string) - CSS color of the decoration
+- `title` (string, optional) - Tooltip when the decoration is hovered
+- `onClick` (function, optional) - Callback when the decoration is clicked.
+  Receives the following parameters:
+  + `event` (MouseEvent)
+  Return `true` to mark the event as handled, and prevent the default behavior.
+
+
+## Styles
+
+Learn more about how to replace icons in the [styling guide](/docs/api-reference/widgets/styling#replacing-icons).
+
+| Name     | Type      | Default      |
+| -------- | --------- | ------------ |
+| `--range-step-button-size` | [Dimension](https://developer.mozilla.org/en-US/docs/Web/CSS/dimension) | `24px`      |
+| `--range-track-size` | [Dimension](https://developer.mozilla.org/en-US/docs/Web/CSS/dimension) | `16px`      |
+| `--range-thumb-size` | [Dimension](https://developer.mozilla.org/en-US/docs/Web/CSS/dimension) | `10px`      |
+| `--range-track-color` | [Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `#888`     |
+| `--range-thumb-color` | [Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `#444`      |
+| `--range-decoration-active-color` | [Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `gold`  |

docs/api-reference/widgets/styling.md

@@ -145,6 +145,18 @@ Additionally, refer to each widget's API reference for variables specific to tha
 | `--menu-text` | [Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `rgb(24, 24, 26)` |
 | `--menu-item-hover` | [Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `rgba(0, 0, 0, 0.08)` |
 
+### Range input
+
+| Name | Type | Default |
+| ---- | ---- | ------- |
+| `--range-step-button-size` | [Dimension](https://developer.mozilla.org/en-US/docs/Web/CSS/dimension) | `24px`      |
+| `--range-track-size` | [Dimension](https://developer.mozilla.org/en-US/docs/Web/CSS/dimension) | `16px`      |
+| `--range-thumb-size` | [Dimension](https://developer.mozilla.org/en-US/docs/Web/CSS/dimension) | `10px`      |
+| `--range-track-color` | [Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `#888`     |
+| `--range-thumb-color` | [Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `#444`      |
+| `--range-decoration-active-color` | [Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `gold`  |
+
+
 ### Icon
 
 Refer to each widget's API reference for icon variable names.

modules/widgets/src/index.ts

@@ -21,6 +21,7 @@ export {ViewSelectorWidget as _ViewSelectorWidget} from './view-selector-widget'
 export {InfoWidget as _InfoWidget} from './info-widget';
 export {PopupWidget} from './popup-widget';
 export {ContextMenuWidget as _ContextMenuWidget} from './context-menu-widget';
+export {ScrollbarWidget} from './scrollbar-widget';
 
 // Control widgets
 export {TimelineWidget as _TimelineWidget} from './timeline-widget';
@@ -49,6 +50,7 @@ export type {SplitterWidgetProps} from './splitter-widget';
 export type {TimelineWidgetProps} from './timeline-widget';
 export type {ViewSelectorWidgetProps} from './view-selector-widget';
 export type {GimbalWidgetProps} from './gimbal-widget';
+export type {ContentBounds, ScrollbarWidgetProps, ScrollbarDecoration} from './scrollbar-widget';
 
 export {LightTheme, DarkTheme, LightGlassTheme, DarkGlassTheme} from './themes';
 export type {DeckWidgetTheme} from './themes';
@@ -63,6 +65,11 @@ export {
   type SimpleMenuProps
 } from './lib/components/dropdown-menu';
 export {IconMenu as _IconMenu, type IconMenuProps} from './lib/components/icon-menu';
+export {
+  RangeInput as _RangeInput,
+  type RangeInputProps,
+  type RangeInputDecoration
+} from './lib/components/range-input';
 
 // Experimental geocoders. May be removed, use at your own risk!
 export {type Geocoder} from './lib/geocode/geocoder';