@ni/ok-components 1.8.2 → 1.9.0

package/dist/custom-elements.md

@@ -34,40 +34,6 @@
 
 <hr/>
 
-## class: `FvCard`
-
-### Superclass
-
-| Name                | Module | Package             |
-| ------------------- | ------ | ------------------- |
-| `FoundationElement` |        | @ni/fast-foundation |
-
-### Fields
-
-| Name              | Privacy | Type                        | Default | Description | Inherited From |
-| ----------------- | ------- | --------------------------- | ------- | ----------- | -------------- |
-| `title`           | public  | `string`                    | `''`    |             |                |
-| `subtitle`        | public  | `string`                    | `''`    |             |                |
-| `description`     | public  | `string`                    | `''`    |             |                |
-| `appearance`      | public  | `FvCardAppearanceType`      |         |             |                |
-| `interactionMode` | public  | `FvCardInteractionModeType` |         |             |                |
-| `disabled`        | public  | `boolean`                   | `false` |             |                |
-| `initials`        | public  | `string`                    | `''`    |             |                |
-
-### Attributes
-
-| Name               | Field           | Inherited From |
-| ------------------ | --------------- | -------------- |
-| `card-title`       | title           |                |
-| `subtitle`         | subtitle        |                |
-| `description`      | description     |                |
-| `appearance`       | appearance      |                |
-| `interaction-mode` | interactionMode |                |
-| `disabled`         | disabled        |                |
-| `initials`         | initials        |                |
-
-<hr/>
-
 ## class: `FvChipSelector`
 
 ### Superclass
@@ -108,6 +74,40 @@
 
 <hr/>
 
+## class: `FvCard`
+
+### Superclass
+
+| Name                | Module | Package             |
+| ------------------- | ------ | ------------------- |
+| `FoundationElement` |        | @ni/fast-foundation |
+
+### Fields
+
+| Name              | Privacy | Type                        | Default | Description | Inherited From |
+| ----------------- | ------- | --------------------------- | ------- | ----------- | -------------- |
+| `title`           | public  | `string`                    | `''`    |             |                |
+| `subtitle`        | public  | `string`                    | `''`    |             |                |
+| `description`     | public  | `string`                    | `''`    |             |                |
+| `appearance`      | public  | `FvCardAppearanceType`      |         |             |                |
+| `interactionMode` | public  | `FvCardInteractionModeType` |         |             |                |
+| `disabled`        | public  | `boolean`                   | `false` |             |                |
+| `initials`        | public  | `string`                    | `''`    |             |                |
+
+### Attributes
+
+| Name               | Field           | Inherited From |
+| ------------------ | --------------- | -------------- |
+| `card-title`       | title           |                |
+| `subtitle`         | subtitle        |                |
+| `description`      | description     |                |
+| `appearance`       | appearance      |                |
+| `interaction-mode` | interactionMode |                |
+| `disabled`         | disabled        |                |
+| `initials`         | initials        |                |
+
+<hr/>
+
 ## class: `FvContextHelp`
 
 ### Superclass
@@ -308,6 +308,47 @@
 
 <hr/>
 
+## class: `FvSplitter`
+
+### Superclass
+
+| Name                | Module | Package             |
+| ------------------- | ------ | ------------------- |
+| `FoundationElement` |        | @ni/fast-foundation |
+
+### Fields
+
+| Name             | Privacy | Type                  | Default          | Description                                                             | Inherited From |
+| ---------------- | ------- | --------------------- | ---------------- | ----------------------------------------------------------------------- | -------------- |
+| `ariaLabel`      | public  | `string`              | `'Resize panes'` | The accessible name for the separator.                                  |                |
+| `ariaLabelledby` | public  | `string \| undefined` |                  | Identifies the element that labels the separator.                       |                |
+| `ariaControls`   | public  | `string \| undefined` |                  | Identifies the primary pane controlled by the separator.                |                |
+| `position`       | public  | `number`              | `60`             | The splitter position as a percentage of the containing layout's width. |                |
+| `min`            | public  | `number`              | `0`              | The minimum allowed position.                                           |                |
+| `max`            | public  | `number`              | `100`            | The maximum allowed position.                                           |                |
+| `step`           | public  | `number`              | `1`              | The percentage-point increment used for keyboard resizing.              |                |
+
+### Events
+
+| Name     | Type    | Description | Inherited From |
+| -------- | ------- | ----------- | -------------- |
+| `change` | `Event` |             |                |
+| `input`  | `Event` |             |                |
+
+### Attributes
+
+| Name              | Field          | Inherited From |
+| ----------------- | -------------- | -------------- |
+| `aria-label`      | ariaLabel      |                |
+| `aria-labelledby` | ariaLabelledby |                |
+| `aria-controls`   | ariaControls   |                |
+| `position`        | position       |                |
+| `min`             | min            |                |
+| `max`             | max            |                |
+| `step`            | step           |                |
+
+<hr/>
+
 ## class: `FvStickyHeader`
 
 ### Superclass

package/dist/esm/fv/all-fv.d.ts

@@ -10,3 +10,4 @@ import './sticky-header';
 import './summary-panel';
 import './summary-panel-tile';
 import './search-input';
+import './splitter';

package/dist/esm/fv/all-fv.js

@@ -10,4 +10,5 @@ import './sticky-header';
 import './summary-panel';
 import './summary-panel-tile';
 import './search-input';
+import './splitter';
 //# sourceMappingURL=all-fv.js.map

package/dist/esm/fv/all-fv.js.map

@@ -1 +1 @@
-{"version":3,"file":"all-fv.js","sourceRoot":"","sources":["../../../src/fv/all-fv.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,QAAQ,CAAC;AAChB,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,2BAA2B,CAAC;AACnC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,gBAAgB,CAAC;AACxB,OAAO,uBAAuB,CAAC;AAC/B,OAAO,iBAAiB,CAAC;AACzB,OAAO,iBAAiB,CAAC;AACzB,OAAO,sBAAsB,CAAC;AAC9B,OAAO,gBAAgB,CAAC","sourcesContent":["import './accordion-item';\nimport './card';\nimport './chip-selector';\nimport './context-help';\nimport './master-detail-list-item';\nimport './master-detail-list';\nimport './split-button';\nimport './split-button-anchor';\nimport './sticky-header';\nimport './summary-panel';\nimport './summary-panel-tile';\nimport './search-input';\n"]}
+{"version":3,"file":"all-fv.js","sourceRoot":"","sources":["../../../src/fv/all-fv.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,QAAQ,CAAC;AAChB,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,2BAA2B,CAAC;AACnC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,gBAAgB,CAAC;AACxB,OAAO,uBAAuB,CAAC;AAC/B,OAAO,iBAAiB,CAAC;AACzB,OAAO,iBAAiB,CAAC;AACzB,OAAO,sBAAsB,CAAC;AAC9B,OAAO,gBAAgB,CAAC;AACxB,OAAO,YAAY,CAAC","sourcesContent":["import './accordion-item';\nimport './card';\nimport './chip-selector';\nimport './context-help';\nimport './master-detail-list-item';\nimport './master-detail-list';\nimport './split-button';\nimport './split-button-anchor';\nimport './sticky-header';\nimport './summary-panel';\nimport './summary-panel-tile';\nimport './search-input';\nimport './splitter';\n"]}

package/dist/esm/fv/splitter/index.d.ts

@@ -0,0 +1,69 @@
+import { FoundationElement } from '@ni/fast-foundation';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-fv-splitter': FvSplitter;
+    }
+}
+/**
+ * A vertical separator that enables pointer and keyboard resizing between two panes.
+ */
+export declare class FvSplitter extends FoundationElement {
+    /** The accessible name for the separator. */
+    ariaLabel: string;
+    /** Identifies the element that labels the separator. */
+    ariaLabelledby: string | undefined;
+    /** Identifies the primary pane controlled by the separator. */
+    ariaControls: string | undefined;
+    /** The splitter position as a percentage of the containing layout's width. */
+    position: number;
+    /** The minimum allowed position. */
+    min: number;
+    /** The maximum allowed position. */
+    max: number;
+    /** The percentage-point increment used for keyboard resizing. */
+    step: number;
+    /** @internal */
+    resizing: boolean;
+    private pointerId;
+    private pointerStartPosition;
+    private requestedPosition;
+    private applyingConstrainedPosition;
+    private requestedPositionResetScheduled;
+    private positionChangeCallbackVersion;
+    constructor();
+    /** @internal */
+    connectedCallback(): void;
+    /** @internal */
+    disconnectedCallback(): void;
+    /** @internal */
+    positionChanged(): void;
+    /** @internal */
+    minChanged(): void;
+    /** @internal */
+    maxChanged(): void;
+    /** @internal */
+    resizingChanged(): void;
+    /** @internal */
+    handlePointerDown(event: PointerEvent): boolean;
+    /** @internal */
+    handlePointerMove(event: PointerEvent): boolean;
+    /** @internal */
+    handlePointerUp(event: PointerEvent): boolean;
+    /** @internal */
+    handlePointerCancel(event: PointerEvent): boolean;
+    /** @internal */
+    handleKeyDown(event: KeyboardEvent): boolean;
+    private get validMin();
+    private get validMax();
+    private get validStep();
+    private get isRtl();
+    private readonly keydownHandler;
+    private constrain;
+    private updatePosition;
+    private applyConstrainedPosition;
+    private resetRequestedPositionAfterSynchronousUpdates;
+    private finishResize;
+    private syncAriaValueAttributesIfConnected;
+    private syncAriaValueAttributes;
+}
+export declare const fvSplitterTag = "ok-fv-splitter";

