@carto/meridian-ds 3.0.3-alpha.fa1a999.285 → 3.1.0

package/CHANGELOG.md

@@ -2,13 +2,15 @@
 
 ## Unreleased
 
+## 3.0
+
+### 3.1.0
+
 - feat(components): add IconWrapper [#453](https://github.com/CartoDB/meridian-ds/pull/453)
 - feat(custom-icons): add Leftsidebar, Rightsidebar, SqlSource; update RunReuse from the Figma import
 - feat(ai-metadata): expose component knowledge to AI agents via the new `meridian-ds-mcp` MCP server — a build-time `dist/metadata.json` bundle (curation, conventions, example code) authored per component via `<Name>.metadata.ts` + JSDoc, validated in CI [#443](https://github.com/CartoDB/meridian-ds/pull/443)
 - feat(ai-metadata): full component-catalog coverage (every public component documented) plus CI enforcement — coverage gate, listable `decisionTree`/`subComponent` targets, and repo-wide JSDoc tag hygiene; custom icons + theme still to come [#459](https://github.com/CartoDB/meridian-ds/pull/459)
 
-## 3.0
-
 ### 3.0.2
 
 - fix(CodeArea): keep a comfortable right padding for long, wrapped values in read-only / `lineNumbers: false` blocks — wrapped content no longer touches the right edge [#448](https://github.com/CartoDB/meridian-ds/pull/448)

package/dist/components/index.cjs

@@ -5093,7 +5093,7 @@ const IconWrapperRoot = material.styled(material.Box, {
   else if (size <= 18) iconSize = paletteUtils.ICON_SIZE_SMALL;
   else if (size <= 32) iconSize = paletteUtils.ICON_SIZE_MEDIUM;
   else iconSize = paletteUtils.ICON_SIZE_LARGE;
-  const borderRadius = variant === "circular" ? "50%" : variant === "rounded" ? theme.spacing(size <= 12 ? 0.25 : 0.5) : 0;
+  const borderRadius = variant === "circular" ? "50%" : variant === "rounded" ? theme.spacing(size <= 12 ? 0.25 : size <= 32 ? 0.5 : 1) : 0;
   return {
     display: "inline-flex",
     alignItems: "center",

package/dist/components/index.js

@@ -5077,7 +5077,7 @@ const IconWrapperRoot = styled(Box, {
   else if (size <= 18) iconSize = ICON_SIZE_SMALL;
   else if (size <= 32) iconSize = ICON_SIZE_MEDIUM;
   else iconSize = ICON_SIZE_LARGE;
-  const borderRadius = variant === "circular" ? "50%" : variant === "rounded" ? theme.spacing(size <= 12 ? 0.25 : 0.5) : 0;
+  const borderRadius = variant === "circular" ? "50%" : variant === "rounded" ? theme.spacing(size <= 12 ? 0.25 : size <= 32 ? 0.5 : 1) : 0;
   return {
     display: "inline-flex",
     alignItems: "center",

package/dist/metadata.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.0.3-alpha.fa1a999.285",
+  "version": "3.1.0",
   "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- 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.\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/dist/types/components/IconWrapper/IconWrapper.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode, AriaAttributes, HTMLAttributes } from 'react';
-import { TooltipProps } from '@mui/material';
+import { SxProps, Theme, TooltipProps } from '@mui/material';
 export type IconWrapperProps = AriaAttributes & {
     /** The icon to render. Any SvgIcon, custom Meridian icon, or node. */
     children: ReactNode;
@@ -11,6 +11,8 @@ export type IconWrapperProps = AriaAttributes & {
     tabIndex?: number;
     /** Test id forwarded to the root element for queries in tests. */
     'data-testid'?: string;
+    /** MUI `sx` for one-off style overrides on the root element. */
+    sx?: SxProps<Theme>;
     /**
      * Outer footprint in pixels — an open number for flexibility. The standard
      * steps (12/18/24/32/40/48, the Figma `Size` variants) have tuned
@@ -84,6 +86,8 @@ declare const IconWrapper: import('react').ForwardRefExoticComponent<AriaAttribu
     tabIndex?: number;
     /** Test id forwarded to the root element for queries in tests. */
     'data-testid'?: string;
+    /** MUI `sx` for one-off style overrides on the root element. */
+    sx?: SxProps<Theme>;
     /**
      * Outer footprint in pixels — an open number for flexibility. The standard
      * steps (12/18/24/32/40/48, the Figma `Size` variants) have tuned

package/dist/types/components/IconWrapper/IconWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/IconWrapper/IconWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAGT,cAAc,EACd,cAAc,EACf,MAAM,OAAO,CAAA;AACd,OAAO,EAAsC,YAAY,EAAE,MAAM,eAAe,CAAA;AAMhF,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAAG;IAC9C,sEAAsE;IACtE,QAAQ,EAAE,SAAS,CAAA;IACnB,0CAA0C;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,qCAAqC;IACrC,IAAI,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;IAC7C,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAA;IAC3C;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAA;IACvE;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAA;IACpC;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAA;IAC/B;;;OAGG;IACH,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,UAAU,CAAC,CAAA;CACxD,CAAA;AA0PD,gPAAgP;AAChP,QAAA,MAAM,WAAW;IAjUf,sEAAsE;cAC5D,SAAS;IACnB,0CAA0C;SACrC,MAAM;IACX,qCAAqC;WAC9B,cAAc,CAAC,cAAc,CAAC,CAAC,MAAM,CAAC;IAC7C,qCAAqC;eAC1B,MAAM;IACjB,kEAAkE;oBAClD,MAAM;IACtB;;;;;OAKG;WACI,MAAM;IACb;;;OAGG;cACO,SAAS,GAAG,QAAQ,GAAG,UAAU;IAC3C;;;;;;OAMG;YACK,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC;IACvE;;;OAGG;iBACU,OAAO;IACpB;;;;;OAKG;iBACU,OAAO,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC;IACpC;;;;OAIG;sBACe,MAAM;IACxB;;;;OAIG;qBACc,OAAO;IACxB;;;OAGG;eACQ,OAAO;IAClB;;;;OAIG;cACO,YAAY,CAAC,OAAO,CAAC;IAC/B;;;OAGG;mBACY,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,UAAU,CAAC;kDA4Pb,CAAA;AAE5C,eAAe,WAAW,CAAA"}
+{"version":3,"file":"IconWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/IconWrapper/IconWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAGT,cAAc,EACd,cAAc,EACf,MAAM,OAAO,CAAA;AACd,OAAO,EAIL,OAAO,EACP,KAAK,EAEL,YAAY,EACb,MAAM,eAAe,CAAA;AAOtB,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAAG;IAC9C,sEAAsE;IACtE,QAAQ,EAAE,SAAS,CAAA;IACnB,0CAA0C;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,qCAAqC;IACrC,IAAI,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;IAC7C,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,gEAAgE;IAChE,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;IACnB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAA;IAC3C;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAA;IACvE;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAA;IACpC;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAA;IAC/B;;;OAGG;IACH,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,UAAU,CAAC,CAAA;CACxD,CAAA;AA2PD,gPAAgP;AAChP,QAAA,MAAM,WAAW;IApUf,sEAAsE;cAC5D,SAAS;IACnB,0CAA0C;SACrC,MAAM;IACX,qCAAqC;WAC9B,cAAc,CAAC,cAAc,CAAC,CAAC,MAAM,CAAC;IAC7C,qCAAqC;eAC1B,MAAM;IACjB,kEAAkE;oBAClD,MAAM;IACtB,gEAAgE;SAC3D,OAAO,CAAC,KAAK,CAAC;IACnB;;;;;OAKG;WACI,MAAM;IACb;;;OAGG;cACO,SAAS,GAAG,QAAQ,GAAG,UAAU;IAC3C;;;;;;OAMG;YACK,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC;IACvE;;;OAGG;iBACU,OAAO;IACpB;;;;;OAKG;iBACU,OAAO,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC;IACpC;;;;OAIG;sBACe,MAAM;IACxB;;;;OAIG;qBACc,OAAO;IACxB;;;OAGG;eACQ,OAAO;IAClB;;;;OAIG;cACO,YAAY,CAAC,OAAO,CAAC;IAC/B;;;OAGG;mBACY,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,UAAU,CAAC;kDA6Pb,CAAA;AAE5C,eAAe,WAAW,CAAA"}

package/dist/types/components/IconWrapper/IconWrapper.stories.d.ts

@@ -11,6 +11,7 @@ declare const options: {
         role?: import('react').HTMLAttributes<HTMLDivElement>["role"];
         tabIndex?: number;
         'data-testid'?: string;
+        sx?: import('@mui/material').SxProps<import('@mui/material').Theme>;
         size?: number;
         variant?: "rounded" | "square" | "circular";
         color?: "default" | "primary" | "secondary" | "inherit" | (string & {});

package/dist/types/components/IconWrapper/IconWrapper.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconWrapper.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/IconWrapper/IconWrapper.stories.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAML,gBAAgB,EAQjB,MAAM,cAAc,CAAA;AA2BrB,KAAK,oBAAoB,GAAG,gBAAgB,GAAG;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8ByB,CAAA;AACtC,eAAe,OAAO,CAAA;AA22BtB,2GAA2G;AAC3G,eAAO,MAAM,UAAU;4EAl2BpB,oBAAoB;;;;;;;;;;;;;;;;;;;;;CA22BtB,CAAA;AAED,uHAAuH;AACvH,eAAO,MAAM,KAAK;mBAp2BW,gBAAgB;;;;;;;;;;;;;;;CA+2B5C,CAAA;AAED,uGAAuG;AACvG,eAAO,MAAM,QAAQ;mBAj2BW,gBAAgB;;;;;;;;;;;;;;;CA42B/C,CAAA;AAED,gIAAgI;AAChI,eAAO,MAAM,MAAM;mBA51BW,gBAAgB;;;;;;;;;;;;;;;CAu2B7C,CAAA;AAED,4HAA4H;AAC5H,eAAO,MAAM,UAAU;mBArxBW,gBAAgB;;;;;;;;;;;;;;;CAgyBjD,CAAA;AAED,6DAA6D;AAC7D,eAAO,MAAM,MAAM;mBAlvBW,gBAAgB;;;;;;;;;;;;;;;CA6vB7C,CAAA;AAED,sFAAsF;AACtF,eAAO,MAAM,OAAO;mBA3uBW,gBAAgB;;;;;;;;CA8uB9C,CAAA;AAED,0IAA0I;AAC1I,eAAO,MAAM,WAAW;mBACP,gBAAgB;;;;;;;;CA6BhC,CAAA;AAED,uJAAuJ;AACvJ,eAAO,MAAM,0BAA0B;mBACtB,gBAAgB;;;;;;;;;;;;8BAyBC;QAAE,aAAa,EAAE,WAAW,CAAA;KAAE;CAQ/D,CAAA;AAED,mMAAmM;AACnM,eAAO,MAAM,sBAAsB;;;;;;;;;;;8BASD;QAAE,aAAa,EAAE,WAAW,CAAA;KAAE;CAY/D,CAAA;AAED,2IAA2I;AAC3I,eAAO,MAAM,KAAK;;;;;;;;CAkBjB,CAAA"}
+{"version":3,"file":"IconWrapper.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/IconWrapper/IconWrapper.stories.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAML,gBAAgB,EAQjB,MAAM,cAAc,CAAA;AA2BrB,KAAK,oBAAoB,GAAG,gBAAgB,GAAG;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8ByB,CAAA;AACtC,eAAe,OAAO,CAAA;AA05BtB,2GAA2G;AAC3G,eAAO,MAAM,UAAU;4EAj5BpB,oBAAoB;;;;;;;;;;;;;;;;;;;;;CA05BtB,CAAA;AAED,uHAAuH;AACvH,eAAO,MAAM,KAAK;mBAn5BW,gBAAgB;;;;;;;;;;;;;;;CA85B5C,CAAA;AAED,uGAAuG;AACvG,eAAO,MAAM,QAAQ;mBAh5BW,gBAAgB;;;;;;;;;;;;;;;CA25B/C,CAAA;AAED,gIAAgI;AAChI,eAAO,MAAM,MAAM;mBA34BW,gBAAgB;;;;;;;;;;;;;;;CAs5B7C,CAAA;AAED,4HAA4H;AAC5H,eAAO,MAAM,UAAU;mBAp0BW,gBAAgB;;;;;;;;;;;;;;;CA+0BjD,CAAA;AAED,6DAA6D;AAC7D,eAAO,MAAM,MAAM;mBAjyBW,gBAAgB;;;;;;;;;;;;;;;CA4yB7C,CAAA;AAED,sFAAsF;AACtF,eAAO,MAAM,OAAO;mBA1xBW,gBAAgB;;;;;;;;CA6xB9C,CAAA;AAED,0IAA0I;AAC1I,eAAO,MAAM,WAAW;mBACP,gBAAgB;;;;;;;;CA6BhC,CAAA;AAED,uJAAuJ;AACvJ,eAAO,MAAM,0BAA0B;mBACtB,gBAAgB;;;;;;;;;;;;8BAyBC;QAAE,aAAa,EAAE,WAAW,CAAA;KAAE;CAQ/D,CAAA;AAED,mMAAmM;AACnM,eAAO,MAAM,sBAAsB;;;;;;;;;;;8BASD;QAAE,aAAa,EAAE,WAAW,CAAA;KAAE;CAY/D,CAAA;AAED,2IAA2I;AAC3I,eAAO,MAAM,KAAK;;;;;;;;CAkBjB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/meridian-ds",
-  "version": "3.0.3-alpha.fa1a999.285",
+  "version": "3.1.0",
   "description": "CARTO Meridian Design System",
   "type": "module",
   "scripts": {