dockview-core 5.1.0 → 6.0.0

package/dist/cjs/dockview/events.d.ts

@@ -4,6 +4,7 @@ import { DockviewApi } from '../api/component.api';
 import { IDockviewPanel } from './dockviewPanel';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { IDockviewEvent } from '../events';
+import { ITabGroup } from './tabGroup';
 export type DockviewGroupDropLocation = 'tab' | 'header_space' | 'content' | 'edge';
 export interface DockviewWillShowOverlayLocationEventOptions {
     readonly kind: DockviewGroupDropLocation;
@@ -12,6 +13,14 @@ export interface DockviewWillShowOverlayLocationEventOptions {
     readonly group: DockviewGroupPanel | undefined;
     getData: () => PanelTransfer | undefined;
 }
+export interface DockviewTabGroupChangeEvent {
+    readonly tabGroup: ITabGroup;
+}
+export interface DockviewTabGroupPanelChangeEvent {
+    readonly tabGroup: ITabGroup;
+    readonly panelId: string;
+}
+export type DockviewTabGroupCollapsedChangeEvent = DockviewTabGroupChangeEvent;
 export declare class DockviewWillShowOverlayLocationEvent implements IDockviewEvent {
     private readonly event;
     readonly options: DockviewWillShowOverlayLocationEventOptions;

package/dist/cjs/dockview/framework.d.ts

@@ -3,8 +3,10 @@ import { DockviewGroupPanelApi } from '../api/dockviewGroupPanelApi';
 import { DockviewPanelApi } from '../api/dockviewPanelApi';
 import { PanelParameters } from '../framwork';
 import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel';
+import { DockviewGroupLocation } from './dockviewGroupPanelModel';
 import { IDockviewPanel } from './dockviewPanel';
 import { DockviewHeaderPosition } from './options';
+import { ITabGroup } from './tabGroup';
 export interface IGroupPanelBaseProps<T extends {
     [index: string]: any;
 } = any> extends PanelParameters<T> {
@@ -28,6 +30,7 @@ export interface IDockviewHeaderActionsProps {
     isGroupActive: boolean;
     group: DockviewGroupPanel;
     headerPosition: DockviewHeaderPosition;
+    location?: DockviewGroupLocation;
 }
 export interface IGroupHeaderProps {
     api: DockviewGroupPanelApi;
@@ -41,3 +44,14 @@ export interface IWatermarkPanelProps {
 export interface DockviewReadyEvent {
     api: DockviewApi;
 }
+export interface ITabGroupChipRenderer {
+    readonly element: HTMLElement;
+    init(params: {
+        tabGroup: ITabGroup;
+        api: DockviewApi;
+    }): void;
+    update?(params: {
+        tabGroup: ITabGroup;
+    }): void;
+    dispose(): void;
+}

package/dist/cjs/dockview/options.d.ts

@@ -11,19 +11,63 @@ import { GroupOptions } from './dockviewGroupPanelModel';
 import { DockviewGroupDropLocation } from './events';
 import { IDockviewPanel } from './dockviewPanel';
 import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
-import { IGroupHeaderProps } from './framework';
+import { IGroupHeaderProps, ITabGroupChipRenderer } from './framework';
 import { FloatingGroupOptions } from './dockviewComponent';
 import { Contraints } from '../gridview/gridviewPanel';
 import { AcceptableEvent, IAcceptableEvent } from '../events';
 import { DockviewTheme } from './theme';
+import { ITabGroup } from './tabGroup';
+import { DockviewTabGroupColorEntry } from './tabGroupAccent';
 export interface IHeaderActionsRenderer extends IDisposable {
     readonly element: HTMLElement;
     init(params: IGroupHeaderProps): void;
 }
-export interface TabContextMenuEvent {
+export type BuiltInContextMenuItem = 'close' | 'closeOthers' | 'closeAll' | 'separator';
+export type BuiltInChipContextMenuItem = 'separator' | 'colorPicker' | 'rename';
+export interface ContextMenuItemConfig {
+    label?: string;
+    /**
+     * A framework component to render as the menu item.
+     * The component type is opaque to core; the framework adapter renders it.
+     */
+    component?: unknown;
+    componentProps?: object;
+    /**
+     * A raw DOM element to embed as-is in the context menu.
+     * Use this when you want to render custom content without a framework component.
+     */
+    element?: HTMLElement;
+    action?: () => void;
+    disabled?: boolean;
+}
+export type ContextMenuItem = BuiltInContextMenuItem | ContextMenuItemConfig;
+export interface GetTabContextMenuItemsParams {
+    panel: IDockviewPanel;
+    group: DockviewGroupPanel;
+    api: DockviewApi;
     event: MouseEvent;
+}
+export interface GetTabGroupChipContextMenuItemsParams {
+    tabGroup: ITabGroup;
+    group: DockviewGroupPanel;
     api: DockviewApi;
+    event: MouseEvent;
+}
+export interface IContextMenuItemComponentProps {
     panel: IDockviewPanel;
+    group: DockviewGroupPanel;
+    api: DockviewApi;
+    /** Call to close the context menu */
+    close: () => void;
+    componentProps?: object;
+}
+export interface IContextMenuItemRenderer extends IDisposable {
+    readonly element: HTMLElement;
+    init(props: IContextMenuItemComponentProps): void;
+}
+export interface CreateContextMenuItemComponentOptions {
+    id: string;
+    component: unknown;
 }
 export interface ViewFactoryData {
     content: string;
@@ -69,7 +113,57 @@ export interface DockviewOptions {
      * This is only applied to the tab header section. Defaults to `custom`.
      */
     scrollbars?: 'native' | 'custom';
+    /**
+     * Return the items to display in the tab context menu on right-click.
+     *
+     * Use built-in string shortcuts (`'close'`, `'closeOthers'`, `'closeAll'`, `'separator'`)
+     * or provide a `ContextMenuItemConfig` object for custom items.
+     *
+     * If omitted, no context menu is shown.
+     * Return an empty array to suppress the menu for specific cases.
+     */
+    getTabContextMenuItems?: (params: GetTabContextMenuItemsParams) => ContextMenuItem[];
+    /**
+     * Return the items to display in the tab group chip context menu on right-click.
+     *
+     * Use built-in string shortcuts (`'separator'`, `'colorPicker'`, `'rename'`) or provide a
+     * `ContextMenuItemConfig` object for custom items.
+     * `'colorPicker'` renders a native grid of color swatches for the tab group.
+     * `'rename'` renders an inline text input to rename the tab group.
+     *
+     * If omitted, no context menu is shown on chip right-click.
+     * Return an empty array to suppress the menu for specific cases.
+     */
+    getTabGroupChipContextMenuItems?: (params: GetTabGroupChipContextMenuItemsParams) => (BuiltInChipContextMenuItem | ContextMenuItemConfig)[];
+    /**
+     * Factory to create custom tab group chip renderers.
+     * If not provided, the default chip renderer is used.
+     */
+    createTabGroupChipComponent?: (tabGroup: ITabGroup) => ITabGroupChipRenderer;
+    /**
+     * Replace the built-in tab group color palette with a user-defined list.
+     *
+     * Each entry has an `id` (stored on `tabGroup.color` and serialized),
+     * a `value` (any CSS color expression — hex, rgb(), `var(...)`, etc.),
+     * and an optional `label` shown in the context menu picker.
+     *
+     * If omitted, the default 9-color palette is used. The list fully
+     * replaces the defaults — there is no merge.
+     */
+    tabGroupColors?: DockviewTabGroupColorEntry[];
+    /**
+     * Controls how dockview applies tab group color accents.
+     *
+     * - `'palette'` (default): write `--dv-tab-group-color`, render the
+     *   color picker, and apply built-in accent styling.
+     * - `'off'`: opt out entirely. No `--dv-tab-group-color` is written,
+     *   the color picker is suppressed, and chips/indicators render
+     *   without the accent. The `tg.color` data field is preserved so
+     *   custom chip renderers can still read it and roll their own visual.
+     */
+    tabGroupAccent?: 'palette' | 'off';
 }
+export type TabAnimation = 'smooth' | 'default';
 export interface DockviewDndOverlayEvent extends IAcceptableEvent {
     nativeEvent: DragEvent;
     target: DockviewGroupDropLocation;
@@ -104,6 +198,7 @@ export interface DockviewFrameworkOptions {
     createTabComponent?: (options: CreateComponentOptions) => ITabRenderer | undefined;
     createComponent: (options: CreateComponentOptions) => IContentRenderer;
     createWatermarkComponent?: () => IWatermarkRenderer;
+    createContextMenuItemComponent?: (options: CreateContextMenuItemComponentOptions) => IContextMenuItemRenderer | undefined;
 }
 export type DockviewComponentOptions = DockviewOptions & DockviewFrameworkOptions;
 export interface PanelOptions<P extends object = Parameters> {

package/dist/cjs/dockview/options.js

@@ -15,7 +15,11 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isGroupOptionsWithGroup = exports.isGroupOptionsWithPanel = exports.isPanelOptionsWithGroup = exports.isPanelOptionsWithPanel = exports.PROPERTY_KEYS_DOCKVIEW = exports.DockviewUnhandledDragOverEvent = void 0;
+exports.PROPERTY_KEYS_DOCKVIEW = exports.DockviewUnhandledDragOverEvent = void 0;
+exports.isPanelOptionsWithPanel = isPanelOptionsWithPanel;
+exports.isPanelOptionsWithGroup = isPanelOptionsWithGroup;
+exports.isGroupOptionsWithPanel = isGroupOptionsWithPanel;
+exports.isGroupOptionsWithGroup = isGroupOptionsWithGroup;
 var events_1 = require("../events");
 var DockviewUnhandledDragOverEvent = /** @class */ (function (_super) {
     __extends(DockviewUnhandledDragOverEvent, _super);
@@ -55,6 +59,11 @@ exports.PROPERTY_KEYS_DOCKVIEW = (function () {
         theme: undefined,
         disableTabsOverflowList: undefined,
         scrollbars: undefined,
+        getTabContextMenuItems: undefined,
+        getTabGroupChipContextMenuItems: undefined,
+        createTabGroupChipComponent: undefined,
+        tabGroupColors: undefined,
+        tabGroupAccent: undefined,
     };
     return Object.keys(properties);
 })();
@@ -64,25 +73,21 @@ function isPanelOptionsWithPanel(data) {
     }
     return false;
 }
-exports.isPanelOptionsWithPanel = isPanelOptionsWithPanel;
 function isPanelOptionsWithGroup(data) {
     if (data.referenceGroup) {
         return true;
     }
     return false;
 }
-exports.isPanelOptionsWithGroup = isPanelOptionsWithGroup;
 function isGroupOptionsWithPanel(data) {
     if (data.referencePanel) {
         return true;
     }
     return false;
 }
-exports.isGroupOptionsWithPanel = isGroupOptionsWithPanel;
 function isGroupOptionsWithGroup(data) {
     if (data.referenceGroup) {
         return true;
     }
     return false;
 }
-exports.isGroupOptionsWithGroup = isGroupOptionsWithGroup;

package/dist/cjs/dockview/tabGroup.d.ts

@@ -0,0 +1,99 @@
+import { Event } from '../events';
+import { CompositeDisposable } from '../lifecycle';
+/**
+ * The accent color associated with a tab group.
+ *
+ * This is any CSS color expression: a palette id (e.g. `'grey'`, `'blue'`),
+ * a raw color literal (`'#abc123'`, `'rgb(0,0,0)'`), or `undefined` to inherit
+ * the default. Resolution to a concrete CSS value is handled by the
+ * dockview's `TabGroupColorPalette` (see `tabGroupAccent.ts`).
+ */
+export type DockviewTabGroupColor = string;
+export interface SerializedTabGroup {
+    id: string;
+    label?: string;
+    color?: string;
+    collapsed: boolean;
+    panelIds: string[];
+    componentParams?: Record<string, unknown>;
+}
+export interface TabGroupOptions {
+    label?: string;
+    color?: string;
+    collapsed?: boolean;
+    /**
+     * Free-form data passed to a custom chip renderer
+     * (`createTabGroupChipComponent`). Read via `tabGroup.componentParams`
+     * inside the renderer's `init` / `update`. Must be JSON-serializable to
+     * round-trip through layout serialization.
+     */
+    componentParams?: Record<string, unknown>;
+}
+export interface ITabGroup {
+    readonly id: string;
+    readonly label: string;
+    readonly color: string | undefined;
+    readonly collapsed: boolean;
+    readonly panelIds: readonly string[];
+    readonly size: number;
+    readonly isEmpty: boolean;
+    readonly componentParams: Record<string, unknown> | undefined;
+    readonly onDidChange: Event<void>;
+    readonly onDidPanelChange: Event<{
+        panelId: string;
+        type: 'add' | 'remove';
+    }>;
+    readonly onDidCollapseChange: Event<boolean>;
+    readonly onDidDestroy: Event<void>;
+    addPanel(panelId: string, index?: number): void;
+    removePanel(panelId: string): boolean;
+    indexOfPanel(panelId: string): number;
+    containsPanel(panelId: string): boolean;
+    setLabel(value: string): void;
+    setColor(value: string | undefined): void;
+    setComponentParams(value: Record<string, unknown> | undefined): void;
+    collapse(): void;
+    expand(): void;
+    toggle(): void;
+    toJSON(): SerializedTabGroup;
+    dispose(): void;
+}
+export declare class TabGroup extends CompositeDisposable implements ITabGroup {
+    readonly id: string;
+    private _label;
+    private _color;
+    private _collapsed;
+    private _componentParams;
+    private readonly _panelIds;
+    private readonly _onDidChange;
+    readonly onDidChange: Event<void>;
+    private readonly _onDidPanelChange;
+    readonly onDidPanelChange: Event<{
+        panelId: string;
+        type: "add" | "remove";
+    }>;
+    private readonly _onDidCollapseChange;
+    readonly onDidCollapseChange: Event<boolean>;
+    private readonly _onDidDestroy;
+    readonly onDidDestroy: Event<void>;
+    get label(): string;
+    get color(): string | undefined;
+    get componentParams(): Record<string, unknown> | undefined;
+    setLabel(value: string): void;
+    setColor(value: string | undefined): void;
+    setComponentParams(value: Record<string, unknown> | undefined): void;
+    get collapsed(): boolean;
+    get panelIds(): readonly string[];
+    get size(): number;
+    get isEmpty(): boolean;
+    constructor(id: string, options?: TabGroupOptions);
+    addPanel(panelId: string, index?: number): void;
+    removePanel(panelId: string): boolean;
+    indexOfPanel(panelId: string): number;
+    containsPanel(panelId: string): boolean;
+    collapse(): void;
+    expand(): void;
+    toggle(): void;
+    toJSON(): SerializedTabGroup;
+    dispose(): void;
+}

package/dist/cjs/dockview/tabGroup.js

@@ -0,0 +1,219 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabGroup = void 0;
+var events_1 = require("../events");
+var lifecycle_1 = require("../lifecycle");
+var TabGroup = /** @class */ (function (_super) {
+    __extends(TabGroup, _super);
+    function TabGroup(id, options) {
+        var _a, _b;
+        var _this = _super.call(this) || this;
+        _this.id = id;
+        _this._collapsed = false;
+        _this._panelIds = [];
+        _this._onDidChange = new events_1.Emitter();
+        _this.onDidChange = _this._onDidChange.event;
+        _this._onDidPanelChange = new events_1.Emitter();
+        _this.onDidPanelChange = _this._onDidPanelChange.event;
+        _this._onDidCollapseChange = new events_1.Emitter();
+        _this.onDidCollapseChange = _this._onDidCollapseChange.event;
+        _this._onDidDestroy = new events_1.Emitter();
+        _this.onDidDestroy = _this._onDidDestroy.event;
+        _this._label = (_a = options === null || options === void 0 ? void 0 : options.label) !== null && _a !== void 0 ? _a : '';
+        _this._color = (options === null || options === void 0 ? void 0 : options.color) === '' ? undefined : options === null || options === void 0 ? void 0 : options.color;
+        _this._collapsed = (_b = options === null || options === void 0 ? void 0 : options.collapsed) !== null && _b !== void 0 ? _b : false;
+        _this._componentParams = options === null || options === void 0 ? void 0 : options.componentParams;
+        _this.addDisposables(_this._onDidChange, _this._onDidPanelChange, _this._onDidCollapseChange, _this._onDidDestroy);
+        return _this;
+    }
+    Object.defineProperty(TabGroup.prototype, "label", {
+        get: function () {
+            return this._label;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TabGroup.prototype, "color", {
+        get: function () {
+            return this._color;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TabGroup.prototype, "componentParams", {
+        get: function () {
+            return this._componentParams;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    TabGroup.prototype.setLabel = function (value) {
+        if (this.isDisposed || this._label === value) {
+            return;
+        }
+        this._label = value;
+        this._onDidChange.fire();
+    };
+    TabGroup.prototype.setColor = function (value) {
+        if (this.isDisposed) {
+            return;
+        }
+        var next = value === '' ? undefined : value;
+        if (this._color === next) {
+            return;
+        }
+        this._color = next;
+        this._onDidChange.fire();
+    };
+    TabGroup.prototype.setComponentParams = function (value) {
+        if (this.isDisposed) {
+            return;
+        }
+        this._componentParams = value;
+        this._onDidChange.fire();
+    };
+    Object.defineProperty(TabGroup.prototype, "collapsed", {
+        get: function () {
+            return this._collapsed;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TabGroup.prototype, "panelIds", {
+        get: function () {
+            return this._panelIds;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TabGroup.prototype, "size", {
+        get: function () {
+            return this._panelIds.length;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TabGroup.prototype, "isEmpty", {
+        get: function () {
+            return this._panelIds.length === 0;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    TabGroup.prototype.addPanel = function (panelId, index) {
+        if (this.isDisposed) {
+            return;
+        }
+        if (this._panelIds.includes(panelId)) {
+            return;
+        }
+        var insertIndex = index !== undefined
+            ? Math.max(0, Math.min(index, this._panelIds.length))
+            : this._panelIds.length;
+        this._panelIds.splice(insertIndex, 0, panelId);
+        this._onDidPanelChange.fire({ panelId: panelId, type: 'add' });
+    };
+    TabGroup.prototype.removePanel = function (panelId) {
+        if (this.isDisposed) {
+            return false;
+        }
+        var index = this._panelIds.indexOf(panelId);
+        if (index === -1) {
+            return false;
+        }
+        this._panelIds.splice(index, 1);
+        this._onDidPanelChange.fire({ panelId: panelId, type: 'remove' });
+        return true;
+    };
+    TabGroup.prototype.indexOfPanel = function (panelId) {
+        return this._panelIds.indexOf(panelId);
+    };
+    TabGroup.prototype.containsPanel = function (panelId) {
+        return this._panelIds.includes(panelId);
+    };
+    TabGroup.prototype.collapse = function () {
+        if (this.isDisposed || this._collapsed) {
+            return;
+        }
+        this._collapsed = true;
+        this._onDidCollapseChange.fire(true);
+    };
+    TabGroup.prototype.expand = function () {
+        if (this.isDisposed || !this._collapsed) {
+            return;
+        }
+        this._collapsed = false;
+        this._onDidCollapseChange.fire(false);
+    };
+    TabGroup.prototype.toggle = function () {
+        if (this._collapsed) {
+            this.expand();
+        }
+        else {
+            this.collapse();
+        }
+    };
+    TabGroup.prototype.toJSON = function () {
+        var result = {
+            id: this.id,
+            collapsed: this._collapsed,
+            panelIds: __spreadArray([], __read(this._panelIds), false),
+        };
+        if (this._label) {
+            result.label = this._label;
+        }
+        if (this._color !== undefined) {
+            result.color = this._color;
+        }
+        if (this._componentParams !== undefined) {
+            result.componentParams = this._componentParams;
+        }
+        return result;
+    };
+    TabGroup.prototype.dispose = function () {
+        this._onDidDestroy.fire();
+        _super.prototype.dispose.call(this);
+    };
+    return TabGroup;
+}(lifecycle_1.CompositeDisposable));
+exports.TabGroup = TabGroup;

package/dist/cjs/dockview/tabGroupAccent.d.ts

@@ -0,0 +1,65 @@
+/**
+ * A single entry in the tab-group color palette.
+ *
+ * `id` is the value stored on `ITabGroup.color` and serialized in
+ * `SerializedTabGroup.color`. `value` is any CSS color expression — a hex
+ * literal, an rgb()/hsl()/oklch() function, or a `var(...)` reference.
+ *
+ * The default palette ships with `var(--dv-tab-group-color-${id})` values so
+ * themes can override the defaults purely in CSS. User-supplied palettes
+ * typically use raw color literals.
+ */
+export interface DockviewTabGroupColorEntry {
+    id: string;
+    value: string;
+    label?: string;
+}
+export declare const DEFAULT_TAB_GROUP_COLORS: readonly DockviewTabGroupColorEntry[];
+/**
+ * Runtime palette for tab-group color accents.
+ *
+ * Resolves a stored `color` string to a CSS color expression, with three
+ * fall-through modes:
+ *   1. `id` matches an entry → entry's `value`
+ *   2. `id` doesn't match → `id` itself (raw CSS literal pass-through)
+ *   3. `id` is empty or undefined → undefined (caller skips assignment)
+ *
+ * When `enabled` is false the palette returns undefined for everything; this
+ * is the `tabGroupAccent: 'off'` opt-out path.
+ */
+export declare class TabGroupColorPalette {
+    private _entries;
+    private _byId;
+    private _enabled;
+    constructor(entries: readonly DockviewTabGroupColorEntry[], enabled?: boolean);
+    get enabled(): boolean;
+    set enabled(value: boolean);
+    /**
+     * Replace the entry list in place. Used by `updateOptions` so that
+     * existing palette references (held by chips, indicators, etc.) see
+     * the new palette without needing to be re-wired.
+     */
+    setEntries(entries: readonly DockviewTabGroupColorEntry[]): void;
+    entries(): readonly DockviewTabGroupColorEntry[];
+    has(id: string): boolean;
+    get(id: string): DockviewTabGroupColorEntry | undefined;
+    /** First entry's id; used as the default when a color is unset. */
+    defaultId(): string | undefined;
+    /**
+     * Resolve a stored color to its CSS value, or undefined if no value
+     * should be written (palette disabled, or color empty/undefined).
+     */
+    resolveValue(color: string | undefined): string | undefined;
+}
+/**
+ * Set the `--dv-tab-group-color` custom property on `el` to the resolved
+ * accent value, or remove it when the palette is disabled / color is unset.
+ */
+export declare function applyTabGroupAccent(el: HTMLElement, color: string | undefined, palette: TabGroupColorPalette | undefined): void;
+/**
+ * Return the resolved CSS color for a tab group, or undefined when the
+ * palette is disabled or no color is set. Use this when you need the raw
+ * value to assign to a non-custom-property style (e.g. SVG stroke,
+ * backgroundColor on the indicator underline).
+ */
+export declare function resolveTabGroupAccent(color: string | undefined, palette: TabGroupColorPalette | undefined): string | undefined;