@carbon-labs/react-ui-shell 0.29.0 → 0.31.0

package/README.md

@@ -34,6 +34,10 @@ components are provided by `@carbon-labs/react-ui-shell`:
 - `SideNavLink`
 - `SideNavMenu`
 - `SideNavMenuItem`
+- `HeaderPopover`
+- `HeaderPopoverActions`
+- `HeaderPopoverButton`
+- `HeaderPopoverContent`
 - `HeaderPanel`
 - `HeaderDivider`
 - `SharkFinIcon`

package/es/components/HeaderPopover.d.ts

@@ -0,0 +1,77 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { ToggletipActions, ToggleTipButtonProps, ToggletipContentProps, ToggletipProps } from '@carbon/react';
+/**
+ * Used as a container for the button and content of a toggletip. This component
+ * is responsible for coordinating between interactions with the button and the
+ * visibility of the content
+ */
+export declare function HeaderPopover({ align, as, autoAlign, className: customClassName, children, defaultOpen, ...rest }: ToggletipProps<any>): import("react/jsx-runtime").JSX.Element;
+export declare namespace HeaderPopover {
+    var propTypes: {
+        /**
+         * Specify how the toggletip should align with the button
+         */
+        align: PropTypes.Requireable<string>;
+        /**
+         * Provide an offset value for alignment axis.
+         */
+        alignmentAxisOffset: PropTypes.Requireable<number>;
+        /**
+         * Provide a custom element or component to render the top-level node for the
+         * component.
+         */
+        as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        /**
+         * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+         */
+        autoAlign: PropTypes.Requireable<boolean>;
+        /**
+         * Custom children to be rendered as the content of the label
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide a custom class name to be added to the outermost node in the
+         * component
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify if the toggletip should be open by default
+         */
+        defaultOpen: PropTypes.Requireable<boolean>;
+    };
+}
+/**
+ * `ToggletipButton` controls the visibility of the Toggletip through mouse
+ * clicks and keyboard interactions.
+ */
+export declare function HeaderPopoverButton<T extends React.ElementType>({ children, className: customClassName, label, as: BaseComponent, ...rest }: ToggleTipButtonProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace HeaderPopoverButton {
+    var propTypes: {
+        /**
+         * Custom children to be rendered as the content of the label
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide a custom class name to be added to the outermost node in the
+         * component
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Provide an accessible label for this button
+         */
+        label: PropTypes.Requireable<string>;
+    };
+}
+/**
+ * `ToggletipContent` is a wrapper around `PopoverContent`. It places the
+ * `children` passed in as a prop inside of `PopoverContent` so that they will
+ * be rendered inside of the popover for this component.
+ */
+export declare function HeaderPopoverContent({ children, className, ...rest }: ToggletipContentProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * `ToggletipActions` is a container for one or two actions present at the base
+ * of a toggletip. It is used for layout of these items.
+ */
+declare const HeaderPopoverActions: typeof ToggletipActions;
+export { HeaderPopoverActions };

package/es/components/HeaderPopover.js

@@ -0,0 +1,219 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
+import cx from '../_virtual/index.js';
+import PropTypes from 'prop-types';
+import React, { useRef, useState, useContext } from 'react';
+import { Popover, ToggletipContent, ToggletipActions, IconButton } from '@carbon/react';
+import { Escape } from '../internal/keyboard/keys.js';
+import { match } from '../internal/keyboard/match.js';
+import { useWindowEvent } from '../internal/useEvent.js';
+import { useId } from '../internal/useId.js';
+import { usePrefix } from '../internal/usePrefix.js';
+
+// Used to coordinate accessibility props between button and content along with
+// the actions to open and close the toggletip
+const HeaderPopoverContext = /*#__PURE__*/React.createContext(undefined);
+function useToggletip() {
+  return useContext(HeaderPopoverContext);
+}
+
+/**
+ * Used as a container for the button and content of a toggletip. This component
+ * is responsible for coordinating between interactions with the button and the
+ * visibility of the content
+ */
+function HeaderPopover(_ref) {
+  let {
+    align,
+    as,
+    autoAlign,
+    className: customClassName,
+    children,
+    defaultOpen = false,
+    ...rest
+  } = _ref;
+  const ref = useRef(null);
+  const [open, setOpen] = useState(defaultOpen);
+  const prefix = usePrefix();
+  const id = useId();
+  const className = cx(customClassName, {
+    [`${prefix}--header-action`]: true,
+    [`${prefix}--autoalign`]: autoAlign
+  });
+  const actions = {
+    toggle: () => {
+      setOpen(!open);
+    },
+    close: () => {
+      setOpen(false);
+    }
+  };
+  const value = {
+    buttonProps: {
+      'aria-expanded': open,
+      'aria-controls': id,
+      onClick: actions.toggle
+    },
+    contentProps: {
+      id
+    },
+    onClick: {
+      onClick: actions.toggle
+    }
+  };
+  const onKeyDown = event => {
+    if (open && match(event, Escape)) {
+      actions.close();
+
+      // If the menu is closed while focus is still inside the menu, it should return to the trigger button  (#12922)
+      const button = ref.current?.children[0];
+      if (button instanceof HTMLButtonElement) {
+        button.focus();
+      }
+    }
+  };
+  const handleBlur = event => {
+    // Do not close if the menu itself is clicked, should only close on focus out
+    if (open && event.relatedTarget === null) {
+      return;
+    }
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      // The menu should be closed when focus leaves the `Toggletip`  (#12922)
+      actions.close();
+    }
+  };
+
+  // If the `Toggletip` is the last focusable item in the tab order, it should also close when the browser window loses focus  (#12922)
+  useWindowEvent('blur', () => {
+    if (open) {
+      actions.close();
+    }
+  });
+  useWindowEvent('click', event => {
+    if (open && ref.current && !ref.current.contains(event.target)) {
+      actions.close();
+    }
+  });
+  return /*#__PURE__*/React.createElement(HeaderPopoverContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React.createElement(Popover, _extends({
+    align: align,
+    autoAlign: autoAlign,
+    as: as,
+    isTabTip: true,
+    className: className,
+    dropShadow: false,
+    highContrast: false,
+    open: open,
+    onKeyDown: onKeyDown,
+    onBlur: handleBlur,
+    ref: ref
+  }, rest), children));
+}
+HeaderPopover.propTypes = {
+  /**
+   * Specify how the toggletip should align with the button
+   */
+  align: PropTypes.oneOf(['top', 'bottom', 'left', 'right', 'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
+  /**
+   * Provide an offset value for alignment axis.
+   */
+  alignmentAxisOffset: PropTypes.number,
+  /**
+   * Provide a custom element or component to render the top-level node for the
+   * component.
+   */
+  as: PropTypes.elementType,
+  /**
+   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+   */
+  autoAlign: PropTypes.bool,
+  /**
+   * Custom children to be rendered as the content of the label
+   */
+  children: PropTypes.node,
+  /**
+   * Provide a custom class name to be added to the outermost node in the
+   * component
+   */
+  className: PropTypes.string,
+  /**
+   * Specify if the toggletip should be open by default
+   */
+  defaultOpen: PropTypes.bool
+};
+
+/**
+ * `ToggletipButton` controls the visibility of the Toggletip through mouse
+ * clicks and keyboard interactions.
+ */
+
+function HeaderPopoverButton(_ref2) {
+  let {
+    children,
+    className: customClassName,
+    label = 'Show information',
+    as: BaseComponent,
+    ...rest
+  } = _ref2;
+  const toggletip = useToggletip();
+  const prefix = usePrefix();
+  const className = cx(customClassName, {
+    [`${prefix}--header-action__button`]: true
+  });
+  const ComponentToggle = BaseComponent ?? IconButton;
+  return /*#__PURE__*/React.createElement(ComponentToggle, _extends({}, toggletip?.onClick, {
+    className: className,
+    kind: BaseComponent ? null : 'ghost',
+    label: label,
+    highContrast: false
+  }, rest), children);
+}
+HeaderPopoverButton.propTypes = {
+  /**
+   * Custom children to be rendered as the content of the label
+   */
+  children: PropTypes.node,
+  /**
+   * Provide a custom class name to be added to the outermost node in the
+   * component
+   */
+  className: PropTypes.string,
+  /**
+   * Provide an accessible label for this button
+   */
+  label: PropTypes.string
+};
+
+/**
+ * `ToggletipContent` is a wrapper around `PopoverContent`. It places the
+ * `children` passed in as a prop inside of `PopoverContent` so that they will
+ * be rendered inside of the popover for this component.
+ */
+function HeaderPopoverContent(_ref3) {
+  let {
+    children,
+    className,
+    ...rest
+  } = _ref3;
+  const prefix = usePrefix();
+  return /*#__PURE__*/React.createElement(ToggletipContent, _extends({
+    className: cx(className, {
+      [`${prefix}--header-action__content`]: true
+    })
+  }, rest), children);
+}
+
+/**
+ * `ToggletipActions` is a container for one or two actions present at the base
+ * of a toggletip. It is used for layout of these items.
+ */
+const HeaderPopoverActions = ToggletipActions;
+
+export { HeaderPopover, HeaderPopoverActions, HeaderPopoverButton, HeaderPopoverContent };

package/es/index.d.ts

@@ -13,6 +13,7 @@ export { SideNavLinkPopover } from './components/SideNavLinkPopover.js';
 export { SideNavMenu } from './components/SideNavMenu.js';
 export { SideNavMenuItem } from './components/SideNavMenuItem.js';
 export { HeaderContainer } from './components/HeaderContainer';
+export { HeaderPopover, HeaderPopoverActions, HeaderPopoverButton, HeaderPopoverContent, } from './components/HeaderPopover';
 export { HeaderPanel } from './components/HeaderPanel';
 export { SharkFinIcon } from './components/SharkFinIcon';
 export { HeaderDivider } from './components/HeaderDivider';

package/es/index.js

@@ -12,6 +12,7 @@ export { SideNavLinkPopover } from './components/SideNavLinkPopover.js';
 export { SideNavMenu } from './components/SideNavMenu.js';
 export { SideNavMenuItem } from './components/SideNavMenuItem.js';
 export { HeaderContainer } from './components/HeaderContainer.js';
+export { HeaderPopover, HeaderPopoverActions, HeaderPopoverButton, HeaderPopoverContent } from './components/HeaderPopover.js';
 export { HeaderPanel } from './components/HeaderPanel.js';
 export { SharkFinIcon } from './components/SharkFinIcon.js';
 export { HeaderDivider } from './components/HeaderDivider.js';

package/lib/components/HeaderPopover.d.ts

@@ -0,0 +1,77 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { ToggletipActions, ToggleTipButtonProps, ToggletipContentProps, ToggletipProps } from '@carbon/react';
+/**
+ * Used as a container for the button and content of a toggletip. This component
+ * is responsible for coordinating between interactions with the button and the
+ * visibility of the content
+ */
+export declare function HeaderPopover({ align, as, autoAlign, className: customClassName, children, defaultOpen, ...rest }: ToggletipProps<any>): import("react/jsx-runtime").JSX.Element;
+export declare namespace HeaderPopover {
+    var propTypes: {
+        /**
+         * Specify how the toggletip should align with the button
+         */
+        align: PropTypes.Requireable<string>;
+        /**
+         * Provide an offset value for alignment axis.
+         */
+        alignmentAxisOffset: PropTypes.Requireable<number>;
+        /**
+         * Provide a custom element or component to render the top-level node for the
+         * component.
+         */
+        as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        /**
+         * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+         */
+        autoAlign: PropTypes.Requireable<boolean>;
+        /**
+         * Custom children to be rendered as the content of the label
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide a custom class name to be added to the outermost node in the
+         * component
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify if the toggletip should be open by default
+         */
+        defaultOpen: PropTypes.Requireable<boolean>;
+    };
+}
+/**
+ * `ToggletipButton` controls the visibility of the Toggletip through mouse
+ * clicks and keyboard interactions.
+ */
+export declare function HeaderPopoverButton<T extends React.ElementType>({ children, className: customClassName, label, as: BaseComponent, ...rest }: ToggleTipButtonProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace HeaderPopoverButton {
+    var propTypes: {
+        /**
+         * Custom children to be rendered as the content of the label
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide a custom class name to be added to the outermost node in the
+         * component
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Provide an accessible label for this button
+         */
+        label: PropTypes.Requireable<string>;
+    };
+}
+/**
+ * `ToggletipContent` is a wrapper around `PopoverContent`. It places the
+ * `children` passed in as a prop inside of `PopoverContent` so that they will
+ * be rendered inside of the popover for this component.
+ */
+export declare function HeaderPopoverContent({ children, className, ...rest }: ToggletipContentProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * `ToggletipActions` is a container for one or two actions present at the base
+ * of a toggletip. It is used for layout of these items.
+ */
+declare const HeaderPopoverActions: typeof ToggletipActions;
+export { HeaderPopoverActions };

package/lib/components/HeaderPopover.js

@@ -0,0 +1,224 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
+var index = require('../_virtual/index.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var react = require('@carbon/react');
+var keys = require('../internal/keyboard/keys.js');
+var match = require('../internal/keyboard/match.js');
+var useEvent = require('../internal/useEvent.js');
+var useId = require('../internal/useId.js');
+var usePrefix = require('../internal/usePrefix.js');
+
+// Used to coordinate accessibility props between button and content along with
+// the actions to open and close the toggletip
+const HeaderPopoverContext = /*#__PURE__*/React.createContext(undefined);
+function useToggletip() {
+  return React.useContext(HeaderPopoverContext);
+}
+
+/**
+ * Used as a container for the button and content of a toggletip. This component
+ * is responsible for coordinating between interactions with the button and the
+ * visibility of the content
+ */
+function HeaderPopover(_ref) {
+  let {
+    align,
+    as,
+    autoAlign,
+    className: customClassName,
+    children,
+    defaultOpen = false,
+    ...rest
+  } = _ref;
+  const ref = React.useRef(null);
+  const [open, setOpen] = React.useState(defaultOpen);
+  const prefix = usePrefix.usePrefix();
+  const id = useId.useId();
+  const className = index.default(customClassName, {
+    [`${prefix}--header-action`]: true,
+    [`${prefix}--autoalign`]: autoAlign
+  });
+  const actions = {
+    toggle: () => {
+      setOpen(!open);
+    },
+    close: () => {
+      setOpen(false);
+    }
+  };
+  const value = {
+    buttonProps: {
+      'aria-expanded': open,
+      'aria-controls': id,
+      onClick: actions.toggle
+    },
+    contentProps: {
+      id
+    },
+    onClick: {
+      onClick: actions.toggle
+    }
+  };
+  const onKeyDown = event => {
+    if (open && match.match(event, keys.Escape)) {
+      actions.close();
+
+      // If the menu is closed while focus is still inside the menu, it should return to the trigger button  (#12922)
+      const button = ref.current?.children[0];
+      if (button instanceof HTMLButtonElement) {
+        button.focus();
+      }
+    }
+  };
+  const handleBlur = event => {
+    // Do not close if the menu itself is clicked, should only close on focus out
+    if (open && event.relatedTarget === null) {
+      return;
+    }
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      // The menu should be closed when focus leaves the `Toggletip`  (#12922)
+      actions.close();
+    }
+  };
+
+  // If the `Toggletip` is the last focusable item in the tab order, it should also close when the browser window loses focus  (#12922)
+  useEvent.useWindowEvent('blur', () => {
+    if (open) {
+      actions.close();
+    }
+  });
+  useEvent.useWindowEvent('click', event => {
+    if (open && ref.current && !ref.current.contains(event.target)) {
+      actions.close();
+    }
+  });
+  return /*#__PURE__*/React.createElement(HeaderPopoverContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React.createElement(react.Popover, _rollupPluginBabelHelpers.extends({
+    align: align,
+    autoAlign: autoAlign,
+    as: as,
+    isTabTip: true,
+    className: className,
+    dropShadow: false,
+    highContrast: false,
+    open: open,
+    onKeyDown: onKeyDown,
+    onBlur: handleBlur,
+    ref: ref
+  }, rest), children));
+}
+HeaderPopover.propTypes = {
+  /**
+   * Specify how the toggletip should align with the button
+   */
+  align: PropTypes.oneOf(['top', 'bottom', 'left', 'right', 'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
+  /**
+   * Provide an offset value for alignment axis.
+   */
+  alignmentAxisOffset: PropTypes.number,
+  /**
+   * Provide a custom element or component to render the top-level node for the
+   * component.
+   */
+  as: PropTypes.elementType,
+  /**
+   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+   */
+  autoAlign: PropTypes.bool,
+  /**
+   * Custom children to be rendered as the content of the label
+   */
+  children: PropTypes.node,
+  /**
+   * Provide a custom class name to be added to the outermost node in the
+   * component
+   */
+  className: PropTypes.string,
+  /**
+   * Specify if the toggletip should be open by default
+   */
+  defaultOpen: PropTypes.bool
+};
+
+/**
+ * `ToggletipButton` controls the visibility of the Toggletip through mouse
+ * clicks and keyboard interactions.
+ */
+
+function HeaderPopoverButton(_ref2) {
+  let {
+    children,
+    className: customClassName,
+    label = 'Show information',
+    as: BaseComponent,
+    ...rest
+  } = _ref2;
+  const toggletip = useToggletip();
+  const prefix = usePrefix.usePrefix();
+  const className = index.default(customClassName, {
+    [`${prefix}--header-action__button`]: true
+  });
+  const ComponentToggle = BaseComponent ?? react.IconButton;
+  return /*#__PURE__*/React.createElement(ComponentToggle, _rollupPluginBabelHelpers.extends({}, toggletip?.onClick, {
+    className: className,
+    kind: BaseComponent ? null : 'ghost',
+    label: label,
+    highContrast: false
+  }, rest), children);
+}
+HeaderPopoverButton.propTypes = {
+  /**
+   * Custom children to be rendered as the content of the label
+   */
+  children: PropTypes.node,
+  /**
+   * Provide a custom class name to be added to the outermost node in the
+   * component
+   */
+  className: PropTypes.string,
+  /**
+   * Provide an accessible label for this button
+   */
+  label: PropTypes.string
+};
+
+/**
+ * `ToggletipContent` is a wrapper around `PopoverContent`. It places the
+ * `children` passed in as a prop inside of `PopoverContent` so that they will
+ * be rendered inside of the popover for this component.
+ */
+function HeaderPopoverContent(_ref3) {
+  let {
+    children,
+    className,
+    ...rest
+  } = _ref3;
+  const prefix = usePrefix.usePrefix();
+  return /*#__PURE__*/React.createElement(react.ToggletipContent, _rollupPluginBabelHelpers.extends({
+    className: index.default(className, {
+      [`${prefix}--header-action__content`]: true
+    })
+  }, rest), children);
+}
+
+/**
+ * `ToggletipActions` is a container for one or two actions present at the base
+ * of a toggletip. It is used for layout of these items.
+ */
+const HeaderPopoverActions = react.ToggletipActions;
+
+exports.HeaderPopover = HeaderPopover;
+exports.HeaderPopoverActions = HeaderPopoverActions;
+exports.HeaderPopoverButton = HeaderPopoverButton;
+exports.HeaderPopoverContent = HeaderPopoverContent;

package/lib/index.d.ts

@@ -13,6 +13,7 @@ export { SideNavLinkPopover } from './components/SideNavLinkPopover.js';
 export { SideNavMenu } from './components/SideNavMenu.js';
 export { SideNavMenuItem } from './components/SideNavMenuItem.js';
 export { HeaderContainer } from './components/HeaderContainer';
+export { HeaderPopover, HeaderPopoverActions, HeaderPopoverButton, HeaderPopoverContent, } from './components/HeaderPopover';
 export { HeaderPanel } from './components/HeaderPanel';
 export { SharkFinIcon } from './components/SharkFinIcon';
 export { HeaderDivider } from './components/HeaderDivider';

package/lib/index.js

@@ -14,6 +14,7 @@ var SideNavLinkPopover = require('./components/SideNavLinkPopover.js');
 var SideNavMenu = require('./components/SideNavMenu.js');
 var SideNavMenuItem = require('./components/SideNavMenuItem.js');
 var HeaderContainer = require('./components/HeaderContainer.js');
+var HeaderPopover = require('./components/HeaderPopover.js');
 var HeaderPanel = require('./components/HeaderPanel.js');
 var SharkFinIcon = require('./components/SharkFinIcon.js');
 var HeaderDivider = require('./components/HeaderDivider.js');
@@ -28,6 +29,10 @@ exports.SideNavLinkPopover = SideNavLinkPopover.SideNavLinkPopover;
 exports.SideNavMenu = SideNavMenu.SideNavMenu;
 exports.SideNavMenuItem = SideNavMenuItem.SideNavMenuItem;
 exports.HeaderContainer = HeaderContainer.HeaderContainer;
+exports.HeaderPopover = HeaderPopover.HeaderPopover;
+exports.HeaderPopoverActions = HeaderPopover.HeaderPopoverActions;
+exports.HeaderPopoverButton = HeaderPopover.HeaderPopoverButton;
+exports.HeaderPopoverContent = HeaderPopover.HeaderPopoverContent;
 exports.HeaderPanel = HeaderPanel.HeaderPanel;
 exports.SharkFinIcon = SharkFinIcon.SharkFinIcon;
 exports.HeaderDivider = HeaderDivider.HeaderDivider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-ui-shell",
-  "version": "0.29.0",
+  "version": "0.31.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -33,5 +33,5 @@
   "dependencies": {
     "@ibm/telemetry-js": "^1.9.1"
   },
-  "gitHead": "0b543e502dcedecdc6d8b624536dc3d7f153607b"
+  "gitHead": "b823d1537a2e40e31f7246a6341b68d861c8fd92"
 }

package/scss/styles/_header.scss

@@ -6,6 +6,10 @@
  */
 @use '@carbon/styles/scss/theme' as *;
 
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/utilities/custom-property' as custom-property;
+
 $prefix: 'cds' !default;
 
 .#{$prefix}--header__global {
@@ -28,3 +32,39 @@ $prefix: 'cds' !default;
   .#{$prefix}--menu-button__trigger.#{$prefix}--btn--ghost:not([disabled]) {
   color: $text-secondary;
 }
+
+.#{$prefix}--header-action__button.#{$prefix}--btn--ghost:not([disabled]) svg {
+  fill: $icon-secondary;
+}
+
+.#{$prefix}--header-action.#{$prefix}--popover--open
+  .#{$prefix}--header-action__button.#{$prefix}--btn--ghost:not(
+    [disabled]
+  ):hover
+  svg {
+  fill: $icon-primary;
+}
+
+// TODO: remove when https://github.com/carbon-design-system/carbon/pull/18725 is released
+.#{$prefix}--header-action .#{$prefix}--tooltip-content {
+  color: $text-primary;
+}
+
+.#{$prefix}--header-action.#{$prefix}--popover--open
+  .#{$prefix}--header-action__button {
+  background-color: $layer;
+}
+
+.#{$prefix}--header-action .#{$prefix}--toggletip-content {
+  @include custom-property.declaration('button-focus-color', $focus);
+  @include custom-property.declaration('link-text-color', $link-primary);
+  @include custom-property.declaration(
+    'link-hover-text-color',
+    $link-primary-hover
+  );
+  @include custom-property.declaration(
+    'link-visited-text-color',
+    $link-visited
+  );
+  @include custom-property.declaration('link-focus-text-color', $focus);
+}