package/dist/esm/fv/splitter/index.js

@@ -0,0 +1,266 @@
+import { __decorate } from "tslib";
+import { attr, nullableNumberConverter, observable } from '@ni/fast-element';
+import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+/**
+ * A vertical separator that enables pointer and keyboard resizing between two panes.
+ */
+export class FvSplitter extends FoundationElement {
+    constructor() {
+        super();
+        /** The accessible name for the separator. */
+        this.ariaLabel = 'Resize panes';
+        /** The splitter position as a percentage of the containing layout's width. */
+        this.position = 60;
+        /** The minimum allowed position. */
+        this.min = 0;
+        /** The maximum allowed position. */
+        this.max = 100;
+        /** The percentage-point increment used for keyboard resizing. */
+        this.step = 1;
+        /** @internal */
+        this.resizing = false;
+        this.pointerStartPosition = 0;
+        this.requestedPosition = this.position;
+        this.applyingConstrainedPosition = false;
+        this.requestedPositionResetScheduled = false;
+        this.positionChangeCallbackVersion = 0;
+        this.keydownHandler = (event) => {
+            this.handleKeyDown(event);
+        };
+        const positionDescriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(this), 'position');
+        if (!positionDescriptor?.get || !positionDescriptor.set) {
+            return;
+        }
+        const getPosition = positionDescriptor.get.bind(this);
+        const setPosition = positionDescriptor.set.bind(this);
+        Object.defineProperty(this, 'position', {
+            configurable: true,
+            enumerable: positionDescriptor.enumerable,
+            get: getPosition,
+            set: (value) => {
+                const previousPosition = getPosition();
+                const callbackVersion = this.positionChangeCallbackVersion;
+                setPosition(value);
+                if (!this.applyingConstrainedPosition
+                    && callbackVersion === this.positionChangeCallbackVersion
+                    && previousPosition === getPosition()) {
+                    this.requestedPosition = getPosition();
+                }
+            }
+        });
+    }
+    /** @internal */
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'separator');
+        this.setAttribute('aria-orientation', 'vertical');
+        this.setAttribute('aria-label', this.ariaLabel);
+        this.tabIndex = 0;
+        this.addEventListener('keydown', this.keydownHandler);
+        this.syncAriaValueAttributes();
+    }
+    /** @internal */
+    disconnectedCallback() {
+        this.removeEventListener('keydown', this.keydownHandler);
+        super.disconnectedCallback();
+    }
+    /** @internal */
+    positionChanged() {
+        this.positionChangeCallbackVersion += 1;
+        if (!this.applyingConstrainedPosition) {
+            this.requestedPosition = this.position;
+            this.resetRequestedPositionAfterSynchronousUpdates();
+        }
+        this.applyConstrainedPosition();
+    }
+    /** @internal */
+    minChanged() {
+        this.applyConstrainedPosition();
+    }
+    /** @internal */
+    maxChanged() {
+        this.applyConstrainedPosition();
+    }
+    /** @internal */
+    resizingChanged() {
+        this.toggleAttribute('resizing', this.resizing);
+    }
+    /** @internal */
+    handlePointerDown(event) {
+        if (event.button !== 0 || !event.isPrimary || this.pointerId !== undefined) {
+            return true;
+        }
+        event.preventDefault();
+        const pointerTarget = event.currentTarget;
+        this.focus();
+        this.pointerId = event.pointerId;
+        this.pointerStartPosition = this.position;
+        this.resizing = true;
+        if (event.pointerId !== -1) {
+            pointerTarget.setPointerCapture(event.pointerId);
+        }
+        return true;
+    }
+    /** @internal */
+    handlePointerMove(event) {
+        if (event.pointerId !== this.pointerId) {
+            return true;
+        }
+        const container = this.parentElement;
+        if (!container) {
+            return true;
+        }
+        const bounds = container.getBoundingClientRect();
+        if (bounds.width > 0) {
+            const distanceFromInlineStart = this.isRtl
+                ? bounds.right - event.clientX
+                : event.clientX - bounds.left;
+            this.updatePosition((distanceFromInlineStart / bounds.width) * 100);
+        }
+        return true;
+    }
+    /** @internal */
+    handlePointerUp(event) {
+        if (event.pointerId === this.pointerId) {
+            this.finishResize();
+        }
+        return true;
+    }
+    /** @internal */
+    handlePointerCancel(event) {
+        if (event.pointerId === this.pointerId) {
+            this.updatePosition(this.pointerStartPosition);
+            this.resizing = false;
+            this.pointerId = undefined;
+        }
+        return true;
+    }
+    /** @internal */
+    handleKeyDown(event) {
+        let nextPosition;
+        const direction = this.isRtl ? -1 : 1;
+        switch (event.key) {
+            case 'ArrowLeft':
+                nextPosition = this.position - direction * this.validStep;
+                break;
+            case 'ArrowRight':
+                nextPosition = this.position + direction * this.validStep;
+                break;
+            case 'Home':
+                nextPosition = this.validMin;
+                break;
+            case 'End':
+                nextPosition = this.validMax;
+                break;
+            default:
+                return true;
+        }
+        event.preventDefault();
+        const previousPosition = this.position;
+        this.updatePosition(nextPosition);
+        if (this.position !== previousPosition) {
+            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+        }
+        return true;
+    }
+    get validMin() {
+        return Number.isFinite(this.min) ? Math.min(100, Math.max(0, this.min)) : 0;
+    }
+    get validMax() {
+        const max = Number.isFinite(this.max) ? this.max : 100;
+        return Math.max(this.validMin, Math.min(100, Math.max(0, max)));
+    }
+    get validStep() {
+        return Number.isFinite(this.step) && this.step > 0 ? this.step : 1;
+    }
+    get isRtl() {
+        return getComputedStyle(this).direction === 'rtl';
+    }
+    constrain(position) {
+        const finitePosition = Number.isFinite(position) ? position : 60;
+        return Math.min(this.validMax, Math.max(this.validMin, finitePosition));
+    }
+    updatePosition(position) {
+        const nextPosition = this.constrain(position);
+        this.requestedPosition = nextPosition;
+        if (nextPosition !== this.position) {
+            this.position = nextPosition;
+            this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        }
+    }
+    applyConstrainedPosition() {
+        const constrainedPosition = this.constrain(this.requestedPosition);
+        if (constrainedPosition !== this.position) {
+            this.applyingConstrainedPosition = true;
+            this.position = constrainedPosition;
+            this.applyingConstrainedPosition = false;
+        }
+        this.syncAriaValueAttributesIfConnected();
+    }
+    resetRequestedPositionAfterSynchronousUpdates() {
+        if (this.requestedPositionResetScheduled) {
+            return;
+        }
+        this.requestedPositionResetScheduled = true;
+        queueMicrotask(() => {
+            this.requestedPositionResetScheduled = false;
+            this.requestedPosition = this.position;
+        });
+    }
+    finishResize() {
+        const changed = this.position !== this.pointerStartPosition;
+        this.resizing = false;
+        this.pointerId = undefined;
+        if (changed) {
+            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+        }
+    }
+    syncAriaValueAttributesIfConnected() {
+        if (this.$fastController.isConnected) {
+            this.syncAriaValueAttributes();
+        }
+    }
+    syncAriaValueAttributes() {
+        this.setAttribute('aria-valuemin', String(this.validMin));
+        this.setAttribute('aria-valuemax', String(this.validMax));
+        this.setAttribute('aria-valuenow', String(this.position));
+        this.setAttribute('aria-valuetext', `${this.position} percent`);
+    }
+}
+__decorate([
+    attr({ attribute: 'aria-label' })
+], FvSplitter.prototype, "ariaLabel", void 0);
+__decorate([
+    attr({ attribute: 'aria-labelledby' })
+], FvSplitter.prototype, "ariaLabelledby", void 0);
+__decorate([
+    attr({ attribute: 'aria-controls' })
+], FvSplitter.prototype, "ariaControls", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], FvSplitter.prototype, "position", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], FvSplitter.prototype, "min", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], FvSplitter.prototype, "max", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], FvSplitter.prototype, "step", void 0);
+__decorate([
+    observable
+], FvSplitter.prototype, "resizing", void 0);
+const okFvSplitter = FvSplitter.compose({
+    baseName: 'fv-splitter',
+    template,
+    styles,
+    shadowOptions: {
+        delegatesFocus: false
+    }
+});
+DesignSystem.getOrCreate().withPrefix('ok').register(okFvSplitter());
+export const fvSplitterTag = 'ok-fv-splitter';
+//# sourceMappingURL=index.js.map

