@genesislcap/foundation-ui 14.447.1 → 14.448.0

package/dist/dts/react.d.ts

@@ -64,7 +64,6 @@ import type { Radio as RadioWC } from './radio/radio';
 import type { SchedulerCronBuilder as SchedulerCronBuilderWC } from './scheduler-cron-builder/scheduler-cron-builder';
 import type { SchedulerTimezone as SchedulerTimezoneWC } from './scheduler-timezone/scheduler-timezone';
 import type { Scheduler as SchedulerWC } from './scheduler/scheduler';
-import type { SearchBarCombobox as SearchBarComboboxWC } from './search-bar/search-bar-combobox';
 import type { SearchBar as SearchBarWC } from './search-bar/search-bar';
 import type { SectionNavigator as SectionNavigatorWC } from './section-navigator/section-navigator';
 import type { SegmentedControl as SegmentedControlWC } from './segmented-control/segmented-control';
@@ -149,23 +148,23 @@ export declare const AiCriteriaSearch: React.ForwardRefExoticComponent<
 >;
 export type AiCriteriaSearchRef = AiCriteriaSearchWC;
 
-export declare const Accordion: React.ForwardRefExoticComponent<
+export declare const AiIndicator: React.ForwardRefExoticComponent<
   React.PropsWithChildren<
-    Omit<PublicOf<AccordionWC>, 'children' | 'style'> &
+    Omit<PublicOf<AiIndicatorWC>, 'children' | 'style'> &
     HTMLWCProps & {
     }
-  > & React.RefAttributes<AccordionWC>
+  > & React.RefAttributes<AiIndicatorWC>
 >;
-export type AccordionRef = AccordionWC;
+export type AiIndicatorRef = AiIndicatorWC;
 
-export declare const AiIndicator: React.ForwardRefExoticComponent<
+export declare const Accordion: React.ForwardRefExoticComponent<
   React.PropsWithChildren<
-    Omit<PublicOf<AiIndicatorWC>, 'children' | 'style'> &
+    Omit<PublicOf<AccordionWC>, 'children' | 'style'> &
     HTMLWCProps & {
     }
-  > & React.RefAttributes<AiIndicatorWC>
+  > & React.RefAttributes<AccordionWC>
 >;
-export type AiIndicatorRef = AiIndicatorWC;
+export type AccordionRef = AccordionWC;
 
 export declare const Anchor: React.ForwardRefExoticComponent<
   React.PropsWithChildren<
@@ -685,16 +684,6 @@ export declare const SchedulerTimezone: React.ForwardRefExoticComponent<
 >;
 export type SchedulerTimezoneRef = SchedulerTimezoneWC;
 
-export declare const SearchBarCombobox: React.ForwardRefExoticComponent<
-  React.PropsWithChildren<
-    Omit<PublicOf<SearchBarComboboxWC>, 'children' | 'style'> &
-    HTMLWCProps & {
-      onInputdeleted?: (event: CustomEvent<unknown>) => void;
-    }
-  > & React.RefAttributes<SearchBarComboboxWC>
->;
-export type SearchBarComboboxRef = SearchBarComboboxWC;
-
 export declare const SearchBar: React.ForwardRefExoticComponent<
   React.PropsWithChildren<
     Omit<PublicOf<SearchBarWC>, 'children' | 'style'> &

package/dist/dts/search-bar/search-bar-combobox.d.ts

@@ -1,12 +1,11 @@
 import { Combobox } from '@microsoft/fast-components';