package/telemetry.yml

@@ -7,29 +7,104 @@ collect:
   jsx:
     elements:
       allowedAttributeNames:
-        # SideNav
+        # General
         - addFocusListeners
-        - addMouseListeners
+        - align
+        - as
+        - autoAlign
+        - children
         - className
         - defaultExpanded
+        - defaultOpen
+        - element
         - enterDelayMs
         - expanded
         - href
+        - isActive
+        - isSideNavExpanded
+        - label
+        - large
+        - leaveDelayMs
+        - renderIcon
+        - selected
+        - tabIndex
+        - title
+        # HeaderContainer
+        - isSwitcherExpanded
+        - render
+        # HeaderPanel
+        - onHeaderPanelFocus
+        # HeaderPopover
+        - alignmentAxisOffset
+        # SharkFinIcon
+        - small
+        # SideNav
+        - addMouseListeners
+        - hideOverlay
         - inert
         - isChildOfHeader
         - isCollapsible
         - isFixedNav
         - isPersistent
         - isRail
+        - isTreeview
+        - navType
         - onOverlayClick
         - onSideNavBlur
         - onToggle
+        - translateWithId
+        # SideNavFlyoutMenu
+        - description
+        - dropShadow
+        - highContrast
+        - menuContent
+        # SideNavItems
+        - accessibilityLabel
+        # SideNavLink
+        - aria-label
+        - aria-labelledby
+        # SideNavLinkPopover
+        - closeOnActivation
+        - disabled
+        - isSelected
+        - size
+        - wrapperClasses
+        # SideNavMenu
+        - depth
+        - onMenuToggle
+        # SideNavMenuItem
+        - isFlyoutMenuItem
+        # SideNavToggle
+        - onClick
         # React
         - key
         - ref
       allowedAttributeStringValues:
-        - 'true'
-        - 'false'
+        # General - align
+        - bottom
+        - bottom-end
+        - bottom-left
+        - bottom-right
+        - bottom-start
+        - left
+        - left-bottom
+        - left-end
+        - left-start
+        - left-top
+        - right
+        - right-bottom
+        - right-end
+        - right-start
+        - right-top
+        - top
+        - top-end
+        - top-left
+        - top-right
+        - top-start
+        # SideNavLinkPopover - size
+        - lg
+        - md
+        - sm
   npm:
     dependencies: null
   js: