@maggioli-design-system/magma-react 2.5.1 → 2.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +19 -4
- package/CHANGELOG.md +69 -0
- package/agents/assets.md +24 -10
- package/agents/color.md +22 -4
- package/agents/components.md +164 -92
- package/agents/conventions.md +19 -8
- package/agents/install.md +7 -0
- package/agents/lint.md +298 -0
- package/agents/mcp.md +107 -0
- package/agents/reporting.md +53 -2
- package/agents/theming.md +8 -0
- package/dist/components.js +1 -0
- package/dist/components.server.js +1 -0
- package/dist/mds-book.js +12 -0
- package/dist/mds-book.server.js +23 -0
- package/dist/types/components.d.ts +1 -0
- package/dist/types/components.server.d.ts +1 -0
- package/dist/types/mds-book.d.ts +9 -0
- package/dist/types/mds-book.server.d.ts +11 -0
- package/package.json +2 -2
package/agents/components.md
CHANGED
|
@@ -3,129 +3,201 @@
|
|
|
3
3
|
Source of truth: docs/agents/ in the magma monorepo.
|
|
4
4
|
Regenerate with: npm run sync.agent-docs (from the stencil package).
|
|
5
5
|
-->
|
|
6
|
-
# Magma components catalogue (
|
|
6
|
+
# Magma components catalogue (117 components)
|
|
7
7
|
|
|
8
8
|
> Generated from each component's usage description. Each tag links the component's
|
|
9
9
|
> own `AGENTS.md` (its API, with `pattern.md` and `antipattern.md` beside it) in
|
|
10
10
|
> `@maggioli-design-system/magma/dist/collection/components/<tag>/`. The rules shared by
|
|
11
11
|
> every component: [`conventions.md`](conventions.md), [`variants.md`](variants.md),
|
|
12
12
|
> [`anti-patterns.md`](anti-patterns.md).
|
|
13
|
+
>
|
|
14
|
+
> Grouped by category (the `@category` docs tag of each component in
|
|
15
|
+
> `dist/documentation.json`). A part of a compound component (`@parent`) follows its
|
|
16
|
+
> component and names the components it sits in: it always composes inside them.
|
|
17
|
+
|
|
18
|
+
## Actions
|
|
19
|
+
|
|
20
|
+
Controls that make something happen: buttons, links, action bars and menus.
|
|
13
21
|
|
|
14
22
|
| Component | What it is |
|
|
15
23
|
| --------- | ---------- |
|
|
16
|
-
| [`mds-accordion`](../../magma/dist/collection/components/mds-accordion/AGENTS.md) | The `<mds-accordion>` web component is the compound container of the Magma Design System that groups and orchestrates a set of collapsible `<mds-accordion-item>` panels |
|
|
17
|
-
| [`mds-accordion-item`](../../magma/dist/collection/components/mds-accordion-item/AGENTS.md) | The `<mds-accordion-item>` web component is a single collapsible panel of the Magma Design System, designed to be slotted inside its parent `<mds-accordion>` |
|
|
18
|
-
| [`mds-accordion-timer`](../../magma/dist/collection/components/mds-accordion-timer/AGENTS.md) | The `<mds-accordion-timer>` web component is the orchestrating parent of an auto-advancing accordion in the Magma Design System |
|
|
19
|
-
| [`mds-accordion-timer-item`](../../magma/dist/collection/components/mds-accordion-timer-item/AGENTS.md) | The `<mds-accordion-timer-item>` web component is the single collapsible panel of a timed, auto-advancing accordion, designed to live exclusively inside its parent `<mds-accordion-timer>` |
|
|
20
|
-
| [`mds-author`](../../magma/dist/collection/components/mds-author/AGENTS.md) | The `<mds-author>` web component is the layout primitive of the Magma Design System for presenting a person's identity: it pairs an avatar with author information (name, role, or any related details) |
|
|
21
|
-
| [`mds-avatar`](../../magma/dist/collection/components/mds-avatar/AGENTS.md) | The `<mds-avatar>` web component renders a compact, circular representation of a user or entity in the Magma Design System |
|
|
22
|
-
| [`mds-avatar-stack`](../../magma/dist/collection/components/mds-avatar-stack/AGENTS.md) | The `<mds-avatar-stack>` web component groups a set of overlapping `<mds-avatar-stack-item>` children into a single horizontal cluster, the Magma Design System pattern for showing the people associated with an entity (assignees, participants, collaborators) in a compact, space-saving row. |
|
|
23
|
-
| [`mds-avatar-stack-item`](../../magma/dist/collection/components/mds-avatar-stack-item/AGENTS.md) | The `<mds-avatar-stack-item>` web component is a compound child that represents a single avatar inside an `<mds-avatar-stack>`, wrapping an internal `<mds-avatar>` so individual avatars can be overlapped, sized, and counted as a group rather than rendered standalone. |
|
|
24
|
-
| [`mds-badge`](../../magma/dist/collection/components/mds-badge/AGENTS.md) | The `<mds-badge>` web component is the Magma Design System's compact status and label indicator, used to attach a short categorical signal (count, state, tag) to other content |
|
|
25
|
-
| [`mds-banner`](../../magma/dist/collection/components/mds-banner/AGENTS.md) | The `<mds-banner>` web component is the Magma Design System surface for contextual, in-page messages - informational notices, status callouts, and alerts - pairing an optional icon, headline, body text, and inline actions inside a single themed box. |
|
|
26
|
-
| [`mds-benchmark-bar`](../../magma/dist/collection/components/mds-benchmark-bar/AGENTS.md) | The `<mds-benchmark-bar>` web component is a read-only data-visualization element of the Magma Design System that pairs a labelled caption with a horizontal progress bar to express a single benchmark value on a 0-100 scale |
|
|
27
|
-
| [`mds-bibliography`](../../magma/dist/collection/components/mds-bibliography/AGENTS.md) | The `<mds-bibliography>` web component renders a single citation entry formatted according to a recognized academic style |
|
|
28
|
-
| [`mds-breadcrumb`](../../magma/dist/collection/components/mds-breadcrumb/AGENTS.md) | The `<mds-breadcrumb>` web component is the navigation-trail container of the Magma Design System |
|
|
29
|
-
| [`mds-breadcrumb-item`](../../magma/dist/collection/components/mds-breadcrumb-item/AGENTS.md) | The `<mds-breadcrumb-item>` web component represents a single navigable depth in a breadcrumb trail |
|
|
30
24
|
| [`mds-button`](../../magma/dist/collection/components/mds-button/AGENTS.md) | The `<mds-button>` web component is the primary interactive action control of the Magma Design System |
|
|
31
25
|
| [`mds-button-dropdown`](../../magma/dist/collection/components/mds-button-dropdown/AGENTS.md) | The `<mds-button-dropdown>` web component is a split-button control of the Magma Design System: it pairs a primary `<mds-button>` action with a secondary chevron button that opens an attached `<mds-dropdown>`, giving users a default action plus a menu of related choices in a single, visually unified control. |
|
|
32
26
|
| [`mds-button-group`](../../magma/dist/collection/components/mds-button-group/AGENTS.md) | The `<mds-button-group>` web component is a layout container of the Magma Design System that clusters related `<mds-button>` controls into a single, evenly-spaced horizontal group such as toolbars, action bars, or segmented sets of actions |
|
|
27
|
+
| [`mds-link`](../../magma/dist/collection/components/mds-link/AGENTS.md) | The `<mds-link>` web component is the inline link of Magma: a word or a phrase inside running text, usually inside an `<mds-text>`, that opens a URL or runs an inline action |
|
|
28
|
+
| [`mds-radial-menu`](../../magma/dist/collection/components/mds-radial-menu/AGENTS.md) | The `<mds-radial-menu>` web component is a floating action menu of the Magma Design System that arranges its child items along a circular arc around a central trigger button, expanding them outward when opened |
|
|
29
|
+
| [`mds-radial-menu-item`](../../magma/dist/collection/components/mds-radial-menu-item/AGENTS.md), part of `mds-radial-menu` | The `<mds-radial-menu-item>` web component is a single actionable spoke of the `<mds-radial-menu>` compound |
|
|
30
|
+
| [`mds-status-bar`](../../magma/dist/collection/components/mds-status-bar/AGENTS.md) | The `<mds-status-bar>` web component is a persistent action bar of the Magma Design System that docks a small set of actions (typically `mds-button` elements) to an edge of the viewport, accompanied by an optional descriptive label |
|
|
31
|
+
|
|
32
|
+
## Forms
|
|
33
|
+
|
|
34
|
+
Fields that take a value, and the calendar and the filters that help pick one.
|
|
35
|
+
|
|
36
|
+
| Component | What it is |
|
|
37
|
+
| --------- | ---------- |
|
|
33
38
|
| [`mds-calendar`](../../magma/dist/collection/components/mds-calendar/AGENTS.md) | The `<mds-calendar>` web component is the date-selection surface of the Magma Design System: a localized month grid that lets users pick either a single day or a date range |
|
|
34
|
-
| [`mds-calendar-cell`](../../magma/dist/collection/components/mds-calendar-cell/AGENTS.md) | The `<mds-calendar-cell>` web component represents a single selectable day inside the `<mds-calendar>` grid |
|
|
35
|
-
| [`mds-card`](../../magma/dist/collection/components/mds-card/AGENTS.md) | The `<mds-card>` web component is the surface container of the Magma Design System: a styled, self-contained panel that groups related media, heading, body and action content into a single bounded region |
|
|
36
|
-
| [`mds-card-content`](../../magma/dist/collection/components/mds-card-content/AGENTS.md) | The `<mds-card-content>` web component is the body region of a `<mds-card>`, grouping the primary textual or component content of a card |
|
|
37
|
-
| [`mds-card-footer`](../../magma/dist/collection/components/mds-card-footer/AGENTS.md) | The `<mds-card-footer>` web component is the footer region of a `<mds-card>`, grouping the trailing content of a card (typically actions such as buttons or supplementary metadata) into the card's bottom region. |
|
|
38
|
-
| [`mds-card-header`](../../magma/dist/collection/components/mds-card-header/AGENTS.md) | The `<mds-card-header>` web component is the header region of a `<mds-card>`, grouping the card's title, supporting text, and optional inline actions |
|
|
39
|
-
| [`mds-card-media`](../../magma/dist/collection/components/mds-card-media/AGENTS.md) | The `<mds-card-media>` web component is the media region of a `<mds-card>`: it wraps an image, video or other visual asset and provides an optional overlay layer for text or controls rendered on top of that asset |
|
|
40
|
-
| [`mds-chip`](../../magma/dist/collection/components/mds-chip/AGENTS.md) | The `<mds-chip>` web component is the Magma Design System's compact element for representing a discrete piece of information, a filter, a selection, or a removable token |
|
|
41
|
-
| [`mds-details`](../../magma/dist/collection/components/mds-details/AGENTS.md) | The `<mds-details>` web component is the disclosure widget of the Magma Design System: a collapsible block with a clickable header that shows or hides its content on demand |
|
|
42
|
-
| [`mds-dropdown`](../../magma/dist/collection/components/mds-dropdown/AGENTS.md) | The `<mds-dropdown>` web component is a floating overlay surface of the Magma Design System that anchors arbitrary slotted content next to an external trigger element |
|
|
43
|
-
| [`mds-emoji`](../../magma/dist/collection/components/mds-emoji/AGENTS.md) | The `<mds-emoji>` web component renders one of the Magma Design System's animated mascot illustrations (`mia` or `simi`) as an interactive SVG |
|
|
44
|
-
| [`mds-entity`](../../magma/dist/collection/components/mds-entity/AGENTS.md) | The `<mds-entity>` web component represents a person, organization, or resource as a compact identity block in the Magma Design System, pairing an avatar with a name, optional secondary details, and contextual actions |
|
|
45
|
-
| [`mds-file`](../../magma/dist/collection/components/mds-file/AGENTS.md) | The `<mds-file>` web component is the Magma Design System control for representing a downloadable file as a rich, clickable card |
|
|
46
|
-
| [`mds-file-preview`](../../magma/dist/collection/components/mds-file-preview/AGENTS.md) | The `<mds-file-preview>` web component is the Magma Design System card that previews an uploaded or referenced file, surfacing its name, size, type, and a format-aware icon or thumbnail |
|
|
39
|
+
| [`mds-calendar-cell`](../../magma/dist/collection/components/mds-calendar-cell/AGENTS.md), part of `mds-calendar` | The `<mds-calendar-cell>` web component represents a single selectable day inside the `<mds-calendar>` grid |
|
|
47
40
|
| [`mds-filter`](../../magma/dist/collection/components/mds-filter/AGENTS.md) | The `<mds-filter>` web component is a compound container that groups a set of `<mds-filter-item>` chips into a single, scrollable filter bar, coordinating their selection state and exposing the active values as one combined change event |
|
|
48
|
-
| [`mds-filter-item`](../../magma/dist/collection/components/mds-filter-item/AGENTS.md) | The `<mds-filter-item>` web component is a single selectable option inside the `<mds-filter>` container of the Magma Design System |
|
|
49
|
-
| [`mds-header`](../../magma/dist/collection/components/mds-header/AGENTS.md) | The `<mds-header>` web component is the top-level page header container of the Magma Design System |
|
|
50
|
-
| [`mds-header-bar`](../../magma/dist/collection/components/mds-header-bar/AGENTS.md) | The `<mds-header-bar>` web component is the top bar of a Magma application layout: it holds the product branding on the left and the primary navigation actions on the right, collapsing those actions into a hamburger menu on smaller viewports |
|
|
51
|
-
| [`mds-help`](../../magma/dist/collection/components/mds-help/AGENTS.md) | The `<mds-help>` web component is a contextual help affordance of the Magma Design System: a small help icon that reveals an explanatory tooltip on interaction |
|
|
52
|
-
| [`mds-horizontal-scroll`](../../magma/dist/collection/components/mds-horizontal-scroll/AGENTS.md) | The `<mds-horizontal-scroll>` web component is a horizontally scrolling container of the Magma Design System |
|
|
53
|
-
| [`mds-hr`](../../magma/dist/collection/components/mds-hr/AGENTS.md) | The `<mds-hr>` web component is the horizontal rule of the Magma Design System |
|
|
54
|
-
| [`mds-icon`](../../magma/dist/collection/components/mds-icon/AGENTS.md) | The `<mds-icon>` web component is the single glyph primitive of the Magma Design System: it inlines an SVG into the DOM so the artwork inherits color and sizing from CSS, and it is the building block that nearly every other component (button, chip, input, banner, list-item, etc.) composes to render its iconography |
|
|
55
|
-
| [`mds-img`](../../magma/dist/collection/components/mds-img/AGENTS.md) | The `<mds-img>` web component is the responsive image primitive of the Magma Design System |
|
|
41
|
+
| [`mds-filter-item`](../../magma/dist/collection/components/mds-filter-item/AGENTS.md), part of `mds-filter` | The `<mds-filter-item>` web component is a single selectable option inside the `<mds-filter>` container of the Magma Design System |
|
|
56
42
|
| [`mds-input`](../../magma/dist/collection/components/mds-input/AGENTS.md) | The `<mds-input>` web component is the primary single- and multi-line text entry control of the Magma Design System |
|
|
43
|
+
| [`mds-input-tip`](../../magma/dist/collection/components/mds-input-tip/AGENTS.md), part of `mds-input` or `mds-input-date` or `mds-input-select` | The `<mds-input-tip>` web component is the floating helper container of the Magma Design System input family: it overlays an input field and carries supplementary content (slotted `mds-input-tip-item` chips: status labels, hints, counters) that slides into place when the field becomes active |
|
|
44
|
+
| [`mds-input-tip-item`](../../magma/dist/collection/components/mds-input-tip-item/AGENTS.md), part of `mds-input-tip` | The `<mds-input-tip-item>` web component is a single contextual hint row rendered inside the `<mds-input-tip>` container |
|
|
57
45
|
| [`mds-input-date`](../../magma/dist/collection/components/mds-input-date/AGENTS.md) | The `<mds-input-date>` web component is the Magma Design System control for capturing a single calendar date |
|
|
58
46
|
| [`mds-input-date-range`](../../magma/dist/collection/components/mds-input-date-range/AGENTS.md) | The `<mds-input-date-range>` web component is the Magma Design System control for capturing a start/end date pair, composing two slotted `<mds-input-date>` fields with a shared pop-up `mds-calendar` (in range mode) and optional quick-pick presets |
|
|
59
|
-
| [`mds-input-date-range-preselection`](../../magma/dist/collection/components/mds-input-date-range-preselection/AGENTS.md) | The `<mds-input-date-range-preselection>` web component is a compound child of `<mds-input-date-range>` |
|
|
47
|
+
| [`mds-input-date-range-preselection`](../../magma/dist/collection/components/mds-input-date-range-preselection/AGENTS.md), part of `mds-input-date-range` | The `<mds-input-date-range-preselection>` web component is a compound child of `<mds-input-date-range>` |
|
|
60
48
|
| [`mds-input-field`](../../magma/dist/collection/components/mds-input-field/AGENTS.md) | The `<mds-input-field>` web component is the form-field wrapper of the Magma Design System |
|
|
61
49
|
| [`mds-input-otp`](../../magma/dist/collection/components/mds-input-otp/AGENTS.md) | The `<mds-input-otp>` web component is the Magma Design System control for entering one-time passcodes, rendering a row of single-digit fields that together compose a single form value |
|
|
62
50
|
| [`mds-input-range`](../../magma/dist/collection/components/mds-input-range/AGENTS.md) | The `<mds-input-range>` web component is the Magma Design System slider control for picking a single numeric value from a continuous interval |
|
|
63
51
|
| [`mds-input-select`](../../magma/dist/collection/components/mds-input-select/AGENTS.md) | The `<mds-input-select>` web component is the Magma Design System single- and multi-choice dropdown control |
|
|
64
52
|
| [`mds-input-switch`](../../magma/dist/collection/components/mds-input-switch/AGENTS.md) | The `<mds-input-switch>` web component is the binary/selectable input control of the Magma Design System |
|
|
65
|
-
| [`mds-input-tip`](../../magma/dist/collection/components/mds-input-tip/AGENTS.md) | The `<mds-input-tip>` web component is the floating helper container of the Magma Design System input family: it overlays an input field and carries supplementary content (slotted `mds-input-tip-item` chips: status labels, hints, counters) that slides into place when the field becomes active |
|
|
66
|
-
| [`mds-input-tip-item`](../../magma/dist/collection/components/mds-input-tip-item/AGENTS.md) | The `<mds-input-tip-item>` web component is a single contextual hint row rendered inside the `<mds-input-tip>` container |
|
|
67
53
|
| [`mds-input-upload`](../../magma/dist/collection/components/mds-input-upload/AGENTS.md) | The `<mds-input-upload>` web component is the Magma Design System file-upload control |
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
|
74
|
-
|
|
|
75
|
-
| [`mds-
|
|
76
|
-
| [`mds-
|
|
77
|
-
| [`mds-modal`](../../magma/dist/collection/components/mds-modal/AGENTS.md) | The `<mds-modal>` web component is the Magma Design System overlay container for dialogs, presenting content in a windowed surface layered above the page with an optional backdrop |
|
|
78
|
-
| [`mds-note`](../../magma/dist/collection/components/mds-note/AGENTS.md) | The `<mds-note>` web component is the annotation surface of the Magma Design System: a short, colored sticky-note block used to attach a remark, reminder, or callout to surrounding content |
|
|
79
|
-
| [`mds-notification`](../../magma/dist/collection/components/mds-notification/AGENTS.md) | The `<mds-notification>` web component is a numeric badge/dot indicator of the Magma Design System that attaches to another element (an icon, a button, an avatar) to signal a count of pending items |
|
|
54
|
+
|
|
55
|
+
## Navigation
|
|
56
|
+
|
|
57
|
+
Where the user is and where they can go: breadcrumbs, tabs, steps, pages, trees.
|
|
58
|
+
|
|
59
|
+
| Component | What it is |
|
|
60
|
+
| --------- | ---------- |
|
|
61
|
+
| [`mds-breadcrumb`](../../magma/dist/collection/components/mds-breadcrumb/AGENTS.md) | The `<mds-breadcrumb>` web component is the navigation-trail container of the Magma Design System |
|
|
62
|
+
| [`mds-breadcrumb-item`](../../magma/dist/collection/components/mds-breadcrumb-item/AGENTS.md), part of `mds-breadcrumb` | The `<mds-breadcrumb-item>` web component represents a single navigable depth in a breadcrumb trail |
|
|
80
63
|
| [`mds-paginator`](../../magma/dist/collection/components/mds-paginator/AGENTS.md) | The `<mds-paginator>` web component is the page-navigation control of the Magma Design System |
|
|
81
|
-
| [`mds-paginator-item`](../../magma/dist/collection/components/mds-paginator-item/AGENTS.md) | The `<mds-paginator-item>` web component is a compound child of `<mds-paginator>` that renders a single clickable cell of the pagination control: either a numbered page or a navigation arrow |
|
|
82
|
-
| [`mds-
|
|
83
|
-
| [`mds-
|
|
84
|
-
| [`mds-
|
|
85
|
-
| [`mds-
|
|
86
|
-
| [`mds-
|
|
87
|
-
| [`mds-
|
|
88
|
-
| [`mds-
|
|
89
|
-
| [`mds-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
|
96
|
-
|
|
|
97
|
-
| [`mds-
|
|
98
|
-
| [`mds-
|
|
64
|
+
| [`mds-paginator-item`](../../magma/dist/collection/components/mds-paginator-item/AGENTS.md), part of `mds-paginator` | The `<mds-paginator-item>` web component is a compound child of `<mds-paginator>` that renders a single clickable cell of the pagination control: either a numbered page or a navigation arrow |
|
|
65
|
+
| [`mds-stepper-bar`](../../magma/dist/collection/components/mds-stepper-bar/AGENTS.md) | The `<mds-stepper-bar>` web component is the Magma Design System container that orchestrates a multi-step progress flow, coordinating a set of slotted `<mds-stepper-bar-item>` children and revealing the matching content panel for the active step |
|
|
66
|
+
| [`mds-stepper-bar-item`](../../magma/dist/collection/components/mds-stepper-bar-item/AGENTS.md), part of `mds-stepper-bar` | The `<mds-stepper-bar-item>` web component represents a single step inside a `<mds-stepper-bar>` progress indicator, rendering the step's icon, optional ordinal label, descriptive text and status badge |
|
|
67
|
+
| [`mds-tab`](../../magma/dist/collection/components/mds-tab/AGENTS.md) | The `<mds-tab>` web component is the compound container that orchestrates a tabbed navigation in the Magma Design System |
|
|
68
|
+
| [`mds-tab-item`](../../magma/dist/collection/components/mds-tab-item/AGENTS.md), part of `mds-tab` | The `<mds-tab-item>` web component is the individual, clickable tab control of the Magma Design System, designed to be slotted into the default slot of its parent `<mds-tab>` |
|
|
69
|
+
| [`mds-tab-bar`](../../magma/dist/collection/components/mds-tab-bar/AGENTS.md) | The `<mds-tab-bar>` web component is the compound container of the Magma Design System that groups a set of `<mds-tab-bar-item>` children into a single selectable navigation bar, owning the mutual-exclusion logic that keeps exactly one item active at a time |
|
|
70
|
+
| [`mds-tab-bar-item`](../../magma/dist/collection/components/mds-tab-bar-item/AGENTS.md), part of `mds-tab-bar` | The `<mds-tab-bar-item>` web component is a single selectable tab within the `<mds-tab-bar>` container |
|
|
71
|
+
| [`mds-tree`](../../magma/dist/collection/components/mds-tree/AGENTS.md) | The `<mds-tree>` web component is the root container of the Magma Design System tree view, organizing a hierarchy of slotted `<mds-tree-item>` nodes into an expandable/collapsible structure |
|
|
72
|
+
| [`mds-tree-item`](../../magma/dist/collection/components/mds-tree-item/AGENTS.md), part of `mds-tree` or `mds-tree-item` | The `<mds-tree-item>` web component is the node primitive of the Magma Design System tree view: it represents a single labeled, expandable/collapsible entry inside an `<mds-tree>` and is also the recursive container for its own descendants |
|
|
73
|
+
|
|
74
|
+
## Feedback
|
|
75
|
+
|
|
76
|
+
Messages, progress and empty states that tell the user what is happening.
|
|
77
|
+
|
|
78
|
+
| Component | What it is |
|
|
79
|
+
| --------- | ---------- |
|
|
80
|
+
| [`mds-banner`](../../magma/dist/collection/components/mds-banner/AGENTS.md) | The `<mds-banner>` web component is the Magma Design System surface for contextual, in-page messages - informational notices, status callouts, and alerts - pairing an optional icon, headline, body text, and inline actions inside a single themed box. |
|
|
81
|
+
| [`mds-notification`](../../magma/dist/collection/components/mds-notification/AGENTS.md) | The `<mds-notification>` web component is a numeric badge/dot indicator of the Magma Design System that attaches to another element (an icon, a button, an avatar) to signal a count of pending items |
|
|
99
82
|
| [`mds-progress`](../../magma/dist/collection/components/mds-progress/AGENTS.md) | The `<mds-progress>` web component is the progress indicator of the Magma Design System, rendering the completion state of a determinate task as a bar or ring |
|
|
100
83
|
| [`mds-push-notification`](../../magma/dist/collection/components/mds-push-notification/AGENTS.md) | The `<mds-push-notification>` web component is the Magma Design System container that hosts and orchestrates a stack of transient notification items, managing their show/hide lifecycle, entry/exit animations, and overall visibility |
|
|
101
|
-
| [`mds-push-notification-item`](../../magma/dist/collection/components/mds-push-notification-item/AGENTS.md) | The `<mds-push-notification-item>` web component is a single notification card rendered inside its parent container `<mds-push-notification>` |
|
|
102
|
-
| [`mds-quote`](../../magma/dist/collection/components/mds-quote/AGENTS.md) | The `<mds-quote>` web component is the Magma Design System primitive for rendering a stylized blockquote: it wraps quoted text in decorative typographic quotation marks (` .. |
|
|
103
|
-
| [`mds-radial-menu`](../../magma/dist/collection/components/mds-radial-menu/AGENTS.md) | The `<mds-radial-menu>` web component is a floating action menu of the Magma Design System that arranges its child items along a circular arc around a central trigger button, expanding them outward when opened |
|
|
104
|
-
| [`mds-radial-menu-item`](../../magma/dist/collection/components/mds-radial-menu-item/AGENTS.md) | The `<mds-radial-menu-item>` web component is a single actionable spoke of the `<mds-radial-menu>` compound |
|
|
84
|
+
| [`mds-push-notification-item`](../../magma/dist/collection/components/mds-push-notification-item/AGENTS.md), part of `mds-push-notification` | The `<mds-push-notification-item>` web component is a single notification card rendered inside its parent container `<mds-push-notification>` |
|
|
105
85
|
| [`mds-radial-progress`](../../magma/dist/collection/components/mds-radial-progress/AGENTS.md) | The `<mds-radial-progress>` web component renders a circular progress indicator that visualizes a completion ratio as a ring with a numeric percentage at its center |
|
|
106
|
-
| [`mds-separator`](../../magma/dist/collection/components/mds-separator/AGENTS.md) | The `<mds-separator>` web component is the visual divider of the Magma Design System: a thin, full-radius horizontal rule used to partition content into distinct groups |
|
|
107
86
|
| [`mds-spinner`](../../magma/dist/collection/components/mds-spinner/AGENTS.md) | The `<mds-spinner>` web component is the Magma Design System's loading/await indicator: a self-contained, animated SVG spinner used standalone or embedded inside host components (`mds-button`, `mds-input`, `mds-entity`) to signal an in-progress, indeterminate operation |
|
|
108
|
-
| [`mds-status-bar`](../../magma/dist/collection/components/mds-status-bar/AGENTS.md) | The `<mds-status-bar>` web component is a persistent action bar of the Magma Design System that docks a small set of actions (typically `mds-button` elements) to an edge of the viewport, accompanied by an optional descriptive label |
|
|
109
|
-
| [`mds-stepper-bar`](../../magma/dist/collection/components/mds-stepper-bar/AGENTS.md) | The `<mds-stepper-bar>` web component is the Magma Design System container that orchestrates a multi-step progress flow, coordinating a set of slotted `<mds-stepper-bar-item>` children and revealing the matching content panel for the active step |
|
|
110
|
-
| [`mds-stepper-bar-item`](../../magma/dist/collection/components/mds-stepper-bar-item/AGENTS.md) | The `<mds-stepper-bar-item>` web component represents a single step inside a `<mds-stepper-bar>` progress indicator, rendering the step's icon, optional ordinal label, descriptive text and status badge |
|
|
111
|
-
| [`mds-tab`](../../magma/dist/collection/components/mds-tab/AGENTS.md) | The `<mds-tab>` web component is the compound container that orchestrates a tabbed navigation in the Magma Design System |
|
|
112
|
-
| [`mds-tab-bar`](../../magma/dist/collection/components/mds-tab-bar/AGENTS.md) | The `<mds-tab-bar>` web component is the compound container of the Magma Design System that groups a set of `<mds-tab-bar-item>` children into a single selectable navigation bar, owning the mutual-exclusion logic that keeps exactly one item active at a time |
|
|
113
|
-
| [`mds-tab-bar-item`](../../magma/dist/collection/components/mds-tab-bar-item/AGENTS.md) | The `<mds-tab-bar-item>` web component is a single selectable tab within the `<mds-tab-bar>` container |
|
|
114
|
-
| [`mds-tab-item`](../../magma/dist/collection/components/mds-tab-item/AGENTS.md) | The `<mds-tab-item>` web component is the individual, clickable tab control of the Magma Design System, designed to be slotted into the default slot of its parent `<mds-tab>` |
|
|
115
|
-
| [`mds-table`](../../magma/dist/collection/components/mds-table/AGENTS.md) | The `<mds-table>` web component is the root container of the Magma Design System tabular data system |
|
|
116
|
-
| [`mds-table-body`](../../magma/dist/collection/components/mds-table-body/AGENTS.md) | The `<mds-table-body>` web component is the row-group container of the Magma Design System tabular data system, used inside `<mds-table>` |
|
|
117
|
-
| [`mds-table-cell`](../../magma/dist/collection/components/mds-table-cell/AGENTS.md) | The `<mds-table-cell>` web component is the data-cell building block of the Magma table, designed to be slotted inside `<mds-table-row>` |
|
|
118
|
-
| [`mds-table-footer`](../../magma/dist/collection/components/mds-table-footer/AGENTS.md) | The `<mds-table-footer>` web component is a structural child of `<mds-table>` that renders the footer row of a table - typically used for totals or summaries |
|
|
119
|
-
| [`mds-table-header`](../../magma/dist/collection/components/mds-table-header/AGENTS.md) | The `<mds-table-header>` web component is the header region of a Magma table, used exclusively as a direct slot child of its parent `<mds-table>` |
|
|
120
|
-
| [`mds-table-header-cell`](../../magma/dist/collection/components/mds-table-header-cell/AGENTS.md) | The `<mds-table-header-cell>` web component is the column-header cell of a Magma data table |
|
|
121
|
-
| [`mds-table-row`](../../magma/dist/collection/components/mds-table-row/AGENTS.md) | The `<mds-table-row>` web component represents a single data row inside a `<mds-table>` (slotted through `mds-table-body`; `mds-table-header` and `mds-table-footer` are rows themselves) |
|
|
122
|
-
| [`mds-text`](../../magma/dist/collection/components/mds-text/AGENTS.md) | The `<mds-text>` web component is the foundational typography primitive of the Magma Design System |
|
|
123
87
|
| [`mds-toast`](../../magma/dist/collection/components/mds-toast/AGENTS.md) | The `<mds-toast>` web component is the transient notification surface of the Magma Design System, used to surface brief, non-blocking feedback messages that appear over the viewport and auto-dismiss after a timeout |
|
|
124
88
|
| [`mds-toast-region`](../../magma/dist/collection/components/mds-toast-region/AGENTS.md) | The `<mds-toast-region>` web component is the place where an application shows its toasts: placed once in the application shell, at an edge of the viewport, it lines up the `<mds-toast>` elements visible at the same time, each one readable, and announces them to assistive technologies |
|
|
89
|
+
| [`mds-zero`](../../magma/dist/collection/components/mds-zero/AGENTS.md) | The `<mds-zero>` web component is the empty-state (zero-data) panel of the Magma Design System: a centered, vertically stacked layout that pairs an illustration, explanatory copy, and a call-to-action to guide users when a list, search, or section has no content to show |
|
|
90
|
+
|
|
91
|
+
## Overlays
|
|
92
|
+
|
|
93
|
+
Surfaces that float over the page: dialogs, dropdowns, tooltips, help.
|
|
94
|
+
|
|
95
|
+
| Component | What it is |
|
|
96
|
+
| --------- | ---------- |
|
|
97
|
+
| [`mds-dropdown`](../../magma/dist/collection/components/mds-dropdown/AGENTS.md) | The `<mds-dropdown>` web component is a floating overlay surface of the Magma Design System that anchors arbitrary slotted content next to an external trigger element |
|
|
98
|
+
| [`mds-help`](../../magma/dist/collection/components/mds-help/AGENTS.md) | The `<mds-help>` web component is a contextual help affordance of the Magma Design System: a small help icon that reveals an explanatory tooltip on interaction |
|
|
99
|
+
| [`mds-modal`](../../magma/dist/collection/components/mds-modal/AGENTS.md) | The `<mds-modal>` web component is the Magma Design System overlay container for dialogs, presenting content in a windowed surface layered above the page with an optional backdrop |
|
|
125
100
|
| [`mds-tooltip`](../../magma/dist/collection/components/mds-tooltip/AGENTS.md) | The `<mds-tooltip>` web component is the floating contextual hint of the Magma Design System |
|
|
126
|
-
|
|
127
|
-
|
|
101
|
+
|
|
102
|
+
## Data
|
|
103
|
+
|
|
104
|
+
Sets of values and the people they belong to: tables, lists, figures, avatars.
|
|
105
|
+
|
|
106
|
+
| Component | What it is |
|
|
107
|
+
| --------- | ---------- |
|
|
108
|
+
| [`mds-author`](../../magma/dist/collection/components/mds-author/AGENTS.md) | The `<mds-author>` web component is the layout primitive of the Magma Design System for presenting a person's identity: it pairs an avatar with author information (name, role, or any related details) |
|
|
109
|
+
| [`mds-avatar`](../../magma/dist/collection/components/mds-avatar/AGENTS.md) | The `<mds-avatar>` web component renders a compact, circular representation of a user or entity in the Magma Design System |
|
|
110
|
+
| [`mds-avatar-stack`](../../magma/dist/collection/components/mds-avatar-stack/AGENTS.md) | The `<mds-avatar-stack>` web component groups a set of overlapping `<mds-avatar-stack-item>` children into a single horizontal cluster, the Magma Design System pattern for showing the people associated with an entity (assignees, participants, collaborators) in a compact, space-saving row. |
|
|
111
|
+
| [`mds-avatar-stack-item`](../../magma/dist/collection/components/mds-avatar-stack-item/AGENTS.md), part of `mds-avatar-stack` | The `<mds-avatar-stack-item>` web component is a compound child that represents a single avatar inside an `<mds-avatar-stack>`, wrapping an internal `<mds-avatar>` so individual avatars can be overlapped, sized, and counted as a group rather than rendered standalone. |
|
|
112
|
+
| [`mds-benchmark-bar`](../../magma/dist/collection/components/mds-benchmark-bar/AGENTS.md) | The `<mds-benchmark-bar>` web component is a read-only data-visualization element of the Magma Design System that pairs a labelled caption with a horizontal progress bar to express a single benchmark value on a 0-100 scale |
|
|
113
|
+
| [`mds-entity`](../../magma/dist/collection/components/mds-entity/AGENTS.md) | The `<mds-entity>` web component represents a person, organization, or resource as a compact identity block in the Magma Design System, pairing an avatar with a name, optional secondary details, and contextual actions |
|
|
114
|
+
| [`mds-kpi`](../../magma/dist/collection/components/mds-kpi/AGENTS.md) | The `<mds-kpi>` web component is the layout container of the Magma Design System for presenting groups of key performance indicators |
|
|
115
|
+
| [`mds-kpi-item`](../../magma/dist/collection/components/mds-kpi-item/AGENTS.md), part of `mds-kpi` | The `<mds-kpi-item>` web component is a compound child that represents a single key-performance-indicator entry - a prominent numeric `label` with an optional `description` and `icon` - inside its parent container `<mds-kpi>` |
|
|
116
|
+
| [`mds-list`](../../magma/dist/collection/components/mds-list/AGENTS.md) | The `<mds-list>` web component is the structural container of the Magma Design System list family |
|
|
117
|
+
| [`mds-list-item`](../../magma/dist/collection/components/mds-list-item/AGENTS.md), part of `mds-list` | The `<mds-list-item>` web component is the single entry of a Magma list, designed to be slotted exclusively inside its parent `<mds-list>` |
|
|
118
|
+
| [`mds-price-table`](../../magma/dist/collection/components/mds-price-table/AGENTS.md) | The `<mds-price-table>` web component is the layout container of the Magma Design System pricing-table family |
|
|
119
|
+
| [`mds-price-table-features`](../../magma/dist/collection/components/mds-price-table-features/AGENTS.md), part of `mds-price-table` | The `<mds-price-table-features>` web component is the feature-matrix block of the Magma Design System pricing-table family |
|
|
120
|
+
| [`mds-price-table-features-cell`](../../magma/dist/collection/components/mds-price-table-features-cell/AGENTS.md), part of `mds-price-table-features-row` | The `<mds-price-table-features-cell>` web component is a single cell within a feature comparison row of the Magma price table, rendering one of several visual representations (a support icon, plain text, a label, or arbitrary custom content) depending on its `type` |
|
|
121
|
+
| [`mds-price-table-features-row`](../../magma/dist/collection/components/mds-price-table-features-row/AGENTS.md), part of `mds-price-table-features` | The `<mds-price-table-features-row>` web component is a layout child of `<mds-price-table-features>` that represents a single horizontal row inside the feature-comparison table, conceptually playing the role of a table row (`<tr>`). |
|
|
122
|
+
| [`mds-price-table-header`](../../magma/dist/collection/components/mds-price-table-header/AGENTS.md), part of `mds-price-table` | The `<mds-price-table-header>` web component is the layout child that forms the top band of a `<mds-price-table>`, aligning an optional leading title cell with the per-plan `<mds-price-table-list>` columns so the header sits in the same column grid as the feature rows below it |
|
|
123
|
+
| [`mds-price-table-list`](../../magma/dist/collection/components/mds-price-table-list/AGENTS.md), part of `mds-price-table` or `mds-price-table-header` | The `<mds-price-table-list>` web component is a single pricing-plan column inside the `<mds-price-table>` layout container |
|
|
124
|
+
| [`mds-price-table-list-item`](../../magma/dist/collection/components/mds-price-table-list-item/AGENTS.md), part of `mds-price-table-list` | The `<mds-price-table-list-item>` web component represents a single feature row inside a `<mds-price-table-list>`, pairing a supported/unsupported status icon with a textual feature label |
|
|
125
|
+
| [`mds-table`](../../magma/dist/collection/components/mds-table/AGENTS.md) | The `<mds-table>` web component is the root container of the Magma Design System tabular data system |
|
|
126
|
+
| [`mds-table-body`](../../magma/dist/collection/components/mds-table-body/AGENTS.md), part of `mds-table` | The `<mds-table-body>` web component is the row-group container of the Magma Design System tabular data system, used inside `<mds-table>` |
|
|
127
|
+
| [`mds-table-cell`](../../magma/dist/collection/components/mds-table-cell/AGENTS.md), part of `mds-table-row` or `mds-table-footer` | The `<mds-table-cell>` web component is the data-cell building block of the Magma table, designed to be slotted inside `<mds-table-row>` |
|
|
128
|
+
| [`mds-table-footer`](../../magma/dist/collection/components/mds-table-footer/AGENTS.md), part of `mds-table` | The `<mds-table-footer>` web component is a structural child of `<mds-table>` that renders the footer row of a table - typically used for totals or summaries |
|
|
129
|
+
| [`mds-table-header`](../../magma/dist/collection/components/mds-table-header/AGENTS.md), part of `mds-table` | The `<mds-table-header>` web component is the header region of a Magma table, used exclusively as a direct slot child of its parent `<mds-table>` |
|
|
130
|
+
| [`mds-table-header-cell`](../../magma/dist/collection/components/mds-table-header-cell/AGENTS.md), part of `mds-table-header` | The `<mds-table-header-cell>` web component is the column-header cell of a Magma data table |
|
|
131
|
+
| [`mds-table-row`](../../magma/dist/collection/components/mds-table-row/AGENTS.md), part of `mds-table-body` | The `<mds-table-row>` web component represents a single data row inside a `<mds-table>` (slotted through `mds-table-body`; `mds-table-header` and `mds-table-footer` are rows themselves) |
|
|
132
|
+
|
|
133
|
+
## Tags
|
|
134
|
+
|
|
135
|
+
Short markers attached to other content: badges, chips, labels, mentions, keys.
|
|
136
|
+
|
|
137
|
+
| Component | What it is |
|
|
138
|
+
| --------- | ---------- |
|
|
139
|
+
| [`mds-badge`](../../magma/dist/collection/components/mds-badge/AGENTS.md) | The `<mds-badge>` web component is the Magma Design System's compact status and label indicator, used to attach a short categorical signal (count, state, tag) to other content |
|
|
140
|
+
| [`mds-chip`](../../magma/dist/collection/components/mds-chip/AGENTS.md) | The `<mds-chip>` web component is the Magma Design System's compact element for representing a discrete piece of information, a filter, a selection, or a removable token |
|
|
141
|
+
| [`mds-keyboard`](../../magma/dist/collection/components/mds-keyboard/AGENTS.md) | The `<mds-keyboard>` web component renders a keyboard shortcut as a row of physical-looking keycaps, acting as the compound parent for one or more slotted `<mds-keyboard-key>` children |
|
|
142
|
+
| [`mds-keyboard-key`](../../magma/dist/collection/components/mds-keyboard-key/AGENTS.md), part of `mds-keyboard` | The `<mds-keyboard-key>` web component renders a single physical-looking keycap inside a `<mds-keyboard>` parent, supplying the visual unit for one key of a shortcut combination (e.g |
|
|
143
|
+
| [`mds-label`](../../magma/dist/collection/components/mds-label/AGENTS.md) | The `<mds-label>` web component is the Magma Design System tag/chip used to display a short, non-interactive piece of text such as a status, a category, or a removable selection. |
|
|
144
|
+
| [`mds-mention`](../../magma/dist/collection/components/mds-mention/AGENTS.md) | The `<mds-mention>` web component renders a compact inline chip that references a person or entity - the kind of token produced when you type `@name` in an editor or comment field |
|
|
145
|
+
| [`mds-policy-ai`](../../magma/dist/collection/components/mds-policy-ai/AGENTS.md) | The `<mds-policy-ai>` web component is the Magma Design System disclosure marker that flags AI-generated content as produced by MIA (Maggioli's artificial intelligence) and links to the official AI usage policy |
|
|
146
|
+
|
|
147
|
+
## Structure
|
|
148
|
+
|
|
149
|
+
Containers and dividers that lay the page out: cards, accordions, headers, rules.
|
|
150
|
+
|
|
151
|
+
| Component | What it is |
|
|
152
|
+
| --------- | ---------- |
|
|
153
|
+
| [`mds-accordion`](../../magma/dist/collection/components/mds-accordion/AGENTS.md) | The `<mds-accordion>` web component is the compound container of the Magma Design System that groups and orchestrates a set of collapsible `<mds-accordion-item>` panels |
|
|
154
|
+
| [`mds-accordion-item`](../../magma/dist/collection/components/mds-accordion-item/AGENTS.md), part of `mds-accordion` | The `<mds-accordion-item>` web component is a single collapsible panel of the Magma Design System, designed to be slotted inside its parent `<mds-accordion>` |
|
|
155
|
+
| [`mds-accordion-timer`](../../magma/dist/collection/components/mds-accordion-timer/AGENTS.md) | The `<mds-accordion-timer>` web component is the orchestrating parent of an auto-advancing accordion in the Magma Design System |
|
|
156
|
+
| [`mds-accordion-timer-item`](../../magma/dist/collection/components/mds-accordion-timer-item/AGENTS.md), part of `mds-accordion-timer` | The `<mds-accordion-timer-item>` web component is the single collapsible panel of a timed, auto-advancing accordion, designed to live exclusively inside its parent `<mds-accordion-timer>` |
|
|
157
|
+
| [`mds-card`](../../magma/dist/collection/components/mds-card/AGENTS.md) | The `<mds-card>` web component is the surface container of the Magma Design System: a styled, self-contained panel that groups related media, heading, body and action content into a single bounded region |
|
|
158
|
+
| [`mds-card-content`](../../magma/dist/collection/components/mds-card-content/AGENTS.md), part of `mds-card` | The `<mds-card-content>` web component is the body region of a `<mds-card>`, grouping the primary textual or component content of a card |
|
|
159
|
+
| [`mds-card-footer`](../../magma/dist/collection/components/mds-card-footer/AGENTS.md), part of `mds-card` | The `<mds-card-footer>` web component is the footer region of a `<mds-card>`, grouping the trailing content of a card (typically actions such as buttons or supplementary metadata) into the card's bottom region. |
|
|
160
|
+
| [`mds-card-header`](../../magma/dist/collection/components/mds-card-header/AGENTS.md), part of `mds-card` | The `<mds-card-header>` web component is the header region of a `<mds-card>`, grouping the card's title, supporting text, and optional inline actions |
|
|
161
|
+
| [`mds-card-media`](../../magma/dist/collection/components/mds-card-media/AGENTS.md), part of `mds-card` | The `<mds-card-media>` web component is the media region of a `<mds-card>`: it wraps an image, video or other visual asset and provides an optional overlay layer for text or controls rendered on top of that asset |
|
|
162
|
+
| [`mds-details`](../../magma/dist/collection/components/mds-details/AGENTS.md) | The `<mds-details>` web component is the disclosure widget of the Magma Design System: a collapsible block with a clickable header that shows or hides its content on demand |
|
|
163
|
+
| [`mds-header`](../../magma/dist/collection/components/mds-header/AGENTS.md) | The `<mds-header>` web component is the top-level page header container of the Magma Design System |
|
|
164
|
+
| [`mds-header-bar`](../../magma/dist/collection/components/mds-header-bar/AGENTS.md), part of `mds-header` | The `<mds-header-bar>` web component is the top bar of a Magma application layout: it holds the product branding on the left and the primary navigation actions on the right, collapsing those actions into a hamburger menu on smaller viewports |
|
|
165
|
+
| [`mds-horizontal-scroll`](../../magma/dist/collection/components/mds-horizontal-scroll/AGENTS.md) | The `<mds-horizontal-scroll>` web component is a horizontally scrolling container of the Magma Design System |
|
|
166
|
+
| [`mds-hr`](../../magma/dist/collection/components/mds-hr/AGENTS.md) | The `<mds-hr>` web component is the horizontal rule of the Magma Design System |
|
|
167
|
+
| [`mds-separator`](../../magma/dist/collection/components/mds-separator/AGENTS.md) | The `<mds-separator>` web component is the visual divider of the Magma Design System: a thin, full-radius horizontal rule used to partition content into distinct groups |
|
|
168
|
+
|
|
169
|
+
## Content
|
|
170
|
+
|
|
171
|
+
Text, media and files: typography, images, icons, quotes, notes, previews.
|
|
172
|
+
|
|
173
|
+
| Component | What it is |
|
|
174
|
+
| --------- | ---------- |
|
|
175
|
+
| [`mds-bibliography`](../../magma/dist/collection/components/mds-bibliography/AGENTS.md) | The `<mds-bibliography>` web component renders a single citation entry formatted according to a recognized academic style |
|
|
176
|
+
| [`mds-book`](../../magma/dist/collection/components/mds-book/AGENTS.md) | The `<mds-book>` web component shows a book as a physical object, from the image of its front cover alone: front cover, spine and page block drawn in CSS 3D, turned a little so the spine shows |
|
|
177
|
+
| [`mds-emoji`](../../magma/dist/collection/components/mds-emoji/AGENTS.md) | The `<mds-emoji>` web component renders one of the Magma Design System's animated mascot illustrations (`mia` or `simi`) as an interactive SVG |
|
|
178
|
+
| [`mds-file`](../../magma/dist/collection/components/mds-file/AGENTS.md) | The `<mds-file>` web component is the Magma Design System control for representing a downloadable file as a rich, clickable card |
|
|
179
|
+
| [`mds-file-preview`](../../magma/dist/collection/components/mds-file-preview/AGENTS.md) | The `<mds-file-preview>` web component is the Magma Design System card that previews an uploaded or referenced file, surfacing its name, size, type, and a format-aware icon or thumbnail |
|
|
180
|
+
| [`mds-icon`](../../magma/dist/collection/components/mds-icon/AGENTS.md) | The `<mds-icon>` web component is the single glyph primitive of the Magma Design System: it inlines an SVG into the DOM so the artwork inherits color and sizing from CSS, and it is the building block that nearly every other component (button, chip, input, banner, list-item, etc.) composes to render its iconography |
|
|
181
|
+
| [`mds-img`](../../magma/dist/collection/components/mds-img/AGENTS.md) | The `<mds-img>` web component is the responsive image primitive of the Magma Design System |
|
|
182
|
+
| [`mds-note`](../../magma/dist/collection/components/mds-note/AGENTS.md) | The `<mds-note>` web component is the annotation surface of the Magma Design System: a short, colored sticky-note block used to attach a remark, reminder, or callout to surrounding content |
|
|
183
|
+
| [`mds-quote`](../../magma/dist/collection/components/mds-quote/AGENTS.md) | The `<mds-quote>` web component is the Magma Design System primitive for rendering a stylized blockquote: it wraps quoted text in decorative typographic quotation marks (` .. |
|
|
184
|
+
| [`mds-text`](../../magma/dist/collection/components/mds-text/AGENTS.md) | The `<mds-text>` web component is the foundational typography primitive of the Magma Design System |
|
|
128
185
|
| [`mds-url-view`](../../magma/dist/collection/components/mds-url-view/AGENTS.md) | The `<mds-url-view>` web component renders an embedded preview of an external web page inside a framed browser-like window, wrapping a native `<iframe>` with a titled header, an identifying icon, and a dismiss control |
|
|
129
186
|
| [`mds-usage`](../../magma/dist/collection/components/mds-usage/AGENTS.md) | The `<mds-usage>` web component is a documentation-oriented annotation block of the Magma Design System used to frame example content as a recommendation, a warning, or an informational note |
|
|
130
187
|
| [`mds-video-wall`](../../magma/dist/collection/components/mds-video-wall/AGENTS.md) | The `<mds-video-wall>` web component is the Magma Design System's full-bleed background video surface, used to render an autoplaying, looping ambient video behind foreground content |
|
|
131
|
-
|
|
188
|
+
|
|
189
|
+
## Preferences
|
|
190
|
+
|
|
191
|
+
The controls a user tunes the interface with: mode, theme, contrast, motion, language.
|
|
192
|
+
|
|
193
|
+
| Component | What it is |
|
|
194
|
+
| --------- | ---------- |
|
|
195
|
+
| [`mds-pref`](../../magma/dist/collection/components/mds-pref/AGENTS.md) | The `<mds-pref>` web component is the accessibility-preferences panel of the Magma Design System: a compound parent that groups user-facing settings (animation, consumption, contrast, theme, language) so people can tune readability, motion, and language for their session |
|
|
196
|
+
| [`mds-pref-animation`](../../magma/dist/collection/components/mds-pref-animation/AGENTS.md) | The `<mds-pref-animation>` web component is a preference control that lets users choose how animations are presented (reduced, system-driven, or fully enabled) |
|
|
197
|
+
| [`mds-pref-consumption`](../../magma/dist/collection/components/mds-pref-consumption/AGENTS.md) | The `<mds-pref-consumption>` web component is a preference control of the Magma Design System that lets the user pick an energy-consumption mode (`low`, `medium`, `high`); it is usually a child of `<mds-pref>` and renders as a tab group with one option per mode, so it has no native HTML primitive equivalent. |
|
|
198
|
+
| [`mds-pref-contrast`](../../magma/dist/collection/components/mds-pref-contrast/AGENTS.md) | The `<mds-pref-contrast>` web component is a preference control that lets users switch the application's contrast mode (`more`, `system`, or `no-preference`) |
|
|
199
|
+
| [`mds-pref-language`](../../magma/dist/collection/components/mds-pref-language/AGENTS.md) | The `<mds-pref-language>` web component is the language-preference control of the Magma Design System, usually slotted inside the `<mds-pref>` panel alongside the other preference children |
|
|
200
|
+
| [`mds-pref-language-item`](../../magma/dist/collection/components/mds-pref-language-item/AGENTS.md), part of `mds-pref-language` | The `<mds-pref-language-item>` web component represents a single selectable language option inside the language-preference picker `<mds-pref-language>` |
|
|
201
|
+
| [`mds-pref-mode`](../../magma/dist/collection/components/mds-pref-mode/AGENTS.md) | The `<mds-pref-mode>` web component is the mode preference control of the Magma Design System, usually a direct child of the `<mds-pref>` panel |
|
|
202
|
+
| [`mds-pref-theme`](../../magma/dist/collection/components/mds-pref-theme/AGENTS.md) | The `<mds-pref-theme>` web component is the theme-switcher segment of the Magma accessibility preferences panel, usually a direct child of `<mds-pref>` |
|
|
203
|
+
| [`mds-pref-theme-item`](../../magma/dist/collection/components/mds-pref-theme-item/AGENTS.md), part of `mds-pref-theme` | The `<mds-pref-theme-item>` web component is a single selectable theme entry inside the `<mds-pref-theme>` preference picker |
|
package/agents/conventions.md
CHANGED
|
@@ -99,6 +99,10 @@ Parent/child pairs communicate internally. Rules:
|
|
|
99
99
|
2. Never use a child outside its parent (no `mds-accordion-item` without `mds-accordion`).
|
|
100
100
|
3. Never mix child types across parents.
|
|
101
101
|
|
|
102
|
+
Which parent a child belongs in: [`components.md`](components.md) lists every part right
|
|
103
|
+
after its compound and names the components it sits in (the `@parent` docs tag of the
|
|
104
|
+
component in `documentation.json`).
|
|
105
|
+
|
|
102
106
|
```html
|
|
103
107
|
<mds-accordion>
|
|
104
108
|
<mds-accordion-item>...</mds-accordion-item>
|
|
@@ -117,7 +121,8 @@ Maggioli):
|
|
|
117
121
|
```
|
|
118
122
|
|
|
119
123
|
`mds-icon` fetches `<mdsIconSvgPath><slug>.svg`; the path is configured once at startup
|
|
120
|
-
(see [`assets.md`](assets.md)): `
|
|
124
|
+
(see [`assets.md`](assets.md)): `IconsSetService.setSvgPath('/svg/')`, or
|
|
125
|
+
`sessionStorage.setItem('mdsIconSvgPath', '/svg/')`.
|
|
121
126
|
|
|
122
127
|
## Accessibility
|
|
123
128
|
|
|
@@ -184,18 +189,24 @@ Maggioli):
|
|
|
184
189
|
|
|
185
190
|
A component's styling API is what its `AGENTS.md` documents:
|
|
186
191
|
|
|
187
|
-
1. **CSS custom properties** ("CSS custom properties" table), named
|
|
192
|
+
1. **Public CSS custom properties** ("CSS custom properties" table), named
|
|
188
193
|
`--mds-<component>-<prop>`. The first choice: set them on the host element or on a
|
|
189
|
-
parent selector.
|
|
194
|
+
parent selector. The table lists only the public ones, the ones the component promises;
|
|
195
|
+
its other custom properties are internal (`"visibility": "internal"` in
|
|
196
|
+
`documentation.json`): they may change or go in any release, so never set or read
|
|
197
|
+
them, and the lint reports them (`magma/no-internal-tokens`, [`lint.md`](lint.md)). A
|
|
198
|
+
component with no public custom property is styled with its props, its parts and the
|
|
199
|
+
roles around it. A public one marked **Static** takes a value of its own, not a role
|
|
200
|
+
(the colours of an illustration, a cover colour from a catalogue record).
|
|
190
201
|
2. **Shadow parts** ("Parts" table), for a deep customisation the custom properties do
|
|
191
202
|
not cover. Only the documented part names: they are public API, the rest of the
|
|
192
203
|
shadow tree is not.
|
|
193
204
|
|
|
194
|
-
Never reach past that: undocumented parts, internal class
|
|
195
|
-
break on any release.
|
|
205
|
+
Never reach past that: internal custom properties, undocumented parts, internal class
|
|
206
|
+
names, `>>>` or `/deep/` break on any release.
|
|
196
207
|
|
|
197
208
|
```css
|
|
198
|
-
/*
|
|
209
|
+
/* CORRECT */
|
|
199
210
|
mds-button { --mds-button-radius: var(--magma-radius-full); }
|
|
200
211
|
|
|
201
212
|
.featured-card mds-button {
|
|
@@ -203,10 +214,10 @@ mds-button { --mds-button-radius: var(--magma-radius-full); }
|
|
|
203
214
|
--mds-button-radius: var(--magma-radius-lg);
|
|
204
215
|
}
|
|
205
216
|
|
|
206
|
-
/*
|
|
217
|
+
/* CORRECT, deep customisation: `icon` is a documented part of mds-button */
|
|
207
218
|
mds-button::part(icon) { fill: rgb(var(--magma-accent-fg)); }
|
|
208
219
|
|
|
209
|
-
/*
|
|
220
|
+
/* INCORRECT - internal nodes are not API */
|
|
210
221
|
mds-button >>> .internal { color: red; }
|
|
211
222
|
```
|
|
212
223
|
|
package/agents/install.md
CHANGED
|
@@ -201,6 +201,13 @@ With React Router the handler is `(href) => navigate(href)` from `useNavigate()`
|
|
|
201
201
|
`false` from the handler for a link the browser is to load. Without a registered router, an
|
|
202
202
|
`onClick` on the component can still cancel the click with `preventDefault()` and route by hand.
|
|
203
203
|
|
|
204
|
+
## 7. Lint
|
|
205
|
+
|
|
206
|
+
The ESLint and Stylelint rules ship in `@maggioli-design-system/magma`: nothing more to
|
|
207
|
+
install from Magma. Add the block for this target to the project's ESLint configuration and
|
|
208
|
+
the Stylelint preset for its stylesheets, as [`lint.md`](lint.md) shows ([React](lint.md#react)),
|
|
209
|
+
merging into what the project already has, and run both after every change.
|
|
210
|
+
|
|
204
211
|
## Gotchas
|
|
205
212
|
|
|
206
213
|
- The icon path effect must run on the client. In Next.js App Router the wrapper that
|