@gravionlabs/helix-ui 22.2.2 → 22.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravionlabs/helix-ui",
-  "version": "22.2.2",
+  "version": "22.2.3",
   "description": "Helix UI: vanilla Angular components on the Helix design tokens — plain CSS, no runtime styling engine.",
   "license": "MIT",
   "keywords": [

package/styles.css

@@ -5983,6 +5983,39 @@
       transition: none;
     }
   }
+  /* the filter field above the list (same look as the multi-select one) */
+  .hx-select-header {
+    display: flex;
+    align-items: center;
+    padding: var(--h-multiselect-list-header-padding);
+  }
+
+  .hx-select-filter {
+    box-sizing: border-box;
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: var(--h-inputtext-padding-y) var(--h-inputtext-padding-x);
+    border: 1px solid var(--h-inputtext-border-color);
+    border-radius: var(--h-inputtext-border-radius);
+    background: var(--h-inputtext-background);
+    color: var(--h-inputtext-color);
+    font: inherit;
+    outline: 0 none;
+  }
+
+  .hx-select-filter:focus {
+    border-color: var(--h-inputtext-focus-border-color);
+  }
+
+  /* the results count, for screen readers only */
+  .hx-select-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
 
   /* skeleton */
   /*

package/types/gravionlabs-helix-ui.d.ts

@@ -4325,6 +4325,13 @@ export declare class HxSelect<V = unknown> implements ControlValueAccessor, Form
   readonly optionDisabled: import("@angular/core").InputSignal<Accessor<never, boolean>>;
   readonly placeholder: import("@angular/core").InputSignal<string>;
   readonly emptyMessage: import("@angular/core").InputSignal<string>;
+  /** A search field above the list that narrows the options (case-insensitive "contains"). */
+  readonly filter: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly filterPlaceholder: import("@angular/core").InputSignal<string>;
+  /** What the filter matches: a property name or accessor of an option; default the label. */
+  readonly filterBy: import("@angular/core").InputSignal<Accessor<never, string> | undefined>;
+  /** Shown when the filter matches nothing. */
+  readonly emptyFilterMessage: import("@angular/core").InputSignal<string>;
   readonly size: import("@angular/core").InputSignal<HxSelectSize>;
   readonly variant: import("@angular/core").InputSignal<HxSelectVariant>;
   readonly fluid: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
@@ -4346,8 +4353,12 @@ export declare class HxSelect<V = unknown> implements ControlValueAccessor, Form
   protected readonly positions: ConnectedPosition[];
   private readonly trigger;
   private readonly listbox;
+  private readonly filterField;
+  protected readonly query: import("@angular/core").WritableSignal<string>;
   protected readonly isDisabled: import("@angular/core").Signal<boolean>;
   protected readonly items: import("@angular/core").Signal<HxSelectItem<unknown>[]>;
+  protected readonly visibleItems: import("@angular/core").Signal<HxSelectItem<unknown>[]>;
+  protected readonly resultsLabel: import("@angular/core").Signal<string>;
   protected readonly selected: import("@angular/core").Signal<HxSelectItem<unknown> | undefined>;
   protected readonly canClear: import("@angular/core").Signal<boolean>;
   protected readonly selectedValues: import("@angular/core").Signal<unknown[]>;
@@ -4361,6 +4372,7 @@ export declare class HxSelect<V = unknown> implements ControlValueAccessor, Form
   protected show(): void;
   protected close(refocus?: boolean): void;
   protected onAttach(): void;
+  protected onFilterKeydown(event: KeyboardEvent): void;
   protected onTriggerKeydown(event: KeyboardEvent): void;
   protected onOverlayKeydown(event: KeyboardEvent): void;
   protected onOutsideClick(event: MouseEvent): void;
@@ -4399,6 +4411,26 @@ export declare class HxSelect<V = unknown> implements ControlValueAccessor, Form
       "required": false;
       "isSignal": true;
     };
+    "filter": {
+      "alias": "filter";
+      "required": false;
+      "isSignal": true;
+    };
+    "filterPlaceholder": {
+      "alias": "filterPlaceholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "filterBy": {
+      "alias": "filterBy";
+      "required": false;
+      "isSignal": true;
+    };
+    "emptyFilterMessage": {
+      "alias": "emptyFilterMessage";
+      "required": false;
+      "isSignal": true;
+    };
     "size": {
       "alias": "size";
       "required": false;