@patternfly/react-core 6.5.0-prerelease.12 → 6.5.0-prerelease.14

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.5.0-prerelease.11","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.5.0-prerelease.13","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.5.0-prerelease.11","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.5.0-prerelease.13","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.5.0-prerelease.11","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.5.0-prerelease.13","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.12",
+  "version": "6.5.0-prerelease.14",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.5.0-prerelease.5",
-    "@patternfly/react-styles": "^6.5.0-prerelease.5",
-    "@patternfly/react-tokens": "^6.5.0-prerelease.5",
+    "@patternfly/react-icons": "^6.5.0-prerelease.6",
+    "@patternfly/react-styles": "^6.5.0-prerelease.6",
+    "@patternfly/react-tokens": "^6.5.0-prerelease.6",
     "focus-trap": "7.6.4",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.5.0-prerelease.21",
+    "@patternfly/patternfly": "6.5.0-prerelease.27",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.0"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "b1ae7eb5e94f906f4373f38e14d9125e5cccd1c5"
+  "gitHead": "2df092a083c31add23a91798f605d3177e881b55"
 }

package/src/components/Compass/Compass.tsx

@@ -52,7 +52,7 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
   backgroundSrcLight,
   backgroundSrcDark,
   ...props
-}) => {
+}: CompassProps) => {
   const hasDrawer = drawerContent !== undefined;
 
   const backgroundImageStyles: { [key: string]: string } = {};

package/src/components/Compass/CompassContent.tsx

@@ -19,7 +19,7 @@ export const CompassContent: React.FunctionComponent<CompassContentProps> = ({
   drawerProps,
   drawerContent,
   ...props
-}) => {
+}: CompassContentProps) => {
   const hasDrawer = drawerContent !== undefined;
 
   const compassContent = (

package/src/components/Compass/CompassHeader.tsx

@@ -10,7 +10,11 @@ export interface CompassHeaderProps {
   profile?: React.ReactNode;
 }
 
-export const CompassHeader: React.FunctionComponent<CompassHeaderProps> = ({ logo, nav, profile }) => (
+export const CompassHeader: React.FunctionComponent<CompassHeaderProps> = ({
+  logo,
+  nav,
+  profile
+}: CompassHeaderProps) => (
   <>
     <div className={css(`${styles.compass}__logo`)}>{logo}</div>
     <div className={css(styles.compassNav)}>{nav}</div>

package/src/components/Compass/CompassHero.tsx

@@ -9,7 +9,11 @@ export interface CompassHeroProps extends Omit<React.HTMLProps<HTMLDivElement>,
   className?: string;
 }
 
-export const CompassHero: React.FunctionComponent<CompassHeroProps> = ({ className, children, ...props }) => (
+export const CompassHero: React.FunctionComponent<CompassHeroProps> = ({
+  className,
+  children,
+  ...props
+}: CompassHeroProps) => (
   <div className={css(`${styles.compass}__hero`, className)} {...props}>
     {children}
   </div>

package/src/components/Compass/CompassMainHeader.tsx

@@ -1,17 +1,27 @@
-import { Flex, FlexItem } from '../../layouts/Flex';
-import { CompassPanel } from './CompassPanel';
+import { CompassPanel, CompassPanelProps } from './CompassPanel';
+import { CompassMainHeaderContent } from './CompassMainHeaderContent';
+import { CompassMainHeaderTitle } from './CompassMainHeaderTitle';
+import { CompassMainHeaderToolbar } from './CompassMainHeaderToolbar';
 import styles from '@patternfly/react-styles/css/components/Compass/compass';
 import { css } from '@patternfly/react-styles';
 
+/** The wrapper component for header content in the main compass area. When building out a custom implementation,
+ * you should ensure any content within the main header is rendered inside a compass panel and main header content wrappers.
+ */
+
 export interface CompassMainHeaderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {
+  /** Custom main header content. To opt into a default styling, use the title and toolbar props instead. */
+  children?: React.ReactNode;
   /** Additional classes added to the main header */
   className?: string;
   /** Styled title. If title or toolbar is provided, the children will be ignored. */
   title?: React.ReactNode;
   /** Styled toolbar. If title or toolbar is provided, the children will be ignored. */
   toolbar?: React.ReactNode;
-  /** Custom main header content. To opt into a default styling, use the title and toolbar props instead. */
-  children?: React.ReactNode;
+  /** Additional props passed to the compass panel that wraps the main header content when using the title or toolbar props. When using the
+   * children prop, you should pass your own compass panel.
+   */
+  compassPanelProps?: Omit<CompassPanelProps, 'children'>;
 }
 
 export const CompassMainHeader: React.FunctionComponent<CompassMainHeaderProps> = ({
@@ -19,15 +29,16 @@ export const CompassMainHeader: React.FunctionComponent<CompassMainHeaderProps>
   title,
   toolbar,
   children,
+  compassPanelProps,
   ...props
-}) => {
+}: CompassMainHeaderProps) => {
   const _content =
     title !== undefined || toolbar !== undefined ? (
-      <CompassPanel>
-        <Flex alignItems={{ default: 'alignItemsCenter' }}>
-          <FlexItem grow={{ default: 'grow' }}>{title}</FlexItem>
-          {toolbar && <FlexItem>{toolbar}</FlexItem>}
-        </Flex>
+      <CompassPanel {...compassPanelProps}>
+        <CompassMainHeaderContent>
+          {title && <CompassMainHeaderTitle>{title}</CompassMainHeaderTitle>}
+          {toolbar && <CompassMainHeaderToolbar>{toolbar}</CompassMainHeaderToolbar>}
+        </CompassMainHeaderContent>
       </CompassPanel>
     ) : (
       children

package/src/components/Compass/CompassMainHeaderContent.tsx

@@ -0,0 +1,25 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+/** A wrapper component to be passed as custom content for the compass main header. This should also be wrapped
+ * in a compass panel component.
+ */
+
+export interface CompassMainHeaderContentProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content of the main header content. */
+  children: React.ReactNode;
+  /** Additional classes added to the main header content. */
+  className?: string;
+}
+
+export const CompassMainHeaderContent: React.FunctionComponent<CompassMainHeaderContentProps> = ({
+  children,
+  className,
+  ...props
+}: CompassMainHeaderContentProps) => (
+  <div className={css(styles.compassMainHeaderContent, className)} {...props}>
+    {children}
+  </div>
+);
+
+CompassMainHeaderContent.displayName = 'CompassMainHeaderContent';

package/src/components/Compass/CompassMainHeaderTitle.tsx

@@ -0,0 +1,25 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+/** A wrapper component for custom title content to be passed into a compass main header. This should also be wrapped
+ * by a compass main header content component.
+ */
+
+export interface CompassMainHeaderTitleProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content of the main header title. */
+  children: React.ReactNode;
+  /** Additional classes added to the main header title. */
+  className?: string;
+}
+
+export const CompassMainHeaderTitle: React.FunctionComponent<CompassMainHeaderTitleProps> = ({
+  children,
+  className,
+  ...props
+}: CompassMainHeaderTitleProps) => (
+  <div className={css(`${styles.compass}__main-header-title`, className)} {...props}>
+    {children}
+  </div>
+);
+
+CompassMainHeaderTitle.displayName = 'CompassMainHeaderTitle';

package/src/components/Compass/CompassMainHeaderToolbar.tsx

@@ -0,0 +1,25 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+/** A wrapper component for custom toolbar content to be passed into a compass main header. This should also be wrapped
+ * by a compass main header content component.
+ */
+
+export interface CompassMainHeaderToolbarProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content of the main header toolbar. */
+  children: React.ReactNode;
+  /** Additional classes added to the main header toolbar. */
+  className?: string;
+}
+
+export const CompassMainHeaderToolbar: React.FunctionComponent<CompassMainHeaderToolbarProps> = ({
+  children,
+  className,
+  ...props
+}: CompassMainHeaderToolbarProps) => (
+  <div className={css(`${styles.compass}__main-header-toolbar`, className)} {...props}>
+    {children}
+  </div>
+);
+
+CompassMainHeaderToolbar.displayName = 'CompassMainHeaderToolbar';

package/src/components/Compass/CompassMessageBar.tsx

@@ -12,7 +12,7 @@ export const CompassMessageBar: React.FunctionComponent<CompassMessageBarProps>
   children,
   className,
   ...props
-}) => (
+}: CompassMessageBarProps) => (
   <div className={css(styles.compassMessageBar, className)} {...props}>
     {children}
   </div>

package/src/components/Compass/CompassPanel.tsx

@@ -30,7 +30,7 @@ export const CompassPanel: React.FunctionComponent<CompassPanelProps> = ({
   isFullHeight,
   isScrollable,
   ...props
-}) => (
+}: CompassPanelProps) => (
   <div
     className={css(
       styles.compassPanel,

package/src/components/Compass/__tests__/CompassMainHeader.test.tsx

@@ -74,9 +74,52 @@ test('Renders children when neither title nor toolbar are provided', () => {
   expect(screen.getByText('Custom children content')).toBeVisible();
 });
 
+test('Renders CompassPanel when title is passed', () => {
+  render(<CompassMainHeader data-testid="test-id" title="Title text" />);
+
+  const panel = screen.getByTestId('test-id').firstChild;
+  expect(panel).toHaveClass(styles.compassPanel);
+});
+
+test('Renders CompassPanel when toolbar is passed', () => {
+  render(<CompassMainHeader data-testid="test-id" toolbar="Toolbar text" />);
+
+  const panel = screen.getByTestId('test-id').firstChild;
+  expect(panel).toHaveClass(styles.compassPanel);
+});
+
+test('Does not render CompassPanel when children are passed', () => {
+  render(
+    <CompassMainHeader data-testid="test-id">
+      <div>Children content</div>
+    </CompassMainHeader>
+  );
+
+  const content = screen.getByTestId('test-id').firstChild;
+  expect(content).not.toHaveClass(styles.compassPanel);
+});
+
+test('Passes props to CompassPanel when title and compassPanelProps is passed', () => {
+  render(
+    <CompassMainHeader data-testid="test-id" compassPanelProps={{ className: 'panel-class' }} title="Title text" />
+  );
+
+  const panel = screen.getByTestId('test-id').firstChild;
+  expect(panel).toHaveClass('panel-class');
+});
+
+test('Passes props to CompassPanel when toolbar and compassPanelProps is passed', () => {
+  render(
+    <CompassMainHeader data-testid="test-id" compassPanelProps={{ className: 'panel-class' }} toolbar="Toolbar text" />
+  );
+
+  const panel = screen.getByTestId('test-id').firstChild;
+  expect(panel).toHaveClass('panel-class');
+});
+
 test('Renders with additional props spread to the component', () => {
-  render(<CompassMainHeader aria-label="Test label">Test</CompassMainHeader>);
-  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+  render(<CompassMainHeader id="custom-id">Test</CompassMainHeader>);
+  expect(screen.getByText('Test')).toHaveAttribute('id', 'custom-id');
 });
 
 test('Matches the snapshot with both title and toolbar', () => {

package/src/components/Compass/__tests__/CompassMainHeaderContent.test.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react';
+import { CompassMainHeaderContent } from '../CompassMainHeaderContent';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders with children', () => {
+  render(<CompassMainHeaderContent>Custom content</CompassMainHeaderContent>);
+  expect(screen.getByText('Custom content')).toBeVisible();
+});
+
+test(`Renders with default ${styles.compass}__main-header-content class`, () => {
+  render(<CompassMainHeaderContent>Test</CompassMainHeaderContent>);
+  expect(screen.getByText('Test')).toHaveClass(`${styles.compass}__main-header-content`);
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<CompassMainHeaderContent className="custom-class">Test</CompassMainHeaderContent>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders with additional props spread to the component', () => {
+  render(<CompassMainHeaderContent id="custom-id">Test</CompassMainHeaderContent>);
+  expect(screen.getByText('Test')).toHaveAttribute('id', 'custom-id');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<CompassMainHeaderContent>Content</CompassMainHeaderContent>);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Compass/__tests__/CompassMainHeaderTitle.test.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react';
+import { CompassMainHeaderTitle } from '../CompassMainHeaderTitle';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders with children', () => {
+  render(<CompassMainHeaderTitle>Custom content</CompassMainHeaderTitle>);
+  expect(screen.getByText('Custom content')).toBeVisible();
+});
+
+test(`Renders with default ${styles.compass}__main-header-title class`, () => {
+  render(<CompassMainHeaderTitle>Test</CompassMainHeaderTitle>);
+  expect(screen.getByText('Test')).toHaveClass(`${styles.compass}__main-header-title`);
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<CompassMainHeaderTitle className="custom-class">Test</CompassMainHeaderTitle>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders with additional props spread to the component', () => {
+  render(<CompassMainHeaderTitle id="custom-id">Test</CompassMainHeaderTitle>);
+  expect(screen.getByText('Test')).toHaveAttribute('id', 'custom-id');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<CompassMainHeaderTitle>Content</CompassMainHeaderTitle>);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Compass/__tests__/CompassMainHeaderToolbar.test.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react';
+import { CompassMainHeaderToolbar } from '../CompassMainHeaderToolbar';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders with children', () => {
+  render(<CompassMainHeaderToolbar>Custom content</CompassMainHeaderToolbar>);
+  expect(screen.getByText('Custom content')).toBeVisible();
+});
+
+test(`Renders with default ${styles.compass}__main-header-toolbar class`, () => {
+  render(<CompassMainHeaderToolbar>Test</CompassMainHeaderToolbar>);
+  expect(screen.getByText('Test')).toHaveClass(`${styles.compass}__main-header-toolbar`);
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<CompassMainHeaderToolbar className="custom-class">Test</CompassMainHeaderToolbar>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders with additional props spread to the component', () => {
+  render(<CompassMainHeaderToolbar id="custom-id">Test</CompassMainHeaderToolbar>);
+  expect(screen.getByText('Test')).toHaveAttribute('id', 'custom-id');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<CompassMainHeaderToolbar>Content</CompassMainHeaderToolbar>);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Compass/__tests__/__snapshots__/CompassMainHeader.test.tsx.snap

@@ -9,17 +9,17 @@ exports[`Matches the snapshot with both title and toolbar 1`] = `
       class="pf-v6-c-compass__panel"
     >
       <div
-        class="pf-v6-l-flex pf-m-align-items-center"
+        class="pf-v6-c-compass__main-header-content"
       >
         <div
-          class="pf-m-grow"
+          class="pf-v6-c-compass__main-header-title"
         >
           <div>
             Title
           </div>
         </div>
         <div
-          class=""
+          class="pf-v6-c-compass__main-header-toolbar"
         >
           <div>
             Toolbar

package/src/components/Compass/__tests__/__snapshots__/CompassMainHeaderContent.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__main-header-content"
+  >
+    Content
+  </div>
+</DocumentFragment>
+`;

package/src/components/Compass/__tests__/__snapshots__/CompassMainHeaderTitle.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__main-header-title"
+  >
+    Content
+  </div>
+</DocumentFragment>
+`;

package/src/components/Compass/__tests__/__snapshots__/CompassMainHeaderToolbar.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__main-header-toolbar"
+  >
+    Content
+  </div>
+</DocumentFragment>
+`;

package/src/components/Compass/examples/Compass.md

@@ -1,7 +1,7 @@
 ---
 id: Compass
 cssPrefix: pf-v6-c-compass
-section: PatternFly-AI
+section: AI
 subsection: Generative UIs
 beta: true
 propComponents:
@@ -46,3 +46,21 @@ The background image of the `Compass` and `CompassHero` may be customized by usi
 ```ts isFullscreen file="CompassDemo.tsx"
 
 ```
+
+## Composable structure
+
+When building a more custom implementation using Compass components, there are some intended or expected structures that must be present.
+
+### CompassMainHeader structure
+
+When using the `children` property in the `<CompassMainHeader>` component, you should ensure that the expected sub-components are used. The following code block shows a general structure to follow.
+
+```noLive
+<CompassMainHeader>
+  <CompassPanel>
+    <CompassMainHeaderContent>
+      {Your custom content goes here, which can include the CompassMainHeaderTitle and/or CompassMainHeaderToolbar sub-components}
+    </CompassMainHeaderContent>
+  </CompassPanel>
+</CompassMainHeader>
+```

package/src/components/Compass/examples/CompassBasic.tsx

@@ -1,4 +1,12 @@
-import { Compass, CompassHeader, CompassHero, CompassContent, CompassMainHeader } from '@patternfly/react-core';
+import {
+  Compass,
+  CompassHeader,
+  CompassHero,
+  CompassContent,
+  CompassMainHeader,
+  CompassPanel,
+  CompassMainHeaderContent
+} from '@patternfly/react-core';
 import './compass.css';
 
 export const CompassBasic: React.FunctionComponent = () => {
@@ -12,7 +20,11 @@ export const CompassBasic: React.FunctionComponent = () => {
       </CompassHero>
       <CompassContent>
         <CompassMainHeader>
-          <div>Content title</div>
+          <CompassPanel>
+            <CompassMainHeaderContent>
+              <div>Content title</div>
+            </CompassMainHeaderContent>
+          </CompassPanel>
         </CompassMainHeader>
         <div>Content</div>
       </CompassContent>

package/src/components/Compass/index.ts

@@ -3,5 +3,8 @@ export * from './CompassContent';
 export * from './CompassHeader';
 export * from './CompassHero';
 export * from './CompassMainHeader';
+export * from './CompassMainHeaderContent';
+export * from './CompassMainHeaderTitle';
+export * from './CompassMainHeaderToolbar';
 export * from './CompassMessageBar';
 export * from './CompassPanel';

package/src/deprecated/components/Modal/examples/Modal.md

@@ -127,7 +127,7 @@ To guide users through a series of steps in a modal, you can add a [wizard](/com
 
 ### With dropdown
 
-To present a menu of actions or links to a user, you can add a [dropdown](/components/dropdown) to a modal. To allow the dropdown to visually break out of the modal container, set the `menuAppendTo` property to “parent”. Handle the modal’s closing behavior by listening to the `onEscapePress` callback on the `<Modal>` component. This allows the "escape" key to collapse the dropdown without closing the entire modal.
+To present a menu of actions or links to a user, you can add a [dropdown](/components/menus/dropdown) to a modal. To allow the dropdown to visually break out of the modal container, set the `menuAppendTo` property to “parent”. Handle the modal’s closing behavior by listening to the `onEscapePress` callback on the `<Modal>` component. This allows the "escape" key to collapse the dropdown without closing the entire modal.
 
 ```ts file="./ModalWithDropdown.tsx"
 
@@ -143,7 +143,7 @@ To help simplify and explain complex models, add a help [popover](/components/po
 
 ### With form
 
-To collect user input within a modal, you can add a [form](/components/form).
+To collect user input within a modal, you can add a [form](/components/forms/form).
 
 To submit the form from a button in the modal's footer (outside of the `<Form>`), set the button's `form` property equal to the form's id.
 

package/src/deprecated/components/Tile/examples/Tile.md

@@ -15,8 +15,6 @@ import './Tile.css';
 
 ## Examples
 
-Keyboard interaction patterns and a11y is implemented in the Tile demos, located in the [Demo section](/components/tile/react-demos).
-
 ### Basic tile
 
 Basic tiles can appear in one of three states: a default state, selected state, and a disabled state. To change the state of a tile, use the properties `isSelected` and `isDisabled`.

package/src/helpers/OUIA/OUIA.md

@@ -1,6 +1,6 @@
 ---
 id: Open UI Automation
-section: developer-resources
+section: developer-guides
 ---
 import { Fragment } from 'react';
 
@@ -54,6 +54,7 @@ component.
 * [Card](/components/card)
 * [Checkbox](/components/forms/checkbox)
 * [Chip](/components/chip)
+* [Content](/components/content)
 * [Dropdown](/components/menus/dropdown)
 * [DropdownItem](/components/menus/dropdown)
 * [FormSelect](/components/forms/form-select)
@@ -68,7 +69,6 @@ component.
 * [Switch](/components/switch)
 * [TabContent](/components/tabs)
 * [Tabs](/components/tabs)
-* [Text](/components/text)
 * [TextInput](/components/forms/text-input)
 * [Title](/components/title)
 * [Toolbar](/components/toolbar)

package/src/layouts/Bullseye/examples/Bullseye.md

@@ -1,7 +1,8 @@
 ---
 id: Bullseye
 cssPrefix: pf-v6-l-bullseye
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 propComponents: ['Bullseye']
 ---
 

package/src/layouts/Flex/examples/Flex.md

@@ -1,7 +1,8 @@
 ---
 id: Flex
 cssPrefix: pf-v6-l-flex
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 propComponents: ['Flex', 'FlexItem']
 ---
 

package/src/layouts/Gallery/examples/Gallery.md

@@ -1,7 +1,8 @@
 ---
 id: Gallery
 cssPrefix: pf-v6-l-gallery
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 propComponents: ['Gallery', 'GalleryItem']
 ---
 

package/src/layouts/Grid/examples/Grid.md

@@ -1,7 +1,8 @@
 ---
 id: Grid
 cssPrefix: pf-v6-l-grid
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 propComponents: ['Grid', 'GridItem']
 ---
 

package/src/layouts/Level/examples/Level.md

@@ -1,7 +1,8 @@
 ---
 id: Level
 cssPrefix: pf-v6-l-level
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 propComponents: ['Level', 'LevelItem']
 ---
 

package/src/layouts/Split/examples/Split.md

@@ -1,7 +1,8 @@
 ---
 id: Split
 cssPrefix: pf-v6-l-split
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 propComponents: ['Split', 'SplitItem']
 ---