--- title: 'Slot matrix' description: 'Which targets read each catalog slot: a generated slot × target table, compiled from the exporters themselves.' order: 8 --- # Slot matrix Authoring a slot changes the targets that read it, and only those. This page answers "if I author `elevation.3.surface`, which libraries change?" for every slot of the [catalog](/transtyle/docs/language/): one row per slot, one column per target. It is compiled, not written. [Acme](/transtyle/docs/examples/) is built with each of the 11 exporters while the compiler records every slot each exporter reads, and each cell is classed from that exporter's [coverage report](/transtyle/docs/concepts/). The rows are the 262 catalog slots all 4 examples share. `npm run gen:matrix` regenerates the page and `npm run check:matrix` fails when it no longer matches the exporters. For your own design system and targets, run `transtyle check --matrix` (add `--json` for a `matrix` key in the report, see the [CLI reference](/transtyle/docs/cli/#--matrix)). ## Reading a cell | Cell | Meaning | | --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | native | A target variable maps to this slot one to one. | | derived | A target variable is computed from this slot (a mix, a ramp step, a unit conversion). | | approx. | A target variable is the closest fit to this slot, with a loss the coverage report spells out. | | input | The exporter reads the slot, but no coverage row names it: it feeds a value described under another slot or a pattern (a Radix ramp, a PrimeNG surface, a Bootstrap chained variable). | | (empty) | The target never reads the slot. Authoring it changes nothing there. | A read is counted whether or not the value ends up in the output, so the matrix errs on the safe side: an empty cell is a guarantee, a filled one is a dependency. 1 slot is read by all 11 targets (`semantic.color.elevation.0.surface`), 7 slots only by CSS variables (the reference dump, which emits every semantic slot), and every slot is read by at least one target. ## Color: primary Each slot below is `semantic.color.primary.`. | Slot | Read by | shadcn | daisyUI | ECharts | Bootstrap | Storybook | Radix | PrimeNG | Mantine | Chakra UI | Material UI | CSS vars | | ---------------- | ------- | --------------------------------------- | --------------------------------------- | ------- | --------------------------------------- | -------------------------------------- | -------------------------------------- | ------------------------------------- | -------------------------------------- | ------------------------------------- | -------------------------------------- | ------------------------------------- | | `on-solid` | 9/11 | derived | derived | | derived | | native | native | native | native | native | native | | `on-tint` | 5/11 | | | | derived | | | input | approx. | | input | native | | `outline` | 7/11 | | | | derived | | native | native | input | native | native | native | | `outline-hover` | 5/11 | | | | | | native | input | input | | native | native | | `solid` | 10/11 | native | native | | native | native | native | native | native | native | native | native | | `solid-active` | 5/11 | | | | derived | | | native | input | | input | native | | `solid-hover` | 7/11 | | | | derived | approx. | approx. | native | native | | approx. | native | | `solid-selected` | 2/11 | | | | | | | | | | input | native | | `text` | 6/11 | | | | | | native | native | native | native | native | native | | `text-active` | 2/11 | | | | | | | | | | input | native | | `text-hover` | 2/11 | | | | | | | | | | input | native | | `text-strong` | 5/11 | | | | | | native | input | input | | input | native | | `tint` | 7/11 | | | | derived | | native | native | native | native | approx. | native | | `tint-active` | 6/11 | | | | | | native | native | input | native | input | native | | `tint-hover` | 6/11 | | | | | | native | input | native | native | input | native | | `tint-selected` | 2/11 | | | | | | | | | | input | native | ## Color: secondary Each slot below is `semantic.color.secondary.`. | Slot | Read by | shadcn | daisyUI | ECharts | Bootstrap | Storybook | Radix | PrimeNG | Mantine | Chakra UI | Material UI | CSS vars | | ---------------- | ------- | ------ | --------------------------------------- | ------- | --------------------------------------- | --------- | ------------------------------------- | ------------------------------------- | -------------------------------------- | ------------------------------------- | -------------------------------------- | ------------------------------------- | | `on-solid` | 8/11 | | derived | | derived | | native | native | native | native | native | native | | `on-tint` | 4/11 | | | | derived | | | | approx. | | input | native | | `outline` | 7/11 | | | | derived | | native | native | input | native | native | native | | `outline-hover` | 4/11 | | | | | | native | | input | | native | native | | `solid` | 8/11 | | derived | | derived | | native | native | native | native | native | native | | `solid-active` | 5/11 | | | | derived | | | native | input | | input | native | | `solid-hover` | 6/11 | | | | derived | | native | native | native | | native | native | | `solid-selected` | 2/11 | | | | | | | | | | input | native | | `text` | 6/11 | | | | | | native | native | native | native | native | native | | `text-active` | 2/11 | | | | | | | | | | input | native | | `text-hover` | 2/11 | | | | | | | | | | input | native | | `text-strong` | 4/11 | | | | | | native | | input | | input | native | | `tint` | 7/11 | | | | derived | | native | native | native | native | approx. | native | | `tint-active` | 6/11 | | | | | | native | native | input | native | input | native | | `tint-hover` | 5/11 | | | | | | native | | native | native | input | native | | `tint-selected` | 2/11 | | | | | | | | | | input | native | ## Color: accent Each slot below is `semantic.color.accent.`. | Slot | Read by | shadcn | daisyUI | ECharts | Bootstrap | Storybook | Radix | PrimeNG | Mantine | Chakra UI | Material UI | CSS vars | | ---------------- | ------- | --------------------------------------- | --------------------------------------- | ------- | --------- | --------------------------------------- | -------------------------------------- | ------- | -------------------------------------- | ------------------------------------- | -------------------------------------- | ------------------------------------- | | `on-solid` | 6/11 | | derived | | | | native | | native | native | native | native | | `on-tint` | 4/11 | derived | | | | | | | approx. | | input | native | | `outline` | 5/11 | | | | | | native | | input | native | native | native | | `outline-hover` | 4/11 | | | | | | native | | input | | native | native | | `solid` | 7/11 | | derived | | | derived | native | | native | native | native | native | | `solid-active` | 3/11 | | | | | | | | input | | input | native | | `solid-hover` | 4/11 | | | | | | approx. | | native | | approx. | native | | `solid-selected` | 2/11 | | | | | | | | | | input | native | | `text` | 5/11 | | | | | | native | | native | native | native | native | | `text-active` | 2/11 | | | | | | | | | | input | native | | `text-hover` | 2/11 | | | | | | | | | | input | native | | `text-strong` | 4/11 | | | | | | native | | input | | input | native | | `tint` | 6/11 | derived | | | | | native | | native | native | approx. | native | | `tint-active` | 5/11 | | | | | | native | | input | native | input | native | | `tint-hover` | 5/11 | | | | | | native | | native | native | input | native | | `tint-selected` | 2/11 | | | | | | | | | | input | native | ## Color: success Each slot below is `semantic.color.success.`. | Slot | Read by | shadcn | daisyUI | ECharts | Bootstrap | Storybook | Radix | PrimeNG | Mantine | Chakra UI | Material UI | CSS vars | | ---------------- | ------- | ------ | --------------------------------------- | ------- | --------------------------------------- | --------- | ------------------------------------- | ------------------------------------- | -------------------------------------- | ------------------------------------- | ------------------------------------- | ------------------------------------- | | `on-solid` | 8/11 | | derived | | derived | | native | native | native | native | native | native | | `on-tint` | 4/11 | | | | derived | | | | approx. | | native | native | | `outline` | 7/11 | | | | derived | | native | native | input | native | native | native | | `outline-hover` | 4/11 | | | | | | native | | input | | native | native | | `solid` | 8/11 | | derived | | derived | | native | native | native | native | native | native | | `solid-active` | 5/11 | | | | derived | | | native | input | | input | native | | `solid-hover` | 6/11 | | | | derived | | native | native | native | | native | native | | `solid-selected` | 2/11 | | | | | | | | | | input | native | | `text` | 6/11 | | | | | | native | native | native | native | native | native | | `text-active` | 2/11 | | | | | | | | | | input | native | | `text-hover` | 2/11 | | | | | | | | | | input | native | | `text-strong` | 4/11 | | | | | | native | | input | | input | native | | `tint` | 7/11 | | | | derived | | native | native | native | native | native | native | | `tint-active` | 6/11 | | | | | | native | native | input | native | input | native | | `tint-hover` | 5/11 | | | | | | native | | native | native | input | native | | `tint-selected` | 2/11 | | | | | | | | | | input | native | ## Color: warning Each slot below is `semantic.color.warning.`. | Slot | Read by | shadcn | daisyUI | ECharts | Bootstrap | Storybook | Radix | PrimeNG | Mantine | Chakra UI | Material UI | CSS vars | | ---------------- | ------- | ------ | --------------------------------------- | ------- | --------------------------------------- | --------- | -------------------------------------- | ------------------------------------- | -------------------------------------- | ------------------------------------- | -------------------------------------- | ------------------------------------- | | `on-solid` | 8/11 | | derived | | derived | | native | native | native | native | native | native | | `on-tint` | 4/11 | | | | approx. | | | | approx. | | approx. | native | | `outline` | 7/11 | | | | derived | | native | native | input | native | native | native | | `outline-hover` | 4/11 | | | | | | native | | input | | native | native | | `solid` | 8/11 | | derived | | derived | | native | native | native | native | native | native | | `solid-active` | 5/11 | | | | derived | | | native | input | | input | native | | `solid-hover` | 6/11 | | | | derived | | native | native | native | | native | native | | `solid-selected` | 2/11 | | | | | | | | | | input | native | | `text` | 6/11 | | | | | | approx. | native | native | native | approx. | native | | `text-active` | 2/11 | | | | | | | | | | input | native | | `text-hover` | 2/11 | | | | | | | | | | input | native | | `text-strong` | 4/11 | | | | | | native | | input | | input | native | | `tint` | 7/11 | | | | derived | | native | native | native | native | native | native | | `tint-active` | 6/11 | | | | | | native | native | input | native | input | native | | `tint-hover` | 5/11 | | | | | | native | | native | native | input | native | | `tint-selected` | 2/11 | | | | | | | | | | input | native | ## Color: danger Each slot below is `semantic.color.danger.`. | Slot | Read by | shadcn | daisyUI | ECharts | Bootstrap | Storybook | Radix | PrimeNG | Mantine | Chakra UI | Material UI | CSS vars | | ---------------- | ------- | --------------------------------------- | --------------------------------------- | ------- | --------------------------------------- | --------- | ------------------------------------- | ------------------------------------- | -------------------------------------- | ------------------------------------- | ------------------------------------- | ------------------------------------- | | `on-solid` | 9/11 | derived | derived | | derived | | native | native | native | native | native | native | | `on-tint` | 4/11 | | | | derived | | | | approx. | | native | native | | `outline` | 7/11 | | | | derived | | native | native | input | native | native | native | | `outline-hover` | 4/11 | | | | | | native | | input | | native | native | | `solid` | 9/11 | derived | derived | | derived | | native | native | native | native | native | native | | `solid-active` | 5/11 | | | | derived | | | native | input | | input | native | | `solid-hover` | 6/11 | | | | derived | | native | native | native | | native | native | | `solid-selected` | 2/11 | | | | | | | | | | input | native | | `text` | 6/11 | | | | | | native | native | native | native | native | native | | `text-active` | 2/11 | | | | | | | | | | input | native | | `text-hover` | 2/11 | | | | | | | | | | input | native | | `text-strong` | 4/11 | | | | | | native | | input | | input | native | | `tint` | 7/11 | | | | derived | | native | native | native | native | native | native | | `tint-active` | 6/11 | | | | | | native | native | input | native | input | native | | `tint-hover` | 5/11 | | | | | | native | | native | native | input | native | | `tint-selected` | 2/11 | | | | | | | | | | input | native | ## Color: info Each slot below is `semantic.color.info.`. | Slot | Read by | shadcn | daisyUI | ECharts | Bootstrap | Storybook | Radix | PrimeNG | Mantine | Chakra UI | Material UI | CSS vars | | ---------------- | ------- | ------ | --------------------------------------- | ------- | --------------------------------------- | --------- | -------------------------------------- | ------------------------------------- | -------------------------------------- | ------------------------------------- | -------------------------------------- | ------------------------------------- | | `on-solid` | 8/11 | | derived | | derived | | native | native | native | native | native | native | | `on-tint` | 4/11 | | | | approx. | | | | approx. | | approx. | native | | `outline` | 7/11 | | | | derived | | native | native | input | native | native | native | | `outline-hover` | 4/11 | | | | | | native | | input | | native | native | | `solid` | 8/11 | | derived | | derived | | approx. | native | native | native | approx. | native | | `solid-active` | 5/11 | | | | derived | | | native | input | | input | native | | `solid-hover` | 6/11 | | | | derived | | approx. | native | native | | approx. | native | | `solid-selected` | 2/11 | | | | | | | | | | input | native | | `text` | 6/11 | | | | | | approx. | native | native | native | approx. | native | | `text-active` | 2/11 | | | | | | | | | | input | native | | `text-hover` | 2/11 | | | | | | | | | | input | native | | `text-strong` | 4/11 | | | | | | native | | input | | input | native | | `tint` | 7/11 | | | | derived | | native | native | native | native | native | native | | `tint-active` | 6/11 | | | | | | native | native | input | native | input | native | | `tint-hover` | 5/11 | | | | | | native | | native | native | input | native | | `tint-selected` | 2/11 | | | | | | | | | | input | native | ## Color: neutral Each slot below is `semantic.color.neutral.`. | Slot | Read by | shadcn | daisyUI | ECharts | Bootstrap | Storybook | Radix | PrimeNG | Mantine | Chakra UI | Material UI | CSS vars | | ---------------- | ------- | --------------------------------------- | --------------------------------------- | ------- | --------------------------------------- | --------------------------------------- | ------------------------------------- | ----------------------------------- | -------------------------------------- | ------------------------------------- | -------------------------------------- | ------------------------------------- | | `on-solid` | 6/11 | | derived | | | | native | | native | native | native | native | | `on-tint` | 5/11 | derived | | | input | | | | approx. | | input | native | | `outline` | 7/11 | | | | input | | native | input | input | native | native | native | | `outline-hover` | 5/11 | | | | | | native | input | input | | native | native | | `solid` | 7/11 | | derived | | | | native | input | native | native | native | native | | `solid-active` | 4/11 | | | | | | | input | input | | input | native | | `solid-hover` | 5/11 | | | | | | native | input | native | | native | native | | `solid-selected` | 2/11 | | | | | | | | | | input | native | | `text` | 5/11 | | | | | | native | | native | native | native | native | | `text-active` | 2/11 | | | | | | | | | | input | native | | `text-hover` | 2/11 | | | | | | | | | | input | native | | `text-strong` | 6/11 | | | | derived | | native | input | input | | input | native | | `tint` | 9/11 | derived | | | derived | derived | native | input | native | native | approx. | native | | `tint-active` | 6/11 | | | | | | native | input | approx. | native | input | native | | `tint-hover` | 6/11 | | | | | | native | input | native | native | approx. | native | | `tint-selected` | 2/11 | | | | | | | | | | approx. | native | ## Color: ring, scrim Each slot below is `semantic.color.`. | Slot | Read by | shadcn | daisyUI | ECharts | Bootstrap | Storybook | Radix | PrimeNG | Mantine | Chakra UI | Material UI | CSS vars | | ------- | ------- | --------------------------------------- | ------- | ------- | --------------------------------------- | --------------------------------------- | ----- | ------------------------------------- | ------- | -------------------------------------- | ------------------------------------- | ------------------------------------- | | `ring` | 6/11 | derived | | | derived | derived | | | | approx. | native | native | | `scrim` | 5/11 | | | | derived | | | native | | native | native | native | ## Color: border Each slot below is `semantic.color.border.`. | Slot | Read by | shadcn | daisyUI | ECharts | Bootstrap | Storybook | Radix | PrimeNG | Mantine | Chakra UI | Material UI | CSS vars | | -------- | ------- | --------------------------------------- | -------------------------------------- | ------------------------------------- | ------------------------------------- | --------------------------------------- | ----- | ------------------------------------- | ------------------------------------- | ------------------------------------- | ------------------------------------- | ------------------------------------- | | `base` | 10/11 | native | approx. | native | native | native | | native | native | native | native | native | | `field` | 4/11 | derived | | | | derived | | input | | | | native | | `strong` | 1/11 | | | | | | | | | | | native | | `subtle` | 2/11 | | | | | | | | | native | | native | ## Color: elevation Each slot below is `semantic.color.elevation.`. | Slot | Read by | shadcn | daisyUI | ECharts | Bootstrap | Storybook | Radix | PrimeNG | Mantine | Chakra UI | Material UI | CSS vars | | ----------- | ------- | --------------------------------------- | ------------------------------------- | --------------------------------------- | ------------------------------------- | --------------------------------------- | ------------------------------------- | ------------------------------------- | ------------------------------------- | -------------------------------------- | -------------------------------------- | ------------------------------------- | | `0.surface` | 11/11 | native | native | native | native | native | native | native | native | native | native | native | | `1.shadow` | 4/11 | | | | | | | | native | approx. | approx. | native | | `1.surface` | 10/11 | native | native | | native | native | native | native | native | native | native | native | | `2.shadow` | 5/11 | | | | | | | input | native | approx. | approx. | native | | `2.surface` | 4/11 | | | | | derived | | input | | | approx. | native | | `3.shadow` | 5/11 | | | | | | | input | native | approx. | approx. | native | | `3.surface` | 5/11 | derived | | derived | | | | input | | | approx. | native | | `4.shadow` | 4/11 | | | | | | | | native | approx. | approx. | native | | `4.surface` | 1/11 | | | | | | | | | | | native | | `5.surface` | 1/11 | | | | | | | | | | | native | ## Color: inverse Each slot below is `semantic.color.inverse.`. | Slot | Read by | shadcn | daisyUI | ECharts | Bootstrap | Storybook | Radix | PrimeNG | Mantine | Chakra UI | Material UI | CSS vars | | --------- | ------- | ------ | ------- | ------- | --------------------------------------- | --------- | ----- | ------------------------------------- | ------- | ------------------------------------- | ----------- | ------------------------------------- | | `surface` | 4/11 | | | | derived | | | native | | native | | native | | `text` | 4/11 | | | | derived | | | native | | native | | native | ## Color: link Each slot below is `semantic.color.link.`. | Slot | Read by | shadcn | daisyUI | ECharts | Bootstrap | Storybook | Radix | PrimeNG | Mantine | Chakra UI | Material UI | CSS vars | | --------- | ------- | ------ | ------- | ------- | --------- | --------- | ----- | ------- | ------------------------------------- | --------- | ----------- | ------------------------------------- | | `base` | 2/11 | | | | | | | | native | | | native | | `hover` | 1/11 | | | | | | | | | | | native | | `visited` | 1/11 | | | | | | | | | | | native | ## Color: text Each slot below is `semantic.color.text.`. | Slot | Read by | shadcn | daisyUI | ECharts | Bootstrap | Storybook | Radix | PrimeNG | Mantine | Chakra UI | Material UI | CSS vars | | ---------- | ------- | ------------------------------------- | ------------------------------------- | ------------------------------------- | ------------------------------------- | ------------------------------------- | ----- | ------------------------------------- | ------------------------------------- | -------------------------------------- | ------------------------------------- | ------------------------------------- | | `base` | 10/11 | native | native | native | native | native | | native | native | native | native | native | | `disabled` | 4/11 | | | | | | | input | native | | native | native | | `muted` | 9/11 | native | | native | native | native | | native | native | native | native | native | | `strong` | 3/11 | | | | | | | | native | approx. | | native | | `subtle` | 3/11 | | | | | | | | native | native | | native | ## Border-width Each slot below is `semantic.border-width.`. | Slot | Read by | shadcn | daisyUI | ECharts | Bootstrap | Storybook | Radix | PrimeNG | Mantine | Chakra UI | Material UI | CSS vars | | -------- | ------- | ------ | ------- | ------- | -------------------------------------- | --------- | ----- | ----------------------------------- | ------- | ----------------------------------- | ----------------------------------- | ------------------------------------- | | `medium` | 5/11 | | | | approx. | | | input | | input | input | native | | `thick` | 1/11 | | | | | | | | | | | native | | `thin` | 1/11 | | | | | | | | | | | native | ## Breakpoint Each slot below is `semantic.breakpoint.`. | Slot | Read by | shadcn | daisyUI | ECharts | Bootstrap | Storybook | Radix | PrimeNG | Mantine | Chakra UI | Material UI | CSS vars | | ----- | ------- | ------ | ------- | ------- | --------- | --------- | ----- | ------- | ------------------------------------- | ------------------------------------- | ----------------------------------- | ------------------------------------- | | `2xl` | 4/11 | | | | | | | | input | native | input | native | | `lg` | 4/11 | | | | | | | | native | native | input | native | | `md` | 4/11 | | | | | | | | native | native | input | native | | `sm` | 4/11 | | | | | | | | native | native | input | native | | `xl` | 4/11 | | | | | | | | native | native | input | native | | `xs` | 4/11 | | | | | | | | native | input | input | native | ## Duration Each slot below is `semantic.duration.`. | Slot | Read by | shadcn | daisyUI | ECharts | Bootstrap | Storybook | Radix | PrimeNG | Mantine | Chakra UI | Material UI | CSS vars | | --------- | ------- | ------ | ------- | ------- | --------------------------------------- | --------- | ----- | -------------------------------------- | ------- | -------------------------------------- | -------------------------------------- | ------------------------------------- | | `fast` | 5/11 | | | | approx. | | | input | | native | approx. | native | | `instant` | 3/11 | | | | input | | | | | approx. | | native | | `normal` | 5/11 | | | | approx. | | | approx. | | native | approx. | native | | `slow` | 4/11 | | | | input | | | | | native | approx. | native | | `slower` | 3/11 | | | | derived | | | | | native | | native | ## Easing Each slot below is `semantic.easing.`. | Slot | Read by | shadcn | daisyUI | ECharts | Bootstrap | Storybook | Radix | PrimeNG | Mantine | Chakra UI | Material UI | CSS vars | | ------------ | ------- | ------ | ------- | ------- | -------------------------------------- | --------- | ----- | ------- | ------- | ------------------------------------- | -------------------------------------- | ------------------------------------- | | `emphasized` | 3/11 | | | | | | | | | native | approx. | native | | `enter` | 4/11 | | | | approx. | | | | | native | native | native | | `exit` | 3/11 | | | | | | | | | native | native | native | | `spring` | 2/11 | | | | | | | | | native | | native | | `standard` | 4/11 | | | | approx. | | | | | native | native | native | ## Font Each slot below is `semantic.font.`. | Slot | Read by | shadcn | daisyUI | ECharts | Bootstrap | Storybook | Radix | PrimeNG | Mantine | Chakra UI | Material UI | CSS vars | | ------ | ------- | ------------------------------------- | ------- | ------------------------------------- | ------------------------------------- | ------------------------------------- | ----- | ------------------------------------- | ------------------------------------- | ------------------------------------- | ------------------------------------- | ------------------------------------- | | `sans` | 9/11 | native | | native | native | native | | native | native | native | native | native | ## Opacity Each slot below is `semantic.opacity.`. | Slot | Read by | shadcn | daisyUI | ECharts | Bootstrap | Storybook | Radix | PrimeNG | Mantine | Chakra UI | Material UI | CSS vars | | ---------- | ------- | ------ | ------- | ------- | -------------------------------------- | --------- | ----- | ------------------------------------- | ------- | ------------------------------------- | ------------------------------------- | ------------------------------------- | | `disabled` | 5/11 | | | | approx. | | | native | | native | native | native | ## Palette Each slot below is `semantic.palette.`. | Slot | Read by | shadcn | daisyUI | ECharts | Bootstrap | Storybook | Radix | PrimeNG | Mantine | Chakra UI | Material UI | CSS vars | | --------------- | ------- | --------------------------------------- | ------- | --------------------------------------- | --------- | --------- | ----- | ------- | ------- | --------- | ----------- | ------------------------------------- | | `categorical.1` | 3/11 | derived | | derived | | | | | | | | native | | `categorical.2` | 3/11 | derived | | derived | | | | | | | | native | | `categorical.3` | 3/11 | derived | | derived | | | | | | | | native | | `categorical.4` | 3/11 | derived | | derived | | | | | | | | native | | `categorical.5` | 3/11 | derived | | derived | | | | | | | | native | | `categorical.6` | 2/11 | | | approx. | | | | | | | | native | | `categorical.7` | 2/11 | | | derived | | | | | | | | native | | `categorical.8` | 2/11 | | | derived | | | | | | | | native | ## Radius Each slot below is `semantic.radius.`. | Slot | Read by | shadcn | daisyUI | ECharts | Bootstrap | Storybook | Radix | PrimeNG | Mantine | Chakra UI | Material UI | CSS vars | | ----------- | ------- | ------------------------------------- | -------------------------------------- | -------------------------------------- | --------------------------------------- | -------------------------------------- | ----- | ----------------------------------- | ------------------------------------- | -------------------------------------- | ------------------------------------- | ------------------------------------- | | `container` | 5/11 | | | | | | | input | native | native | native | native | | `control` | 5/11 | | | | | | | input | native | approx. | native | native | | `field` | 2/11 | | | | | | | input | | | | native | | `full` | 3/11 | | | | approx. | | | | | native | | native | | `lg` | 4/11 | | | | derived | | | | native | native | | native | | `md` | 8/11 | native | approx. | approx. | native | approx. | | | native | native | | native | | `none` | 2/11 | | | | | | | | | native | | native | | `sm` | 5/11 | | | | derived | approx. | | | native | native | | native | | `xl` | 4/11 | | | | derived | | | | native | native | | native | ## Ring Each slot below is `semantic.ring.`. | Slot | Read by | shadcn | daisyUI | ECharts | Bootstrap | Storybook | Radix | PrimeNG | Mantine | Chakra UI | Material UI | CSS vars | | -------- | ------- | ------ | ------- | ------- | ----------------------------------- | --------- | ----- | ----------------------------------- | ------- | ----------------------------------- | ----------------------------------- | ------------------------------------- | | `offset` | 4/11 | | | | | | | input | | input | input | native | | `width` | 5/11 | | | | input | | | input | | input | input | native | ## Size Each slot below is `semantic.size.`. | Slot | Read by | shadcn | daisyUI | ECharts | Bootstrap | Storybook | Radix | PrimeNG | Mantine | Chakra UI | Material UI | CSS vars | | ------------ | ------- | ------ | ------- | ------- | --------- | --------- | ----- | ------- | ----------------------------------- | ----------------------------------- | ----------------------------------- | ------------------------------------- | | `control.lg` | 3/11 | | | | | | | | input | input | | native | | `control.md` | 3/11 | | | | | | | | input | input | | native | | `control.sm` | 4/11 | | | | | | | | input | input | input | native | ## Space Each slot below is `semantic.space.`. | Slot | Read by | shadcn | daisyUI | ECharts | Bootstrap | Storybook | Radix | PrimeNG | Mantine | Chakra UI | Material UI | CSS vars | | ---- | ------- | ------ | ------- | ------- | ------------------------------------- | --------- | ----- | ----------------------------------- | -------------------------------------- | ------------------------------------- | ------------------------------------- | ------------------------------------- | | `0` | 4/11 | | | | native | | | input | | native | | native | | `1` | 5/11 | | | | native | | | input | | native | input | native | | `10` | 2/11 | | | | | | | | | native | | native | | `12` | 3/11 | | | | native | | | | | native | | native | | `16` | 2/11 | | | | | | | | | native | | native | | `2` | 6/11 | | | | native | | | input | approx. | native | native | native | | `20` | 2/11 | | | | | | | | | native | | native | | `24` | 2/11 | | | | | | | | | native | | native | | `3` | 6/11 | | | | native | | | input | native | native | input | native | | `4` | 5/11 | | | | native | | | | native | native | input | native | | `5` | 5/11 | | | | native | | | input | native | native | | native | | `6` | 4/11 | | | | native | | | input | | native | | native | | `8` | 4/11 | | | | | | | | native | native | input | native | ## Type Each slot below is `semantic.type.`. | Slot | Read by | shadcn | daisyUI | ECharts | Bootstrap | Storybook | Radix | PrimeNG | Mantine | Chakra UI | Material UI | CSS vars | | ----------------- | ------- | ------ | ------- | ------- | --------------------------------------- | --------- | ----- | ------------------------------------- | ------------------------------------- | -------------------------------------- | -------------------------------------- | ------------------------------------- | | `leading.loose` | 3/11 | | | | | | | | native | approx. | | native | | `leading.normal` | 5/11 | | | | derived | | | native | native | approx. | | native | | `leading.tight` | 4/11 | | | | derived | | | | native | approx. | | native | | `role.body.lg` | 2/11 | | | | | | | | | input | | native | | `role.body.md` | 3/11 | | | | | | | | | input | native | native | | `role.body.sm` | 3/11 | | | | | | | | | input | approx. | native | | `role.code.lg` | 2/11 | | | | | | | | | input | | native | | `role.code.md` | 2/11 | | | | | | | | | input | | native | | `role.code.sm` | 2/11 | | | | | | | | | input | | native | | `role.display.lg` | 4/11 | | | | | | | | input | input | approx. | native | | `role.display.md` | 3/11 | | | | | | | | | input | approx. | native | | `role.display.sm` | 3/11 | | | | | | | | | input | approx. | native | | `role.heading.lg` | 4/11 | | | | | | | | native | input | approx. | native | | `role.heading.md` | 4/11 | | | | | | | | native | input | approx. | native | | `role.heading.sm` | 4/11 | | | | | | | | native | input | approx. | native | | `role.label.lg` | 3/11 | | | | | | | | | input | approx. | native | | `role.label.md` | 4/11 | | | | derived | | | | | input | approx. | native | | `role.label.sm` | 3/11 | | | | | | | | | input | approx. | native | | `role.title.lg` | 3/11 | | | | | | | | native | input | | native | | `role.title.md` | 4/11 | | | | derived | | | | native | input | | native | | `role.title.sm` | 4/11 | | | | | | | | native | input | approx. | native | | `size.2xl` | 3/11 | | | | derived | | | | | native | | native | | `size.3xl` | 3/11 | | | | derived | | | | | native | | native | | `size.4xl` | 3/11 | | | | derived | | | | | native | | native | | `size.lg` | 4/11 | | | | derived | | | | native | native | | native | | `size.md` | 5/11 | | | | derived | | | native | native | native | | native | | `size.sm` | 4/11 | | | | approx. | | | | native | native | | native | | `size.xl` | 4/11 | | | | derived | | | | native | native | | native | | `size.xs` | 4/11 | | | | approx. | | | | native | native | | native | | `tracking.normal` | 2/11 | | | | | | | | | native | | native | | `tracking.tight` | 2/11 | | | | | | | | | native | | native | | `tracking.wide` | 2/11 | | | | | | | | | native | | native | | `weight.bold` | 4/11 | | | | | | | | native | native | native | native | | `weight.medium` | 4/11 | | | | | | | | native | native | native | native | | `weight.regular` | 5/11 | | | | | | | native | native | native | native | native | | `weight.semibold` | 3/11 | | | | | | | input | | native | | native | ## Z Each slot below is `semantic.z.`. | Slot | Read by | shadcn | daisyUI | ECharts | Bootstrap | Storybook | Radix | PrimeNG | Mantine | Chakra UI | Material UI | CSS vars | | ---------- | ------- | ------ | ------- | ------- | --------- | --------- | ----- | ------- | ------- | ------------------------------------- | ------------------------------------- | ------------------------------------- | | `banner` | 2/11 | | | | | | | | | native | | native | | `base` | 2/11 | | | | | | | | | native | | native | | `dropdown` | 2/11 | | | | | | | | | native | | native | | `hide` | 2/11 | | | | | | | | | native | | native | | `modal` | 3/11 | | | | | | | | | native | native | native | | `overlay` | 3/11 | | | | | | | | | native | native | native | | `popover` | 2/11 | | | | | | | | | native | | native | | `sticky` | 3/11 | | | | | | | | | native | native | native | | `toast` | 3/11 | | | | | | | | | native | native | native | | `tooltip` | 3/11 | | | | | | | | | native | native | native | ## Component: button Each slot below is `component.button.`. | Slot | Read by | shadcn | daisyUI | ECharts | Bootstrap | Storybook | Radix | PrimeNG | Mantine | Chakra UI | Material UI | CSS vars | | ----------- | ------- | ------ | ------- | ------- | ------------------------------------- | --------- | ----- | ------------------------------------- | ------------------------------------- | -------------------------------------- | ------------------------------------- | -------- | | `padding-x` | 5/11 | | | | native | | | native | native | approx. | input | | | `padding-y` | 3/11 | | | | native | | | native | | | input | | | `radius` | 5/11 | | | | native | | | native | native | native | native | | ## Component: control Each slot below is `component.control.`. | Slot | Read by | shadcn | daisyUI | ECharts | Bootstrap | Storybook | Radix | PrimeNG | Mantine | Chakra UI | Material UI | CSS vars | | ----------- | ------- | ------ | ------- | ------- | --------------------------------------- | --------- | ----- | ------------------------------------- | ------------------------------------- | ----------------------------------- | ----------------------------------- | -------- | | `padding-x` | 5/11 | | | | derived | | | native | input | input | input | | | `padding-y` | 4/11 | | | | derived | | | native | | input | input | | | `radius` | 5/11 | | | | derived | | | native | native | input | input | |