-/**
- * @tagname %%prefix%%-search-bar-combobox
- *
- * @fires change - Fired when the combobox value changes
- * @fires inputdeleted - Fired when the input is cleared by the user
- */
 export declare class SearchBarCombobox extends Combobox {
     minlength: number;
+    /**
+     * When true, the user cannot type a new search term (e.g. all fields already have chips).
+     * @internal
+     */
+    inputLocked: boolean;
     private previousLength;
     private changeListener;
     connectedCallback(): void;

package/dist/dts/search-bar/search-bar-combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search-bar-combobox.d.ts","sourceRoot":"","sources":["../../../src/search-bar/search-bar-combobox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAOtD;;;;;GAKG;AACH,qBAAa,iBAAkB,SAAQ,QAAQ;IACvC,SAAS,EAAE,MAAM,CAA0B;IAEjD,OAAO,CAAC,cAAc,CAAc;IAEpC,OAAO,CAAC,cAAc,CAEpB;IAEF,iBAAiB;IAKjB,oBAAoB,IAAI,IAAI;IAK5B,YAAY,CAAC,CAAC,EAAE,GAAG,GAAG,OAAO,GAAG,IAAI;IAiB7B,YAAY,CAAC,CAAC,EAAE,aAAa;IA0B7B,cAAc,CAAC,CAAC,EAAE,KAAK,GAAG,aAAa,GAAG,OAAO,GAAG,IAAI;IAoC/D,YAAY,CAAC,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,IAAI;IAW3C,WAAW;CAWZ;AAED,eAAO,MAAM,wCAAwC,EAAE,cAGtD,CAAC;AAEF,eAAO,MAAM,8BAA8B,IAAK,CAAC;AAEjD;;;;;;GAMG;AACH,eAAO,MAAM,2BAA2B,iUAMtC,CAAC"}
+{"version":3,"file":"search-bar-combobox.d.ts","sourceRoot":"","sources":["../../../src/search-bar/search-bar-combobox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AA0BtD,qBAAa,iBAAkB,SAAQ,QAAQ;IACvC,SAAS,EAAE,MAAM,CAA0B;IAEjD;;;OAGG;IACS,WAAW,EAAE,OAAO,CAAC;IAEjC,OAAO,CAAC,cAAc,CAAc;IAEpC,OAAO,CAAC,cAAc,CAEpB;IAEF,iBAAiB;IAKjB,oBAAoB,IAAI,IAAI;IAK5B,YAAY,CAAC,CAAC,EAAE,GAAG,GAAG,OAAO,GAAG,IAAI;IAiB7B,YAAY,CAAC,CAAC,EAAE,aAAa;IA0B7B,cAAc,CAAC,CAAC,EAAE,KAAK,GAAG,aAAa,GAAG,OAAO,GAAG,IAAI;IA6C/D,YAAY,CAAC,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,IAAI;IAkB3C,WAAW;CAWZ;AAED,eAAO,MAAM,wCAAwC,EAAE,cAGtD,CAAC;AAEF,eAAO,MAAM,8BAA8B,IAAK,CAAC;AAEjD;;;;;;GAMG;AACH,eAAO,MAAM,2BAA2B,iUAMtC,CAAC"}

package/dist/dts/search-bar/search-bar-combobox.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search-bar-combobox.styles.d.ts","sourceRoot":"","sources":["../../../src/search-bar/search-bar-combobox.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EACV,wBAAwB,EACxB,2BAA2B,EAC5B,MAAM,4BAA4B,CAAC;AAGpC,eAAO,MAAM,iCAAiC,GAC5C,SAAS,wBAAwB,EACjC,YAAY,2BAA2B,KACtC,aAsBF,CAAC"}
+{"version":3,"file":"search-bar-combobox.styles.d.ts","sourceRoot":"","sources":["../../../src/search-bar/search-bar-combobox.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EACV,wBAAwB,EACxB,2BAA2B,EAC5B,MAAM,4BAA4B,CAAC;AAGpC,eAAO,MAAM,iCAAiC,GAC5C,SAAS,wBAAwB,EACjC,YAAY,2BAA2B,KACtC,aAqCF,CAAC"}

package/dist/dts/search-bar/search-bar.d.ts

@@ -17,12 +17,43 @@ export declare class SearchBar extends FoundationElement {
     position: Position;
     placeholder: string;
     disabled: boolean;
+    /**
+     * @attr clear-button - when true, shows the end clear control when there are chips or typed text. When false, use {@link SearchBar.clear} or {@link SearchBar.clearSearch} to reset programmatically.
+     * @default true
+     */
+    clearButton: boolean;
     loading: boolean;
     selectedOptions: SelectedOption[];
     filteredOptions: AvailableOption[];
     selectedOptionsDiv: HTMLDivElement;
+    /**
+     * Clears all search chips and the current input, and emits `selectionChange` with an empty array.
+     * @public
+     */
     clear(): void;
+    /**
+     * Alias for {@link SearchBar.clear}.
+     * @public
+     */
     clearSearch(): void;
+    /**
+     * @internal
+     */
+    get showClearAffordance(): boolean;
+    /**
+     * True when every configured search field already has a chip (one term per field).
+     * @internal
+     */
+    get allSearchFieldsUsed(): boolean;
+    /**
+     * Evaluates whether an option is currently selectable.
+     * Falls back to default behavior when no custom `isEnabled` is provided.
+     * @internal
+     */
+    isOptionEnabled(option: AvailableOption): boolean;
+    selectedOptionsChanged(): void;
+    optionsChanged(): void;
+    private applySearchInputLock;
     inputdeleted(): void;
     changeHandler(): void;
     pasteHandler(event: ClipboardEvent): void;

package/dist/dts/search-bar/search-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search-bar.d.ts","sourceRoot":"","sources":["../../../src/search-bar/search-bar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAG1D,OAAO,EACL,eAAe,EACf,cAAc,EAGf,MAAM,oBAAoB,CAAC;AAE5B;;;;GAIG;AACH,qBAAa,SAAU,SAAQ,iBAAiB;IACvC,QAAQ,EAAE,iBAAiB,CAAC;IACvB,mBAAmB,MAAC;IAEpB,OAAO,EAAE,eAAe,EAAE,CAAC;IAE3B,UAAU,EAAE,MAAM,CAAM;IAE9B,UAAU,EAAE,MAAM,CAAa;IAC/B,SAAS,EAAE,MAAM,CAAoB;IACrC,QAAQ,EAAE,QAAQ,CAAkB;IAEpC,WAAW,EAAE,MAAM,CAA4B;IAC/C,QAAQ,EAAE,OAAO,CAAC;IAEZ,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,cAAc,EAAE,CAAM;IACvC,eAAe,EAAE,eAAe,EAAE,CAAC;IAExC,kBAAkB,EAAE,cAAc,CAAC;IAEnC,KAAK;IAML,WAAW,IAAI,IAAI;IAInB,YAAY;IAMZ,aAAa;IAyCb,YAAY,CAAC,KAAK,EAAE,cAAc;IAclC,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IAM7C,cAAc,CAAC,MAAM,EAAE,GAAG;IAKpB,YAAY;IASzB,OAAO,CAAC,qBAAqB;IAU7B,OAAO,CAAC,kBAAkB,CAExB;IAEF,OAAO,CAAC,wBAAwB,CAQ9B;CACH;AAGD,eAAO,MAAM,gCAAgC,EAAE,cAA0B,CAAC;AAE1E,eAAO,MAAM,sBAAsB,IAAK,CAAC;AAEzC;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;oBAM9B,CAAC"}
+{"version":3,"file":"search-bar.d.ts","sourceRoot":"","sources":["../../../src/search-bar/search-bar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAG1D,OAAO,EACL,eAAe,EACf,cAAc,EAGf,MAAM,oBAAoB,CAAC;AAE5B;;;;GAIG;AACH,qBAAa,SAAU,SAAQ,iBAAiB;IACvC,QAAQ,EAAE,iBAAiB,CAAC;IACvB,mBAAmB,MAAC;IAEpB,OAAO,EAAE,eAAe,EAAE,CAAC;IAE3B,UAAU,EAAE,MAAM,CAAM;IAE9B,UAAU,EAAE,MAAM,CAAa;IAC/B,SAAS,EAAE,MAAM,CAAoB;IACrC,QAAQ,EAAE,QAAQ,CAAkB;IAEpC,WAAW,EAAE,MAAM,CAA4B;IAC/C,QAAQ,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACmD,WAAW,EAAE,OAAO,CAAQ;IAEtE,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,cAAc,EAAE,CAAM;IACvC,eAAe,EAAE,eAAe,EAAE,CAAC;IAExC,kBAAkB,EAAE,cAAc,CAAC;IAE1C;;;OAGG;IACI,KAAK;IAUZ;;;OAGG;IACI,WAAW,IAAI,IAAI;IAI1B;;OAEG;IACH,IAAI,mBAAmB,IAAI,OAAO,CAMjC;IAED;;;OAGG;IACH,IAAI,mBAAmB,IAAI,OAAO,CAOjC;IAED;;;;OAIG;IACH,eAAe,CAAC,MAAM,EAAE,eAAe,GAAG,OAAO;IAUjD,sBAAsB;IAItB,cAAc;IAId,OAAO,CAAC,oBAAoB;IAarB,YAAY;IAMZ,aAAa;IAyCb,YAAY,CAAC,KAAK,EAAE,cAAc;IAkBlC,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IAM7C,cAAc,CAAC,MAAM,EAAE,GAAG;IAKpB,YAAY;IAazB,OAAO,CAAC,qBAAqB;IAU7B,OAAO,CAAC,kBAAkB,CAExB;IAEF,OAAO,CAAC,wBAAwB,CAQ9B;CACH;AAGD,eAAO,MAAM,gCAAgC,EAAE,cAA0B,CAAC;AAE1E,eAAO,MAAM,sBAAsB,IAAK,CAAC;AAEzC;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;oBAM9B,CAAC"}

package/dist/dts/search-bar/search-bar.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search-bar.styles.d.ts","sourceRoot":"","sources":["../../../src/search-bar/search-bar.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,yBAAyB,iDA6FrC,CAAC"}
+{"version":3,"file":"search-bar.styles.d.ts","sourceRoot":"","sources":["../../../src/search-bar/search-bar.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,yBAAyB,iDA4ErC,CAAC"}

package/dist/dts/search-bar/search-bar.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search-bar.template.d.ts","sourceRoot":"","sources":["../../../src/search-bar/search-bar.template.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,eAAO,MAAM,SAAS,GAAI,aAAc,WAMvC,CAAC;AAEF,eAAO,MAAM,QAAQ,cAGd,CAAC;AAER,eAAO,MAAM,oBAAoB,GAAI,QAAQ,MAAM,mEA0FlD,CAAC;AAEF,eAAO,MAAM,2BAA2B,gEAEvC,CAAC"}
+{"version":3,"file":"search-bar.template.d.ts","sourceRoot":"","sources":["../../../src/search-bar/search-bar.template.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,eAAO,MAAM,SAAS,GAAI,aAAc,WAMvC,CAAC;AAEF,eAAO,MAAM,QAAQ,cAGd,CAAC;AAER,eAAO,MAAM,oBAAoB,GAAI,QAAQ,MAAM,mEA8FlD,CAAC;AAEF,eAAO,MAAM,2BAA2B,gEAEvC,CAAC"}

package/dist/dts/search-bar/search-bar.types.d.ts

@@ -15,7 +15,7 @@ export type AvailableOption<T extends string = string> = {
     label: (searchTerm: string) => string;
     resourceType?: ResourceType;
     createCriteria: CriteriaCreator;
-    isEnabled: (searchTerm: string, selectedOptions: SelectedOption[]) => boolean;
+    isEnabled?: (searchTerm: string, selectedOptions: SelectedOption[], minLength?: number) => boolean;
 };
 export declare const getCriteriaBuilder: CriteriaCreator;
 export {};

package/dist/dts/search-bar/search-bar.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search-bar.types.d.ts","sourceRoot":"","sources":["../../../src/search-bar/search-bar.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAG7D,KAAK,eAAe,GAAG,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;AAEpF,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,eAAO,MAAM,gBAAgB,IAAI,CAAC;AAClC,eAAO,MAAM,sBAAsB,IAAI,CAAC;AAExC,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IACtD,KAAK,EAAE,CAAC,CAAC;IACT,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,cAAc,EAAE,eAAe,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IACvD,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,cAAc,EAAE,eAAe,CAAC;IAChC,SAAS,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,eAAe,EAAE,cAAc,EAAE,KAAK,OAAO,CAAC;CAC/E,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,eAUhC,CAAC"}
+{"version":3,"file":"search-bar.types.d.ts","sourceRoot":"","sources":["../../../src/search-bar/search-bar.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAG7D,KAAK,eAAe,GAAG,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;AAEpF,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,eAAO,MAAM,gBAAgB,IAAI,CAAC;AAClC,eAAO,MAAM,sBAAsB,IAAI,CAAC;AAExC,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IACtD,KAAK,EAAE,CAAC,CAAC;IACT,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,cAAc,EAAE,eAAe,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IACvD,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,cAAc,EAAE,eAAe,CAAC;IAChC,SAAS,CAAC,EAAE,CACV,UAAU,EAAE,MAAM,EAClB,eAAe,EAAE,cAAc,EAAE,EACjC,SAAS,CAAC,EAAE,MAAM,KACf,OAAO,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,eAUhC,CAAC"}

package/dist/esm/search-bar/search-bar-combobox.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { Combobox } from '@microsoft/fast-components';
-import { attr } from '@microsoft/fast-element';
+import { attr, observable } from '@microsoft/fast-element';
 import { foundationSearchBarComboboxStyles } from './search-bar-combobox.styles';
 import { foundationSearchBarComboboxTemplate } from './search-bar-combobox.template';
 import { COMBO_INPUT_MIN_LENGTH } from './search-bar.types';
@@ -10,6 +10,18 @@ import { COMBO_INPUT_MIN_LENGTH } from './search-bar.types';
  * @fires change - Fired when the combobox value changes
  * @fires inputdeleted - Fired when the input is cleared by the user
  */
+const INPUT_LOCK_ALLOWED_KEYS = new Set([
+    'Backspace',
+    'Delete',
+    'Tab',
+    'Escape',
+    'ArrowUp',
+    'ArrowDown',
+    'ArrowLeft',
+    'ArrowRight',
+    'Home',
+    'End',
+]);
 export class SearchBarCombobox extends Combobox {
     constructor() {
         super(...arguments);
@@ -70,6 +82,14 @@ export class SearchBarCombobox extends Combobox {
     }
     keydownHandler(e) {
         const key = e.key;
+        if (this.inputLocked) {
+            const isModifier = e.ctrlKey || e.metaKey || e.altKey;
+            const isAllowed = INPUT_LOCK_ALLOWED_KEYS.has(key) || isModifier;
+            if (!isAllowed) {
+                e.preventDefault();
+                return false;
+            }
+        }
         switch (key) {
             case 'ArrowUp':
             case 'ArrowDown': {
@@ -103,6 +123,13 @@ export class SearchBarCombobox extends Combobox {
         }
     }
     inputHandler(e) {
+        if (this.inputLocked) {
+            this.control.value = '';
+            this.value = '';
+            this.open = false;
+            e.stopImmediatePropagation();
+            return;
+        }
         if (this.control.value.length >= this.minlength) {
             this.open = true;
         }
@@ -128,6 +155,9 @@ export class SearchBarCombobox extends Combobox {
 __decorate([
     attr
 ], SearchBarCombobox.prototype, "minlength", void 0);
+__decorate([
+    observable
+], SearchBarCombobox.prototype, "inputLocked", void 0);
 export const foundationSearchBarComboboxShadowOptions = {
     delegatesFocus: true,
     mode: 'open',

package/dist/esm/search-bar/search-bar-combobox.styles.js

@@ -23,4 +23,19 @@ export const foundationSearchBarComboboxStyles = (context, definition) => css `
     min-width: 150px;
     max-width: 169px;
   }
+
+  .input-locked .control,
+  :host(.input-locked) .control {
+    width: 0;
+    min-width: 0;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    flex: 0;
+  }
+
+  .input-locked .selected-value,
+  :host(.input-locked) .selected-value {
+    display: none;
+  }
 `;

package/dist/esm/search-bar/search-bar-combobox.template.js

@@ -4,7 +4,7 @@ export const foundationSearchBarComboboxTemplate = (context, definition) => html
   <template
     aria-disabled="${(x) => x.ariaDisabled}"
     autocomplete="${(x) => x.autocomplete}"
-    class="${(x) => (x.open ? 'open' : '')} ${(x) => (x.disabled ? 'disabled' : '')} ${(x) => x.position} body"
+    class="${(x) => (x.open ? 'open' : '')} ${(x) => (x.disabled ? 'disabled' : '')} ${(x) => x.position} ${(x) => (x.inputLocked ? 'input-locked' : '')} body"
     ?open="${(x) => x.open}"
     tabindex="${(x) => (!x.disabled ? '0' : null)}"
     @click="${(x, c) => x.clickHandler(c.event)}"

package/dist/esm/search-bar/search-bar.js

@@ -18,6 +18,11 @@ export class SearchBar extends FoundationElement {
         this.minlength = INPUT_MIN_LENGTH;
         this.position = Position.BELOW;
         this.placeholder = 'Start typing to search';
+        /**
+         * @attr clear-button - when true, shows the end clear control when there are chips or typed text. When false, use {@link SearchBar.clear} or {@link SearchBar.clearSearch} to reset programmatically.
+         * @default true
+         */
+        this.clearButton = true;
         this.selectedOptions = [];
         this.normalizeDelimiter = (inputString) => {
             return inputString.trim().replace(/\t|\r\n|\n|\r|,/g, ' ');
@@ -28,14 +33,78 @@ export class SearchBar extends FoundationElement {
                 : previousText.concat(newText);
         };
     }
+    /**
+     * Clears all search chips and the current input, and emits `selectionChange` with an empty array.
+     * @public
+     */
     clear() {
         this.selectedOptions = [];
-        this.combobox.currentValue = '';
+        this.searchTerm = '';
+        if (this.combobox) {
+            this.combobox.currentValue = '';
+            this.combobox.value = '';
+        }
         this.$emit('selectionChange', []);
     }
+    /**
+     * Alias for {@link SearchBar.clear}.
+     * @public
+     */
     clearSearch() {
         this.clear();
     }
+    /**
+     * @internal
+     */
+    get showClearAffordance() {
+        var _a, _b, _c;
+        if (!this.clearButton) {
+            return false;
+        }
+        const typed = ((_c = (_a = this.searchTerm) !== null && _a !== void 0 ? _a : (_b = this.combobox) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : '').trim();
+        return this.selectedOptions.length > 0 || typed.length > 0;
+    }
+    /**
+     * True when every configured search field already has a chip (one term per field).
+     * @internal
+     */
+    get allSearchFieldsUsed() {
+        var _a;
+        if (!((_a = this.options) === null || _a === void 0 ? void 0 : _a.length)) {
+            return false;
+        }
+        return this.options.every((option) => this.selectedOptions.some((selected) => selected.field === option.field));
+    }
+    /**
+     * Evaluates whether an option is currently selectable.
+     * Falls back to default behavior when no custom `isEnabled` is provided.
+     * @internal
+     */
+    isOptionEnabled(option) {
+        if (option.isEnabled) {
+            return option.isEnabled(this.searchTerm, this.selectedOptions, this.minlength);
+        }
+        return (this.searchTerm.length >= this.minlength &&
+            !this.selectedOptions.some((selected) => selected.field === option.field));
+    }
+    selectedOptionsChanged() {
+        this.applySearchInputLock();
+    }
+    optionsChanged() {
+        this.applySearchInputLock();
+    }
+    applySearchInputLock() {
+        if (!this.combobox) {
+            return;
+        }
+        if (this.allSearchFieldsUsed) {
+            this.searchTerm = '';
+            this.combobox.value = '';
+            this.combobox.currentValue = '';
+            this.combobox.open = false;
+            this.filteredOptions = [];
+        }
+    }
     inputdeleted() {
         if (this.selectedOptions.length > 0) {
             this.unselectOption(this.selectedOptions[this.selectedOptions.length - 1]);
@@ -70,6 +139,10 @@ export class SearchBar extends FoundationElement {
     }
     pasteHandler(event) {
         var _a;
+        if (this.allSearchFieldsUsed) {
+            event.preventDefault();
+            return;
+        }
         this.loading = true;
         const pastedText = event.clipboardData.getData('text/plain');
         const formattedText = this.normalizeDelimiter(pastedText);
@@ -93,6 +166,10 @@ export class SearchBar extends FoundationElement {
     }
     inputHandler() {
         return __awaiter(this, void 0, void 0, function* () {
+            if (this.allSearchFieldsUsed) {
+                this.applySearchInputLock();
+                return;
+            }
             this.loading = true;
             this.searchTerm = this.combobox.value;
             if (this.combobox.value.length >= this.minlength) {
@@ -129,6 +206,9 @@ __decorate([
 __decorate([
     attr
 ], SearchBar.prototype, "disabled", void 0);
+__decorate([
+    attr({ attribute: 'clear-button', mode: 'boolean' })
+], SearchBar.prototype, "clearButton", void 0);
 __decorate([
     observable
 ], SearchBar.prototype, "loading", void 0);

package/dist/esm/search-bar/search-bar.styles.js

@@ -73,23 +73,6 @@ export const foundationSearchBarStyles = css `
     justify-content: center;
   }
 
-  .tooltip {
-    position: absolute;
-    z-index: 999;
-  }
-
-  .tooltip::part(tooltip) {
-    background-color: rgb(18 18 18 / 100%);
-    border: 1px solid #2e3339;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    box-shadow: 0 4px 10px rgb(0 0 0 / 25%);
-    font-size: 10px;
-    color: #f1f1f1;
-    height: 26px;
-  }
-
   .close-icon {
     color: var(--accent-fill-rest);
   }

package/dist/esm/search-bar/search-bar.template.js

@@ -1,4 +1,4 @@
-import { html, ref, repeat, slotted } from '@microsoft/fast-element';
+import { html, ref, repeat, slotted, when } from '@microsoft/fast-element';
 import { whitespaceFilter } from '@microsoft/fast-foundation';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { getPrefix } from '../utils';
@@ -30,6 +30,7 @@ export const getPrefixedSearchBar = (prefix) => html `
     position="${(x) => x.position}"
     placeholder=${(x) => x.placeholder}
     disabled=${(x) => x.disabled}
+    :inputLocked="${(x) => x.allSearchFieldsUsed}"
     autocomplete="none"
     minlength=${(x) => x.minlength}
     @inputdeleted=${(x) => x.inputdeleted()}
@@ -64,37 +65,37 @@ export const getPrefixedSearchBar = (prefix) => html `
     ${repeat((x) => x.filteredOptions, html `
         <${prefix}-option
           value="${(x) => x.field}"
-          :disabled=${(x, ctx) => !x.isEnabled(ctx.parent.searchTerm, ctx.parent.selectedOptions)}
+          :disabled=${(x, ctx) => !ctx.parent.isOptionEnabled(x)}
         >
           ${(x, ctx) => x.label(ctx.parent.searchTerm)}
         </${prefix}-option>
       `)}
-    <${prefix}-button
-      class="search-clear-button"
-      @click=${(x) => x.clearSearch()}
-      id="search-clear-button"
-      slot="end"
-      data-test-id="clear-search"
-    >
-      <div class="svg-container">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="currentColor"
-          width="26px"
-          height="26px"
-          class="bi bi-plus"
-          viewBox="0 0 16 16"
+    ${when((x) => x.showClearAffordance, html `
+        <${prefix}-button
+          class="search-clear-button"
+          @click=${(x) => x.clearSearch()}
+          slot="end"
+          data-test-id="clear-search"
+          aria-label="Clear search terms"
+          title="Clear search terms"
         >
-          <path
-            d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"
-          />
-        </svg>
-      </div>
-    </${prefix}-button>
+          <div class="svg-container">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor"
+              width="26px"
+              height="26px"
+              class="bi bi-plus"
+              viewBox="0 0 16 16"
+            >
+              <path
+                d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"
+              />
+            </svg>
+          </div>
+        </${prefix}-button>
+      `)}
   </${prefix}-search-bar-combobox>
-  <${prefix}-tooltip class="tooltip" anchor="search-clear-button">
-    Clear Search Terms
-  </${prefix}-tooltip>
 `;
 export const foundationSearchBarTemplate = html `
   ${(x) => getPrefixedSearchBar(getPrefix(x))}

package/dist/react.cjs

@@ -66,7 +66,6 @@ const { Radio: RadioWC } = require('./esm/radio/radio.js');
 const { SchedulerCronBuilder: SchedulerCronBuilderWC } = require('./esm/scheduler-cron-builder/scheduler-cron-builder.js');
 const { SchedulerTimezone: SchedulerTimezoneWC } = require('./esm/scheduler-timezone/scheduler-timezone.js');
 const { Scheduler: SchedulerWC } = require('./esm/scheduler/scheduler.js');
-const { SearchBarCombobox: SearchBarComboboxWC } = require('./esm/search-bar/search-bar-combobox.js');
 const { SearchBar: SearchBarWC } = require('./esm/search-bar/search-bar.js');
 const { SectionNavigator: SectionNavigatorWC } = require('./esm/section-navigator/section-navigator.js');
 const { SegmentedControl: SegmentedControlWC } = require('./esm/segmented-control/segmented-control.js');
@@ -134,14 +133,14 @@ const AiCriteriaSearch = React.forwardRef(function AiCriteriaSearch(props, ref)
   return React.createElement(customElements.getName(AiCriteriaSearchWC) ?? '%%prefix%%-ai-criteria-search', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-const Accordion = React.forwardRef(function Accordion(props, ref) {
+const AiIndicator = React.forwardRef(function AiIndicator(props, ref) {
   const { children, ...rest } = props;
-  return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
+  return React.createElement(customElements.getName(AiIndicatorWC) ?? '%%prefix%%-ai-indicator', { ...rest, ref }, children);
 });
 
-const AiIndicator = React.forwardRef(function AiIndicator(props, ref) {
+const Accordion = React.forwardRef(function Accordion(props, ref) {
   const { children, ...rest } = props;
-  return React.createElement(customElements.getName(AiIndicatorWC) ?? '%%prefix%%-ai-indicator', { ...rest, ref }, children);
+  return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
 });
 
 const Anchor = React.forwardRef(function Anchor(props, ref) {
@@ -632,23 +631,6 @@ const SchedulerTimezone = React.forwardRef(function SchedulerTimezone(props, ref
   return React.createElement(customElements.getName(SchedulerTimezoneWC) ?? '%%prefix%%-scheduler-timezone', { ...rest, ref }, children);
 });
 
-const SearchBarCombobox = React.forwardRef(function SearchBarCombobox(props, ref) {
-  const { onInputdeleted, children, ...rest } = props;
-  const _innerRef = React.useRef(null);
-  const _onInputdeletedRef = React.useRef(onInputdeleted);
-  _onInputdeletedRef.current = onInputdeleted;
-  React.useLayoutEffect(() => {
-    const el = _innerRef.current;
-    if (!el) return;
-    const _onInputdeletedFn = (e) => _onInputdeletedRef.current?.(e);
-    el.addEventListener('inputdeleted', _onInputdeletedFn);
-    return () => {
-      el.removeEventListener('inputdeleted', _onInputdeletedFn);
-    };
-  }, []);
-  return React.createElement(customElements.getName(SearchBarComboboxWC) ?? '%%prefix%%-search-bar-combobox', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
-});
-
 const SearchBar = React.forwardRef(function SearchBar(props, ref) {
   const { onSelectionChange, children, ...rest } = props;
   const _innerRef = React.useRef(null);
@@ -880,8 +862,8 @@ module.exports = {
   AccordionItem,
   ActionsMenu,
   AiCriteriaSearch,
-  Accordion,
   AiIndicator,
+  Accordion,
   Anchor,
   AnchoredRegion,
   Avatar,
@@ -937,7 +919,6 @@ module.exports = {
   Scheduler,
   SchedulerCronBuilder,
   SchedulerTimezone,
-  SearchBarCombobox,
   SearchBar,
   SectionNavigator,
   SegmentedControl,

package/dist/react.mjs

@@ -64,7 +64,6 @@ import { Radio as RadioWC } from './esm/radio/radio.js';
 import { SchedulerCronBuilder as SchedulerCronBuilderWC } from './esm/scheduler-cron-builder/scheduler-cron-builder.js';
 import { SchedulerTimezone as SchedulerTimezoneWC } from './esm/scheduler-timezone/scheduler-timezone.js';
 import { Scheduler as SchedulerWC } from './esm/scheduler/scheduler.js';
-import { SearchBarCombobox as SearchBarComboboxWC } from './esm/search-bar/search-bar-combobox.js';
 import { SearchBar as SearchBarWC } from './esm/search-bar/search-bar.js';
 import { SectionNavigator as SectionNavigatorWC } from './esm/section-navigator/section-navigator.js';
 import { SegmentedControl as SegmentedControlWC } from './esm/segmented-control/segmented-control.js';
@@ -132,14 +131,14 @@ export const AiCriteriaSearch = React.forwardRef(function AiCriteriaSearch(props
   return React.createElement(customElements.getName(AiCriteriaSearchWC) ?? '%%prefix%%-ai-criteria-search', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-export const Accordion = React.forwardRef(function Accordion(props, ref) {
+export const AiIndicator = React.forwardRef(function AiIndicator(props, ref) {
   const { children, ...rest } = props;
-  return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
+  return React.createElement(customElements.getName(AiIndicatorWC) ?? '%%prefix%%-ai-indicator', { ...rest, ref }, children);
 });
 
-export const AiIndicator = React.forwardRef(function AiIndicator(props, ref) {
+export const Accordion = React.forwardRef(function Accordion(props, ref) {
   const { children, ...rest } = props;
-  return React.createElement(customElements.getName(AiIndicatorWC) ?? '%%prefix%%-ai-indicator', { ...rest, ref }, children);
+  return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
 });
 
 export const Anchor = React.forwardRef(function Anchor(props, ref) {
@@ -630,23 +629,6 @@ export const SchedulerTimezone = React.forwardRef(function SchedulerTimezone(pro
   return React.createElement(customElements.getName(SchedulerTimezoneWC) ?? '%%prefix%%-scheduler-timezone', { ...rest, ref }, children);
 });
 
-export const SearchBarCombobox = React.forwardRef(function SearchBarCombobox(props, ref) {
-  const { onInputdeleted, children, ...rest } = props;
-  const _innerRef = React.useRef(null);
-  const _onInputdeletedRef = React.useRef(onInputdeleted);
-  _onInputdeletedRef.current = onInputdeleted;
-  React.useLayoutEffect(() => {
-    const el = _innerRef.current;
-    if (!el) return;
-    const _onInputdeletedFn = (e) => _onInputdeletedRef.current?.(e);
-    el.addEventListener('inputdeleted', _onInputdeletedFn);
-    return () => {
-      el.removeEventListener('inputdeleted', _onInputdeletedFn);
-    };
-  }, []);
-  return React.createElement(customElements.getName(SearchBarComboboxWC) ?? '%%prefix%%-search-bar-combobox', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
-});
-
 export const SearchBar = React.forwardRef(function SearchBar(props, ref) {
   const { onSelectionChange, children, ...rest } = props;
   const _innerRef = React.useRef(null);