package/dist/esm/fv/splitter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fv/splitter/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { attr, nullableNumberConverter, observable } from '@ni/fast-element';\nimport { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'ok-fv-splitter': FvSplitter;\n    }\n}\n\n/**\n * A vertical separator that enables pointer and keyboard resizing between two panes.\n */\nexport class FvSplitter extends FoundationElement {\n    /** The accessible name for the separator. */\n    @attr({ attribute: 'aria-label' })\n    public override ariaLabel = 'Resize panes';\n\n    /** Identifies the element that labels the separator. */\n    @attr({ attribute: 'aria-labelledby' })\n    public ariaLabelledby: string | undefined;\n\n    /** Identifies the primary pane controlled by the separator. */\n    @attr({ attribute: 'aria-controls' })\n    public ariaControls: string | undefined;\n\n    /** The splitter position as a percentage of the containing layout's width. */\n    @attr({ converter: nullableNumberConverter })\n    public position = 60;\n\n    /** The minimum allowed position. */\n    @attr({ converter: nullableNumberConverter })\n    public min = 0;\n\n    /** The maximum allowed position. */\n    @attr({ converter: nullableNumberConverter })\n    public max = 100;\n\n    /** The percentage-point increment used for keyboard resizing. */\n    @attr({ converter: nullableNumberConverter })\n    public step = 1;\n\n    /** @internal */\n    @observable\n    public resizing = false;\n\n    private pointerId: number | undefined;\n    private pointerStartPosition = 0;\n    private requestedPosition = this.position;\n    private applyingConstrainedPosition = false;\n    private requestedPositionResetScheduled = false;\n    private positionChangeCallbackVersion = 0;\n\n    public constructor() {\n        super();\n\n        const positionDescriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(this), 'position');\n        if (!positionDescriptor?.get || !positionDescriptor.set) {\n            return;\n        }\n\n        const getPosition = positionDescriptor.get.bind(this) as () => number;\n        const setPosition = positionDescriptor.set.bind(this) as (value: number) => void;\n        Object.defineProperty(this, 'position', {\n            configurable: true,\n            enumerable: positionDescriptor.enumerable,\n            get: getPosition,\n            set: (value: number) => {\n                const previousPosition = getPosition();\n                const callbackVersion = this.positionChangeCallbackVersion;\n                setPosition(value);\n                if (!this.applyingConstrainedPosition\n                    && callbackVersion === this.positionChangeCallbackVersion\n                    && previousPosition === getPosition()) {\n                    this.requestedPosition = getPosition();\n                }\n            }\n        });\n    }\n\n    /** @internal */\n    public override connectedCallback(): void {\n        super.connectedCallback();\n\n        this.setAttribute('role', 'separator');\n        this.setAttribute('aria-orientation', 'vertical');\n        this.setAttribute('aria-label', this.ariaLabel);\n        this.tabIndex = 0;\n        this.addEventListener('keydown', this.keydownHandler);\n        this.syncAriaValueAttributes();\n    }\n\n    /** @internal */\n    public override disconnectedCallback(): void {\n        this.removeEventListener('keydown', this.keydownHandler);\n        super.disconnectedCallback();\n    }\n\n    /** @internal */\n    public positionChanged(): void {\n        this.positionChangeCallbackVersion += 1;\n        if (!this.applyingConstrainedPosition) {\n            this.requestedPosition = this.position;\n            this.resetRequestedPositionAfterSynchronousUpdates();\n        }\n        this.applyConstrainedPosition();\n    }\n\n    /** @internal */\n    public minChanged(): void {\n        this.applyConstrainedPosition();\n    }\n\n    /** @internal */\n    public maxChanged(): void {\n        this.applyConstrainedPosition();\n    }\n\n    /** @internal */\n    public resizingChanged(): void {\n        this.toggleAttribute('resizing', this.resizing);\n    }\n\n    /** @internal */\n    public handlePointerDown(event: PointerEvent): boolean {\n        if (event.button !== 0 || !event.isPrimary || this.pointerId !== undefined) {\n            return true;\n        }\n\n        event.preventDefault();\n        const pointerTarget = event.currentTarget as HTMLElement;\n        this.focus();\n        this.pointerId = event.pointerId;\n        this.pointerStartPosition = this.position;\n        this.resizing = true;\n        if (event.pointerId !== -1) {\n            pointerTarget.setPointerCapture(event.pointerId);\n        }\n        return true;\n    }\n\n    /** @internal */\n    public handlePointerMove(event: PointerEvent): boolean {\n        if (event.pointerId !== this.pointerId) {\n            return true;\n        }\n\n        const container = this.parentElement;\n        if (!container) {\n            return true;\n        }\n\n        const bounds = container.getBoundingClientRect();\n        if (bounds.width > 0) {\n            const distanceFromInlineStart = this.isRtl\n                ? bounds.right - event.clientX\n                : event.clientX - bounds.left;\n            this.updatePosition((distanceFromInlineStart / bounds.width) * 100);\n        }\n        return true;\n    }\n\n    /** @internal */\n    public handlePointerUp(event: PointerEvent): boolean {\n        if (event.pointerId === this.pointerId) {\n            this.finishResize();\n        }\n        return true;\n    }\n\n    /** @internal */\n    public handlePointerCancel(event: PointerEvent): boolean {\n        if (event.pointerId === this.pointerId) {\n            this.updatePosition(this.pointerStartPosition);\n            this.resizing = false;\n            this.pointerId = undefined;\n        }\n        return true;\n    }\n\n    /** @internal */\n    public handleKeyDown(event: KeyboardEvent): boolean {\n        let nextPosition: number | undefined;\n        const direction = this.isRtl ? -1 : 1;\n        switch (event.key) {\n            case 'ArrowLeft':\n                nextPosition = this.position - direction * this.validStep;\n                break;\n            case 'ArrowRight':\n                nextPosition = this.position + direction * this.validStep;\n                break;\n            case 'Home':\n                nextPosition = this.validMin;\n                break;\n            case 'End':\n                nextPosition = this.validMax;\n                break;\n            default:\n                return true;\n        }\n\n        event.preventDefault();\n        const previousPosition = this.position;\n        this.updatePosition(nextPosition);\n        if (this.position !== previousPosition) {\n            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n        }\n        return true;\n    }\n\n    private get validMin(): number {\n        return Number.isFinite(this.min) ? Math.min(100, Math.max(0, this.min)) : 0;\n    }\n\n    private get validMax(): number {\n        const max = Number.isFinite(this.max) ? this.max : 100;\n        return Math.max(this.validMin, Math.min(100, Math.max(0, max)));\n    }\n\n    private get validStep(): number {\n        return Number.isFinite(this.step) && this.step > 0 ? this.step : 1;\n    }\n\n    private get isRtl(): boolean {\n        return getComputedStyle(this).direction === 'rtl';\n    }\n\n    private readonly keydownHandler = (event: KeyboardEvent): void => {\n        this.handleKeyDown(event);\n    };\n\n    private constrain(position: number): number {\n        const finitePosition = Number.isFinite(position) ? position : 60;\n        return Math.min(this.validMax, Math.max(this.validMin, finitePosition));\n    }\n\n    private updatePosition(position: number): void {\n        const nextPosition = this.constrain(position);\n        this.requestedPosition = nextPosition;\n        if (nextPosition !== this.position) {\n            this.position = nextPosition;\n            this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n        }\n    }\n\n    private applyConstrainedPosition(): void {\n        const constrainedPosition = this.constrain(this.requestedPosition);\n        if (constrainedPosition !== this.position) {\n            this.applyingConstrainedPosition = true;\n            this.position = constrainedPosition;\n            this.applyingConstrainedPosition = false;\n        }\n        this.syncAriaValueAttributesIfConnected();\n    }\n\n    private resetRequestedPositionAfterSynchronousUpdates(): void {\n        if (this.requestedPositionResetScheduled) {\n            return;\n        }\n\n        this.requestedPositionResetScheduled = true;\n        queueMicrotask(() => {\n            this.requestedPositionResetScheduled = false;\n            this.requestedPosition = this.position;\n        });\n    }\n\n    private finishResize(): void {\n        const changed = this.position !== this.pointerStartPosition;\n        this.resizing = false;\n        this.pointerId = undefined;\n        if (changed) {\n            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n        }\n    }\n\n    private syncAriaValueAttributesIfConnected(): void {\n        if (this.$fastController.isConnected) {\n            this.syncAriaValueAttributes();\n        }\n    }\n\n    private syncAriaValueAttributes(): void {\n        this.setAttribute('aria-valuemin', String(this.validMin));\n        this.setAttribute('aria-valuemax', String(this.validMax));\n        this.setAttribute('aria-valuenow', String(this.position));\n        this.setAttribute('aria-valuetext', `${this.position} percent`);\n    }\n}\n\nconst okFvSplitter = FvSplitter.compose({\n    baseName: 'fv-splitter',\n    template,\n    styles,\n    shadowOptions: {\n        delegatesFocus: false\n    }\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okFvSplitter());\nexport const fvSplitterTag = 'ok-fv-splitter';"]}

package/dist/esm/fv/splitter/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@ni/fast-element").ElementStyles;

package/dist/esm/fv/splitter/styles.js

@@ -0,0 +1,62 @@
+import { css } from '@ni/fast-element';
+import { borderHoverColor, dividerBackgroundDynamicColor } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+import { display } from '../../utilities/style/display';
+export const styles = css `
+    @layer base, hover, focusVisible, active;
+
+    @layer base {
+        ${display('block')}
+
+        :host {
+            position: relative;
+            flex: 0 0 2px;
+            width: 2px;
+            height: 100%;
+            min-height: 0;
+            background: ${dividerBackgroundDynamicColor};
+            outline: none;
+        }
+
+        .splitter {
+            position: absolute;
+            inset: 0 -8px 0 -2px;
+            cursor: col-resize;
+            touch-action: none;
+            user-select: none;
+            -webkit-user-select: none;
+            outline: none;
+        }
+    }
+
+    @layer hover {
+        :host(:hover) {
+            background: ${borderHoverColor};
+        }
+    }
+
+    @layer focusVisible {
+        :host(:focus),
+        :host(:focus-visible) {
+            outline: none;
+        }
+
+        :host(:focus-visible)::before {
+            content: '';
+            position: absolute;
+            z-index: 1;
+            inset-block: 0;
+            left: 1px;
+            width: 3px;
+            transform: translateX(-50%);
+            background: ${borderHoverColor};
+            pointer-events: none;
+        }
+    }
+
+    @layer active {
+        :host([resizing]) {
+            background: ${borderHoverColor};
+        }
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/fv/splitter/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/splitter/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,gBAAgB,EAChB,6BAA6B,EAChC,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,OAAO,CAAC;;;;;;;;0BAQA,6BAA6B;;;;;;;;;;;;;;;;;0BAiB7B,gBAAgB;;;;;;;;;;;;;;;;;;0BAkBhB,gBAAgB;;;;;;;0BAOhB,gBAAgB;;;CAGzC,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    borderHoverColor,\n    dividerBackgroundDynamicColor\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n    @layer base, hover, focusVisible, active;\n\n    @layer base {\n        ${display('block')}\n\n        :host {\n            position: relative;\n            flex: 0 0 2px;\n            width: 2px;\n            height: 100%;\n            min-height: 0;\n            background: ${dividerBackgroundDynamicColor};\n            outline: none;\n        }\n\n        .splitter {\n            position: absolute;\n            inset: 0 -8px 0 -2px;\n            cursor: col-resize;\n            touch-action: none;\n            user-select: none;\n            -webkit-user-select: none;\n            outline: none;\n        }\n    }\n\n    @layer hover {\n        :host(:hover) {\n            background: ${borderHoverColor};\n        }\n    }\n\n    @layer focusVisible {\n        :host(:focus),\n        :host(:focus-visible) {\n            outline: none;\n        }\n\n        :host(:focus-visible)::before {\n            content: '';\n            position: absolute;\n            z-index: 1;\n            inset-block: 0;\n            left: 1px;\n            width: 3px;\n            transform: translateX(-50%);\n            background: ${borderHoverColor};\n            pointer-events: none;\n        }\n    }\n\n    @layer active {\n        :host([resizing]) {\n            background: ${borderHoverColor};\n        }\n    }\n`;"]}

package/dist/esm/fv/splitter/template.d.ts

@@ -0,0 +1,2 @@
+import type { FvSplitter } from '.';
+export declare const template: import("@ni/fast-element").ViewTemplate<FvSplitter, any>;

package/dist/esm/fv/splitter/template.js

@@ -0,0 +1,12 @@
+import { html } from '@ni/fast-element';
+export const template = html `
+    <div
+        class="splitter"
+        @pointerdown="${(x, c) => x.handlePointerDown(c.event)}"
+        @pointermove="${(x, c) => x.handlePointerMove(c.event)}"
+        @pointerup="${(x, c) => x.handlePointerUp(c.event)}"
+        @pointercancel="${(x, c) => x.handlePointerCancel(c.event)}"
+        @lostpointercapture="${(x, c) => x.handlePointerCancel(c.event)}"
+    ></div>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/fv/splitter/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/fv/splitter/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAGxC,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAY;;;wBAGhB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAqB,CAAC;wBACtD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAqB,CAAC;sBACxD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAqB,CAAC;0BAChD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,KAAqB,CAAC;+BACnD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,KAAqB,CAAC;;CAEtF,CAAC","sourcesContent":["import { html } from '@ni/fast-element';\nimport type { FvSplitter } from '.';\n\nexport const template = html<FvSplitter>`\n    <div\n        class=\"splitter\"\n        @pointerdown=\"${(x, c) => x.handlePointerDown(c.event as PointerEvent)}\"\n        @pointermove=\"${(x, c) => x.handlePointerMove(c.event as PointerEvent)}\"\n        @pointerup=\"${(x, c) => x.handlePointerUp(c.event as PointerEvent)}\"\n        @pointercancel=\"${(x, c) => x.handlePointerCancel(c.event as PointerEvent)}\"\n        @lostpointercapture=\"${(x, c) => x.handlePointerCancel(c.event as PointerEvent)}\"\n    ></div>\n`;"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/ok-components",
-  "version": "1.8.2",
+  "version": "1.9.0",
   "description": "NI Ok Components",
   "scripts": {
     "build": "npm run build:components && npm run build:cem",
@@ -43,8 +43,8 @@
     "@ni/fast-element": "^10.1.2",
     "@ni/fast-foundation": "^10.2.5",
     "@ni/fast-web-utilities": "^10.0.0",
-    "@ni/nimble-components": "^35.13.0",
-    "@ni/spright-components": "^6.22.0",
+    "@ni/nimble-components": "^35.13.1",
+    "@ni/spright-components": "^6.22.1",
     "tslib": "^2.2.0"
   },
   "devDependencies": {
@@ -52,7 +52,7 @@
     "@custom-elements-manifest/to-markdown": "^0.1.0",
     "@ni-private/eslint-config-nimble": "*",
     "@ni-private/jasmine-extensions": "^0.0.1",
-    "@ni/jasmine-parameterized": "^1.0.10",
+    "@ni/jasmine-parameterized": "^1.0.11",
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-replace": "^6.0.0",
@@ -68,7 +68,7 @@
     "karma-spec-reporter": "^0.0.36",
     "karma-vite": "^1.0.5",
     "karma-webkit-launcher": "^2.6.0",
-    "playwright": "1.60.0",
+    "playwright": "1.62.0",
     "rollup": "^4.60.2",
     "rollup-plugin-sourcemaps2": "^0.5.0",
     "typescript": "~5.8.3"