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

package/AGENTS.md

@@ -5,7 +5,7 @@
 -->
 # @maggioli-design-system/magma-react - agent install guide
 
-> Version 2.4.1. You (the agent) are installing Magma into THIS project. Do not
+> Version 2.5.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,45 @@ package.
 It is released together with `magma`, at the same version: the sections are the
 releases of `magma`.
 
+## [magma@2.5.1] - 2026-10-22
+
+### Bug Fixes
+
+- *(mds-stepper-bar-item)* Show the status of the step in its badge
+- *(mds-input-range)* Draw a light thumb in dark, apart from the progress
+- *(mds-input-range)* Keep the disabled colours in dark
+- *(mds-input)* Show the validation messages in the language of the page
+- *(mds-input-select)* Emit no change on load, before any selection
+- *(mds-status-bar)* Keep the bar inside its area at 480px and less
+- *(mds-keyboard)* Start the test with Enter without failing it at once
+- *(mds-input)* Wait for the first blur to validate a required field
+- *(mds-emoji)* Draw the emoji in Firefox, keep the inner svg flat
+- *(mds-input)* Report maxlength and minlength under their own error keys
+- *(stencil)* Give a page language with a region the texts of its base language
+
+## [magma@2.5.0] - 2026-10-21
+
+### Bug Fixes
+
+- *(mds-card)* Keep the footer at the bottom of the card without a content
+
+### Documentation
+
+- *(magma,mds-button,mds-text)* Point links inside a sentence to mds-link
+- *(stencil)* Require Magma tokens for the values of component sheets
+- *(mds-input-switch)* Write the input tag and the type values as code
+- *(mds-button,mds-link,mds-text)* Regenerate the readmes from the usage docs
+- *(magma)* Write spacing with the numeric steps, a t-shirt size is a container size
+
+### Features
+
+- *(mds-link)* Add the inline link for running text
+- *(mds-entity)* Expose the infos part, 2px between the name and the detail
+
+### Refactor
+
+- *(stencil)* Take the lengths and durations of the component sheets from the tokens
+
 ## [magma@2.4.1] - 2026-10-21
 
 ### Bug Fixes

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020-2026 Maggioli S.p.A.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/agents/assets.md

@@ -102,6 +102,16 @@ With Tailwind 4, import Magma's Tailwind layer in your Tailwind entry point (the
 the `text-title-*` / `text-info-*` / `text-read-*` / `text-code-*` utilities,
 `utilities.css` the `focus-bounce` / `focus-zoom` helpers.
 
