@maggioli-design-system/magma-react 2.9.0 → 2.11.0

package/agents/patterns.md

@@ -0,0 +1,121 @@
+<!--
+  GENERATED FILE - do not edit by hand.
+  Source of truth: docs/agents/ in the magma monorepo.
+  Regenerate with: npm run sync.agent-docs (from the stencil package).
+-->
+# Magma patterns catalogue (7 patterns, 6 candidates, 4 building blocks, 6 domains of Foundation)
+
+> Generated from the patterns of the magma monorepo. A pattern is the solution to a task that
+> spans components (where a message goes, when to ask before acting), the same in every
+> product: Magma's default. Each one is defined on a few variables of the situation; read its
+> file in `agents/patterns/`, or ask the MCP server: `get_pattern` with the values of the
+> variables you know gives the case to follow. Its "Always true" rules hold in every product.
+> The domains of Foundation (`kind: foundation`) are the rules of composition the patterns
+> stand on: the space between two elements, which action weighs more, the style of a title, when
+> a surface, how wide. They are read the same way, and each rule says the principle it serves and
+> what carries it (a component, a token, a utility, a lint rule): write the carrier, not its
+> value; a carrier still planned is not there yet, so write the value the case gives.
+> `get_guide` serves each domain by its id; the answer of `get_pattern` for a situation
+> lists in `rules` the ones its case relies on, and `get_component` the ones that govern a
+> component.
+> The building blocks (`kind: block`) are the sections of a page that come back in several
+> patterns (the head of a page): space, not time. A block has regions in the order of the page
+> instead of cases, each saying when it shows; `get_pattern` with the values of its variables
+> gives the regions to lay out, and its Layout section says how they stand.
+> A product may keep a layer in its own repository, `magma/patterns/<id>.md`, that narrows the
+> open choices and adds situations (A product's layer, below); `get_pattern` applies it. A candidate is a need Magma knows
+> and has not defined yet: no default covers it, so say which choice you made and why.
+
+## Foundation
+
+| Domain | Title | Need | Status |
+| ------ | ----- | ---- | ------ |
+| [`actions`](patterns/actions.md) | Actions | Tell at a glance which action moves the task forward, which ones stand beside it, and which ones destroy, and find them in the same place on every screen. | decided |
+| [`density`](patterns/density.md) | Density | Fit more or less on a screen without changing how its parts relate: more for a product that shows a lot at once, less for a person who needs more room to point. | decided |
+| [`rhythm`](patterns/rhythm.md) | Rhythm | Space two elements of a composition by how they relate, so that each one stands nearer to what it belongs to than to its neighbour. | decided |
+| [`surfaces`](patterns/surfaces.md) | Surfaces | Give a boundary only to what space cannot separate, so that a surface on the screen means something: an item of a set, a thing that stays put, a dialog. | decided |
+| [`titles`](patterns/titles.md) | Titles | Tell at a glance what a title names, the whole page, a section of it, a dialog, a part or a group of fields, and keep the outline of the page true for whoever navigates it by headings. | decided |
+| [`widths`](patterns/widths.md) | Widths and alignment | Give text, forms, pages and dialogs a width that keeps them readable at every size of window and of text, and line them up on one edge. | decided |
+
+## Building blocks
+
+| Block | Title | Need | Status |
+| ----- | ----- | ---- | ------ |
+| [`app-shell`](patterns/app-shell.md) | Application shell | The person knows which application they are in, reaches each of its sections from any page, and sees who they are signed in as. | decided |
+| [`page-header`](patterns/page-header.md) | Page header | The person sees at once what the page holds or is about, where they are, and what they can do with it. | decided |
+| [`item-list`](patterns/item-list.md) | Item list | The person sees a set of items, narrows it to the ones they need, knows how many there are, and reaches the rest. | decided |
+| [`labels-and-values`](patterns/labels-and-values.md) | Labels and values | The person reads the data of an item, each value under the name of what it is. | decided |
+
+## Data
+
+| Pattern | Title | Need | Status |
+| ------- | ----- | ---- | ------ |
+| [`choose-items`](patterns/choose-items.md) | Choose items | The person picks items from a long list to use them for something else, such as members to add to a group or documents to attach. | candidate |
+| [`concurrent-editing`](patterns/concurrent-editing.md) | Concurrent editing | Two people change the same record at the same time, and neither loses their changes. | candidate |
+| [`list-with-filters`](patterns/list-with-filters.md) | List with filters | The person finds the items they need in a long list, by searching, filtering and paging. | decided |
+| [`permissions`](patterns/permissions.md) | Permissions | The person sees what their role lets them see and do, and understands why an action is not available. | candidate |
+| [`record-detail`](patterns/record-detail.md) | Record detail | The person opens one record to read it and act on it, then goes back to the list as it was. | decided |
+
+## Input
+
+| Pattern | Title | Need | Status |
+| ------- | ----- | ---- | ------ |
+| [`consent-and-legal`](patterns/consent-and-legal.md) | Consent and legal steps | The person pays, signs or gives consent: steps with legal rules of their own. | candidate |
+| [`form-and-validation`](patterns/form-and-validation.md) | Form and validation | The person fills in a form, sees what is wrong and where, and sends it. | candidate |
+
+## Messages and states
+
+| Pattern | Title | Need | Status |
+| ------- | ----- | ---- | ------ |
+| [`confirm-action`](patterns/confirm-action.md) | Confirm an action | The person is about to do something that cannot be taken back, and must decide knowing what will happen. | decided |
+| [`empty-state`](patterns/empty-state.md) | An empty part of the page | The person reaches a part of the page with nothing in it, and must understand why and what to do next. | decided |
+| [`error-recovery`](patterns/error-recovery.md) | When something fails | Something did not work, and the person must understand what did not happen and go on without losing their work. | decided |
+| [`loading`](patterns/loading.md) | Waiting for something | The person waits for content or for the end of an action, and must know that it is coming and whether they can do something else meanwhile. | decided |
+| [`message-placement`](patterns/message-placement.md) | Where a message goes | The person did something or opened a view, and must know what happened without looking for it. | decided |
+| [`notification-center`](patterns/notification-center.md) | Notification center | The person comes back to the outcomes that arrived while they were elsewhere, and to what they still have to act on. | candidate |
+
+## A product's layer
+
+A product adapts a pattern in its own repository, one file per pattern, named after it:
+`magma/patterns/<id>.md` under the project's root. The layer fixes the open choices the pattern
+leaves to the products, within what each one `may`, and maps the situations of the product's
+domain to the cases of the pattern. It never changes an "Always true" rule nor a case: a product
+that needs one changed asks Magma for it (`reporting.md`).
+
+```markdown
+---
+id: message-placement
+extends: magma:message-placement
+layer: example-backoffice
+narrows:
+  success-toast-duration: 8000
+situations:
+  - situation: A protocol number is assigned to a filed document
+    case: action-done-elsewhere
+    note: the toast carries Copy, so it stays (toast-action-stays)
+---
+
+# Where a message goes, in Example Backoffice
+
+## Why
+
+The operators read slowly between two phone calls: 8 seconds instead of 5. (2026-10-29)
+```
+
+| Field | What it holds |
+| ----- | ------------- |
+| `id` | The id of the Magma pattern, the name of the file. |
+| `extends` | `magma:<id>`. |
+| `layer` | The name of the product, never `magma`. |
+| `narrows` | `<open choice>: <value>`, only for the open choices of the pattern. |
+| `situations` | `{ situation, case, note }`, with a case of the pattern or a list of them; or `{ situation, use: <pattern> }` when another pattern answers it. |
+
+The body is free: why each choice was made, with its date, for whoever changes it next.
+`get_pattern` without arguments lists in `layerErrors` what is wrong in the folder; with the
+id it returns the pattern with the layer applied (`narrowed-by` on each choice it fixes, `layer`
+on each situation it adds). A layer with an error is not applied: the answer stays Magma's
+default until it is fixed. A need no Magma pattern covers, which the product cannot wait for,
+may get a pattern of its own in the same folder, in the shape of Magma's files (its own
+`layer`, no `extends`, never an id Magma has); a pattern that comes back in two or three
+products is proposed to Magma. In Claude Code, the Magma plugin writes and checks a layer with
+`/magma:pattern-layer`.

