{
  "_ai": "CSS utility classes for the UNDRR Mangrove library. Include the Mangrove CSS bundle to use these classes in plain HTML.",
  "_description": "CSS utility classes provided by UNDRR Mangrove. Include the Mangrove CSS bundle to use these. All classes use the mg- prefix and follow BEM conventions.",
  "cdnBaseUrl": "https://assets.undrr.org/mangrove/2.0.0/css/",
  "categories": [
    {
      "name": "Layout",
      "description": "Centered responsive containers with breakpoint-driven max-widths. Breakpoints: 480px (mobile), 900px (tablet), 1164px (desktop), 1440px (wide).",
      "classes": [
        {
          "class": "mg-container",
          "description": "Centered responsive container. Horizontal padding 1rem. Max-width scales through breakpoints: 480px, 900px, 1164px, 1440px.",
          "usage": "<div class=\"mg-container\">Page content</div>"
        },
        {
          "class": "mg-container--slim",
          "description": "Container that stops at the desktop breakpoint (1164px) and does not expand to 1440px wide."
        },
        {
          "class": "mg-container--padded",
          "description": "Adds 2rem vertical padding (top and bottom) to the container.",
          "usage": "<div class=\"mg-container mg-container--padded\">Padded content</div>"
        },
        {
          "class": "mg-container--spacer",
          "description": "Adds consistent vertical spacing (1.5rem) between direct children. Intelligently removes spacing between hero sections and background blocks.",
          "usage": "<div class=\"mg-container mg-container--spacer\">\n  <section>Block 1</section>\n  <section>Block 2</section>\n</div>"
        },
        {
          "class": "mg-container-full-width",
          "description": "Paints an element's background across the full viewport width while the element's own box stays inside the container, so content alignment is preserved. RTL-safe. Constraint: the bleed is hidden by any ancestor with an opaque background, because it is painted by a z-index:-1 pseudo-element. Fix by moving that background, adding isolation:isolate to the element, or using margin-inline-start:calc(50% - 50vw) with inline-size:100vw plus an inner mg-container.",
          "usage": "<div class=\"mg-container-full-width\" style=\"background-color: #e6edf4;\">\n  <div class=\"mg-container\">Full-bleed section content</div>\n</div>"
        }
      ]
    },
    {
      "name": "Reading column",
      "description": "A reading column with an optional sticky contents sidebar, for a long page whose sections readers arrive wanting.",
      "classes": [
        {
          "class": "mg-reading",
          "description": "Reading column. Add mg-reading--with-contents to place a table of contents in a sticky right sidebar above 48rem.",
          "usage": "<div class=\"mg-reading mg-reading--with-contents\">\n  <div class=\"mg-table-of-contents\">…</div>\n  <div class=\"mg-reading__article\">…</div>\n</div>"
        }
      ]
    },
    {
      "name": "Table & data utilities",
      "description": "Accessible scrolling container, data table styling, and column/cell modifiers for tabular datasets.",
      "classes": [
        {
          "class": "mg-table-scroll-region",
          "description": "Horizontal scrolling wrapper for wide HTML tables. Requires role=\"region\", a descriptive aria-label, and tabindex=\"0\" for keyboard navigation.",
          "usage": "<div class=\"mg-table-scroll-region\" role=\"region\" aria-label=\"Data table\" tabindex=\"0\">\n  <table class=\"mg-table\">\n    …\n  </table>\n</div>"
        },
        {
          "class": "mg-table--data",
          "description": "High-density data table styling with compact padding, subtle dividers, and uppercase styled headers.",
          "usage": "<table class=\"mg-table mg-table--data\">…</table>"
        },
        {
          "class": "mg-table__th--sticky",
          "description": "Sticky header cell that remains anchored at the top during table scrolling.",
          "usage": "<th class=\"mg-table__th--sticky\">Column Header</th>"
        },
        {
          "class": "mg-table__th--sortable",
          "description": "Sortable table header cell containing an accessible button with rotating indicator arrow and aria-sort state.",
          "usage": "<th class=\"mg-table__th--sortable\" aria-sort=\"ascending\">\n  <button type=\"button\" class=\"mg-table__sort-btn\">\n    <span>Name</span>\n    <span class=\"mg-table__sort-icon\" aria-hidden=\"true\">▼</span>\n  </button>\n</th>"
        },
        {
          "class": "mg-table__td--numeric",
          "description": "Right-aligned tabular numeric cell using font-variant-numeric: tabular-nums.",
          "usage": "<td class=\"mg-table__td--numeric\">1,245,600</td>"
        },
        {
          "class": "mg-table__td--code",
          "description": "Monospace code or technical path cell styled with var(--mg-font-family-code).",
          "usage": "<td class=\"mg-table__td--code\">/data/v1/indicators.json</td>"
        }
      ]
    },
    {
      "name": "Badges & subtle tags",
      "description": "Compact non-interactive metadata badges and format pills for technical readouts, file extensions, and status labels.",
      "classes": [
        {
          "class": "mg-tag--subtle",
          "description": "Non-interactive subtle tag with neutral background and border for secondary metadata.",
          "usage": "<span class=\"mg-tag mg-tag--subtle\">Reference</span>"
        },
        {
          "class": "mg-badge",
          "description": "Compact non-interactive metadata badge pill (alias for subtle tag).",
          "usage": "<span class=\"mg-badge\">Verified</span>"
        },
        {
          "class": "mg-badge--code",
          "description": "Monospace uppercase badge pill ideal for file formats (e.g. PDF, JSON, SVG, CSV).",
          "usage": "<span class=\"mg-badge mg-badge--code\">JSON</span>"
        }
      ]
    },
    {
      "name": "Accordion",
      "description": "Grouped <details>/<summary> disclosure stack with clean border separators and animated rotating chevrons.",
      "classes": [
        {
          "class": "mg-accordion",
          "description": "Container wrapping multiple <details> elements into a cohesive accordion card.",
          "usage": "<div class=\"mg-accordion\">\n  <details>\n    <summary>Layer settings</summary>\n    <p>Content…</p>\n  </details>\n</div>"
        },
        {
          "class": "mg-accordion--flush",
          "description": "Flush accordion variant without outer lateral borders, designed for nesting inside sidebars or panels.",
          "usage": "<div class=\"mg-accordion mg-accordion--flush\">\n  <details>…</details>\n</div>"
        }
      ]
    },
    {
      "name": "Interactive controls",
      "description": "Accessible binary toggles and compact icon action buttons for toolbars, map layers, and settings.",
      "classes": [
        {
          "class": "mg-switch",
          "description": "Accessible binary switch toggle with animated sliding thumb and focus ring integration.",
          "usage": "<label class=\"mg-switch\">\n  <input type=\"checkbox\" role=\"switch\" class=\"mg-switch__input\" />\n  <span class=\"mg-switch__track\" aria-hidden=\"true\"><span class=\"mg-switch__thumb\"></span></span>\n  <span class=\"mg-switch__label\">Active layer</span>\n</label>"
        },
        {
          "class": "mg-switch--pending",
          "description": "Pending (busy) switch: the thumb sits at the requested position with a spinning ring (static dotted ring under reduced motion) until the change is confirmed. Prefer aria-busy=\"true\" on .mg-switch__input, which applies the same styles; use this modifier on the label only when the input cannot take attributes. Announce \"Saving…\", ignored presses (\"Still saving…\") and the outcome in a role=\"status\" region; revert checked on failure or timeout. Add aria-disabled=\"true\" to also look unavailable: it dims the track without fading the focus ring.",
          "usage": "<label class=\"mg-switch\">\n  <input type=\"checkbox\" role=\"switch\" class=\"mg-switch__input\" aria-busy=\"true\" checked />\n  <span class=\"mg-switch__track\" aria-hidden=\"true\"><span class=\"mg-switch__thumb\"></span></span>\n  <span class=\"mg-switch__label\">Real-time alerts</span>\n</label>\n<p class=\"mg-form-help\" role=\"status\"></p>"
        },
        {
          "class": "mg-button--icon",
          "description": "Shape modifier that makes a .mg-button a square or circular icon-only action button with a centred icon and equal aspect ratio. Always used with .mg-button and an emphasis variant: the foreground colour, typography and focus ring come from .mg-button. Add .mg-button--icon--round for a circular floating action button or .mg-button--icon--small for a 28px dense toolbar button. This is the icon-only button to use when it should carry a brand colour.",
          "usage": "<button type=\"button\" class=\"mg-button mg-button-secondary mg-button--icon\" aria-label=\"Copy to clipboard\">\n  <span class=\"mg-icon mg-icon-copy\" aria-hidden=\"true\"></span>\n</button>"
        },
        {
          "class": "mg-icon-button",
          "description": "Standalone borderless ghost icon button for dismiss, close and copy controls sitting on an existing surface (Notice and Drawer use it). Same 36px square geometry as .mg-button--icon, plus its own reset, hover fill and focus ring, because it is used without .mg-button. It carries no variant colours and takes no .mg-button-* class — .mg-button-primary and .mg-button-secondary only set a background, and .mg-button-outline draws no border on it. For a variant-coloured icon-only button use .mg-button.mg-button-{variant}.mg-button--icon instead. Modifiers: .mg-icon-button--round and .mg-icon-button--small.",
          "usage": "<button type=\"button\" class=\"mg-icon-button mg-icon-button--small\" aria-label=\"Dismiss\">\n  <span class=\"mg-icon mg-icon-close\" aria-hidden=\"true\"></span>\n</button>"
        },
        {
          "class": "mg-range",
          "description": "A styled input[type=\"range\"] slider component supporting continuous and stepped variants."
        },
        {
          "class": "mg-copy-button",
          "description": "Compact action button that copies a value to the clipboard and shows a brief micro-feedback badge."
        }
      ]
    },
    {
      "name": "Grid",
      "description": "Responsive grid system using CSS Grid (with flexbox fallback). Column gap: 2rem. Mobile: single column. Tablet (900px+): specified columns. Desktop (1164px+): 4-6 column layouts expand.",
      "classes": [
        {
          "class": "mg-grid",
          "description": "Base grid container. Auto-layout: children share equal width. On mobile, wraps to 2-column layout.",
          "usage": "<div class=\"mg-grid\">\n  <div>Auto column 1</div>\n  <div>Auto column 2</div>\n  <div>Auto column 3</div>\n</div>"
        },
        {
          "class": "mg-grid__col-1",
          "description": "Single-column grid."
        },
        {
          "class": "mg-grid__col-2",
          "description": "Two-column grid at tablet and above. Single column on mobile.",
          "usage": "<div class=\"mg-grid mg-grid__col-2\">\n  <div>Column 1</div>\n  <div>Column 2</div>\n</div>"
        },
        {
          "class": "mg-grid__col-3",
          "description": "Three-column grid at tablet and above.",
          "usage": "<div class=\"mg-grid mg-grid__col-3\">\n  <div>Column 1</div>\n  <div>Column 2</div>\n  <div>Column 3</div>\n</div>"
        },
        {
          "class": "mg-grid__col-4",
          "description": "Four-column grid. Tablet: 2 columns. Desktop (1164px+): 4 columns."
        },
        {
          "class": "mg-grid__col-5",
          "description": "Five-column grid. Tablet: 3 columns. Desktop (1164px+): 5 columns."
        },
        {
          "class": "mg-grid__col-6",
          "description": "Six-column grid. Tablet: 3 columns. Desktop (1164px+): 6 columns."
        },
        {
          "class": "mg-grid__col-7",
          "description": "Seven-column grid. Tablet: 4 columns. Desktop (1164px+): 7 columns."
        },
        {
          "class": "mg-grid__col-8",
          "description": "Eight-column grid. Tablet: 4 columns. Desktop (1164px+): 8 columns."
        },
        {
          "class": "mg-grid__col-9",
          "description": "Nine-column grid. Tablet: 4 columns. Desktop (1164px+): 9 columns."
        },
        {
          "class": "mg-grid__col-10",
          "description": "Ten-column grid. Tablet: 4 columns. Desktop (1164px+): 10 columns."
        },
        {
          "class": "mg-grid__col-11",
          "description": "Eleven-column grid. Tablet: 4 columns. Desktop (1164px+): 11 columns."
        },
        {
          "class": "mg-grid__col-12",
          "description": "Twelve-column grid. Tablet: 4 columns. Desktop (1164px+): 12 columns."
        },
        {
          "class": "mg-grid--auto-fit",
          "description": "Single-row fallback: distributes any number of children across one equal-width row (tablet and above) without a per-count column class. Stacks on mobile.",
          "usage": "<div class=\"mg-grid mg-grid--auto-fit\">\n  <div>Item 1</div>\n  <div>Item 2</div>\n  <div>Item 3</div>\n</div>"
        },
        {
          "class": "mg-grid__col--span-2",
          "description": "Child element spans 2 columns."
        },
        {
          "class": "mg-grid__col--span-3",
          "description": "Child element spans 3 columns."
        },
        {
          "class": "mg-grid__col--span-4",
          "description": "Child element spans 4 columns."
        },
        {
          "class": "mg-grid__col--span-5",
          "description": "Child element spans 5 columns."
        },
        {
          "class": "mg-grid__col--span-6",
          "description": "Child element spans 6 columns."
        },
        {
          "class": "mg-grid__col--span-all",
          "description": "Child element spans the full width of the grid (grid-column: 1 / -1).",
          "usage": "<div class=\"mg-grid mg-grid__col-3\">\n  <div class=\"mg-grid__col--span-all\">Full-width row</div>\n  <div>Col 1</div>\n  <div>Col 2</div>\n  <div>Col 3</div>\n</div>"
        },
        {
          "class": "mg-grid__row--span-2",
          "description": "Child element spans 2 rows."
        },
        {
          "class": "mg-grid__row--span-3",
          "description": "Child element spans 3 rows."
        },
        {
          "class": "mg-grid__row--span-4",
          "description": "Child element spans 4 rows."
        },
        {
          "class": "mg-grid__row--span-5",
          "description": "Child element spans 5 rows."
        },
        {
          "class": "mg-grid__row--span-6",
          "description": "Child element spans 6 rows."
        },
        {
          "class": "mg-grid__row--span-all",
          "description": "Child element spans the full height of the grid."
        }
      ]
    },
    {
      "name": "Responsive display",
      "description": "Toggle element visibility based on viewport width. Breakpoint: 900px (tablet).",
      "classes": [
        {
          "class": "mg-u-responsive--show-large",
          "description": "Hidden on mobile, visible (display: block) on tablet and above (900px+)."
        },
        {
          "class": "mg-u-responsive--show-small",
          "description": "Visible on mobile, hidden (display: none) on tablet and above (900px+)."
        }
      ]
    },
    {
      "name": "Text utilities",
      "description": "Text wrapping and formatting helpers.",
      "classes": [
        {
          "class": "mg-u-text-wrap-balanced",
          "description": "Applies CSS text-wrap: balance for more even line breaks in headings.",
          "usage": "<h2 class=\"mg-u-text-wrap-balanced\">A heading that wraps evenly across lines</h2>"
        },
        {
          "class": "mg-u-text-wrap-pretty",
          "description": "Applies CSS text-wrap: pretty to optimize wrapping for readability."
        },
        {
          "class": "mg-u-comma-between",
          "description": "Adds commas between direct child elements using CSS ::after pseudo-elements. Useful for inline lists.",
          "usage": "<div class=\"mg-u-comma-between\">\n  <span>Item 1</span>\n  <span>Item 2</span>\n  <span>Item 3</span>\n</div>"
        }
      ]
    },
    {
      "name": "Accessibility",
      "description": "Helpers for assistive technology.",
      "classes": [
        {
          "class": "mg-u-sr-only",
          "description": "Visually hidden but accessible to screen readers. Uses position: absolute, clip-path: inset(0), width/height: 1px.",
          "usage": "<span class=\"mg-u-sr-only\">Description for screen readers only</span>"
        }
      ]
    },
    {
      "name": "Overflow and sizing",
      "description": "Overflow and sizing control.",
      "classes": [
        {
          "class": "mg-u-overflow-hidden",
          "description": "Sets overflow: hidden on the element."
        },
        {
          "class": "mg-u-expand-to-size",
          "description": "Responsive width: calc(100% - 1rem) on mobile, calc(100% - 3rem) at tablet+. Centered with auto margins."
        }
      ]
    },
    {
      "name": "Flex layout",
      "description": "Flex container and alignment utilities. Combine with push utilities for content positioning.",
      "classes": [
        {
          "class": "mg-u-flex",
          "description": "Sets display: flex on the element.",
          "usage": "<div class=\"mg-u-flex mg-u-gap-100\">Flex children</div>"
        },
        {
          "class": "mg-u-flex-wrap",
          "description": "Enables flex-wrap: wrap on the flex container."
        },
        {
          "class": "mg-u-align-items-center",
          "description": "Vertically centers flex children (align-items: center)."
        },
        {
          "class": "mg-u-gap-100",
          "description": "Sets gap: 1rem between flex children."
        }
      ]
    },
    {
      "name": "Push alignment",
      "description": "Margin-based push utilities using CSS logical properties. RTL-safe: automatically flip for right-to-left languages.",
      "classes": [
        {
          "class": "mg-u-push-end",
          "description": "Pushes element to the inline end (right in LTR, left in RTL) via margin-inline-start: auto.",
          "usage": "<div class=\"mg-u-flex\">\n  <span>Left content</span>\n  <button class=\"mg-u-push-end\">Right-aligned</button>\n</div>"
        },
        {
          "class": "mg-u-push-start",
          "description": "Pushes element to the inline start (left in LTR, right in RTL) via margin-inline-end: auto."
        },
        {
          "class": "mg-u-push-center",
          "description": "Centers element horizontally via margin-inline: auto."
        }
      ]
    },
    {
      "name": "Background colors",
      "description": "Background color utilities following the Mangrove color system. Pattern: mg-u-background-color--{color-shade}. Colors are theme-overridable via SCSS variables with !default flags.",
      "classes": [
        {
          "class": "mg-u-background-color--white",
          "description": "White background"
        },
        {
          "class": "mg-u-background-color--black",
          "description": "Black background"
        },
        {
          "class": "mg-u-background-color--blue-50",
          "description": "Blue 50 background"
        },
        {
          "class": "mg-u-background-color--blue-100",
          "description": "Blue 100 background"
        },
        {
          "class": "mg-u-background-color--blue-200",
          "description": "Blue 200 background"
        },
        {
          "class": "mg-u-background-color--blue-300",
          "description": "Blue 300 background"
        },
        {
          "class": "mg-u-background-color--blue-400",
          "description": "Blue 400 background"
        },
        {
          "class": "mg-u-background-color--blue-500",
          "description": "Blue 500 background"
        },
        {
          "class": "mg-u-background-color--blue-600",
          "description": "Blue 600 background"
        },
        {
          "class": "mg-u-background-color--blue-700",
          "description": "Blue 700 background"
        },
        {
          "class": "mg-u-background-color--blue-800",
          "description": "Blue 800 background"
        },
        {
          "class": "mg-u-background-color--blue-900",
          "description": "Blue 900 background"
        },
        {
          "class": "mg-u-background-color--orange-50",
          "description": "Orange 50 background"
        },
        {
          "class": "mg-u-background-color--orange-100",
          "description": "Orange 100 background"
        },
        {
          "class": "mg-u-background-color--orange-200",
          "description": "Orange 200 background"
        },
        {
          "class": "mg-u-background-color--orange-300",
          "description": "Orange 300 background"
        },
        {
          "class": "mg-u-background-color--orange-400",
          "description": "Orange 400 background"
        },
        {
          "class": "mg-u-background-color--orange-500",
          "description": "Orange 500 background"
        },
        {
          "class": "mg-u-background-color--orange-600",
          "description": "Orange 600 background"
        },
        {
          "class": "mg-u-background-color--orange-700",
          "description": "Orange 700 background"
        },
        {
          "class": "mg-u-background-color--orange-800",
          "description": "Orange 800 background"
        },
        {
          "class": "mg-u-background-color--orange-900",
          "description": "Orange 900 background"
        },
        {
          "class": "mg-u-background-color--red-50",
          "description": "Red 50 background"
        },
        {
          "class": "mg-u-background-color--red-100",
          "description": "Red 100 background"
        },
        {
          "class": "mg-u-background-color--red-200",
          "description": "Red 200 background"
        },
        {
          "class": "mg-u-background-color--red-300",
          "description": "Red 300 background"
        },
        {
          "class": "mg-u-background-color--red-400",
          "description": "Red 400 background"
        },
        {
          "class": "mg-u-background-color--red-500",
          "description": "Red 500 background"
        },
        {
          "class": "mg-u-background-color--red-600",
          "description": "Red 600 background"
        },
        {
          "class": "mg-u-background-color--red-700",
          "description": "Red 700 background"
        },
        {
          "class": "mg-u-background-color--red-800",
          "description": "Red 800 background"
        },
        {
          "class": "mg-u-background-color--red-900",
          "description": "Red 900 background"
        },
        {
          "class": "mg-u-background-color--neutral-0",
          "description": "Neutral 0 (white) background"
        },
        {
          "class": "mg-u-background-color--neutral-25",
          "description": "Neutral 25 background"
        },
        {
          "class": "mg-u-background-color--neutral-50",
          "description": "Neutral 50 background"
        },
        {
          "class": "mg-u-background-color--neutral-100",
          "description": "Neutral 100 background"
        },
        {
          "class": "mg-u-background-color--neutral-200",
          "description": "Neutral 200 background"
        },
        {
          "class": "mg-u-background-color--neutral-300",
          "description": "Neutral 300 background"
        },
        {
          "class": "mg-u-background-color--neutral-400",
          "description": "Neutral 400 background"
        },
        {
          "class": "mg-u-background-color--neutral-500",
          "description": "Neutral 500 background"
        },
        {
          "class": "mg-u-background-color--neutral-600",
          "description": "Neutral 600 background"
        },
        {
          "class": "mg-u-background-color--neutral-700",
          "description": "Neutral 700 background"
        },
        {
          "class": "mg-u-background-color--neutral-800",
          "description": "Neutral 800 background"
        },
        {
          "class": "mg-u-background-color--neutral-900",
          "description": "Neutral 900 background"
        },
        {
          "class": "mg-u-background-color--accent-100",
          "description": "Accent 100 background"
        },
        {
          "class": "mg-u-background-color--accent-200",
          "description": "Accent 200 background"
        },
        {
          "class": "mg-u-background-color--accent-300",
          "description": "Accent 300 background"
        },
        {
          "class": "mg-u-background-color--accent-400",
          "description": "Accent 400 background"
        },
        {
          "class": "mg-u-background-color--sendai-red",
          "description": "DEPRECATED — red accent. Named by colour, not by Sendai target.",
          "deprecated": true,
          "removalTarget": "2.1",
          "replacement": "For Sendai Framework target semantics use the --mg-sendai-target-a through -g custom properties (with their --mg-sendai-on-target-* label colours). For a plain accent, use the --mg-color-* palette. Do not emit this class in new code."
        },
        {
          "class": "mg-u-background-color--sendai-orange",
          "description": "DEPRECATED — orange accent. Named by colour, not by Sendai target.",
          "deprecated": true,
          "removalTarget": "2.1",
          "replacement": "For Sendai Framework target semantics use the --mg-sendai-target-a through -g custom properties (with their --mg-sendai-on-target-* label colours). For a plain accent, use the --mg-color-* palette. Do not emit this class in new code."
        },
        {
          "class": "mg-u-background-color--sendai-purple",
          "description": "DEPRECATED — purple accent. Named by colour, not by Sendai target.",
          "deprecated": true,
          "removalTarget": "2.1",
          "replacement": "For Sendai Framework target semantics use the --mg-sendai-target-a through -g custom properties (with their --mg-sendai-on-target-* label colours). For a plain accent, use the --mg-color-* palette. Do not emit this class in new code."
        },
        {
          "class": "mg-u-background-color--sendai-turquoise",
          "description": "DEPRECATED — turquoise accent. Named by colour, not by Sendai target.",
          "deprecated": true,
          "removalTarget": "2.1",
          "replacement": "For Sendai Framework target semantics use the --mg-sendai-target-a through -g custom properties (with their --mg-sendai-on-target-* label colours). For a plain accent, use the --mg-color-* palette. Do not emit this class in new code."
        },
        {
          "class": "mg-u-background-color--interactive",
          "description": "Interactive color background (default: blue-900)"
        },
        {
          "class": "mg-u-background-color--interactive-active",
          "description": "Interactive active color background (default: blue-700)"
        }
      ]
    },
    {
      "name": "Text colors",
      "description": "Text color utilities matching the background color system. Pattern: mg-u-color--{color-shade}.",
      "classes": [
        {
          "class": "mg-u-color--white",
          "description": "White text"
        },
        {
          "class": "mg-u-color--black",
          "description": "Black text"
        },
        {
          "class": "mg-u-color--blue-50",
          "description": "Blue 50 text color"
        },
        {
          "class": "mg-u-color--blue-100",
          "description": "Blue 100 text color"
        },
        {
          "class": "mg-u-color--blue-200",
          "description": "Blue 200 text color"
        },
        {
          "class": "mg-u-color--blue-300",
          "description": "Blue 300 text color"
        },
        {
          "class": "mg-u-color--blue-400",
          "description": "Blue 400 text color"
        },
        {
          "class": "mg-u-color--blue-500",
          "description": "Blue 500 text color"
        },
        {
          "class": "mg-u-color--blue-600",
          "description": "Blue 600 text color"
        },
        {
          "class": "mg-u-color--blue-700",
          "description": "Blue 700 text color"
        },
        {
          "class": "mg-u-color--blue-800",
          "description": "Blue 800 text color"
        },
        {
          "class": "mg-u-color--blue-900",
          "description": "Blue 900 text color"
        },
        {
          "class": "mg-u-color--orange-50",
          "description": "Orange 50 text color"
        },
        {
          "class": "mg-u-color--orange-100",
          "description": "Orange 100 text color"
        },
        {
          "class": "mg-u-color--orange-200",
          "description": "Orange 200 text color"
        },
        {
          "class": "mg-u-color--orange-300",
          "description": "Orange 300 text color"
        },
        {
          "class": "mg-u-color--orange-400",
          "description": "Orange 400 text color"
        },
        {
          "class": "mg-u-color--orange-500",
          "description": "Orange 500 text color"
        },
        {
          "class": "mg-u-color--orange-600",
          "description": "Orange 600 text color"
        },
        {
          "class": "mg-u-color--orange-700",
          "description": "Orange 700 text color"
        },
        {
          "class": "mg-u-color--orange-800",
          "description": "Orange 800 text color"
        },
        {
          "class": "mg-u-color--orange-900",
          "description": "Orange 900 text color"
        },
        {
          "class": "mg-u-color--red-50",
          "description": "Red 50 text color"
        },
        {
          "class": "mg-u-color--red-100",
          "description": "Red 100 text color"
        },
        {
          "class": "mg-u-color--red-200",
          "description": "Red 200 text color"
        },
        {
          "class": "mg-u-color--red-300",
          "description": "Red 300 text color"
        },
        {
          "class": "mg-u-color--red-400",
          "description": "Red 400 text color"
        },
        {
          "class": "mg-u-color--red-500",
          "description": "Red 500 text color"
        },
        {
          "class": "mg-u-color--red-600",
          "description": "Red 600 text color"
        },
        {
          "class": "mg-u-color--red-700",
          "description": "Red 700 text color"
        },
        {
          "class": "mg-u-color--red-800",
          "description": "Red 800 text color"
        },
        {
          "class": "mg-u-color--red-900",
          "description": "Red 900 text color"
        },
        {
          "class": "mg-u-color--neutral-0",
          "description": "Neutral 0 text color"
        },
        {
          "class": "mg-u-color--neutral-50",
          "description": "Neutral 50 text color"
        },
        {
          "class": "mg-u-color--neutral-100",
          "description": "Neutral 100 text color"
        },
        {
          "class": "mg-u-color--neutral-200",
          "description": "Neutral 200 text color"
        },
        {
          "class": "mg-u-color--neutral-300",
          "description": "Neutral 300 text color"
        },
        {
          "class": "mg-u-color--neutral-400",
          "description": "Neutral 400 text color"
        },
        {
          "class": "mg-u-color--neutral-500",
          "description": "Neutral 500 text color"
        },
        {
          "class": "mg-u-color--neutral-600",
          "description": "Neutral 600 text color"
        },
        {
          "class": "mg-u-color--neutral-700",
          "description": "Neutral 700 text color"
        },
        {
          "class": "mg-u-color--neutral-800",
          "description": "Neutral 800 text color"
        },
        {
          "class": "mg-u-color--neutral-900",
          "description": "Neutral 900 text color"
        },
        {
          "class": "mg-u-color--accent-100",
          "description": "Accent 100 text color"
        },
        {
          "class": "mg-u-color--accent-200",
          "description": "Accent 200 text color"
        },
        {
          "class": "mg-u-color--accent-300",
          "description": "Accent 300 text color"
        },
        {
          "class": "mg-u-color--accent-400",
          "description": "Accent 400 text color"
        },
        {
          "class": "mg-u-color--sendai-red",
          "description": "DEPRECATED — red accent. Named by colour, not by Sendai target.",
          "deprecated": true,
          "removalTarget": "2.1",
          "replacement": "For Sendai Framework target semantics use the --mg-sendai-target-a through -g custom properties (with their --mg-sendai-on-target-* label colours). For a plain accent, use the --mg-color-* palette. Do not emit this class in new code."
        },
        {
          "class": "mg-u-color--sendai-orange",
          "description": "DEPRECATED — orange accent. Named by colour, not by Sendai target.",
          "deprecated": true,
          "removalTarget": "2.1",
          "replacement": "For Sendai Framework target semantics use the --mg-sendai-target-a through -g custom properties (with their --mg-sendai-on-target-* label colours). For a plain accent, use the --mg-color-* palette. Do not emit this class in new code."
        },
        {
          "class": "mg-u-color--sendai-purple",
          "description": "DEPRECATED — purple accent. Named by colour, not by Sendai target.",
          "deprecated": true,
          "removalTarget": "2.1",
          "replacement": "For Sendai Framework target semantics use the --mg-sendai-target-a through -g custom properties (with their --mg-sendai-on-target-* label colours). For a plain accent, use the --mg-color-* palette. Do not emit this class in new code."
        },
        {
          "class": "mg-u-color--sendai-turquoise",
          "description": "DEPRECATED — turquoise accent. Named by colour, not by Sendai target.",
          "deprecated": true,
          "removalTarget": "2.1",
          "replacement": "For Sendai Framework target semantics use the --mg-sendai-target-a through -g custom properties (with their --mg-sendai-on-target-* label colours). For a plain accent, use the --mg-color-* palette. Do not emit this class in new code."
        },
        {
          "class": "mg-u-color--interactive",
          "description": "Interactive color text (default: blue-900)"
        },
        {
          "class": "mg-u-color--interactive-active",
          "description": "Interactive active color text (default: blue-700)"
        }
      ]
    },
    {
      "name": "Font sizes",
      "description": "Responsive font size utilities. Sizes 400+ scale up at the tablet breakpoint (900px). Includes language-specific line-height overrides for Burmese (:lang(my)) and Arabic (:lang(ar)).",
      "classes": [
        {
          "class": "mg-u-font-size-150",
          "description": "1.125rem. Line-height: 1.5em. No responsive scaling."
        },
        {
          "class": "mg-u-font-size-200",
          "description": "1.25rem. Line-height: 1.5em. No responsive scaling."
        },
        {
          "class": "mg-u-font-size-250",
          "description": "1.4rem. Line-height: 1.5em. No responsive scaling."
        },
        {
          "class": "mg-u-font-size-300",
          "description": "1.6rem. Line-height: 1.5em. No responsive scaling."
        },
        {
          "class": "mg-u-font-size-400",
          "description": "1.6rem mobile, 1.8rem at 900px+. Line-height: 1.5em. Burmese: 1.7."
        },
        {
          "class": "mg-u-font-size-500",
          "description": "1.8rem mobile, 2.3rem at 900px+. Line-height: 1.25em. Burmese: 1.7."
        },
        {
          "class": "mg-u-font-size-600",
          "description": "2.3rem mobile, 3.2rem at 900px+. Line-height: 1.25em. Burmese: 1.7, Arabic: 1.4."
        },
        {
          "class": "mg-u-font-size-800",
          "description": "3.2rem mobile, 3.6rem at 900px+. Line-height: 1.25em. Burmese: 1.7, Arabic: 1.4."
        },
        {
          "class": "mg-u-font-size-900",
          "description": "3.6rem mobile, 4rem at 900px+. Line-height: 1.25em. Burmese: 1.7, Arabic: 1.4."
        }
      ]
    },
    {
      "name": "Embed containers",
      "description": "Responsive aspect-ratio wrappers for iframes, videos, and embeds. Uses aspect-ratio with padding-bottom fallback.",
      "classes": [
        {
          "class": "mg-embed-container",
          "description": "Default 16:9 responsive embed wrapper.",
          "usage": "<div class=\"mg-embed-container\">\n  <iframe src=\"https://www.youtube.com/embed/VIDEO_ID\" allowfullscreen></iframe>\n</div>"
        },
        {
          "class": "mg-embed-container--4x3",
          "description": "4:3 aspect ratio embed wrapper."
        },
        {
          "class": "mg-embed-container--1x1",
          "description": "1:1 (square) aspect ratio embed wrapper."
        },
        {
          "class": "mg-embed-container--21x9",
          "description": "21:9 (ultrawide) aspect ratio embed wrapper."
        }
      ]
    },
    {
      "name": "Show more",
      "description": "Collapse long content behind a fade. Requires the mg-show-more vanilla JS utility for toggle behavior. Customizable height via the --mg-show-more-height CSS variable (default: 200px).",
      "classes": [
        {
          "class": "mg-show-more--collapsed",
          "description": "Collapses the element to --mg-show-more-height (default 200px) with a gradient fade mask at the bottom.",
          "usage": "<div class=\"mg-show-more--collapsed\" data-mg-show-more>\n  <p>Long content that will be collapsed...</p>\n</div>\n<button class=\"mg-show-more--button\">Show more</button>"
        },
        {
          "class": "mg-show-more--button",
          "description": "Styled toggle button for the show-more pattern."
        }
      ]
    },
    {
      "name": "Skip link",
      "description": "Bypass block for keyboard users. Hidden until focused, then shown in normal flow at the top of the page.",
      "classes": [
        {
          "class": "mg-skip-link",
          "description": "Visually hidden anchor that reveals on keyboard focus. Its target must carry both an id and tabindex=\"-1\", or focus stays on the link and only the scroll position moves. Not a substitute for, and not built on, mg-u-sr-only, which has no focus reveal.",
          "usage": "<a class=\"mg-skip-link\" href=\"#main-content\">Skip to main content</a>\n<header id=\"header\">...</header>\n<main id=\"main-content\" tabindex=\"-1\">...</main>"
        }
      ]
    }
  ],
  "generatedAt": "2026-09-30T10:20:52.476Z"
}