koobiq · lskramarov · Jul 10, 2026 · Jul 7, 2026 · Jul 7, 2026 · Jul 8, 2026
@@ -78,10 +78,16 @@ export const enUSLocaleData = {
             error: 'The search with such name already exists',
             errorHint: 'Could not save the filter. Try again or contact the administrator.',
             saveButton: 'Save',
-            cancelButton: 'Cancel'
+            cancelButton: 'Cancel',
+            actionsTooltip: 'Filter actions'
         },
         add: {
-            tooltip: 'Add filter'
+            tooltip: 'Add filter',
+            addedAnnouncement: '{{ name }} filter added'
+        },
+        refresher: {
+            refresh: 'Refresh',
+            settings: 'Refresh settings'
         },
         pipe: {
             clearButtonTooltip: 'Clear',

@@ -77,10 +77,16 @@ export const esLALocaleData = {
             error: 'Ya existe una búsqueda con ese nombre',
             errorHint: 'No se pudo guardar el filtro. Intente de nuevo o comuníquese con el administrador.',
             saveButton: 'Guardar',
-            cancelButton: 'Cancelar'
+            cancelButton: 'Cancelar',
+            actionsTooltip: 'Acciones de filtro'
         },
         add: {
-            tooltip: 'Agregar filtro'
+            tooltip: 'Agregar filtro',
+            addedAnnouncement: 'Filtro {{ name }} agregado'
+        },
+        refresher: {
+            refresh: 'Actualizar',
+            settings: 'Configuración de actualización'
         },
         pipe: {
             clearButtonTooltip: 'Borrar',

@@ -77,10 +77,16 @@ export const ptBRLocaleData = {
             error: 'A busca com esse nome já existe',
             errorHint: 'O filtro não pôde ser salvo. Tente de novo ou entre em contato com o administrador.',
             saveButton: 'Salvar',
-            cancelButton: 'Cancelar'
+            cancelButton: 'Cancelar',
+            actionsTooltip: 'Ações do filtro'
         },
         add: {
-            tooltip: 'Adicionar filtros'
+            tooltip: 'Adicionar filtros',
+            addedAnnouncement: 'Filtro {{ name }} adicionado'
+        },
+        refresher: {
+            refresh: 'Atualizar',
+            settings: 'Configurações de atualização'
         },
         pipe: {
             clearButtonTooltip: 'Apagar',

@@ -78,10 +78,16 @@ export const ruRULocaleData = {
             error: 'Поиск с таким названием уже существует',
             errorHint: 'Не удалось сохранить фильтр. Попробуйте снова или сообщите администратору.',
             saveButton: 'Сохранить',
-            cancelButton: 'Отмена'
+            cancelButton: 'Отмена',
+            actionsTooltip: 'Действия с фильтром'
         },
         add: {
-            tooltip: 'Добавить фильтр'
+            tooltip: 'Добавить фильтр',
+            addedAnnouncement: 'Фильтр {{ name }} добавлен'
+        },
+        refresher: {
+            refresh: 'Обновить',
+            settings: 'Настройки обновления'
         },
         pipe: {
             clearButtonTooltip: 'Очистить',

@@ -78,10 +78,16 @@ export const tkTMLocaleData = {
             error: 'Şeýle atly gözleg eýýäm bar',
             errorHint: 'Filtri ýazdyryp bolmady. Täzeden synanyň ýa-da administratora ýüz tutuň.',
             saveButton: 'Ýazdyr',
-            cancelButton: 'Ýatyr'
+            cancelButton: 'Ýatyr',
+            actionsTooltip: 'Filtr amallary'
         },
         add: {
-            tooltip: 'Filtr goş'
+            tooltip: 'Filtr goş',
+            addedAnnouncement: '{{ name }} filtri goşuldy'
+        },
+        refresher: {
+            refresh: 'Täzele',
+            settings: 'Täzeleme sazlamalary'
         },
         pipe: {
             clearButtonTooltip: 'Arassala',

@@ -6,6 +6,92 @@
     }
 }
 
+// Shared scroll height for the select/tree overlay panels rendered outside the bar.
+// Keeps the single magic value in one place (used by every select-family pipe panel).
+@mixin kbq-filter-bar-panel-content-max-height() {
+    max-height: 404px;
+}
+
+// Themable colour surfaces of a pipe. Kept out of the layout SCSS so every colour
+// lives behind a theme hook (they still resolve through the global semantic tokens).
+@mixin kbq-filter-bar-pipe-theme() {
+    .kbq-pipe {
+        .kbq-pipe__name {
+            color: var(--kbq-foreground-contrast-secondary);
+        }
+
+        .kbq-pipe__separator {
+            color: var(--kbq-line-contrast-less);
+        }
+
+        .kbq-select:not(:hover, .kbq-active),
+        .kbq-tree-select:not(:hover, .kbq-active),
+        .kbq-button:not(:hover, .kbq-active, [disabled]) {
+            & + .kbq-pipe-button:not(:hover, .kbq-active)::after {
+                background: var(--kbq-line-contrast-less);
+            }
+        }
+
+        &.kbq-pipe_disabled {
+            .kbq-pipe__name,
+            .kbq-pipe__value {
+                color: var(--kbq-states-foreground-disabled);
+            }
+        }
+    }
+
+    .kbq-pipe.kbq-pipe_removable,
+    .kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) {
+        .kbq-button.cdk-keyboard-focused::after {
+            background: var(--kbq-states-line-focus-theme);
+        }
+
+        .kbq-button-icon.cdk-keyboard-focused::after {
+            background: var(--kbq-states-line-focus-theme);
+        }
+    }
+
+    .kbq-pipe-tooltip__name {
+        color: var(--kbq-foreground-white-secondary);
+    }
+
+    .kbq-pipe-tooltip__value {
+        color: var(--kbq-foreground-white);
+    }
+}
+
+// Themable colour surfaces of a read-only pipe.
+@mixin kbq-filter-bar-readonly-theme() {
+    .kbq-pipe.kbq-pipe__readonly:not(.kbq-pipe_cleanable) {
+        & .kbq-button-icon.kbq-button_filled:not(:hover),
+        & .kbq-button.kbq-button_filled,
+        & .kbq-button.kbq-button_filled:hover {
+            background: var(--kbq-states-background-disabled);
+        }
+
+        & .kbq-pipe__name,
+        & .kbq-pipe__value {
+            color: var(--kbq-states-foreground-disabled);
+        }
+    }
+}
+
+// Themable colour surfaces of the filters list (the changed-and-saved warning dot and the
+// separator drawn between the trigger and its action button).
+@mixin kbq-filter-bar-filters-theme() {
+    .kbq-filters {
+        .kbq-button_changed-saved-filter::before {
+            border-color: var(--kbq-background-bg);
+
+            background: var(--kbq-icon-warning);
+        }
+
+        .kbq-button:not(:hover, .kbq-active) + .kbq-button_action:not(:hover, .kbq-active)::after {
+            background: var(--kbq-line-contrast-less);
+        }
+    }
+}
+
 @mixin _icon($left-icon, $right-icon) {
     .kbq-icon.kbq-empty {
         color: $left-icon;

@@ -1,6 +1,6 @@
 #### Example of adding a custom pipe
 
-<!-- example(filter-bar-complete-functions) -->
+<!-- example(filter-bar-custom-pipe) -->
 
 #### Example of multiple pipes with the same type
 

@@ -1,8 +1,7 @@
-import { Directive, inject } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Directive, effect, inject } from '@angular/core';
 import { KbqButton, KbqButtonStyles } from '@koobiq/components/button';
 import { KbqComponentColors } from '@koobiq/components/core';
-import { KbqFilterBar } from './filter-bar';
+import { KBQ_FILTER_BAR_HOST } from './filter-bar.types';
 import { KbqFilters } from './filters';
 
 @Directive({
@@ -14,17 +13,21 @@ import { KbqFilters } from './filters';
 })
 export class KbqFilterBarButton {
     private readonly button = inject(KbqButton);
-    /** KbqFilterBar instance */
-    private readonly filterBar = inject(KbqFilterBar);
+    /** KbqFilterBar host seam */
+    private readonly filterBar = inject(KBQ_FILTER_BAR_HOST);
     /** KbqFilters instance */
     protected readonly filters = inject(KbqFilters);
 
     constructor() {
-        this.filterBar.changes.pipe(takeUntilDestroyed()).subscribe(() => {
+        // Reflect the current filter's saved/changed state in the button style. Reading `filterBar.filter`
+        // (a signal-backed accessor) subscribes this effect, replacing the retired `changes` bus.
+        effect(() => {
+            const filter = this.filterBar.filter();
+
             this.button.kbqStyle = KbqButtonStyles.Outline;
             this.button.color = KbqComponentColors.ContrastFade;
 
-            if (this.filterBar.filter?.changed || this.filterBar.filter?.saved) {
+            if (filter?.changed || filter?.saved) {
                 this.button.kbqStyle = 'changed-filter';
                 this.button.color = KbqComponentColors.Empty;
             }

@@ -0,0 +1,6 @@
+.kbq-filter-bar {
+    /* Maximum width of a pipe / filters trigger before its label truncates. */
+    --kbq-filter-bar-pipe-max-width: 320px;
+    /* Minimum width reserved for the refresher control. */
+    --kbq-filter-bar-refresher-min-width: 64px;
+}
@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { KbqFilterBar } from './filter-bar';
 import { KbqFilterBarButton } from './filter-bar-button';
 import { kbqFilterBarPipesProvider } from './filter-bar.types';
-import { KbqFilterBarRefresher } from './filter-refresher';
+import { KbqFilterRefresher } from './filter-refresher';
 import { KbqFilterReset } from './filter-reset';
 import { KbqFilters } from './filters';
 import { KbqPipeAdd } from './pipe-add';
@@ -13,7 +13,7 @@ import { KbqPipeState } from './pipes/pipe-state';
 const COMPONENTS = [
     KbqFilterBar,
     KbqFilters,
-    KbqFilterBarRefresher,
+    KbqFilterRefresher,
     KbqFilterBarButton,
     KbqFilterReset,
     KbqPipeAdd,

@@ -15,7 +15,7 @@
         gap: var(--kbq-size-s);
 
         .kbq-button > .kbq-icon {
-            margin-right: var(--kbq-size-xxs);
+            margin-inline-end: var(--kbq-size-xxs);
         }
 
         & > .kbq-icon {
@@ -27,17 +27,23 @@
         display: flex;
         flex-direction: row;
 
-        margin-left: var(--kbq-size-3xl);
+        margin-inline-start: var(--kbq-size-3xl);
     }
 }
 
 .kbq-pipe__popover {
+    // Token is declared on the overlay panel itself so it resolves outside `.kbq-filter-bar`.
+    --kbq-filter-bar-popover-width: 320px;
+
     .kbq-popover__container {
-        min-width: 320px;
-        max-width: 320px;
+        min-width: var(--kbq-filter-bar-popover-width);
+        max-width: var(--kbq-filter-bar-popover-width);
     }
 
     .kbq-popover__content {
+        // Load-bearing `!important`: the text pipe sets `[defaultPaddings]="false"` (no base
+        // `_default-paddings` padding), but the custom-pipe docs example reuses this panel class with
+        // default paddings, where the base rule ties this one — `!important` keeps this padding winning.
         padding: var(--kbq-size-m) var(--kbq-size-m) 1px !important;
     }