package/agents/reporting.md

@@ -14,8 +14,8 @@
 
 ## 1. Make sure it is Magma's
 
-- Read the component's `AGENTS.md` and `antipattern.md`, and
-  [`anti-patterns.md`](anti-patterns.md): a documented mistake is the project's to fix,
+- Read the component's `AGENTS.md` and its own `mistakes.md`, and
+  [`mistakes.md`](mistakes.md): a documented mistake is the project's to fix,
   not a Magma bug.
 - Check that the installed `magma`, `styles` and `design-tokens` versions belong
   together (the ones a `magma` release depends on): mismatched versions break tokens
@@ -139,7 +139,10 @@ when:
 - a tool said Magma has nothing for a well-formed question: its answer carries `gap`, or
   its error says it does not know;
 - a tool answered, but not with what the task needed: a field it does not return, a
-  filter or an argument it does not take.
+  filter or an argument it does not take;
+- a flow across components that no pattern covers (`get_pattern` finds none for the need,
+  or only a candidate, or its answer for your situation is a gap): the pattern is the
+  missing answer, `magma-mcp: no pattern for <the need>`.
 
 It is not a gap when the answer is right but not the one you hoped for, when your own
 input was wrong (an unknown tag, a missing argument), or when the question is about the

package/agents/theming.md

