@maggioli-design-system/magma-react 2.3.0 → 2.4.1

package/AGENTS.md

@@ -5,7 +5,7 @@
 -->
 # @maggioli-design-system/magma-react - agent install guide
 
-> Version 2.3.0. You (the agent) are installing Magma into THIS project. Do not
+> Version 2.4.1. You (the agent) are installing Magma into THIS project. Do not
 > assume the setup - detect it from the project, then ask the user only for what you
 > cannot infer. The detailed steps live in [`agents/install.md`](agents/install.md)
 > (this target) and [`agents/assets.md`](agents/assets.md) (shared styles, fonts,

package/CHANGELOG.md

@@ -7,6 +7,256 @@ package.
 It is released together with `magma`, at the same version: the sections are the
 releases of `magma`.
 
+## [magma@2.4.1] - 2026-10-21
+
+### Bug Fixes
+
+- *(mds-emoji)* Read CSS custom properties once the emoji has a computed style
+- *(mds-emoji)* Keep hearing the pointer when the host is moved
+- *(mds-tree-item)* Count the first and the last child among the items
+- *(mds-input-switch)* Keep the page still when clicked in a scrolled box
+
+### Documentation
+
+- *(magma)* Describe the single trunk main and the manual release
+
+## [magma@2.4.0] - 2026-10-20
+
+### Bug Fixes
+
+- *(mds-accordion-timer,mds-accordion-timer-item)* Announce each selection once, keep the open one
+- *(mds-accordion)* Announce every change of the open items, and only those
+- *(mds-pref-mode,mds-pref-animation,mds-pref-consumption,mds-pref-contrast)* Announce a pick once
+- *(mds-pref-theme)* Announce a theme or a corner shape once, not on every render
+- *(mds-pref-language)* Select the item of a language set from code
+- *(mds-toast)* Emit mdsToastClose once per dismissal and stop the countdown on hide
+- *(mds-push-notification-item)* Send the id the close event declares
+- *(mds-header)* Type the visibility detail as the string it carries
+- *(mds-file)* Send the description the card shows
+- *(mds-breadcrumb)* Name the item the back arrow selects as the caller
+- *(mds-details)* Write the user's toggle into opened
+- *(mds-calendar)* Put a backwards range in order
+- *(mds-table,mds-table-row)* Follow a selection made from code, remove the scroll listener
+- *(mds-notification)* Stop following the target when the badge leaves the page
+- *(mds-label)* Wrap at the width the label is given with truncate none or all
+- *(design-tokens,styles,magma)* The shadow ink stays dark in dark mode, no more light halo
+- *(mds-dropdown)* A second click on the caller closes the panel
+- *(mds-button-dropdown)* The link and the initial focus belong to the primary action
+- *(mds-emoji)* The gaze follows the direction of the pointer, at any size
+- *(mds-table)* Call setActions only on a header that has it
+- *(mds-modal)* Open the dialog after the render that reflects position and animation
+- *(mds-text)* Keep the accents of a truncated label or option text visible
+- *(mds-chip)* Paint the ground with surface-overlay, not the grey wash
+- *(mds-banner)* Paint the neutral ground with surface-overlay, not the card's surface-raised
+- *(mds-input-otp,mds-pref-theme-item,mds-stepper-bar-item,stencil)* Import the FOUC sheets
+- *(mds-text)* Import the animation preference sheet
+- *(mds-tooltip)* Import the dark high-contrast shadow sheet
+- *(mds-avatar,mds-avatar-stack)* Spell the pill on the corner axis
+- *(mds-entity)* Take the radii and the shape of the corner axis
+- *(mds-chip,mds-mention)* Spell the pills on the corner axis
+- *(mds-hr,mds-separator)* Spell the rounded rule on the corner axis
+- *(mds-input-switch,mds-input)* Spell the switch and the password dots as pills
+- *(mds-notification,mds-radial-progress)* Spell the circles on the corner axis
+- *(mds-paginator,mds-paginator-item)* Spell the pills on the corner axis
+- *(mds-horizontal-scroll)* Spell the dots and the arrows as pills
+- *(mds-breadcrumb-item)* Spell the pill of the button on the corner axis
+- *(mds-filter,mds-filter-item)* Spell the pills on the corner axis
+- *(mds-badge)* Spell the pill on the corner axis
+- *(mds-stepper-bar-item)* Take the radii of the corner axis
+- *(mds-push-notification-item)* Take the radii of the corner axis
+- *(mds-tooltip,mds-text,mds-note)* Take the smallest step of the corner axis
+- *(mds-accordion-item,mds-accordion-timer-item,mds-details)* Cap the corner of the header
+- *(mds-bibliography)* Spell the pill of the link on the corner axis
+- *(mds-price-table-list,mds-zero,mds-usage)* Take the radii of the corner axis
+- *(mds-toast,mds-status-bar)* Take the radii of the corner axis
+- *(mds-header)* Round the inline bar on the corner axis
+- *(mds-policy-ai)* Take the radii of the corner axis
+- *(mds-table-row)* Round the actions panel on the corner axis
+- *(mds-url-view)* Round the window on the corner axis
+- *(mds-tree,mds-tree-item)* Take the radii of the corner axis
+- *(mds-button-dropdown)* Round the corners as mds-button does, on the corner axis
+- *(mds-calendar,mds-calendar-cell)* Take the radii of the corner axis
+- *(mds-input-select,mds-input-tip-item,mds-input-range,mds-input-upload)* Take the corner axis
+- *(mds-keyboard,mds-keyboard-key)* Paint the keyboard with the washes of the active theme
+- *(mds-pref-theme-item)* Take the wash of the active theme and the pill radius
+- *(mds-input-select)* Take the radius of mds-input, on the host
+- *(mds-accordion)* Keep the ids of the items
+- *(mds-breadcrumb)* Keep the ids of the items
+- *(mds-filter)* Keep the ids of the items
+- *(mds-tab-bar)* Keep the ids of the items
+- *(mds-tree,mds-tree-item)* The toggle takes its expanded colours and its gap
+- *(mds-tab,mds-tab-item)* The items take the default and the hover shadow
+- *(mds-progress,mds-stepper-bar-item)* --mds-progress-radius rounds the bar again
+- *(mds-dropdown)* The backdrop takes the z-index and the duration set on the dropdown
+- *(mds-label)* Name the delete button in Spanish
+- *(mds-label)* Load a deletable label without an error
+- *(mds-tab)* Leave a content panel past the last item hidden
+- *(mds-pref-animation,mds-pref-consumption,mds-pref-contrast)* Ignore a mode outside the union
+- *(mds-pref-language,mds-pref-language-item)* Take three-letter codes, ignore invalid ones
+- *(mds-pref-theme,mds-pref-theme-item)* Ignore an invalid theme name, scheme or corner shape
+- *(mds-emoji)* Ignore a name outside the dictionary
+- *(mds-input-otp)* Submit a paste that fills the last cell instead of throwing
+- *(mds-icon)* Decode a base64 icon with its padding, draw a saved SVG file inline
+- *(mds-img)* Skip a srcset-consumption entry without its level
+- *(mds-bibliography)* Describe author as a string, read an array per entry
+- *(mds-avatar)* Give every pair of initials a variant
+- *(mds-horizontal-scroll)* Measure the slotted elements, not the text between them
+- *(mds-notification)* Describe the element the badge sits on with its count
+- *(mds-kpi-item)* Build the accessible name from the parts that are there
+- *(mds-price-table-list,mds-usage)* Drop the main landmark and the document-edit roles
+- *(mds-progress,mds-benchmark-bar)* Keep the progressbar values valid and follow aria-hidden
+- *(mds-toast)* Announce the toast as a status message
+- *(mds-spinner,mds-video-wall,mds-emoji)* Follow the Magma animation preference
+- *(mds-tree,mds-tree-item)* Give the tree a structure and the branches their state
+- *(mds-button,mds-filter-item)* Click on Enter and Space as the pointer does, never while busy
+- *(mds-input-otp)* Leave Tab, Backspace and the shortcuts to the keyboard
+- *(mds-details)* Toggle on Space, and keep the closed content out of the tab order
+- *(mds-file,mds-file-preview)* Make the download cards buttons the keyboard activates
+- *(mds-tooltip,mds-help)* Show the tooltip on focus as on hover
+- *(mds-tab-bar-item)* Reach and activate the items from the keyboard
+- *(mds-paginator,mds-paginator-item)* Take the disabled arrows out of the tab order
+- *(mds-breadcrumb,mds-breadcrumb-item)* Keep the current page selected under the keyboard
+- *(mds-modal,mds-status-bar)* Let strict veto the swipe, and keep the status bar non-modal
+- *(mds-radial-menu)* Close the open menu on an outside click and on Escape
+- *(mds-details)* Keep an open details hidden inside a closed one
+- *(mds-calendar,mds-calendar-cell)* The cell properties reach the cells, the day colour paints
+- *(mds-price-table-list-item)* The supported icon takes its hover colour
+- *(mds-table-cell,mds-table-row,mds-table)* The -alt colours paint the sorted column
+- *(mds-header,mds-header-bar)* The icon colours of the header reach the hamburger
+- *(mds-price-table-features,mds-price-table-features-cell)* The border colour reaches the cells
+- *(mds-toast)* MdsToastClose waits for the exit transition, not for 1000 ms
+- *(mds-tree-item)* MdsTreeItemCollapse waits for the branch transition, not for 1000 ms
+- *(mds-keyboard-key)* The space key is wide again
+- *(mds-paginator,mds-paginator-item)* The item properties reach the items from the paginator
+- *(mds-push-notification-item)* Style only the tones its type accepts
+- *(mds-card)* Read the layout from the slots, again when the content changes
+- *(mds-table)* Show the batch bar for buttons added after load
+- *(mds-price-table-list)* Show the items rendered after load
+- *(mds-tree,mds-tree-item)* Open on load, hand the props to the items that arrive later
+- *(mds-calendar)* Show the preselection area for the content of its slot
+- *(mds-pref,mds-pref-language,mds-pref-theme)* Size on load, follow the items added later
+- *(mds-avatar-stack)* Count the avatars added after load
+- *(mds-img)* Follow the consumption preference the page applies
+- *(storybook)* Turn off the boolean controls of the form-associated components
+- *(mds-tree-item)* Round the corners of the folder toggle again
+- *(mds-input-switch)* Round the focus ring of the checkbox and radio again
+- *(mds-avatar)* Show the sources in one order, never an empty avatar
+- *(mds-bibliography)* Keep every first name, link the title only with a url
+- *(mds-button-dropdown)* Pass truncate to the label of the primary action
+- *(mds-calendar-cell)* Paint selection none as no selection, deprecate weekend
+- *(mds-input-date-range-preselection)* Keep the author's slot, let the click through
+- *(mds-dropdown,mds-tooltip,mds-help)* Keep the placement while it has room
+- *(mds-emoji)* Keep the mouse tracking off once stopFollowMouse is called
+- *(mds-file,mds-file-preview)* Show no extension for a filename without one
+- *(mds-header)* Hide the hamburger of the bar without a menu slot
+- *(mds-header-bar)* Open and close the menu of the header with setOpened
+- *(mds-notification)* Hide a dismissed badge with the disabled strategy too
+- *(mds-pref)* Show the reload notice in the visible panel
+- *(mds-pref-theme)* Keep a name, scheme or corner shape set after load
+- *(mds-pref-contrast)* Stop querying the contrast of the system on each pick
+- *(mds-push-notification)* Hide once the last item goes, label the clear button
+- *(mds-stepper-bar)* Hide the other panels with the hidden attribute
+- *(mds-keyboard)* Accept the keys of a shortcut in any order
+- *(mds-note)* Turn Enter into a click only while the note is deletable
+- *(mds-calendar-cell)* Let the start and end of a selection keep their colours
+- *(mds-pref-mode)* Stop forcing Safari to light mode
+- *(magma)* Export CHANGELOG.md from magma, magma-react and magma-angular
+- *(mds-benchmark-bar)* Announce the value as shown when there is no alias
+- *(mds-input-switch)* Cast the shadow of the knob again
+- *(mds-file,mds-filter-item,mds-input-range,mds-input-switch,mds-input-upload)* Use magma eases
+- *(magma)* Fix: .claude to .gitignore
+- *(mds-table-header)* Paint the select-all cell with the header colour
+- *(mds-table)* Paint every row with a full colour, and the scroll area with the sunken surface
+- *(mds-table)* Draw the frame with border-muted, like the grid
+- *(mds-modal)* Slide the window in when its content has a focusable element
+
+### Build
+
+- *(magma)* Drop the unused changelog scripts and the deprecated conventional-changelog-cli
+- *(magma)* Print the BREAKING CHANGE footer under breaking entries
+
+### Documentation
+
+- *(magma)* Merge every pull request into dev through the merge queue
+- *(styles,magma)* A pill that casts a shadow takes surface-overlay, not a wash
+- *(mds-accordion-timer-item)* Describe progress as the 0 to 1 the timer writes
+- *(mds-breadcrumb-item)* Describe the button part
+- *(mds-button)* Describe the label part
+- *(mds-button-dropdown)* Describe the dropdown part
+- *(mds-card-media)* Describe the content part
+- *(mds-details)* Name the slots the content part wraps
+- *(mds-emoji)* Put the description of the methods before their tags
+- *(mds-file-preview)* Describe the card part
+- *(mds-header-bar)* Describe the content part
+- *(mds-help)* Describe the icon part
+- *(mds-horizontal-scroll)* Describe the content part
+- *(mds-img)* Describe the media part
+- *(mds-input)* Attach the part docs to the class, put the icon on the left
+- *(mds-input-date)* Describe the input-date part
+- *(mds-input-date-range-preselection)* Say the slot takes the label text
+- *(mds-input-field)* Name the controls the field validates, describe the content part
+- *(mds-input-tip)* Say active moves the tip, not the items
+- *(mds-input-tip-item)* List all ten variants in the Storybook controls
+- *(mds-label)* Drop the doc of a slot the label does not render
+- *(mds-list-item)* Describe the icon and text parts
+- *(mds-mention)* Give size its own description
+- *(mds-modal)* Say mdsModalOpen emits on open, describe the dialog part
+- *(mds-notification)* Say a value of 0 shows an empty dot
+- *(mds-pref)* List mds-pref-theme among the children
+- *(mds-price-table-list-item)* Describe the icon part
+- *(mds-push-notification)* Describe behavior as shipped
+- *(mds-radial-menu)* Describe the radial-menu part
+- *(mds-stepper-bar)* Describe itemsDone by what it sets, fix the slot tag name
+- *(mds-stepper-bar-item)* Describe value without an event that does not exist
+- *(mds-tab-item)* Describe the button part
+- *(mds-table)* Say what mdsTableSelectionChange emits, describe the batch bar part
+- *(mds-table-footer)* Say the footer takes cells
+- *(mds-table-header)* Say the header takes header cells, describe the actions part
+- *(mds-table-header-cell)* Describe the action and label parts
+- *(mds-toast)* Say when mdsToastClose emits
+- *(mds-tooltip)* Describe the text part
+- *(mds-tree-item)* Describe async and the two events by what they do
+- *(mds-url-view)* Give icon its own description
+- *(mds-usage)* Describe the header, icon and label parts
+- *(mds-button,mds-button-dropdown,mds-input-date)* Deprecate three properties nothing reads
+- *(mds-button,mds-input,mds-input-field)* Three custom property descriptions match the code
+- *(magma)* Explain that "false" turns on the booleans of form-associated components
+- *(magma)* Describe when the preferences announce a change, and the hidden step panels
+- *(magma)* Ask breaking commits to say what to change in their footer
+- *(stencil)* Give an @example to the props whose value has a format
+- *(magma)* List mds-toast-region and count 115 components
+- *(magma)* Document the icons package and fix the scope lists
+
+### Features
+
+- *(mds-stepper-bar,mds-stepper-bar-item)* Let the user ask to go back to a done step
+- *(mds-button)* --mds-button-label-transform keeps a label as written
+- *(mds-table,mds-table-header,mds-table-row)* The Actions column follows rows added after load
+- *(mds-policy-ai)* Part chip selects the chip, the wrapper gets part chip-wrapper
+- *(mds-push-notification-item)* Document the avatar part, drop the icon part
+- *(mds-tree)* Deprecate async, which the tree never reads
+- *(mds-img)* Let an empty alt mark the image as decorative
+- *(mds-chip)* Reflect disabled, which now blocks the keyboard as well as the pointer
+- *(mds-breadcrumb)* The selected colours and the disabled back button take their properties
+- *(mds-modal)* --mds-modal-transition-timing-function, the misspelled name kept as an alias
+- *(mds-radial-progress,mds-pref-mode,mds-accordion,mds-note)* Document the properties they read
+- *(mds-card)* --mds-card-background paints the card too
+- *(mds-radial-menu)* A stylesheet can set the radius and the angles
+- *(mds-img)* Set crossorigin and referrerpolicy on the image, with no default
+- *(mds-table-footer,mds-table)* Line the footer cells up with the rows
+- *(mds-usage)* Reflect variant, which the styles read from the host attribute
+- *(mds-table)* Draw the lines inside the table with their own separator colour
+- *(mds-toast)* Add a hide arrow and hold the countdown while the toast is in use
+- *(mds-toast,mds-toast-region)* Line up the toasts shown at once in a region
+
+### Refactor
+
+- *(mds-mention)* Drop the .badge rules, which match no element
+
+### Styling
+
+- *(mds-dropdown)* A deeper drop shadow in dark, three times the light alphas
+
 ## [magma@2.3.0] - 2026-10-15
 
 ### Bug Fixes

package/agents/anti-patterns.md

@@ -19,10 +19,13 @@
   properties and, for a deep customisation, the parts listed in the component's
   `AGENTS.md` (see [`conventions.md`](conventions.md)).
 - Setting boolean attributes to the string `"false"` (e.g. `disabled="false"`,
-  `await="false"`). Stencil reads `"false"` as `false`, but the attribute stays in the
-  DOM on a prop that is not reflected (and until the first render on one that is), so
-  `[disabled]` selectors and scripts reading the attribute still see it set. **Remove
-  the attribute** to turn it off.
+  `await="false"`). On a form-associated component (`mds-button`, `mds-button-dropdown`
+  and the form inputs, listed in [`conventions.md`](conventions.md)) it turns the prop
+  **on**, as on a native control. On the others Stencil reads `"false"` as `false`, but
+  the attribute stays in the DOM on a prop that is not reflected (and until the first
+  render on one that is), so `[disabled]` selectors and scripts reading the attribute
+  still see it set. **Remove the attribute** to turn it off; from React or Angular, pass
+  `false` to the property, as [`conventions.md`](conventions.md) shows.
 - Embedding nested HTML in a default slot when the component documents a `label` prop.
 - Using raw Tailwind colour utilities (`bg-white`, `text-gray-700`) on or inside Magma
   components - use the semantic role classes (`bg-surface-default`, `text-fg-muted`),

