@genesislcap/foundation-header 14.497.0 → 14.498.0

package/dist/foundation-header.api.json

@@ -326,6 +326,67 @@
             "endIndex": 6
           }
         },
+        {
+          "kind": "TypeAlias",
+          "canonicalReference": "@genesislcap/foundation-header!FeatureFlagDefinition:type",
+          "docComment": "/**\n * A single feature flag option shown in the header multi-select.\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export type FeatureFlagDefinition = "
+            },
+            {
+              "kind": "Content",
+              "text": "{\n    name: string;\n    label: string;\n}"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "src/main/main.ts",
+          "releaseTag": "Public",
+          "name": "FeatureFlagDefinition",
+          "typeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 2
+          }
+        },
+        {
+          "kind": "TypeAlias",
+          "canonicalReference": "@genesislcap/foundation-header!FeatureFlagOptions:type",
+          "docComment": "/**\n * Options for the feature flags selector\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export type FeatureFlagOptions = "
+            },
+            {
+              "kind": "Content",
+              "text": "{\n    availableFlags: "
+            },
+            {
+              "kind": "Reference",
+              "text": "FeatureFlagDefinition",
+              "canonicalReference": "@genesislcap/foundation-header!FeatureFlagDefinition:type"
+            },
+            {
+              "kind": "Content",
+              "text": "[];\n}"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "src/main/main.ts",
+          "releaseTag": "Public",
+          "name": "FeatureFlagOptions",
+          "typeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 4
+          }
+        },
         {
           "kind": "Class",
           "canonicalReference": "@genesislcap/foundation-header!FoundationHeader:class",
@@ -580,7 +641,7 @@
             },
             {
               "kind": "Content",
-              "text": "{\n    'luminance-icon-clicked': void;\n    'logout-clicked': void;\n    'misc-icon-clicked': void;\n    'notification-icon-clicked': void;\n    'language-changed': void;\n    'nav-button-clicked': "
+              "text": "{\n    'luminance-icon-clicked': void;\n    'logout-clicked': void;\n    'misc-icon-clicked': void;\n    'notification-icon-clicked': void;\n    'language-changed': void;\n    'feature-flags-changed': string[];\n    'nav-button-clicked': "
             },
             {
               "kind": "Reference",
@@ -607,7 +668,7 @@
         {
           "kind": "Class",
           "canonicalReference": "@genesislcap/foundation-header!Navigation:class",
-          "docComment": "/**\n * Navigation micro-frontend includes navigation bar and flyout menu\n *\n * @remarks\n *\n * `foundation-header` micro-frontend can be added to the project to include a navigation bar and flyout menu. There are multiple ways that the behaviour of the component can be configured - the icon shown on the navigation bar and flyout menu (this shows the Genesis logo by default). - navigation links at the left-hand side of the navigation bar. - the control buttons on the right-hand side of the navigation bar can be shown or hidden, and their behaviour controlled via event listeners - The contents of the flyout menu.\n *\n * @param logo - src - Option attribute which sets the source of the image in the navigation bar and flyout menu. The Genesis logo will be shown if this attribute is not provided.\n *\n * @param logo - alt-text -Descriptive logo text.\n *\n * @param show - luminance-toggle-button - Boolean attribute which controls whether the navigation bar will display the luminance toggle icon.\n *\n * @param show - misc-toggle-button - Boolean attribute which controls whether the navigation bar will display the miscellaneous behaviour icon.\n *\n * @param notification - icon-clicked - Boolean attribute which controls whether the navigation bar will display the show notification icon.\n *\n * @param show - connection-indicator - Boolean attribute which controls whether the navigation bar will display the connection indicator.\n *\n * @param show - environment-indicator - Boolean attribute which controls whether the navigation bar will display the environment indicator.\n *\n * @param show - language-selector - Boolean attribute which controls whether the navigation bar will display the language selector.\n *\n * @param hide - side-bar - Boolean attribute which controls whether the navigation bar will display the side bar.\n *\n * @param show - account-menu - Boolean attribute which controls whether the navigation bar will display the account menu.\n *\n * @param logout - button-position - String attribute which controls the position of the logout button in the header.\n *\n * @param userName - String which defines the username to be displayed in the navigation bar.\n *\n * @param routeButtons - Array of objects which define the route buttons to be displayed in the navigation bar.\n *\n * @param routeNavItems - Array of {@link @genesislcap/foundation-ui#FoundationRouteNavItem | FoundationRouteNavItems} which define the route buttons to be displayed in the navigation bar.\n *\n * @param languageOptions - Object which defines the language options to be displayed in the language selector.\n *\n * @param inactivity - timeout-minutes - Number attribute which sets the inactivity timeout in minutes (default: 30).\n *\n * @param inactivity - warning-minutes - Number attribute which sets the inactivity warning time in minutes before timeout (default: 5).\n *\n * @param enable - inactivity-monitoring - Boolean attribute which controls whether to enable inactivity monitoring (default: true).\n *\n * @fires\n *\n * luminance-icon-clicked - Dispatched when the user clicks on the luminance toggle icon in the navigation bar.\n *\n * @fires\n *\n * misc-icon-clicked - Dispatched when the user clicks on the miscellaneous behaviour icon in the navigation bar.\n *\n * @fires\n *\n * notification-icon-clicked - Dispatched when the user clicks on the notification icon in the navigation bar.\n *\n * @fires\n *\n * language-changed - Dispatched when the user changes the language in the language selector.\n *\n * @fires\n *\n * logout-clicked - Dispatched when the user clicks logout button.\n *\n * @fires\n *\n * nav-button-clicked - Dispatched when the user clicks a navigation button. detail: `NavButtonClickDetail`\n *\n * @public\n */\n",
+          "docComment": "/**\n * Navigation micro-frontend includes navigation bar and flyout menu\n *\n * @remarks\n *\n * `foundation-header` micro-frontend can be added to the project to include a navigation bar and flyout menu. There are multiple ways that the behaviour of the component can be configured - the icon shown on the navigation bar and flyout menu (this shows the Genesis logo by default). - navigation links at the left-hand side of the navigation bar. - the control buttons on the right-hand side of the navigation bar can be shown or hidden, and their behaviour controlled via event listeners - The contents of the flyout menu.\n *\n * @param logo - src - Option attribute which sets the source of the image in the navigation bar and flyout menu. The Genesis logo will be shown if this attribute is not provided.\n *\n * @param logo - alt-text -Descriptive logo text.\n *\n * @param show - luminance-toggle-button - Boolean attribute which controls whether the navigation bar will display the luminance toggle icon.\n *\n * @param show - misc-toggle-button - Boolean attribute which controls whether the navigation bar will display the miscellaneous behaviour icon.\n *\n * @param notification - icon-clicked - Boolean attribute which controls whether the navigation bar will display the show notification icon.\n *\n * @param show - connection-indicator - Boolean attribute which controls whether the navigation bar will display the connection indicator.\n *\n * @param show - environment-indicator - Boolean attribute which controls whether the navigation bar will display the environment indicator.\n *\n * @param show - language-selector - Boolean attribute which controls whether the navigation bar will display the language selector.\n *\n * @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.\n *\n * @param hide - side-bar - Boolean attribute which controls whether the navigation bar will display the side bar.\n *\n * @param show - account-menu - Boolean attribute which controls whether the navigation bar will display the account menu.\n *\n * @param logout - button-position - String attribute which controls the position of the logout button in the header.\n *\n * @param userName - String which defines the username to be displayed in the navigation bar.\n *\n * @param routeButtons - Array of objects which define the route buttons to be displayed in the navigation bar.\n *\n * @param routeNavItems - Array of {@link @genesislcap/foundation-ui#FoundationRouteNavItem | FoundationRouteNavItems} which define the route buttons to be displayed in the navigation bar.\n *\n * @param languageOptions - Object which defines the language options to be displayed in the language selector.\n *\n * @param featureFlagOptions - Object which defines the feature flag options. When `availableFlags` is non-empty, the Feature Flags button is shown automatically.\n *\n * @param inactivity - timeout-minutes - Number attribute which sets the inactivity timeout in minutes (default: 30).\n *\n * @param inactivity - warning-minutes - Number attribute which sets the inactivity warning time in minutes before timeout (default: 5).\n *\n * @param enable - inactivity-monitoring - Boolean attribute which controls whether to enable inactivity monitoring (default: true).\n *\n * @fires\n *\n * luminance-icon-clicked - Dispatched when the user clicks on the luminance toggle icon in the navigation bar.\n *\n * @fires\n *\n * misc-icon-clicked - Dispatched when the user clicks on the miscellaneous behaviour icon in the navigation bar.\n *\n * @fires\n *\n * notification-icon-clicked - Dispatched when the user clicks on the notification icon in the navigation bar.\n *\n * @fires\n *\n * language-changed - Dispatched when the user changes the language in the language selector.\n *\n * @fires\n *\n * feature-flags-changed - Dispatched when the user changes the selected feature flags. detail: `string[]`\n *\n * @fires\n *\n * logout-clicked - Dispatched when the user clicks logout button.\n *\n * @fires\n *\n * nav-button-clicked - Dispatched when the user clicks a navigation button. detail: `NavButtonClickDetail`\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -660,6 +721,59 @@
               "isProtected": false,
               "isAbstract": false
             },
+            {
+              "kind": "Method",
+              "canonicalReference": "@genesislcap/foundation-header!Navigation#changeFeatureFlags:member(1)",
+              "docComment": "/**\n * Changes the active URL feature flags and reloads the page.\n *\n * @remarks\n *\n * 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}.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "changeFeatureFlags(e: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "CustomEvent",
+                  "canonicalReference": "!CustomEvent:interface"
+                },
+                {
+                  "kind": "Content",
+                  "text": "<string[]>"
+                },
+                {
+                  "kind": "Content",
+                  "text": "): "
+                },
+                {
+                  "kind": "Content",
+                  "text": "void"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isStatic": false,
+              "returnTypeTokenRange": {
+                "startIndex": 4,
+                "endIndex": 5
+              },
+              "releaseTag": "Public",
+              "isProtected": false,
+              "overloadIndex": 1,
+              "parameters": [
+                {
+                  "parameterName": "e",
+                  "parameterTypeTokenRange": {
+                    "startIndex": 1,
+                    "endIndex": 3
+                  },
+                  "isOptional": false
+                }
+              ],
+              "isOptional": false,
+              "isAbstract": false,
+              "name": "changeFeatureFlags"
+            },
             {
               "kind": "Method",
               "canonicalReference": "@genesislcap/foundation-header!Navigation#changeLanguage:member(1)",
@@ -868,6 +982,99 @@
               "isProtected": false,
               "isAbstract": false
             },
+            {
+              "kind": "Property",
+              "canonicalReference": "@genesislcap/foundation-header!Navigation#featureFlagOptions:member",
+              "docComment": "/**\n * Feature flags available in the header selector.\n *\n * @remarks\n *\n * 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.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "featureFlagOptions: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "FeatureFlagOptions",
+                  "canonicalReference": "@genesislcap/foundation-header!FeatureFlagOptions:type"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "featureFlagOptions",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isStatic": false,
+              "isProtected": false,
+              "isAbstract": false
+            },
+            {
+              "kind": "Method",
+              "canonicalReference": "@genesislcap/foundation-header!Navigation#getFeatureFlagMultiselectOptions:member(1)",
+              "docComment": "/**\n * Multiselect options derived from {@link Navigation.featureFlagOptions}.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "getFeatureFlagMultiselectOptions(): "
+                },
+                {
+                  "kind": "Content",
+                  "text": "{\n        value: string;\n        label: string;\n    }[]"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isStatic": false,
+              "returnTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "releaseTag": "Public",
+              "isProtected": false,
+              "overloadIndex": 1,
+              "parameters": [],
+              "isOptional": false,
+              "isAbstract": false,
+              "name": "getFeatureFlagMultiselectOptions"
+            },
+            {
+              "kind": "Method",
+              "canonicalReference": "@genesislcap/foundation-header!Navigation#getSelectedFeatureFlagValues:member(1)",
+              "docComment": "/**\n * Currently selected feature flag names based on URL `feature.*` params. Multiselect expects selected option *values* (strings), not full option objects.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "getSelectedFeatureFlagValues(): "
+                },
+                {
+                  "kind": "Content",
+                  "text": "string[]"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isStatic": false,
+              "returnTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "releaseTag": "Public",
+              "isProtected": false,
+              "overloadIndex": 1,
+              "parameters": [],
+              "isOptional": false,
+              "isAbstract": false,
+              "name": "getSelectedFeatureFlagValues"
+            },
             {
               "kind": "Method",
               "canonicalReference": "@genesislcap/foundation-header!Navigation#handleNavButtonClick:member(1)",
@@ -1841,6 +2048,36 @@
               "isProtected": false,
               "isAbstract": false
             },
+            {
+              "kind": "Property",
+              "canonicalReference": "@genesislcap/foundation-header!Navigation#showFeatureFlagsSelector:member",
+              "docComment": "/**\n * Optional boolean attribute to force-show the Feature Flags button. Control via `show-feature-flags-selector`\n *\n * @remarks\n *\n * Usually unnecessary: the button is shown automatically when {@link Navigation.featureFlagOptions} has a non-empty `availableFlags` list.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "showFeatureFlagsSelector: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "boolean"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "showFeatureFlagsSelector",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isStatic": false,
+              "isProtected": false,
+              "isAbstract": false
+            },
             {
               "kind": "Property",
               "canonicalReference": "@genesislcap/foundation-header!Navigation#showLanguageSelector:member",
@@ -1961,6 +2198,37 @@
               "isProtected": false,
               "isAbstract": false
             },
+            {
+              "kind": "Method",
+              "canonicalReference": "@genesislcap/foundation-header!Navigation#toggleFeatureFlagsPanel:member(1)",
+              "docComment": "/**\n * Toggles the feature flags panel open/closed.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "toggleFeatureFlagsPanel(): "
+                },
+                {
+                  "kind": "Content",
+                  "text": "void"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isStatic": false,
+              "returnTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "releaseTag": "Public",
+              "isProtected": false,
+              "overloadIndex": 1,
+              "parameters": [],
+              "isOptional": false,
+              "isAbstract": false,
+              "name": "toggleFeatureFlagsPanel"
+            },
             {
               "kind": "Method",
               "canonicalReference": "@genesislcap/foundation-header!Navigation#toLocalisedText:member(1)",

package/dist/foundation-header.d.ts

@@ -170,6 +170,25 @@ export declare const dynamicTemplate: ViewTemplate<Navigation>;
  */
 export declare type ElementTargetId = HeaderTargetId | NavTargetId | SideNavTargetId;
 
+/**
+ * A single feature flag option shown in the header multi-select.
+ * @public
+ */
+export declare 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 declare type FeatureFlagOptions = {
+    availableFlags: FeatureFlagDefinition[];
+};
+
 /**
  * FoundationHeader.
  *
@@ -311,6 +330,7 @@ export declare type NavEventDetailMap = {
     'misc-icon-clicked': void;
     'notification-icon-clicked': void;
     'language-changed': void;
+    'feature-flags-changed': string[];
     'nav-button-clicked': NavButtonClickDetail;
 };
 
@@ -334,6 +354,7 @@ export declare type NavEventDetailMap = {
  * @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.
@@ -342,6 +363,7 @@ export declare type NavEventDetailMap = {
  * @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).
@@ -352,6 +374,7 @@ export declare type NavEventDetailMap = {
  * @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`
  *
@@ -416,6 +439,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
@@ -514,6 +541,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`
@@ -719,6 +789,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
@@ -749,7 +845,7 @@ export declare class Navigation extends Navigation_base {
 }
 
 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?: EmitOptions] : [type: K, detail: NavEventDetailMap[K], options?: EmitOptions]): 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?: EmitOptions] : [type: K, detail: NavEventDetailMap[K], options?: EmitOptions]): EmitReturn;
     accessKey: string;
     readonly accessKeyLabel: string;
     autocapitalize: string;
@@ -1214,6 +1310,7 @@ declare type TemplateComponents = {
     environmentIndicator: TemplateElementDependency;
     select: TemplateElementDependency;
     option: TemplateElementDependency;
+    multiselect: TemplateElementDependency;
     flyout: TemplateElementDependency;
     provider: TemplateElementDependency;
 };

package/dist/react.cjs

@@ -24,7 +24,7 @@ const ControlPanel = React.forwardRef(function ControlPanel(props, ref) {
 });
 
 const Navigation = React.forwardRef(function Navigation(props, ref) {
-  const { onLuminanceIconClicked, onMiscIconClicked, onNotificationIconClicked, onLanguageChanged, onLogoutClicked, onNavButtonClicked, children, ...rest } = props;
+  const { onLuminanceIconClicked, onMiscIconClicked, onNotificationIconClicked, onLanguageChanged, onFeatureFlagsChanged, onLogoutClicked, onNavButtonClicked, children, ...rest } = props;
   const _innerRef = React.useRef(null);
   const _onLuminanceIconClickedRef = React.useRef(onLuminanceIconClicked);
   _onLuminanceIconClickedRef.current = onLuminanceIconClicked;
@@ -34,6 +34,8 @@ const Navigation = React.forwardRef(function Navigation(props, ref) {
   _onNotificationIconClickedRef.current = onNotificationIconClicked;
   const _onLanguageChangedRef = React.useRef(onLanguageChanged);
   _onLanguageChangedRef.current = onLanguageChanged;
+  const _onFeatureFlagsChangedRef = React.useRef(onFeatureFlagsChanged);
+  _onFeatureFlagsChangedRef.current = onFeatureFlagsChanged;
   const _onLogoutClickedRef = React.useRef(onLogoutClicked);
   _onLogoutClickedRef.current = onLogoutClicked;
   const _onNavButtonClickedRef = React.useRef(onNavButtonClicked);
@@ -49,6 +51,8 @@ const Navigation = React.forwardRef(function Navigation(props, ref) {
     el.addEventListener('notification-icon-clicked', _onNotificationIconClickedFn);
     const _onLanguageChangedFn = (e) => _onLanguageChangedRef.current?.(e);
     el.addEventListener('language-changed', _onLanguageChangedFn);
+    const _onFeatureFlagsChangedFn = (e) => _onFeatureFlagsChangedRef.current?.(e);
+    el.addEventListener('feature-flags-changed', _onFeatureFlagsChangedFn);
     const _onLogoutClickedFn = (e) => _onLogoutClickedRef.current?.(e);
     el.addEventListener('logout-clicked', _onLogoutClickedFn);
     const _onNavButtonClickedFn = (e) => _onNavButtonClickedRef.current?.(e);
@@ -58,6 +62,7 @@ const Navigation = React.forwardRef(function Navigation(props, ref) {
       el.removeEventListener('misc-icon-clicked', _onMiscIconClickedFn);
       el.removeEventListener('notification-icon-clicked', _onNotificationIconClickedFn);
       el.removeEventListener('language-changed', _onLanguageChangedFn);
+      el.removeEventListener('feature-flags-changed', _onFeatureFlagsChangedFn);
       el.removeEventListener('logout-clicked', _onLogoutClickedFn);
       el.removeEventListener('nav-button-clicked', _onNavButtonClickedFn);
     };
@@ -66,7 +71,7 @@ const Navigation = React.forwardRef(function Navigation(props, ref) {
 });
 
 const ZeroHeader = React.forwardRef(function ZeroHeader(props, ref) {
-  const { onLuminanceIconClicked, onMiscIconClicked, onNotificationIconClicked, onLanguageChanged, onLogoutClicked, onNavButtonClicked, children, ...rest } = props;
+  const { onLuminanceIconClicked, onMiscIconClicked, onNotificationIconClicked, onLanguageChanged, onFeatureFlagsChanged, onLogoutClicked, onNavButtonClicked, children, ...rest } = props;
   const _innerRef = React.useRef(null);
   const _onLuminanceIconClickedRef = React.useRef(onLuminanceIconClicked);
   _onLuminanceIconClickedRef.current = onLuminanceIconClicked;
@@ -76,6 +81,8 @@ const ZeroHeader = React.forwardRef(function ZeroHeader(props, ref) {
   _onNotificationIconClickedRef.current = onNotificationIconClicked;
   const _onLanguageChangedRef = React.useRef(onLanguageChanged);
   _onLanguageChangedRef.current = onLanguageChanged;
+  const _onFeatureFlagsChangedRef = React.useRef(onFeatureFlagsChanged);
+  _onFeatureFlagsChangedRef.current = onFeatureFlagsChanged;
   const _onLogoutClickedRef = React.useRef(onLogoutClicked);
   _onLogoutClickedRef.current = onLogoutClicked;
   const _onNavButtonClickedRef = React.useRef(onNavButtonClicked);
@@ -91,6 +98,8 @@ const ZeroHeader = React.forwardRef(function ZeroHeader(props, ref) {
     el.addEventListener('notification-icon-clicked', _onNotificationIconClickedFn);
     const _onLanguageChangedFn = (e) => _onLanguageChangedRef.current?.(e);
     el.addEventListener('language-changed', _onLanguageChangedFn);
+    const _onFeatureFlagsChangedFn = (e) => _onFeatureFlagsChangedRef.current?.(e);
+    el.addEventListener('feature-flags-changed', _onFeatureFlagsChangedFn);
     const _onLogoutClickedFn = (e) => _onLogoutClickedRef.current?.(e);
     el.addEventListener('logout-clicked', _onLogoutClickedFn);
     const _onNavButtonClickedFn = (e) => _onNavButtonClickedRef.current?.(e);
@@ -100,6 +109,7 @@ const ZeroHeader = React.forwardRef(function ZeroHeader(props, ref) {
       el.removeEventListener('misc-icon-clicked', _onMiscIconClickedFn);
       el.removeEventListener('notification-icon-clicked', _onNotificationIconClickedFn);
       el.removeEventListener('language-changed', _onLanguageChangedFn);
+      el.removeEventListener('feature-flags-changed', _onFeatureFlagsChangedFn);
       el.removeEventListener('logout-clicked', _onLogoutClickedFn);
       el.removeEventListener('nav-button-clicked', _onNavButtonClickedFn);
     };
@@ -108,7 +118,7 @@ const ZeroHeader = React.forwardRef(function ZeroHeader(props, ref) {
 });
 
 const RapidHeader = React.forwardRef(function RapidHeader(props, ref) {
-  const { onLuminanceIconClicked, onMiscIconClicked, onNotificationIconClicked, onLanguageChanged, onLogoutClicked, onNavButtonClicked, children, ...rest } = props;
+  const { onLuminanceIconClicked, onMiscIconClicked, onNotificationIconClicked, onLanguageChanged, onFeatureFlagsChanged, onLogoutClicked, onNavButtonClicked, children, ...rest } = props;
   const _innerRef = React.useRef(null);
   const _onLuminanceIconClickedRef = React.useRef(onLuminanceIconClicked);
   _onLuminanceIconClickedRef.current = onLuminanceIconClicked;
@@ -118,6 +128,8 @@ const RapidHeader = React.forwardRef(function RapidHeader(props, ref) {
   _onNotificationIconClickedRef.current = onNotificationIconClicked;
   const _onLanguageChangedRef = React.useRef(onLanguageChanged);
   _onLanguageChangedRef.current = onLanguageChanged;
+  const _onFeatureFlagsChangedRef = React.useRef(onFeatureFlagsChanged);
+  _onFeatureFlagsChangedRef.current = onFeatureFlagsChanged;
   const _onLogoutClickedRef = React.useRef(onLogoutClicked);
   _onLogoutClickedRef.current = onLogoutClicked;
   const _onNavButtonClickedRef = React.useRef(onNavButtonClicked);
@@ -133,6 +145,8 @@ const RapidHeader = React.forwardRef(function RapidHeader(props, ref) {
     el.addEventListener('notification-icon-clicked', _onNotificationIconClickedFn);
     const _onLanguageChangedFn = (e) => _onLanguageChangedRef.current?.(e);
     el.addEventListener('language-changed', _onLanguageChangedFn);
+    const _onFeatureFlagsChangedFn = (e) => _onFeatureFlagsChangedRef.current?.(e);
+    el.addEventListener('feature-flags-changed', _onFeatureFlagsChangedFn);
     const _onLogoutClickedFn = (e) => _onLogoutClickedRef.current?.(e);
     el.addEventListener('logout-clicked', _onLogoutClickedFn);
     const _onNavButtonClickedFn = (e) => _onNavButtonClickedRef.current?.(e);
@@ -142,6 +156,7 @@ const RapidHeader = React.forwardRef(function RapidHeader(props, ref) {
       el.removeEventListener('misc-icon-clicked', _onMiscIconClickedFn);
       el.removeEventListener('notification-icon-clicked', _onNotificationIconClickedFn);
       el.removeEventListener('language-changed', _onLanguageChangedFn);
+      el.removeEventListener('feature-flags-changed', _onFeatureFlagsChangedFn);
       el.removeEventListener('logout-clicked', _onLogoutClickedFn);
       el.removeEventListener('nav-button-clicked', _onNavButtonClickedFn);
     };