@scion/components 19.3.0 → 21.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scion/components",
-  "version": "19.3.0",
+  "version": "21.0.0",
   "description": "Provides a collection of Angular components and directives primarily for use in SCION libraries such as `@scion/workbench` and `@scion/microfrontend-platform`. This library is not a comprehensive component library as its focus is on SCION requirements.",
   "license": "EPL-2.0",
   "private": false,
@@ -17,7 +17,7 @@
   "exports": {
     ".": {
       "sass": "./_index.scss",
-      "types": "./index.d.ts",
+      "types": "./types/scion-components.d.ts",
       "default": "./fesm2022/scion-components.mjs"
     },
     "./design": {
@@ -30,23 +30,23 @@
       "default": "./package.json"
     },
     "./dimension": {
-      "types": "./dimension/index.d.ts",
+      "types": "./types/scion-components-dimension.d.ts",
       "default": "./fesm2022/scion-components-dimension.mjs"
     },
     "./sashbox": {
-      "types": "./sashbox/index.d.ts",
+      "types": "./types/scion-components-sashbox.d.ts",
       "default": "./fesm2022/scion-components-sashbox.mjs"
     },
     "./splitter": {
-      "types": "./splitter/index.d.ts",
+      "types": "./types/scion-components-splitter.d.ts",
       "default": "./fesm2022/scion-components-splitter.mjs"
     },
     "./throbber": {
-      "types": "./throbber/index.d.ts",
+      "types": "./types/scion-components-throbber.d.ts",
       "default": "./fesm2022/scion-components-throbber.mjs"
     },
     "./viewport": {
-      "types": "./viewport/index.d.ts",
+      "types": "./types/scion-components-viewport.d.ts",
       "default": "./fesm2022/scion-components-viewport.mjs"
     }
   },
@@ -54,10 +54,11 @@
     "tslib": "^2.5.0"
   },
   "peerDependencies": {
-    "@angular/common": "^19.0.0",
-    "@angular/core": "^19.0.0",
-    "@angular/cdk": "^19.0.0",
-    "@scion/toolkit": "^1.6.0",
+    "@angular/core": "^21.0.0",
+    "@angular/common": "^21.0.0",
+    "@angular/animations": "^21.0.0",
+    "@angular/cdk": "^21.0.0",
+    "@scion/toolkit": "^2.0.0",
     "rxjs": "^7.8.0"
   },
   "repository": {
@@ -66,5 +67,5 @@
   },
   "sideEffects": false,
   "module": "fesm2022/scion-components.mjs",
-  "typings": "index.d.ts"
+  "typings": "types/scion-components.d.ts"
 }

package/sashbox/package.json

@@ -1,3 +1,4 @@
 {
-  "module": "../fesm2022/scion-components-sashbox.mjs"
+  "module": "../fesm2022/scion-components-sashbox.mjs",
+  "typings": "../types/scion-components-sashbox.d.ts"
 }

package/splitter/package.json

@@ -1,3 +1,4 @@
 {
-  "module": "../fesm2022/scion-components-splitter.mjs"
+  "module": "../fesm2022/scion-components-splitter.mjs",
+  "typings": "../types/scion-components-splitter.d.ts"
 }

package/throbber/package.json

@@ -1,3 +1,4 @@
 {
-  "module": "../fesm2022/scion-components-throbber.mjs"
+  "module": "../fesm2022/scion-components-throbber.mjs",
+  "typings": "../types/scion-components-throbber.d.ts"
 }

package/types/scion-components-dimension.d.ts