@@ -39,35 +39,43 @@ inside a component's shadow root it matches nothing.
 ## Named themes
 
 A named theme retints the whole neutral scaffolding of the page at once - surfaces,
-wash, borders, text, the inverse chip - and keeps it contrast-checked. It is one
-attribute on `<html>`, and it needs `themes.css` ([`assets.md`](assets.md)):
+wash, borders, text, the inverse chip - and the accent, and keeps it contrast-checked.
+It is one attribute on `<html>`, and it needs `themes.css` ([`assets.md`](assets.md)):
 
 ```html
-<html data-theme-name="cool"><!-- or "warm"; no attribute = the default theme --></html>
+<html data-theme-name="editorial"><!-- no attribute = business --></html>
 ```
 
-| Theme | Family | Cast |
-| --- | --- | --- |
-| (none) | `neutral` | grey |
-| `cool` | `porcelain` | blue-grey |
-| `warm` | `bisque` | warm grey |
+| Theme | For | Family | Accent |
+| --- | --- | --- | --- |
+| `business` (no attribute) | the management software | `neutral`, grey | the Maggioli brand |
+| `editorial` | the publishing side | `bisque`, warm grey | the Maggioli Editore brand |
+
+No `data-theme-name` means `business`: it is the base `:root` and emits no rule.
+`default` (its old name), `cool` and `warm` still work and are deprecated: they leave at
+the next major.
 
 The status colors (info, success, warning, danger) never change with the theme. To let
 the user choose, use `mds-pref-theme`: it writes the attribute, remembers the choice and
-also carries the corner shape (below). A theme works only on code that paints with the
+also carries the corner shape (below). Each `mds-pref-theme-item` shows the theme it
+names, from the preview every theme publishes on the page (`--magma-preview-<name>-wash`,
+`--magma-preview-<name>-accent`). A theme works only on code that paints with the
 semantic roles; a raw palette step stays as it is. Defining your own theme is not a
 consumer feature yet.
 
 ## Surfaces and elevation
 
 Every neutral background is one of five surface levels. They are not five greys to pick