package/agents/color.md

@@ -72,10 +72,10 @@ named theme retints all of it at once.
 | --- | --- | --- |
 | `surface-default` | `bg-surface-default` | the page canvas (the `body` already has it) |
 | `surface-raised` | `bg-surface-raised` | cards, panels, sticky headers |
-| `surface-overlay` | `bg-surface-overlay` | modal, dropdown, popover, sheet |
+| `surface-overlay` | `bg-surface-overlay` | modal, dropdown, popover, sheet, and anything lifted with a shadow |
 | `surface-sunken` | `bg-surface-sunken` | wells, insets, code blocks, tracks |
 | `surface-muted` | `bg-surface-muted` | same-plane grouping: zebra rows, a subtle section |
-| `wash-soft` / `wash-base` / `wash-strong` | `bg-wash-*` | a neutral pill or chip, by how marked it is |
+| `wash-soft` / `wash-base` / `wash-strong` | `bg-wash-*` | a flat neutral pill or chip (no shadow), by how marked it is |
 | `surface-inverse` / `surface-inverse-muted` | `bg-surface-inverse*` | the chip that flips with the mode (dark on a light UI) |
 | `on-inverse` | `text-on-inverse` | text and icons on either inverse level |
 | `text-default` | `text-fg-default` | body text, titles, primary data |

