@genesislcap/foundation-header 14.496.2-alpha-2c4a633.0 → 14.498.0

package/dist/dts/main/main.d.ts

@@ -30,6 +30,7 @@ export type NavEventDetailMap = {
     'misc-icon-clicked': void;
     'notification-icon-clicked': void;
     'language-changed': void;
+    'feature-flags-changed': string[];
     'nav-button-clicked': NavButtonClickDetail;
 };
 /**
@@ -40,8 +41,25 @@ export type LanguageOptions = {
     availableLanguages: string[];
     selectedLanguage: string;
 };
+/**
+ * A single feature flag option shown in the header multi-select.
+ * @public
+ */
+export type FeatureFlagDefinition = {
+    /** Feature flag name used in the URL as `feature.<name>`. */
+    name: string;
+    /** Display label for the multi-select option. */
+    label: string;
+};
+/**
+ * Options for the feature flags selector
+ * @public
+ */
+export type FeatureFlagOptions = {
+    availableFlags: FeatureFlagDefinition[];
+};
 declare const Navigation_base: abstract new (...args: any[]) => {
-    $emit<K extends "luminance-icon-clicked" | "logout-clicked" | "misc-icon-clicked" | "notification-icon-clicked" | "language-changed" | "nav-button-clicked">(...args: NavEventDetailMap[K] extends void ? [type: K, options?: import("@genesislcap/foundation-events").EmitOptions] : [type: K, detail: NavEventDetailMap[K], options?: import("@genesislcap/foundation-events").EmitOptions]): import("@genesislcap/foundation-events").EmitReturn;
+    $emit<K extends "luminance-icon-clicked" | "logout-clicked" | "misc-icon-clicked" | "notification-icon-clicked" | "language-changed" | "feature-flags-changed" | "nav-button-clicked">(...args: NavEventDetailMap[K] extends void ? [type: K, options?: import("@genesislcap/foundation-events").EmitOptions] : [type: K, detail: NavEventDetailMap[K], options?: import("@genesislcap/foundation-events").EmitOptions]): import("@genesislcap/foundation-events").EmitReturn;
     accessKey: string;
     readonly accessKeyLabel: string;
     autocapitalize: string;
@@ -416,6 +434,7 @@ declare const Navigation_base: abstract new (...args: any[]) => {
  * @param show-connection-indicator - Boolean attribute which controls whether the navigation bar will display the connection indicator.
  * @param show-environment-indicator - Boolean attribute which controls whether the navigation bar will display the environment indicator.
  * @param show-language-selector - Boolean attribute which controls whether the navigation bar will display the language selector.
+ * @param show-feature-flags-selector - Optional. Force-show the Feature Flags button; normally unnecessary because the button appears automatically when `featureFlagOptions.availableFlags` is non-empty.
  * @param hide-side-bar - Boolean attribute which controls whether the navigation bar will display the side bar.
  * @param show-account-menu - Boolean attribute which controls whether the navigation bar will display the account menu.
  * @param logout-button-position - String attribute which controls the position of the logout button in the header.
@@ -424,6 +443,7 @@ declare const Navigation_base: abstract new (...args: any[]) => {
  * @param routeButtons - Array of objects which define the route buttons to be displayed in the navigation bar.
  * @param routeNavItems - Array of {@link @genesislcap/foundation-ui#FoundationRouteNavItem | FoundationRouteNavItems} which define the route buttons to be displayed in the navigation bar.
  * @param languageOptions - Object which defines the language options to be displayed in the language selector.
+ * @param featureFlagOptions - Object which defines the feature flag options. When `availableFlags` is non-empty, the Feature Flags button is shown automatically.
  * @param inactivity-timeout-minutes - Number attribute which sets the inactivity timeout in minutes (default: 30).
  * @param inactivity-warning-minutes - Number attribute which sets the inactivity warning time in minutes before timeout (default: 5).
  * @param enable-inactivity-monitoring - Boolean attribute which controls whether to enable inactivity monitoring (default: true).
@@ -434,6 +454,7 @@ declare const Navigation_base: abstract new (...args: any[]) => {
  * @fires misc-icon-clicked - Dispatched when the user clicks on the miscellaneous behaviour icon in the navigation bar.
  * @fires notification-icon-clicked - Dispatched when the user clicks on the notification icon in the navigation bar.
  * @fires language-changed - Dispatched when the user changes the language in the language selector.
+ * @fires feature-flags-changed - Dispatched when the user changes the selected feature flags. detail: `string[]`
  * @fires logout-clicked - Dispatched when the user clicks logout button.
  * @fires nav-button-clicked - Dispatched when the user clicks a navigation button. detail: `NavButtonClickDetail`
  *
@@ -498,6 +519,10 @@ export declare class Navigation extends Navigation_base {
      * Called when the component is connected to the DOM
      */
     connectedCallback(): Promise<void>;
+    /**
+     * @internal
+     */
+    readyChanged(_previous: boolean, next: boolean): void;
     setLuminance(): void;
     /**
      * Initialize the inactivity manager
@@ -596,6 +621,49 @@ export declare class Navigation extends Navigation_base {
      * Object which defines the language options to be displayed in the language selector
      */
     languageOptions: LanguageOptions;
+    /**
+     * Optional boolean attribute to force-show the Feature Flags button.
+     * Control via `show-feature-flags-selector`
+     *
+     * @remarks
+     *
+     * Usually unnecessary: the button is shown automatically when
+     * {@link Navigation.featureFlagOptions} has a non-empty `availableFlags` list.
+     */
+    showFeatureFlagsSelector: boolean;
+    /**
+     * Feature flags available in the header selector.
+     *
+     * @remarks
+     *
+     * When `availableFlags` is non-empty, the Feature Flags button is shown automatically.
+     * Selected flags are synced to URL `feature.*` query params and the page reloads so
+     * boot-time consumers re-evaluate.
+     */
+    featureFlagOptions: FeatureFlagOptions;
+    /**
+     * Whether the feature flags panel is open.
+     * @internal
+     */
+    featureFlagsPanelOpen: boolean;
+    /**
+     * @internal
+     */
+    featureFlagOptionsChanged(): void;
+    /**
+     * @internal
+     */
+    showFeatureFlagsSelectorChanged(): void;
+    /**
+     * Re-run `[hidden]` bindings on the feature flags nav control.
+     *
+     * @remarks
+     * FAST `when(false)` does not reliably re-open when `featureFlagOptions` is assigned after
+     * connect (common with React props). The nav markup stays mounted; visibility uses `[hidden]`.
+     *
+     * @internal
+     */
+    private notifyFeatureFlagsNavVisibility;
     /**
      * Boolean attribute which controls whether to include the sideNav component
      * Control via`hide-side-bar`
@@ -801,6 +869,32 @@ export declare class Navigation extends Navigation_base {
      * @experimental
      */
     changeLanguage(e: CustomEvent): void;
+    /**
+     * Toggles the feature flags panel open/closed.
+     */
+    toggleFeatureFlagsPanel(): void;
+    /**
+     * Changes the active URL feature flags and reloads the page.
+     *
+     * @remarks
+     *
+     * Activated when the user changes the selection in the feature flags multi-select.
+     * Writes presence-only `feature.<name>` query params via
+     * {@link @genesislcap/foundation-utils#setActivatedFeatures}.
+     */
+    changeFeatureFlags(e: CustomEvent<string[]>): void;
+    /**
+     * Multiselect options derived from {@link Navigation.featureFlagOptions}.
+     */
+    getFeatureFlagMultiselectOptions(): {
+        value: string;
+        label: string;
+    }[];
+    /**
+     * Currently selected feature flag names based on URL `feature.*` params.
+     * Multiselect expects selected option *values* (strings), not full option objects.
+     */
+    getSelectedFeatureFlagValues(): string[];
     /**
      * To localised text
      * @remarks

package/dist/dts/main/main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../src/main/main.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../src/main/main.ts"],"names":[],"mappings":"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"}

package/dist/dts/main/main.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.styles.d.ts","sourceRoot":"","sources":["../../../src/main/main.styles.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,iDAuZgD,CAAC"}
+{"version":3,"file":"main.styles.d.ts","sourceRoot":"","sources":["../../../src/main/main.styles.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,iDA+bgD,CAAC"}

package/dist/dts/main/main.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.template.d.ts","sourceRoot":"","sources":["../../../src/main/main.template.ts"],"names":[],"mappings":"AAIA,OAAO,EAAO,YAAY,EAAkC,MAAM,uBAAuB,CAAC;AAe1F,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAazC;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,sBAAsB,GAAI,WAAW,MAAM,EAAE,YAAY,MAAM,EAAE,SAAS,MAAM,WAM5F,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,UAAU,CAIpD,CAAC;AAuMF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,+BAyJvB,CAAC;AAiDF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,GAAI,WAAM,2BAIzC,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,UAAU,CAEpD,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,+BAAc,CAAC"}
+{"version":3,"file":"main.template.d.ts","sourceRoot":"","sources":["../../../src/main/main.template.ts"],"names":[],"mappings":"AAIA,OAAO,EAAO,YAAY,EAAkC,MAAM,uBAAuB,CAAC;AAiB1F,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAazC;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,sBAAsB,GAAI,WAAW,MAAM,EAAE,YAAY,MAAM,EAAE,SAAS,MAAM,WAM5F,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,UAAU,CAIpD,CAAC;AAuMF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,+BAoMvB,CAAC;AAiDF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,GAAI,WAAM,2BAIzC,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,UAAU,CAEpD,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,+BAAc,CAAC"}

package/dist/dts/react.d.ts

@@ -54,6 +54,7 @@ export declare const Navigation: React.ForwardRefExoticComponent<
       onMiscIconClicked?: (event: CustomEvent<unknown>) => void;
       onNotificationIconClicked?: (event: CustomEvent<unknown>) => void;
       onLanguageChanged?: (event: CustomEvent<unknown>) => void;
+      onFeatureFlagsChanged?: (event: CustomEvent<string[]>) => void;
       onLogoutClicked?: (event: CustomEvent<unknown>) => void;
       onNavButtonClicked?: (event: CustomEvent<NavButtonClickDetail>) => void;
     }
@@ -69,6 +70,7 @@ export declare const ZeroHeader: React.ForwardRefExoticComponent<
       onMiscIconClicked?: (event: CustomEvent<unknown>) => void;
       onNotificationIconClicked?: (event: CustomEvent<unknown>) => void;
       onLanguageChanged?: (event: CustomEvent<unknown>) => void;
+      onFeatureFlagsChanged?: (event: CustomEvent<string[]>) => void;
       onLogoutClicked?: (event: CustomEvent<unknown>) => void;
       onNavButtonClicked?: (event: CustomEvent<NavButtonClickDetail>) => void;
     }
@@ -84,6 +86,7 @@ export declare const RapidHeader: React.ForwardRefExoticComponent<
       onMiscIconClicked?: (event: CustomEvent<unknown>) => void;
       onNotificationIconClicked?: (event: CustomEvent<unknown>) => void;
       onLanguageChanged?: (event: CustomEvent<unknown>) => void;
+      onFeatureFlagsChanged?: (event: CustomEvent<string[]>) => void;
       onLogoutClicked?: (event: CustomEvent<unknown>) => void;
       onNavButtonClicked?: (event: CustomEvent<NavButtonClickDetail>) => void;
     }

package/dist/dts/tags/tags.d.ts

@@ -37,6 +37,10 @@ export declare const selectTag: string;
  * @internal
  */
 export declare const optionTag: string;
+/**
+ * @internal
+ */
+export declare const multiselectTag: string;
 /**
  * @internal
  */

package/dist/dts/tags/tags.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tags.d.ts","sourceRoot":"","sources":["../../../src/tags/tags.ts"],"names":[],"mappings":"AAMA;;;;;;GAMG;AAEH;;GAEG;AACH,eAAO,MAAQ,eAAe,+CACkB,CAAC;AAEjD;;GAEG;AACH,eAAO,MAAM,OAAO,QAA+B,CAAC;AAEpD;;GAEG;AACH,eAAO,MAAM,SAAS,QAAiC,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,sBAAsB,QAA8C,CAAC;AAElF;;GAEG;AACH,eAAO,MAAM,cAAc,QAAsC,CAAC;AAElE;;GAEG;AACH,eAAO,MAAM,uBAAuB,QAA+C,CAAC;AAEpF;;GAEG;AACH,eAAO,MAAM,SAAS,QAAiC,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,SAAS,QAAiC,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,SAAS,QAAiC,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,WAAW,QAAmC,CAAC;AAE5D;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,GAAI,aAAQ,EAAE,YAAO,WAc7C,CAAC"}
+{"version":3,"file":"tags.d.ts","sourceRoot":"","sources":["../../../src/tags/tags.ts"],"names":[],"mappings":"AAMA;;;;;;GAMG;AAEH;;GAEG;AACH,eAAO,MAAQ,eAAe,+CACkB,CAAC;AAEjD;;GAEG;AACH,eAAO,MAAM,OAAO,QAA+B,CAAC;AAEpD;;GAEG;AACH,eAAO,MAAM,SAAS,QAAiC,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,sBAAsB,QAA8C,CAAC;AAElF;;GAEG;AACH,eAAO,MAAM,cAAc,QAAsC,CAAC;AAElE;;GAEG;AACH,eAAO,MAAM,uBAAuB,QAA+C,CAAC;AAEpF;;GAEG;AACH,eAAO,MAAM,SAAS,QAAiC,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,SAAS,QAAiC,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,cAAc,QAAsC,CAAC;AAElE;;GAEG;AACH,eAAO,MAAM,SAAS,QAAiC,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,WAAW,QAAmC,CAAC;AAE5D;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,GAAI,aAAQ,EAAE,YAAO,WAc7C,CAAC"}

package/dist/dts/templates/rapid.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rapid.template.d.ts","sourceRoot":"","sources":["../../../src/templates/rapid.template.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAG1D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAe1C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,UAAU,CAIpD,CAAC;AAuKF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,+BA2HzB,CAAC"}
+{"version":3,"file":"rapid.template.d.ts","sourceRoot":"","sources":["../../../src/templates/rapid.template.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAG1D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAiB1C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,UAAU,CAIpD,CAAC;AAuKF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,+BAqKzB,CAAC"}

package/dist/esm/components/rapid-components.js

@@ -17,7 +17,7 @@ function rapidDesignSystemImport() {
  * @public
  */
 export const registerCommonRapidComponents = () => __awaiter(void 0, void 0, void 0, function* () {
-    const { provideDesignSystem, rapidIcon, rapidButton, designSystemProvider: rapidDesignSystemProvider, rapidSelect, rapidListboxOption, rapidFlyout, rapidConnectionIndicator, } = yield rapidDesignSystemImport();
+    const { provideDesignSystem, rapidIcon, rapidButton, designSystemProvider: rapidDesignSystemProvider, rapidSelect, rapidListboxOption, rapidMultiselect, rapidFlyout, rapidConnectionIndicator, } = yield rapidDesignSystemImport();
     /**
      * Register the components the app is using with the system.
      */
@@ -29,5 +29,5 @@ export const registerCommonRapidComponents = () => __awaiter(void 0, void 0, voi
     /**
      * Common across most routes, so batch register these lightweight components upfront.
      */
-    rapidIcon(), rapidButton(), rapidSelect(), rapidListboxOption(), rapidFlyout(), rapidConnectionIndicator);
+    rapidIcon(), rapidButton(), rapidSelect(), rapidListboxOption(), rapidMultiselect(), rapidFlyout(), rapidConnectionIndicator);
 });

package/dist/esm/components/zero-components.js

@@ -3,7 +3,7 @@ import { __awaiter } from "tslib";
  * @public
  */
 export const registerCommonZeroComponents = () => __awaiter(void 0, void 0, void 0, function* () {
-    const { provideDesignSystem, zeroIcon, zeroButton, zeroDesignSystemProvider, zeroSelect, zeroListboxOption, zeroFlyout, } = yield import(
+    const { provideDesignSystem, zeroIcon, zeroButton, zeroDesignSystemProvider, zeroSelect, zeroListboxOption, zeroMultiselect, zeroFlyout, } = yield import(
     /* webpackChunkName: "foundation-zero" */
     '@genesislcap/foundation-zero');
     /**
@@ -17,5 +17,5 @@ export const registerCommonZeroComponents = () => __awaiter(void 0, void 0, void
     /**
      * Common across most routes, so batch register these lightweight components upfront.
      */
-    zeroIcon(), zeroButton(), zeroSelect(), zeroListboxOption(), zeroFlyout());
+    zeroIcon(), zeroButton(), zeroSelect(), zeroListboxOption(), zeroMultiselect(), zeroFlyout());
 });

package/dist/esm/config/templates.js

@@ -13,6 +13,7 @@ export const templateOptionsByDesiginSystemPrefix = {
         environmentIndicator: 'zero-environment-indicator',
         select: 'zero-select',
         option: 'zero-option',
+        multiselect: 'zero-multiselect',
         flyout: 'zero-flyout',
         provider: 'zero-design-system-provider',
     },
@@ -24,6 +25,7 @@ export const templateOptionsByDesiginSystemPrefix = {
         environmentIndicator: 'rapid-environment-indicator',
         select: 'rapid-select',
         option: 'rapid-option',
+        multiselect: 'rapid-multiselect',
         flyout: 'rapid-flyout',
         provider: 'rapid-design-system-provider',
     },

package/dist/esm/main/feature-flags-nav.js

@@ -0,0 +1,5 @@
+/**
+ * True when the Feature Flags button should be visible in the header nav.
+ * @internal
+ */
+export const isFeatureFlagsNavVisible = (host) => { var _a, _b, _c; return !!host.showFeatureFlagsSelector || ((_c = (_b = (_a = host.featureFlagOptions) === null || _a === void 0 ? void 0 : _a.availableFlags) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) > 0; };

package/dist/esm/main/main.js

@@ -5,8 +5,8 @@ import { EventEmitter } from '@genesislcap/foundation-events';
 import { I18next } from '@genesislcap/foundation-i18n';
 import { FoundationRouteNav } from '@genesislcap/foundation-ui';
 import { User } from '@genesislcap/foundation-user';
-import { InactivityManager, RouteUtil } from '@genesislcap/foundation-utils';
-import { attr, Container, customElement, GenesisElement, observable } from '@genesislcap/web-core';
+import { InactivityManager, isFeatureActivated, RouteUtil, setActivatedFeatures, } from '@genesislcap/foundation-utils';
+import { attr, Container, customElement, GenesisElement, observable, Observable, } from '@genesislcap/web-core';
 import logo from '../assets/logo.svg';
 import { HeaderConfig } from '../config/config';
 import { rapidTemplate } from '../templates/rapid.template';
@@ -36,6 +36,7 @@ const DEFAULT_INACTIVITY_WARNING_MINUTES = 5;
  * @param show-connection-indicator - Boolean attribute which controls whether the navigation bar will display the connection indicator.
  * @param show-environment-indicator - Boolean attribute which controls whether the navigation bar will display the environment indicator.
  * @param show-language-selector - Boolean attribute which controls whether the navigation bar will display the language selector.
+ * @param show-feature-flags-selector - Optional. Force-show the Feature Flags button; normally unnecessary because the button appears automatically when `featureFlagOptions.availableFlags` is non-empty.
  * @param hide-side-bar - Boolean attribute which controls whether the navigation bar will display the side bar.
  * @param show-account-menu - Boolean attribute which controls whether the navigation bar will display the account menu.
  * @param logout-button-position - String attribute which controls the position of the logout button in the header.
@@ -44,6 +45,7 @@ const DEFAULT_INACTIVITY_WARNING_MINUTES = 5;
  * @param routeButtons - Array of objects which define the route buttons to be displayed in the navigation bar.
  * @param routeNavItems - Array of {@link @genesislcap/foundation-ui#FoundationRouteNavItem | FoundationRouteNavItems} which define the route buttons to be displayed in the navigation bar.
  * @param languageOptions - Object which defines the language options to be displayed in the language selector.
+ * @param featureFlagOptions - Object which defines the feature flag options. When `availableFlags` is non-empty, the Feature Flags button is shown automatically.
  * @param inactivity-timeout-minutes - Number attribute which sets the inactivity timeout in minutes (default: 30).
  * @param inactivity-warning-minutes - Number attribute which sets the inactivity warning time in minutes before timeout (default: 5).
  * @param enable-inactivity-monitoring - Boolean attribute which controls whether to enable inactivity monitoring (default: true).
@@ -54,6 +56,7 @@ const DEFAULT_INACTIVITY_WARNING_MINUTES = 5;
  * @fires misc-icon-clicked - Dispatched when the user clicks on the miscellaneous behaviour icon in the navigation bar.
  * @fires notification-icon-clicked - Dispatched when the user clicks on the notification icon in the navigation bar.
  * @fires language-changed - Dispatched when the user changes the language in the language selector.
+ * @fires feature-flags-changed - Dispatched when the user changes the selected feature flags. detail: `string[]`
  * @fires logout-clicked - Dispatched when the user clicks logout button.
  * @fires nav-button-clicked - Dispatched when the user clicks a navigation button. detail: `NavButtonClickDetail`
  *
@@ -157,6 +160,21 @@ let Navigation = class Navigation extends EventEmitter(GenesisElement) {
             availableLanguages: Object.keys((_a = this.i18next.config.resources) !== null && _a !== void 0 ? _a : {}),
             selectedLanguage: this.i18next.config.lng,
         };
+        /**
+         * Optional boolean attribute to force-show the Feature Flags button.
+         * Control via `show-feature-flags-selector`
+         *
+         * @remarks
+         *
+         * Usually unnecessary: the button is shown automatically when
+         * {@link Navigation.featureFlagOptions} has a non-empty `availableFlags` list.
+         */
+        this.showFeatureFlagsSelector = false;
+        /**
+         * Whether the feature flags panel is open.
+         * @internal
+         */
+        this.featureFlagsPanelOpen = false;
         /**
          * String attribute which controls the position of the logout button in the header
          * Control via `logout-button-position`
@@ -193,8 +211,19 @@ let Navigation = class Navigation extends EventEmitter(GenesisElement) {
                 this.userName = (_a = this.user.userName) !== null && _a !== void 0 ? _a : 'Genesis User';
             }
             this.initializeInactivityManager();
+            this.notifyFeatureFlagsNavVisibility();
+            // React and other hosts often assign object properties after connect.
+            queueMicrotask(() => this.notifyFeatureFlagsNavVisibility());
         });
     }
+    /**
+     * @internal
+     */
+    readyChanged(_previous, next) {
+        if (next) {
+            this.notifyFeatureFlagsNavVisibility();
+        }
+    }
     setLuminance() {
         localStorage.setItem('luminance', this.luminanceToggle ? 'light' : 'dark');
     }
@@ -240,6 +269,31 @@ let Navigation = class Navigation extends EventEmitter(GenesisElement) {
     showNotificationsButtonChanged() {
         logger.deprecated('show-notification-button', 'Leave unset and add/remove PBC Notify instead.');
     }
+    /**
+     * @internal
+     */
+    featureFlagOptionsChanged() {
+        this.notifyFeatureFlagsNavVisibility();
+    }
+    /**
+     * @internal
+     */
+    showFeatureFlagsSelectorChanged() {
+        this.notifyFeatureFlagsNavVisibility();
+    }
+    /**
+     * Re-run `[hidden]` bindings on the feature flags nav control.
+     *
+     * @remarks
+     * FAST `when(false)` does not reliably re-open when `featureFlagOptions` is assigned after
+     * connect (common with React props). The nav markup stays mounted; visibility uses `[hidden]`.
+     *
+     * @internal
+     */
+    notifyFeatureFlagsNavVisibility() {
+        Observable.notify(this, 'featureFlagOptions');
+        Observable.notify(this, 'showFeatureFlagsSelector');
+    }
     /**
      * @internal
      */
@@ -431,6 +485,48 @@ let Navigation = class Navigation extends EventEmitter(GenesisElement) {
         this.$emit('language-changed', e.detail.value);
         this.i18next.changeLanguageTo(e.detail.value);
     }
+    /**
+     * Toggles the feature flags panel open/closed.
+     */
+    toggleFeatureFlagsPanel() {
+        this.featureFlagsPanelOpen = !this.featureFlagsPanelOpen;
+    }
+    /**
+     * Changes the active URL feature flags and reloads the page.
+     *
+     * @remarks
+     *
+     * Activated when the user changes the selection in the feature flags multi-select.
+     * Writes presence-only `feature.<name>` query params via
+     * {@link @genesislcap/foundation-utils#setActivatedFeatures}.
+     */
+    changeFeatureFlags(e) {
+        var _a;
+        const selected = ((_a = e.detail) !== null && _a !== void 0 ? _a : []).filter((name) => !!name);
+        this.featureFlagsPanelOpen = false;
+        this.$emit('feature-flags-changed', selected);
+        setActivatedFeatures(selected);
+    }
+    /**
+     * Multiselect options derived from {@link Navigation.featureFlagOptions}.
+     */
+    getFeatureFlagMultiselectOptions() {
+        var _a, _b;
+        return ((_b = (_a = this.featureFlagOptions) === null || _a === void 0 ? void 0 : _a.availableFlags) !== null && _b !== void 0 ? _b : []).map(({ name, label }) => ({
+            value: name,
+            label,
+        }));
+    }
+    /**
+     * Currently selected feature flag names based on URL `feature.*` params.
+     * Multiselect expects selected option *values* (strings), not full option objects.
+     */
+    getSelectedFeatureFlagValues() {
+        var _a, _b;
+        return ((_b = (_a = this.featureFlagOptions) === null || _a === void 0 ? void 0 : _a.availableFlags) !== null && _b !== void 0 ? _b : [])
+            .map(({ name }) => name)
+            .filter((name) => isFeatureActivated(name));
+    }
     /**
      * To localised text
      * @remarks
@@ -567,6 +663,15 @@ __decorate([
 __decorate([
     observable
 ], Navigation.prototype, "languageOptions", void 0);
+__decorate([
+    attr({ mode: 'boolean', attribute: 'show-feature-flags-selector' })
+], Navigation.prototype, "showFeatureFlagsSelector", void 0);
+__decorate([
+    observable
+], Navigation.prototype, "featureFlagOptions", void 0);
+__decorate([
+    observable
+], Navigation.prototype, "featureFlagsPanelOpen", void 0);
 __decorate([
     attr({ mode: 'boolean', attribute: 'hide-side-bar' })
 ], Navigation.prototype, "hideSideBar", void 0);

package/dist/esm/main/main.styles.js

@@ -186,6 +186,46 @@ export const MainStyles = css `
     border-color: #333;
   }
 
+  .feature-flags-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 0;
+    margin: 0;
+    line-height: 0;
+    font-size: 0;
+  }
+
+  .feature-flags-wrapper[hidden] {
+    display: none !important;
+  }
+
+  .feature-flags-button {
+    position: relative;
+    z-index: 2;
+  }
+
+  .feature-flags-panel {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    z-index: 1000;
+    margin-top: calc(var(--design-unit) * 1px);
+    padding: calc(var(--design-unit) * 2px);
+    background: var(--foundation-header-background-color, var(--neutral-layer-2));
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
+    border-radius: calc(var(--control-corner-radius) * 1px);
+    box-shadow: 0 4px 12px rgb(0 0 0 / 20%);
+    line-height: normal;
+    font-size: var(--type-ramp-base-font-size);
+  }
+
+  .feature-flags-selector {
+    width: 250px;
+    min-width: 250px;
+    max-width: 250px;
+  }
+
   ${flyoutTag}::part(flyout),
   ${flyoutTag}::part(footer) {
     padding: 0;

package/dist/esm/main/main.template.js

@@ -3,7 +3,8 @@ import { getApp } from '@genesislcap/foundation-shell/app';
 import { avoidTreeShaking } from '@genesislcap/foundation-utils';
 import { ref, classNames, html, repeat, when } from '@genesislcap/web-core';
 import { ControlPanel } from '../components';
-import { aiIndicatorTag, buttonTag, connectionIndicatorTag, environmentIndicatorTag, flyoutTag, getTagHelper, iconTag, optionTag, providerTag, selectTag, } from '../tags';
+import { aiIndicatorTag, buttonTag, connectionIndicatorTag, environmentIndicatorTag, flyoutTag, getTagHelper, iconTag, multiselectTag, optionTag, providerTag, selectTag, } from '../tags';
+import { isFeatureFlagsNavVisible } from './feature-flags-nav';
 avoidTreeShaking(ControlPanel);
 const app = getApp();
 /**
@@ -331,6 +332,45 @@ export const navTemplate = html `
               `)}
           </${selectTag}>
         `)}
+      <div
+        class="feature-flags-wrapper"
+        part="feature-flags-wrapper"
+        ?hidden=${(x) => !isFeatureFlagsNavVisible(x)}
+      >
+        <${buttonTag}
+          appearance="neutral-grey"
+          class="nav-button feature-flags-button"
+          data-test-id="feature-flags-button"
+          part="feature-flags-button"
+          aria-label="Feature flags"
+          aria-haspopup="true"
+          ?aria-expanded=${(x) => x.featureFlagsPanelOpen}
+          @click=${(x) => x.toggleFeatureFlagsPanel()}
+        >
+          Feature Flags
+        </${buttonTag}>
+        ${when((x) => x.featureFlagsPanelOpen, html `
+            <div
+              class="feature-flags-panel"
+              data-test-id="feature-flags-selector"
+              part="feature-flags-panel"
+            >
+              <${multiselectTag}
+                class="feature-flags-selector"
+                name="Features"
+                ?search="${() => false}"
+                ?all="${() => false}"
+                ?creatable="${() => false}"
+                :options=${(x) => x.getFeatureFlagMultiselectOptions()}
+                :selectedOptions=${(x) => x.getSelectedFeatureFlagValues()}
+                @selectionChange="${(x, c) => x.changeFeatureFlags(c.event)}"
+                aria-label="Select Features"
+              >
+                <span slot="label">Select Features</span>
+              </${multiselectTag}>
+            </div>
+          `)}
+      </div>
       ${() => accountMenuTemplate}
     </div>
     ${when((x) => x.showControlPanel, html `

package/dist/esm/tags/tags.js

@@ -42,6 +42,10 @@ export const selectTag = tagFor(templateOptions.select);
  * @internal
  */
 export const optionTag = tagFor(templateOptions.option);
+/**
+ * @internal
+ */
+export const multiselectTag = tagFor(templateOptions.multiselect);
 /**
  * @internal
  */

package/dist/esm/templates/rapid.template.js

@@ -1,6 +1,7 @@
 import { isAIFeatureEnabled } from '@genesislcap/foundation-ai';
 import { getApp } from '@genesislcap/foundation-shell/app';
 import { html, repeat, when } from '@genesislcap/web-core';
+import { isFeatureFlagsNavVisible } from '../main/feature-flags-nav';
 import { getTagHelper } from '../tags';
 const app = getApp();
 const getTagHelperRapid = getTagHelper.bind(null, 'rapid');
@@ -12,6 +13,7 @@ const connectionIndicatorTag = getTagHelperRapid('connectionIndicator');
 const aiIndicatorTag = getTagHelperRapid('aiIndicator');
 const optionTag = getTagHelperRapid('option');
 const selectTag = getTagHelperRapid('select');
+const multiselectTag = getTagHelperRapid('multiselect');
 /**
  * Top level template for Navigation class
  *
@@ -276,6 +278,45 @@ ${when((x) => !x.hideSideBar, sideNavTemplate)}
             `)}
         </${selectTag}>
       `)}
+    <div
+      class="feature-flags-wrapper"
+      part="feature-flags-wrapper"
+      ?hidden=${(x) => !isFeatureFlagsNavVisible(x)}
+    >
+      <${buttonTag}
+        appearance="neutral-grey"
+        class="nav-button feature-flags-button"
+        data-test-id="feature-flags-button"
+        part="feature-flags-button"
+        aria-label="Feature flags"
+        aria-haspopup="true"
+        ?aria-expanded=${(x) => x.featureFlagsPanelOpen}
+        @click=${(x) => x.toggleFeatureFlagsPanel()}
+      >
+        Feature Flags
+      </${buttonTag}>
+      ${when((x) => x.featureFlagsPanelOpen, html `
+          <div
+            class="feature-flags-panel"
+            data-test-id="feature-flags-selector"
+            part="feature-flags-panel"
+          >
+            <${multiselectTag}
+              class="feature-flags-selector"
+              name="Features"
+              ?search="${() => false}"
+              ?all="${() => false}"
+              ?creatable="${() => false}"
+              :options=${(x) => x.getFeatureFlagMultiselectOptions()}
+              :selectedOptions=${(x) => x.getSelectedFeatureFlagValues()}
+              @selectionChange="${(x, c) => x.changeFeatureFlags(c.event)}"
+              aria-label="Select Features"
+            >
+              <span slot="label">Select Features</span>
+            </${multiselectTag}>
+          </div>
+        `)}
+    </div>
 
     <${buttonTag} appearance="neutral-grey" data-test-id="user-button" class="nav-button" aria-label="User button">
       <${iconTag} name="user-circle"></${iconTag}>