@koobiq/components 18.12.1 → 18.14.0

package/accordion/accordion.component.d.ts

@@ -1,5 +1,5 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { ElementRef, OnDestroy } from '@angular/core';
+import { AfterViewInit, ElementRef, OnDestroy } from '@angular/core';
 import { RdxAccordionType } from '@radix-ng/primitives/accordion';
 import * as i0 from "@angular/core";
 import * as i1 from "@radix-ng/primitives/accordion";
@@ -9,11 +9,11 @@ export declare enum KbqAccordionVariant {
     hug = "hug",
     hugSpaceBetween = "hugSpaceBetween"
 }
-export declare class KbqAccordion implements OnDestroy {
-    private focusMonitor;
-    private elementRef;
+export declare class KbqAccordion implements OnDestroy, AfterViewInit {
+    protected readonly focusMonitor: FocusMonitor;
+    protected readonly elementRef: ElementRef<any>;
     variant: KbqAccordionVariant | string;
-    constructor(focusMonitor: FocusMonitor, elementRef: ElementRef<HTMLElement>);
+    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAccordion, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqAccordion, "kbq-accordion, [kbq-accordion]", never, { "variant": { "alias": "variant"; "required": false; }; }, {}, never, ["*"], false, [{ directive: typeof i1.RdxAccordionRootDirective; inputs: { "type": "type"; "collapsible": "collapsible"; "disabled": "disabled"; "defaultValue": "defaultValue"; "value": "value"; }; outputs: { "onValueChange": "onValueChange"; }; }]>;

package/alert/alert-tokens.scss

@@ -58,16 +58,16 @@
     --kbq-alert-colored-contrast-container-background: var(--kbq-background-contrast-fade);
     --kbq-alert-colored-contrast-container-title: var(--kbq-foreground-contrast);
     --kbq-alert-colored-contrast-container-text: var(--kbq-foreground-contrast);
-    --kbq-alert-colored-error-container-background: var(--kbq-background-error-fade);
+    --kbq-alert-colored-error-container-background: var(--kbq-background-error-less);
     --kbq-alert-colored-error-container-title: var(--kbq-foreground-contrast);
     --kbq-alert-colored-error-container-text: var(--kbq-foreground-contrast);
-    --kbq-alert-colored-warning-container-background: var(--kbq-background-warning-fade);
+    --kbq-alert-colored-warning-container-background: var(--kbq-background-warning-less);
     --kbq-alert-colored-warning-container-title: var(--kbq-foreground-contrast);
     --kbq-alert-colored-warning-container-text: var(--kbq-foreground-contrast);
-    --kbq-alert-colored-success-container-background: var(--kbq-background-success-fade);
+    --kbq-alert-colored-success-container-background: var(--kbq-background-success-less);
     --kbq-alert-colored-success-container-title: var(--kbq-foreground-contrast);
     --kbq-alert-colored-success-container-text: var(--kbq-foreground-contrast);
-    --kbq-alert-colored-theme-container-background: var(--kbq-background-theme-fade);
+    --kbq-alert-colored-theme-container-background: var(--kbq-background-theme-less);
     --kbq-alert-colored-theme-container-title: var(--kbq-foreground-contrast);
     --kbq-alert-colored-theme-container-text: var(--kbq-foreground-contrast);
 }

package/breadcrumbs/breadcrumbs-tokens.scss

@@ -0,0 +1,9 @@
+:where(.kbq-breadcrumbs) {
+    --kbq-breadcrumb-item-horizontal-padding: var(--kbq-size-xs);
+    --kbq-breadcrumb-item-height: var(--kbq-size-3xl);
+    --kbq-breadcrumb-item-expand-horizontal-padding: var(--kbq-size-s);
+    --kbq-breadcrumb-expand-icon-color: var(--kbq-icon-contrast-fade);
+    --kbq-breadcrumb-item-border-radius: var(--kbq-size-xs);
+    --kbq-breadcrumb-item-icon-color: var(--kbq-icon-contrast-fade);
+    --kbq-breadcrumbs-gap: 0;
+}

package/breadcrumbs/breadcrumbs.d.ts

@@ -0,0 +1,117 @@
+import { AfterContentInit, InjectionToken, OnInit, Provider, QueryList, TemplateRef } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { KbqButtonStyles } from '@koobiq/components/button';
+import { KbqComponentColors, KbqDefaultSizes, PopUpPlacements } from '@koobiq/components/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@radix-ng/primitives/roving-focus";
+export type KbqBreadcrumbsConfiguration = {
+    /**
+     * Specifies the maximum number of breadcrumb items to display.
+     * - If a number is provided, only that many items will be shown.
+     * - If `null`, no limit is applied, and all breadcrumb items are displayed.
+     */
+    max: number | null;
+    size: KbqDefaultSizes;
+};
+/** Breadcrumbs options global configuration provider. */
+export declare const KBQ_BREADCRUMBS_CONFIGURATION: InjectionToken<KbqBreadcrumbsConfiguration>;
+/** Utility provider for `KBQ_BREADCRUMBS_CONFIGURATION`. */
+export declare const provideKbqBreadcrumbsConfiguration: (configuration: KbqBreadcrumbsConfiguration) => Provider;
+export declare class KbqBreadcrumbsSeparator {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqBreadcrumbsSeparator, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqBreadcrumbsSeparator, "ng-template[kbqBreadcrumbsSeparator]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Directive to style and configure buttons used as breadcrumb items.
+ * - Inherits focus management behavior from `RdxRovingFocusItemDirective`.
+ * - Optionally injects `KbqButton` to customize its style for breadcrumb usage.
+ */
+export declare class KbqBreadcrumbButton implements OnInit {
+    private readonly button;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqBreadcrumbButton, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqBreadcrumbButton, "[kbq-button][kbqBreadcrumb]", never, {}, {}, never, never, true, [{ directive: typeof i1.RdxRovingFocusItemDirective; inputs: {}; outputs: {}; }]>;
+}
+/**
+ * Directive provides a way to define a custom template for breadcrumb rendering, leveraging TemplateRef
+ *
+ */
+export declare class KbqBreadcrumbView {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqBreadcrumbView, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqBreadcrumbView, "[kbqBreadcrumbView]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Component represents an individual breadcrumb item with optional support for router navigation and styling.
+ */
+export declare class KbqBreadcrumbItem {
+    /**
+     * The text displayed for the breadcrumb item.
+     * This text will be shown if breadcrumb item is hidden in dropdown.
+     */
+    text: string;
+    /**
+     * Indicates whether the breadcrumb item is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Indicates whether the breadcrumb item is the current/active item.
+     * Defaults to `false`.
+     */
+    current: boolean;
+    /**
+     * A reference to a custom template provided for the breadcrumb item content.
+     * The template can be used to override the default appearance of the breadcrumb.
+     */
+    customTemplateRef: TemplateRef<any>;
+    /**
+     * An optional `RouterLink` instance for navigating to a specific route.
+     * Injected from the host element, if available and projecting to the hidden breadcrumb item in dropdown.
+     */
+    readonly routerLink: RouterLink | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqBreadcrumbItem, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqBreadcrumbItem, "kbq-breadcrumb-item", never, { "text": { "alias": "text"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "current": { "alias": "current"; "required": false; }; }, {}, ["customTemplateRef"], ["*"], true, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_current: unknown;
+}
+export declare class KbqBreadcrumbs implements AfterContentInit {
+    protected readonly configuration: KbqBreadcrumbsConfiguration;
+    /**
+     * Size of the breadcrumbs. Affects font size.
+     * Default value is taken from the global configuration.
+     */
+    size: KbqDefaultSizes;
+    /**
+     * Maximum number of visible breadcrumb items.
+     * Remaining items are collapsed into a dropdown if the total exceeds this value.
+     * Default value is taken from the global configuration.
+     */
+    max: number | null;
+    /**
+     * Indicates whether the breadcrumbs are disabled.
+     * When disabled, user interactions are blocked.
+     */
+    disabled: boolean;
+    protected readonly separator?: TemplateRef<any>;
+    protected readonly items: QueryList<KbqBreadcrumbItem>;
+    /**
+     * Ensures at least minimum number of breadcrumb items are shown.
+     *
+     * This prevents the appearance of unnecessary expand button that would hide only a single breadcrumb.
+     */
+    readonly minVisibleItems = 2;
+    private readonly destroyRef;
+    private readonly cdr;
+    protected readonly KbqComponentColors: typeof KbqComponentColors;
+    protected readonly KbqButtonStyles: typeof KbqButtonStyles;
+    protected readonly PopUpPlacements: typeof PopUpPlacements;
+    /** @docs-private */
+    protected get hiddenBreadcrumbItems(): KbqBreadcrumbItem[];
+    /** @docs-private */
+    protected get visibleBreadcrumbItems(): KbqBreadcrumbItem[];
+    ngAfterContentInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqBreadcrumbs, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqBreadcrumbs, "kbq-breadcrumbs,[kbq-breadcrumbs]", never, { "size": { "alias": "size"; "required": false; }; "max": { "alias": "max"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["separator", "items"], never, true, [{ directive: typeof i1.RdxRovingFocusGroupDirective; inputs: {}; outputs: {}; }]>;
+    static ngAcceptInputType_disabled: unknown;
+}

package/breadcrumbs/breadcrumbs.module.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./breadcrumbs";
+export declare class KbqBreadcrumbsModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqBreadcrumbsModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqBreadcrumbsModule, never, [typeof i1.KbqBreadcrumbs, typeof i1.KbqBreadcrumbItem, typeof i1.KbqBreadcrumbView, typeof i1.KbqBreadcrumbsSeparator, typeof i1.KbqBreadcrumbButton], [typeof i1.KbqBreadcrumbs, typeof i1.KbqBreadcrumbItem, typeof i1.KbqBreadcrumbView, typeof i1.KbqBreadcrumbsSeparator, typeof i1.KbqBreadcrumbButton]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqBreadcrumbsModule>;
+}

package/breadcrumbs/breadcrumbs.scss

@@ -0,0 +1,149 @@
+@use '../core/styles/common/tokens';
+@use '../core/styles/common/vendor-prefixes';
+
+.kbq-breadcrumbs {
+    display: flex;
+    align-items: center;
+    gap: var(--kbq-breadcrumbs-gap);
+
+    .kbq-breadcrumb-item {
+        &.kbq-button,
+        &.kbq-button-icon {
+            --kbq-button-size-height: var(--kbq-breadcrumb-item-height);
+            --kbq-button-size-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding);
+            --kbq-button-size-border-radius: var(--kbq-breadcrumb-item-border-radius);
+            --kbq-button-transparent-contrast-fade-on-foreground: var(--kbq-foreground-contrast-secondary);
+            --kbq-button-transparent-contrast-fade-on-right-icon: var(--kbq-breadcrumb-item-icon-color);
+            --kbq-button-transparent-contrast-fade-on-left-icon: var(--kbq-breadcrumb-item-icon-color);
+
+            &[aria-current='page'] {
+                --kbq-button-transparent-contrast-fade-on-states-disabled-foreground: var(--kbq-foreground-contrast);
+
+                &.kbq-disabled {
+                    --kbq-button-transparent-contrast-fade-on-states-disabled-left-icon: var(
+                        --kbq-breadcrumb-item-icon-color
+                    );
+                    --kbq-button-transparent-contrast-fade-on-states-disabled-right-icon: var(
+                        --kbq-breadcrumb-item-icon-color
+                    );
+                }
+            }
+        }
+
+        &.kbq-dropdown-trigger {
+            &.kbq-button,
+            &.kbq-button-icon {
+                &:not(.kbq-disabled) {
+                    &:hover,
+                    &.kbq-hover,
+                    &.cdk-keyboard-focused {
+                        .kbq-icon {
+                            --kbq-button-transparent-contrast-fade-on-left-icon: var(
+                                --kbq-states-icon-contrast-fade-hover
+                            );
+                            --kbq-button-transparent-contrast-fade-on-right-icon: var(
+                                --kbq-states-icon-contrast-fade-hover
+                            );
+                        }
+                    }
+
+                    &:active,
+                    &.kbq-active {
+                        .kbq-icon {
+                            --kbq-button-transparent-contrast-fade-on-left-icon: var(
+                                --kbq-states-icon-contrast-fade-active
+                            );
+                            --kbq-button-transparent-contrast-fade-on-right-icon: var(
+                                --kbq-states-icon-contrast-fade-active
+                            );
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .kbq-breadcrumb__expand {
+        &.kbq-button-icon {
+            --kbq-button-icon-size-horizontal-padding: var(--kbq-breadcrumb-item-expand-horizontal-padding);
+            --kbq-button-transparent-contrast-fade-on-left-icon: var(--kbq-breadcrumb-expand-icon-color);
+
+            .kbq-icon {
+                --kbq-breadcrumb-expand-icon-color: var(--kbq-icon-contrast-fade);
+            }
+
+            &:not(.kbq-disabled) {
+                &:hover,
+                &.kbq-hover,
+                &.cdk-keyboard-focused {
+                    .kbq-icon {
+                        --kbq-breadcrumb-expand-icon-color: var(--kbq-states-icon-contrast-fade-hover);
+                    }
+                }
+
+                &:active,
+                &.kbq-active {
+                    .kbq-icon {
+                        --kbq-breadcrumb-expand-icon-color: var(--kbq-states-icon-contrast-fade-active);
+                    }
+                }
+            }
+        }
+    }
+
+    .kbq-breadcrumb_current {
+        .kbq-button,
+        .kbq-button-icon {
+            &.kbq-button_transparent.kbq-contrast {
+                --kbq-button-transparent-contrast-fade-on-foreground: var(--kbq-foreground-contrast);
+            }
+        }
+
+        color: var(--kbq-foreground-contrast);
+    }
+
+    // typography
+    .kbq-breadcrumb__separator {
+        @include vendor-prefixes.user-select(none);
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-big);
+    }
+
+    &.kbq-breadcrumbs_compact {
+        .kbq-breadcrumb-item {
+            &.kbq-button,
+            &.kbq-button-icon {
+                --kbq-breadcrumb-item-height: var(--kbq-size-xxl);
+                @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
+            }
+        }
+
+        .kbq-breadcrumb__expand {
+            &.kbq-button-icon {
+                --kbq-breadcrumb-item-expand-horizontal-padding: var(--kbq-size-xxs);
+            }
+        }
+    }
+
+    &.kbq-breadcrumbs_normal {
+        .kbq-breadcrumb-item {
+            &.kbq-button,
+            &.kbq-button-icon {
+                --kbq-button-size-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding);
+
+                @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-big);
+            }
+        }
+    }
+
+    &.kbq-breadcrumbs_big {
+        .kbq-button,
+        .kbq-button-icon {
+            --kbq-button-size-height: var(--kbq-breadcrumb-item-height);
+            @include tokens.kbq-typography-level-to-styles-css-variables(typography, subheading);
+        }
+    }
+}
+
+.kbq-breadcrumb-item__link-behavior {
+    text-decoration: none;
+}

package/breadcrumbs/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/breadcrumbs/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './breadcrumbs';
+export * from './breadcrumbs.module';

package/button/button.component.d.ts

@@ -1,5 +1,5 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { AfterContentInit, ChangeDetectorRef, ElementRef, OnDestroy, QueryList, Renderer2 } from '@angular/core';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy, QueryList, Renderer2 } from '@angular/core';
 import { CanColor, CanColorCtor, CanDisable, HasTabIndexCtor, KbqTitleTextRef } from '@koobiq/components/core';
 import { KbqIcon } from '@koobiq/components/icon';
 import * as i0 from "@angular/core";
@@ -32,7 +32,7 @@ export declare class KbqButtonBase {
 }
 /** @docs-private */
 export declare const KbqButtonMixinBase: HasTabIndexCtor & CanColorCtor & typeof KbqButtonBase;
-export declare class KbqButton extends KbqButtonMixinBase implements OnDestroy, CanDisable, CanColor, KbqTitleTextRef {
+export declare class KbqButton extends KbqButtonMixinBase implements OnDestroy, AfterViewInit, CanDisable, CanColor, KbqTitleTextRef {
     private focusMonitor;
     private styler;
     hasFocus: boolean;
@@ -44,6 +44,7 @@ export declare class KbqButton extends KbqButtonMixinBase implements OnDestroy,
     set disabled(value: any);
     private _disabled;
     constructor(elementRef: ElementRef, focusMonitor: FocusMonitor, styler: KbqButtonCssStyler);
+    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     onFocus($event: any): void;
     onBlur(): void;

package/button-toggle/button-toggle.component.d.ts

@@ -1,5 +1,5 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit, QueryList } from '@angular/core';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit, QueryList } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { KbqButton } from '@koobiq/components/button';
 import { KbqIcon } from '@koobiq/components/icon';
@@ -103,7 +103,7 @@ export declare class KbqButtonToggleGroup implements ControlValueAccessor, OnIni
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqButtonToggleGroup, "kbq-button-toggle-group", ["kbqButtonToggleGroup"], { "vertical": { "alias": "vertical"; "required": false; }; "value": { "alias": "value"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "valueChange": "valueChange"; "change": "change"; }, ["buttonToggles"], never, false, never>;
 }
 /** Single button inside of a toggle group. */
-export declare class KbqButtonToggle implements OnInit, AfterContentInit, OnDestroy {
+export declare class KbqButtonToggle implements OnInit, AfterContentInit, AfterViewInit, OnDestroy {
     buttonToggleGroup: KbqButtonToggleGroup;
     private changeDetectorRef;
     private focusMonitor;
@@ -129,6 +129,7 @@ export declare class KbqButtonToggle implements OnInit, AfterContentInit, OnDest
     constructor(buttonToggleGroup: KbqButtonToggleGroup, changeDetectorRef: ChangeDetectorRef, focusMonitor: FocusMonitor, element: ElementRef);
     ngOnInit(): void;
     ngAfterContentInit(): void;
+    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     /** Focuses the button. */
     focus(): void;

package/checkbox/checkbox-tokens.scss

@@ -37,7 +37,7 @@
     --kbq-checkbox-error-default-border: var(--kbq-line-error);
     --kbq-checkbox-error-default-color: var(--kbq-icon-white);
     --kbq-checkbox-error-default-text: var(--kbq-foreground-contrast);
-    --kbq-checkbox-error-default-background: var(--kbq-states-background-error-less);
+    --kbq-checkbox-error-default-background: var(--kbq-background-error-less);
     --kbq-checkbox-error-default-caption: var(--kbq-foreground-contrast-secondary);
     --kbq-checkbox-error-states-hover-border: var(--kbq-line-error);
     --kbq-checkbox-error-states-hover-background: var(--kbq-states-background-error-fade-hover);
@@ -46,7 +46,7 @@
     --kbq-checkbox-error-states-checked-hover-border: transparent;
     --kbq-checkbox-error-states-checked-hover-background: var(--kbq-states-background-error-hover);
     --kbq-checkbox-error-states-focused-border: var(--kbq-line-error);
-    --kbq-checkbox-error-states-focused-background: var(--kbq-states-background-error-less);
+    --kbq-checkbox-error-states-focused-background: var(--kbq-background-error-less);
     --kbq-checkbox-error-states-focused-outline: 1px solid var(--kbq-states-line-focus-error);
     --kbq-checkbox-error-states-checked-focused-border: var(--kbq-states-line-focus-error);
     --kbq-checkbox-error-states-checked-focused-background: var(--kbq-background-error);

package/core/common-behaviors/index.d.ts

@@ -3,5 +3,6 @@ export { CanColor, CanColorCtor, KbqComponentColors, mixinColor, ThemePalette }
 export { KBQ_SANITY_CHECKS, KbqCommonModule } from './common-module';
 export { CanDisable, CanDisableCtor, mixinDisabled } from './disabled';
 export { CanUpdateErrorState, CanUpdateErrorStateCtor, mixinErrorState } from './error-state';
+export { KbqDefaultSizes } from './size';
 export { HasTabIndex, HasTabIndexCtor, mixinTabIndex } from './tabindex';
 export declare const KBQ_PARENT_ANIMATION_COMPONENT: InjectionToken<any>;

package/core/common-behaviors/size.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Defines the available size options for Koobiq components.
+ */
+export type KbqDefaultSizes = 'compact' | 'normal' | 'big';

package/core/locales/formatters.d.ts

@@ -215,3 +215,39 @@ export declare const zhCNFormattersData: {
         };
     };
 };
+export declare const tkTMFormattersData: {
+    formatters: {
+        number: {
+            rounding: {
+                separator: string;
+                groupSeparator: string;
+                thousand: string;
+                million: string;
+                billion: string;
+                trillion: string;
+            };
+        };
+    };
+    input: {
+        number: {
+            groupSeparator: string[];
+            fractionSeparator: string;
+        };
+    };
+    sizeUnits: {
+        defaultUnitSystem: string;
+        defaultPrecision: number;
+        unitSystems: {
+            SI: {
+                abbreviations: string[];
+                base: number;
+                power: number;
+            };
+            IEC: {
+                abbreviations: string[];
+                base: number;
+                power: number;
+            };
+        };
+    };
+};

package/core/locales/index.d.ts

@@ -3,6 +3,7 @@ export * from './es-LA';
 export * from './fa-IR';
 export * from './pt-BR';
 export * from './ru-RU';
+export * from './tk-TM';
 export * from './zh-CN';
 export * from './formatters';
 export * from './locale-service';

package/core/locales/locale-service.d.ts

@@ -479,6 +479,85 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
             searchPlaceholder: string;
         };
     };
+    'tk-TM': {
+        formatters: {
+            number: {
+                rounding: {
+                    separator: string;
+                    groupSeparator: string;
+                    thousand: string;
+                    million: string;
+                    billion: string;
+                    trillion: string;
+                };
+            };
+        };
+        input: {
+            number: {
+                groupSeparator: string[];
+                fractionSeparator: string;
+            };
+        };
+        sizeUnits: {
+            defaultUnitSystem: string;
+            defaultPrecision: number;
+            unitSystems: {
+                SI: {
+                    abbreviations: string[];
+                    base: number;
+                    power: number;
+                };
+                IEC: {
+                    abbreviations: string[];
+                    base: number;
+                    power: number;
+                };
+            };
+        };
+        select: {
+            hiddenItemsText: string;
+        };
+        datepicker: {
+            placeholder: string;
+            dateInput: string;
+        };
+        timepicker: {
+            placeholder: {
+                full: string;
+                short: string;
+            };
+        };
+        fileUpload: {
+            single: {
+                captionText: string;
+                browseLink: string;
+            };
+            multiple: {
+                captionText: string;
+                captionTextWhenSelected: string;
+                captionTextForCompactSize: string;
+                browseLink: string;
+                title: string;
+                gridHeaders: {
+                    file: string;
+                    size: string;
+                };
+            };
+        };
+        codeBlock: {
+            softWrapOnTooltip: string;
+            softWrapOffTooltip: string;
+            downloadTooltip: string;
+            copiedTooltip: string;
+            copyTooltip: string;
+            viewAllText: string;
+            viewLessText: string;
+            openExternalSystemTooltip: string;
+        };
+        timezone: {
+            searchPlaceholder: string;
+        };
+    };
 };
 export declare const KBQ_LOCALE_DATA: InjectionToken<any>;
 export declare const KBQ_LOCALE_SERVICE: InjectionToken<KbqLocaleService>;

package/core/locales/tk-TM.d.ts

@@ -0,0 +1,45 @@
+export declare const tkTMLocaleData: {
+    select: {
+        hiddenItemsText: string;
+    };
+    datepicker: {
+        placeholder: string;
+        dateInput: string;
+    };
+    timepicker: {
+        placeholder: {
+            full: string;
+            short: string;
+        };
+    };
+    fileUpload: {
+        single: {
+            captionText: string;
+            browseLink: string;
+        };
+        multiple: {
+            captionText: string;
+            captionTextWhenSelected: string;
+            captionTextForCompactSize: string;
+            browseLink: string;
+            title: string;
+            gridHeaders: {
+                file: string;
+                size: string;
+            };
+        };
+    };
+    codeBlock: {
+        softWrapOnTooltip: string;
+        softWrapOffTooltip: string;
+        downloadTooltip: string;
+        copiedTooltip: string;
+        copyTooltip: string;
+        viewAllText: string;
+        viewLessText: string;
+        openExternalSystemTooltip: string;
+    };
+    timezone: {
+        searchPlaceholder: string;
+    };
+};

package/core/option/_optgroup-theme.scss

@@ -1,17 +1,18 @@
-@use '../styles/common/tokens' as *;
+@use '../styles/common/tokens';
 
 @mixin kbq-optgroup-theme() {
     .kbq-optgroup-label {
-        color: var(--kbq-foreground-contrast);
+        --kbq-optgroup-label-color: var(--kbq-foreground-contrast-secondary);
+        color: var(--kbq-optgroup-label-color);
     }
 
     .kbq-disabled .kbq-optgroup-label {
-        color: var(--kbq-states-foreground-disabled);
+        --kbq-optgroup-label-color: var(--kbq-states-foreground-disabled);
     }
 }
 
 @mixin kbq-optgroup-typography() {
     .kbq-optgroup-label {
-        @include kbq-typography-level-to-styles-css-variables(typography, subheading);
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, caps-compact-strong);
     }
 }

package/core/option/optgroup.d.ts

@@ -6,6 +6,7 @@ export declare class KbqOptgroupBase {
 export declare const KbqOptgroupMixinBase: CanDisableCtor & typeof KbqOptgroupBase;
 /**
  * Component that is used to group instances of `kbq-option`.
+ * When options aren't provided as `ng-content`, used as a Group Header with styling.
  */
 export declare class KbqOptgroup extends KbqOptgroupMixinBase implements CanDisable {
     label: string;

package/core/option/optgroup.scss

@@ -4,7 +4,10 @@
 @use './optgroup-theme' as *;
 
 .kbq-optgroup-label {
-    padding-left: var(--kbq-size-m);
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding: var(--kbq-size-s) var(--kbq-size-l) var(--kbq-size-s) var(--kbq-size-m);
 
     @include vendor-prefixes.user-select(none);
     cursor: default;

package/core/option/option-tokens.scss

@@ -4,6 +4,7 @@
     --kbq-option-size-horizontal-padding: var(--kbq-size-m);
     --kbq-option-size-height: var(--kbq-size-3xl);
     --kbq-option-size-border-width: 2px;
+    --kbq-option-border-radius: var(--kbq-size-xs);
     /* LIST THEME TOKENS */
     @include list-tokens.list-theme-tokens;
 }

package/core/option/option.scss

@@ -4,6 +4,7 @@
 
 .kbq-option {
     @include common.kbq-list-item-base();
+    border-radius: var(--kbq-option-border-radius);
 
     &:not(.kbq-disabled) {
         cursor: pointer;