package/agents/components.md

@@ -3,7 +3,7 @@
   Source of truth: docs/agents/ in the magma monorepo.
   Regenerate with: npm run sync.agent-docs (from the stencil package).
 -->
-# Magma components catalogue (114 components)
+# Magma components catalogue (115 components)
 
 > Generated from each component's usage description. Each tag links the component's
 > own `AGENTS.md` (its API, with `pattern.md` and `antipattern.md` beside it) in
@@ -120,6 +120,7 @@
 | [`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) |
 | [`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 |
 | [`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 |
+| [`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 |
 | [`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 |
 | [`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 |
 | [`mds-tree-item`](../../magma/dist/collection/components/mds-tree-item/AGENTS.md) | 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 |

package/agents/conventions.md

@@ -28,11 +28,27 @@
 
 - Boolean props default to `false`/`undefined`. Prefer removing the attribute over
   setting it to `false`.
+- A boolean attribute turns its prop on by being present. On the form-associated
+  components (`mds-button`, `mds-button-dropdown`, `mds-input`, `mds-input-date`,
+  `mds-input-date-range`, `mds-input-field`, `mds-input-otp`, `mds-input-range`,
+  `mds-input-select`, `mds-input-switch`, `mds-input-upload`) any value turns it on,
+  `"false"` included, as on a native control.
 - Disabled: `<mds-button disabled>`. Never `disabled="false"` - remove it instead. Set
   `disabled` on the component, not on a wrapper: disabled components are removed from
   the tab order automatically.
 - Async: `<mds-button await>` shows a spinner and blocks interaction; remove `await`
   (set `undefined`) when done.
+- From a framework, pass a real boolean to the property, not a string to the attribute:
+  - React with `magma-react`: `<MdsButton disabled={isDisabled} />` sets the property,
+    so `false` turns the prop off; the `.server` variants leave a `false` out of the
+    markup. A bare `mds-*` tag in React 18 JSX is different: React 18 writes
+    `disabled={false}` as the attribute `"false"`, which turns a form-associated component
+    on, so pass `undefined` there. React 19 sets the property and turns it off.
+  - Angular with `magma-angular`: bind the input, `[disabled]="isDisabled"`. The proxy
+    sets the property, so `false` turns the prop off. A static `disabled="false"` or an
+    attribute binding (`[attr.disabled]="false"`) writes the attribute instead, and turns
+    a form-associated component on; `[attr.disabled]="null"` removes it. Reactive Forms
+    `disable()` / `enable()` set the property through the value accessor.
 
 ## Sizing
 

package/agents/install.md

@@ -165,7 +165,7 @@ SSR notes:
 - Icons render empty server-side (the box is reserved, no layout shift) and the
   default theme is rendered - see the SSR section in
   [`install.md`](install.md).
-- The hydrate module (`magma/hydrate`) bundles all 114 components (~3 MB,
+- The hydrate module (`magma/hydrate`) bundles all 115 components (~3 MB,
   server-only). It is imported lazily behind a `typeof window` check and must
   never end up in a client bundle.
 
@@ -209,6 +209,11 @@ With React Router the handler is `(href) => navigate(href)` from `useNavigate()`
   on the client - use the `.server` variants (section 5) to get real SSR markup.
 - Keep `magma` and `magma-react` on the exact same version; the wrapper is generated
   against a specific `magma` build.
+- Pass booleans as booleans: `<MdsButton disabled={false} />` sets the property and turns
+  the prop off, and the `.server` variants leave a `false` out of the markup. Render the
+  wrapper, not the bare `mds-*` tag: in React 18 JSX `<mds-button disabled={false}>`
+  writes the attribute `"false"`, which turns a form-associated component on (see
+  [`conventions.md`](conventions.md)).
 
 ## See also
 

package/dist/components.js

@@ -109,6 +109,7 @@ 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";

package/dist/components.server.js

@@ -109,6 +109,7 @@ export { MdsTableHeader } from "./mds-table-header.server.js";
 export { MdsTableRow } from "./mds-table-row.server.js";
 export { MdsTable } from "./mds-table.server.js";
 export { MdsText } from "./mds-text.server.js";
+export { MdsToastRegion } from "./mds-toast-region.server.js";
 export { MdsToast } from "./mds-toast.server.js";
 export { MdsTooltip } from "./mds-tooltip.server.js";
 export { MdsTreeItem } from "./mds-tree-item.server.js";

package/dist/mds-table-footer.server.js

@@ -5,7 +5,7 @@ import * as clientComponents from "@maggioli-design-system/magma-react";
 export const serializeShadowRoot = "declarative-shadow-dom";
 export const MdsTableFooter = /*@__PURE__*/ createComponent({
     tagName: 'mds-table-footer',
-    properties: {},
+    properties: { selectable: 'selectable' },
     hydrateModule: typeof window === 'undefined' ? import('@maggioli-design-system/magma/hydrate') : undefined,
     clientModule: clientComponents.MdsTableFooter,
     serializeShadowRoot

package/dist/mds-toast-region.js

@@ -0,0 +1,12 @@
+'use client';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+import { MdsToastRegion as MdsToastRegionElement, defineCustomElement as defineMdsToastRegion } from "@maggioli-design-system/magma/dist/components/mds-toast-region.js";
+export const MdsToastRegion = /*@__PURE__*/ createComponent({
+    tagName: 'mds-toast-region',
+    elementClass: MdsToastRegionElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {},
+    defineCustomElement: defineMdsToastRegion
+});

package/dist/mds-toast-region.server.js

@@ -0,0 +1,15 @@
+'use client';
+import { createComponent } from '@stencil/react-output-target/ssr';
+// @ts-ignore - ignore potential type issues as the project is importing itself
+import * as clientComponents from "@maggioli-design-system/magma-react";
+export const serializeShadowRoot = "declarative-shadow-dom";
+export const MdsToastRegion = /*@__PURE__*/ createComponent({
+    tagName: 'mds-toast-region',
+    properties: {
+        position: 'position',
+        max: 'max'
+    },
+    hydrateModule: typeof window === 'undefined' ? import('@maggioli-design-system/magma/hydrate') : undefined,
+    clientModule: clientComponents.MdsToastRegion,
+    serializeShadowRoot
+});

package/dist/mds-toast.server.js

@@ -10,7 +10,8 @@ export const MdsToast = /*@__PURE__*/ createComponent({
         visible: 'visible',
         variant: 'variant',
         tone: 'tone',
-        position: 'position'
+        position: 'position',
+        deletable: 'deletable'
     },
     hydrateModule: typeof window === 'undefined' ? import('@maggioli-design-system/magma/hydrate') : undefined,
     clientModule: clientComponents.MdsToast,

package/dist/types/components.d.ts

@@ -108,6 +108,7 @@ 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";

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

@@ -110,6 +110,7 @@ export { MdsTableHeader } from "./mds-table-header.server.js";
 export { MdsTableRow } from "./mds-table-row.server.js";
 export { MdsTable } from "./mds-table.server.js";
 export { MdsText } from "./mds-text.server.js";
+export { MdsToastRegion } from "./mds-toast-region.server.js";
 export { MdsToast } from "./mds-toast.server.js";
 export { MdsTooltip } from "./mds-tooltip.server.js";
 export { MdsTreeItem } from "./mds-tree-item.server.js";

package/dist/types/mds-toast-region.d.ts

@@ -0,0 +1,9 @@
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
+import type { Components } from "@maggioli-design-system/magma/dist/components";
+import { MdsToastRegion as MdsToastRegionElement } from "@maggioli-design-system/magma/dist/components/mds-toast-region.js";
+export type MdsToastRegionEvents = NonNullable<unknown>;
+export declare const MdsToastRegion: StencilReactComponent<MdsToastRegionElement, MdsToastRegionEvents, Components.MdsToastRegion>;

package/dist/types/mds-toast-region.server.d.ts

@@ -0,0 +1,11 @@
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { type SerializeShadowRootOptions } from '@stencil/react-output-target/ssr';
+import type { Components } from "@maggioli-design-system/magma/dist/components";
+import { MdsToastRegion as MdsToastRegionElement } from "@maggioli-design-system/magma/dist/components/mds-toast-region.js";
+export declare const serializeShadowRoot: SerializeShadowRootOptions;
+export type MdsToastRegionEvents = NonNullable<unknown>;
+export declare const MdsToastRegion: StencilReactComponent<MdsToastRegionElement, MdsToastRegionEvents, Components.MdsToastRegion>;

package/dist/types/mds-toast.d.ts

@@ -3,10 +3,10 @@
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
  */
 import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
-import { type MdsToastCustomEvent } from "@maggioli-design-system/magma";
+import { type MdsToastCloseEventDetail, type MdsToastCustomEvent } from "@maggioli-design-system/magma";
 import type { Components } from "@maggioli-design-system/magma/dist/components";
 import { MdsToast as MdsToastElement } from "@maggioli-design-system/magma/dist/components/mds-toast.js";
 export type MdsToastEvents = {
-    onMdsToastClose: EventName<MdsToastCustomEvent<void>>;
+    onMdsToastClose: EventName<MdsToastCustomEvent<MdsToastCloseEventDetail>>;
 };
 export declare const MdsToast: StencilReactComponent<MdsToastElement, MdsToastEvents, Components.MdsToast>;

package/dist/types/mds-toast.server.d.ts

@@ -4,11 +4,11 @@
  */
 import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
 import { type SerializeShadowRootOptions } from '@stencil/react-output-target/ssr';
-import { type MdsToastCustomEvent } from "@maggioli-design-system/magma";
+import { type MdsToastCloseEventDetail, type MdsToastCustomEvent } from "@maggioli-design-system/magma";
 import type { Components } from "@maggioli-design-system/magma/dist/components";
 import { MdsToast as MdsToastElement } from "@maggioli-design-system/magma/dist/components/mds-toast.js";
 export declare const serializeShadowRoot: SerializeShadowRootOptions;
 export type MdsToastEvents = {
-    onMdsToastClose: EventName<MdsToastCustomEvent<void>>;
+    onMdsToastClose: EventName<MdsToastCustomEvent<MdsToastCloseEventDetail>>;
 };
 export declare const MdsToast: StencilReactComponent<MdsToastElement, MdsToastEvents, Components.MdsToast>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/magma-react",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "main": "dist/components.js",
   "module": "dist/components.js",
   "types": "dist/types/components.d.ts",
@@ -14,6 +14,7 @@
       "types": "./dist/types/*.d.ts",
       "import": "./dist/*.js"
     },
+    "./CHANGELOG.md": "./CHANGELOG.md",
     "./package.json": "./package.json"
   },
   "sideEffects": false,
@@ -33,8 +34,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@maggioli-design-system/magma": "2.3.0",
-    "@stencil/react-output-target": "1.6.2"
+    "@maggioli-design-system/magma": "2.4.1",
+    "@stencil/react-output-target": "1.6.5"
   },
   "repository": {
     "type": "git",