-from: each one says where the element sits relative to the page.
+from: each one says where the element sits relative to the page. When an element gets a
+surface at all (a card is an item of a set, the groups of one subject are bare sections, a
+band is drawn only by a component that stays put) is the domain
+[`surfaces`](patterns/surfaces.md).
 
 ```text
 surface-default          the page, the canvas everything else sits on
   surface-sunken         recessed into the page: wells, insets, code blocks, tracks
-  surface-muted          on the page plane, grouped: zebra rows, a subtle section
-  surface-raised         lifted off the page: cards, panels, sticky headers
+  surface-muted          on the page plane, grouped, inside components: zebra rows
+  surface-raised         lifted off the page: cards, panels, the bars that stay put
     surface-overlay      floating above everything: modal, dropdown, popover, tooltip
 ```
 
@@ -104,6 +112,22 @@ components do (`mds-card` uses `--shadow-md-sharp`, `mds-modal` `--shadow-2xl`):
 An overlay separates from what is under it by its shadow, not by a border: in dark
 `border-muted` is darker than `surface-overlay`.
 
+**A field stands a step off its surface** (#1193). On the page a field (`mds-input`,
+`mds-input-select`, `mds-input-date`, the drop area of `mds-input-upload`) paints
+`surface-overlay`; inside a surface that paints `overlay` (the window of a dialog, `mds-banner`,
+`mds-status-bar`, `mds-dropdown`, `mds-table`) it paints `surface-default`, the step below, so
+its fill never melts into the window. The surface passes the step down as
+`--magma-field-fill`, an inherited custom property, and a field reads it with `overlay` as the
+fallback. A surface of your own that paints `overlay` passes it the same way:
+
+```css
+.panel {
+  --magma-field-fill: var(--magma-surface-default);
+
+  background: rgb(var(--magma-surface-overlay));
+}
+```
+
 **Text is safe on every level.** Each text role is computed against the least
 contrasting surface of its family, so `text-default`, `text-muted` and the rest are
 legible on all five levels in both modes (checked in CI). The tinted pills are a

package/agents/typography.md