@@ -0,0 +1,81 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef, Signal, Injector } from '@angular/core';
+
+/**
+ * Represents the dimension of an element.
+ */
+interface SciDimension {
+    offsetWidth: number;
+    offsetHeight: number;
+    clientWidth: number;
+    clientHeight: number;
+    element: HTMLElement;
+}
+
+/**
+ * Observes the size of the host element.
+ *
+ * ---
+ * Usage:
+ *
+ * ```html
+ * <div sciDimension (sciDimensionChange)="onDimensionChange($event)"></div>
+ * ```
+ */
+declare class SciDimensionDirective {
+    /**
+     * Controls if to output outside the Angular zone. Defaults to `false`.
+     */
+    readonly emitOutsideAngular: _angular_core.InputSignal<boolean>;
+    /**
+     * Outputs the size of the element.
+     */
+    readonly dimensionChange: _angular_core.OutputEmitterRef<SciDimension>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SciDimensionDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SciDimensionDirective, "[sciDimension]", never, { "emitOutsideAngular": { "alias": "emitOutsideAngular"; "required": false; "isSignal": true; }; }, { "dimensionChange": "sciDimensionChange"; }, never, never, true, never>;
+}
+
+/**
+ * Creates a signal observing the size of an element.
+ *
+ * The element can be passed as a signal, enabling observation of view children in the component constructor.
+ *
+ * The signal subscribes to the native {@link ResizeObserver} to monitor element size changes. Destroying the injection context will unsubscribe the observer.
+ *
+ * Usage:
+ * - Must be called within an injection context or an injector provided. Destroying the injector will unsubscribe the signal.
+ * - Must not be called within a reactive context to avoid repeated subscriptions.
+ */
+declare function dimension(elementLike: HTMLElement | ElementRef<HTMLElement> | Signal<HTMLElement | ElementRef<HTMLElement>>, options?: {
+    injector?: Injector;
+}): Signal<SciDimension>;
+declare function dimension(elementLike: HTMLElement | ElementRef<HTMLElement> | Signal<HTMLElement | ElementRef<HTMLElement> | undefined>, options?: {
+    injector?: Injector;
+}): Signal<SciDimension | undefined>;
+
+/**
+ * Creates a signal observing the bounding box of an element.
+ *
+ * The bounding box includes the element's position relative to the top-left of the viewport and its size.
+ * Refer to https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect for more details.
+ *
+ * The element can be passed as a signal, enabling observation of view children in the component constructor.
+ *
+ * There is no native browser API to observe the position of an element. The signal uses {@link IntersectionObserver} and
+ * {@link ResizeObserver} to detect position changes. For tracking only size changes, use the {@link dimension} signal instead.
+ *
+ * Usage:
+ * - Must be called within an injection context or an injector provided. Destroying the injector will unsubscribe the signal.
+ * - Must not be called within a reactive context to avoid repeated subscriptions.
+ * - The element and the document root (`<html>`) must be positioned `relative` or `absolute`. If not, positioning is changed to `relative`.
+ */
+declare function boundingClientRect(elementLike: HTMLElement | ElementRef<HTMLElement> | Signal<HTMLElement | ElementRef<HTMLElement>>, options?: {
+    injector?: Injector;
+}): Signal<DOMRect>;
+declare function boundingClientRect(elementLike: HTMLElement | ElementRef<HTMLElement> | Signal<HTMLElement | ElementRef<HTMLElement> | undefined>, options?: {
+    injector?: Injector;
+}): Signal<DOMRect | undefined>;
+
+export { SciDimensionDirective, boundingClientRect, dimension };
+export type { SciDimension };

package/types/scion-components-sashbox.d.ts

