@pnx-mixtape/mxds 0.0.30 → 0.1.0-rc.0

package/src/Form/form.css

@@ -7,11 +7,14 @@
     max-inline-size: var(--container-max-width);
 
     &:has([required]) :is(.mx-label, .mx-legend) {
-      &::after {
-        content: var(--required-text, "(required)");
+      &:is(::after, .mx-required) {
         color: var(--colour-error);
       }
     }
+
+    &:has([required]:is(:valid)) :is(.mx-label, .mx-legend) {
+      --colour-error: currentcolor;
+    }
   }
 
   .mx-form-item--inline {
@@ -55,7 +58,7 @@
     block-size: var(--form-element-height, var(--spacing-xxl));
 
     &::placeholder {
-      color: var(--placeholder-colour, var(--colour-foreground-alt));
+      color: var(--placeholder-colour, var(--foreground-alt, var(--colour-foreground-alt)));
       opacity: 1;
     }
 
@@ -203,7 +206,7 @@
     }
 
     &:checked {
-      background-image: svg-load("./images/checkmark.svg");
+      background-image: url("./images/checkmark.svg");
       background-size: 0.75rem;
       background-position: center;
     }
@@ -298,7 +301,11 @@
 
   :is(.mx-radio, .mx-checkbox) {
     --outline-size: var(--line-width, 2px);
-    --outline-offset: calc(var(--outline-size, 2px) * -1);
+
+    /* Tiny custom controls — push the focus ring *outside* the box so it's
+       visible against the page background rather than tucked behind the
+       border like inputs/selects. */
+    --outline-offset: var(--outline-size, 2px);
 
     margin-block-end: var(--spacing-xxxs);
     display: flex;
@@ -316,6 +323,11 @@
 
     & input {
       flex-shrink: 0;
+
+      &:focus-visible {
+        outline: var(--outline-size) var(--outline-style, solid) var(--outline-color, currentcolor);
+        outline-offset: var(--outline-offset);
+      }
     }
 
     &.mx-form-item--inline {
@@ -330,6 +342,20 @@
  */
 
 @layer design-system.atoms {
+  @supports (appearance: base-select) {
+    .mx-input__select,
+    ::picker(select) {
+      appearance: base-select;
+    }
+
+    ::picker(select) {
+      border-radius: var(--border-radius);
+      inset-block-start: var(--spacing-xxxs);
+      border: var(--line-width, 2px) solid
+        var(--line-colour, var(--line-colour, var(--colour-border)));
+    }
+  }
+
   .mx-input__select {
     --outline-size: var(--line-width, 2px);
     --outline-offset: calc(var(--outline-size, 2px) * -1);
@@ -337,11 +363,52 @@
     appearance: none;
     cursor: pointer;
     background-color: var(--background, var(--colour-background));
-    background-image: svg-load("./images/form-chevron-down.svg");
+    background-image: url("./images/form-chevron-down.svg");
     background-position: right var(--form-spacing, var(--spacing-s)) center;
     padding-block: 0;
     padding-inline-end: var(--spacing-xl);
 
+    @supports (appearance: base-select) {
+      &,
+      ::picker(select) {
+        appearance: base-select;
+        background-image: none;
+        padding-inline-end: 0;
+      }
+
+      selectedcontent {
+        display: flex;
+        align-items: center;
+        block-size: 100%;
+        column-gap: var(--spacing-xxxs);
+      }
+
+      option {
+        padding-block: var(--spacing-xxs);
+      }
+    }
+
+    &::picker-icon {
+      mask-image: url("./images/form-chevron-down.svg");
+      mask-repeat: no-repeat;
+      mask-position: center;
+      background-color: currentcolor;
+      aspect-ratio: 1 / 1;
+    }
+
+    &:open::picker-icon {
+      rotate: 180deg;
+    }
+
+    & option::checkmark {
+      content: "";
+      inline-size: var(--icon-size, var(--spacing-s));
+      block-size: var(--icon-size, var(--spacing-s));
+      display: block;
+      mask-image: url("./images/checkmark.svg");
+      background-color: currentcolor;
+    }
+
     &[multiple] {
       block-size: auto;
       background-image: none;
@@ -458,12 +525,12 @@
   }
 
   .mx-error-message::before {
-    mask-image: svg-load("./images/form-error.svg");
+    mask-image: url("./images/form-error.svg");
     background-color: var(--error-foreground, var(--colour-error));
   }
 
   .mx-success-message::before {
-    mask-image: svg-load("./images/form-success.svg");
+    mask-image: url("./images/form-success.svg");
     background-color: var(--success-foreground, var(--colour-success));
   }
 }

package/src/Introduction.mdx

@@ -18,6 +18,21 @@ import { Meta, Title, Subtitle } from "@storybook/addon-docs/blocks"
 - Follows PreviousNext's high standards.
 - Provide integration Documentation.
 
+## 📖 Developer Documentation
+
+New to the design system? Start with our comprehensive guides:
+
+- **[Documentation Hub](https://github.com/previousnext/mxds/tree/main/docs)** - Complete documentation index
+- [Component Architecture](https://github.com/previousnext/mxds/blob/main/docs/ComponentArchitecture.md) - Build Web Components & React components
+- [Code Quality Guidelines](https://github.com/previousnext/mxds/blob/main/docs/CodeQuality.md) - Standards & best practices
+- [Memory Management](https://github.com/previousnext/mxds/blob/main/docs/MemoryManagement.md) - Prevent memory leaks
+- [Security Guidelines](https://github.com/previousnext/mxds/blob/main/docs/Security.md) - XSS prevention & secure coding
+- [CSS Guidelines](https://github.com/previousnext/mxds/blob/main/docs/CSSGuidelines.md) - BEM, tokens, logical properties
+- [Testing Guide](https://github.com/previousnext/mxds/blob/main/docs/Testing.md) - Storybook & accessibility testing
+- [Contributing Guide](https://github.com/previousnext/mxds/blob/main/docs/Contributing.md) - How to contribute
+- [API Documentation](https://github.com/previousnext/mxds/blob/main/docs/API.md) - Validators & utilities reference
+- [Troubleshooting](https://github.com/previousnext/mxds/blob/main/docs/Troubleshooting.md) - Common issues & solutions
+
 ## Installation
 
 ```bash

package/src/Layout/Footer/Footer.figma.ts

@@ -0,0 +1,28 @@
+// url=https://www.figma.com/design/aGH90DVE6lrFVdLfDCHnFK/mxds---Design-System?node-id=117-3
+// source=src/Layout/Footer/Footer.tsx
+// component=Footer
+import figma from "figma"
+
+const instance = figma.selectedInstance
+
+const content = instance.getSlot("Content")
+const copyright = instance.getSlot("Copyright")
+
+// `links` (NavigationItem[]) is a data-object array — Footer renders it internally via
+// its own real Navigation instance (Inline=On), the same way Pagination renders its
+// own PaginationItems; a consumer of Footer never writes <Navigation> by hand. The
+// Figma-side Navigation instance shown alongside the slots is a visual-only preview of
+// that internal rendering — the code example emits the real `links` prop directly, a
+// fixed representative array, same reasoning as Navigation.figma.ts's own `items`.
+// `size` (SectionModifiers) isn't modelled — Footer's own stories never vary it either.
+export default {
+  example: figma.code`<Footer copyright={${copyright}} links={[
+  { id: "1", to: "http://example.com", title: "Sitemap" },
+  { id: "2", to: "http://example.com", title: "Privacy & Terms" },
+]}>${content}</Footer>`,
+  imports: ['import { Footer } from "@pnx-mixtape/mxds/react"'],
+  id: "footer",
+  metadata: {
+    nestable: true,
+  },
+}

package/src/Layout/Footer/Footer.stories.ts

@@ -9,8 +9,13 @@ import "./footer.css"
 import "../../Component/SocialLinks/social-links.css"
 import { Footer as FooterType, IconSizeModifier, FooterModifier } from "@pnx-mixtape/ids-shape"
 import { Icons } from "../../enums"
+import { modes } from "../../../.storybook/modes"
 
-const meta: Meta<FooterType> = {
+type MxFooterType = Omit<FooterType, "links"> & {
+  links?: string
+}
+
+const meta: Meta<MxFooterType> = {
   tags: ["autodocs", "ids-mvp"],
   component: Component,
   args: {
@@ -59,12 +64,20 @@ const meta: Meta<FooterType> = {
         title: "Terms & Conditions",
         href: "#",
       }),
-    ],
+    ].join(""),
+  },
+  parameters: {
+    chromatic: {
+      modes: {
+        mobile: modes["xs"],
+        desktop: modes["xl"],
+      },
+    },
   },
 }
 
 export default meta
-type Story = StoryObj<FooterType>
+type Story = StoryObj<MxFooterType>
 
 export const Footer: Story = {}
 
@@ -125,7 +138,7 @@ export const Everything: Story = {
             size: IconSizeModifier.MEDIUM,
           }),
         }),
-      ],
+      ].join(""),
     }),
     navigation: Navigation({
       id: "footer-story",
@@ -209,6 +222,6 @@ export const Everything: Story = {
         title: "Terms & Conditions",
         href: "#",
       }),
-    ],
+    ].join(""),
   },
 }

package/src/Layout/Footer/Footer.stories.tsx

@@ -7,7 +7,7 @@ const meta: Meta<typeof Component> = {
   component: Component,
   decorators: [Page],
   args: {
-    content: "&copy; 2022 Company Name",
+    copyright: <>&copy; 2022 Company Name</>,
     links: [
       {
         id: "1",

package/src/Layout/Footer/Footer.tsx

@@ -1,37 +1,30 @@
-/* eslint-disable @eslint-react/dom/no-dangerously-set-innerhtml */
-import { JSX, PropsWithChildren } from "react"
+import { JSX, PropsWithChildren, ReactNode } from "react"
 import classNames from "classnames"
 import Section from "../Section/Section"
 import Navigation, { NavigationItem } from "../../Component/Navigation/Navigation"
-import { SectionStyles } from "../../enums"
-import { SectionTypes } from "@pnx-mixtape/ids-shape"
+import { SectionTypes, SectionModifiers } from "@pnx-mixtape/ids-shape"
 
 type FooterProps = PropsWithChildren & {
-  content?: string
+  copyright?: ReactNode
   links?: NavigationItem[]
-  size?: SectionStyles | SectionStyles[]
+  size?: SectionModifiers | SectionModifiers[]
   className?: string
 }
 
-const defaultFooterSize: SectionStyles[] = [SectionStyles.TOP_L, SectionStyles.BOTTOM_M]
+const defaultFooterSize: SectionModifiers[] = [SectionModifiers.L]
 
 const Footer = ({
-  content,
+  copyright,
   links,
   size = defaultFooterSize,
-  children = null,
-  className = null,
+  children,
+  className,
 }: FooterProps): JSX.Element => {
   return (
     <Section as={SectionTypes.FOOTER} sizes={size} className={classNames("mx-footer", className)}>
       <div className="mx-footer__inner">
         {children}
-        {content && (
-          <span
-            className="mx-footer__copyright mx-text--s"
-            dangerouslySetInnerHTML={{ __html: content }}
-          ></span>
-        )}
+        {copyright && <span className="mx-footer__copyright mx-text--s">{copyright}</span>}
         {links && (
           <Navigation
             title="Footer subsidiary links"

package/src/Layout/Footer/README.md

@@ -0,0 +1,118 @@
+# Footer
+
+The global site footer. Uses CSS Grid with named areas for navigation, social links, an optional acknowledgement of country (aoc), copyright, and subsidiary links. Stacks on mobile, switches to a two-column layout at medium+.
+
+The footer is `position: sticky; inset-block-start: 100vh` — it anchors to the bottom of the viewport on short pages without affecting normal document flow on long pages.
+
+## CSS Import
+
+```css
+@import "@pnx-mixtape/mxds/src/Layout/Footer/footer.css";
+```
+
+## Twig
+
+```twig
+{% include '@mixtape/Layout/Footer/footer.twig' with {
+  logo: logo_component,
+  navigation: navigation_component,
+  socials: social_links_component,
+  aoc: '<p>We acknowledge the Traditional Custodians of Country.</p>',
+  copyright: '© 2026 PreviousNext',
+  links: [
+    privacy_link,
+    accessibility_link,
+  ],
+  background: 'dark',
+} %}
+```
+
+**footer.twig props** (`Footer` type from `ids-shape`):
+
+| Prop         | Type             | Required | Description                                                                                                |
+| ------------ | ---------------- | -------- | ---------------------------------------------------------------------------------------------------------- |
+| `logo`       | `Logo \| Logo[]` | No       | Rendered Logo atom(s) placed at the top of the inner grid                                                  |
+| `navigation` | `Navigation`     | No       | Rendered Navigation component (typically with `.mx-nav--footer`)                                           |
+| `socials`    | `SocialLinks`    | No       | Rendered SocialLinks component                                                                             |
+| `aoc`        | `WysiwygText`    | No       | Acknowledgement of Country block — rendered inside `<div class="mx-footer__aoc">`                          |
+| `copyright`  | `string`         | No       | Copyright text — rendered inside `<span class="mx-footer__copyright mx-text--s">`                          |
+| `links`      | `Link[]`         | No       | Subsidiary footer links (privacy, accessibility, etc.) rendered in a labelled `<nav>`                      |
+| `background` | `FooterModifier` | No       | `light` applies `mx-background--alt`; any other value (or omission) falls back to `mx-background--reverse` |
+| `attributes` | `Attribute`      | No       | Optional Drupal-style attributes object — modifier classes are merged on top                               |
+
+The template ships with `mx-section--l` always applied, and the background modifier defaults to `mx-background--reverse` (dark) unless `background: 'light'` is passed — pass an explicit value if you want the light variant.
+
+## HTML
+
+```html
+<footer class="mx-footer mx-section mx-section--top-l mx-section--bottom-m">
+  <div class="mx-footer__inner">
+    <!-- nav: mx-nav--footer -->
+    <!-- social: mx-social-links -->
+    <!-- optional aoc: mx-footer__aoc -->
+    <span class="mx-footer__copyright mx-text--s">© 2026 PreviousNext</span>
+    <!-- subsidiary links: mx-footer__links -->
+  </div>
+</footer>
+```
+
+## React
+
+```tsx
+import { Footer } from "@pnx-mixtape/mxds/src/react"
+;<Footer
+  copyright="© 2026 PreviousNext"
+  links={[
+    { id: "privacy", title: "Privacy", to: "/privacy" },
+    { id: "accessibility", title: "Accessibility", to: "/accessibility" },
+  ]}
+>
+  {/* Navigation, social links, aoc go as children */}
+  <NavigationDropdown title="Footer navigation" className="mx-nav--footer" items={footerNavItems} />
+  <SocialLinks items={socialItems} />
+  <div className="mx-footer__aoc">
+    <p>We acknowledge the Traditional Custodians of Country.</p>
+  </div>
+</Footer>
+```
+
+**Props:**
+
+| Prop        | Type                                     | Default | Description                                                               |
+| ----------- | ---------------------------------------- | ------- | ------------------------------------------------------------------------- |
+| `copyright` | `ReactNode`                              | —       | Copyright text/logo, placed in `copyright` grid area                      |
+| `links`     | `NavigationItem[]`                       | —       | Subsidiary links (privacy, accessibility, etc.), right-aligned on desktop |
+| `size`      | `SectionModifiers \| SectionModifiers[]` | `L`     | Vertical padding (See `Section`)                                          |
+| `className` | `string`                                 | —       | Extra class on the footer element                                         |
+| `children`  | `ReactNode`                              | —       | Navigation, social links, aoc content                                     |
+
+## Grid areas
+
+| Element                 | Grid area    | Notes                                             |
+| ----------------------- | ------------ | ------------------------------------------------- |
+| `.mx-nav--footer`       | `navigation` | Stacks as rows on mobile, multi-column on desktop |
+| `.mx-social-links`      | `social`     | Icon links, top-aligned                           |
+| `.mx-footer__aoc`       | `aoc`        | Full-width row, only appears when present         |
+| `.mx-footer__copyright` | `copyright`  | Bottom-left                                       |
+| `.mx-footer__links`     | `links`      | Bottom-right on desktop                           |
+
+## Navigation layout
+
+The footer nav (`.mx-nav--footer`) has two modes:
+
+- **Flat** (no level-2 items) — links display as a horizontal wrapping row
+- **Grouped** (has level-2 items) — displays as a 2-column grid with bold top-level labels and sublists
+
+> The grouped footer layout depends on `mx-nav__level-1` / `mx-nav__level-2` classes that the base `Navigation` component does **not** emit. In React, use `NavigationDropdown` (or compose your own list with the level classes) to get the grouped layout. The `Navigation` atom alone will render a flat list.
+
+## Customisation via CSS custom properties
+
+```css
+.mx-footer__aoc {
+  --footer-row-gap: var(--spacing-l); /* padding above/below aoc (default: --spacing-xxl) */
+}
+```
+
+---
+
+→ Used in context: `mockups/HomePage.stories.ts:7`

package/src/Layout/Footer/__snapshots__/Footer.stories.ts.snap

@@ -78,7 +78,7 @@ exports[`Everything 1`] = `
   
   <nav class="mx-social-links" aria-label="Social media links">
   
-      
+  
 <a href="#">
   
 <span class="mx-icon mx-icon--facebook mx-icon--size-md"></span>
@@ -87,7 +87,6 @@ exports[`Everything 1`] = `
     
 </a>
 
-      
 <a href="#">
   
 <span class="mx-icon mx-icon--instagram mx-icon--size-md"></span>
@@ -96,7 +95,6 @@ exports[`Everything 1`] = `
     
 </a>
 
-      
 <a href="#">
   
 <span class="mx-icon mx-icon--linkedin mx-icon--size-md"></span>
@@ -105,27 +103,26 @@ exports[`Everything 1`] = `
     
 </a>
 
-  </nav>
+</nav>
 
 
       <div class="mx-footer__aoc"><p>We acknowledge the traditional owners and custodians of country throughout Australia and acknowledges their continuing connection to land, waters and community. We pay our respects to the people, the cultures and the elders past, present and emerging.</p></div>
   
         <nav class="mx-footer__links mx-nav mx-nav--inline mx-text--s" aria-label="Footer subsidiary links">
-              
+      
 <a href="#">
   
   <span>Accessibility</span>
     
 </a>
 
-              
 <a href="#">
   
   <span>Terms &amp; Conditions</span>
     
 </a>
 
-          </nav>
+    </nav>
     </div>
 </footer>
 "
@@ -169,21 +166,20 @@ exports[`Footer 1`] = `
 
   
         <nav class="mx-footer__links mx-nav mx-nav--inline mx-text--s" aria-label="Footer subsidiary links">
-              
+      
 <a href="#">
   
   <span>Accessibility</span>
     
 </a>
 
-              
 <a href="#">
   
   <span>Terms &amp; Conditions</span>
     
 </a>
 
-          </nav>
+    </nav>
     </div>
 </footer>
 "
@@ -227,21 +223,20 @@ exports[`Light 1`] = `
 
   
         <nav class="mx-footer__links mx-nav mx-nav--inline mx-text--s" aria-label="Footer subsidiary links">
-              
+      
 <a href="#">
   
   <span>Accessibility</span>
     
 </a>
 
-              
 <a href="#">
   
   <span>Terms &amp; Conditions</span>
     
 </a>
 
-          </nav>
+    </nav>
     </div>
 </footer>
 "
@@ -285,21 +280,20 @@ exports[`No Logo 1`] = `
   
       <span class="mx-footer__copyright mx-text--s">© 2030 Company</span>
         <nav class="mx-footer__links mx-nav mx-nav--inline mx-text--s" aria-label="Footer subsidiary links">
-              
+      
 <a href="#">
   
   <span>Accessibility</span>
     
 </a>
 
-              
 <a href="#">
   
   <span>Terms &amp; Conditions</span>
     
 </a>
 
-          </nav>
+    </nav>
     </div>
 </footer>
 "
@@ -316,21 +310,20 @@ exports[`No Menu 1`] = `
 
   
         <nav class="mx-footer__links mx-nav mx-nav--inline mx-text--s" aria-label="Footer subsidiary links">
-              
+      
 <a href="#">
   
   <span>Accessibility</span>
     
 </a>
 
-              
 <a href="#">
   
   <span>Terms &amp; Conditions</span>
     
 </a>
 
-          </nav>
+    </nav>
     </div>
 </footer>
 "
@@ -375,21 +368,20 @@ exports[`With Acknowledgment 1`] = `
       <div class="mx-footer__aoc">We acknowledge the traditional owners and custodians of country throughout Australia and acknowledges their continuing connection to land, waters and community. We pay our respects to the people, the cultures and the elders past, present and emerging.</div>
   
         <nav class="mx-footer__links mx-nav mx-nav--inline mx-text--s" aria-label="Footer subsidiary links">
-              
+      
 <a href="#">
   
   <span>Accessibility</span>
     
 </a>
 
-              
 <a href="#">
   
   <span>Terms &amp; Conditions</span>
     
 </a>
 
-          </nav>
+    </nav>
     </div>
 </footer>
 "

package/src/Layout/Footer/__snapshots__/Footer.stories.tsx.snap

@@ -1,5 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Default 1`] = `"<footer class="mx-footer mx-section--top-l mx-section--bottom-m"><div class="mx-footer__inner"><span class="mx-footer__copyright mx-text--s">© 2022 Company Name</span><nav class="mx-nav mx-nav--inline mx-footer__links mx-text--s" aria-label="Footer subsidiary links"><ul><li class=""><a href="http://example.com" class="">Sitemap</a></li><li class=""><a href="http://example.com" class="">Privacy &amp; Terms</a></li></ul></nav></div></footer>"`;
+exports[`Default 1`] = `"<footer class="mx-footer mx-section--l"><div class="mx-footer__inner"><span class="mx-footer__copyright mx-text--s">© 2022 Company Name</span><nav class="mx-nav mx-nav--inline mx-footer__links mx-text--s" aria-label="Footer subsidiary links"><ul><li class=""><a href="http://example.com" class="">Sitemap</a></li><li class=""><a href="http://example.com" class="">Privacy &amp; Terms</a></li></ul></nav></div></footer>"`;
 
-exports[`With Children 1`] = `"<footer class="mx-footer mx-section--top-l mx-section--bottom-m"><div class="mx-footer__inner"><div class="mx-footer__aoc mx-text--s">Ullamcorper lobortis aliquam nulla nisl adipiscing cras fermentum dictumst netus felis semper elit adipiscing cum montes varius condimentum scelerisque condimentum diam a.</div><span class="mx-footer__copyright mx-text--s">© 2022 Company Name</span><nav class="mx-nav mx-nav--inline mx-footer__links mx-text--s" aria-label="Footer subsidiary links"><ul><li class=""><a href="http://example.com" class="">Sitemap</a></li><li class=""><a href="http://example.com" class="">Privacy &amp; Terms</a></li></ul></nav></div></footer>"`;
+exports[`With Children 1`] = `"<footer class="mx-footer mx-section--l"><div class="mx-footer__inner"><div class="mx-footer__aoc mx-text--s">Ullamcorper lobortis aliquam nulla nisl adipiscing cras fermentum dictumst netus felis semper elit adipiscing cum montes varius condimentum scelerisque condimentum diam a.</div><span class="mx-footer__copyright mx-text--s">© 2022 Company Name</span><nav class="mx-nav mx-nav--inline mx-footer__links mx-text--s" aria-label="Footer subsidiary links"><ul><li class=""><a href="http://example.com" class="">Sitemap</a></li><li class=""><a href="http://example.com" class="">Privacy &amp; Terms</a></li></ul></nav></div></footer>"`;

package/src/Layout/Footer/footer.css

@@ -100,9 +100,3 @@
     }
   }
 }
-
-@media print {
-  .mx-footer {
-    display: none;
-  }
-}

package/src/Layout/Footer/footer.twig

@@ -21,9 +21,7 @@
   {% endif %}
   {% if links is not empty %}
     <nav class="mx-footer__links mx-nav mx-nav--inline mx-text--s" aria-label="Footer subsidiary links">
-      {% for link in links %}
-        {{ link }}
-      {% endfor %}
+      {{ links }}
     </nav>
   {% endif %}
   </div>

package/src/Layout/Grid/Grid.figma.ts

@@ -0,0 +1,32 @@
+// url=https://www.figma.com/design/aGH90DVE6lrFVdLfDCHnFK/mxds---Design-System?node-id=79-23
+// source=src/Layout/Grid/Grid.tsx
+// component=Grid
+import figma from "figma"
+
+const instance = figma.selectedInstance
+
+// `cols` is breakpoint-prefixed in real CSS (e.g. "md-2" only applies at the medium
+// breakpoint up) — a static frame can only show one resolved column count, so this
+// picks a representative MD-prefixed enum value per count rather than exposing every
+// breakpoint variant as a Figma option.
+const cols = instance.getEnum("Cols", {
+  "2": "GridModifiers.MD_2",
+  "3": "GridModifiers.MD_3",
+  "4": "GridModifiers.LG_4",
+})
+
+const content = instance.getSlot("Content")
+
+// `wrapper` assumed true (real usage always sets it alongside `cols`); `container`/
+// `as` not modelled — no visual effect in this context.
+export default {
+  example: figma.code`<Grid wrapper cols={${cols}}>${content}</Grid>`,
+  imports: [
+    'import { Grid } from "@pnx-mixtape/mxds/react"',
+    'import { GridModifiers } from "@pnx-mixtape/ids-shape"',
+  ],
+  id: "grid",
+  metadata: {
+    nestable: true,
+  },
+}