@carto/meridian-ds 5.2.1 → 5.2.2-alpha.febf205.40001643693

package/dist/components/index.cjs

@@ -6983,8 +6983,13 @@ const TagRoot = material.styled("div", {
     maxWidth: "100%",
     height: theme.spacing(2),
     borderWidth: "1px",
-    borderStyle: "solid",
-    ...colorProps(color ?? "primary", variant ?? "filled", theme, disabled),
+    borderStyle: variant === "dashed" ? "dashed" : "solid",
+    ...colorProps(
+      color ?? "primary",
+      variant === "dashed" ? "outlined" : variant ?? "filled",
+      theme,
+      disabled
+    ),
     '.Mui-selected &, [aria-selected="true"] &': {
       borderColor: theme.palette.primary.main,
       backgroundColor: theme.palette.primary.background,

package/dist/components/index.js

@@ -6966,8 +6966,13 @@ const TagRoot = styled("div", {
     maxWidth: "100%",
     height: theme.spacing(2),
     borderWidth: "1px",
-    borderStyle: "solid",
-    ...colorProps(color ?? "primary", variant ?? "filled", theme, disabled),
+    borderStyle: variant === "dashed" ? "dashed" : "solid",
+    ...colorProps(
+      color ?? "primary",
+      variant === "dashed" ? "outlined" : variant ?? "filled",
+      theme,
+      disabled
+    ),
     '.Mui-selected &, [aria-selected="true"] &': {
       borderColor: theme.palette.primary.main,
       backgroundColor: theme.palette.primary.background,

package/dist/metadata.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.2.1",
+  "version": "5.2.2-alpha.febf205.40001643693",
   "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- Common hand-rolled patterns and their Meridian replacement:\n  - `<a target=\"_blank\">` → `Link external`\n  - modal built from `Box` → `Dialog` + `DialogHeader`/`DialogContent`/`DialogFooter`\n  - pill/badge `Box` → `Tag`\n  - custom select/dropdown → `SelectField`, or `FilterDropdown` for filters\n  - label + required/optional mark → `LabelWithIndicator`\n  - read-only input with a copy button → `CopiableInputText`\n  - custom input → `TextField` (themed by Meridian; pick its `variant`) or `SearchField`\n  - manual ellipsis + tooltip → `EllipsisWithTooltip`\n  - status/feedback `Box` → `Alert`\n  - form label/help text → `InputLabel`/`FormHelperText` (themed by Meridian)\n- Compose before customizing: a cluster of `styled()` wrappers that mirrors a composite is a smell (e.g. a hand-built row instead of `ListItem` + `ListItemIcon iconProps` + `ListItemText` + `ListItemRightContent`). Don't trust a code comment claiming the design system can't do something — check the component's props first.\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- `IconWrapper`'s `size` is the outer footprint (steps 12/18/24/32/40/48), not the glyph size — the glyph inside is sized for you.\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 — pass the reason as `tooltip` on `Button`/`IconButton`/`SplitButton` (it shows while disabled), or link it with `aria-describedby`.\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- Interactive elements are real controls (`Button`, `IconButton`, `Link`, …) — never a `div`/`Box` with `onClick`.\n- Every input has a visible or accessible label, not just a placeholder; every image has `alt`.\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- Prefer the prop over an override (`Typography noWrap`/`weight`, `fullWidth`, `Alert isSticky`, …). Don't restyle one component to imitate another or to fake a state — pick the component/variant that already looks that way (e.g. `TextField variant=\"standard\"`, or plain `Typography` for a read-only value). Avoid brittle descendant selectors into a component's internals.\n- Don't restate or cancel built-in styling: no wrapper re-applying a component's own border/radius/background, no `disablePadding` on a parent only to re-add padding on its children.\n- `!important` on a Meridian or themed component is an override smell — a design-system gap to raise upstream.\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 scale (`theme.spacing(n)`, or `sx` numeric spacing like `px: 2` / `mt: 1.5`) — no raw hex/rgb or px. Margin, padding and gap use steps `0.25, 0.5, 0.75, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 7, 8, 9, 12, 15` (2–120px); `width`/`height` and positional offsets may use any step (`spacing-step` in `@carto/meridian-ds/eslint-rules` lints it). Get the exact values — palette keys, spacing base, type ramp, `shape.borderRadius`, breakpoints, shadows — from `meridian_get_tokens`.\n- Token details:\n  - `sx` spacing keys (`m*`/`p*`/`gap`) resolve to the scale, but `top`/`right`/`bottom`/`left` don't (`top: 2` is 2px) — use `theme.spacing()` there.\n  - In `styled()`, always use `theme.spacing()`. `style={}` isn't theme-aware — use `sx`.\n  - Borders use `divider`; radius comes from `shape.borderRadius`; elevation from `theme.shadows[n]`.\n  - Translucent black/white use `palette.black[N]`/`palette.white[N]` (N = 90, 60, 40, 25, 12, 8, 4), not `alpha()`.\n  - Motion uses `theme.transitions` and respects `prefers-reduced-motion`; responsive rules use `theme.breakpoints`.\n- Text uses `<Typography variant=…>` (with the `weight` prop for emphasis), never hardcoded `fontSize`/`fontWeight`/`lineHeight`/`fontFamily`. Text that can overflow gets `EllipsisWithTooltip` (or `noWrap` when the full text isn't needed).\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- A reusable component doesn't bake in its placement: no absolute positioning, outer margin, or fixed outer size — accept `sx` and let the caller place it.\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": [
     {
@@ -3676,7 +3676,7 @@
         {
           "name": "Variants",
           "id": "components-tag--variants",
-          "code": "import { Tag, TagProps } from '@carto/meridian-ds/components'\nimport { Grid } from '@mui/material'\n\nconst Variants = ({ color, ...args }: TagProps) => {\n  return (\n    <Grid container spacing={2}>\n      <Grid>\n        <Tag {...args} color={color} variant='filled' label='Filled tag' />\n      </Grid>\n      <Grid>\n        <Tag {...args} color={color} variant='outlined' label='Outlined tag' />\n      </Grid>\n    </Grid>\n  )\n}"
+          "code": "import { Tag, TagProps } from '@carto/meridian-ds/components'\nimport { Grid } from '@mui/material'\n\nconst Variants = ({ color, ...args }: TagProps) => {\n  return (\n    <Grid container spacing={2}>\n      <Grid>\n        <Tag {...args} color={color} variant='filled' label='Filled tag' />\n      </Grid>\n      <Grid>\n        <Tag {...args} color={color} variant='outlined' label='Outlined tag' />\n      </Grid>\n      <Grid>\n        <Tag {...args} color={color} variant='dashed' label='Dashed tag' />\n      </Grid>\n    </Grid>\n  )\n}"
         },
         {
           "name": "Types",

package/dist/types/components/Tag/Tag.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { TypographyProps } from '..';
 export type TagColor = 'primary' | 'secondary' | 'tertiary' | 'error' | 'success' | 'warning' | 'default' | 'neutral';
-export type TagVariant = 'filled' | 'outlined';
+export type TagVariant = 'filled' | 'outlined' | 'dashed';
 export type TagType = 'default' | 'code';
 /**
  * Props for the Tag component.
@@ -44,13 +44,14 @@ export type TagProps = Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size' | 'la
      */
     icon?: ReactNode;
     /**
-     * Visual variant of the tag.
+     * Visual variant of the tag; `dashed` is `outlined` with a dashed border, for "no longer available" states.
      *
      * @default 'filled'
      * @example
      * ```tsx
      * <Tag label="Outlined" variant="outlined" />
      * <Tag label="Filled" variant="filled" />
+     * <Tag label="Expired" variant="dashed" color="neutral" />
      * ```
      */
     variant?: TagVariant;
@@ -140,13 +141,14 @@ declare const Tag: import('react').ForwardRefExoticComponent<Omit<import('react'
      */
     icon?: ReactNode;
     /**
-     * Visual variant of the tag.
+     * Visual variant of the tag; `dashed` is `outlined` with a dashed border, for "no longer available" states.
      *
      * @default 'filled'
      * @example
      * ```tsx
      * <Tag label="Outlined" variant="outlined" />
      * <Tag label="Filled" variant="filled" />
+     * <Tag label="Expired" variant="dashed" color="neutral" />
      * ```
      */
     variant?: TagVariant;

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA4B,MAAM,OAAO,CAAA;AAG3D,OAAO,EAAc,eAAe,EAAE,MAAM,cAAc,CAAA;AAG1D,MAAM,MAAM,QAAQ,GAChB,SAAS,GACT,WAAW,GACX,UAAU,GACV,OAAO,GACP,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,CAAA;AAEb,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAA;AAE9C,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,MAAM,CAAA;AAExC;;;;;GAKG;AAEH,MAAM,MAAM,QAAQ,GAAG,IAAI,CACzB,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAC/B,IAAI,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,CACzC,GAAG;IACF;;;;;;;;;OASG;IACH,KAAK,EAAE,SAAS,CAAA;IAEhB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAA;IAEhB;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAEhB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,UAAU,CAAA;IAEpB;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd;;;;;;;;;;;;;;OAcG;IACH,eAAe,CAAC,EAAE,eAAe,CAAA;IAEjC;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AA2OD,iTAAiT;AACjT,QAAA,MAAM,GAAG;IAhVP;;;;;;;;;OASG;WACI,SAAS;IAEhB;;;;;;;;;OASG;YACK,QAAQ;IAEhB;;;;;;;;;OASG;WACI,SAAS;IAEhB;;;;;;;;;OASG;cACO,UAAU;IAEpB;;;;;;;;;OASG;WACI,OAAO;IAEd;;;;;;;;;;;;;;OAcG;sBACe,eAAe;IAEjC;;;;;;;;;OASG;aACM,OAAO;IAEhB;;;;;;;;;OASG;eACQ,OAAO;kDA6OQ,CAAA;AAC5B,eAAe,GAAG,CAAA"}
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA4B,MAAM,OAAO,CAAA;AAG3D,OAAO,EAAc,eAAe,EAAE,MAAM,cAAc,CAAA;AAG1D,MAAM,MAAM,QAAQ,GAChB,SAAS,GACT,WAAW,GACX,UAAU,GACV,OAAO,GACP,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,CAAA;AAEb,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,CAAA;AAEzD,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,MAAM,CAAA;AAExC;;;;;GAKG;AAEH,MAAM,MAAM,QAAQ,GAAG,IAAI,CACzB,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAC/B,IAAI,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,CACzC,GAAG;IACF;;;;;;;;;OASG;IACH,KAAK,EAAE,SAAS,CAAA;IAEhB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAA;IAEhB;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAEhB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,UAAU,CAAA;IAEpB;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd;;;;;;;;;;;;;;OAcG;IACH,eAAe,CAAC,EAAE,eAAe,CAAA;IAEjC;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAgPD,iTAAiT;AACjT,QAAA,MAAM,GAAG;IAtVP;;;;;;;;;OASG;WACI,SAAS;IAEhB;;;;;;;;;OASG;YACK,QAAQ;IAEhB;;;;;;;;;OASG;WACI,SAAS;IAEhB;;;;;;;;;;OAUG;cACO,UAAU;IAEpB;;;;;;;;;OASG;WACI,OAAO;IAEd;;;;;;;;;;;;;;OAcG;sBACe,eAAe;IAEjC;;;;;;;;;OASG;aACM,OAAO;IAEhB;;;;;;;;;OASG;eACQ,OAAO;kDAkPQ,CAAA;AAC5B,eAAe,GAAG,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Tag/Tag.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAezB,OAAO,EAAO,QAAQ,EAAE,MAAM,cAAc,CAAA;AAO5C,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4Ce,CAAA;AAE5B,eAAe,OAAO,CAAA;AAuQtB,eAAO,MAAM,UAAU;0BA1PQ,QAAQ;;;;;;;;CA+PtC,CAAA;AAED,eAAO,MAAM,QAAQ;iCApByB,QAAQ;CAsBrD,CAAA;AAED,8FAA8F;AAC9F,eAAO,MAAM,KAAK;0BAxEkB,QAAQ;CA0E3C,CAAA;AAED,eAAO,MAAM,MAAM;0BAtQkB,QAAQ;CAwQ5C,CAAA;AAED,qGAAqG;AACrG,eAAO,MAAM,WAAW;0BA/QO,QAAQ;;;;;;;;CAwRtC,CAAA;AAED,eAAO,MAAM,SAAS;0BArNc,QAAQ;CAuN3C,CAAA;AAED,eAAO,MAAM,KAAK;;;CAejB,CAAA"}
+{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Tag/Tag.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAezB,OAAO,EAAO,QAAQ,EAAE,MAAM,cAAc,CAAA;AAO5C,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4Ce,CAAA;AAE5B,eAAe,OAAO,CAAA;AA0QtB,eAAO,MAAM,UAAU;0BA7PQ,QAAQ;;;;;;;;CAkQtC,CAAA;AAED,eAAO,MAAM,QAAQ;iCAvByB,QAAQ;CAyBrD,CAAA;AAED,8FAA8F;AAC9F,eAAO,MAAM,KAAK;0BA3EkB,QAAQ;CA6E3C,CAAA;AAED,eAAO,MAAM,MAAM;0BAzQkB,QAAQ;CA2Q5C,CAAA;AAED,qGAAqG;AACrG,eAAO,MAAM,WAAW;0BAlRO,QAAQ;;;;;;;;CA2RtC,CAAA;AAED,eAAO,MAAM,SAAS;0BAxNc,QAAQ;CA0N3C,CAAA;AAED,eAAO,MAAM,KAAK;;;CAejB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/meridian-ds",
-  "version": "5.2.1",
+  "version": "5.2.2-alpha.febf205.40001643693",
   "description": "CARTO Meridian Design System",
   "type": "module",
   "scripts": {