@primer/react-brand 0.69.1-rc.0a4e5ff5 → 0.70.0-rc.11ae3568

package/docs/introduction/mcp.md

@@ -0,0 +1,52 @@
+---
+title: MCP server
+description: Help AI agents use Primer Brand correctly with our Model Context Protocol server.
+keywords: ['mcp', 'ai', 'agents', 'model context protocol', 'copilot', 'claude code']
+---
+
+The Primer Brand [MCP server](https://www.npmjs.com/package/@primer/brand-mcp) (`@primer/brand-mcp`) helps AI agents understand and use Primer Brand (`@primer/react-brand`) correctly.
+
+It is a version-aware, local (`stdio`) server that reads the docs and metadata of your installed `@primer/react-brand` dependency.
+
+> The MCP server requires [Node.js](https://nodejs.org/) 24 or later.
+
+## What it provides
+
+The server exposes a set of tools that AI agents can call:
+
+| Tool                       | What it does                                                                                                                                         |
+| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `primer_brand_setup`       | Configures Primer Brand first-time. Includes `ThemeProvider`, Mona Sans and RSC-directive configuration among other things                           |
+| `primer_brand_page_design` | Page-design conventions (header/footer, hero media, gridline aesthetic, card grids, labels) and the current-brand reference templates to start from. |
+| `primer_brand_component`   | Get a component API information like props, allowed values and named sub-components.                                                                 |
+| `primer_brand_examples`    | Reference examples taken from our Storybook.                                                                                                         |
+| `primer_brand_tokens`      | Resolve design tokens by intent (color, space, typography) to CSS variables and values.                                                              |
+| `primer_brand_asset`       | Find Octicons (`@primer/octicons-react`) and Octovisuals (`@primer/octovisuals-react`) more easily                                                   |
+| `primer_brand_docs`        | Search and read Primer Brand guidance, including principles, accessibility and getting started.                                                      |
+| `primer_brand_review`      | Check generated JSX and CSS against the design system for unknown components, invalid props, hardcoded values                                        |
+
+## Set up in VS Code
+
+Add the server to your workspace's `.vscode/mcp.json` (or your user `mcp.json`):
+
+```jsonc
+{
+  "servers": {
+    "Primer Brand": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["@primer/brand-mcp@latest"]
+    }
+  }
+}
+```
+
+## Set up in other clients
+
+For GitHub Copilot CLI and other `stdio`-enabled MCP clients, run the server directly:
+
+```shell
+npx @primer/brand-mcp@latest
+```
+
+Refer to the [package README](https://github.com/primer/brand/tree/main/packages/mcp) for the latest configuration details.

package/docs/introduction/theming.md

@@ -0,0 +1,132 @@
+---
+title: Theming
+---
+
+Primer Brand defines various global styling defaults using CSS variables, while also allowing app-level customization through its `ThemeProvider`.
+
+CSS variables are available for most styling dimensions such as typography, color and sizing. They are defined in the primary stylesheet: `main.css`.
+
+`ThemeProvider` extends theming capabilities at runtime by enabling real-time color mode switching among other things.
+
+Using the CSS stylesheet and `ThemeProvider` in tandem is crucial to make theming work correctly.
+
+## Configure the `ThemeProvider`
+
+The `ThemeProvider` should wrap your React application root to enable theming correctly. It can also be nested to apply isolated behavior to `children`.
+
+```js
+import {ThemeProvider} from '@primer/react-brand'
+
+function App() {
+  return (
+    <ThemeProvider>
+      <div>...</div>
+    </ThemeProvider>
+  )
+}
+```
+
+## Load the stylesheet
+
+The stylesheet contains all of the required rules for design tokens and components. It also includes a CSS reset, so we recommend loading this as early as possible in your HTML `<head>` to minimize undesirable rendering behavior.
+
+```js
+import '@primer/react-brand/lib/css/main.css'
+```
+
+## Set a color mode
+
+Primer Brand supports the following color modes through a dedicated prop by applying HTML `data-*` attributes:
+
+| Theme | `colorMode` prop value | Data attribute applied    |
+| ----- | ---------------------- | ------------------------- |
+| Light | `light`                | `data-color-mode="light"` |
+| Dark  | `dark`                 | `data-color-mode="dark"`  |
+
+The `ThemeProvider` applies the data attributes and handles state-changes internally.
+
+**`ThemeProvider` will apply `light` mode by default if the `colorMode` is not specified. This is recommended for top-level placement.**
+
+The following example demonstrates how `light` mode will enable by default, and can also be changed to `dark` declaratively:
+
+```jsx filename="noinline"
+const Example = () => {
+  const [colorMode, setColorMode] = React.useState()
+
+  const handleChange = event => {
+    event.preventDefault()
+    setColorMode('dark')
+  }
+
+  return (
+    <ThemeProvider colorMode={colorMode} style={{backgroundColor: 'var(--brand-color-canvas-default)'}}>
+      <River>
+        <River.Visual>
+          <img src="/images/placeholder.png" alt="placeholder, blank area with a gray background color" />
+        </River.Visual>
+        <River.Content>
+          <Heading>Heading</Heading>
+          <Text>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
+            turpis felis nam pulvinar risus elementum.
+          </Text>
+          <Link href="#" onClick={handleChange}>
+            {colorMode === 'dark' ? "I'm in dark mode now" : 'Switch to dark mode'}
+          </Link>
+        </River.Content>
+      </River>
+    </ThemeProvider>
+  )
+}
+
+render(Example)
+```
+
+### Locking the color mode
+
+For tighter control over appearance - such as forcing areas of a layout to appear in dark mode - we recommend nesting `ThemeProvider` and explicitly applying a color mode.
+
+```jsx
+<Stack direction="vertical" padding="none">
+  <ThemeProvider
+    colorMode="dark"
+    style={{
+      backgroundColor: 'var(--brand-color-canvas-default)',
+    }}
+  >
+    <River align="center">
+      <River.Visual>
+        <img src="/images/placeholder.png" alt="placeholder, blank area with a gray background color" />
+      </River.Visual>
+      <River.Content>
+        <Heading>Heading</Heading>
+        <Text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
+          turpis felis nam pulvinar risus elementum.
+        </Text>
+        <Link href="#">Call to action</Link>
+      </River.Content>
+    </River>
+  </ThemeProvider>
+  <ThemeProvider
+    colorMode="light"
+    style={{
+      backgroundColor: 'var(--brand-color-canvas-default)',
+    }}
+  >
+    <River align="right">
+      <River.Visual>
+        <img src="/images/placeholder.png" alt="placeholder, blank area with a gray background color" />
+      </River.Visual>
+      <River.Content>
+        <Heading>Heading</Heading>
+        <Text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
+          turpis felis nam pulvinar risus elementum.
+        </Text>
+        <Link href="#">Call to action</Link>
+      </River.Content>
+    </River>
+  </ThemeProvider>
+</Stack>
+```

package/docs/layout/Box/index.md

@@ -0,0 +1,46 @@
+---
+title: Box
+description: Use a box to simplify the process of applying one-off styles to an element
+keywords: ['layout']
+---
+
+## Usage
+
+The box component is a versatile layout component that is intended to simplify the process of adding one-off styles such as padding, margin, background color, and border to (or around) an element.
+
+The box provides convenient and comprehensive access to Primer Brand's underlying Primitives, such as the spacing scale and functional design tokens for color and borders.
+
+While the box component is highly customizable and can be used to create complex layouts, it is important to use it judiciously and only when necessary.
+
+## Options
+
+### Padding
+
+Inner spacing is configurable on all sides or specific directions. Box utilises the CSS padding specification, using logical operators to aid bi-directional reading support.
+
+Additionally, fine-grained control over padding at specific viewports is available to ensure optimal, responsive layout on different screen sizes.
+
+### Margin
+
+Outer spacing is also configurable on all sides or specific directions. Box utilises the CSS margin specification, similarly using logical operators to aid bi-directional reading support.
+
+### Background color
+
+Box enables first-class customisation of its background-color property. Options are limited to background-oriented, functional design tokens such as `default` and `subtle`, to ensure maximum color contrast with foreground text.
+
+### Border
+
+Box offers various border customisations options, including configuration of `border-style`, `border-radius` and `border-colors`.
+
+In most cases, the available options corrospond to border-oriented design tokens available within the system. The exception is border style, which is limited to a subset of the official CSS `border-style` values.
+
+## Accessibility
+
+Box is a purely decorative element by default. It sets no intrinsic roles, ARIA attributes, or keyboard shortcuts.
+
+Any interactive content within a box should be given their own appropriate accessibility treatment based on the specific workflow of your application.
+
+## Related components
+
+- [Stack](../Stack/index.md): to enable layout of its immediate children along the vertical or horizontal axis.
+- [Grid](../Grid/index.md): to create flexible and responsive grid-based layouts.

package/docs/layout/Box/react.md

@@ -0,0 +1,284 @@
+---
+title: Box
+description: Use a box to simplify the process of applying one-off styles to an element
+keywords: ['layout']
+ready: true
+source: https://github.com/primer/brand/blob/main/packages/react/src/Box/Box.tsx
+storybook: '/brand/storybook/?path=/story/components-box--default'
+---
+
+```js
+import {Box} from '@primer/react-brand'
+```
+
+## Examples
+
+Box requires the `dir` attribute to be set on the `<html />` element to ensure that directional padding and margin values are applied correctly.
+
+### Default
+
+The `Box` component, by default, represents an empty `<div>` element with no predefined styles applied to it.
+
+```jsx
+<Box>With GitHub Copilot, you’re always in charge.</Box>
+```
+
+### Uniform padding
+
+Use `padding` to apply equal inner spacing to all sides of an element.
+
+```jsx
+<>
+  <Stack direction="horizontal" alignItems="center" flexWrap="wrap">
+    <Box padding="condensed" className="bg-red-lines">
+      condensed
+    </Box>
+    <Box padding="normal" className="bg-red-lines">
+      normal
+    </Box>
+    <Box padding="spacious" className="bg-red-lines">
+      spacious
+    </Box>
+  </Stack>
+  <Stack direction="horizontal" alignItems="center" flexWrap="wrap">
+    <Box padding={24} className="bg-red-lines">
+      24
+    </Box>
+    <Box padding={32} className="bg-red-lines">
+      32
+    </Box>
+    <Box padding={48} className="bg-red-lines">
+      48
+    </Box>
+    <Box padding={64} className="bg-red-lines">
+      64
+    </Box>
+    <Box padding={96} className="bg-red-lines">
+      96
+    </Box>
+  </Stack>
+</>
+```
+
+### Directional padding
+
+Apply internal spacing to a specific side. Directional padding is implemented with CSS logical properties and accepts functional spacing names, or values from the base scale.
+
+```jsx
+<Stack direction="horizontal" alignItems="center" flexWrap="wrap">
+  <Box paddingBlockStart={64} className="bg-red-lines">
+    block start
+  </Box>
+  <Box paddingInlineEnd={64} className="bg-red-lines">
+    inline end
+  </Box>
+  <Box paddingBlockEnd={64} className="bg-red-lines">
+    block end
+  </Box>
+  <Box paddingInlineStart={64} className="bg-red-lines">
+    inline start
+  </Box>
+</Stack>
+```
+
+### Uniform margin
+
+Use `margin` to apply equal outer spacing to all sides of an element.
+
+```jsx
+<>
+  <Stack direction="horizontal" alignItems="center" flexWrap="wrap">
+    <Box className="bg-yellow-lines">
+      <Box margin="condensed" className="bg-red-lines">
+        condensed
+      </Box>
+    </Box>
+    <Box className="bg-yellow-lines">
+      <Box margin="normal" className="bg-red-lines">
+        normal
+      </Box>
+    </Box>
+    <Box className="bg-yellow-lines">
+      <Box margin="spacious" className="bg-red-lines">
+        spacious
+      </Box>
+    </Box>
+  </Stack>
+  <Stack direction="horizontal" alignItems="center" flexWrap="wrap">
+    <Box className="bg-yellow-lines">
+      <Box margin={24} className="bg-red-lines">
+        24
+      </Box>
+    </Box>
+    <Box className="bg-yellow-lines">
+      <Box margin={32} className="bg-red-lines">
+        32
+      </Box>
+    </Box>
+    <Box className="bg-yellow-lines">
+      <Box margin={48} className="bg-red-lines">
+        48
+      </Box>
+    </Box>
+    <Box className="bg-yellow-lines">
+      <Box margin={64} className="bg-red-lines">
+        64
+      </Box>
+    </Box>
+    <Box className="bg-yellow-lines">
+      <Box margin={96} className="bg-red-lines">
+        96
+      </Box>
+    </Box>
+  </Stack>
+</>
+```
+
+### Directional margin
+
+Apply external spacing to a specific side. Directional margins are implemented with CSS logical properties and accepts functional spacing names, or values from the base scale.
+
+```jsx
+<Stack direction="horizontal" alignItems="center" flexWrap="wrap">
+  <Box className="bg-yellow-lines">
+    <Box marginBlockStart={64} className="bg-red-lines">
+      block start
+    </Box>
+  </Box>
+  <Box className="bg-yellow-lines">
+    <Box marginInlineEnd={64} className="bg-red-lines">
+      inline end
+    </Box>
+  </Box>
+  <Box className="bg-yellow-lines">
+    <Box marginBlockEnd={64} className="bg-red-lines">
+      block end
+    </Box>
+  </Box>
+  <Box className="bg-yellow-lines">
+    <Box marginInlineStart={64} className="bg-red-lines">
+      inline start
+    </Box>
+  </Box>
+</Stack>
+```
+
+### Responsive spacing
+
+All padding and margin options can be configured for indivisual viewports: Each viewport entry is applied using a `min-width` media query.
+
+```jsx
+<Stack direction="horizontal" alignItems="center" flexWrap="wrap">
+  <Box className="bg-yellow-lines">
+    <Box
+      margin={{
+        narrow: 48,
+        regular: 96,
+        wide: 128,
+      }}
+      className="bg-red-lines"
+    >
+      margin
+    </Box>
+  </Box>
+  <Box
+    padding={{
+      narrow: 48,
+      regular: 96,
+      wide: 128,
+    }}
+    className="bg-red-lines"
+  >
+    padding
+  </Box>
+</Stack>
+```
+
+### Border radius
+
+```jsx
+<Stack direction="horizontal" flexWrap="wrap">
+  <Box borderRadius="small" padding="spacious" className="bg-red-lines">
+    small
+  </Box>
+  <Box borderRadius="medium" padding="spacious" className="bg-red-lines">
+    medium
+  </Box>
+  <Box borderRadius="large" padding="spacious" className="bg-red-lines">
+    large
+  </Box>
+  <Box borderRadius="full" padding="spacious" className="bg-red-lines">
+    full
+  </Box>
+</Stack>
+```
+
+### Borders
+
+```jsx
+<Stack direction="horizontal" flexWrap="wrap">
+  <Box backgroundColor="subtle" borderWidth="thin" borderColor="default" borderStyle="solid" padding="spacious">
+    thin
+  </Box>
+  <Box backgroundColor="subtle" borderWidth="thick" borderColor="default" borderStyle="solid" padding="spacious">
+    thick
+  </Box>
+  <Box backgroundColor="subtle" borderWidth="thicker" borderColor="default" borderStyle="solid" padding="spacious">
+    thicker
+  </Box>
+</Stack>
+```
+
+### Background colors
+
+```jsx
+<Stack direction="horizontal" flexWrap="wrap">
+  <Box backgroundColor="default" borderWidth="thin" borderColor="default" borderStyle="solid" padding="spacious">
+    default
+  </Box>
+  <Box backgroundColor="subtle" borderWidth="thin" borderColor="default" borderStyle="solid" padding="spacious">
+    subtle
+  </Box>
+  <Box backgroundColor="inset" borderWidth="thin" borderColor="default" borderStyle="solid" padding="spacious">
+    inset
+  </Box>
+  <Box backgroundColor="overlay" borderWidth="thin" borderColor="default" borderStyle="solid" padding="spacious">
+    overlay
+  </Box>
+  <Box
+    backgroundColor="var(--base-color-scale-green-5)"
+    borderWidth="thin"
+    borderColor="default"
+    borderStyle="solid"
+    padding="spacious"
+  >
+    Custom
+  </Box>
+</Stack>
+```
+
+## Component props
+
+### Box
+
+| Name                     | Type                     |   Default   | Description                                                                 |
+| :----------------------- | :----------------------- | :---------: | :-------------------------------------------------------------------------- |
+| `padding`                | `BoxSpacingValues`       | `undefined` | Adds padding to all internal sides of the Box.                              |
+| `paddingBlockStart`      | `BoxSpacingValues`       | `undefined` | Adds padding to the internal block start (top) side of the Box.             |
+| `paddingRight`           | `BoxSpacingValues`       | `undefined` | Adds padding to the internal inline end (right) of the Box.                 |
+| `paddingBlockEnd`        | `BoxSpacingValues`       | `undefined` | Adds padding to the internal block end (bottom) side of the Box.            |
+| `paddingLeft`            | `BoxSpacingValues`       | `undefined` | Adds padding to the internal inline start (left) side of the Box.           |
+| `margin`                 | `BoxSpacingValues`       | `undefined` | Adds margin to all external sides of the Box.                               |
+| `marginBlockStart`       | `BoxSpacingValues`       | `undefined` | Adds margin to the external block start (top) side of the Box.              |
+| `marginInlineEnd`        | `BoxSpacingValues`       | `undefined` | Adds margin to the external inline end (right) side of the Box.             |
+| `marginBlockEnd`         | `BoxSpacingValues`       | `undefined` | Adds margin to the external block end (bottom) side of the Box.             |
+| `marginInlineStart`      | `BoxSpacingValues`       | `undefined` | Adds margin to the external inline start (left) side of the Box.            |
+| `backgroundColor`        |                          | `undefined` | Applies a system-level background color to the Box.                         |
+| `borderRadius`           | `BoxBorderRadiusOptions` | `undefined` | Applies a system-level border radius value to the Box.                      |
+| `borderWidth`            | `BoxBorderWidthOptions`  | `undefined` | Applies a system-level border width value to the Box.                       |
+| `borderBlockStartWidth`  | `BoxBorderWidthOptions`  | `undefined` | Applies a system-level border width value to block-start side of the Box.   |
+| `borderInlineEndWidth`   | `BoxBorderWidthOptions`  | `undefined` | Applies a system-level border width value to inline-end side of the Box.    |
+| `borderBlockEndWidth`    | `BoxBorderWidthOptions`  | `undefined` | Applies a system-level border width value to block-end side of the Box.     |
+| `borderInlineStartWidth` | `BoxBorderWidthOptions`  | `undefined` | Applies a system-level border width value to inline-start side of the Box.  |
+| `borderColor`            | `BoxBorderColorOptions`  | `undefined` | Applies a system-level border color value to the Box.                       |
+| `borderStyle`            |                          | `undefined` | Applies border style. Values correspond to the CSS `border-style` property. |

package/docs/layout/Grid/index.md

@@ -0,0 +1,132 @@
+---
+title: Grid
+description: Use the grid component to create flexible and responsive grid-based layouts.
+keywords: ['layout', 'responsive', 'columns', 'rows', 'spacing']
+---
+
+![The grid component applied to a section with different elements that spans in columns](https://github.com/primer/brand/assets/912236/6cd2805e-0148-4a1d-b373-07acd1aa7f51)
+
+## Usage
+
+Use the grid component to define a layout that maintains consistent element positioning and sizing across pages. The grid is based on a 12-column layout and uses vertical and horizontal gaps to separate content units consistently[^1].
+
+Use the grid for general page layout, and grouping related elements with a similar purpose. E.g. A "contact us" form or a list of [cards](../../components/Card/index.md).
+
+In most cases, we recommend using the same column span for each element to create a consistent layout.
+
+[^1]: The grid component is implemented using the [CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) specification.
+
+**✅ Do**
+
+![](https://github.com/primer/brand/assets/912236/b4870b2e-5cf0-440c-9f51-0b1f81258b9b)
+
+_Use the same column span for each content unit to create a consistent layout and spacing._
+
+**❌ Don't**
+
+![](https://github.com/primer/brand/assets/912236/0703ba43-7f47-4ad1-bc1d-020bc095e362)
+
+_Don't use different column spans when grouping the same element type._
+
+Use different column spans instead of an even distribution when creating a visual hierarchy between items or when defining a general page or a section layout. E.g. A section with an [image](../../components/Image/index.md) and [text](../../typography/Text/index.md), a layout with main content and a sidebar or a form with inputs and text areas.
+
+**✅ Do**
+
+![](https://github.com/primer/brand/assets/912236/bc442c41-3546-4341-bab3-1c649ccfe7d2)
+
+_Use different column spans to create a visual hierarchy between a large image and text._
+
+**❌ Don't**
+
+![](https://github.com/primer/brand/assets/912236/f6307bee-3236-435a-a74d-b6d942a7925b)
+
+_Don't span in few columns large images or long content text that will create unbalanced layouts._
+
+**✅ Do**
+
+![](https://github.com/primer/brand/assets/912236/83e4eedf-5cc2-4dcc-a9dd-48d563744dd2)
+
+_Use different column spans when you want to create a visual hierarchy on a section between different elements.
+Like a footer with notes and navigational lists._
+
+**❌ Don't**
+
+![](https://github.com/primer/brand/assets/912236/911a6b4b-791a-4186-8079-6296e17c65d0)
+
+_Don't use equal column spans when the content is not related or the elements are different._
+
+### Responsive
+
+The grid component provides control over the number of columns at each breakpoint. For most of the cases, we recommend using the same column span on each child at each breakpoint to create a consistent layout and spacing in all screen sizes.
+
+For example, a group of cards might span 3 columns on a extra large viewport, 4 columns on large viewports, 6 on medium and 12 columns on small viewports.
+
+_Video demonstration — see the online docs._
+
+_Use the same column span for each content unit at each breakpoint to create visually consistent layouts._
+
+When using even column spans, we recommend to span each item full width on small viewports and stacking the items vertically to ensure that the content is readable and accessible on small screens.
+
+_Video demonstration — see the online docs._
+
+_Use full width on small viewports to ensure that the content is readable and accessible._
+
+## Grid vs Stack
+
+We recommend using either the grid or stack component, depending on how the child items are displayed and how they work on different screen sizes. If the element is a sequential list of items in a vertical or horizontal order, we recommend using the stack component. Otherwise, if the element needs columns and rows or for general page layout, we recommend using the grid component instead[^2].
+
+### Grid examples
+
+#### Page or section layout
+
+When defining the page or a section layout. E.g. A page with navigation, main content and footer areas.
+
+![](https://github.com/primer/brand/assets/912236/76e816de-1ec7-40c2-993f-61fe05f97656)
+
+#### Sub sections
+
+When dividing an area into two areas. E.g. A "Send feedback" sidebar and a form, and the form uses the grid for the form layout itself.
+
+![](https://github.com/primer/brand/assets/912236/d617bfea-0758-4066-9ccc-7853eeb35cf3)
+
+#### Card or pillar grids
+
+When laying out cards, pillars, or similar content-based elements.
+
+![](https://github.com/primer/brand/assets/912236/56dfbcd8-72ff-401c-a530-25f11f671f7f)
+
+### Stack examples
+
+#### Navigation
+
+For the page navigation or a list of links. E.g. Having a logo on the left side and the navigation on the right.
+
+![](https://github.com/primer/brand/assets/912236/022fc146-6286-4074-abc5-7341743da82e)
+
+#### List of actions
+
+For a group of action or buttons, where items are displayed next to each other, and they are distributed horizontally or vertically, depending on the content length and the screen size.
+
+![](https://github.com/primer/brand/assets/912236/10ae15dd-f8f9-4174-9c89-2e9355120204)
+
+#### Form elements
+
+For combinations of input fields with a button next to it.
+
+![](https://github.com/primer/brand/assets/912236/78a81f0e-55d5-4db5-8a8b-3184394fac51)
+
+#### Profile cards
+
+For combinations of an avatar and descriptive content, where the information takes the remaining space from its parent element. This could be applied to any combinations of an icon and text too.
+
+![](https://github.com/primer/brand/assets/912236/c53f2ee7-93f1-416f-8fd5-bd965fd37f86)
+
+[^2]: This section is based on the article [Grid for layout, Flexbox for components](https://ishadeed.com/article/grid-layout-flexbox-components/) by [@shadeed](https://github.com/shadeed)
+
+## Accessibility
+
+By default, the grid assumes that it will be used in a purely decorative fashion and thus sets no roles, ARIA attributes, or keyboard shortcuts. This is equivalent to having a sequence of `<div>` elements on the page by default. Any interactive content within the grid should be given an appropriate accessibility treatment based on the specific workflow of your application.
+
+## Related components
+
+- [Stack](../Stack/index.md): To enable layout of its immediate children along the vertical or horizontal axis.