@@ -0,0 +1,171 @@
+import * as _angular_core from '@angular/core';
+import { SplitterMoveEvent } from '@scion/components/splitter';
+
+/**
+ * The <sci-sashbox> is like a CSS flexbox container that lays out its content children (sashes) in a row (which is by default)
+ * or column arrangement (as specified by the direction property). A splitter is added between each child to allow the user to
+ * shrink or stretch the individual sashes.
+ *
+ * Sashes are modelled as <ng-template> decorated with the 'sciSash' directive.
+ * A sash can have a fixed size with an explicit unit, or a unitless proportion to distribute remaining space.
+ * A proportional sash has the ability to grow or shrink if necessary.
+ *
+ * Sash content is added to a CSS grid container with a single column, stretching the content vertically and horizontally.
+ *
+ * ### Usage
+ *
+ * ```html
+ * <sci-sashbox direction="row">
+ *   <ng-template sciSash size="1">
+ *     ...
+ *   </ng-template>
+ *
+ *   <ng-template sciSash size="2">
+ *     ...
+ *   </ng-template>
+ *
+ *   <ng-template sciSash size="1">
+ *     ...
+ *   </ng-template>
+ * </sci-sashbox>
+ * ```
+ *
+ * ### Styling
+ *
+ * To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `styles.scss`.
+ * To style a specific `sci-sashbox` component, the following CSS variables can be set directly on the component.
+ *
+ * - --sci-sashbox-gap: Sets the gaps (gutters) between sashes.
+ * - --sci-sashbox-splitter-background-color: Sets the background color of the splitter.
+ * - --sci-sashbox-splitter-background-color-hover: Sets the background color of the splitter when hovering it.
+ * - --sci-sashbox-splitter-size: Sets the size of the splitter along the main axis.
+ * - --sci-sashbox-splitter-size-hover: Sets the size of the splitter along the main axis when hovering it.
+ * - --sci-sashbox-splitter-touch-target-size: Sets the touch target size to move the splitter (accessibility).
+ * - --sci-sashbox-splitter-cross-axis-size: Sets the splitter size along the cross axis.
+ * - --sci-sashbox-splitter-border-radius: Sets the border radius of the splitter.
+ * - --sci-sashbox-splitter-opacity-active: Sets the opacity of the splitter while the user moves the splitter.
+ * - --sci-sashbox-splitter-opacity-hover: Sets the opacity of the splitter when hovering it.
+ *
+ * Example:
+ *
+ * ```scss
+ * sci-sashbox {
+ *   --sci-sashbox-splitter-background-color: black;
+ *   --sci-sashbox-splitter-background-color-hover: black;
+ * }
+ * ```
+ */
+declare class SciSashboxComponent {
+    /**
+     * Specifies if to lay out sashes in a row (which is by default) or column arrangement.
+     */
+    readonly direction: _angular_core.InputSignal<"column" | "row">;
+    /**
+     * Notifies when start sashing.
+     */
+    readonly sashStart: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emits an object with new sash sizes when sashing ends.
+     *
+     * Each sash size is associated with its {@link SciSashDirective.key} or its display position (zero-based) if not set.
+     */
+    readonly sashEnd: _angular_core.OutputEmitterRef<{
+        [key: string]: number;
+    }>;
+    private readonly _host;
+    private readonly _contentChildren;
+    protected sashing: boolean;
+    protected maxHeight: number | undefined;
+    protected maxWidth: number | undefined;
+    constructor();
+    protected onSashStart(): void;
+    protected onSashEnd(): void;
+    protected onSash(splitter: HTMLElement, sashIndex: number, moveEvent: SplitterMoveEvent): void;
+    protected onSashReset(sashIndex: number): void;
+    private toPixel;
+    /**
+     * Detects when rendered this component for the first time.
+     */
+    private detectFirstRendering;
+    /**
+     * Mirrors the provided signal. If animated sashes are being removed, delays emission until the animation completes,
+     * effectively removing the element after the animation.
+     *
+     * Delayed removal is required for CDK Portals to not remove displayed content immediately.
+     */
+    private computeSashes;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SciSashboxComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SciSashboxComponent, "sci-sashbox", never, { "direction": { "alias": "direction"; "required": false; "isSignal": true; }; }, { "sashStart": "sashStart"; "sashEnd": "sashEnd"; }, ["_contentChildren"], never, true, never>;
+}
+
+/**
+ * Use this directive to model a sash for {@link SciSashboxComponent}.
+ * The host element of this modelling directive must be a <ng-template> which is used as sash template.
+ *
+ *
+ * ### Usage:
+ *
+ * <sci-sashbox direction="row">
+ *   <!-- fixed size sash -->
+ *   <ng-template sciSash size="200px">
+ *     ...
+ *   </ng-template>
+ *
+ *   <!-- sash which takes the remaining space -->
+ *   <ng-template sciSash>
+ *     ...
+ *   </ng-template>
+ * </sci-sashbox>
+ */
+declare class SciSashDirective {
+    /**
+     * Specifies the sash size, either as fixed size with an explicit unit,
+     * or as a unitless proportion to distribute remaining space. A proportional
+     * sash has the ability to grow or shrink if necessary, and must be >= 1.
+     *
+     * If not set, remaining space is distributed equally.
+     */
+    readonly size: _angular_core.InputSignalWithTransform<string | number, string | number | null | undefined>;
+    /**
+     * Specifies the minimal sash size in pixel or percent.
+     * The min-size prevents the user from shrinking the sash below this minimal size.
+     *
+     * If the unit is omitted, the value is interpreted as a pixel value.
+     */
+    readonly minSize: _angular_core.InputSignal<string | number | undefined>;
+    /**
+     * Specifies an optional key to identify this sash.
+     *
+     * The key is used as the property key in the object emitted by {@link SciSashboxComponent.sashEnd} to associate the size of this sash.
+     */
+    readonly key: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Controls whether to animate the entering and leaving of this sash, only if fixed-sized. Defaults to `false`.
+     *
+     * Enabling animation will mimic the behavior of a side panel that slides in or out.
+     *
+     * Note: Animates only sashes added or removed after the initial rendering.
+     */
+    readonly animate: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    private readonly _sashBoxAccessor;
+    private readonly _component;
+    /**
+     * Flex properties computed based on the configured {@link size}. Properties are updated when moving this sash.
+     */
+    private readonly _flexProperties;
+    /**
+     * Computes the flex properties to lay out this sash in the sashbox's flex layout based on the configured {@link size}.
+     */
+    private computeFlexProperties;
+    /**
+     * Normalizes the 'flex-grow' of the passed {@link FlexProperties} to ensure that the sum of the 'flex-grow' proportions of all sashes is 1.
+     *
+     * If the sum of all flex-grow proportions were less than 1, the sashes would not fill the entire sash-box space.
+     * Without normalization, this could occur when a sash is removed.
+     */
+    private normalizeFlexGrow;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SciSashDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SciSashDirective, "ng-template[sciSash]", ["sciSash"], { "size": { "alias": "size"; "required": false; "isSignal": true; }; "minSize": { "alias": "minSize"; "required": false; "isSignal": true; }; "key": { "alias": "key"; "required": false; "isSignal": true; }; "animate": { "alias": "animate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { SciSashDirective, SciSashboxComponent };

package/{splitter/splitter.component.d.ts → types/scion-components-splitter.d.ts}

@@ -1,5 +1,6 @@
+import * as _angular_core from '@angular/core';
 import { OnInit } from '@angular/core';
-import * as i0 from "@angular/core";
+
 /**
  * Represents a splitter, a visual element that allows the user to control the size of elements next to it.
  *
@@ -41,27 +42,27 @@ import * as i0 from "@angular/core";
  * }
  * ```
  */
-export declare class SciSplitterComponent implements OnInit {
+declare class SciSplitterComponent implements OnInit {
     /**
      * Controls whether to render a vertical or horizontal splitter. By default, if not specified, renders a vertical splitter.
      */
-    readonly orientation: import("@angular/core").InputSignal<"vertical" | "horizontal">;
+    readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
     /**
      * Notifies when start moving the splitter.
      */
-    readonly start: import("@angular/core").OutputEmitterRef<void>;
+    readonly start: _angular_core.OutputEmitterRef<void>;
     /**
      * Notifies when moving the splitter. The event is emitted outside the Angular zone.
      */
-    readonly move: import("@angular/core").OutputEmitterRef<SplitterMoveEvent>;
+    readonly move: _angular_core.OutputEmitterRef<SplitterMoveEvent>;
     /**
      * Notifies when end moving the splitter.
      */
-    readonly end: import("@angular/core").OutputEmitterRef<void>;
+    readonly end: _angular_core.OutputEmitterRef<void>;
     /**
      * Notifies when resetting the spliter position.
      */
-    readonly reset: import("@angular/core").OutputEmitterRef<void>;
+    readonly reset: _angular_core.OutputEmitterRef<void>;
     private readonly _zone;
     private readonly _cd;
     private readonly _document;
@@ -76,10 +77,10 @@ export declare class SciSplitterComponent implements OnInit {
     private onTouchStart;
     private onMouseDown;
     private installMoveListener;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SciSplitterComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SciSplitterComponent, "sci-splitter", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, { "start": "start"; "move": "move"; "end": "end"; "reset": "reset"; }, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SciSplitterComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SciSplitterComponent, "sci-splitter", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, { "start": "start"; "move": "move"; "end": "end"; "reset": "reset"; }, never, never, true, never>;
 }
-export interface EventPosition {
+interface EventPosition {
     clientPos: number;
     pagePos: number;
     screenPos: number;
@@ -87,7 +88,7 @@ export interface EventPosition {
 /**
  * Event that is emitted when moving the splitter.
  */
-export interface SplitterMoveEvent {
+interface SplitterMoveEvent {
     /**
      * The distance in pixels by which the user has moved the splitter since the last emission.
      */
@@ -97,3 +98,6 @@ export interface SplitterMoveEvent {
      */
     position: EventPosition;
 }
+
+export { SciSplitterComponent };
+export type { EventPosition, SplitterMoveEvent };

package/{throbber/throbber.component.d.ts → types/scion-components-throbber.d.ts}

@@ -1,4 +1,5 @@
-import * as i0 from "@angular/core";
+import * as i0 from '@angular/core';
+
 /**
  * Animated graphical control to indicate the execution of an action.
  *
@@ -25,7 +26,7 @@ import * as i0 from "@angular/core";
  * }
  * ```
  */
-export declare class SciThrobberComponent {
+declare class SciThrobberComponent {
     /**
      * Chooses between different throbber presentation. If not set, uses `spinner` type.
      *
@@ -38,7 +39,9 @@ export declare class SciThrobberComponent {
      * - **spinner** (default)
      * Represents a classic spinner throbber with strokes arranged radially. The strokes light up one after the other in clockwise direction and then then fade out again.
      */
-    readonly type: import("@angular/core").InputSignal<"ellipsis" | "ripple" | "roller" | "spinner">;
+    readonly type: i0.InputSignal<"ellipsis" | "ripple" | "roller" | "spinner">;
     static ɵfac: i0.ɵɵFactoryDeclaration<SciThrobberComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SciThrobberComponent, "sci-throbber", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
+
+export { SciThrobberComponent };

package/{viewport/viewport.component.d.ts → types/scion-components-viewport.d.ts}

@@ -1,6 +1,35 @@
-import { ElementRef } from '@angular/core';
-import { SciNativeScrollbarTrackSizeProvider } from './native-scrollbar-track-size-provider.service';
-import * as i0 from "@angular/core";
+import * as i0 from '@angular/core';
+import { Signal, ElementRef } from '@angular/core';
+
+/**
+ * Provides the native scrollbar tracksize.
+ */
+declare class SciNativeScrollbarTrackSizeProvider {
+    private readonly _document;
+    private readonly _zone;
+    /**
+     * Provides the track size of the native scrollbar, or `null` if the native scrollbars sit on top of the content.
+     */
+    trackSize: Signal<NativeScrollbarTrackSize | null>;
+    constructor();
+    /**
+     * Computes the native scrollbar track size.
+     *
+     * @returns native track size, or `null` if the native scrollbars sit on top of the content.
+     */
+    private computeTrackSize;
+    private createNativeScrollbarTrackSizeSignal;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SciNativeScrollbarTrackSizeProvider, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SciNativeScrollbarTrackSizeProvider>;
+}
+/**
+ * Represents the native scrollbar track size.
+ */
+interface NativeScrollbarTrackSize {
+    hScrollbarTrackHeight: number;
+    vScrollbarTrackWidth: number;
+}
+
 /**
  * Represents a viewport with slotted content (`<ng-content>`) used as scrollable content. By default, content is added to a CSS grid layout.
  *
@@ -68,15 +97,15 @@ import * as i0 from "@angular/core";
  * }
  * ```
  */
-export declare class SciViewportComponent {
+declare class SciViewportComponent {
     /**
      * Controls if to use the native scrollbar or a scrollbar that sits on top of the viewport. Defaults to `on-top`.
      */
-    readonly scrollbarStyle: import("@angular/core").InputSignal<ScrollbarStyle>;
+    readonly scrollbarStyle: i0.InputSignal<ScrollbarStyle>;
     /**
      * Emits when the viewport is scrolled. The event is emitted outside the Angular zone to avoid unnecessary change detection cycles.
      */
-    readonly scroll: import("@angular/core").OutputEmitterRef<Event>;
+    readonly scroll: i0.OutputEmitterRef<Event>;
     private readonly _host;
     private readonly _viewport;
     private readonly _viewportClient;
@@ -159,4 +188,131 @@ export declare class SciViewportComponent {
 /**
  * Represents a scrollbar style.
  */
-export type ScrollbarStyle = 'native' | 'on-top' | 'hidden';
+type ScrollbarStyle = 'native' | 'on-top' | 'hidden';
+
+/**
+ * Renders a vertical or horizontal scrollbar.
+ *
+ * The scrollbar features the following functionality:
+ * - allows to move the thumb by mouse or touch
+ * - enlarges the thumb if the mouse pointer is near the thumb
+ * - allows paging on mousedown on the scroll track
+ *
+ * ### Styling:
+ *
+ * To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `styles.scss`.
+ * To style a specific `sci-scrollbar` component, the following CSS variables can be set directly on the component.
+ *
+ * - sci-scrollbar-color:    Sets the color of the scrollbar.
+ *
+ * Example:
+ *
+ * ```css
+ *
+ * sci-scrollbar {
+ *   --sci-scrollbar-color: blue;
+ * }
+ * ```
+ */
+declare class SciScrollbarComponent {
+    /**
+     * Specifies the direction of the scrollbar. Defaults to a vertical scrollbar.
+     */
+    readonly direction: i0.InputSignal<"vscroll" | "hscroll">;
+    /**
+     * The viewport to provide scrollbars for.
+     */
+    readonly viewport: i0.InputSignal<HTMLElement>;
+    private readonly _host;
+    private readonly _document;
+    private readonly _zone;
+    private readonly _destroyRef;
+    private readonly _thumbElement;
+    private readonly _vertical;
+    private _lastDragPosition;
+    private _overflow;
+    private _thumbSizeFr;
+    private _thumbPositionFr;
+    protected get vertical(): boolean;
+    protected get horizontal(): boolean;
+    protected get scrolling(): boolean;
+    constructor();
+    /**
+     * Computes the scroll position and updates CSS variables to render the scroll position in the UI.
+     */
+    private renderScrollPosition;
+    protected onTouchStart(event: TouchEvent): void;
+    protected onTouchMove(event: TouchEvent): void;
+    protected onTouchEnd(event: TouchEvent): void;
+    protected onMouseDown(mousedownEvent: MouseEvent): void;
+    protected onScrollTrackMouseDown(event: MouseEvent, direction: 'up' | 'down'): void;
+    /**
+     * Renders the current scroll position when the viewport is scrolled.
+     */
+    private installScrollPositionRenderer;
+    /**
+     * Projects the given scrollbar scroll pixels into viewport scroll pixels.
+     */
+    private toViewportPanPx;
+    /**
+     * Moves the viewport client by the specified numbers of pixels.
+     */
+    private moveViewportClient;
+    /**
+     * Indicates if the content overflows.
+     */
+    get overflow(): boolean;
+    /**
+     * Scrolls continuously while holding the mouse pressed, or until the mouse leaves the scrolltrack.
+     */
+    private scrollWhileMouseDown;
+    private setCssVariable;
+    private get viewportSize();
+    private get viewportClientSize();
+    private get scrollPosition();
+    private get thumbSize();
+    private get trackSize();
+    static ɵfac: i0.ɵɵFactoryDeclaration<SciScrollbarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SciScrollbarComponent, "sci-scrollbar", never, { "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "viewport": { "alias": "viewport"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Makes the host element natively scrollable and hides native scrollbars by default, unless native scrollbars
+ * already sit on top of the viewport (e.g. in OS X).
+ *
+ * Because there is no cross-browser API to hide scrollbars without losing native scroll support, we set 'overflow'
+ * to 'scroll' but shift the native scrollbars out of the visible viewport area. The shift offset is computed upfront.
+ *
+ * This directive expects its host element to be the only child in document flow in its parent DOM element. It makes the host element
+ * fill up the entire space (width and height set to 100%). The parent element must have its CSS `overflow` property set to `hidden`
+ * to hide the pushed out native scrollbars.
+ */
+declare class SciScrollableDirective {
+    /**
+     * Controls whether to display native scrollbars.
+     * Has no effect if the native scrollbar sits on top of the content, e.g. in OS X.
+     */
+    readonly displayNativeScrollbar: i0.InputSignal<boolean>;
+    private readonly _host;
+    private readonly _renderer;
+    private readonly _nativeScrollbarTrackSizeProvider;
+    constructor();
+    /**
+     * Controls the display of the native scrollbar based on this directive's configuration.
+     */
+    private controlDisplayOfNativeScrollbar;
+    /**
+     * Uses the native scrollbars when content overflows.
+     */
+    private useNativeScrollbars;
+    /**
+     * Shifts the native scrollbars out of the visible viewport area.
+     */
+    private shiftNativeScrollbars;
+    private setStyle;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SciScrollableDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SciScrollableDirective, "[sciScrollable]", never, { "displayNativeScrollbar": { "alias": "sciScrollableDisplayNativeScrollbar"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { SciScrollableDirective, SciScrollbarComponent, SciViewportComponent };
+export type { ScrollbarStyle };

package/types/scion-components.d.ts

@@ -0,0 +1,2 @@
+
+export { };

package/viewport/package.json

@@ -1,3 +1,4 @@
 {
-  "module": "../fesm2022/scion-components-viewport.mjs"
+  "module": "../fesm2022/scion-components-viewport.mjs",
+  "typings": "../types/scion-components-viewport.d.ts"
 }

package/dimension/bounding-client-rect.signal.d.ts

@@ -1,23 +0,0 @@
-import { ElementRef, Injector, Signal } from '@angular/core';
-/**
- * Creates a signal observing the bounding box of an element.
- *
- * The bounding box includes the element's position relative to the top-left of the viewport and its size.
- * Refer to https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect for more details.
- *
- * The element can be passed as a signal, enabling observation of view children in the component constructor.
- *
- * There is no native browser API to observe the position of an element. The signal uses {@link IntersectionObserver} and
- * {@link ResizeObserver} to detect position changes. For tracking only size changes, use the {@link dimension} signal instead.
- *
- * Usage:
- * - Must be called within an injection context or an injector provided. Destroying the injector will unsubscribe the signal.
- * - Must not be called within a reactive context to avoid repeated subscriptions.
- * - The element and the document root (`<html>`) must be positioned `relative` or `absolute`. If not, a warning is logged, and positioning changed to `relative`.
- */
-export declare function boundingClientRect(elementLike: HTMLElement | ElementRef<HTMLElement> | Signal<HTMLElement | ElementRef<HTMLElement>>, options?: {
-    injector?: Injector;
-}): Signal<DOMRect>;
-export declare function boundingClientRect(elementLike: HTMLElement | ElementRef<HTMLElement> | Signal<HTMLElement | ElementRef<HTMLElement> | undefined>, options?: {
-    injector?: Injector;
-}): Signal<DOMRect | undefined>;