@@ -26,7 +26,32 @@ Inside component markup, `mds-text` sets a style through its `typography` prop (
 family to the `read` one.
 
 ```html
-<h2 class="text-title-h3">Invoices</h2>
+<h1 class="text-title-page">Invoices</h1>
 <p class="typography-read-paragraph">Plain CSS, no Tailwind.</p>
-<mds-text typography="h3">Invoices</mds-text>
+<mds-text typography="h3" tag="h1">Invoices</mds-text>
 ```
+
+## Titles by role
+
+A title takes the style of its role and its tag from the outline of the page, never one from
+the other: the domain [`titles`](patterns/titles.md).
+
+| Role | Style | Tag | Writes |
+| --- | --- | --- | --- |
+| the page | `h3` | `h1`, the only one (`titles/one-h1`) | `text-title-page` |
+| a section of the page | `h5` | `h2` | `text-title-section` |
+| a dialog | `h5` | the headline of its window | `text-title-dialog` |
+| a part: a card, a panel, an item of an accordion | `h6` | the level of its place | `text-title-part` |
+| a group of fields | `h6` | the `legend` of its `fieldset` (`field-group`) | `text-title-group` |
+
+Without Tailwind the same roles are `typography-title-<role>`. `mds-text` takes the roles in
+its `typography` with #1200; until then it takes the style of the level with the tag of the
+place (`typography="h5" tag="h2"`), and a heading never skips a level
+(`titles/tag-is-structure`).
+
+## Reading measure
+
+Text to read stops at `56ch`, 65 to 80 characters on a line: the reset caps `p`, `li` and
+`figcaption`, and `mds-text` caps itself with those tags, so nothing has to be written for it
+(`widths/reading`; the other widths, of a form, a page and a dialog, are the domain
+[`widths`](patterns/widths.md)).

package/agents/variants.md

@@ -52,7 +52,7 @@ Allowed values depend on the component but draw from these families:
 | `success`    | Status   | Successful operations, positive confirmation                                |
 | `warning`    | Status   | Caution, non-blocking issues that require attention                         |
 | `info`       | Status   | Neutral informational content or guidance                                   |
-| `dark`       | Neutral  | Neutral chrome. Painted with roles that follow the mode, so it is not "for light backgrounds": check the component's `pattern.md` for how it renders |
+| `dark`       | Neutral  | Neutral chrome. Painted with roles that follow the mode, so it is not "for light backgrounds": check the component's `examples.md` for how it renders |
 | `light`      | Neutral  | The other half of the neutral pair, same caveat as `dark`                   |
 | `amaranth`   | Label    | Decorative amaranth label for tags, categories, or visual grouping          |
 | `red`        | Label    | Decorative red label for tags, categories, or visual grouping               |

package/dist/components.js

@@ -3,120 +3,120 @@
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
  */
 /* eslint-disable */
-export { MdsAccordionItem } from "./mds-accordion-item.js";
-export { MdsAccordionTimerItem } from "./mds-accordion-timer-item.js";
-export { MdsAccordionTimer } from "./mds-accordion-timer.js";
-export { MdsAccordion } from "./mds-accordion.js";
-export { MdsAuthor } from "./mds-author.js";
-export { MdsAvatarStackItem } from "./mds-avatar-stack-item.js";
-export { MdsAvatarStack } from "./mds-avatar-stack.js";
-export { MdsAvatar } from "./mds-avatar.js";
-export { MdsBadge } from "./mds-badge.js";
-export { MdsBanner } from "./mds-banner.js";
-export { MdsBenchmarkBar } from "./mds-benchmark-bar.js";
-export { MdsBibliography } from "./mds-bibliography.js";
-export { MdsBook } from "./mds-book.js";
-export { MdsBreadcrumbItem } from "./mds-breadcrumb-item.js";
-export { MdsBreadcrumb } from "./mds-breadcrumb.js";
-export { MdsButtonDropdown } from "./mds-button-dropdown.js";
-export { MdsButtonGroup } from "./mds-button-group.js";
-export { MdsButton } from "./mds-button.js";
-export { MdsCalendarCell } from "./mds-calendar-cell.js";
-export { MdsCalendar } from "./mds-calendar.js";
-export { MdsCardContent } from "./mds-card-content.js";
-export { MdsCardFooter } from "./mds-card-footer.js";
-export { MdsCardHeader } from "./mds-card-header.js";
-export { MdsCardMedia } from "./mds-card-media.js";
-export { MdsCard } from "./mds-card.js";
-export { MdsChip } from "./mds-chip.js";
-export { MdsDetails } from "./mds-details.js";
-export { MdsDropdown } from "./mds-dropdown.js";
-export { MdsEmoji } from "./mds-emoji.js";
-export { MdsEntity } from "./mds-entity.js";
-export { MdsFilePreview } from "./mds-file-preview.js";
-export { MdsFile } from "./mds-file.js";
-export { MdsFilterItem } from "./mds-filter-item.js";
-export { MdsFilter } from "./mds-filter.js";
-export { MdsHeaderBar } from "./mds-header-bar.js";
-export { MdsHeader } from "./mds-header.js";
-export { MdsHelp } from "./mds-help.js";
-export { MdsHorizontalScroll } from "./mds-horizontal-scroll.js";
-export { MdsHr } from "./mds-hr.js";
-export { MdsIcon } from "./mds-icon.js";
-export { MdsImg } from "./mds-img.js";
-export { MdsInputDateRangePreselection } from "./mds-input-date-range-preselection.js";
-export { MdsInputDateRange } from "./mds-input-date-range.js";
-export { MdsInputDate } from "./mds-input-date.js";
-export { MdsInputField } from "./mds-input-field.js";
-export { MdsInputOtp } from "./mds-input-otp.js";
-export { MdsInputRange } from "./mds-input-range.js";
-export { MdsInputSelect } from "./mds-input-select.js";
-export { MdsInputSwitch } from "./mds-input-switch.js";
-export { MdsInputTipItem } from "./mds-input-tip-item.js";
-export { MdsInputTip } from "./mds-input-tip.js";
-export { MdsInputUpload } from "./mds-input-upload.js";
-export { MdsInput } from "./mds-input.js";
-export { MdsKeyboardKey } from "./mds-keyboard-key.js";
-export { MdsKeyboard } from "./mds-keyboard.js";
-export { MdsKpiItem } from "./mds-kpi-item.js";
-export { MdsKpi } from "./mds-kpi.js";
-export { MdsLabel } from "./mds-label.js";
-export { MdsLink } from "./mds-link.js";
-export { MdsListItem } from "./mds-list-item.js";
-export { MdsList } from "./mds-list.js";
-export { MdsMention } from "./mds-mention.js";
-export { MdsModal } from "./mds-modal.js";
-export { MdsNote } from "./mds-note.js";
-export { MdsNotification } from "./mds-notification.js";
-export { MdsPaginatorItem } from "./mds-paginator-item.js";
-export { MdsPaginator } from "./mds-paginator.js";
-export { MdsPolicyAi } from "./mds-policy-ai.js";
-export { MdsPrefAnimation } from "./mds-pref-animation.js";
-export { MdsPrefConsumption } from "./mds-pref-consumption.js";
-export { MdsPrefContrast } from "./mds-pref-contrast.js";
-export { MdsPrefLanguageItem } from "./mds-pref-language-item.js";
-export { MdsPrefLanguage } from "./mds-pref-language.js";
-export { MdsPrefMode } from "./mds-pref-mode.js";
-export { MdsPrefThemeItem } from "./mds-pref-theme-item.js";
-export { MdsPrefTheme } from "./mds-pref-theme.js";
-export { MdsPref } from "./mds-pref.js";
-export { MdsPriceTableFeaturesCell } from "./mds-price-table-features-cell.js";
-export { MdsPriceTableFeaturesRow } from "./mds-price-table-features-row.js";
-export { MdsPriceTableFeatures } from "./mds-price-table-features.js";
-export { MdsPriceTableHeader } from "./mds-price-table-header.js";
-export { MdsPriceTableListItem } from "./mds-price-table-list-item.js";
-export { MdsPriceTableList } from "./mds-price-table-list.js";
-export { MdsPriceTable } from "./mds-price-table.js";
-export { MdsProgress } from "./mds-progress.js";
-export { MdsPushNotificationItem } from "./mds-push-notification-item.js";
-export { MdsPushNotification } from "./mds-push-notification.js";
-export { MdsQuote } from "./mds-quote.js";
-export { MdsRadialMenuItem } from "./mds-radial-menu-item.js";
-export { MdsRadialMenu } from "./mds-radial-menu.js";
-export { MdsRadialProgress } from "./mds-radial-progress.js";
-export { MdsSeparator } from "./mds-separator.js";
-export { MdsSpinner } from "./mds-spinner.js";
-export { MdsStatusBar } from "./mds-status-bar.js";
-export { MdsStepperBarItem } from "./mds-stepper-bar-item.js";
-export { MdsStepperBar } from "./mds-stepper-bar.js";
-export { MdsTabBarItem } from "./mds-tab-bar-item.js";
-export { MdsTabBar } from "./mds-tab-bar.js";
-export { MdsTabItem } from "./mds-tab-item.js";
-export { MdsTab } from "./mds-tab.js";
-export { MdsTableBody } from "./mds-table-body.js";
-export { MdsTableCell } from "./mds-table-cell.js";
-export { MdsTableFooter } from "./mds-table-footer.js";
-export { MdsTableHeaderCell } from "./mds-table-header-cell.js";
-export { MdsTableHeader } from "./mds-table-header.js";
-export { MdsTableRow } from "./mds-table-row.js";
-export { MdsTable } from "./mds-table.js";
-export { MdsText } from "./mds-text.js";
-export { MdsToastRegion } from "./mds-toast-region.js";
-export { MdsToast } from "./mds-toast.js";
-export { MdsTooltip } from "./mds-tooltip.js";
-export { MdsTreeItem } from "./mds-tree-item.js";
-export { MdsTree } from "./mds-tree.js";
-export { MdsUrlView } from "./mds-url-view.js";
-export { MdsUsage } from "./mds-usage.js";
-export { MdsVideoWall } from "./mds-video-wall.js";
-export { MdsZero } from "./mds-zero.js";
+export { MdsAccordion } from './mds-accordion.js';
+export { MdsAccordionItem } from './mds-accordion-item.js';
+export { MdsAccordionTimer } from './mds-accordion-timer.js';
+export { MdsAccordionTimerItem } from './mds-accordion-timer-item.js';
+export { MdsAuthor } from './mds-author.js';
+export { MdsAvatar } from './mds-avatar.js';
+export { MdsAvatarStack } from './mds-avatar-stack.js';
+export { MdsAvatarStackItem } from './mds-avatar-stack-item.js';
+export { MdsBadge } from './mds-badge.js';
+export { MdsBanner } from './mds-banner.js';
+export { MdsBenchmarkBar } from './mds-benchmark-bar.js';
+export { MdsBibliography } from './mds-bibliography.js';
+export { MdsBook } from './mds-book.js';
+export { MdsBreadcrumb } from './mds-breadcrumb.js';
+export { MdsBreadcrumbItem } from './mds-breadcrumb-item.js';
+export { MdsButton } from './mds-button.js';
+export { MdsButtonDropdown } from './mds-button-dropdown.js';
+export { MdsButtonGroup } from './mds-button-group.js';
+export { MdsCalendar } from './mds-calendar.js';
+export { MdsCalendarCell } from './mds-calendar-cell.js';
+export { MdsCard } from './mds-card.js';
+export { MdsCardContent } from './mds-card-content.js';
+export { MdsCardFooter } from './mds-card-footer.js';
+export { MdsCardHeader } from './mds-card-header.js';
+export { MdsCardMedia } from './mds-card-media.js';
+export { MdsChip } from './mds-chip.js';
+export { MdsDetails } from './mds-details.js';
+export { MdsDropdown } from './mds-dropdown.js';
+export { MdsEmoji } from './mds-emoji.js';
+export { MdsEntity } from './mds-entity.js';
+export { MdsFile } from './mds-file.js';
+export { MdsFilePreview } from './mds-file-preview.js';
+export { MdsFilter } from './mds-filter.js';
+export { MdsFilterItem } from './mds-filter-item.js';
+export { MdsHeader } from './mds-header.js';
+export { MdsHeaderBar } from './mds-header-bar.js';
+export { MdsHelp } from './mds-help.js';
+export { MdsHorizontalScroll } from './mds-horizontal-scroll.js';
+export { MdsHr } from './mds-hr.js';
+export { MdsIcon } from './mds-icon.js';
+export { MdsImg } from './mds-img.js';
+export { MdsInput } from './mds-input.js';
+export { MdsInputDate } from './mds-input-date.js';
+export { MdsInputDateRange } from './mds-input-date-range.js';
+export { MdsInputDateRangePreselection } from './mds-input-date-range-preselection.js';
+export { MdsInputField } from './mds-input-field.js';
+export { MdsInputOtp } from './mds-input-otp.js';
+export { MdsInputRange } from './mds-input-range.js';
+export { MdsInputSelect } from './mds-input-select.js';
+export { MdsInputSwitch } from './mds-input-switch.js';
+export { MdsInputTip } from './mds-input-tip.js';
+export { MdsInputTipItem } from './mds-input-tip-item.js';
+export { MdsInputUpload } from './mds-input-upload.js';
+export { MdsKeyboard } from './mds-keyboard.js';
+export { MdsKeyboardKey } from './mds-keyboard-key.js';
+export { MdsKpi } from './mds-kpi.js';
+export { MdsKpiItem } from './mds-kpi-item.js';
+export { MdsLabel } from './mds-label.js';
+export { MdsLink } from './mds-link.js';
+export { MdsList } from './mds-list.js';
+export { MdsListItem } from './mds-list-item.js';
+export { MdsMention } from './mds-mention.js';
+export { MdsModal } from './mds-modal.js';
+export { MdsNote } from './mds-note.js';
+export { MdsNotification } from './mds-notification.js';
+export { MdsPaginator } from './mds-paginator.js';
+export { MdsPaginatorItem } from './mds-paginator-item.js';
+export { MdsPolicyAi } from './mds-policy-ai.js';
+export { MdsPref } from './mds-pref.js';
+export { MdsPrefAnimation } from './mds-pref-animation.js';
+export { MdsPrefConsumption } from './mds-pref-consumption.js';
+export { MdsPrefContrast } from './mds-pref-contrast.js';
+export { MdsPrefLanguage } from './mds-pref-language.js';
+export { MdsPrefLanguageItem } from './mds-pref-language-item.js';
+export { MdsPrefMode } from './mds-pref-mode.js';
+export { MdsPrefTheme } from './mds-pref-theme.js';
+export { MdsPrefThemeItem } from './mds-pref-theme-item.js';
+export { MdsPriceTable } from './mds-price-table.js';
+export { MdsPriceTableFeatures } from './mds-price-table-features.js';
+export { MdsPriceTableFeaturesCell } from './mds-price-table-features-cell.js';
+export { MdsPriceTableFeaturesRow } from './mds-price-table-features-row.js';
+export { MdsPriceTableHeader } from './mds-price-table-header.js';
+export { MdsPriceTableList } from './mds-price-table-list.js';
+export { MdsPriceTableListItem } from './mds-price-table-list-item.js';
+export { MdsProgress } from './mds-progress.js';
+export { MdsPushNotification } from './mds-push-notification.js';
+export { MdsPushNotificationItem } from './mds-push-notification-item.js';
+export { MdsQuote } from './mds-quote.js';
+export { MdsRadialMenu } from './mds-radial-menu.js';
+export { MdsRadialMenuItem } from './mds-radial-menu-item.js';
+export { MdsRadialProgress } from './mds-radial-progress.js';
+export { MdsSeparator } from './mds-separator.js';
+export { MdsSpinner } from './mds-spinner.js';
+export { MdsStatusBar } from './mds-status-bar.js';
+export { MdsStepperBar } from './mds-stepper-bar.js';
+export { MdsStepperBarItem } from './mds-stepper-bar-item.js';
+export { MdsTab } from './mds-tab.js';
+export { MdsTabBar } from './mds-tab-bar.js';
+export { MdsTabBarItem } from './mds-tab-bar-item.js';
+export { MdsTabItem } from './mds-tab-item.js';
+export { MdsTable } from './mds-table.js';
+export { MdsTableBody } from './mds-table-body.js';
+export { MdsTableCell } from './mds-table-cell.js';
+export { MdsTableFooter } from './mds-table-footer.js';
+export { MdsTableHeader } from './mds-table-header.js';
+export { MdsTableHeaderCell } from './mds-table-header-cell.js';
+export { MdsTableRow } from './mds-table-row.js';
+export { MdsText } from './mds-text.js';
+export { MdsToast } from './mds-toast.js';
+export { MdsToastRegion } from './mds-toast-region.js';
+export { MdsTooltip } from './mds-tooltip.js';
+export { MdsTree } from './mds-tree.js';
+export { MdsTreeItem } from './mds-tree-item.js';
+export { MdsUrlView } from './mds-url-view.js';
+export { MdsUsage } from './mds-usage.js';
+export { MdsVideoWall } from './mds-video-wall.js';
+export { MdsZero } from './mds-zero.js';