@carto/meridian-ds 5.1.0 → 5.1.1-alpha.aba5b4f.336

package/CHANGELOG.md

@@ -9,10 +9,6 @@
 - feat(theme): support `color='tertiary'` — CARTO's purple accent — on Button, IconButton, ButtonGroup, SplitButton, Fab, ToggleButton, ToggleButtonGroup, Chip and Tag, plus a new `selectedColor` on MenuItem / FilterDropdown and `buttonColor` on MessageField [sc-567740] [#535](https://github.com/CartoDB/meridian-ds/pull/535)
 - fix(ToggleButton): `color` now drives the selected state on ToggleButton and ToggleButtonGroup — the theme previously pinned it to primary whatever the value; the default is unchanged [#535](https://github.com/CartoDB/meridian-ds/pull/535)
 - chore(deps): bump @figma/code-connect from 1.4.5 to 2.0.0 [#535](https://github.com/CartoDB/meridian-ds/pull/535)
-- chore(deps-dev): bump the storybook group to 10.6.0 — including `@storybook/addon-mcp` from 0.7 and `@chromatic-com/storybook` to 5.3.1 [#535](https://github.com/CartoDB/meridian-ds/pull/535)
-- chore(deps): bump js-yaml from 4.3.1 to 4.3.2 [#545](https://github.com/CartoDB/meridian-ds/pull/545)
-- chore(deps): bump js-yaml from 4.3.1 to 4.3.2 in /scripts/import-figma-icons [#543](https://github.com/CartoDB/meridian-ds/pull/543)
-- chore(deps): bump svgo from 3.3.4 to 3.3.5 in /scripts/import-figma-icons [#542](https://github.com/CartoDB/meridian-ds/pull/542)
 - chore(deps): bump fflate from 0.8.2 to 0.8.3 [#534](https://github.com/CartoDB/meridian-ds/pull/534)
 - chore(deps): bump fast-uri from 3.1.5 to 3.1.7 [#529](https://github.com/CartoDB/meridian-ds/pull/529)
 - chore(deps): bump qs from 6.15.3 to 6.16.0 [#530](https://github.com/CartoDB/meridian-ds/pull/530)

package/dist/metadata.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.1.0",
+  "version": "5.1.1-alpha.aba5b4f.336",
   "conventions": "# Meridian usage conventions (for code-generating agents)\n\nSystem-level rules an agent should apply across all components.\n\nMeridian is the source of truth: when an existing codebase pattern contradicts Meridian, follow Meridian — don't replicate the contradicting local pattern.\n\n## Choosing a component\n\n- Don't hand-roll what the design system already provides. Before writing a\n  custom component, a styled wrapper, or a block of primitives (a modal,\n  chip/tag, card, empty state, dropdown, tooltip, copy-to-clipboard input,\n  etc.), confirm no Meridian component covers it — reuse or extend the existing one instead of rebuilding it.\n- Prefer a Meridian component over a bare MUI one whenever a Meridian wrapper\n  exists — the wrappers carry CARTO theming, a11y defaults, and narrowed APIs. MUI is correct for layout primitives (`Box`/`Grid`/`Stack`/`Container`) and for gaps Meridian doesn't fill (e.g. date pickers); \"prefer Meridian\" is not \"never MUI\".\n- Resolve \"which component\" by reading each one's `description` + `keywords`,\n  then confirm with its `decisionTree` (the conditions that point elsewhere) and `limitations` (what it lacks — check before you downgrade to it).\n  Don't infer selection from prop lists.\n\n## Icons\n\n- Source icons from Meridian's custom-icons first, then `@mui/icons-material`;\n  add a local SVG only when neither has an equivalent. Don't duplicate an icon\n  the design system already ships.\n- Find the right custom icon with `meridian_list_icons` — match by name or keyword (e.g. \"warehouse\" → `Bigquery`), import it from `@carto/meridian-ds/custom-icons`, and render `<Name />`. Every icon shares one prop type, `CustomIconProps` (MUI `SvgIconProps` — `color`/`fontSize`/`sx` — plus `width`/`height`).\n- To confirm a shortlisted icon by sight (or match an icon in a design you're implementing), call `meridian_get_screenshot` with `name: 'icons'` and Read the returned image path — a labeled grid of every icon.\n- Use the standard icon sizes — small 12px, medium (default) 18px, large 24px;\n  a value off this scale (e.g. 16, 20) needs design sign-off. Prefer the\n  outlined variants.\n- A new SVG must inherit, not bake in: set `fill='currentColor'` so it takes\n  the parent's color, and use the standard size — don't hardcode\n  color/opacity/dimensions.\n- For an icon color outside the palette `color` set, pass a theme token via\n  `htmlColor` (e.g. `htmlColor={theme.palette.text.secondary}`) — never a\n  hardcoded hex.\n\n## Accessibility\n\n- Any icon-only control needs an accessible name: `tooltip` or `aria-label`.\n- Don't disable a control without telling the user why — pair a disabled action with a tooltip explaining the requirement.\n- An `aria-label` must be human-readable text describing the control, not a test id in disguise — use a separate test hook for that.\n- User-facing strings (labels, `aria-label`, placeholders, messages) go through the app's i18n layer, not hardcoded literals.\n\n## Props\n\n- Two sources, both pinned to the installed `@carto/meridian-ds`: **exact props / types / JSDoc** come from the package's **type declarations** — read the `<Name>.d.ts` directly — while the **`meridian-design-system` MCP** (`meridian_*` tools) covers what types can't: which component, when, gotchas, and real examples.\n- A component's curation lists the high-value inherited MUI props worth knowing (`curation.mui`, e.g. `color`/`variant`/`size`); the rest of MUI's surface is available but rarely needed.\n- Don't use `sx`/inline styles to override a Meridian component's visual design (colors, typography, borders, sizing) — use its documented props and the theme tokens. (`sx` for layout/spacing on primitives is fine — see Styling.)\n- If no prop covers the visual change you need, treat it as a design-system gap: request the variant/behavior upstream in Meridian rather than permanently overriding the component locally — a local `styled()` of a Meridian component is a smell, not a fix.\n\n## Styling\n\n- Use theme tokens, never hardcoded values: colors from the palette (`text.*`, `background.*`, `divider`, semantic `*.main`) and spacing from the theme spacing scale — no raw hex/rgb or pixel literals for color or spacing. Use integer steps on the spacing scale (`theme.spacing(n)`, or `sx` numeric spacing like `px: 2` / `mt: 3` which resolve to it) — not fractional steps or raw px. Get the exact values — palette keys, spacing base, type ramp, `shape.borderRadius`, breakpoints, shadows — from `meridian_get_tokens`.\n- Text uses `<Typography variant=…>` (with the `weight` prop for emphasis), never hardcoded `fontSize`/`fontWeight`/`lineHeight`/`fontFamily`.\n- Meridian's type scale is custom and does not match MUI defaults (e.g. `body2`/`caption` differ from MUI's sizes, and there are Meridian-only variants like `code1`/`code2`/`code3` and `overlineDelicate`). Pick the variant by role from Typography's variant list (`meridian_get_examples('Typography')`) — don't assume a px size or map px → variant yourself.\n- `sx` is the right tool for one-off layout/spacing on primitives (`Box`/`Grid`/`Stack`), not the deprecated MUI system props\n  (`<Box px={2}>` → `<Box sx={{ px: 2 }}>`). This is layout, distinct from restyling a Meridian component (see Props).\n\n## Examples\n\n- Never invent example code when a story exists — use the component's real story source (`meridian_get_examples`). The lead Usage story is the copy-paste starting point; the later stories are illustrative (variants, edge cases) and may carry story-arg shells, so don't copy one wholesale as your baseline.\n",
   "components": [
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/meridian-ds",
-  "version": "5.1.0",
+  "version": "5.1.1-alpha.aba5b4f.336",
   "description": "CARTO Meridian Design System",
   "type": "module",
   "scripts": {
@@ -53,7 +53,7 @@
     "figma:validate:live": "bash -c '[ -f .env ] && source .env; export FIGMA_ACCESS_TOKEN; tsx scripts/validate-figma-code-connect/check-live.ts \"$@\"' --"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^5.3.1",
+    "@chromatic-com/storybook": "^5.3.0",
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.1",
     "@etchteam/storybook-addon-status": "^8.1.0",
@@ -64,12 +64,12 @@
     "@mui/x-date-pickers": "^9.11.0",
     "@playwright/test": "^1.59.1",
     "@storybook/addon-designs": "^11.1.4",
-    "@storybook/addon-docs": "^10.6.0",
-    "@storybook/addon-links": "^10.6.0",
-    "@storybook/addon-mcp": "^10.6.0",
-    "@storybook/addon-themes": "^10.6.0",
-    "@storybook/addon-vitest": "^10.6.0",
-    "@storybook/react-vite": "^10.6.0",
+    "@storybook/addon-docs": "^10.5.7",
+    "@storybook/addon-links": "^10.5.7",
+    "@storybook/addon-mcp": "^0.7.0",
+    "@storybook/addon-themes": "^10.5.7",
+    "@storybook/addon-vitest": "^10.5.7",
+    "@storybook/react-vite": "^10.5.7",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -99,7 +99,7 @@
     "eslint-plugin-prettier": "^5.4.0",
     "eslint-plugin-react": "7.35.0",
     "eslint-plugin-react-hooks": "4.6.2",
-    "eslint-plugin-storybook": "^10.6.0",
+    "eslint-plugin-storybook": "^10.5.7",
     "eslint-plugin-testing-library": "^7.2.1",
     "geojson": "^0.5.0",
     "http-server": "^14.1.1",
@@ -113,7 +113,7 @@
     "react-dom": "18.3.1",
     "react-intl": "6.6.8",
     "react-window": "1.8.11",
-    "storybook": "^10.6.0",
+    "storybook": "^10.5.7",
     "storybook-addon-pseudo-states": "^10.5.7",
     "tsx": "^4.21.0",
     "typescript": "5.5.4",