@ngneers/controls 0.0.1-next.0

package/types/ngneers-controls-base.d.ts

@@ -0,0 +1,277 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef, Injector, InputSignal, Signal, InjectionToken, Type, Provider } from '@angular/core';
+import { ControlTemplateInfo, AppliedThemeClassCfg } from '@ngneers/controls/api/ng';
+import { CustomKind } from '@ngneers/controls-custom-types';
+import { ControlTemplate, ControlName as ControlName$1, ThemeTemplate as ThemeTemplate$1, ThemeClasses } from '@ngneers/controls-themes';
+import { ControlName, ThemeTemplate } from '@ngneers/controls-themes/templates';
+import { FormValueControl } from '@angular/forms/signals';
+
+declare const NGN_CONTROL: InjectionToken<NgnBase<never>>;
+type AnyNgnBase = NgnBaseSafe<any>;
+type NgnBaseSafe<T extends ControlName | null> = Omit<NgnBase<T>, 'kind' | 'appliedKind' | 'pt'>;
+type FullAnyNgnBase = Omit<NgnBase<any>, 'kind' | 'appliedKind' | 'pt'> & {
+    kind: InputSignal<CustomKind<any> | undefined>;
+    appliedKind: InputSignal<CustomKind<any> | undefined>;
+    pt: InputSignal<NgnPassthrough<any> | undefined>;
+};
+/**
+ * @internal
+ * Provides the control itself for dependency injection.
+ * @param control - The control class to provide.
+ * @returns A provider for the control itself.
+ */
+declare function provideSelf(control: Type<unknown>): Provider;
+declare abstract class NgnBase<T extends ControlName | null> {
+    protected abstract theme: ControlTemplateInfo<never> | null;
+    private readonly _defaultKind;
+    private readonly _defaultColor;
+    private readonly _kindOverride;
+    /**
+     * The element reference for the host element.
+     */
+    readonly element: ElementRef<HTMLElement>;
+    /**
+     * The injector for the component.
+     */
+    readonly injector: Injector;
+    /**
+     * If true, the control will not apply any theme styles.
+     * The base styles of the control will still be applied.
+     * @default false
+     */
+    readonly unstyled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Some controls support custom kinds for styling purposes.
+     * The available kinds depend on the control and the theme used.
+     *
+     * TODO: link to custom types documentation
+     */
+    readonly kind: InputSignal<CustomKind<T> | undefined>;
+    readonly color: InputSignal<unknown>;
+    readonly appliedKind: Signal<CustomKind<T> | undefined>;
+    readonly appliedColor: Signal<unknown>;
+    /**
+     * Custom passthrough attributes to apply to the control's theme classes and its dependencies.
+     * This allows for fine-grained customization of attributes, styles and more.
+     */
+    readonly pt: InputSignal<(T extends string ? NgnPassthrough<T> : never) | undefined>;
+    /**
+     * Marks a control as the primary value control of a surrounding field
+     * (e.g. `ngn-input-field`). Fields resolve their projected control by
+     * filtering for this flag, so auxiliary controls placed inside the field
+     * (buttons, icons, spin buttons, …) never shadow the actual input.
+     * Overridden with `true` by input, mask-input, calendar, select, ….
+     */
+    readonly isFieldControl: boolean;
+    /**
+     * Hook for placing focus/selection from a pointer event that originated in the
+     * surrounding field (or the control itself). The default does nothing and
+     * returns `false`, signalling the surrounding field should fall back to its
+     * primitive focusing. Controls that own internal focus placement (e.g.
+     * mask-input) override this, act on the pointer location, and return `true`.
+     */
+    focusFromPointer(_event: MouseEvent): boolean;
+    /**
+     * Hook for stepping the control's value (e.g. from `ngn-spin-buttons` or
+     * other external steppers). The default does nothing and returns `false`.
+     * Controls with a steppable value (e.g. number-input) override this, apply
+     * the step and return `true`.
+     * @param _direction - `1` to increment, `-1` to decrement.
+     * @param _big - Whether to apply the control's big step (e.g. Shift+Arrow).
+     */
+    stepValue(_direction: 1 | -1, _big?: boolean): boolean;
+    /**
+     * Hook telling external steppers (e.g. `ngn-spin-buttons`) whether the value
+     * can currently be stepped in the given direction. The default returns
+     * `false`; controls overriding {@link stepValue} override this as well
+     * (typically `false` at a min/max bound or while disabled/readonly).
+     */
+    canStepValue(_direction: 1 | -1): boolean;
+    /**
+     * Hook for clearing the control's own value/state (e.g. from a surrounding
+     * field's clear button). The default does nothing and returns `false`, so the
+     * caller falls back to clearing the underlying DOM input. Controls that manage
+     * their own value (e.g. mask-input) override this to reset and return `true`.
+     */
+    clearValue(): boolean;
+    /**
+     * Temporarily overrides the authored kind without mutating the public input.
+     * Intended for derived control states such as validation-driven hints.
+     */
+    protected setKindOverride(kind: CustomKind<T> | undefined): void;
+    private readonly _childNgnControls;
+    private readonly _afterLeaveCbs;
+    constructor();
+    /**
+     * Prepares the after leave hook to be called when the control is destroyed
+     * and its leave animation has finished.
+     */
+    private prepareAfterLeaveHook;
+    private static _leaveQueue;
+    private static _leaveRafScheduled;
+    private static _enqueueLeaveCheck;
+    private static _processLeaveQueue;
+    /**
+     * Recursively searches for a leave animation on the element and its parents.
+     */
+    private static _findLeaveAnimation;
+    private afterLeaveInternal;
+    /**
+     * Lifecycle hook that is called after the control has left (been removed from) the DOM.
+     * Can be overridden by subclasses to perform custom actions after the leave animation.
+     */
+    protected afterLeave(): void;
+    /**
+     * @internal
+     */
+    protected injectThemeTemplate<External extends boolean = false>(template: External extends true ? ControlTemplate : T extends string ? ThemeTemplate[T] : never, hostClass?: null extends T ? never : AppliedThemeClassCfg<T & string>): ControlTemplateInfo<External extends true ? ControlTemplate : T extends string ? ThemeTemplate[T] : never>;
+    /**
+     * Toggles the kind and color theme classes based on the current values of the kind and color inputs.
+     */
+    private initializeKindAndColorClasses;
+    /**
+     * Initializes automatic theme class toggling for a given prefix based on the provided string signal.
+     *
+     * ⚠️ Caution: This method assumes that the control's theme supports classes with the given prefix.
+     *
+     * ⚠️ Caution: Make sure the signal provides only string or nullish values.
+     *
+     * @param prefix The prefix for the theme class (e.g., 'kind' or 'color').
+     * @param signal The signal that provides the current string value for the theme class.
+     */
+    protected initializeAutoThemeClasses(prefix: string, signal: Signal<unknown | undefined>): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnBase<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgnBase<any>, never, never, { "unstyled": { "alias": "unstyled"; "required": false; "isSignal": true; }; "kind": { "alias": "kind"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "pt": { "alias": "pt"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** The control name backing a parent `NgnBaseSafe`, or `never` for a nameless base. */
+type ParentName<T> = T extends NgnBaseSafe<infer A> ? (A extends null ? never : A) : never;
+/**
+ * Union of the NON-projected dependency-slot class tokens declared on a control's
+ * theme template — i.e. the valid `[ptDep]` targets for parent control `Name`.
+ * Projected slots are excluded — they have no host element to bind `[ptDep]` to,
+ * so accepting them would type-check a no-op.
+ */
+type DepClass<Name extends ControlName$1> = ThemeTemplate$1[Name] extends ControlTemplate ? Exclude<ThemeTemplate$1[Name]['dependencies'][number], {
+    projected: true;
+}>['class'] : never;
+declare class NgnPt<T extends NgnBaseSafe<Name>, Name extends ControlName$1> {
+    /** The parent control whose theme/passthrough this element pulls from. */
+    readonly ptInt: _angular_core.InputSignal<T>;
+    /**
+     * Parent-scope class token(s) applied to this element, along with the parent's
+     * `pt` slice for those classes. Use for flat theme parts of the parent.
+     */
+    readonly ptClass: _angular_core.InputSignal<AppliedThemeClassCfg<ParentName<T>> | undefined>;
+    /**
+     * Dependency-slot class on the parent. Applies the parent's marker class
+     * (`{parentScope}-{ptDep}`) to this element and forwards the parent's
+     * `pt[ptDep]` slice into the nested control that lives on this element, so the
+     * nested control resolves it against its own theme.
+     */
+    readonly ptDep: _angular_core.InputSignal<DepClass<ParentName<T>> | undefined>;
+    /**
+     * The nested control hosted on THIS element (present when `ptDep` targets a
+     * control). `self: true` is essential: without it the injection climbs to an
+     * ancestor control (e.g. the parent that owns `[ptInt]`), and the forwarding
+     * effect would then overwrite the ancestor's `pt` instead of the child's.
+     */
+    private readonly _self;
+    /**
+     * Flat class engine for `ptClass`: applies the parent's scope class(es) and the
+     * matching `pt` slice to this element. A missing `ptClass` resolves to a no-op.
+     */
+    private readonly _classEngine;
+    /**
+     * Marker engine for `ptDep`: applies ONLY the parent's `{parentScope}-{ptDep}`
+     * class to this element (`applyPassthrough: false`). The forwarded slice is
+     * applied separately, through the nested control's own engine.
+     */
+    private readonly _markerEngine;
+    /** The parent's `pt` slice for the current `ptDep` slot, or `undefined`. */
+    private readonly _depSlice;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnPt<any, any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgnPt<any, any>, "[ptInt]", never, { "ptInt": { "alias": "ptInt"; "required": true; "isSignal": true; }; "ptClass": { "alias": "ptClass"; "required": false; "isSignal": true; }; "ptDep": { "alias": "ptDep"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class NgnPtEngine<T extends NgnBaseSafe<Name>, Name extends ControlName$1> {
+    private readonly pt;
+    private readonly ptClass;
+    private readonly _elementRef;
+    private readonly _destroyRef;
+    /** The passthrough values currently applied to the element, for teardown on destroy. */
+    private _currentAppliedPts;
+    private readonly classes;
+    private readonly _appliedPts;
+    constructor(pt: Signal<T> | T, ptClass: Signal<AppliedThemeClassCfg<T extends NgnBaseSafe<infer A> ? (A extends null ? never : A) : never>> | AppliedThemeClassCfg<T extends NgnBaseSafe<infer A> ? (A extends null ? never : A) : never>, options?: {
+        /**
+         * When `false`, the engine only toggles the resolved theme class(es) on the
+         * element and does NOT apply the control's `pt` slice (styles/attributes/
+         * classes/listeners) for those classes. Used for dependency-slot markers,
+         * where the forwarded passthrough is applied through the nested control's
+         * own engine rather than flatly on the host. Defaults to `true`.
+         */
+        applyPassthrough?: boolean;
+    });
+    private setNewPtValues;
+    private removePreviousPtValues;
+}
+
+type EventListenerMap = {
+    [K in keyof GlobalEventHandlersEventMap]: (event: GlobalEventHandlersEventMap[K]) => void;
+};
+type PassthroughValue = {
+    $attributes?: Record<string, string>;
+    $styles?: Partial<CSSStyleDeclaration>;
+    $classes?: string | string[];
+    $listeners?: Partial<EventListenerMap>;
+};
+type ThemeClassToPassthrough<T> = {
+    [K in keyof T]?: T[K] extends string ? PassthroughValue : ThemeClassToPassthrough<T[K]> & PassthroughValue;
+};
+type NgnPassthrough<T extends ControlName$1> = T extends null ? never : ThemeTemplate$1[T] extends ControlTemplate ? ThemeClassToPassthrough<ThemeClasses<ThemeTemplate$1[T]>> & PassthroughValue : never;
+type AnyNgnPassthrough = NgnPassthrough<any>;
+
+declare function setNgnInstance(element: HTMLElement, instance: AnyNgnBase): void;
+declare function getNgnInstance(element: HTMLElement): FullAnyNgnBase;
+declare function getNearestNgnInstance<T extends Type<Omit<AnyNgnBase, 'kind'>>>(element: HTMLElement, kind?: T): InstanceType<T> | null;
+declare function getNearestNgnInstanceSig<T extends Type<AnyNgnBase>>(element: HTMLElement, kind?: T): Signal<InstanceType<T> | null>;
+
+declare abstract class ValueControlBase<C extends ControlName, T> extends NgnBase<C> implements FormValueControl<T> {
+    /**
+     * The label for the control.
+     */
+    readonly label: _angular_core.InputSignal<string | null>;
+    /**
+     * Sets the `aria-labelledby` attribute on the control.
+     * @default null
+     */
+    readonly labelledBy: _angular_core.InputSignal<string | null>;
+    /**
+     * The ID for the control
+     * @default generateElementId()
+     */
+    readonly inputId: _angular_core.InputSignal<string>;
+    /**
+     * Explicitly apply invalid state styling
+     * @default false
+     */
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The value of the control.
+     */
+    readonly value: _angular_core.ModelSignal<T>;
+    /**
+     * Set the disabled state of the control.
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly touched: _angular_core.ModelSignal<boolean>;
+    readonly dirty: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ValueControlBase<any, any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ValueControlBase<any, any>, never, never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelledBy": { "alias": "labelledBy"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; }, never, never, true, never>;
+}
+
+export { NGN_CONTROL, NgnBase, NgnPt, NgnPtEngine, ValueControlBase, getNearestNgnInstance, getNearestNgnInstanceSig, getNgnInstance, provideSelf, setNgnInstance };
+export type { AnyNgnBase, AnyNgnPassthrough, DepClass, FullAnyNgnBase, NgnBaseSafe, NgnPassthrough, PassthroughValue };

package/types/ngneers-controls-breadcrumb.d.ts

@@ -0,0 +1,272 @@
+import * as _ngneers_controls_custom_types from '@ngneers/controls-custom-types';
+import { IconType } from '@ngneers/controls-custom-types';
+import * as _iconify_types from '@iconify/types';
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import * as _ngneers_signal_translate from '@ngneers/signal-translate';
+import * as _ngneers_controls_api_ng from '@ngneers/controls/api/ng';
+import * as _ngneers_controls_themes from '@ngneers/controls-themes';
+import { maybeCallback } from '@ngneers/controls/utils';
+import { NgnBase } from '@ngneers/controls/base';
+import { NgnActionItemFlat, NgnActionItem } from '@ngneers/controls/api';
+
+type BreadcrumbItem = NgnActionItemFlat<NgnActionItem>;
+type ItemTemplateType = {
+    $implicit: BreadcrumbItem;
+};
+type SeparatorTemplateType = {
+    $implicit: {
+        icon: IconType;
+    };
+};
+type OverflowTemplateType = {
+    $implicit: {
+        icon: IconType;
+        overflowingItems: BreadcrumbItem[];
+    };
+};
+
+declare abstract class BreadcrumbTemplates extends NgnBase<'breadcrumb'> {
+    private readonly _defaultItemTemplate;
+    private readonly _userItemTemplate;
+    /**
+     * Set a custom template for an item.
+     * Can also be set using an `<ng-template>` element with `#item` template reference variable.
+     */
+    readonly templateItem: _angular_core.InputSignal<TemplateRef<ItemTemplateType> | null>;
+    protected readonly itemTemplate: _angular_core.Signal<TemplateRef<ItemTemplateType>>;
+    private readonly _defaultSeparatorTemplate;
+    private readonly _userSeparatorTemplate;
+    /**
+     * Set a custom template for a separator.
+     * Can also be set using an `<ng-template>` element with `#separator` template reference variable.
+     */
+    readonly templateSeparator: _angular_core.InputSignal<TemplateRef<SeparatorTemplateType> | null>;
+    protected readonly separatorTemplate: _angular_core.Signal<TemplateRef<SeparatorTemplateType>>;
+    private readonly _defaultOverflowTemplate;
+    private readonly _userOverflowTemplate;
+    /**
+     * Set a custom template for the overflowing items.
+     * Can also be set using an `<ng-template>` element with `#overflow` template reference variable.
+     */
+    readonly templateOverflow: _angular_core.InputSignal<TemplateRef<OverflowTemplateType> | null>;
+    protected readonly overflowTemplate: _angular_core.Signal<TemplateRef<OverflowTemplateType>>;
+    /**
+     * Types for the breadcrumb templates.
+     */
+    readonly templateTypes: {
+        /**
+         * Type of the template variable for the item template.
+         */
+        item: ItemTemplateType;
+        separator: SeparatorTemplateType;
+        overflow: OverflowTemplateType;
+    } & {
+        $implicit: {
+            item: Partial<ItemTemplateType>;
+            separator: Partial<SeparatorTemplateType>;
+            overflow: Partial<OverflowTemplateType>;
+        };
+    };
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BreadcrumbTemplates, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<BreadcrumbTemplates, never, never, { "templateItem": { "alias": "templateItem"; "required": false; "isSignal": true; }; "templateSeparator": { "alias": "templateSeparator"; "required": false; "isSignal": true; }; "templateOverflow": { "alias": "templateOverflow"; "required": false; "isSignal": true; }; }, {}, ["_userItemTemplate", "_userSeparatorTemplate", "_userOverflowTemplate"], never, true, never>;
+}
+
+/**
+ * @category control
+ */
+declare class NgnBreadcrumb extends BreadcrumbTemplates {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"breadcrumb", ["root", "item", "item-clickable", "separator", "overflow"], readonly [{
+        readonly class: "item-view";
+        readonly template: _ngneers_controls_themes.ControlTemplate<"item-view", ["root", "item", "item-overflowing", "more-items", "more-items-hidden", "more-items-default", "hidden-separator"], readonly []>;
+    }, {
+        readonly class: "menu";
+        readonly template: _ngneers_controls_themes.ControlTemplate<"menu", ["root", "submenu", "item", "item-opened", "icon-children", "separator"], readonly [{
+            readonly class: "popover";
+            readonly template: _ngneers_controls_themes.ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
+        }]>;
+    }]>>;
+    protected readonly i18n: _ngneers_signal_translate.TranslationsSignal<{
+        calendar: {
+            today: string;
+            input: string;
+            selectYear: string;
+            selectMonth: string;
+            previousMonth: string;
+            nextMonth: string;
+            weekdays: {
+                monday: string;
+                tuesday: string;
+                wednesday: string;
+                thursday: string;
+                friday: string;
+                saturday: string;
+                sunday: string;
+            };
+            weekdaysShort: {
+                monday: string;
+                tuesday: string;
+                wednesday: string;
+                thursday: string;
+                friday: string;
+                saturday: string;
+                sunday: string;
+            };
+            months: {
+                january: string;
+                february: string;
+                march: string;
+                april: string;
+                may: string;
+                june: string;
+                july: string;
+                august: string;
+                september: string;
+                october: string;
+                november: string;
+                december: string;
+            };
+        };
+        editInplace: {
+            placeholder: string;
+            confirm: string;
+        };
+        filter: {
+            noFilter: string;
+            addCondition: string;
+            removeCondition: string;
+            operator: string;
+            value: string;
+            clear: string;
+            apply: string;
+            cancel: string;
+            matchModeLabel: string;
+            match: {
+                all: string;
+                any: string;
+                and: string;
+                or: string;
+            };
+            selected: string;
+            conditions: string;
+            operators: {
+                isEqual: string;
+                isNotEqual: string;
+                contains: string;
+                startsWith: string;
+                endsWith: string;
+                in: string;
+                isEmpty: string;
+                isNotEmpty: string;
+                greaterThan: string;
+                greaterThanOrEqual: string;
+                lessThan: string;
+                lessThanOrEqual: string;
+                after: string;
+                onOrAfter: string;
+                before: string;
+                onOrBefore: string;
+                isTrue: string;
+                isFalse: string;
+                custom: string;
+            };
+        };
+        splitter: {
+            handleLabel: string;
+        };
+        inputField: {
+            clearInput: string;
+        };
+        maskInput: {
+            roleDescription: string;
+            segmentRange: string;
+            optionSeparator: string;
+        };
+        drawer: {
+            close: string;
+        };
+        dialog: {
+            close: string;
+        };
+        chip: {
+            close: string;
+        };
+        breadcrumb: {
+            overflow: string;
+        };
+        toast: {
+            close: string;
+            region: string;
+        };
+        snackbar: {
+            close: string;
+            region: string;
+            severity: {
+                error: string;
+                warning: string;
+                success: string;
+                info: string;
+            };
+        };
+        upload: {
+            upload: string;
+            uploadNamed: string;
+            retryNamed: string;
+            cancelNamed: string;
+            removeNamed: string;
+            progressNamed: string;
+        };
+        select: {
+            filterOptions: string;
+        };
+        paginator: {
+            previousPage: string;
+            nextPage: string;
+        };
+        listBox: {
+            noItemsFound: string;
+        };
+        tree: {
+            noItemsFound: string;
+        };
+        table: {
+            selectAllRows: string;
+            selectRow: string;
+            sortedBy: string;
+            sortAscending: string;
+            sortDescending: string;
+            sortCleared: string;
+            selectedCount: string;
+            page: string;
+            resultCount: string;
+        };
+        state: {
+            loading: string;
+            success: string;
+            warning: string;
+            error: string;
+            cancelled: string;
+        };
+    }, "_">;
+    /**
+     * The breadcrumb entries to render, ordered from root to the current page.
+     * @see {@link BreadcrumbItem}
+     */
+    readonly items: _angular_core.InputSignal<BreadcrumbItem[]>;
+    /**
+     * Icon rendered between adjacent breadcrumb items.
+     * Falls back to the theme's default separator icon when unset.
+     */
+    readonly iconItemSeparator: _angular_core.InputSignal<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | undefined>;
+    /**
+     * Icon for the overflow menu trigger shown when items are collapsed to save space.
+     * Falls back to the theme's default overflow icon when unset.
+     */
+    readonly iconOverflow: _angular_core.InputSignal<_iconify_types.IconifyIcon | _ngneers_controls_custom_types.NgnIconEntry | undefined>;
+    protected readonly maybeCallback: typeof maybeCallback;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnBreadcrumb, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnBreadcrumb, "ngn-breadcrumb", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "iconItemSeparator": { "alias": "iconItemSeparator"; "required": false; "isSignal": true; }; "iconOverflow": { "alias": "iconOverflow"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { NgnBreadcrumb };
+export type { BreadcrumbItem, ItemTemplateType, OverflowTemplateType, SeparatorTemplateType };

package/types/ngneers-controls-button-group.d.ts

@@ -0,0 +1,46 @@
+import * as i0 from '@angular/core';
+import { Signal } from '@angular/core';
+import * as _ngneers_controls_api_ng from '@ngneers/controls/api/ng';
+import * as _ngneers_controls_themes from '@ngneers/controls-themes';
+import { NgnBase } from '@ngneers/controls/base';
+
+/**
+ * @category control
+ */
+declare class NgnButtonGroup extends NgnBase<'buttonGroup'> {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"button-group", ["root", "vertical", "horizontal"], readonly [{
+        readonly class: "button";
+        readonly template: _ngneers_controls_themes.ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly []>;
+        readonly projected: true;
+    }, {
+        readonly class: "toggle-button";
+        readonly template: _ngneers_controls_themes.ControlTemplate<"toggle-button", ["root", "invalid", "button", "label", "active", "placeholder", "placeholder-active"], readonly []>;
+        readonly projected: true;
+    }]>>;
+    private readonly _contentRef;
+    private readonly _content;
+    /**
+     * The roving-focus group on the inner container. Coordinates a single tab
+     * stop across the projected buttons: the active button gets `tabindex="0"`,
+     * the rest `-1`, and arrow keys move focus between them.
+     */
+    private readonly _roving;
+    private readonly _parentSize;
+    private readonly _contentSizes;
+    private readonly _contentWidth;
+    /**
+     * Defines the orientation of the button group.
+     * - 'auto' - The orientation is determined based on the available space.
+     * - 'horizontal' - The buttons are arranged horizontally. (Default for `auto` if enough space)
+     * - 'vertical' - The buttons are arranged vertically.
+     * @default 'auto'
+     */
+    readonly orientation: i0.InputSignal<"vertical" | "horizontal" | "auto">;
+    protected readonly appliedOrientation: Signal<"vertical" | "horizontal">;
+    private readonly _injector;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgnButtonGroup, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgnButtonGroup, "ngn-button-group", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, {}, ["_contentRef"], ["*"], true, never>;
+}
+
+export { NgnButtonGroup };

package/types/ngneers-controls-button.d.ts

@@ -0,0 +1,48 @@
+import * as _angular_core from '@angular/core';
+import { NgnBase } from '@ngneers/controls/base';
+import { maybeCallback } from '@ngneers/controls/utils';
+import { NgnActionButtonConfig } from '@ngneers/controls/api';
+import * as _ngneers_controls_api_ng from '@ngneers/controls/api/ng';
+import * as _ngneers_controls_themes from '@ngneers/controls-themes';
+
+declare class NgnActionButton<T> extends NgnBase<null> {
+    protected readonly theme: null;
+    /**
+     * The configuration describing the button: its label, icon, tooltip, value,
+     * and the action callback fired on click.
+     * @see {@link NgnActionButtonConfig}
+     */
+    readonly config: _angular_core.InputSignal<NgnActionButtonConfig<T>>;
+    /**
+     * Whether the inner button is displayed inline (line-height sized).
+     * @default false
+     */
+    readonly inline: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Emits the {@link config}'s `value` when the button is clicked, after its
+     * `action` callback has run.
+     */
+    readonly clicked: _angular_core.OutputEmitterRef<T>;
+    protected readonly maybeCallback: typeof maybeCallback;
+    protected click(event: PointerEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnActionButton<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnActionButton<any>, "ngn-action-button", never, { "config": { "alias": "config"; "required": true; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, never, true, never>;
+}
+
+/**
+ * @category control
+ */
+declare class NgnButton extends NgnBase<'button'> {
+    protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly []>>;
+    /**
+     * Whether the button is displayed inline.
+     * This will make the button height fit the current line height.
+     */
+    readonly inline: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    constructor();
+    protected afterLeave(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnButton, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgnButton, "button[ngnButton], a[ngnButton]", ["ngnButton"], { "inline": { "alias": "ngnButtonInline"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { NgnActionButton, NgnButton };