+Spacing and sizes:
+
+- write spacing with the numeric steps, the step times `--spacing` (0.0025rem):
+  `p-600` is 1.5rem, `gap-400` 1rem;
+- a t-shirt name on `w-*`, `min-w-*`, `max-w-*` and `basis-*` is a container size:
+  `max-w-2xl` is 640px, `w-xs` 320px, `basis-md` 448px, and `max-w-none` sets no limit;
+- the logical `inline-*`, `min-inline-*` and `max-inline-*` still read the spacing step of
+  that name (`inline-2xl` is 48px): for a container width write
+  `inline-(--container-2xl)`.
+
 Do not use the JS preset (`presets: [require('@maggioli-design-system/styles')]`) with
 Tailwind 4: it is the Tailwind 3 path (with the layers in
 `@maggioli-design-system/styles/dist/tailwind3/`), its colours are Tailwind 3 colour

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 (115 components)
+# Magma components catalogue (116 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
@@ -70,6 +70,7 @@
 | [`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 |
 | [`mds-kpi-item`](../../magma/dist/collection/components/mds-kpi-item/AGENTS.md) | 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>` |
 | [`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. |
+| [`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 |
 | [`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 |
 | [`mds-list-item`](../../magma/dist/collection/components/mds-list-item/AGENTS.md) | The `<mds-list-item>` web component is the single entry of a Magma list, designed to be slotted exclusively inside its parent `<mds-list>` |
 | [`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 |

package/agents/conventions.md

@@ -126,6 +126,11 @@ Maggioli):
   (`mi/baseline/send` -> "send"), which names the icon, not the action. Other components
   that accept `icon` without a label require `aria-label` (or `title`) on the host
   element: they do not synthesize one.
+- Links: a word or a phrase inside running text is an `mds-link` inside the `mds-text`,
+  never an `mds-button` (a block-level control with its own typography) nor a raw `<a>`
+  styled by hand. `mds-button` with `href` is for a standalone action that navigates, such
+  as a call to action. `mds-link` with `target="blank"` already tells the assistive
+  technology that it opens a new tab: do not write it in the text.
 - Form components (`mds-input`, `mds-input-date`, `mds-input-date-range`, `mds-input-otp`,
   `mds-input-range`, `mds-input-select`, `mds-input-switch`, `mds-input-upload`) are
   form-associated (`formAssociated`) and behave like the native controls they replace:
@@ -168,6 +173,13 @@ Maggioli):
 - Use the preference components / classes for high contrast and reduced motion - do not
   hard-code those styles (see [`theming.md`](theming.md)).
 
+## Language
+
+- The texts of the components (labels, tooltips, validation messages) follow the language of
+  the page, `<html lang>`: Magma has them in `el`, `en`, `es` and `it`. A language with a
+  region gets the texts of its base language (`it-IT` and `it-CH` get `it`), and any other
+  language gets English. To let the user choose, add `mds-pref-language`.
+
 ## Styling components from outside
 
 A component's styling API is what its `AGENTS.md` documents:

package/dist/components.js

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

package/dist/components.server.js

@@ -60,6 +60,7 @@ export { MdsKeyboard } from "./mds-keyboard.server.js";
 export { MdsKpiItem } from "./mds-kpi-item.server.js";
 export { MdsKpi } from "./mds-kpi.server.js";
 export { MdsLabel } from "./mds-label.server.js";
+export { MdsLink } from "./mds-link.server.js";
 export { MdsListItem } from "./mds-list-item.server.js";
 export { MdsList } from "./mds-list.server.js";
 export { MdsMention } from "./mds-mention.server.js";

package/dist/mds-link.js

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

package/dist/mds-link.server.js

@@ -0,0 +1,21 @@
+'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 MdsLink = /*@__PURE__*/ createComponent({
+    tagName: 'mds-link',
+    properties: {
+        label: 'label',
+        href: 'href',
+        target: 'target',
+        icon: 'icon',
+        iconPosition: 'icon-position',
+        variant: 'variant',
+        tone: 'tone',
+        underline: 'underline'
+    },
+    hydrateModule: typeof window === 'undefined' ? import('@maggioli-design-system/magma/hydrate') : undefined,
+    clientModule: clientComponents.MdsLink,
+    serializeShadowRoot
+});

package/dist/types/components.d.ts

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

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

@@ -61,6 +61,7 @@ export { MdsKeyboard } from "./mds-keyboard.server.js";
 export { MdsKpiItem } from "./mds-kpi-item.server.js";
 export { MdsKpi } from "./mds-kpi.server.js";
 export { MdsLabel } from "./mds-label.server.js";
+export { MdsLink } from "./mds-link.server.js";
 export { MdsListItem } from "./mds-list-item.server.js";
 export { MdsList } from "./mds-list.server.js";
 export { MdsMention } from "./mds-mention.server.js";

package/dist/types/mds-link.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 { MdsLink as MdsLinkElement } from "@maggioli-design-system/magma/dist/components/mds-link.js";
+export type MdsLinkEvents = NonNullable<unknown>;
+export declare const MdsLink: StencilReactComponent<MdsLinkElement, MdsLinkEvents, Components.MdsLink>;

package/dist/types/mds-link.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 { MdsLink as MdsLinkElement } from "@maggioli-design-system/magma/dist/components/mds-link.js";
+export declare const serializeShadowRoot: SerializeShadowRootOptions;
+export type MdsLinkEvents = NonNullable<unknown>;
+export declare const MdsLink: StencilReactComponent<MdsLinkElement, MdsLinkEvents, Components.MdsLink>;

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@maggioli-design-system/magma-react",
-  "version": "2.4.1",
+  "version": "2.5.1",
+  "license": "MIT",
   "main": "dist/components.js",
   "module": "dist/components.js",
   "types": "dist/types/components.d.ts",
@@ -34,7 +35,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@maggioli-design-system/magma": "2.4.1",
+    "@maggioli-design-system/magma": "2.5.1",
     "@stencil/react-output-target": "1.6.5"
   },
   "repository": {