@maggioli-design-system/magma 2.0.0-beta.1 → 2.0.0-beta.2

package/dist/documentation.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-06-18T17:26:16",
+  "timestamp": "2026-06-19T18:24:43",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",
@@ -15,7 +15,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `mds-accordion-item` element/s."
+          "text": "- Add `mds-accordion-item` element/s."
         }
       ],
       "usage": {
@@ -159,7 +159,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Add `mds-accordion-item` element/s."
         }
       ],
@@ -178,7 +178,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add contents like `text string`, `HTML elements` or `components` to this slot."
+          "text": "- Add contents like `text string`, `HTML elements` or `components` to this slot."
         },
         {
           "name": "part",
@@ -419,7 +419,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Add contents like `text string`, `HTML elements` or `components` to this slot."
         }
       ],
@@ -457,7 +457,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `mds-accordion-timer-item` element/s."
+          "text": "- Add `mds-accordion-timer-item` element/s."
         }
       ],
       "usage": {
@@ -597,7 +597,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Add `mds-accordion-timer-item` element/s."
         }
       ],
@@ -616,7 +616,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add content like `text string`, `HTML elements` or `components` to this slot"
+          "text": "- Add content like `text string`, `HTML elements` or `components` to this slot"
         },
         {
           "name": "part",
@@ -956,7 +956,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Add content like `text string`, `HTML elements` or `components` to this slot"
         }
       ],
@@ -1007,7 +1007,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `text string`, `HTML elements` or `components` to this slot. Insert author information, name, role or other useful author infos."
+          "text": "- Add `text string`, `HTML elements` or `components` to this slot. Insert author information, name, role or other useful author infos."
         },
         {
           "name": "slot",
@@ -1026,12 +1026,12 @@
       "styles": [],
       "slots": [
         {
-          "name": "avatar",
-          "docs": "Insert an avatar image, it is **recommended** to add `mds-avatar` element."
+          "name": "",
+          "docs": "Add `text string`, `HTML elements` or `components` to this slot. Insert author information, name, role or other useful author infos."
         },
         {
-          "name": "default",
-          "docs": "Add `text string`, `HTML elements` or `components` to this slot. Insert author information, name, role or other useful author infos."
+          "name": "avatar",
+          "docs": "Insert an avatar image, it is **recommended** to add `mds-avatar` element."
         }
       ],
       "parts": [],
@@ -1399,7 +1399,12 @@
       "tag": "mds-avatar-stack",
       "readme": "# mds-avatar-stack\n\n\n",
       "docs": "",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "- Add `mds-avatar-stack-item` elements to display in the stack."
+        }
+      ],
       "usage": {
         "1. Description": "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.\n\n#### Semantic Behavior\n\n- **Compound parent**: It is the container half of a compound component; its visible content is the default slot of `<mds-avatar-stack-item>` children, each of which wraps an `<mds-avatar>`.\n- **Size propagation**: `size` drives the dimensions, border, and horizontal overlap of every slotted item, so the whole stack stays visually consistent without sizing each avatar individually.\n- **Overflow counter**: When `total` is set and exceeds the number of slotted children, the stack appends one extra item rendering the remainder (e.g. \"+3\"), so it can represent a larger group than it physically shows.\n- **Static composition**: Children and `total` are resolved at first render; the overflow indicator reflects the markup present then rather than reacting to later DOM changes.\n\n#### Properties & Visual Configurations\n\n- **`size`** selects the avatar scale (`'sm'`, `'md'`, `'lg'`) for the entire stack; pick it to match the surrounding density, since it governs not just avatar diameter but also the overlap offset and ring border between stacked avatars.\n- **`total`** is the logical headcount of the represented group. Set it higher than the number of slotted avatars to surface a trailing count item for the hidden members; leave it unset (or equal to the child count) to show only the avatars in the markup with no counter.\n\nThis component does not use the shared `variant` / `tone` ladders; per-avatar appearance (tone, variant, initials, image source) is configured on each `<mds-avatar-stack-item>` instead.\n",
         "2. Pattern": "Correct and idiomatic ways to use the `<mds-avatar-stack>` component, ordered from most common to most specialized. Patterns assume a working knowledge of the compound component rules documented in [`docs/COMPONENTS.md`](../../../../../../docs/COMPONENTS.md) and the generic stencil rules in [`projects/stencil/SPEC.md`](../../../../SPEC.md).\n\n#### Basic Avatar Stack\n\nThe canonical form. Slot one [`<mds-avatar-stack-item>`](../../mds-avatar-stack-item) per person directly inside the stack. Each item wraps an internal avatar; no extra wrapper elements are needed.\n\n```html\n<mds-avatar-stack>\n  <mds-avatar-stack-item initials=\"mr\" tone=\"weak\"></mds-avatar-stack-item>\n  <mds-avatar-stack-item initials=\"ac\" tone=\"weak\"></mds-avatar-stack-item>\n  <mds-avatar-stack-item initials=\"er\" tone=\"weak\"></mds-avatar-stack-item>\n</mds-avatar-stack>\n```\n\n#### Avatar Stack with Profile Images\n\nUse `src` on each item when real user photos are available. The avatar falls back to `initials` automatically if the image fails to load.\n\n```html\n<mds-avatar-stack>\n  <mds-avatar-stack-item\n    src=\"/avatars/mario-rossi.jpg\"\n    initials=\"mr\"\n    tone=\"weak\"\n  ></mds-avatar-stack-item>\n  <mds-avatar-stack-item\n    src=\"/avatars/anna-conti.jpg\"\n    initials=\"ac\"\n    tone=\"weak\"\n  ></mds-avatar-stack-item>\n  <mds-avatar-stack-item\n    src=\"/avatars/elena-ricci.jpg\"\n    initials=\"er\"\n    tone=\"weak\"\n  ></mds-avatar-stack-item>\n</mds-avatar-stack>\n```\n\n#### Sizing the Stack\n\nUse the `size` prop on the parent to scale the whole stack at once. Do not set individual sizes on the items - the parent drives dimensions, overlap, and border for all children.\n\n```html\n<!-- Small - compact lists, comment threads -->\n<mds-avatar-stack size=\"sm\">\n  <mds-avatar-stack-item initials=\"mr\" tone=\"weak\"></mds-avatar-stack-item>\n  <mds-avatar-stack-item initials=\"ac\" tone=\"weak\"></mds-avatar-stack-item>\n</mds-avatar-stack>\n\n<!-- Medium (default) -->\n<mds-avatar-stack size=\"md\">\n  <mds-avatar-stack-item initials=\"mr\" tone=\"weak\"></mds-avatar-stack-item>\n  <mds-avatar-stack-item initials=\"ac\" tone=\"weak\"></mds-avatar-stack-item>\n</mds-avatar-stack>\n\n<!-- Large - hero areas, team pages -->\n<mds-avatar-stack size=\"lg\">\n  <mds-avatar-stack-item initials=\"mr\" tone=\"weak\"></mds-avatar-stack-item>\n  <mds-avatar-stack-item initials=\"ac\" tone=\"weak\"></mds-avatar-stack-item>\n</mds-avatar-stack>\n```\n\n#### Overflow Counter via `total`\n\nWhen the represented group is larger than the number of visible avatars, set `total` to the real headcount. The component automatically appends a trailing \"+N\" badge for the hidden members.\n\n```html\n<!-- 5 visible avatars out of a team of 12: shows \"+7\" badge -->\n<mds-avatar-stack total=\"12\">\n  <mds-avatar-stack-item initials=\"mr\" tone=\"weak\"></mds-avatar-stack-item>\n  <mds-avatar-stack-item initials=\"ac\" tone=\"weak\"></mds-avatar-stack-item>\n  <mds-avatar-stack-item initials=\"er\" tone=\"weak\"></mds-avatar-stack-item>\n  <mds-avatar-stack-item initials=\"mt\" tone=\"weak\"></mds-avatar-stack-item>\n  <mds-avatar-stack-item initials=\"jb\" tone=\"weak\"></mds-avatar-stack-item>\n</mds-avatar-stack>\n```\n\n#### Per-Item Variant Colors\n\nEach [`<mds-avatar-stack-item>`](../../mds-avatar-stack-item) accepts its own `variant` to visually distinguish users when initials alone are not enough. `tone` accepts `strong` or `weak` (default).\n\n```html\n<mds-avatar-stack>\n  <mds-avatar-stack-item initials=\"mr\" variant=\"primary\" tone=\"strong\"></mds-avatar-stack-item>\n  <mds-avatar-stack-item initials=\"ac\" variant=\"success\" tone=\"weak\"></mds-avatar-stack-item>\n  <mds-avatar-stack-item initials=\"er\" variant=\"warning\" tone=\"weak\"></mds-avatar-stack-item>\n  <mds-avatar-stack-item initials=\"mt\" variant=\"info\" tone=\"weak\"></mds-avatar-stack-item>\n</mds-avatar-stack>\n```\n\n#### Size and Overflow Combined\n\nCombine `size` and `total` to produce a large, labelled stack for team-overview sections.\n\n```html\n<mds-avatar-stack size=\"lg\" total=\"25\">\n  <mds-avatar-stack-item initials=\"mr\" tone=\"weak\"></mds-avatar-stack-item>\n  <mds-avatar-stack-item initials=\"ac\" tone=\"weak\"></mds-avatar-stack-item>\n  <mds-avatar-stack-item initials=\"er\" tone=\"weak\"></mds-avatar-stack-item>\n  <mds-avatar-stack-item initials=\"mt\" tone=\"weak\"></mds-avatar-stack-item>\n</mds-avatar-stack>\n```\n\n#### Styling Customization\n\nStyle the stack only through its documented `--mds-avatar-stack-*` CSS custom properties. Set them on the host or a parent selector; use Magma color tokens via `rgb(var(--<token>))` so dark mode keeps working.\n\n```css\n/* Custom ring color and overlap for a card-hero section */\n.team-hero mds-avatar-stack {\n  --mds-avatar-stack-background: rgb(var(--variant-secondary-01));\n  --mds-avatar-stack-count-background-color: rgb(var(--tone-neutral-08));\n  --mds-avatar-stack-count-color: rgb(var(--tone-neutral-02));\n  --mds-avatar-stack-lg-offset: 2.5;\n}\n```\n",
@@ -1540,7 +1545,12 @@
           "docs": "Size of small avatars in the stack"
         }
       ],
-      "slots": [],
+      "slots": [
+        {
+          "name": "",
+          "docs": "Add `mds-avatar-stack-item` elements to display in the stack."
+        }
+      ],
       "parts": [],
       "states": [],
       "dependents": [],
@@ -1930,7 +1940,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - **Deprecated**, use the `label` property instead. Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here."
+          "text": "- **Deprecated**, use the `label` property instead. Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here."
         }
       ],
       "usage": {
@@ -2195,7 +2205,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "**Deprecated**, use the `label` property instead. Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here."
         }
       ],
@@ -2237,7 +2247,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `text string`, `HTML elements` or `components` to this slot."
+          "text": "- Add `text string`, `HTML elements` or `components` to this slot."
         },
         {
           "name": "slot",
@@ -2501,7 +2511,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -2586,12 +2596,12 @@
       ],
       "slots": [
         {
-          "name": "action",
-          "docs": "Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element."
+          "name": "",
+          "docs": "Add `text string`, `HTML elements` or `components` to this slot."
         },
         {
-          "name": "default",
-          "docs": "Add `text string`, `HTML elements` or `components` to this slot."
+          "name": "action",
+          "docs": "Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element."
         }
       ],
       "parts": [
@@ -2634,7 +2644,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - **Deprecated**, use the `label` property instead. Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here."
+          "text": "- **Deprecated**, use the `label` property instead. Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here."
         },
         {
           "name": "part",
@@ -2899,7 +2909,7 @@
       "styles": [],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "**Deprecated**, use the `label` property instead. Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here."
         }
       ],
@@ -3336,7 +3346,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `mds-breadcrumb-item` element/s."
+          "text": "- Add `mds-breadcrumb-item` element/s."
         }
       ],
       "usage": {
@@ -3398,7 +3408,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -3486,7 +3496,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Add `mds-breadcrumb-item` element/s."
         }
       ],
@@ -3687,7 +3697,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here."
+          "text": "- Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here."
         },
         {
           "name": "slot",
@@ -4377,7 +4387,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here."
         },
         {
@@ -4545,7 +4555,12 @@
       "tag": "mds-button-dropdown",
       "readme": "# mds-button-dropdown\n\n\n",
       "docs": "",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "- Add `text string`, `HTML elements` or `components` to this slot."
+        }
+      ],
       "usage": {
         "1. Description": "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.\n\n#### Semantic Behavior\n\n- **Default slot is the menu**: Whatever you place in the default slot becomes the dropdown panel content; it is not treated as the button label (the visible label comes from the `label` prop).\n- **Chevron trigger**: The second button is icon-only (chevron) and toggles the dropdown.\n- **Shared configuration**: `active`, `autoFocus`, `await`, `disabled`, `href`, `target`, `size`, `tone`, `type` and `variant` are forwarded identically to both internal buttons, so the two halves always stay visually and behaviorally in sync.\n- **Disabled / await states**: Because these flags pass through to both buttons, disabling or putting the control in an awaiting state affects the action and the trigger together.\n- **Dropdown part**: The internal dropdown is exposed as the `dropdown` shadow part for external styling of the menu surface.\n\n#### Properties & Visual Configurations\n\nThe shared `variant` / `tone` / `size` ladders are defined in [`projects/stencil/SPEC.md`](../../../../SPEC.md#tone-and-variant-system); they apply here exactly as in `<mds-button>` and are forwarded to both internal buttons. `variant` defaults to `'primary'`, `tone` defaults to `'strong'`, and `size` defaults to `'md'`.\n\n- **`label`** sets the text of the primary action button only; the chevron trigger is icon-only.\n- **`type`** defaults to `'submit'`, so inside a `<form>` the primary button submits unless set to `'button'`; switching to `'a'` (or supplying `href`) turns the buttons into links, with `target` choosing `'self'` vs `'blank'`.\n\n#### Other behavioral props\n\n- **`icon`** is an SVG filename slug from the Magma icon library, applied to the primary action button (the chevron icon on the trigger is fixed and not configurable).\n- **`truncate`** controls how an overflowing primary label is clipped, defaulting to `'word'`.\n",
         "2. Pattern": "Correct and idiomatic ways to use the `<mds-button-dropdown>` component, ordered from most common to most specialized. Patterns assume a working knowledge of the variant / tone ladders documented in [`docs/COMPONENTS.md`](../../../../../../docs/COMPONENTS.md) and the generic stencil rules in [`projects/stencil/SPEC.md`](../../../../SPEC.md).\n\n#### Basic Split Button with Menu Items\n\nThe canonical form: a `label` prop for the primary action and one or more [`mds-button`](../../mds-button) elements in the default slot as menu choices. Slot items receive `variant=\"dark\" tone=\"text\"` to stay visually neutral inside the dropdown panel.\n\n```html\n<mds-button-dropdown label=\"Salva come bozza\" variant=\"success\" tone=\"weak\">\n  <mds-button icon=\"mi/baseline/send\" variant=\"dark\" tone=\"text\" label=\"Invia subito\"></mds-button>\n  <mds-button icon=\"mi/baseline/delete\" variant=\"dark\" tone=\"text\" label=\"Elimina\"></mds-button>\n</mds-button-dropdown>\n```\n\n#### Variant and Tone for Emphasis\n\nUse `variant` to express meaning and `tone` to express weight - the same pair applies to both internal buttons automatically.\n\n```html\n<!-- High emphasis: primary action -->\n<mds-button-dropdown label=\"Pubblica\" variant=\"primary\" tone=\"strong\">\n  <mds-button variant=\"dark\" tone=\"text\" label=\"Pubblica come bozza\"></mds-button>\n  <mds-button variant=\"dark\" tone=\"text\" label=\"Pianifica pubblicazione\"></mds-button>\n</mds-button-dropdown>\n\n<!-- Status emphasis: destructive action group -->\n<mds-button-dropdown label=\"Elimina voce\" variant=\"error\" tone=\"weak\">\n  <mds-button variant=\"dark\" tone=\"text\" label=\"Elimina e archivia\"></mds-button>\n  <mds-button variant=\"dark\" tone=\"text\" label=\"Annulla eliminazione\"></mds-button>\n</mds-button-dropdown>\n```\n\n#### Sizing\n\nUse the `size` prop. Both internal buttons track it automatically.\n\n```html\n<mds-button-dropdown label=\"Azione\" size=\"sm\" variant=\"primary\" tone=\"strong\">\n  <mds-button variant=\"dark\" tone=\"text\" label=\"Opzione A\"></mds-button>\n</mds-button-dropdown>\n\n<mds-button-dropdown label=\"Azione\" size=\"md\" variant=\"primary\" tone=\"strong\">\n  <mds-button variant=\"dark\" tone=\"text\" label=\"Opzione A\"></mds-button>\n</mds-button-dropdown>\n\n<mds-button-dropdown label=\"Azione\" size=\"lg\" variant=\"primary\" tone=\"strong\">\n  <mds-button variant=\"dark\" tone=\"text\" label=\"Opzione A\"></mds-button>\n</mds-button-dropdown>\n\n<mds-button-dropdown label=\"Azione\" size=\"xl\" variant=\"primary\" tone=\"strong\">\n  <mds-button variant=\"dark\" tone=\"text\" label=\"Opzione A\"></mds-button>\n</mds-button-dropdown>\n```\n\n#### Primary Action with an Icon\n\nSupply the `icon` prop to add an icon to the primary action button. The chevron trigger icon is fixed and not configurable.\n\n```html\n<mds-button-dropdown\n  label=\"Carica documento\"\n  icon=\"mi/baseline/upload\"\n  variant=\"secondary\"\n  tone=\"weak\"\n>\n  <mds-button variant=\"dark\" tone=\"text\" label=\"Carica da URL\"></mds-button>\n  <mds-button variant=\"dark\" tone=\"text\" label=\"Carica da Drive\"></mds-button>\n</mds-button-dropdown>\n```\n\n#### Async Loading via `await`\n\nSet the `await` boolean attribute while a request is in flight. Both the action button and the chevron trigger become unavailable simultaneously. Remove the attribute when done - do not set `await=\"false\"`.\n\n```html\n<mds-button-dropdown label=\"Salvataggio in corso...\" await variant=\"primary\" tone=\"strong\">\n  <mds-button variant=\"dark\" tone=\"text\" label=\"Salva e chiudi\"></mds-button>\n  <mds-button variant=\"dark\" tone=\"text\" label=\"Salva come copia\"></mds-button>\n</mds-button-dropdown>\n```\n\n#### Disabled State\n\nThe `disabled` attribute blocks both halves of the control together.\n\n```html\n<mds-button-dropdown label=\"Invia richiesta\" disabled variant=\"primary\" tone=\"strong\">\n  <mds-button variant=\"dark\" tone=\"text\" label=\"Invia in bozza\"></mds-button>\n</mds-button-dropdown>\n```\n\n#### Hyperlink Split Button via `href`\n\nSetting `href` switches both internal buttons to anchor semantics. Use `target=\"blank\"` to open in a new tab.\n\n```html\n<mds-button-dropdown\n  label=\"Apri documento\"\n  href=\"https://example.com/doc\"\n  target=\"blank\"\n  variant=\"secondary\"\n  tone=\"outline\"\n>\n  <mds-button href=\"https://example.com/doc/edit\" target=\"blank\" variant=\"dark\" tone=\"text\" label=\"Modifica\"></mds-button>\n  <mds-button href=\"https://example.com/doc/history\" target=\"blank\" variant=\"dark\" tone=\"text\" label=\"Cronologia\"></mds-button>\n</mds-button-dropdown>\n```\n\n#### Styling Customization\n\nStyle the component through its documented `--mds-button-dropdown-*` CSS custom properties or the `dropdown` shadow part. Use Magma color tokens via `rgb(var(--<token>))` so dark mode keeps working.\n\n```css\n.custom-toolbar mds-button-dropdown {\n  --mds-button-dropdown-radius: var(--radius-md);\n  --mds-button-dropdown-window-radius: var(--radius-lg);\n}\n\n/* Style the dropdown panel surface through the documented shadow part */\n.custom-toolbar mds-button-dropdown::part(dropdown) {\n  box-shadow: var(--shadow-lg);\n}\n```\n",
@@ -5042,7 +5057,12 @@
           "docs": "Sets the border-radius of the component"
         }
       ],
-      "slots": [],
+      "slots": [
+        {
+          "name": "",
+          "docs": "Add `text string`, `HTML elements` or `components` to this slot."
+        }
+      ],
       "parts": [
         {
           "name": "dropdown",
@@ -5073,7 +5093,12 @@
       "tag": "mds-button-group",
       "readme": "# mds-button-group\n\n\n",
       "docs": "",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "- Add `mds-button` elements to this slot."
+        }
+      ],
       "usage": {
         "1. Description": "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. It is a presentation-only wrapper with no props, events, or state - its sole job is to arrange its slotted children consistently.\n\n#### Semantic Behavior\n\n- **Default slot is content**: Whatever buttons (or button-like controls) you place inside are projected as-is, in source order.\n- **Inline layout**: The group shrinks to fit its content with consistent spacing and stays inline with surrounding elements rather than spanning the full row width.\n- **No own semantics**: It exposes no role, ARIA attributes, form association, focus management, or keyboard handling of its own - accessibility and interaction live entirely in the slotted children. It is purely a visual grouping primitive.\n\n#### Properties & Visual Configurations\n\nThis component has no configurable properties. Visual outcome is determined entirely by the slotted children - typically a set of `<mds-button>` elements sharing a common `variant` / `tone` (see the shared ladder in [`projects/stencil/SPEC.md`](../../../../SPEC.md#tone-and-variant-system)) so the group reads as a cohesive cluster of actions.\n",
         "2. Pattern": "Correct and idiomatic ways to use the `<mds-button-group>` component, ordered from most common to most specialized. Patterns assume a working knowledge of the variant / tone ladders documented in [`docs/COMPONENTS.md`](../../../../../../docs/COMPONENTS.md) and the generic stencil rules in [`projects/stencil/SPEC.md`](../../../../SPEC.md).\n\n#### Toolbar of Icon-Only Actions\n\nThe primary use case. Group icon-only `<mds-button>` elements that act on the same target - a text selection, a table row, or an editor surface. Each button must carry an explicit `aria-label` because no visible label is present.\n\n```html\n<mds-button-group>\n  <mds-button icon=\"mi/baseline/format-bold\" aria-label=\"Grassetto\" variant=\"dark\" tone=\"text\"></mds-button>\n  <mds-button icon=\"mi/baseline/format-italic\" aria-label=\"Corsivo\" variant=\"dark\" tone=\"text\"></mds-button>\n  <mds-button icon=\"mi/baseline/format-underlined\" aria-label=\"Sottolineato\" variant=\"dark\" tone=\"text\"></mds-button>\n</mds-button-group>\n```\n\n#### Segmented Set of Labelled Actions\n\nUse labelled buttons when the actions benefit from visible text - for example a primary / secondary / destructive trio at the bottom of a form section.\n\n```html\n<mds-button-group>\n  <mds-button label=\"Salva\" variant=\"primary\" tone=\"strong\"></mds-button>\n  <mds-button label=\"Annulla\" variant=\"dark\" tone=\"outline\"></mds-button>\n</mds-button-group>\n```\n\n#### Mixed Emphasis Within a Group\n\nPair a high-emphasis primary button with lower-emphasis supporting actions. Keep the same `variant` family and vary only the `tone` so the group reads as a cohesive cluster, not a random set of buttons.\n\n```html\n<mds-button-group>\n  <mds-button label=\"Pubblica\" variant=\"primary\" tone=\"strong\"></mds-button>\n  <mds-button label=\"Salva come bozza\" variant=\"primary\" tone=\"outline\"></mds-button>\n  <mds-button label=\"Elimina\" variant=\"error\" tone=\"text\"></mds-button>\n</mds-button-group>\n```\n\n#### Inside a Toolbar or Action Bar\n\n`<mds-button-group>` is `inline-flex` by default, so multiple groups sit naturally beside other inline controls in a toolbar without extra CSS.\n\n```html\n<div class=\"toolbar\">\n  <mds-button-group>\n    <mds-button icon=\"mi/baseline/undo\" aria-label=\"Annulla\" variant=\"dark\" tone=\"text\"></mds-button>\n    <mds-button icon=\"mi/baseline/redo\" aria-label=\"Ripristina\" variant=\"dark\" tone=\"text\"></mds-button>\n  </mds-button-group>\n\n  <mds-button-group>\n    <mds-button icon=\"mi/baseline/format-bold\" aria-label=\"Grassetto\" variant=\"dark\" tone=\"text\"></mds-button>\n    <mds-button icon=\"mi/baseline/format-italic\" aria-label=\"Corsivo\" variant=\"dark\" tone=\"text\"></mds-button>\n    <mds-button icon=\"mi/baseline/format-underlined\" aria-label=\"Sottolineato\" variant=\"dark\" tone=\"text\"></mds-button>\n  </mds-button-group>\n</div>\n```\n\n#### Including a `<mds-button-dropdown>` in the Group\n\nThe default slot accepts any `<mds-button>` or `<mds-button-dropdown>` sibling component. Place the dropdown last or first depending on visual priority.\n\n```html\n<mds-button-group>\n  <mds-button label=\"Esporta CSV\" variant=\"secondary\" tone=\"outline\"></mds-button>\n  <mds-button-dropdown label=\"Altre opzioni\" variant=\"secondary\" tone=\"outline\">\n    <mds-list>\n      <mds-list-item label=\"Esporta PDF\"></mds-list-item>\n      <mds-list-item label=\"Esporta Excel\"></mds-list-item>\n    </mds-list>\n  </mds-button-dropdown>\n</mds-button-group>\n```\n\n#### Disabled Buttons Inside a Group\n\nDisable individual buttons with the `disabled` boolean attribute. Never use `disabled=\"false\"` - remove the attribute to re-enable. The group itself has no `disabled` prop.\n\n```html\n<mds-button-group>\n  <mds-button label=\"Approva\" variant=\"success\" tone=\"strong\"></mds-button>\n  <mds-button label=\"Rifiuta\" variant=\"error\" tone=\"outline\" disabled></mds-button>\n</mds-button-group>\n```\n",
@@ -5084,7 +5109,12 @@
       "events": [],
       "listeners": [],
       "styles": [],
-      "slots": [],
+      "slots": [
+        {
+          "name": "",
+          "docs": "Add `mds-button` elements to this slot."
+        }
+      ],
       "parts": [],
       "states": [],
       "dependents": [],
@@ -5097,13 +5127,47 @@
       "tag": "mds-calendar",
       "readme": "# mds-calendar\n\n\n",
       "docs": "",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "preselection - Add `HTML elements` or `components` shown in the calendar preselection area."
+        }
+      ],
       "usage": {
         "1. Description": "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. It is the visual engine behind `mds-input-date` and `mds-input-date-range`.\n\n#### Semantic Behavior\n\n- **Range vs. single mode**: `rangePicker` defaults to `true`. In range mode the first click sets the start, the second sets the end, and a third click resets the selection; in single mode each click replaces the prior choice.\n- **Range auto-ordering**: If the second click lands before the current start, the two endpoints are swapped so `startDate` always precedes `endDate`; setting an `endDate` earlier than `startDate` is rejected with a console warning.\n- **Hover preview**: While a range start is set, hovering over cells previews the candidate range live (range mode only).\n- **Min/max bounds**: `min` and `max` mark out-of-range day cells as disabled, blocking their selection.\n- **Multi-view navigation**: The header toggles between the day grid, a month picker, and a year picker; the year view pages in decades while the calendar view pages month by month.\n- **Localization**: Weekday names, month names, and cell titles are formatted from the host's resolved locale (`it`, `en`, `es`, `el`).\n- **Emitted events**: `mdsCalendarChange` fires with `{ startDate, endDate? }` once a selection is complete; `mdsCalendarPreselect` fires alongside it to let preselection chips re-evaluate their state.\n- **Preselection slot**: A `preselection` named slot hosts quick-pick shortcuts.\n\n#### Properties & Visual Configurations\n\nDates are exchanged as ISO 8601 strings (`YYYY-MM-DD`). `startDate` and `endDate` seed and reflect the current selection; on load, a valid `startDate` also determines which month is shown first.\n\n- **`rangePicker`** is the mode switch: leave it `true` for two-ended range selection, set it `false` for single-day pickers. When `false`, any `endDate` is ignored and cleared with a warning.\n- **`min`** / **`max`** define the selectable window; days outside it render disabled rather than being hidden.\n\nThis component does not use the shared `variant` / `tone` ladders on its host - those are defined in [`projects/stencil/SPEC.md`](../../../../SPEC.md#tone-and-variant-system) and are applied internally to the navigation buttons it renders.\n",
         "2. Pattern": "Correct and idiomatic ways to use the `<mds-calendar>` component, ordered from most common to most specialized. Patterns assume a working knowledge of the variant / tone ladders documented in [`docs/COMPONENTS.md`](../../../../../../docs/COMPONENTS.md) and the generic stencil rules in [`projects/stencil/SPEC.md`](../../../../SPEC.md).\n\n#### Single-Day Picker\n\nDisable range mode with `range-picker=\"false\"` for a plain single-date selector. `mdsCalendarChange` fires once with `{ startDate }` and no `endDate`. Seed an initial date via `start-date`.\n\n```html\n<mds-calendar range-picker=\"false\" start-date=\"2025-06-10\"></mds-calendar>\n\n<script>\n  document.querySelector('mds-calendar').addEventListener('mdsCalendarChange', (e) => {\n    console.log('Data selezionata:', e.detail.startDate);\n  });\n</script>\n```\n\n#### Range Picker (default mode)\n\n`range-picker` defaults to `true`. The first click sets the start date, the second sets the end date. A third click resets the selection. Preload a range by supplying both `start-date` and `end-date`.\n\n```html\n<mds-calendar start-date=\"2025-09-01\" end-date=\"2025-09-15\"></mds-calendar>\n\n<script>\n  document.querySelector('mds-calendar').addEventListener('mdsCalendarChange', (e) => {\n    const { startDate, endDate } = e.detail;\n    console.log('Intervallo selezionato:', startDate, '-', endDate);\n  });\n</script>\n```\n\n#### Restricting the Selectable Window with `min` / `max`\n\nPass ISO 8601 strings to `min` and `max` to mark out-of-range days as disabled. Days outside the window are not hidden - they remain visible but cannot be clicked.\n\n```html\n<mds-calendar\n  range-picker=\"false\"\n  min=\"2025-01-01\"\n  max=\"2025-12-31\"\n></mds-calendar>\n```\n\n#### Navigating to a Specific Month Programmatically\n\nUse the `updateCurrentDate` method to jump the visible month without changing the current selection. Pass any ISO date string that falls within the target month.\n\n```html\n<mds-calendar id=\"cal\" range-picker=\"false\"></mds-calendar>\n\n<script>\n  document.querySelector('#cal').updateCurrentDate('2026-03-01');\n</script>\n```\n\n#### Quick-Pick Preselection Shortcuts\n\nThe `preselection` named slot accepts shortcut components such as [`mds-input-date-range-preselection`](../../mds-input-date-range-preselection). When at least one child with the class `date-preselection--has-preselection` is present, the slot panel becomes visible automatically. `mdsCalendarPreselect` fires after each range selection so preselection chips can re-evaluate their active state.\n\n```html\n<mds-calendar start-date=\"2025-09-01\" end-date=\"2025-09-07\">\n  <mds-input-date-range-preselection\n    slot=\"preselection\"\n  ></mds-input-date-range-preselection>\n</mds-calendar>\n```\n\n#### Listening for Selection Changes\n\nListen on the documented `mdsCalendarChange` event - not the native `change` event - so the handler receives the structured `{ startDate, endDate? }` detail object directly from the Shadow DOM.\n\n```html\n<mds-calendar id=\"picker\" range-picker=\"false\"></mds-calendar>\n\n<script>\n  document.querySelector('#picker').addEventListener('mdsCalendarChange', (e) => {\n    const { startDate } = e.detail;\n    document.querySelector('#output').textContent = 'Scadenza: ' + startDate;\n  });\n</script>\n```\n\n#### Embedded inside `mds-input-date` or `mds-input-date-range`\n\n`<mds-calendar>` is the visual engine used internally by [`mds-input-date`](../../mds-input-date) and [`mds-input-date-range`](../../mds-input-date-range). In most product surfaces, reach for those higher-level components. Use `<mds-calendar>` directly only when you need a standalone always-visible date grid without an associated text input.\n\n```html\n<!-- Higher-level: input with calendar overlay -->\n<mds-input-date name=\"scadenza\" label=\"Scadenza\"></mds-input-date>\n\n<!-- Lower-level: always-visible standalone grid -->\n<mds-calendar range-picker=\"false\"></mds-calendar>\n```\n\n#### Styling Customization via CSS Custom Properties\n\nAdjust the calendar appearance only through the documented `--mds-calendar-*` CSS custom properties. Set them on the host element or a parent selector; use Magma color tokens so dark mode and high-contrast modes keep working.\n\n```css\n.booking-widget mds-calendar {\n  --mds-calendar-background: rgb(var(--tone-neutral-09));\n  --mds-calendar-border-radius: var(--radius-xl);\n  --mds-calendar-padding: var(--spacing-500);\n  --mds-calendar-cell-gap: var(--gap-100);\n  --mds-calendar-day-number-color: rgb(var(--tone-neutral-02));\n  --mds-calendar-cell-other-month-visibility: hidden;\n}\n```\n",
         "3. Antipattern": "Common incorrect uses of `<mds-calendar>`. Each entry pairs the wrong form with the right one and a one-line reason. System-wide rules (boolean-as-string, shadow piercing, Tailwind color utilities, raw native event listening) live in [`docs/COMPONENTS.md`](../../../../../../docs/COMPONENTS.md#system-level-anti-patterns) - they apply here too but are not repeated.\n\n#### Do Not Disable Range Mode with `range-picker=\"false\"` as a Quoted String\n\n`rangePicker` is a boolean prop. In HTML any non-empty attribute value is truthy, so `range-picker=\"false\"` does not turn off range mode - it keeps it on. Remove the attribute to use the default `true`, or omit the quoted value and use just the bare attribute for `true`. For `false`, remove the attribute entirely via DOM or set the property to `false` in JavaScript.\n\n```html\n<!-- 🚫 INCORRECT -->\n<mds-calendar range-picker=\"false\"></mds-calendar>\n\n<!-- ✅ CORRECT (HTML attribute approach) -->\n<!-- Range mode OFF: omit the attribute and set the property in JS -->\n<mds-calendar id=\"cal\"></mds-calendar>\n<script>\n  document.querySelector('#cal').rangePicker = false;\n</script>\n```\n\n#### Do Not Set `end-date` When `range-picker` Is Disabled\n\nWhen `rangePicker` is `false`, the component rejects `endDate` with a console warning and clears it internally. Setting both `range-picker=\"false\"` and `end-date` is contradictory and produces no visible selection for the end date.\n\n```html\n<!-- 🚫 INCORRECT -->\n<mds-calendar range-picker=\"false\" start-date=\"2025-06-01\" end-date=\"2025-06-15\"></mds-calendar>\n\n<!-- ✅ CORRECT -->\n<mds-calendar range-picker=\"false\" start-date=\"2025-06-01\"></mds-calendar>\n```\n\n#### Do Not Provide `startDate` After `endDate`\n\nDates must be chronologically ordered: `startDate` must precede `endDate`. If `startDate` is set to a value later than `endDate`, the component logs a console warning and does not apply the update. Always ensure `start-date <= end-date`.\n\n```html\n<!-- 🚫 INCORRECT -->\n<mds-calendar start-date=\"2025-12-31\" end-date=\"2025-12-01\"></mds-calendar>\n\n<!-- ✅ CORRECT -->\n<mds-calendar start-date=\"2025-12-01\" end-date=\"2025-12-31\"></mds-calendar>\n```\n\n#### Do Not Listen for the Native `change` Event\n\n`<mds-calendar>` does not bubble a native `change` event from inside its Shadow DOM. Use the documented `mdsCalendarChange` custom event so the handler reliably receives the structured `{ startDate, endDate? }` payload.\n\n```html\n<!-- 🚫 INCORRECT -->\n<mds-calendar id=\"cal\"></mds-calendar>\n<script>\n  document.querySelector('#cal').addEventListener('change', (e) => {\n    console.log(e.target.value); // undefined - wrong event\n  });\n</script>\n\n<!-- ✅ CORRECT -->\n<mds-calendar id=\"cal\"></mds-calendar>\n<script>\n  document.querySelector('#cal').addEventListener('mdsCalendarChange', (e) => {\n    console.log(e.detail.startDate, e.detail.endDate);\n  });\n</script>\n```\n\n#### Do Not Place Arbitrary Content in the `preselection` Slot\n\nThe `preselection` slot is designed for preselection shortcut components - not for arbitrary labels, headings, or free text. Placing unsupported elements there disrupts the preset-panel layout and may interfere with the `mdsCalendarPreselect` coordination event.\n\n```html\n<!-- 🚫 INCORRECT -->\n<mds-calendar>\n  <span slot=\"preselection\">Scegli un intervallo rapido</span>\n</mds-calendar>\n\n<!-- ✅ CORRECT -->\n<mds-calendar>\n  <mds-input-date-range-preselection\n    slot=\"preselection\"\n  ></mds-input-date-range-preselection>\n</mds-calendar>\n```\n\n#### Do Not Use `<mds-calendar>` as a Drop-In Replacement for `mds-input-date`\n\n`<mds-calendar>` is not form-associated and emits no `name`/`value` pair for form submission. When you need a date picker tied to a form field, use [`mds-input-date`](../../mds-input-date) (single date) or [`mds-input-date-range`](../../mds-input-date-range) (range) instead.\n\n```html\n<!-- 🚫 INCORRECT -->\n<form action=\"/prenota\" method=\"post\">\n  <mds-calendar name=\"check-in\" range-picker=\"false\"></mds-calendar>\n  <button type=\"submit\">Prenota</button>\n</form>\n\n<!-- ✅ CORRECT -->\n<form action=\"/prenota\" method=\"post\">\n  <mds-input-date name=\"check-in\" label=\"Data di arrivo\"></mds-input-date>\n  <button type=\"submit\">Prenota</button>\n</form>\n```\n\n#### Do Not Style Internals via Undocumented `::part()` Selectors\n\nThe only supported customization surface is the set of `--mds-calendar-*` CSS custom properties. Targeting shadow-DOM internals with `::part()` selectors that are not in the documentation couples your code to the implementation and will break on minor releases.\n\n```css\n/* 🚫 INCORRECT */\nmds-calendar::part(nav) {\n  background: red;\n}\nmds-calendar::part(cell) {\n  border: 1px solid blue;\n}\n\n/* ✅ CORRECT */\nmds-calendar {\n  --mds-calendar-background: rgb(var(--tone-neutral-09));\n  --mds-calendar-border-radius: var(--radius-xl);\n  --mds-calendar-cell-other-month-visibility: hidden;\n}\n```\n"
       },
       "props": [
+        {
+          "name": "disableMonthYearSelection",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "disable-month-year-selection",
+          "reflectToAttr": false,
+          "docs": "Disables switching to month or year selection views from the calendar header.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "endDate",
           "type": "null | string",
@@ -5144,6 +5208,46 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "hoverDate",
+          "type": "null | string",
+          "complexType": {
+            "original": "string | null",
+            "resolved": "null | string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "hover-date",
+          "reflectToAttr": true,
+          "docs": "Specifies the date used to preview the range selection across multiple visible calendars.",
+          "docsTags": [
+            {
+              "name": "description",
+              "text": "It's in ISO format (YYYY-MM-DD)."
+            },
+            {
+              "name": "example",
+              "text": "'2023-10-15'"
+            },
+            {
+              "name": "default",
+              "text": "null"
+            }
+          ],
+          "default": "null",
+          "values": [
+            {
+              "type": "null"
+            },
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "max",
           "type": "null | string",
@@ -5235,7 +5339,94 @@
           "mutable": false,
           "attr": "range-picker",
           "reflectToAttr": false,
-          "docs": "",
+          "docs": "Enables selecting a date range (start and end date) instead of a single date.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "true"
+            }
+          ],
+          "default": "true",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "showNextButton",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "show-next-button",
+          "reflectToAttr": false,
+          "docs": "Shows the next navigation button in the calendar header.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "true"
+            }
+          ],
+          "default": "true",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "showPreselection",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "show-preselection",
+          "reflectToAttr": false,
+          "docs": "Shows the preselection area above the calendar view.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "showPreviousButton",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "show-previous-button",
+          "reflectToAttr": false,
+          "docs": "Shows the previous navigation button in the calendar header.",
           "docsTags": [
             {
               "name": "default",
@@ -5292,6 +5483,46 @@
           "required": false,
           "getter": false,
           "setter": false
+        },
+        {
+          "name": "viewDate",
+          "type": "null | string",
+          "complexType": {
+            "original": "string | null",
+            "resolved": "null | string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "view-date",
+          "reflectToAttr": true,
+          "docs": "Specifies the date used to determine the visible month without changing the selection.",
+          "docsTags": [
+            {
+              "name": "description",
+              "text": "It's in ISO format (YYYY-MM-DD)."
+            },
+            {
+              "name": "example",
+              "text": "'2023-10-01'"
+            },
+            {
+              "name": "default",
+              "text": "null"
+            }
+          ],
+          "default": "null",
+          "values": [
+            {
+              "type": "null"
+            },
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
         }
       ],
       "methods": [
@@ -5307,7 +5538,7 @@
               {
                 "name": "date",
                 "type": "string",
-                "docs": ""
+                "docs": "the date to display, in ISO format (YYYY-MM-DD)"
               }
             ],
             "references": {
@@ -5323,11 +5554,16 @@
             {
               "name": "date",
               "type": "string",
-              "docs": ""
+              "docs": "the date to display, in ISO format (YYYY-MM-DD)"
             }
           ],
-          "docs": "",
-          "docsTags": []
+          "docs": "Sets the calendar's current date and re-renders the calendar accordingly.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "date the date to display, in ISO format (YYYY-MM-DD)"
+            }
+          ]
         },
         {
           "name": "updateLang",
@@ -5348,7 +5584,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -5364,7 +5600,35 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "",
+          "docs": "Emitted when the selected date or date range changes.",
+          "docsTags": []
+        },
+        {
+          "event": "mdsCalendarHover",
+          "detail": "{ hoverDate: string | null; }",
+          "bubbles": true,
+          "complexType": {
+            "original": "{\n    hoverDate: string | null;\n  }",
+            "resolved": "{ hoverDate: string | null; }",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the user hovers over a day, used to preview a range selection.",
+          "docsTags": []
+        },
+        {
+          "event": "mdsCalendarNavigate",
+          "detail": "{ currentDate: string; delta: number; }",
+          "bubbles": true,
+          "complexType": {
+            "original": "{\n    currentDate: string;\n    delta: number;\n  }",
+            "resolved": "{ currentDate: string; delta: number; }",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the user navigates to a different month or year.",
           "docsTags": []
         },
         {
@@ -5378,7 +5642,7 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "",
+          "docs": "Emitted when the calendar's preselection options need to be re-evaluated.",
           "docsTags": []
         }
       ],
@@ -5418,9 +5682,24 @@
           "name": "--mds-calendar-padding",
           "annotation": "prop",
           "docs": "The internal padding of the calendar container."
+        },
+        {
+          "name": "--mds-calendar-select-month-or-year-height",
+          "annotation": "prop",
+          "docs": "The height of the month/year selector in the calendar header."
+        },
+        {
+          "name": "--mds-calendar-select-month-or-year-width",
+          "annotation": "prop",
+          "docs": "The width of the month/year selector in the calendar header."
+        }
+      ],
+      "slots": [
+        {
+          "name": "preselection",
+          "docs": "Add `HTML elements` or `components` shown in the calendar preselection area."
         }
       ],
-      "slots": [],
       "parts": [],
       "states": [],
       "dependents": [
@@ -6099,7 +6378,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `text string`, `HTML elements` or `components` to this slot."
+          "text": "- Add `text string`, `HTML elements` or `components` to this slot."
         }
       ],
       "usage": {
@@ -6114,7 +6393,7 @@
       "styles": [],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Add `text string`, `HTML elements` or `components` to this slot."
         }
       ],
@@ -6133,7 +6412,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `text string`, `HTML elements` or `components` to this slot."
+          "text": "- Add `text string`, `HTML elements` or `components` to this slot."
         }
       ],
       "usage": {
@@ -6148,7 +6427,7 @@
       "styles": [],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Add `text string`, `HTML elements` or `components` to this slot."
         }
       ],
@@ -6167,7 +6446,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `text string`, `HTML elements` or `components` to this slot."
+          "text": "- Add `text string`, `HTML elements` or `components` to this slot."
         },
         {
           "name": "slot",
@@ -6186,12 +6465,12 @@
       "styles": [],
       "slots": [
         {
-          "name": "action",
-          "docs": "Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element."
+          "name": "",
+          "docs": "Add `text string`, `HTML elements` or `components` to this slot."
         },
         {
-          "name": "default",
-          "docs": "Add `text string`, `HTML elements` or `components` to this slot."
+          "name": "action",
+          "docs": "Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element."
         }
       ],
       "parts": [],
@@ -6209,7 +6488,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `HTML elements` or `components` to this slot, it is **recommended** to add `mds-img` element or other component which represents media contents."
+          "text": "- Add `HTML elements` or `components` to this slot, it is **recommended** to add `mds-img` element or other component which represents media contents."
         },
         {
           "name": "slot",
@@ -6228,12 +6507,12 @@
       "styles": [],
       "slots": [
         {
-          "name": "content",
-          "docs": "Add `text string`, `HTML elements` or `components` to this slot, contents will be shown in front of the media element."
+          "name": "",
+          "docs": "Add `HTML elements` or `components` to this slot, it is **recommended** to add `mds-img` element or other component which represents media contents."
         },
         {
-          "name": "default",
-          "docs": "Add `HTML elements` or `components` to this slot, it is **recommended** to add `mds-img` element or other component which represents media contents."
+          "name": "content",
+          "docs": "Add `text string`, `HTML elements` or `components` to this slot, contents will be shown in front of the media element."
         }
       ],
       "parts": [
@@ -6632,7 +6911,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -6785,7 +7064,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `text string`, `HTML elements` or `components` to this slot."
+          "text": "- Add `text string`, `HTML elements` or `components` to this slot."
         },
         {
           "name": "slot",
@@ -6885,12 +7164,12 @@
       ],
       "slots": [
         {
-          "name": "action",
-          "docs": "Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element."
+          "name": "",
+          "docs": "Add `text string`, `HTML elements` or `components` to this slot."
         },
         {
-          "name": "default",
-          "docs": "Add `text string`, `HTML elements` or `components` to this slot."
+          "name": "action",
+          "docs": "Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element."
         },
         {
           "name": "icon",
@@ -6929,7 +7208,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `text string`, `HTML elements` or `components` to this slot, elements will be shown when the component is triggered."
+          "text": "- Add `text string`, `HTML elements` or `components` to this slot, elements will be shown when the component is triggered."
         }
       ],
       "usage": {
@@ -7576,7 +7855,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Add `text string`, `HTML elements` or `components` to this slot, elements will be shown when the component is triggered."
         }
       ],
@@ -7643,7 +7922,7 @@
           "mutable": false,
           "attr": "name",
           "reflectToAttr": true,
-          "docs": "",
+          "docs": "Specifies which emoji to display.",
           "docsTags": [
             {
               "name": "default",
@@ -7920,7 +8199,7 @@
               {
                 "name": "duration",
                 "type": "number",
-                "docs": ""
+                "docs": "the animation duration, in seconds"
               }
             ],
             "references": {
@@ -7936,11 +8215,16 @@
             {
               "name": "duration",
               "type": "number",
-              "docs": ""
+              "docs": "the animation duration, in seconds"
             }
           ],
-          "docs": "",
-          "docsTags": []
+          "docs": "Stops the \"thinking\" animation after the given duration.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "duration the animation duration, in seconds"
+            }
+          ]
         }
       ],
       "events": [],
@@ -8098,7 +8382,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `text string`, `HTML elements` or `components` to this slot."
+          "text": "- Add `text string`, `HTML elements` or `components` to this slot."
         },
         {
           "name": "slot",
@@ -8396,12 +8680,12 @@
       ],
       "slots": [
         {
-          "name": "action",
-          "docs": "Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element."
+          "name": "",
+          "docs": "Add `text string`, `HTML elements` or `components` to this slot."
         },
         {
-          "name": "default",
-          "docs": "Add `text string`, `HTML elements` or `components` to this slot."
+          "name": "action",
+          "docs": "Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element."
         },
         {
           "name": "detail",
@@ -8878,7 +9162,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -9617,7 +9901,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -9746,7 +10030,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `mds-filter-item` element/s."
+          "text": "- Add `mds-filter-item` element/s."
         }
       ],
       "usage": {
@@ -9945,7 +10229,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Add `mds-filter-item` element/s."
         }
       ],
@@ -10211,7 +10495,7 @@
         },
         {
           "name": "slot",
-          "text": "default - Add `mds-header-bar` element/s."
+          "text": "- Add `mds-header-bar` element/s."
         },
         {
           "name": "slot",
@@ -10515,7 +10799,7 @@
               {
                 "name": "isOpened",
                 "type": "boolean",
-                "docs": ""
+                "docs": "whether the header should be opened"
               }
             ],
             "references": {
@@ -10531,11 +10815,16 @@
             {
               "name": "isOpened",
               "type": "boolean",
-              "docs": ""
+              "docs": "whether the header should be opened"
             }
           ],
-          "docs": "",
-          "docsTags": []
+          "docs": "Opens or closes the header.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "isOpened whether the header should be opened"
+            }
+          ]
         }
       ],
       "events": [
@@ -10642,7 +10931,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Add `mds-header-bar` element/s."
         },
         {
@@ -10696,7 +10985,7 @@
         },
         {
           "name": "slot",
-          "text": "default - Put contents, like logo and a small description shown on the left of the component. Add `text string`, `HTML elements` or `components` to this slot."
+          "text": "- Put contents, like logo and a small description shown on the left of the component. Add `text string`, `HTML elements` or `components` to this slot."
         },
         {
           "name": "slot",
@@ -10821,7 +11110,7 @@
               {
                 "name": "isOpened",
                 "type": "boolean",
-                "docs": ""
+                "docs": "whether the header bar should be opened"
               }
             ],
             "references": {
@@ -10837,11 +11126,16 @@
             {
               "name": "isOpened",
               "type": "boolean",
-              "docs": ""
+              "docs": "whether the header bar should be opened"
             }
           ],
-          "docs": "",
-          "docsTags": []
+          "docs": "Opens or closes the header bar.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "isOpened whether the header bar should be opened"
+            }
+          ]
         }
       ],
       "events": [
@@ -10870,7 +11164,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Put contents, like logo and a small description shown on the left of the component. Add `text string`, `HTML elements` or `components` to this slot."
         },
         {
@@ -10921,7 +11215,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `text string` to this slot, **avoid** `HTML elements` or `components`."
+          "text": "- Add `text string` to this slot, **avoid** `HTML elements` or `components`."
         }
       ],
       "usage": {
@@ -11100,7 +11394,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Add `text string` to this slot, **avoid** `HTML elements` or `components`."
         }
       ],
@@ -11140,7 +11434,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `text string`, `HTML elements` or `components` to this slot."
+          "text": "- Add `text string`, `HTML elements` or `components` to this slot."
         }
       ],
       "usage": {
@@ -11380,7 +11674,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Add `text string`, `HTML elements` or `components` to this slot."
         }
       ],
@@ -11434,7 +11728,7 @@
       "filePath": "src/components/mds-icon/mds-icon.tsx",
       "encapsulation": "shadow",
       "tag": "mds-icon",
-      "readme": "# mds-icon\n\n## How to use\n\nThis component is intented to be used only with svg files. In order to properly work, you need  to tell the component the path to the svg file directory.\n\n### Via `sessionStorage` (recommended)\n\nThe simplest way to instruct the component is using `window.sessionStorage.setItem('mdsIconSvgPath', <path-to-svg-directory>)`.\nFor example, if your svg directory is located in `assets/img/svg`, you should put the following code in your application\n\n```javascript\nwindow.sessionStorage.setItem('mdsIconSvgPath', 'assets/img/svg/');\n```\n\nThe path to the directory is based on how the `assets` are handled by the framework you are using.\n\n### Via `setSvgPath` stencil method\n\nAnother way would be, after you have called `defineCustomElements()` of this component, to instantiate a temporary MdsIcon DOM node element to call the `setSvgPath` class method\n\n```javascript\nconst mdsIconGet = async () => {\n  // Wait for the web component to be defined\n  await customElements.whenDefined('mds-icon')\n  // Create an instance of mds-icon\n  const mdsIcon = document.createElement('mds-icon')\n  // Append element to body\n  document.body.appendChild(mdsIcon)\n  // Check for method existance and set svg directory path\n  if ('setSvgPath' in mdsIcon) {\n    mdsIcon.setSvgPath('/assets/img/svg/')\n  }\n  // Remove element from body\n  document.body.removeChild(mdsIcon)\n}\n\nmdsIconGet()\n```\n\n### Via `setSvgPathStatic` static class function\n\nLast way to set it is by calling the static function present in the class. This is done after the `defineCustomElements()` call\n\n```javascript\nimport { mds_icon } from '@maggioli-design-system/mds-icon/dist/esm/mds-icon.entry'\n\nconst mdsIconGet = async () => {\n  await customElements.whenDefined('mds-icon')\n\n  mds_icon.setSvgPathStatic('/assets/img/svg/')\n}\n\nmdsIconGet()\n```\n\n## Force icon update\n\nIn some cases it may happens that when setting the path to where the SVG are located, icons still fail to load them.\n\nThis may be caused by the instatiation of `mds-icon` component happening before the setting of the directory path.\n\nTo force the update of the icons, after you have called `window.sessionStorage` or the `mds-icon` functions, you can dispatch a global event from the window with the key `mdsIconSvgPathUpdate`\n\n```javascript\nwindow.dispatchEvent(new CustomEvent('mdsIconSvgPathUpdate'))\n```\n\nOnce done this, the icons component already instantiated will be notified of the update and try to reload the icons.\n\nThis is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.\n",
+      "readme": "# mds-icon\n\n## How to use\n\nThis component is intented to be used only with svg files. In order to properly work, you need  to tell the component the path to the svg file directory.\n\n### Via `IconsSetService` (recommended)\n\nImport the `IconsSetService` singleton from the package's `services` entry point and call\n`setSvgPath()`. It updates the shared, in-memory icon path (kept on `globalThis`, so every\nbundled copy of the service agrees) and notifies all mounted icons to (re)load — **no\n`sessionStorage` involved**.\n\n```javascript\nimport { IconsSetService } from '@maggioli-design-system/magma/services';\n\nIconsSetService.setSvgPath('/assets/img/svg/');\n```\n\nThe path must be an absolute path starting with `/`, or a full URL.\nIt can be called before or after the icons are mounted.\n\n### Via `sessionStorage` (optional)\n\nYou can also point the component to the svg directory by setting a `sessionStorage` key.\nNote this is **optional and may be blocked** by some browsers, privacy/incognito modes,\nstorage partitioning, or sandboxed iframes — when blocked, prefer `IconsSetService` above.\n\n```javascript\nwindow.sessionStorage.setItem('mdsIconSvgPath', 'assets/img/svg/');\n```\n\nThe path to the directory is based on how the `assets` are handled by the framework you are using.\n\n### Via `setSvgPath` stencil method\n\nAnother way would be, after you have called `defineCustomElements()` of this component, to instantiate a temporary MdsIcon DOM node element to call the `setSvgPath` class method\n\n```javascript\nconst mdsIconGet = async () => {\n  // Wait for the web component to be defined\n  await customElements.whenDefined('mds-icon')\n  // Create an instance of mds-icon\n  const mdsIcon = document.createElement('mds-icon')\n  // Append element to body\n  document.body.appendChild(mdsIcon)\n  // Check for method existance and set svg directory path\n  if ('setSvgPath' in mdsIcon) {\n    mdsIcon.setSvgPath('/assets/img/svg/')\n  }\n  // Remove element from body\n  document.body.removeChild(mdsIcon)\n}\n\nmdsIconGet()\n```\n\n### Via `setSvgPathStatic` static class function\n\nLast way to set it is by calling the static function present in the class, after the\n`defineCustomElements()` call. This relies on a deep import whose path is not a stable\npublic API (it changes between builds), so prefer `IconsSetService` above.\n\n```javascript\nimport { mds_icon } from '@maggioli-design-system/magma/dist/esm/mds-icon.entry'\n\nconst mdsIconGet = async () => {\n  await customElements.whenDefined('mds-icon')\n\n  mds_icon.setSvgPathStatic('/assets/img/svg/')\n}\n\nmdsIconGet()\n```\n\n## Force icon update\n\nIn some cases it may happens that when setting the path to where the SVG are located, icons still fail to load them.\n\nThis may be caused by the instatiation of `mds-icon` component happening before the setting of the directory path.\n\nTo force the update of the icons, after you have called `window.sessionStorage` or the `mds-icon` functions, you can dispatch a global event from the window with the key `mdsIconSvgPathUpdate`\n\n```javascript\nwindow.dispatchEvent(new CustomEvent('mdsIconSvgPathUpdate'))\n```\n\nOnce done this, the icons component already instantiated will be notified of the update and try to reload the icons.\n\nThis is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.\n",
       "docs": "",
       "docsTags": [
         {
@@ -11443,9 +11737,9 @@
         }
       ],
       "usage": {
-        "1. Description": "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. It replaces a raw `<img>`/`<svg>` tag and centralizes how icon artwork is resolved.\n\n#### Semantic Behavior\n\n- **Decorative by default**: The icon contributes no accessible name; meaning must come from the surrounding labelled control or text.\n- **Source resolution**: `name` is interpreted three ways - a base64 `data:` SVG string is decoded inline, a raw `<svg>`/`<?xml>` markup string is used verbatim, and anything else is treated as an icon filename slug fetched from the configured SVG directory.\n- **Async load**: When `name` is a slug the icon paints once the SVG arrives; a failed fetch renders empty rather than throwing.\n- **Path configuration**: The SVG directory can be set imperatively via the `setSvgPath` instance method or the `setSvgPathStatic` static method; icons that mounted before the path was configured reload themselves once it is set.\n\n#### Properties & Visual Configurations\n\n- **`name`** is the only configurable input and is overloaded: pass an icon filename slug to pull artwork from the shared library, a base64-encoded SVG `data:` URI for inline/dynamic artwork, or a full raw SVG string when the markup is generated at runtime.\n\nThis component does not use the shared `variant` / `tone` / `size` ladders defined in [`projects/stencil/SPEC.md`](../../../../SPEC.md#tone-and-variant-system); color and dimensions are inherited from the host context via CSS (e.g. `currentColor` and font size), which is how parent components tint and scale their icons.\n",
-        "2. Pattern": "Correct and idiomatic ways to use the `<mds-icon>` component, ordered from most common to most specialized. Patterns assume a working knowledge of the icon slug conventions documented in [`projects/stencil/SPEC.md`](../../../../SPEC.md) and the catalogue in [`docs/COMPONENTS.md`](../../../../../../docs/COMPONENTS.md).\n\n#### Icon Slug from the Shared Library\n\nThe canonical form. Pass a slug string as `name`; the component fetches the matching SVG from the configured assets directory. Slugs follow the convention of the active iconsauce plugin: `mi/<variant>/<name>` for Material Icons, `mdi/<name>` for Material Design Icons, and a semantic name for the internal `mgg-icons` set.\n\n```html\n<!-- Material Icons baseline variant -->\n<mds-icon name=\"mi/baseline/search\"></mds-icon>\n\n<!-- Material Design Icons -->\n<mds-icon name=\"mdi/alien\"></mds-icon>\n\n<!-- Internal mgg-icons semantic slug -->\n<mds-icon name=\"action-email-send\"></mds-icon>\n```\n\n#### Configuring the SVG Base Path via sessionStorage\n\nSet `mdsIconSvgPath` in `sessionStorage` before any `<mds-icon>` mounts. This is the recommended one-liner: every icon instance reads it on init and falls back to this key when no path has been set programmatically.\n\n```javascript\nwindow.sessionStorage.setItem('mdsIconSvgPath', 'assets/img/svg/');\n```\n\n#### Forcing a Reload After Late Path Configuration\n\nIf icons are already in the DOM when the SVG path is set (for example, inside a lazy-loaded module), dispatch `mdsIconSvgPathUpdate` after configuring the path. Every mounted instance listens for this event and re-fetches.\n\n```javascript\nwindow.sessionStorage.setItem('mdsIconSvgPath', 'assets/img/svg/');\nwindow.dispatchEvent(new CustomEvent('mdsIconSvgPathUpdate'));\n```\n\n#### Configuring the SVG Base Path via the Instance Method\n\nUse `setSvgPath` when the path is only known at runtime and the `sessionStorage` approach is not possible (for example, in isolated web workers or testing environments).\n\n```javascript\nawait customElements.whenDefined('mds-icon');\nconst tmp = document.createElement('mds-icon');\ndocument.body.appendChild(tmp);\nif ('setSvgPath' in tmp) {\n  tmp.setSvgPath('/assets/img/svg/');\n}\ndocument.body.removeChild(tmp);\n```\n\n#### Inline Raw SVG String\n\nPass a full SVG markup string as `name` when the artwork is generated or received at runtime and does not have a slug in the library. The component uses the string verbatim - no network request is made.\n\n```html\n<mds-icon\n  name='<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12 2L2 22h20L12 2z\"/></svg>'\n></mds-icon>\n```\n\n#### Base64-encoded SVG Data URI\n\nPass a `data:image/svg+xml;base64,...` string when the icon is delivered from an API as a Base64 payload. The component decodes it inline - no external fetch occurs.\n\n```html\n<mds-icon name=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmci...\"></mds-icon>\n```\n\n#### Sizing via CSS Width\n\n`<mds-icon>` is `display: inline-flex` with `aspect-ratio: 1` and a default width of `--spacing(600)`. Override size by setting a `width` on the host - height scales automatically via the aspect ratio. Use Magma spacing tokens to stay on-grid.\n\n```html\n<!-- Small icon using a Tailwind spacing utility -->\n<mds-icon name=\"mi/baseline/info\" class=\"w-800\"></mds-icon>\n\n<!-- Large icon -->\n<mds-icon name=\"mi/baseline/star\" class=\"w-1200\"></mds-icon>\n```\n\n#### Coloring via `fill` Utility or `currentColor`\n\nThe inlined SVG inherits `currentColor` from the host element, so setting `color` on a parent or a Tailwind `fill-*` utility on the host is enough to tint the artwork. Use Magma color tokens.\n\n```html\n<!-- Tint with a Magma label token -->\n<mds-icon name=\"mi/baseline/check-circle\" class=\"fill-label-green-06\"></mds-icon>\n\n<!-- Inherit the current text color from a parent -->\n<p class=\"text-status-success-05\">\n  <mds-icon name=\"mi/baseline/check\"></mds-icon>\n  Operazione completata\n</p>\n```\n\n#### Standalone Decorative Icon Inside a Labelled Control\n\n`<mds-icon>` renders with `aria-hidden=\"true\"` on its inner element; it carries no accessible name itself. When used standalone next to visible text, no extra ARIA is needed. When used as the only visual indicator inside an interactive control, the control must supply the accessible name.\n\n```html\n<!-- Decorative: the adjacent text provides the meaning -->\n<span class=\"flex items-center gap-200\">\n  <mds-icon name=\"mi/baseline/email\"></mds-icon>\n  Invia messaggio\n</span>\n```\n\n#### Styling via `::part(svg)`\n\nThe single documented shadow part is `svg` - the `<i>` wrapper around the inlined SVG. Use `::part(svg)` only for deep SVG styling not achievable through `fill` or `color`. Keep to documented parts; undocumented internals can change on minor releases.\n\n```css\nmds-icon::part(svg) {\n  filter: drop-shadow(0 1px 2px rgb(var(--tone-kaolin-07)));\n}\n```\n",
-        "3. Antipattern": "Common incorrect uses of `<mds-icon>`. Each entry pairs the wrong form with the right one and a one-line reason. System-wide rules (boolean-as-string, shadow piercing, Tailwind color utilities, raw native event listening) live in [`docs/COMPONENTS.md`](../../../../../../docs/COMPONENTS.md#system-level-anti-patterns) - they apply here too but are not repeated.\n\n#### Do Not Use `<img>` or Inline `<svg>` Instead of `<mds-icon>`\n\nUsing a raw `<img src=\"...svg\">` or a hardcoded `<svg>` literal bypasses the iconsauce build pipeline (tree-shaking, caching, path management) and the shared theming surface. Use `<mds-icon name=\"...\">` with the slug so the icon is tree-shaken, cached, and inherits color from CSS.\n\n```html\n<!-- 🚫 INCORRECT -->\n<img src=\"/assets/img/svg/mi/baseline/add.svg\" alt=\"\">\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"...\"/></svg>\n\n<!-- ✅ CORRECT -->\n<mds-icon name=\"mi/baseline/add\"></mds-icon>\n```\n\n#### Do Not Slot `<mds-icon>` to Add an Icon to Another Component\n\n`<mds-icon>` has no slot and accepts no children. Other Magma components expose an `icon` prop that renders the SVG through the shared service with correct positioning. Slotting `<mds-icon>` into the default slot of another component is stripped or misaligned.\n\n```html\n<!-- 🚫 INCORRECT -->\n<mds-button>\n  <mds-icon name=\"mi/baseline/add\"></mds-icon>\n  Aggiungi\n</mds-button>\n\n<!-- ✅ CORRECT -->\n<mds-button label=\"Aggiungi\" icon=\"mi/baseline/add\" variant=\"secondary\" tone=\"weak\"></mds-button>\n```\n\n#### Do Not Use a Relative Path Without a Leading Slash in `setSvgPath`\n\n`setSvgPath` validates the path with a regex that requires an absolute path (starting with `/`) or a full URL. A bare relative path like `assets/svg/` throws an error. Use `sessionStorage` with a relative value or pass an absolute path.\n\n```javascript\n// 🚫 INCORRECT - throws: \"Svg path not recognize assets/svg/\"\nelement.setSvgPath('assets/svg/');\n\n// ✅ CORRECT - absolute path\nelement.setSvgPath('/assets/svg/');\n\n// ✅ CORRECT - sessionStorage accepts relative values\nwindow.sessionStorage.setItem('mdsIconSvgPath', 'assets/svg/');\n```\n\n#### Do Not Rely on `<mds-icon>` for an Accessible Label\n\n`<mds-icon>` renders its inner element with `aria-hidden=\"true\"`. An icon used as the sole indicator inside an interactive control or next to no visible text provides no accessible name by itself. The surrounding control must carry the accessible name.\n\n```html\n<!-- 🚫 INCORRECT - button has no accessible name -->\n<button>\n  <mds-icon name=\"mi/baseline/delete\"></mds-icon>\n</button>\n\n<!-- ✅ CORRECT - use mds-button with aria-label -->\n<mds-button\n  icon=\"mi/baseline/delete\"\n  aria-label=\"Elimina elemento\"\n  variant=\"error\"\n  tone=\"text\"\n></mds-button>\n```\n\n#### Do Not Pierce the Shadow DOM to Style the SVG\n\nThe only supported styling surface is `::part(svg)` and CSS custom properties (color, fill) set on the host. Using `>>>`, `/deep/`, or descendant selectors on `.icon` or internal class names couples code to the Shadow DOM structure and breaks on minor releases.\n\n```css\n/* 🚫 INCORRECT */\nmds-icon >>> .icon svg path {\n  fill: red;\n}\nmds-icon .icon {\n  transform: rotate(45deg);\n}\n\n/* ✅ CORRECT */\nmds-icon {\n  color: rgb(var(--status-error-05));\n}\nmds-icon::part(svg) {\n  transform: rotate(45deg);\n}\n```\n\n#### Do Not Add `.svg` Extension to a Slug\n\nThe slug passed to `name` must not include the `.svg` extension - the service appends it when building the fetch URL. Adding the extension causes a double-`.svg` path (`mi/baseline/close.svg.svg`) that returns a 404.\n\n```html\n<!-- 🚫 INCORRECT -->\n<mds-icon name=\"mi/baseline/close.svg\"></mds-icon>\n\n<!-- ✅ CORRECT -->\n<mds-icon name=\"mi/baseline/close\"></mds-icon>\n```\n\n#### Do Not Override Size with Fixed `width` and `height` HTML Attributes\n\n`<mds-icon>` is a custom element - HTML `width` and `height` attributes have no effect on it. Size is controlled by the CSS `width` property on the host (height follows from `aspect-ratio: 1`). Use a Tailwind width utility or a custom CSS rule.\n\n```html\n<!-- 🚫 INCORRECT - attributes are ignored -->\n<mds-icon name=\"mi/baseline/star\" width=\"32\" height=\"32\"></mds-icon>\n\n<!-- ✅ CORRECT - CSS width drives the size -->\n<mds-icon name=\"mi/baseline/star\" class=\"w-1200\"></mds-icon>\n```\n"
+        "1. Description": "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. It replaces a raw `<img>`/`<svg>` tag and centralizes how icon artwork is resolved.\n\n#### Semantic Behavior\n\n- **Decorative by default**: The icon contributes no accessible name; meaning must come from the surrounding labelled control or text.\n- **Source resolution**: `name` is interpreted three ways - a base64 `data:` SVG string is decoded inline, a raw `<svg>`/`<?xml>` markup string is used verbatim, and anything else is treated as an icon filename slug fetched from the configured SVG directory.\n- **Async load**: When `name` is a slug the icon paints once the SVG arrives; a failed fetch renders empty rather than throwing.\n- **Path configuration**: The SVG directory is set programmatically via the shared `IconsSetService.setSvgPath()` singleton (imported from `@maggioli-design-system/magma/services`), with the `mdsIconSvgPath` `sessionStorage` key as an optional fallback and the `setSvgPath` instance / `setSvgPathStatic` static methods as alternatives; icons that mounted before the path was configured reload themselves once it is set.\n\n#### Properties & Visual Configurations\n\n- **`name`** is the only configurable input and is overloaded: pass an icon filename slug to pull artwork from the shared library, a base64-encoded SVG `data:` URI for inline/dynamic artwork, or a full raw SVG string when the markup is generated at runtime.\n\nThis component does not use the shared `variant` / `tone` / `size` ladders defined in [`projects/stencil/SPEC.md`](../../../../SPEC.md#tone-and-variant-system); color and dimensions are inherited from the host context via CSS (e.g. `currentColor` and font size), which is how parent components tint and scale their icons.\n",
+        "2. Pattern": "Correct and idiomatic ways to use the `<mds-icon>` component, ordered from most common to most specialized. Patterns assume a working knowledge of the icon slug conventions documented in [`projects/stencil/SPEC.md`](../../../../SPEC.md) and the catalogue in [`docs/COMPONENTS.md`](../../../../../../docs/COMPONENTS.md).\n\n#### Icon Slug from the Shared Library\n\nThe canonical form. Pass a slug string as `name`; the component fetches the matching SVG from the configured assets directory. Slugs follow the convention of the active iconsauce plugin: `mi/<variant>/<name>` for Material Icons, `mdi/<name>` for Material Design Icons, and a semantic name for the internal `mgg-icons` set.\n\n```html\n<!-- Material Icons baseline variant -->\n<mds-icon name=\"mi/baseline/search\"></mds-icon>\n\n<!-- Material Design Icons -->\n<mds-icon name=\"mdi/alien\"></mds-icon>\n\n<!-- Internal mgg-icons semantic slug -->\n<mds-icon name=\"action-email-send\"></mds-icon>\n```\n\n#### Configuring the SVG Base Path via `IconsSetService` (recommended)\n\nImport the shared `IconsSetService` singleton from the package's `services` entry point and call `setSvgPath()`. It updates the shared, in-memory icon path - kept on `globalThis` so every bundled copy of the service (lazy chunks, `esm`/`esm-es5` variants, `dist/components`) agrees on it - and notifies all mounted icons to (re)load immediately. **No `sessionStorage` is involved**, which makes it the safest option when storage is blocked (incognito, sandboxed iframes, storage partitioning). Pass an absolute path (starting with `/`) or a full URL.\n\n```javascript\nimport { IconsSetService } from '@maggioli-design-system/magma/services';\n\nIconsSetService.setSvgPath('/assets/img/svg/');\n```\n\nIt can be called before or after the icons mount: instances mounted earlier re-fetch automatically once the path is set. Always use the exported `IconsSetService`; do not construct your own controller, which would keep a separate icon cache and listener list.\n\n#### Configuring the SVG Base Path via sessionStorage (optional)\n\nSet `mdsIconSvgPath` in `sessionStorage` before any `<mds-icon>` mounts; every icon instance falls back to this key when no path has been set programmatically. This one-liner is convenient but **may be blocked** by some browsers, privacy/incognito modes, storage partitioning, or sandboxed iframes - when that happens, use `IconsSetService.setSvgPath()` above instead.\n\n```javascript\nwindow.sessionStorage.setItem('mdsIconSvgPath', 'assets/img/svg/');\n```\n\n#### Forcing a Reload After Late Path Configuration\n\nIf icons are already in the DOM when the SVG path is set (for example, inside a lazy-loaded module), dispatch `mdsIconSvgPathUpdate` after configuring the path. Every mounted instance listens for this event and re-fetches.\n\n```javascript\nwindow.sessionStorage.setItem('mdsIconSvgPath', 'assets/img/svg/');\nwindow.dispatchEvent(new CustomEvent('mdsIconSvgPathUpdate'));\n```\n\n#### Configuring the SVG Base Path via the Instance Method\n\nAn alternative to `IconsSetService` when you already hold an `<mds-icon>` element: call its `setSvgPath` `@Method`. It delegates to the same singleton, so the effect is identical - prefer `IconsSetService` unless creating an element is more convenient (for example, in isolated testing environments).\n\n```javascript\nawait customElements.whenDefined('mds-icon');\nconst tmp = document.createElement('mds-icon');\ndocument.body.appendChild(tmp);\nif ('setSvgPath' in tmp) {\n  tmp.setSvgPath('/assets/img/svg/');\n}\ndocument.body.removeChild(tmp);\n```\n\n#### Inline Raw SVG String\n\nPass a full SVG markup string as `name` when the artwork is generated or received at runtime and does not have a slug in the library. The component uses the string verbatim - no network request is made.\n\n```html\n<mds-icon\n  name='<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12 2L2 22h20L12 2z\"/></svg>'\n></mds-icon>\n```\n\n#### Base64-encoded SVG Data URI\n\nPass a `data:image/svg+xml;base64,...` string when the icon is delivered from an API as a Base64 payload. The component decodes it inline - no external fetch occurs.\n\n```html\n<mds-icon name=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmci...\"></mds-icon>\n```\n\n#### Sizing via CSS Width\n\n`<mds-icon>` is `display: inline-flex` with `aspect-ratio: 1` and a default width of `--spacing(600)`. Override size by setting a `width` on the host - height scales automatically via the aspect ratio. Use Magma spacing tokens to stay on-grid.\n\n```html\n<!-- Small icon using a Tailwind spacing utility -->\n<mds-icon name=\"mi/baseline/info\" class=\"w-800\"></mds-icon>\n\n<!-- Large icon -->\n<mds-icon name=\"mi/baseline/star\" class=\"w-1200\"></mds-icon>\n```\n\n#### Coloring via `fill` Utility or `currentColor`\n\nThe inlined SVG inherits `currentColor` from the host element, so setting `color` on a parent or a Tailwind `fill-*` utility on the host is enough to tint the artwork. Use Magma color tokens.\n\n```html\n<!-- Tint with a Magma label token -->\n<mds-icon name=\"mi/baseline/check-circle\" class=\"fill-label-green-06\"></mds-icon>\n\n<!-- Inherit the current text color from a parent -->\n<p class=\"text-status-success-05\">\n  <mds-icon name=\"mi/baseline/check\"></mds-icon>\n  Operazione completata\n</p>\n```\n\n#### Standalone Decorative Icon Inside a Labelled Control\n\n`<mds-icon>` renders with `aria-hidden=\"true\"` on its inner element; it carries no accessible name itself. When used standalone next to visible text, no extra ARIA is needed. When used as the only visual indicator inside an interactive control, the control must supply the accessible name.\n\n```html\n<!-- Decorative: the adjacent text provides the meaning -->\n<span class=\"flex items-center gap-200\">\n  <mds-icon name=\"mi/baseline/email\"></mds-icon>\n  Invia messaggio\n</span>\n```\n\n#### Styling via `::part(svg)`\n\nThe single documented shadow part is `svg` - the `<i>` wrapper around the inlined SVG. Use `::part(svg)` only for deep SVG styling not achievable through `fill` or `color`. Keep to documented parts; undocumented internals can change on minor releases.\n\n```css\nmds-icon::part(svg) {\n  filter: drop-shadow(0 1px 2px rgb(var(--tone-kaolin-07)));\n}\n```\n",
+        "3. Antipattern": "Common incorrect uses of `<mds-icon>`. Each entry pairs the wrong form with the right one and a one-line reason. System-wide rules (boolean-as-string, shadow piercing, Tailwind color utilities, raw native event listening) live in [`docs/COMPONENTS.md`](../../../../../../docs/COMPONENTS.md#system-level-anti-patterns) - they apply here too but are not repeated.\n\n#### Do Not Use `<img>` or Inline `<svg>` Instead of `<mds-icon>`\n\nUsing a raw `<img src=\"...svg\">` or a hardcoded `<svg>` literal bypasses the iconsauce build pipeline (tree-shaking, caching, path management) and the shared theming surface. Use `<mds-icon name=\"...\">` with the slug so the icon is tree-shaken, cached, and inherits color from CSS.\n\n```html\n<!-- 🚫 INCORRECT -->\n<img src=\"/assets/img/svg/mi/baseline/add.svg\" alt=\"\">\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"...\"/></svg>\n\n<!-- ✅ CORRECT -->\n<mds-icon name=\"mi/baseline/add\"></mds-icon>\n```\n\n#### Do Not Slot `<mds-icon>` to Add an Icon to Another Component\n\n`<mds-icon>` has no slot and accepts no children. Other Magma components expose an `icon` prop that renders the SVG through the shared service with correct positioning. Slotting `<mds-icon>` into the default slot of another component is stripped or misaligned.\n\n```html\n<!-- 🚫 INCORRECT -->\n<mds-button>\n  <mds-icon name=\"mi/baseline/add\"></mds-icon>\n  Aggiungi\n</mds-button>\n\n<!-- ✅ CORRECT -->\n<mds-button label=\"Aggiungi\" icon=\"mi/baseline/add\" variant=\"secondary\" tone=\"weak\"></mds-button>\n```\n\n#### Do Not Configure the Path with a Bare Relative Value\n\n`setSvgPath` (on `IconsSetService`, the element, or the static method) treats an absolute path (starting with `/`) as relative to `window.location.origin`, and accepts full URLs. A bare relative value like `assets/svg/` is *accepted* but resolved against the **current page URL**, so it silently breaks on nested routes (e.g. `/users/42/`). Always pass an absolute path or a full URL. Only an empty/whitespace value actually throws (`Svg path not recognize …`).\n\n```javascript\n// 🚫 FRAGILE - resolved relative to the current page, breaks on nested routes\nIconsSetService.setSvgPath('assets/svg/');\n\n// ✅ CORRECT - absolute path (prefixed with the origin)\nIconsSetService.setSvgPath('/assets/svg/');\n\n// ✅ CORRECT - full URL (for example a CDN)\nIconsSetService.setSvgPath('https://cdn.example.com/svg/');\n```\n\n#### Do Not Rely on `<mds-icon>` for an Accessible Label\n\n`<mds-icon>` renders its inner element with `aria-hidden=\"true\"`. An icon used as the sole indicator inside an interactive control or next to no visible text provides no accessible name by itself. The surrounding control must carry the accessible name.\n\n```html\n<!-- 🚫 INCORRECT - button has no accessible name -->\n<button>\n  <mds-icon name=\"mi/baseline/delete\"></mds-icon>\n</button>\n\n<!-- ✅ CORRECT - use mds-button with aria-label -->\n<mds-button\n  icon=\"mi/baseline/delete\"\n  aria-label=\"Elimina elemento\"\n  variant=\"error\"\n  tone=\"text\"\n></mds-button>\n```\n\n#### Do Not Pierce the Shadow DOM to Style the SVG\n\nThe only supported styling surface is `::part(svg)` and CSS custom properties (color, fill) set on the host. Using `>>>`, `/deep/`, or descendant selectors on `.icon` or internal class names couples code to the Shadow DOM structure and breaks on minor releases.\n\n```css\n/* 🚫 INCORRECT */\nmds-icon >>> .icon svg path {\n  fill: red;\n}\nmds-icon .icon {\n  transform: rotate(45deg);\n}\n\n/* ✅ CORRECT */\nmds-icon {\n  color: rgb(var(--status-error-05));\n}\nmds-icon::part(svg) {\n  transform: rotate(45deg);\n}\n```\n\n#### Do Not Add `.svg` Extension to a Slug\n\nThe slug passed to `name` must not include the `.svg` extension - the service appends it when building the fetch URL. Adding the extension causes a double-`.svg` path (`mi/baseline/close.svg.svg`) that returns a 404.\n\n```html\n<!-- 🚫 INCORRECT -->\n<mds-icon name=\"mi/baseline/close.svg\"></mds-icon>\n\n<!-- ✅ CORRECT -->\n<mds-icon name=\"mi/baseline/close\"></mds-icon>\n```\n\n#### Do Not Override Size with Fixed `width` and `height` HTML Attributes\n\n`<mds-icon>` is a custom element - HTML `width` and `height` attributes have no effect on it. Size is controlled by the CSS `width` property on the host (height follows from `aspect-ratio: 1`). Use a Tailwind width utility or a custom CSS rule.\n\n```html\n<!-- 🚫 INCORRECT - attributes are ignored -->\n<mds-icon name=\"mi/baseline/star\" width=\"32\" height=\"32\"></mds-icon>\n\n<!-- ✅ CORRECT - CSS width drives the size -->\n<mds-icon name=\"mi/baseline/star\" class=\"w-1200\"></mds-icon>\n```\n"
       },
       "props": [
         {
@@ -11982,7 +12276,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -13167,7 +13461,7 @@
               {
                 "name": "validator",
                 "type": "(input: string) => MdsValidationErrors | null",
-                "docs": ""
+                "docs": "the validator function to add"
               }
             ],
             "references": {
@@ -13189,17 +13483,22 @@
             {
               "name": "validator",
               "type": "(input: string) => MdsValidationErrors | null",
-              "docs": ""
+              "docs": "the validator function to add"
             }
           ],
-          "docs": "",
-          "docsTags": []
+          "docs": "Adds a validator to the input.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "validator the validator function to add"
+            }
+          ]
         },
         {
           "name": "getErrors",
           "returns": {
             "type": "Promise<MdsValidationErrors | null>",
-            "docs": ""
+            "docs": "the validation errors, or `null` when valid"
           },
           "complexType": {
             "signature": "() => Promise<MdsValidationErrors | null>",
@@ -13220,8 +13519,13 @@
           },
           "signature": "getErrors() => Promise<MdsValidationErrors | null>",
           "parameters": [],
-          "docs": "",
-          "docsTags": []
+          "docs": "Returns the current validation errors, or `null` if the value is valid.",
+          "docsTags": [
+            {
+              "name": "returns",
+              "text": "the validation errors, or `null` when valid"
+            }
+          ]
         },
         {
           "name": "getInputElement",
@@ -13314,7 +13618,7 @@
               {
                 "name": "validator",
                 "type": "(input: string) => MdsValidationErrors | null",
-                "docs": ""
+                "docs": "the validator function to remove"
               }
             ],
             "references": {
@@ -13336,11 +13640,16 @@
             {
               "name": "validator",
               "type": "(input: string) => MdsValidationErrors | null",
-              "docs": ""
+              "docs": "the validator function to remove"
             }
           ],
-          "docs": "",
-          "docsTags": []
+          "docs": "Removes a previously added validator from the input.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "validator the validator function to remove"
+            }
+          ]
         },
         {
           "name": "setFocus",
@@ -13383,7 +13692,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -14001,14 +14310,14 @@
           },
           "signature": "focusInput() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Sets focus on the underlying input element.",
           "docsTags": []
         },
         {
           "name": "getErrors",
           "returns": {
             "type": "Promise<MdsValidationErrors | null>",
-            "docs": ""
+            "docs": "the validation errors, or `null` when valid"
           },
           "complexType": {
             "signature": "() => Promise<MdsValidationErrors | null>",
@@ -14029,8 +14338,13 @@
           },
           "signature": "getErrors() => Promise<MdsValidationErrors | null>",
           "parameters": [],
-          "docs": "",
-          "docsTags": []
+          "docs": "Returns the current validation errors, or `null` if the value is valid.",
+          "docsTags": [
+            {
+              "name": "returns",
+              "text": "the validation errors, or `null` when valid"
+            }
+          ]
         },
         {
           "name": "setValue",
@@ -14044,7 +14358,7 @@
               {
                 "name": "value",
                 "type": "string",
-                "docs": ""
+                "docs": "the value to set, in ISO format (YYYY-MM-DD)"
               }
             ],
             "references": {
@@ -14060,11 +14374,16 @@
             {
               "name": "value",
               "type": "string",
-              "docs": ""
+              "docs": "the value to set, in ISO format (YYYY-MM-DD)"
             }
           ],
-          "docs": "",
-          "docsTags": []
+          "docs": "Sets the input value.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "value the value to set, in ISO format (YYYY-MM-DD)"
+            }
+          ]
         },
         {
           "name": "updateLang",
@@ -14085,7 +14404,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -14101,7 +14420,7 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "",
+          "docs": "Emitted when the selected date value changes.",
           "docsTags": []
         },
         {
@@ -14229,11 +14548,24 @@
       "tag": "mds-input-date-range",
       "readme": "# mds-input-date-range\n\n\n",
       "docs": "",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "calendar-preselection - Add `HTML elements` or `components` to this slot."
+        },
+        {
+          "name": "slot",
+          "text": "start - Add `HTML elements` or `components` to this slot."
+        },
+        {
+          "name": "slot",
+          "text": "end - Add `HTML elements` or `components` to this slot."
+        }
+      ],
       "usage": {
-        "1. Description": "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-picker mode) and optional quick-pick presets. It is a form-associated compound parent that orchestrates its children rather than rendering its own native inputs.\n\n#### Semantic Behavior\n\n- **Compound parent**: Expects exactly two `<mds-input-date>` children assigned to the `start` and `end` named slots; the host keeps both in sync as a single range - it is not meant to be used with a default (text) slot.\n- **Form association**: The submitted value is a JSON string `{ startDate, endDate }`; an empty range submits no value. On form reset it restores the start/end dates present at first load.\n- **Range coercion**: When both dates are valid and the end falls before the start, the end is snapped to equal the start, so the committed range is never inverted.\n- **Min/max guard**: If `max` is earlier than `min` at load, `max` is clamped up to `min`; both bounds are forwarded to the calendar to block out-of-range selection.\n- **Commit on blur**: Leaving the component validates the range, syncs the form value, and - when both dates are valid - emits selection.\n- **Calendar selection**: Picking a complete range in the pop-up calendar emits selection and, unless `delay` is `0`, auto-closes the dropdown after the delay.\n- **Preselection sync**: Slotted `mds-input-date-range-preselection` children act as quick-picks; activating one applies its range, and any external/calendar change re-evaluates which preset (if any) is marked selected.\n- **Emitted events**: `mdsInputDateRangeSelect` fires when a full, valid range is committed; `mdsInputDateRangeValueChange` fires on blur only when either bound actually changed since the last emit.\n- **Focus management**: Clicking the host or either field label focuses the corresponding date input; a built-in calendar icon button toggles the calendar dropdown.\n- **Localization**: The \"from\"/\"to\" field labels and the calendar honor the resolved language (el/en/es/it).\n\n#### Properties & Visual Configurations\n\n- **`startDate` / `endDate`** are the controlled range bounds in ISO `YYYY-MM-DD` form; changing them externally re-syncs the slotted inputs and the calendar.\n- **`min` / `max`** define the selectable window and are enforced both in the calendar and via the coercion rules above.\n- **`delay`** is the auto-close grace period (ms) after a complete selection; set it to `0` to keep the calendar open until the user dismisses it manually.\n",
-        "2. Pattern": "Correct and idiomatic ways to use the `<mds-input-date-range>` component, ordered from most common to most specialized. Patterns assume a working knowledge of the slot conventions documented in [`docs/COMPONENTS.md`](../../../../../../docs/COMPONENTS.md) and the generic stencil rules in [`projects/stencil/SPEC.md`](../../../../SPEC.md).\n\n#### Minimal Range Picker\n\nThe canonical form. Slot one [`mds-input-date`](../../mds-input-date) as `start` and another as `end`; the host wires them together, drives the shared calendar, and handles range validation automatically.\n\n```html\n<mds-input-date-range>\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n</mds-input-date-range>\n```\n\n#### Pre-filling the Range\n\nUse the `start-date` and `end-date` attributes to set an initial selection. Both expect ISO `YYYY-MM-DD` strings. Changing them later re-syncs the slotted inputs and the calendar automatically.\n\n```html\n<mds-input-date-range start-date=\"2026-01-01\" end-date=\"2026-01-31\">\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n</mds-input-date-range>\n```\n\n#### Constraining the Selectable Window\n\nUse `min` and `max` to block out-of-window dates in both the text inputs and the calendar. Both are ISO `YYYY-MM-DD` strings.\n\n```html\n<mds-input-date-range min=\"2026-01-01\" max=\"2026-12-31\">\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n</mds-input-date-range>\n```\n\n#### Listening to Range Events\n\n`mdsInputDateRangeSelect` fires when a full, valid range is committed (calendar pick or focus-out with two valid dates). `mdsInputDateRangeValueChange` fires on blur only when either bound actually changed since the last emit. Both deliver `{ startDate, endDate }` in `event.detail`.\n\n```html\n<mds-input-date-range id=\"periodo\">\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n</mds-input-date-range>\n\n<script>\n  document.querySelector('#periodo').addEventListener('mdsInputDateRangeSelect', (e) => {\n    console.log('Intervallo selezionato:', e.detail.startDate, '-', e.detail.endDate);\n  });\n  document.querySelector('#periodo').addEventListener('mdsInputDateRangeValueChange', (e) => {\n    console.log('Valore cambiato:', e.detail.startDate, '-', e.detail.endDate);\n  });\n</script>\n```\n\n#### Form Participation\n\n`<mds-input-date-range>` is form-associated. Add `name` and place it inside a `<form>`; the submitted value is a JSON string `{ startDate, endDate }`. An empty range submits no value. Form reset restores the dates set at first load.\n\n```html\n<form action=\"/filtra\" method=\"get\">\n  <mds-input-date-range name=\"periodo\" start-date=\"2026-01-01\" end-date=\"2026-01-31\">\n    <mds-input-date slot=\"start\"></mds-input-date>\n    <mds-input-date slot=\"end\"></mds-input-date>\n  </mds-input-date-range>\n  <mds-button type=\"submit\" label=\"Applica filtro\" variant=\"primary\" tone=\"strong\"></mds-button>\n  <mds-button type=\"reset\" label=\"Reimposta\" variant=\"dark\" tone=\"outline\"></mds-button>\n</form>\n```\n\n#### Quick-Pick Preselections\n\nSlot one or more [`mds-input-date-range-preselection`](../../mds-input-date-range-preselection) elements into the component. They appear inside the calendar dropdown and act as one-click range shortcuts. The host marks the matching preset as selected whenever the current range matches.\n\n```html\n<mds-input-date-range>\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n  <mds-input-date-range-preselection start=\"2026-06-02\" end=\"2026-06-08\">\n    Questa settimana\n  </mds-input-date-range-preselection>\n  <mds-input-date-range-preselection start=\"2026-06-01\" end=\"2026-06-30\">\n    Questo mese\n  </mds-input-date-range-preselection>\n</mds-input-date-range>\n```\n\n#### Controlling the Auto-Close Delay\n\nBy default the calendar closes 500 ms after a complete range is picked. Set `delay=\"0\"` to keep it open until the user dismisses it manually, or increase the value for a longer grace period.\n\n```html\n<!-- Keep the calendar open after selection -->\n<mds-input-date-range delay=\"0\">\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n</mds-input-date-range>\n\n<!-- Longer grace period: 1 second -->\n<mds-input-date-range delay=\"1000\">\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n</mds-input-date-range>\n```\n\n#### Styling Customization\n\nStyle the component only through its documented `--mds-input-date-range-*` CSS custom properties. Set them on the host or a parent selector; use Magma color tokens via `rgb(var(--<token>))` so dark mode keeps working.\n\n```css\n.filtro-avanzato mds-input-date-range {\n  --mds-input-date-range-background: rgb(var(--tone-neutral-02));\n  --mds-input-date-range-icon-color: rgb(var(--variant-secondary-03));\n  --mds-input-date-range-fields-gap: 0 var(--spacing-400);\n}\n```\n",
-        "3. Antipattern": "Common incorrect uses of `<mds-input-date-range>`. Each entry pairs the wrong form with the right one and a one-line reason. System-wide rules (boolean-as-string, shadow piercing, Tailwind color utilities, raw native event listening) live in [`docs/COMPONENTS.md`](../../../../../../docs/COMPONENTS.md#system-level-anti-patterns) - they apply here too but are not repeated.\n\n#### Do Not Omit the Named Slots\n\nThe host renders two named slots (`start` and `end`) and wires them together internally. Without slotted `<mds-input-date>` children the component has no visible inputs and no data to commit.\n\n```html\n<!-- 🚫 INCORRECT -->\n<mds-input-date-range start-date=\"2026-01-01\" end-date=\"2026-01-31\">\n</mds-input-date-range>\n\n<!-- ✅ CORRECT -->\n<mds-input-date-range start-date=\"2026-01-01\" end-date=\"2026-01-31\">\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n</mds-input-date-range>\n```\n\n#### Do Not Slot Raw `<input>` Elements\n\nThe `start` and `end` slots expect [`mds-input-date`](../../mds-input-date) children. The host calls `.setValue()` and `.focusInput()` on the assigned element; a native `<input>` does not expose those methods and will break internal orchestration.\n\n```html\n<!-- 🚫 INCORRECT -->\n<mds-input-date-range>\n  <input type=\"date\" slot=\"start\" />\n  <input type=\"date\" slot=\"end\" />\n</mds-input-date-range>\n\n<!-- ✅ CORRECT -->\n<mds-input-date-range>\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n</mds-input-date-range>\n```\n\n#### Do Not Use Non-ISO Date Strings\n\n`startDate`, `endDate`, `min`, and `max` all require `YYYY-MM-DD` ISO format. Passing a locale-formatted string (e.g. `\"01/06/2026\"`) is silently invalid for Luxon's `DateTime.fromISO()` and leaves the range empty or unguarded.\n\n```html\n<!-- 🚫 INCORRECT -->\n<mds-input-date-range start-date=\"01/06/2026\" end-date=\"30/06/2026\" min=\"01/01/2026\">\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n</mds-input-date-range>\n\n<!-- ✅ CORRECT -->\n<mds-input-date-range start-date=\"2026-06-01\" end-date=\"2026-06-30\" min=\"2026-01-01\">\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n</mds-input-date-range>\n```\n\n#### Do Not Listen to Native `change` or `input` Events\n\nThe component emits `mdsInputDateRangeSelect` and `mdsInputDateRangeValueChange` as documented custom events. Native `change` / `input` events originate from inside the shadow DOM and do not bubble out reliably.\n\n```html\n<!-- 🚫 INCORRECT -->\n<mds-input-date-range id=\"range\">\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n</mds-input-date-range>\n<script>\n  document.querySelector('#range').addEventListener('change', handler);\n</script>\n\n<!-- ✅ CORRECT -->\n<mds-input-date-range id=\"range\">\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n</mds-input-date-range>\n<script>\n  document.querySelector('#range').addEventListener('mdsInputDateRangeSelect', handler);\n</script>\n```\n\n#### Do Not Set `delay=\"false\"` to Disable Auto-Close\n\n`delay` is a numeric prop, not a boolean. Setting it to the string `\"false\"` is truthy and parsed as `NaN`, which produces unexpected behavior. Use `delay=\"0\"` to keep the calendar open after selection.\n\n```html\n<!-- 🚫 INCORRECT -->\n<mds-input-date-range delay=\"false\">\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n</mds-input-date-range>\n\n<!-- ✅ CORRECT -->\n<mds-input-date-range delay=\"0\">\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n</mds-input-date-range>\n```\n\n#### Do Not Slot Preselection Elements Without the Component's Calendar\n\n[`mds-input-date-range-preselection`](../../mds-input-date-range-preselection) children must be direct slotted children of `<mds-input-date-range>`. Placing them outside the component, or inside a wrapper div, breaks the internal query that wires preset clicks to the range.\n\n```html\n<!-- 🚫 INCORRECT -->\n<mds-input-date-range>\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n</mds-input-date-range>\n<mds-input-date-range-preselection start=\"2026-06-01\" end=\"2026-06-30\">\n  Questo mese\n</mds-input-date-range-preselection>\n\n<!-- ✅ CORRECT -->\n<mds-input-date-range>\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n  <mds-input-date-range-preselection start=\"2026-06-01\" end=\"2026-06-30\">\n    Questo mese\n  </mds-input-date-range-preselection>\n</mds-input-date-range>\n```\n\n#### Do Not Omit `name` When Inside a Form\n\nWithout `name` the component is form-associated but submits no named field, so the date range is invisible to the server and to `FormData`.\n\n```html\n<!-- 🚫 INCORRECT -->\n<form action=\"/filtra\" method=\"get\">\n  <mds-input-date-range>\n    <mds-input-date slot=\"start\"></mds-input-date>\n    <mds-input-date slot=\"end\"></mds-input-date>\n  </mds-input-date-range>\n</form>\n\n<!-- ✅ CORRECT -->\n<form action=\"/filtra\" method=\"get\">\n  <mds-input-date-range name=\"periodo\">\n    <mds-input-date slot=\"start\"></mds-input-date>\n    <mds-input-date slot=\"end\"></mds-input-date>\n  </mds-input-date-range>\n</form>\n```\n"
+        "1. Description": "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-picker mode) and optional quick-pick presets. It is a form-associated compound parent that orchestrates its children rather than rendering its own native inputs.\n\n#### Semantic Behavior\n\n- **Compound parent**: Expects exactly two `<mds-input-date>` children assigned to the `start` and `end` named slots; the host keeps both in sync as a single range - it is not meant to be used with a default (text) slot.\n- **Form association**: The submitted value is a JSON string `{ startDate, endDate }`; an empty range submits no value. On form reset it restores the start/end dates present at first load.\n- **Range coercion**: When both dates are valid and the end falls before the start, the end is snapped to equal the start, so the committed range is never inverted.\n- **Min/max guard**: If `max` is earlier than `min` at load, `max` is clamped up to `min`; both bounds are forwarded to the calendar to block out-of-range selection.\n- **Commit on blur**: Leaving the component validates the range, syncs the form value, and - when both dates are valid - emits selection.\n- **Calendar selection**: Picking a complete range in the pop-up calendar emits selection and, unless `delay` is `0`, auto-closes the dropdown after the delay.\n- **Preselection sync**: Slotted `mds-input-date-range-preselection` children act as quick-picks; activating one applies its range, and any external/calendar change re-evaluates which preset (if any) is marked selected.\n- **Emitted events**: `mdsInputDateRangeValueChange` fires when a full, valid range is committed (calendar pick or focus-out with two valid dates) and either bound actually changed since the last emit.\n- **Focus management**: Clicking the host or either field label focuses the corresponding date input; a built-in calendar icon button toggles the calendar dropdown.\n- **Localization**: The \"from\"/\"to\" field labels and the calendar honor the resolved language (el/en/es/it).\n\n#### Properties & Visual Configurations\n\n- **`startDate` / `endDate`** are the controlled range bounds in ISO `YYYY-MM-DD` form; changing them externally re-syncs the slotted inputs and the calendar.\n- **`min` / `max`** define the selectable window and are enforced both in the calendar and via the coercion rules above.\n- **`delay`** is the auto-close grace period (ms) after a complete selection; set it to `0` to keep the calendar open until the user dismisses it manually.\n",
+        "2. Pattern": "Correct and idiomatic ways to use the `<mds-input-date-range>` component, ordered from most common to most specialized. Patterns assume a working knowledge of the slot conventions documented in [`docs/COMPONENTS.md`](../../../../../../docs/COMPONENTS.md) and the generic stencil rules in [`projects/stencil/SPEC.md`](../../../../SPEC.md).\n\n#### Minimal Range Picker\n\nThe canonical form. Slot one [`mds-input-date`](../../mds-input-date) as `start` and another as `end`; the host wires them together, drives the shared calendar, and handles range validation automatically.\n\n```html\n<mds-input-date-range>\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n</mds-input-date-range>\n```\n\n#### Pre-filling the Range\n\nUse the `start-date` and `end-date` attributes to set an initial selection. Both expect ISO `YYYY-MM-DD` strings. Changing them later re-syncs the slotted inputs and the calendar automatically.\n\n```html\n<mds-input-date-range start-date=\"2026-01-01\" end-date=\"2026-01-31\">\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n</mds-input-date-range>\n```\n\n#### Constraining the Selectable Window\n\nUse `min` and `max` to block out-of-window dates in both the text inputs and the calendar. Both are ISO `YYYY-MM-DD` strings.\n\n```html\n<mds-input-date-range min=\"2026-01-01\" max=\"2026-12-31\">\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n</mds-input-date-range>\n```\n\n#### Listening to Range Events\n\n`mdsInputDateRangeValueChange` fires when a full, valid range is committed (calendar pick or focus-out with two valid dates) and either bound actually changed since the last emit. It delivers `{ startDate, endDate }` in `event.detail`.\n\n```html\n<mds-input-date-range id=\"periodo\">\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n</mds-input-date-range>\n\n<script>\n  document.querySelector('#periodo').addEventListener('mdsInputDateRangeValueChange', (e) => {\n    console.log('Intervallo selezionato:', e.detail.startDate, '-', e.detail.endDate);\n  });\n</script>\n```\n\n#### Form Participation\n\n`<mds-input-date-range>` is form-associated. Add `name` and place it inside a `<form>`; the submitted value is a JSON string `{ startDate, endDate }`. An empty range submits no value. Form reset restores the dates set at first load.\n\n```html\n<form action=\"/filtra\" method=\"get\">\n  <mds-input-date-range name=\"periodo\" start-date=\"2026-01-01\" end-date=\"2026-01-31\">\n    <mds-input-date slot=\"start\"></mds-input-date>\n    <mds-input-date slot=\"end\"></mds-input-date>\n  </mds-input-date-range>\n  <mds-button type=\"submit\" label=\"Applica filtro\" variant=\"primary\" tone=\"strong\"></mds-button>\n  <mds-button type=\"reset\" label=\"Reimposta\" variant=\"dark\" tone=\"outline\"></mds-button>\n</form>\n```\n\n#### Quick-Pick Preselections\n\nSlot one or more [`mds-input-date-range-preselection`](../../mds-input-date-range-preselection) elements into the component. They appear inside the calendar dropdown and act as one-click range shortcuts. The host marks the matching preset as selected whenever the current range matches.\n\n```html\n<mds-input-date-range>\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n  <mds-input-date-range-preselection start=\"2026-06-02\" end=\"2026-06-08\">\n    Questa settimana\n  </mds-input-date-range-preselection>\n  <mds-input-date-range-preselection start=\"2026-06-01\" end=\"2026-06-30\">\n    Questo mese\n  </mds-input-date-range-preselection>\n</mds-input-date-range>\n```\n\n#### Controlling the Auto-Close Delay\n\nBy default the calendar closes 500 ms after a complete range is picked. Set `delay=\"0\"` to keep it open until the user dismisses it manually, or increase the value for a longer grace period.\n\n```html\n<!-- Keep the calendar open after selection -->\n<mds-input-date-range delay=\"0\">\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n</mds-input-date-range>\n\n<!-- Longer grace period: 1 second -->\n<mds-input-date-range delay=\"1000\">\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n</mds-input-date-range>\n```\n\n#### Styling Customization\n\nStyle the component only through its documented `--mds-input-date-range-*` CSS custom properties. Set them on the host or a parent selector; use Magma color tokens via `rgb(var(--<token>))` so dark mode keeps working.\n\n```css\n.filtro-avanzato mds-input-date-range {\n  --mds-input-date-range-background: rgb(var(--tone-neutral-02));\n  --mds-input-date-range-icon-color: rgb(var(--variant-secondary-03));\n  --mds-input-date-range-fields-gap: 0 var(--spacing-400);\n}\n```\n",
+        "3. Antipattern": "Common incorrect uses of `<mds-input-date-range>`. Each entry pairs the wrong form with the right one and a one-line reason. System-wide rules (boolean-as-string, shadow piercing, Tailwind color utilities, raw native event listening) live in [`docs/COMPONENTS.md`](../../../../../../docs/COMPONENTS.md#system-level-anti-patterns) - they apply here too but are not repeated.\n\n#### Do Not Omit the Named Slots\n\nThe host renders two named slots (`start` and `end`) and wires them together internally. Without slotted `<mds-input-date>` children the component has no visible inputs and no data to commit.\n\n```html\n<!-- 🚫 INCORRECT -->\n<mds-input-date-range start-date=\"2026-01-01\" end-date=\"2026-01-31\">\n</mds-input-date-range>\n\n<!-- ✅ CORRECT -->\n<mds-input-date-range start-date=\"2026-01-01\" end-date=\"2026-01-31\">\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n</mds-input-date-range>\n```\n\n#### Do Not Slot Raw `<input>` Elements\n\nThe `start` and `end` slots expect [`mds-input-date`](../../mds-input-date) children. The host calls `.setValue()` and `.focusInput()` on the assigned element; a native `<input>` does not expose those methods and will break internal orchestration.\n\n```html\n<!-- 🚫 INCORRECT -->\n<mds-input-date-range>\n  <input type=\"date\" slot=\"start\" />\n  <input type=\"date\" slot=\"end\" />\n</mds-input-date-range>\n\n<!-- ✅ CORRECT -->\n<mds-input-date-range>\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n</mds-input-date-range>\n```\n\n#### Do Not Use Non-ISO Date Strings\n\n`startDate`, `endDate`, `min`, and `max` all require `YYYY-MM-DD` ISO format. Passing a locale-formatted string (e.g. `\"01/06/2026\"`) is silently invalid for Luxon's `DateTime.fromISO()` and leaves the range empty or unguarded.\n\n```html\n<!-- 🚫 INCORRECT -->\n<mds-input-date-range start-date=\"01/06/2026\" end-date=\"30/06/2026\" min=\"01/01/2026\">\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n</mds-input-date-range>\n\n<!-- ✅ CORRECT -->\n<mds-input-date-range start-date=\"2026-06-01\" end-date=\"2026-06-30\" min=\"2026-01-01\">\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n</mds-input-date-range>\n```\n\n#### Do Not Listen to Native `change` or `input` Events\n\nThe component emits `mdsInputDateRangeValueChange` as a documented custom event. Native `change` / `input` events originate from inside the shadow DOM and do not bubble out reliably.\n\n```html\n<!-- 🚫 INCORRECT -->\n<mds-input-date-range id=\"range\">\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n</mds-input-date-range>\n<script>\n  document.querySelector('#range').addEventListener('change', handler);\n</script>\n\n<!-- ✅ CORRECT -->\n<mds-input-date-range id=\"range\">\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n</mds-input-date-range>\n<script>\n  document.querySelector('#range').addEventListener('mdsInputDateRangeValueChange', handler);\n</script>\n```\n\n#### Do Not Set `delay=\"false\"` to Disable Auto-Close\n\n`delay` is a numeric prop, not a boolean. Setting it to the string `\"false\"` is truthy and parsed as `NaN`, which produces unexpected behavior. Use `delay=\"0\"` to keep the calendar open after selection.\n\n```html\n<!-- 🚫 INCORRECT -->\n<mds-input-date-range delay=\"false\">\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n</mds-input-date-range>\n\n<!-- ✅ CORRECT -->\n<mds-input-date-range delay=\"0\">\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n</mds-input-date-range>\n```\n\n#### Do Not Slot Preselection Elements Without the Component's Calendar\n\n[`mds-input-date-range-preselection`](../../mds-input-date-range-preselection) children must be direct slotted children of `<mds-input-date-range>`. Placing them outside the component, or inside a wrapper div, breaks the internal query that wires preset clicks to the range.\n\n```html\n<!-- 🚫 INCORRECT -->\n<mds-input-date-range>\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n</mds-input-date-range>\n<mds-input-date-range-preselection start=\"2026-06-01\" end=\"2026-06-30\">\n  Questo mese\n</mds-input-date-range-preselection>\n\n<!-- ✅ CORRECT -->\n<mds-input-date-range>\n  <mds-input-date slot=\"start\"></mds-input-date>\n  <mds-input-date slot=\"end\"></mds-input-date>\n  <mds-input-date-range-preselection start=\"2026-06-01\" end=\"2026-06-30\">\n    Questo mese\n  </mds-input-date-range-preselection>\n</mds-input-date-range>\n```\n\n#### Do Not Omit `name` When Inside a Form\n\nWithout `name` the component is form-associated but submits no named field, so the date range is invisible to the server and to `FormData`.\n\n```html\n<!-- 🚫 INCORRECT -->\n<form action=\"/filtra\" method=\"get\">\n  <mds-input-date-range>\n    <mds-input-date slot=\"start\"></mds-input-date>\n    <mds-input-date slot=\"end\"></mds-input-date>\n  </mds-input-date-range>\n</form>\n\n<!-- ✅ CORRECT -->\n<form action=\"/filtra\" method=\"get\">\n  <mds-input-date-range name=\"periodo\">\n    <mds-input-date slot=\"start\"></mds-input-date>\n    <mds-input-date slot=\"end\"></mds-input-date>\n  </mds-input-date-range>\n</form>\n```\n"
       },
       "props": [
         {
@@ -14269,6 +14601,35 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "dualCalendar",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "dual-calendar",
+          "reflectToAttr": true,
+          "docs": "Enables the linked dual-calendar range picker behavior.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "endDate",
           "type": "string",
@@ -14447,7 +14808,7 @@
               {
                 "name": "event",
                 "type": "EventDate",
-                "docs": ""
+                "docs": "the preselection range to apply"
               }
             ],
             "references": {
@@ -14472,11 +14833,16 @@
             {
               "name": "event",
               "type": "EventDate",
-              "docs": ""
+              "docs": "the preselection range to apply"
             }
           ],
-          "docs": "",
-          "docsTags": []
+          "docs": "Applies the given preselection range to the input.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "event the preselection range to apply"
+            }
+          ]
         },
         {
           "name": "updateLang",
@@ -14497,25 +14863,11 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
       "events": [
-        {
-          "event": "mdsInputDateRangeSelect",
-          "detail": "{ startDate: string; endDate: string; }",
-          "bubbles": true,
-          "complexType": {
-            "original": "{\n    startDate: string;\n    endDate: string;\n  }",
-            "resolved": "{ startDate: string; endDate: string; }",
-            "references": {}
-          },
-          "cancelable": true,
-          "composed": true,
-          "docs": "",
-          "docsTags": []
-        },
         {
           "event": "mdsInputDateRangeValueChange",
           "detail": "{ startDate: string; endDate: string; }",
@@ -14527,7 +14879,7 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "",
+          "docs": "Emitted when the selected start or end date changes.",
           "docsTags": []
         }
       ],
@@ -14538,6 +14890,11 @@
           "annotation": "prop",
           "docs": "Sets the background-color of the component"
         },
+        {
+          "name": "--mds-input-date-range-calendar-width",
+          "annotation": "prop",
+          "docs": "Sets the width of each calendar shown in the dropdown"
+        },
         {
           "name": "--mds-input-date-range-fields-firefox-justify-content",
           "annotation": "prop",
@@ -14569,32 +14926,45 @@
           "docs": "Sets the variant colors of the component"
         }
       ],
-      "slots": [],
+      "slots": [
+        {
+          "name": "calendar-preselection",
+          "docs": "Add `HTML elements` or `components` to this slot."
+        },
+        {
+          "name": "end",
+          "docs": "Add `HTML elements` or `components` to this slot."
+        },
+        {
+          "name": "start",
+          "docs": "Add `HTML elements` or `components` to this slot."
+        }
+      ],
       "parts": [],
       "states": [],
       "dependents": [],
       "dependencies": [
+        "mds-calendar",
         "mds-text",
         "mds-button",
-        "mds-dropdown",
-        "mds-calendar"
+        "mds-dropdown"
       ],
       "dependencyGraph": {
         "mds-input-date-range": [
+          "mds-calendar",
           "mds-text",
           "mds-button",
-          "mds-dropdown",
-          "mds-calendar"
+          "mds-dropdown"
+        ],
+        "mds-calendar": [
+          "mds-button",
+          "mds-calendar-cell"
         ],
         "mds-button": [
           "mds-spinner",
           "mds-icon",
           "mds-text"
         ],
-        "mds-calendar": [
-          "mds-button",
-          "mds-calendar-cell"
-        ],
         "mds-calendar-cell": [
           "mds-button"
         ]
@@ -14606,7 +14976,12 @@
       "tag": "mds-input-date-range-preselection",
       "readme": "# mds-input-date-range-preselection\n\n\n",
       "docs": "",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "- Add `text string`, `HTML elements` or `components` to this slot."
+        }
+      ],
       "usage": {
         "1. Description": "The `<mds-input-date-range-preselection>` web component is a compound child of [`<mds-input-date-range>`](../../mds-input-date-range). It renders a clickable shortcut button (a quick range like \"Last 7 days\" or \"This month\") that, when activated, fills the parent's date range with a predefined `start`/`end` pair instead of requiring the user to pick dates manually on the calendar.\n\n#### Semantic Behavior\n\n- **Compound child only**: Must be placed as a direct child of `<mds-input-date-range>`; it auto-assigns itself to the parent's `calendar-preselection` slot and is not used standalone or mixed with other child types.\n- **Click drives the parent**: On click it applies its `start`/`end` range to the parent, which populates and validates the range, syncs the form value, and closes the dropdown.\n- **Selection is parent-managed**: Choosing one preselection clears the active state on its siblings and marks the active one; the parent also re-marks a preselection as selected whenever the current range matches its dates (including single-day matches where `end` is undefined).\n\n#### Properties & Visual Configurations\n\n- **`start`** (required) and **`end`**: Define the ISO date range this shortcut applies. Provide both for a true range; omit `end` to express a single-day preselection.\n- **`selected`**: Reflects whether this preselection is currently the active one. Treat it as read-only in normal use - the parent sets it; do not hand-toggle it to drive selection.\n\nThe default slot holds the human-readable label. Visual states (default, hover, selected) are themed through the `--mds-date-range-preselection-*` CSS custom properties listed in `readme.md`; the component does not expose `variant`/`tone` props of its own.\n",
         "2. Pattern": "Correct and idiomatic ways to use the `<mds-input-date-range-preselection>` component, ordered from most common to most specialized. Patterns assume a working knowledge of the variant / tone ladders documented in [`docs/COMPONENTS.md`](../../../../../../docs/COMPONENTS.md) and the generic stencil rules in [`projects/stencil/SPEC.md`](../../../../SPEC.md).\n\n#### Basic Preset Range Shortcuts\n\nPlace one or more `<mds-input-date-range-preselection>` elements as direct children of [`<mds-input-date-range>`](../../mds-input-date-range). Each element needs a `start` date (ISO format) and a human-readable label in its default slot. The component auto-assigns itself to the parent's `calendar-preselection` slot.\n\n```html\n<mds-input-date-range name=\"periodo\">\n  <mds-input-date-range-preselection start=\"2025-06-01\" end=\"2025-06-30\">\n    Questo mese\n  </mds-input-date-range-preselection>\n  <mds-input-date-range-preselection start=\"2025-05-01\" end=\"2025-05-31\">\n    Mese scorso\n  </mds-input-date-range-preselection>\n  <mds-input-date-range-preselection start=\"2025-01-01\" end=\"2025-12-31\">\n    Anno corrente\n  </mds-input-date-range-preselection>\n</mds-input-date-range>\n```\n\n#### Single-Day Shortcut (omit `end`)\n\nOmit the `end` attribute to create a single-day preselection. The parent matches it as active whenever its current range is a single day equal to `start`.\n\n```html\n<mds-input-date-range name=\"data-singola\">\n  <mds-input-date-range-preselection start=\"2025-06-05\">\n    Oggi\n  </mds-input-date-range-preselection>\n</mds-input-date-range>\n```\n\n#### Multiple Preset Windows Together\n\nGroup semantically related shortcuts - short-term, medium-term, and long-term - so users can jump to the most common reporting windows without opening the calendar. Only one item carries `selected` at a time; the parent manages it automatically.\n\n```html\n<mds-input-date-range name=\"finestra-report\">\n  <mds-input-date-range-preselection start=\"2025-05-29\" end=\"2025-06-04\">\n    Ultima settimana\n  </mds-input-date-range-preselection>\n  <mds-input-date-range-preselection start=\"2025-05-01\" end=\"2025-05-31\">\n    Ultimo mese\n  </mds-input-date-range-preselection>\n  <mds-input-date-range-preselection start=\"2025-01-01\" end=\"2025-06-30\">\n    Ultimo semestre\n  </mds-input-date-range-preselection>\n  <mds-input-date-range-preselection start=\"2024-01-01\" end=\"2024-12-31\">\n    Anno precedente\n  </mds-input-date-range-preselection>\n</mds-input-date-range>\n```\n\n#### Reading the Selected Value via Parent Events\n\nListen to the parent's `mdsInputDateRangeSelect` event to read the chosen range. The preselection component itself fires no event - the parent owns the value contract.\n\n```html\n<mds-input-date-range id=\"date-range\" name=\"periodo\">\n  <mds-input-date-range-preselection start=\"2025-06-01\" end=\"2025-06-30\">\n    Questo mese\n  </mds-input-date-range-preselection>\n</mds-input-date-range>\n\n<script>\n  document.getElementById('date-range').addEventListener('mdsInputDateRangeSelect', (e) => {\n    console.log(e.detail.startDate, e.detail.endDate);\n  });\n</script>\n```\n\n#### Styling Customization\n\nOverride the three visual states - default, hover, and selected - through the documented `--mds-date-range-preselection-*` CSS custom properties. Set them on the host element or a parent selector; use Magma color tokens with `rgb(var(--<token>))` so dark mode keeps working.\n\n```css\n.dashboard mds-input-date-range-preselection {\n  --mds-date-range-preselection-default-background: rgb(var(--tone-neutral-07) / 0.1);\n  --mds-date-range-preselection-default-border: var(--tone-neutral-06);\n  --mds-date-range-preselection-selected-background: rgb(var(--variant-secondary-03));\n  --mds-date-range-preselection-selected-border: var(--variant-secondary-03);\n  --mds-date-range-preselection-selected-color: rgb(var(--tone-neutral));\n}\n```\n",
@@ -14739,7 +15114,12 @@
           "docs": "Text color used in the selected preselection state"
         }
       ],
-      "slots": [],
+      "slots": [
+        {
+          "name": "",
+          "docs": "Add `text string`, `HTML elements` or `components` to this slot."
+        }
+      ],
       "parts": [],
       "states": [],
       "dependents": [],
@@ -14763,7 +15143,12 @@
       "tag": "mds-input-field",
       "readme": "# mds-input-field\n\n\n\nThis is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.\n",
       "docs": "This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "- Add the native input `HTML element` to this slot."
+        }
+      ],
       "usage": {
         "1. Description": "The `<mds-input-field>` web component is the form-field wrapper of the Magma Design System. It does not render an input itself; instead it decorates a slotted `<mds-input>` (or similar control) with a top label and a bottom message area, and reacts to the control's validation lifecycle. It plays the role the native `<label>` + helper-text grouping plays around an `<input>`.\n\n#### Semantic Behavior\n\n- **Compound parent**: The interactive control is supplied through the default slot; the field is not used standalone, and an empty slot throws `Mds input not found` at load.\n- **Form association**: The field participates in the surrounding `<form>` through the control it wraps, requiring no extra wiring.\n- **Validation-driven state**: It listens for the slotted control's `mdsInputValidation` event. When the control reports errors it switches `variant` to `'error'` and shows the joined error strings in `message`; otherwise it sets `variant` to `'success'` and clears `message`.\n- **Message rendering**: `message` is split on `;` and each segment is rendered as a separate caption line, so multiple validation messages stack vertically.\n\n#### Properties & Visual Configurations\n\n- **`message`** is the helper/error text shown under the control. It is author-set initially but is overwritten by the validation cycle once the slotted control emits validation, so a manually set message persists only while the control reports no errors.\n- **`variant`** drives the field's status colouring. It is not the full theme ladder: the allowed set is the input-specific variant ladder (`'ai'`, `'primary'`, plus the status values `'error'`, `'info'`, `'success'`, `'warning'`) defined in [`projects/stencil/SPEC.md`](../../../../SPEC.md#tone-and-variant-system). It defaults to `'primary'` and is normally managed automatically by validation rather than set by hand.\n",
         "2. Pattern": "Correct and idiomatic ways to use the `<mds-input-field>` component, ordered from most common to most specialized. Patterns assume a working knowledge of the variant / tone ladders documented in [`docs/COMPONENTS.md`](../../../../../../docs/COMPONENTS.md) and the generic stencil rules in [`projects/stencil/SPEC.md`](../../../../SPEC.md).\n\n#### Basic Labeled Input\n\nThe canonical form. Wrap [`mds-input`](../../mds-input) in `<mds-input-field>` and set `label` for the visible field caption. The slot must contain exactly one `<mds-input>` - the field throws at load if the slot is empty.\n\n```html\n<mds-input-field label=\"Nome e cognome\">\n  <mds-input name=\"fullName\" placeholder=\"Es: Mario Rossi\"></mds-input>\n</mds-input-field>\n```\n\n#### Input with a Static Helper Message\n\nSet `message` to show a persistent hint below the control. The message disappears once the slotted input emits its first `mdsInputValidation` event, so use this only for pre-validation guidance.\n\n```html\n<mds-input-field label=\"Codice fiscale\" message=\"16 caratteri alfanumerici\">\n  <mds-input name=\"cf\" type=\"cf\" placeholder=\"Es: MRCRSS83B21D704L\"></mds-input>\n</mds-input-field>\n```\n\n#### Validation-Driven State\n\nWhen `<mds-input>` carries validation rules (e.g. `required`, `type=\"cf\"`, or `pattern`), `<mds-input-field>` listens for `mdsInputValidation` and automatically sets `variant` to `'error'` (showing joined error messages) or `'success'` (clearing the message). No event wiring is needed - just add the validation attributes to the slotted input.\n\n```html\n<mds-input-field label=\"Indirizzo email\">\n  <mds-input name=\"email\" type=\"email\" required placeholder=\"Es: mario@esempio.it\"></mds-input>\n</mds-input-field>\n```\n\n#### Explicit Variant for Initial Status\n\nIf the field must start in a known non-default state - for example a server-side validation result rendered on page load - set `variant` directly. The validation cycle will overwrite it once the user interacts.\n\n```html\n<!-- Server returned an error before page load -->\n<mds-input-field\n  label=\"Username\"\n  variant=\"error\"\n  message=\"Username gia in uso\"\n>\n  <mds-input name=\"username\" value=\"mario.rossi\"></mds-input>\n</mds-input-field>\n```\n\n#### Field with an Action Button\n\nThe default slot accepts multiple elements. The first child grows to fill the available width; subsequent children shrink to their natural size. Use this to pair an input with a companion [`mds-button`](../../mds-button).\n\n```html\n<mds-input-field label=\"Cerca per nome\">\n  <mds-input name=\"query\" placeholder=\"Es: Mario Rossi\"></mds-input>\n  <mds-button icon=\"mi/baseline/search\" size=\"lg\" aria-label=\"Cerca\"></mds-button>\n</mds-input-field>\n```\n\n#### Inside a Form\n\n`<mds-input-field>` is form-associated and passes native form participation through to the slotted control. Place it inside a `<form>` with a submit button; the field requires no extra wiring.\n\n```html\n<form action=\"/registrazione\" method=\"post\">\n  <mds-input-field label=\"Nome\">\n    <mds-input name=\"firstName\" required placeholder=\"Es: Mario\"></mds-input>\n  </mds-input-field>\n\n  <mds-input-field label=\"Cognome\">\n    <mds-input name=\"lastName\" required placeholder=\"Es: Rossi\"></mds-input>\n  </mds-input-field>\n\n  <mds-button type=\"submit\" label=\"Registrati\" variant=\"primary\" tone=\"strong\"></mds-button>\n</form>\n```\n\n#### Styling Customization\n\nAdjust the message area colors through the two documented `--mds-input-field-*` CSS custom properties. Use Magma color tokens via `rgb(var(--<token>))` so dark mode and high-contrast modes keep working.\n\n```css\n.field-highlight mds-input-field {\n  --mds-input-field-message-color: rgb(var(--variant-primary-02));\n  --mds-input-field-message-background: rgb(var(--variant-primary-09));\n}\n```\n",
@@ -14898,7 +15283,12 @@
           "docs": "Sets the message text color of the component"
         }
       ],
-      "slots": [],
+      "slots": [
+        {
+          "name": "",
+          "docs": "Add the native input `HTML element` to this slot."
+        }
+      ],
       "parts": [
         {
           "name": "content",
@@ -15066,6 +15456,10 @@
         {
           "name": "part",
           "text": "track - The element containing the track of the input range"
+        },
+        {
+          "name": "slot",
+          "text": "- Add `text string`, `HTML elements` or `components` to this slot."
         }
       ],
       "usage": {
@@ -15327,7 +15721,12 @@
           "docs": "Sets the track width and height"
         }
       ],
-      "slots": [],
+      "slots": [
+        {
+          "name": "",
+          "docs": "Add `text string`, `HTML elements` or `components` to this slot."
+        }
+      ],
       "parts": [
         {
           "name": "header",
@@ -15363,6 +15762,10 @@
         {
           "name": "part",
           "text": "tip-top - Selects the verbose status of input on top of element"
+        },
+        {
+          "name": "slot",
+          "text": "- Add `option` `HTML elements` or `components` to this slot."
         }
       ],
       "usage": {
@@ -15775,7 +16178,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -15850,7 +16253,12 @@
           "docs": "Base color used to derive all select component visual states"
         }
       ],
-      "slots": [],
+      "slots": [
+        {
+          "name": "",
+          "docs": "Add `option` `HTML elements` or `components` to this slot."
+        }
+      ],
       "parts": [
         {
           "name": "select",
@@ -15886,7 +16294,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Put text string or elements here"
+          "text": "- Put text string or elements here"
         }
       ],
       "usage": {
@@ -16335,7 +16743,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -16502,7 +16910,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Put text string or elements here"
         }
       ],
@@ -16535,7 +16943,12 @@
       "tag": "mds-input-tip",
       "readme": "# mds-input-tip\n\n\n",
       "docs": "",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "- Add `mds-input-tip-item` elements or `components` to this slot."
+        }
+      ],
       "usage": {
         "1. Description": "The `<mds-input-tip>` web component is the floating helper container of the Magma Design System input family: it overlays an input field and reveals supplementary content (slotted `mds-input-tip-item` chips, hints, or actions) that expands when the field becomes active. It is a presentational compound child positioned against its parent input rather than a standalone control.\n\n#### Semantic Behavior\n\n- **Floating overlay**: The tip floats over the parent input's edge without intercepting interaction; slotted children opt back into pointer events as needed.\n- **Active expansion**: Setting `active` slides the tip into its expanded position; clearing it collapses the tip back flush with the input.\n- **Empty collapse**: When the host has no slotted content it is hidden entirely, so an unused tip occupies no space.\n- **Default slot is content**: The single default slot carries the tip's arbitrary children; there are no named slots, events, form association, or focus management of its own.\n\n#### Properties & Visual Configurations\n\n- **`active`** drives the expanded vs. collapsed state and is normally toggled by the parent input in response to focus, not set manually.\n- **`position`** selects which edge of the input the tip anchors to and therefore the direction it expands: `'top'` (default) sits above the field, `'bottom'` sits below it.\n",
         "2. Pattern": "Correct and idiomatic ways to use the `<mds-input-tip>` component, ordered from most common to most specialized. Patterns assume a working knowledge of the compound component rules in [`docs/COMPONENTS.md`](../../../../../../docs/COMPONENTS.md) and the generic stencil rules in [`projects/stencil/SPEC.md`](../../../../SPEC.md).\n\n`<mds-input-tip>` is an internal compound child used inside [`mds-input`](../../mds-input), [`mds-input-date`](../../mds-input-date), and [`mds-input-select`](../../mds-input-select). It is not meant for standalone use. The patterns below show what the parent components render internally, which is useful when building a custom input wrapper that needs the same behavior.\n\n#### Status Chips Above the Field (position=\"top\")\n\nPosition the tip above the input with `position=\"top\"` (the default). Slot [`mds-input-tip-item`](../../mds-input-tip-item) children for each status badge to show. The `active` prop slides the tip into its expanded position when the field is focused.\n\n```html\n<div style=\"position: relative;\">\n  <mds-input-tip position=\"top\" active>\n    <mds-input-tip-item variant=\"required\"></mds-input-tip-item>\n  </mds-input-tip>\n  <input type=\"text\" placeholder=\"Campo obbligatorio\" />\n</div>\n```\n\n#### Hint and Counter Below the Field (position=\"bottom\")\n\nUse `position=\"bottom\"` to anchor the tip below the input. This is the canonical placement for inline helper text and character-count feedback.\n\n```html\n<div style=\"position: relative;\">\n  <mds-input-tip position=\"bottom\" active>\n    <mds-input-tip-item variant=\"text\">\n      Inserisci almeno 8 caratteri\n    </mds-input-tip-item>\n    <mds-input-tip-item variant=\"count-incomplete\">\n      3 / 8\n    </mds-input-tip-item>\n  </mds-input-tip>\n  <input type=\"text\" />\n</div>\n```\n\n#### Toggling the Active State on Focus\n\nDrive `active` from a focus/blur handler to animate the tip in and out. Setting `active` slides the tip; removing it (or leaving it unset) collapses it back flush with the input edge.\n\n```html\n<div style=\"position: relative;\" id=\"wrapper\">\n  <mds-input-tip position=\"top\" id=\"tip\">\n    <mds-input-tip-item variant=\"required\"></mds-input-tip-item>\n  </mds-input-tip>\n  <input\n    type=\"text\"\n    id=\"field\"\n    placeholder=\"Nome utente\"\n  />\n</div>\n\n<script>\n  const field = document.getElementById('field');\n  const tip   = document.getElementById('tip');\n  field.addEventListener('focus', () => { tip.active = true; });\n  field.addEventListener('blur',  () => { tip.active = undefined; });\n</script>\n```\n\n#### Disabled and Read-only State Chips\n\nWhen the parent input is disabled or read-only, pass the matching `variant` to show a system-translated label. The `expanded` prop on the item keeps it permanently visible even without focus.\n\n```html\n<div style=\"position: relative;\">\n  <mds-input-tip position=\"top\">\n    <mds-input-tip-item variant=\"disabled\" expanded></mds-input-tip-item>\n  </mds-input-tip>\n  <input type=\"text\" disabled placeholder=\"Campo disabilitato\" />\n</div>\n```\n\n#### Required-field Success Feedback\n\nSwitch the `<mds-input-tip-item>` variant to `required-success` once the field passes validation. The item renders a checkmark icon instead of the \"obbligatorio\" label.\n\n```html\n<div style=\"position: relative;\">\n  <mds-input-tip position=\"top\" active>\n    <mds-input-tip-item variant=\"required-success\" expanded></mds-input-tip-item>\n  </mds-input-tip>\n  <input type=\"text\" value=\"Valore valido\" />\n</div>\n```\n\n#### Multiple Tip Items in One Container\n\nSlot several `<mds-input-tip-item>` elements inside a single `<mds-input-tip>`. The container lays them out in a row and hides itself automatically when all slots are empty.\n\n```html\n<div style=\"position: relative;\">\n  <mds-input-tip position=\"bottom\" active>\n    <mds-input-tip-item variant=\"text\">\n      Solo lettere e numeri\n    </mds-input-tip-item>\n    <mds-input-tip-item variant=\"count-almost\">\n      18 / 20\n    </mds-input-tip-item>\n  </mds-input-tip>\n  <input type=\"text\" />\n</div>\n```\n\n#### CSS Customization\n\nStyle the tip only through the documented `--mds-input-tip-*` CSS custom properties. Set them on the host or a parent selector; use Magma tokens via `rgb(var(--<token>))` so dark mode keeps working.\n\n```css\n.custom-input-wrapper mds-input-tip {\n  --mds-input-tip-background: rgb(var(--tone-neutral-02));\n  --mds-input-tip-vertical-offset: var(--spacing-200);\n  --mds-input-tip-horizontal-offset: var(--spacing-300);\n  --mds-input-tip-horizontal-offset-focused: 4px;\n}\n```\n",
@@ -16649,7 +17062,12 @@
           "docs": "Vertical offset of the input tip"
         }
       ],
-      "slots": [],
+      "slots": [
+        {
+          "name": "",
+          "docs": "Add `mds-input-tip-item` elements or `components` to this slot."
+        }
+      ],
       "parts": [],
       "states": [],
       "dependents": [
@@ -16676,7 +17094,12 @@
       "tag": "mds-input-tip-item",
       "readme": "# mds-input-tip-item\n\n\n",
       "docs": "",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "- Add `text string`, `HTML elements` or `components` to this slot."
+        }
+      ],
       "usage": {
         "1. Description": "The `<mds-input-tip-item>` web component is a single contextual hint row rendered inside the [`<mds-input-tip>`](../../mds-input-tip) container. It represents one validation/status message of a form field (required, read-only, disabled, character count, or free text) and is orchestrated by the input components (`<mds-input>`, `<mds-input-date>`, `<mds-input-select>`) that own the tip; it has no standalone HTML equivalent.\n\n#### Semantic Behavior\n\n- **Compound child only**: It must be a direct slot child of `<mds-input-tip>` and is not used standalone; the host input decides which items exist and toggles their `expanded` state.\n- **Variant drives the entire render**: The `variant` is not a style modifier but a content switch - each value produces a different body (slotted text, a localized status label, or the `done` success icon), so changing `variant` changes what the item shows, not just how it looks.\n- **Self-localized labels**: For `required`, `readonly`, and `disabled` the visible text comes from the component's own i18n dictionary (en/it/es/el); these variants ignore slotted content. `text` and the `count-*` variants instead render the default slot provided by the parent.\n- **Expanded toggling**: `expanded` is driven by the parent (often bound to the field's focus state).\n- **No interactivity**: It carries no role, ARIA state, focus handling, or emitted events - it is a passive display row whose state is fully driven from above.\n\n#### Properties & Visual Configurations\n\n- **`variant`** is the only meaningful prop and selects both the message type and its source of text. Use `required` / `required-success` for required-field feedback (the success value swaps the label for a checkmark icon), `readonly` and `disabled` for field-state notices (auto-labeled from the dictionary), `text` for an arbitrary slotted hint, and the `count-*` family (`count-empty`, `count-incomplete`, `count-almost`, `count-almost-full`, `count-full`) for character-count feedback whose label text is slotted in by the parent. The full enumerated list lives in `readme.md` and the typed dictionary under `meta/`.\n- **`expanded`** controls visibility/expansion within the tip and is intended to be driven by the parent rather than set by hand.\n\nStyling hooks (`--mds-input-tip-item-background`, `--mds-input-tip-item-color`, `--mds-input-tip-item-icon-color`) are documented in `readme.md`.\n",
         "2. Pattern": "Correct and idiomatic ways to use the `<mds-input-tip-item>` component, ordered from most common to most specialized. Patterns assume a working knowledge of the variant system documented in [`docs/COMPONENTS.md`](../../../../../../docs/COMPONENTS.md) and the generic stencil rules in [`projects/stencil/SPEC.md`](../../../../SPEC.md).\n\n#### Required-Field Hint\n\nThe most common use. Place one `<mds-input-tip-item variant=\"required\">` inside the parent [`<mds-input-tip>`](../../mds-input-tip) to signal that the field is mandatory. The localized label (\"Required\" / \"Obbligatorio\" / ...) comes from the component's own i18n dictionary - do not slot text.\n\n```html\n<mds-input-tip active>\n  <mds-input-tip-item variant=\"required\" expanded></mds-input-tip-item>\n</mds-input-tip>\n```\n\n#### Required Field Satisfied (Success State)\n\nWhen the required condition is met, switch to `variant=\"required-success\"`. The text label is replaced by a checkmark icon - no slot is needed or expected.\n\n```html\n<mds-input-tip active>\n  <mds-input-tip-item variant=\"required-success\" expanded></mds-input-tip-item>\n</mds-input-tip>\n```\n\n#### Read-Only and Disabled State Notices\n\nUse `variant=\"readonly\"` or `variant=\"disabled\"` to communicate field-state context. Both are self-labeled from the i18n dictionary and ignore any slotted content.\n\n```html\n<!-- Campo in sola lettura -->\n<mds-input-tip active>\n  <mds-input-tip-item variant=\"readonly\" expanded></mds-input-tip-item>\n</mds-input-tip>\n\n<!-- Campo disabilitato -->\n<mds-input-tip active>\n  <mds-input-tip-item variant=\"disabled\" expanded></mds-input-tip-item>\n</mds-input-tip>\n```\n\n#### Arbitrary Hint Text via `variant=\"text\"`\n\nUse `variant=\"text\"` when you need to show a free-form helper message. Slot the text string directly; no nested HTML is accepted.\n\n```html\n<mds-input-tip active>\n  <mds-input-tip-item variant=\"text\" expanded>Inserisci il tuo nome completo</mds-input-tip-item>\n</mds-input-tip>\n```\n\n#### Character-Count Feedback\n\nThe `count-*` variants express how full a character-limited field is. The parent input computes the label text and slots it in; you choose the variant that matches the fill stage.\n\n```html\n<mds-input-tip active>\n  <!-- Campo vuoto -->\n  <mds-input-tip-item variant=\"count-empty\" expanded>0 / 100</mds-input-tip-item>\n\n  <!-- In corso, entro i limiti -->\n  <mds-input-tip-item variant=\"count-incomplete\" expanded>42 / 100</mds-input-tip-item>\n\n  <!-- Vicino al limite -->\n  <mds-input-tip-item variant=\"count-almost\" expanded>80 / 100</mds-input-tip-item>\n\n  <!-- Quasi al limite -->\n  <mds-input-tip-item variant=\"count-almost-full\" expanded>95 / 100</mds-input-tip-item>\n\n  <!-- Limite raggiunto -->\n  <mds-input-tip-item variant=\"count-full\" expanded>100 / 100</mds-input-tip-item>\n</mds-input-tip>\n```\n\n#### Toggling Visibility with `expanded`\n\nThe `expanded` attribute controls the reveal animation. Drive it from the parent's logic - for example, show the required hint only while the field is focused.\n\n```html\n<!-- Visibile: campo focalizzato -->\n<mds-input-tip-item variant=\"required\" expanded></mds-input-tip-item>\n\n<!-- Nascosto: campo non focalizzato (rimuovere l'attributo, non impostarlo a false) -->\n<mds-input-tip-item variant=\"required\"></mds-input-tip-item>\n```\n\n#### Styling Customization\n\nOverride the visual appearance only through the three documented CSS custom properties. Set them on the host element or a parent selector; use Magma color tokens via `rgb(var(--<token>))` so dark mode keeps working.\n\n```css\n.campo-personalizzato mds-input-tip-item {\n  --mds-input-tip-item-background: rgb(var(--variant-primary-05));\n  --mds-input-tip-item-color: rgb(var(--variant-primary-01));\n  --mds-input-tip-item-icon-color: rgb(var(--variant-primary-02));\n}\n```\n",
@@ -16806,7 +17229,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -16829,7 +17252,12 @@
           "docs": "Sets the icon color fill of the tip item."
         }
       ],
-      "slots": [],
+      "slots": [
+        {
+          "name": "",
+          "docs": "Add `text string`, `HTML elements` or `components` to this slot."
+        }
+      ],
       "parts": [],
       "states": [],
       "dependents": [
@@ -17127,7 +17555,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -17241,7 +17669,12 @@
       "tag": "mds-keyboard",
       "readme": "# mds-keyboard\n\n\n",
       "docs": "",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "- Add `mds-keyboard-key` elements or `components` to this slot."
+        }
+      ],
       "usage": {
         "1. Description": "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. It has no direct HTML equivalent; it visualizes a key combination (e.g. `Ctrl + C`) and can optionally let the user verify that combination by typing it.\n\n#### Semantic Behavior\n\n- **Default slot is the key sequence**: The component projects slotted `<mds-keyboard-key>` elements and automatically inserts a `+` separator between consecutive keys.\n- **Compound parent**: It reads each child key's `name` to build the expected combination; during a test the children are toggled to their `pressed` state.\n- **Test mode (`try`)**: When enabled the component appends a trigger button and a tooltip; clicking the button captures keystrokes and compares the typed combination against the slotted keys.\n- **Result feedback**: A pass shows a \"done\" icon, a fail shows a \"close\" icon, and the tooltip surfaces the localized success or error message; the outcome is also reflected on the host via the `test` attribute.\n- **Localization**: Trigger title, tooltip copy, and error messages resolve through the locale system (el/en/es/it).\n\n#### Properties & Visual Configurations\n\nThis component does not use the shared `variant` / `tone` ladders from [`projects/stencil/SPEC.md`](../../../../SPEC.md#tone-and-variant-system).\n\n#### Other behavioral props\n\n- **`try`** opts the keyboard into interactive verification mode. Enable it only when you want the user to be able to confirm a shortcut by typing it; leave it unset for a purely presentational shortcut display.\n- **`test`** reflects the verification outcome (`'pass'` / `'fail'`) onto the host. It is primarily driven by the test flow and is mainly useful as a styling/state hook rather than a value you set yourself.\n",
         "2. Pattern": "Correct and idiomatic ways to use the `<mds-keyboard>` component, ordered from most common to most specialized. Patterns assume a working knowledge of the variant / tone ladders documented in [`docs/COMPONENTS.md`](../../../../../../docs/COMPONENTS.md) and the generic stencil rules in [`projects/stencil/SPEC.md`](../../../../SPEC.md).\n\n#### Single Key Display\n\nThe simplest use: one `<mds-keyboard-key>` child inside `<mds-keyboard>`. The `name` attribute selects a key from the built-in key dictionary; the component renders the physical-looking keycap with the localized alias.\n\n```html\n<mds-keyboard>\n  <mds-keyboard-key name=\"f1\"></mds-keyboard-key>\n</mds-keyboard>\n```\n\n#### Multi-Key Shortcut Combination\n\nSlot two or more `<mds-keyboard-key>` elements. The component automatically inserts a `+` separator between consecutive keys, so you never need to add it manually.\n\n```html\n<mds-keyboard>\n  <mds-keyboard-key name=\"control\"></mds-keyboard-key>\n  <mds-keyboard-key name=\"s\"></mds-keyboard-key>\n</mds-keyboard>\n```\n\n#### Specifying Key Side (Left / Right Modifier)\n\nUse the side-specific `name` values (`controlleft`, `controlright`, `shiftleft`, `shiftright`, `commandleft`, `commandright`, etc.) when the shortcut must be typed with a specific hand. The keycap renders a small positional indicator.\n\n```html\n<!-- Only the left Shift key is accepted during a test -->\n<mds-keyboard try>\n  <mds-keyboard-key name=\"shiftleft\"></mds-keyboard-key>\n  <mds-keyboard-key name=\"d\"></mds-keyboard-key>\n</mds-keyboard>\n```\n\n#### Interactive Verification Mode (`try`)\n\nAdd the `try` attribute to let the user confirm the shortcut by typing it. A trigger button appears; clicking it puts the component into capture mode. After the user releases all keys the component reflects the outcome (`pass` / `fail`) on the `test` attribute and shows a localized tooltip.\n\n```html\n<mds-keyboard try>\n  <mds-keyboard-key name=\"command\"></mds-keyboard-key>\n  <mds-keyboard-key name=\"z\"></mds-keyboard-key>\n</mds-keyboard>\n```\n\n#### Shortcut Reference Table\n\nEmbed `<mds-keyboard>` inside a `<mds-table>` to build a keyboard-shortcut reference sheet. Each row pairs the visual shortcut with its description.\n\n```html\n<mds-table>\n  <mds-table-header>\n    <mds-table-header-cell label=\"Combinazione\"></mds-table-header-cell>\n    <mds-table-header-cell label=\"Azione\"></mds-table-header-cell>\n  </mds-table-header>\n  <mds-table-body>\n    <mds-table-row>\n      <mds-table-cell>\n        <mds-keyboard>\n          <mds-keyboard-key name=\"control\"></mds-keyboard-key>\n          <mds-keyboard-key name=\"c\"></mds-keyboard-key>\n        </mds-keyboard>\n      </mds-table-cell>\n      <mds-table-cell><mds-text>Copia</mds-text></mds-table-cell>\n    </mds-table-row>\n    <mds-table-row>\n      <mds-table-cell>\n        <mds-keyboard>\n          <mds-keyboard-key name=\"control\"></mds-keyboard-key>\n          <mds-keyboard-key name=\"v\"></mds-keyboard-key>\n        </mds-keyboard>\n      </mds-table-cell>\n      <mds-table-cell><mds-text>Incolla</mds-text></mds-table-cell>\n    </mds-table-row>\n    <mds-table-row>\n      <mds-table-cell>\n        <mds-keyboard>\n          <mds-keyboard-key name=\"control\"></mds-keyboard-key>\n          <mds-keyboard-key name=\"z\"></mds-keyboard-key>\n        </mds-keyboard>\n      </mds-table-cell>\n      <mds-table-cell><mds-text>Annulla</mds-text></mds-table-cell>\n    </mds-table-row>\n  </mds-table-body>\n</mds-table>\n```\n\n#### Reading the `test` Outcome Attribute\n\nWhen `try` is set the `test` attribute is reflected onto the host as `\"pass\"` or `\"fail\"` after each attempt. Use it as a CSS attribute selector or read it from JavaScript to drive follow-on UI.\n\n```html\n<mds-keyboard id=\"shortcut-ctrl-s\" try>\n  <mds-keyboard-key name=\"control\"></mds-keyboard-key>\n  <mds-keyboard-key name=\"s\"></mds-keyboard-key>\n</mds-keyboard>\n```\n\n```javascript\ndocument.querySelector('#shortcut-ctrl-s').addEventListener('click', () => {\n  const result = document.querySelector('#shortcut-ctrl-s').getAttribute('test');\n  if (result === 'pass') {\n    console.log('Combinazione corretta!');\n  }\n});\n```\n\n#### Styling Customization\n\nAdjust colors and lighting only through the documented `--mds-keyboard-*` CSS custom properties. Use Magma color tokens via `rgb(var(--<token>))` so dark mode continues to work.\n\n```css\n.custom-keyboard mds-keyboard {\n  --mds-keyboard-background: rgb(var(--tone-neutral-02));\n  --mds-keyboard-color: rgb(var(--tone-neutral-10));\n  --mds-keyboard-key-background: rgb(var(--tone-neutral-04));\n  --mds-keyboard-padding: var(--spacing-300);\n}\n```\n",
@@ -17333,7 +17766,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -17441,7 +17874,12 @@
           "docs": "Set the duration of the spinner animation."
         }
       ],
-      "slots": [],
+      "slots": [
+        {
+          "name": "",
+          "docs": "Add `mds-keyboard-key` elements or `components` to this slot."
+        }
+      ],
       "parts": [],
       "states": [],
       "dependents": [],
@@ -17877,7 +18315,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -17939,7 +18377,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `mds-kpi-item` element/s."
+          "text": "- Add `mds-kpi-item` element/s."
         }
       ],
       "usage": {
@@ -17965,7 +18403,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Add `mds-kpi-item` element/s."
         }
       ],
@@ -18484,7 +18922,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -18581,7 +19019,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `mds-list-item` element/s."
+          "text": "- Add `mds-list-item` element/s."
         }
       ],
       "usage": {
@@ -18596,7 +19034,7 @@
       "styles": [],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Add `mds-list-item` element/s."
         }
       ],
@@ -18615,7 +19053,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here."
+          "text": "- Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here."
         }
       ],
       "usage": {
@@ -18770,7 +19208,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here."
         }
       ],
@@ -18964,7 +19402,7 @@
         },
         {
           "name": "slot",
-          "text": "default - Contents that will be placed in the center of the window. Add `text string`, `HTML elements` or `components` to this slot."
+          "text": "- Contents that will be placed in the center of the window. Add `text string`, `HTML elements` or `components` to this slot."
         },
         {
           "name": "slot",
@@ -19316,7 +19754,7 @@
           },
           "signature": "close() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Closes the modal.",
           "docsTags": []
         }
       ],
@@ -19453,12 +19891,12 @@
       ],
       "slots": [
         {
-          "name": "bottom",
-          "docs": "Contents that will be placed on bottom of the window. Add `text string`, `HTML elements` or `components` to this slot."
+          "name": "",
+          "docs": "Contents that will be placed in the center of the window. Add `text string`, `HTML elements` or `components` to this slot."
         },
         {
-          "name": "default",
-          "docs": "Contents that will be placed in the center of the window. Add `text string`, `HTML elements` or `components` to this slot."
+          "name": "bottom",
+          "docs": "Contents that will be placed on bottom of the window. Add `text string`, `HTML elements` or `components` to this slot."
         },
         {
           "name": "top",
@@ -19513,7 +19951,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `text string`, `HTML elements` or `components` to this slot."
+          "text": "- Add `text string`, `HTML elements` or `components` to this slot."
         },
         {
           "name": "slot",
@@ -19663,7 +20101,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -19713,7 +20151,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Add `text string`, `HTML elements` or `components` to this slot."
         },
         {
@@ -20117,7 +20555,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here."
+          "text": "- Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here."
         }
       ],
       "usage": {
@@ -20282,7 +20720,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here."
         }
       ],
@@ -20492,7 +20930,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -20592,7 +21030,7 @@
         },
         {
           "name": "slot",
-          "text": "default - Add `mds-pref-animation`, `mds-pref-consumption`, `mds-pref-contrast`, `mds-pref-language`, or `mds-pref-theme` element/s."
+          "text": "- Add `mds-pref-animation`, `mds-pref-consumption`, `mds-pref-contrast`, `mds-pref-language`, or `mds-pref-theme` element/s."
         },
         {
           "name": "example",
@@ -20690,7 +21128,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -20699,7 +21137,7 @@
       "styles": [],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Add `mds-pref-animation`, `mds-pref-consumption`, `mds-pref-contrast`, `mds-pref-language`, or `mds-pref-theme` element/s."
         }
       ],
@@ -20829,7 +21267,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -20997,7 +21435,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -21165,7 +21603,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -21228,7 +21666,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `mds-pref-language-item` element/s."
+          "text": "- Add `mds-pref-language-item` element/s."
         }
       ],
       "usage": {
@@ -21325,7 +21763,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -21377,7 +21815,7 @@
       "styles": [],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Add `mds-pref-language-item` element/s."
         }
       ],
@@ -21496,7 +21934,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -21702,7 +22140,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -21765,7 +22203,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `mds-pref-theme-variant-item` element/s."
+          "text": "- Add `mds-pref-theme-variant-item` element/s."
         }
       ],
       "usage": {
@@ -21907,7 +22345,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -21959,7 +22397,7 @@
       "styles": [],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Add `mds-pref-theme-variant-item` element/s."
         }
       ],
@@ -22158,7 +22596,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -22237,7 +22675,12 @@
       "tag": "mds-price-table",
       "readme": "# mds-price-table\n\n\n\nThis is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.\n",
       "docs": "This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "- Add `mds-price-table-list` elements or `components` to this slot."
+        }
+      ],
       "usage": {
         "1. Description": "The `<mds-price-table>` web component is the layout container of the Magma Design System pricing-table family. It owns no logic or visual chrome of its own: it stacks its slotted compound children (the plan columns, header and feature matrix) into a coherent pricing comparison surface.\n\n#### Semantic Behavior\n\n- **Default slot only**: Any markup placed between the tags is projected verbatim. It expects the dedicated compound children (`mds-price-table-list`, `mds-price-table-header`, `mds-price-table-features`, `mds-price-table-features-row`, `mds-price-table-features-cell`) rather than free-form content.\n- **Grid layout host**: Projected blocks are spaced consistently regardless of how many plans or feature rows are supplied.\n- **Responsive composition**: It does not switch layouts internally. Two arrangements are expressed through the children and utility classes - a stacked, per-plan layout (each `mds-price-table-list` carrying its own feature matrix) for narrow viewports, and a shared `mds-price-table-header` + single `mds-price-table-features` matrix for wide viewports.\n- **No props, events, or state**: All configuration lives on the child components.\n\n#### Properties & Visual Configurations\n\nThis component is a pure compound parent and intentionally has no configurable props. Visual variation comes from the children it wraps - for example the `type` attribute on `mds-price-table-features-cell` (`'label'`, `'text'`, `'supported'`, `'unsupported'`) drives what each matrix cell renders, and the named slots on `mds-price-table-list` (`header`, `price`, `action`) position each plan's heading, price and call-to-action. Refer to those child components' own documentation for their value ladders.\n",
         "2. Pattern": "Correct and idiomatic ways to use the `<mds-price-table>` family, ordered from most common to most specialized. Patterns assume a working knowledge of the compound-component rules documented in [`docs/COMPONENTS.md`](../../../../../../docs/COMPONENTS.md) and the generic stencil rules in [`projects/stencil/SPEC.md`](../../../../SPEC.md).\n\n#### Single-Plan Card (Mobile Layout)\n\nUse one `<mds-price-table>` per plan on narrow viewports. Each instance contains one `<mds-price-table-list>` (the plan card) followed by one `<mds-price-table-features>` (its feature matrix). The `header`, `price`, and `action` slots of `<mds-price-table-list>` position plan heading, price, and call-to-action respectively.\n\n```html\n<mds-price-table>\n  <mds-price-table-list>\n    <mds-text typography=\"h5\" tag=\"h4\" slot=\"header\">Piano Base</mds-text>\n    <mds-text typography=\"detail\" slot=\"header\">Ideale per liberi professionisti.</mds-text>\n    <mds-text typography=\"h2\" tag=\"h4\" slot=\"price\">49 EUR</mds-text>\n    <mds-button slot=\"action\" variant=\"dark\">Inizia ora</mds-button>\n  </mds-price-table-list>\n  <mds-price-table-features>\n    <mds-price-table-features-row>\n      <mds-price-table-features-cell type=\"label\">Utenti</mds-price-table-features-cell>\n      <mds-price-table-features-cell type=\"text\">10</mds-price-table-features-cell>\n    </mds-price-table-features-row>\n    <mds-price-table-features-row>\n      <mds-price-table-features-cell type=\"label\">Supporto</mds-price-table-features-cell>\n      <mds-price-table-features-cell type=\"supported\"></mds-price-table-features-cell>\n    </mds-price-table-features-row>\n    <mds-price-table-features-row>\n      <mds-price-table-features-cell type=\"label\">Report avanzati</mds-price-table-features-cell>\n      <mds-price-table-features-cell type=\"unsupported\"></mds-price-table-features-cell>\n    </mds-price-table-features-row>\n  </mds-price-table-features>\n</mds-price-table>\n```\n\n#### Multi-Plan Comparison (Desktop Layout)\n\nUse a single `<mds-price-table>` wrapping one `<mds-price-table-header>` and one shared `<mds-price-table-features>`. The header holds a heading element plus one `<mds-price-table-list>` per plan. Each `<mds-price-table-features-row>` then carries one `label` cell followed by one data cell per plan - the row component distributes them evenly.\n\n```html\n<mds-price-table>\n  <mds-price-table-header class=\"tablet:grid-cols-3 desktop:grid-cols-4\">\n    <mds-text typography=\"h1\" tag=\"h3\" class=\"desktop:py-600\">Scegli il tuo piano</mds-text>\n\n    <mds-price-table-list>\n      <mds-text typography=\"h5\" tag=\"h4\" slot=\"header\">Base</mds-text>\n      <mds-text typography=\"h2\" tag=\"h4\" slot=\"price\">49 EUR</mds-text>\n      <mds-button slot=\"action\" variant=\"dark\">Inizia</mds-button>\n    </mds-price-table-list>\n\n    <mds-price-table-list class=\"bg-label-amaranth-10\">\n      <mds-text typography=\"h5\" tag=\"h4\" slot=\"header\">Professional</mds-text>\n      <mds-text typography=\"h2\" tag=\"h4\" slot=\"price\">99 EUR</mds-text>\n      <mds-button slot=\"action\" variant=\"dark\">Inizia</mds-button>\n    </mds-price-table-list>\n  </mds-price-table-header>\n\n  <mds-price-table-features label=\"Caratteristiche\">\n    <mds-price-table-features-row>\n      <mds-price-table-features-cell type=\"label\">Utenti</mds-price-table-features-cell>\n      <mds-price-table-features-cell type=\"text\">10</mds-price-table-features-cell>\n      <mds-price-table-features-cell type=\"text\">20</mds-price-table-features-cell>\n    </mds-price-table-features-row>\n    <mds-price-table-features-row>\n      <mds-price-table-features-cell type=\"label\">Automazione</mds-price-table-features-cell>\n      <mds-price-table-features-cell type=\"unsupported\"></mds-price-table-features-cell>\n      <mds-price-table-features-cell type=\"supported\"></mds-price-table-features-cell>\n    </mds-price-table-features-row>\n  </mds-price-table-features>\n</mds-price-table>\n```\n\n#### Feature Matrix Section with a Label\n\nPass the `label` prop to `<mds-price-table-features>` to render a bold section heading above the feature rows. Use this when the comparison is split across multiple thematic groups (for example \"Funzionalita base\" and \"Report e analisi\").\n\n```html\n<mds-price-table-features label=\"Report e analisi\">\n  <mds-price-table-features-row>\n    <mds-price-table-features-cell type=\"label\">Export report</mds-price-table-features-cell>\n    <mds-price-table-features-cell type=\"unsupported\"></mds-price-table-features-cell>\n    <mds-price-table-features-cell type=\"supported\"></mds-price-table-features-cell>\n  </mds-price-table-features-row>\n  <mds-price-table-features-row>\n    <mds-price-table-features-cell type=\"label\">Report avanzati</mds-price-table-features-cell>\n    <mds-price-table-features-cell type=\"unsupported\"></mds-price-table-features-cell>\n    <mds-price-table-features-cell type=\"supported\"></mds-price-table-features-cell>\n  </mds-price-table-features-row>\n</mds-price-table-features>\n```\n\n#### Feature Cell Types\n\n`<mds-price-table-features-cell>` drives what each matrix cell renders through its `type` attribute. The five accepted values are: `label` (plain row heading), `text` (detail string), `supported` (check icon), `unsupported` (dash icon), and `custom` (arbitrary slotted content).\n\n```html\n<mds-price-table-features-row>\n  <!-- Row heading - typically the first cell -->\n  <mds-price-table-features-cell type=\"label\">Archiviazione</mds-price-table-features-cell>\n\n  <!-- Text value cell -->\n  <mds-price-table-features-cell type=\"text\">10 GB</mds-price-table-features-cell>\n\n  <!-- Supported / unsupported icon cells (no slotted content needed) -->\n  <mds-price-table-features-cell type=\"supported\"></mds-price-table-features-cell>\n  <mds-price-table-features-cell type=\"unsupported\"></mds-price-table-features-cell>\n\n  <!-- Custom cell for arbitrary content -->\n  <mds-price-table-features-cell type=\"custom\">\n    <mds-badge variant=\"success\" tone=\"weak\">Nuovo</mds-badge>\n  </mds-price-table-features-cell>\n</mds-price-table-features-row>\n```\n\n#### Contextual Help on a Feature Cell\n\nSlot an `<mds-help>` inside a `label` or `text` cell to add an inline tooltip explaining a feature. Place it directly after the label text so the icon appears inline.\n\n```html\n<mds-price-table-features-row>\n  <mds-price-table-features-cell type=\"label\">\n    Funzionalita automatizzate\n    <mds-help>Includono notifiche, workflow e integrazioni API.</mds-help>\n  </mds-price-table-features-cell>\n  <mds-price-table-features-cell type=\"unsupported\"></mds-price-table-features-cell>\n  <mds-price-table-features-cell type=\"supported\"></mds-price-table-features-cell>\n</mds-price-table-features-row>\n```\n\n#### List Items Inside a Plan Card\n\nUse `<mds-price-table-list-item>` via the `item` slot for a bulleted feature list inside a plan card. Set `supported` to `true` for included features and leave it `false` (default) for excluded ones. The `typography` prop controls the text size.\n\n```html\n<mds-price-table-list>\n  <mds-text typography=\"h5\" tag=\"h4\" slot=\"header\">Piano Base</mds-text>\n  <mds-text typography=\"h2\" tag=\"h4\" slot=\"price\">49 EUR</mds-text>\n\n  <mds-price-table-list-item supported>Accesso base</mds-price-table-list-item>\n  <mds-price-table-list-item supported>Supporto clienti</mds-price-table-list-item>\n  <mds-price-table-list-item>Automazione</mds-price-table-list-item>\n  <mds-price-table-list-item>Export report</mds-price-table-list-item>\n\n  <mds-button slot=\"action\" variant=\"dark\">Inizia ora</mds-button>\n</mds-price-table-list>\n```\n\n#### Highlighted Plan Card\n\nApply a Magma label-color utility class directly to `<mds-price-table-list>` to visually distinguish a recommended or featured plan. Do not set a background color through inline styles or custom CSS; use the documented background tokens.\n\n```html\n<mds-price-table>\n  <mds-price-table-list>\n    <mds-text typography=\"h5\" tag=\"h4\" slot=\"header\">Base</mds-text>\n    <mds-text typography=\"h2\" tag=\"h4\" slot=\"price\">49 EUR</mds-text>\n    <mds-button slot=\"action\" variant=\"dark\">Inizia</mds-button>\n  </mds-price-table-list>\n\n  <!-- Highlighted plan -->\n  <mds-price-table-list class=\"bg-label-amaranth-10\">\n    <mds-text typography=\"h5\" tag=\"h4\" slot=\"header\">Professional</mds-text>\n    <mds-text typography=\"h2\" tag=\"h4\" slot=\"price\">99 EUR</mds-text>\n    <mds-button slot=\"action\" variant=\"dark\">Inizia</mds-button>\n  </mds-price-table-list>\n</mds-price-table>\n```\n\n#### Separator Color Customization\n\n`<mds-price-table-list>` exposes one CSS custom property, `--mds-price-table-list-separator-color`, to style the horizontal rule that separates the header from the item list. Set it on the host using Magma color tokens.\n\n```css\n.featured-plan mds-price-table-list {\n  --mds-price-table-list-separator-color: rgb(var(--variant-primary-03));\n}\n```\n",
@@ -22248,7 +22691,12 @@
       "events": [],
       "listeners": [],
       "styles": [],
-      "slots": [],
+      "slots": [
+        {
+          "name": "",
+          "docs": "Add `mds-price-table-list` elements or `components` to this slot."
+        }
+      ],
       "parts": [],
       "states": [],
       "dependents": [],
@@ -22268,7 +22716,7 @@
         },
         {
           "name": "slot",
-          "text": "default - Expects to slot `mds-price-table-features-row` component"
+          "text": "- Expects to slot `mds-price-table-features-row` component"
         }
       ],
       "usage": {
@@ -22321,7 +22769,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Expects to slot `mds-price-table-features-row` component"
         }
       ],
@@ -22359,7 +22807,7 @@
         },
         {
           "name": "slot",
-          "text": "default - Add `text string`, `HTML elements` or `components` to this slot."
+          "text": "- Add `text string`, `HTML elements` or `components` to this slot."
         }
       ],
       "usage": {
@@ -22462,7 +22910,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Add `text string`, `HTML elements` or `components` to this slot."
         }
       ],
@@ -22496,7 +22944,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Expects to slot `mds-price-table-features-cell` component"
+          "text": "- Expects to slot `mds-price-table-features-cell` component"
         }
       ],
       "usage": {
@@ -22532,7 +22980,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Expects to slot `mds-price-table-features-cell` component"
         }
       ],
@@ -22548,7 +22996,12 @@
       "tag": "mds-price-table-header",
       "readme": "# mds-price-table-header\n\n\n\nThis is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.\n",
       "docs": "This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "- Add `text string`, `HTML elements` or `components` to this slot."
+        }
+      ],
       "usage": {
         "1. Description": "The `<mds-price-table-header>` web component is the layout child that forms the top band of a [`<mds-price-table>`](../../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. It is a pure presentational wrapper.\n\n#### Semantic Behavior\n\n- **Compound child only**: Must be placed as a direct slot child of `<mds-price-table>`; it is not used standalone, and it expects its own children to be the price-plan columns (typically a leading `<mds-text>` title plus one `<mds-price-table-list>` per plan) so they line up with the `<mds-price-table-features>` columns underneath.\n- **Auto-fit column grid**: Every direct child becomes an equal-width column by default.\n- **Layout overridden via classes**: Because the column count is content-driven, the explicit per-breakpoint layout (e.g. `tablet:grid-cols-3 desktop:grid-cols-4`, plus `col-span` on a leading title) is applied through utility classes on the host and its children rather than through props.\n- **Single default slot**: Passes content straight through; it has no named slots, no internal ARIA role, no state, and emits no events.\n\n#### Properties & Visual Configurations\n\nThis component exposes no configurable props. It is a layout-only child: its sole job is to project its slotted children into an equal-column grid that matches the rest of the price table. Control the arrangement through CSS utility classes (grid column counts per breakpoint, column spans on the leading title) on the host and on the slotted elements, not through component attributes. See the shared compound-component and layout conventions in [`projects/stencil/SPEC.md`](../../../../SPEC.md#tone-and-variant-system).\n",
         "2. Pattern": "Correct and idiomatic ways to use the `<mds-price-table-header>` component, ordered from most common to most specialized. Patterns assume a working knowledge of the compound-component rules documented in [`docs/COMPONENTS.md`](../../../../../../docs/COMPONENTS.md) and the generic stencil rules in [`projects/stencil/SPEC.md`](../../../../SPEC.md).\n\n#### Standard Three-Plan Header\n\nThe most common form: a leading title column followed by one [`<mds-price-table-list>`](../../mds-price-table-list) per plan. Apply responsive grid-column utilities directly on the host to align the header with the feature rows below it.\n\n```html\n<mds-price-table-header class=\"tablet:grid-cols-3 desktop:grid-cols-4\">\n  <mds-text typography=\"h1\" class=\"tablet:col-span-3 desktop:col-span-1 desktop:py-600\">\n    Scegli il piano per te\n  </mds-text>\n\n  <mds-price-table-list>\n    <mds-text typography=\"h5\" slot=\"header\">Piano Base</mds-text>\n    <mds-text typography=\"detail\" slot=\"header\">\n      Ideale per liberi professionisti.\n    </mds-text>\n    <mds-text typography=\"h2\" slot=\"price\">49 EUR / mese</mds-text>\n    <mds-button slot=\"action\" variant=\"dark\">Inizia ora</mds-button>\n  </mds-price-table-list>\n\n  <mds-price-table-list>\n    <mds-text typography=\"h5\" slot=\"header\">Piano Professional</mds-text>\n    <mds-text typography=\"detail\" slot=\"header\">\n      Per studi di medie dimensioni.\n    </mds-text>\n    <mds-text typography=\"h2\" slot=\"price\">99 EUR / mese</mds-text>\n    <mds-button slot=\"action\" variant=\"dark\">Inizia ora</mds-button>\n  </mds-price-table-list>\n\n  <mds-price-table-list>\n    <mds-text typography=\"h5\" slot=\"header\">Piano Enterprise</mds-text>\n    <mds-text typography=\"detail\" slot=\"header\">\n      Soluzioni su misura per grandi organizzazioni.\n    </mds-text>\n    <mds-text typography=\"h2\" slot=\"price\">149 EUR / mese</mds-text>\n    <mds-button slot=\"action\" variant=\"dark\">Inizia ora</mds-button>\n  </mds-price-table-list>\n</mds-price-table-header>\n```\n\n#### Header Without a Leading Title Column\n\nWhen the layout does not need a title column on the left, omit the leading element and let the auto-fit grid divide space equally among the plan columns. Update the grid-column count to match the number of plans.\n\n```html\n<mds-price-table-header class=\"tablet:grid-cols-2 desktop:grid-cols-3\">\n  <mds-price-table-list>\n    <mds-text typography=\"h5\" slot=\"header\">Starter</mds-text>\n    <mds-text typography=\"h2\" slot=\"price\">Gratuito</mds-text>\n    <mds-button slot=\"action\" variant=\"primary\" tone=\"strong\">Registrati</mds-button>\n  </mds-price-table-list>\n\n  <mds-price-table-list>\n    <mds-text typography=\"h5\" slot=\"header\">Business</mds-text>\n    <mds-text typography=\"h2\" slot=\"price\">79 EUR / mese</mds-text>\n    <mds-button slot=\"action\" variant=\"primary\" tone=\"strong\">Abbonati</mds-button>\n  </mds-price-table-list>\n\n  <mds-price-table-list>\n    <mds-text typography=\"h5\" slot=\"header\">Enterprise</mds-text>\n    <mds-text typography=\"h2\" slot=\"price\">Su richiesta</mds-text>\n    <mds-button slot=\"action\" variant=\"dark\">Contattaci</mds-button>\n  </mds-price-table-list>\n</mds-price-table-header>\n```\n\n#### Highlighted Plan Column\n\nApply a background utility class directly to an [`<mds-price-table-list>`](../../mds-price-table-list) child to visually emphasize a recommended plan. No extra wrapper is needed.\n\n```html\n<mds-price-table-header class=\"tablet:grid-cols-3 desktop:grid-cols-4\">\n  <mds-text typography=\"h1\" class=\"tablet:col-span-3 desktop:col-span-1\">\n    Trova il piano giusto\n  </mds-text>\n\n  <mds-price-table-list>\n    <mds-text typography=\"h5\" slot=\"header\">Base</mds-text>\n    <mds-text typography=\"h2\" slot=\"price\">29 EUR / mese</mds-text>\n    <mds-button slot=\"action\" variant=\"dark\">Inizia</mds-button>\n  </mds-price-table-list>\n\n  <!-- Recommended plan - highlighted via background utility -->\n  <mds-price-table-list class=\"bg-label-amaranth-10\">\n    <mds-text typography=\"h5\" slot=\"header\">Consigliato</mds-text>\n    <mds-text typography=\"h2\" slot=\"price\">69 EUR / mese</mds-text>\n    <mds-button slot=\"action\" variant=\"primary\" tone=\"strong\">Inizia</mds-button>\n  </mds-price-table-list>\n\n  <mds-price-table-list>\n    <mds-text typography=\"h5\" slot=\"header\">Premium</mds-text>\n    <mds-text typography=\"h2\" slot=\"price\">129 EUR / mese</mds-text>\n    <mds-button slot=\"action\" variant=\"dark\">Inizia</mds-button>\n  </mds-price-table-list>\n</mds-price-table-header>\n```\n\n#### Matching Column Count to Feature Rows\n\nWhen combined with [`<mds-price-table-features>`](../../mds-price-table-features) below the header, the breakpoint grid-column classes on `<mds-price-table-header>` and on [`<mds-price-table-features>`](../../mds-price-table-features) must match so columns align visually. Apply the same class string to both.\n\n```html\n<mds-price-table>\n  <mds-price-table-header class=\"tablet:grid-cols-3 desktop:grid-cols-4\">\n    <mds-text typography=\"h1\" class=\"tablet:col-span-3 desktop:col-span-1\">\n      Prezzi e funzionalita\n    </mds-text>\n    <mds-price-table-list>\n      <mds-text typography=\"h5\" slot=\"header\">Base</mds-text>\n      <mds-text typography=\"h2\" slot=\"price\">49 EUR</mds-text>\n      <mds-button slot=\"action\" variant=\"dark\">Abbonati</mds-button>\n    </mds-price-table-list>\n    <mds-price-table-list>\n      <mds-text typography=\"h5\" slot=\"header\">Pro</mds-text>\n      <mds-text typography=\"h2\" slot=\"price\">99 EUR</mds-text>\n      <mds-button slot=\"action\" variant=\"dark\">Abbonati</mds-button>\n    </mds-price-table-list>\n    <mds-price-table-list>\n      <mds-text typography=\"h5\" slot=\"header\">Enterprise</mds-text>\n      <mds-text typography=\"h2\" slot=\"price\">199 EUR</mds-text>\n      <mds-button slot=\"action\" variant=\"dark\">Contattaci</mds-button>\n    </mds-price-table-list>\n  </mds-price-table-header>\n\n  <mds-price-table-features class=\"tablet:grid-cols-3 desktop:grid-cols-4\">\n    <!-- feature rows go here -->\n  </mds-price-table-features>\n</mds-price-table>\n```\n\n#### Mobile Collapse with Responsive Classes\n\nOn narrow viewports, collapse the multi-column header into a single-column stack using a `max-mobile:grid-cols-1` utility. The leading title then occupies the full row before the plan cards.\n\n```html\n<mds-price-table-header\n  class=\"max-mobile:grid-cols-1 tablet:grid-cols-3 desktop:grid-cols-4\"\n>\n  <mds-text typography=\"h1\" class=\"tablet:col-span-3 desktop:col-span-1\">\n    Confronta i piani\n  </mds-text>\n\n  <mds-price-table-list>\n    <mds-text typography=\"h5\" slot=\"header\">Individuale</mds-text>\n    <mds-text typography=\"h2\" slot=\"price\">19 EUR / mese</mds-text>\n    <mds-button slot=\"action\" variant=\"dark\">Scegli</mds-button>\n  </mds-price-table-list>\n\n  <mds-price-table-list>\n    <mds-text typography=\"h5\" slot=\"header\">Team</mds-text>\n    <mds-text typography=\"h2\" slot=\"price\">49 EUR / mese</mds-text>\n    <mds-button slot=\"action\" variant=\"dark\">Scegli</mds-button>\n  </mds-price-table-list>\n\n  <mds-price-table-list>\n    <mds-text typography=\"h5\" slot=\"header\">Azienda</mds-text>\n    <mds-text typography=\"h2\" slot=\"price\">149 EUR / mese</mds-text>\n    <mds-button slot=\"action\" variant=\"dark\">Scegli</mds-button>\n  </mds-price-table-list>\n</mds-price-table-header>\n```\n",
@@ -22559,7 +23012,12 @@
       "events": [],
       "listeners": [],
       "styles": [],
-      "slots": [],
+      "slots": [
+        {
+          "name": "",
+          "docs": "Add `text string`, `HTML elements` or `components` to this slot."
+        }
+      ],
       "parts": [],
       "states": [],
       "dependents": [],
@@ -22591,7 +23049,7 @@
         },
         {
           "name": "slot",
-          "text": "default - Add `mds-price-table-list-item` component, `HTML elements` or other `components` to this slot."
+          "text": "item - Add `mds-price-table-list-item` component, `HTML elements` or other `components` to this slot."
         },
         {
           "name": "slot",
@@ -22623,14 +23081,14 @@
           "name": "action",
           "docs": "Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element."
         },
-        {
-          "name": "default",
-          "docs": "Add `mds-price-table-list-item` component, `HTML elements` or other `components` to this slot."
-        },
         {
           "name": "header",
           "docs": "Add `text string`, `HTML elements` or `components` to this slot."
         },
+        {
+          "name": "item",
+          "docs": "Add `mds-price-table-list-item` component, `HTML elements` or other `components` to this slot."
+        },
         {
           "name": "price",
           "docs": "Add `text string`, `HTML elements` or `components` to this slot."
@@ -22667,7 +23125,12 @@
       "tag": "mds-price-table-list-item",
       "readme": "# mds-price-table-list-item\n\n\n\nThis is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.\n",
       "docs": "This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "- Add `text string`, `HTML elements` or `components` to this slot."
+        }
+      ],
       "usage": {
         "1. Description": "The `<mds-price-table-list-item>` web component represents a single feature row inside a [`<mds-price-table-list>`](../../mds-price-table-list), pairing a supported/unsupported status icon with a textual feature label. It is a presentational compound child.\n\n#### Semantic Behavior\n\n- **Compound child only**: It auto-assigns itself to the parent's `item` slot, so it must be a direct child of `<mds-price-table-list>` and is not used standalone.\n- **Drives parent layout**: The presence of at least one item is what makes the parent render its separator and feature region.\n- **Status icon by `supported`**: When `supported` is `true` it renders a filled check-circle icon; when `false` it renders a horizontal-rule (dash) icon, indicating the feature is absent.\n- **Default slot is the label**: Text or markup placed in the default slot becomes the feature description, rendered next to the icon.\n- **No interactivity**: The component is purely presentational - it has no role, selection/active/disabled state, emitted events, or keyboard handling.\n\n#### Properties & Visual Configurations\n\n- **`supported`**: Choose `true` for features included in the plan (check icon) and `false` for features not included (dash icon). It is the only semantic switch that changes the rendered icon, and is themeable via the `--mds-price-table-list-item-supported-*` / `-unsupported-*` CSS custom properties.\n- **`typography`**: Selects the text scale applied to both the icon wrapper and the label, accepting one of the shared read typography tokens (default `detail`). Use a larger value such as `paragraph` when the list should read at body size, or `caption` for denser tables.\n",
         "2. Pattern": "Correct and idiomatic ways to use the `<mds-price-table-list-item>` component, ordered from most common to most specialized. Patterns assume a working knowledge of the compound component rules documented in [`docs/COMPONENTS.md`](../../../../../../docs/COMPONENTS.md) and the generic stencil rules in [`projects/stencil/SPEC.md`](../../../../SPEC.md).\n\n#### Supported Feature Row\n\nThe most common form. Place the component as a direct child of [`<mds-price-table-list>`](../../mds-price-table-list) and set `supported` to show the check-circle icon. Text in the default slot becomes the feature label.\n\n```html\n<mds-price-table-list>\n  <mds-price-table-list-item supported>Accesso base</mds-price-table-list-item>\n</mds-price-table-list>\n```\n\n#### Unsupported Feature Row\n\nOmit `supported` (or leave it at its default `false`) to render the dash icon, indicating the feature is not included in the plan.\n\n```html\n<mds-price-table-list>\n  <mds-price-table-list-item>Accesso API</mds-price-table-list-item>\n</mds-price-table-list>\n```\n\n#### Mixed Feature List\n\nCombine supported and unsupported rows inside one `<mds-price-table-list>` to build the complete plan comparison column.\n\n```html\n<mds-price-table-list>\n  <mds-price-table-list-item supported>Utenti illimitati</mds-price-table-list-item>\n  <mds-price-table-list-item supported>Supporto via chat</mds-price-table-list-item>\n  <mds-price-table-list-item supported>Flussi automatizzati</mds-price-table-list-item>\n  <mds-price-table-list-item>Analisi avanzata</mds-price-table-list-item>\n  <mds-price-table-list-item>Esportazione report</mds-price-table-list-item>\n  <mds-price-table-list-item>Accesso API</mds-price-table-list-item>\n</mds-price-table-list>\n```\n\n#### Feature Row with Contextual Help\n\nThe default slot accepts more than plain text. Slot an [`<mds-help>`](../../mds-help) inline next to the label when a feature needs a short explanation.\n\n```html\n<mds-price-table-list>\n  <mds-price-table-list-item supported>\n    20 GB di spazio per utente\n    <mds-help>Lo spazio viene condiviso fra tutti i membri del piano.</mds-help>\n  </mds-price-table-list-item>\n</mds-price-table-list>\n```\n\n#### Adjusting Typography Scale\n\nUse the `typography` prop to control text and icon size across the whole row. The default `detail` fits dense tables; switch to `paragraph` for a more readable presentation or `caption` for compact layouts.\n\n```html\n<!-- Default (detail) -->\n<mds-price-table-list-item supported>Funzionalita di base</mds-price-table-list-item>\n\n<!-- Body-size presentation -->\n<mds-price-table-list-item supported typography=\"paragraph\">Funzionalita di base</mds-price-table-list-item>\n\n<!-- Compact table -->\n<mds-price-table-list-item typography=\"caption\">Accesso API</mds-price-table-list-item>\n```\n\n#### Full Plan Column\n\nThe full compound pattern: `<mds-price-table-list>` with header, items, a price, and a call-to-action.\n\n```html\n<mds-price-table-list>\n  <mds-text typography=\"h5\" slot=\"header\">Piano Business</mds-text>\n  <mds-text typography=\"detail\" slot=\"header\">\n    Adatto a team di medie dimensioni con esigenze collaborative avanzate.\n  </mds-text>\n\n  <mds-price-table-list-item supported>Utenti illimitati</mds-price-table-list-item>\n  <mds-price-table-list-item supported>Supporto prioritario</mds-price-table-list-item>\n  <mds-price-table-list-item supported>Flussi automatizzati</mds-price-table-list-item>\n  <mds-price-table-list-item>Accesso API</mds-price-table-list-item>\n\n  <mds-text typography=\"h2\" slot=\"price\">99 EUR</mds-text>\n  <mds-button slot=\"action\" variant=\"primary\" tone=\"strong\">Inizia ora</mds-button>\n</mds-price-table-list>\n```\n\n#### Styling Customization\n\nOverride the icon colors only through the documented `--mds-price-table-list-item-*` CSS custom properties. Use Magma color tokens via `rgb(var(--<token>))` so dark mode and high-contrast keep working.\n\n```css\n.promo-column mds-price-table-list-item {\n  --mds-price-table-list-item-supported-icon-color: rgb(var(--variant-primary-05));\n  --mds-price-table-list-item-supported-icon-color-hover: rgb(var(--variant-primary-04));\n  --mds-price-table-list-item-unsupported-icon-color: rgb(var(--tone-neutral-06));\n  --mds-price-table-list-item-unsupported-icon-color-hover: rgb(var(--tone-neutral-05));\n}\n```\n",
@@ -22774,7 +23237,12 @@
           "docs": "Color of the unsupported icon in a list item on hover."
         }
       ],
-      "slots": [],
+      "slots": [
+        {
+          "name": "",
+          "docs": "Add `text string`, `HTML elements` or `components` to this slot."
+        }
+      ],
       "parts": [
         {
           "name": "icon",
@@ -23171,15 +23639,7 @@
         },
         {
           "name": "slot",
-          "text": "top - Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element."
-        },
-        {
-          "name": "slot",
-          "text": "bottom - Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element."
-        },
-        {
-          "name": "slot",
-          "text": "default - Add `HTML elements` or `components`, it is **recommended** to use `mds-push-notification` element."
+          "text": "- Add `HTML elements` or `components`, it is **recommended** to use `mds-push-notification` element."
         }
       ],
       "usage": {
@@ -23272,7 +23732,7 @@
           },
           "signature": "hide() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Hides the notification container.",
           "docsTags": []
         },
         {
@@ -23287,7 +23747,7 @@
               {
                 "name": "notification",
                 "type": "HTMLMdsPushNotificationItemElement | HTMLMdsPushNotificationItemElement[]",
-                "docs": ""
+                "docs": "the notification item or items to remove"
               }
             ],
             "references": {
@@ -23307,11 +23767,16 @@
             {
               "name": "notification",
               "type": "HTMLMdsPushNotificationItemElement | HTMLMdsPushNotificationItemElement[]",
-              "docs": ""
+              "docs": "the notification item or items to remove"
             }
           ],
-          "docs": "",
-          "docsTags": []
+          "docs": "Removes the given notification item(s) from the stack.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "notification the notification item or items to remove"
+            }
+          ]
         },
         {
           "name": "show",
@@ -23332,7 +23797,7 @@
           },
           "signature": "show() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Shows the notification container.",
           "docsTags": []
         }
       ],
@@ -23432,16 +23897,8 @@
       ],
       "slots": [
         {
-          "name": "bottom",
-          "docs": "Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element."
-        },
-        {
-          "name": "default",
+          "name": "",
           "docs": "Add `HTML elements` or `components`, it is **recommended** to use `mds-push-notification` element."
-        },
-        {
-          "name": "top",
-          "docs": "Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element."
         }
       ],
       "parts": [
@@ -23938,7 +24395,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -24075,7 +24532,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `text string`, `HTML elements` or `components` to this slot."
+          "text": "- Add `text string`, `HTML elements` or `components` to this slot."
         },
         {
           "name": "slot",
@@ -24213,11 +24670,11 @@
       "styles": [],
       "slots": [
         {
-          "name": "author",
+          "name": "",
           "docs": "Add `text string`, `HTML elements` or `components` to this slot."
         },
         {
-          "name": "default",
+          "name": "author",
           "docs": "Add `text string`, `HTML elements` or `components` to this slot."
         }
       ],
@@ -24239,7 +24696,12 @@
       "tag": "mds-radial-menu",
       "readme": "# mds-radial-menu\n\n\n",
       "docs": "",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "item - Add `mds-radial-menu-item` elements or `components` to this slot."
+        }
+      ],
       "usage": {
         "1. Description": "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. It is the parent of a compound pair: it owns the trigger and the geometry, while each option is supplied as an `<mds-radial-menu-item>` in the `item` slot.\n\n#### Semantic Behavior\n\n- **Trigger button**: Renders a trigger button whose `tone`, `variant` and `size` are forwarded from the host; clicking it toggles the menu open and closed.\n- **Open state**: `opened` is the source of truth for visibility; when set the items animate out along the arc and the trigger icon swaps to a close glyph.\n- **Interaction mode**: With `interaction=\"rightclick\"` the trigger is hidden and the menu instead opens on right-click, centred on the cursor.\n- **Backdrop**: When `backdrop` is enabled an overlay is shown while the menu is open, so an outside click can dismiss it.\n- **Item registration**: Items are read from the `item` slot; the component assigns each item's position and propagates the host `size` down to every `<mds-radial-menu-item>`.\n\n#### Properties & Visual Configurations\n\nThe internal trigger consumes the shared `variant` / `tone` / `size` ladders defined in [`projects/stencil/SPEC.md`](../../../../SPEC.md#tone-and-variant-system); they default to `'dark'` / `'strong'` / `'lg'` here.\n\n#### Other behavioral props\n\n- **`angleStart`** and **`angleEnd`** define the angular sweep (in degrees) over which items are distributed; a 360° span produces a full ring, while a narrower range produces a fan. Setting `angleStart` greater than `angleEnd` reverses the distribution.\n- **`radius`** sets the distance (in `rem`) of the items from the centre, controlling how far they travel when the menu opens.\n- **`direction`** chooses whether items lay out `'clockwise'` or `'counterclockwise'` around the arc.\n- **`interaction`** selects how the menu is summoned: `'click'` shows the trigger button, `'rightclick'` hides it and opens at the cursor.\n- **`disc`** renders a decorative disc beneath the menu; **`icon`** overrides the default trigger glyph and defaults to the \"more-vert\" Material icon when unset.\n",
         "2. Pattern": "Correct and idiomatic ways to use the `<mds-radial-menu>` component, ordered from most common to most specialized. Patterns assume a working knowledge of the variant / tone ladders documented in [`docs/COMPONENTS.md`](../../../../../../docs/COMPONENTS.md) and the generic stencil rules in [`projects/stencil/SPEC.md`](../../../../SPEC.md).\n\n`<mds-radial-menu>` is a compound component: it always needs one or more [`mds-radial-menu-item`](../../mds-radial-menu-item) children placed in the `item` slot.\n\n#### Basic Radial Menu\n\nThe minimal form: a trigger button with items arranged in a full ring. Each item requires `icon` (a slug from the Magma icon library) and `tooltip` (the accessible label shown on hover). The parent propagates its `size` down to every item automatically.\n\n```html\n<mds-radial-menu>\n  <mds-radial-menu-item slot=\"item\" icon=\"mi/baseline/favorite\" tooltip=\"Aggiungi ai preferiti\" variant=\"dark\" tone=\"weak\"></mds-radial-menu-item>\n  <mds-radial-menu-item slot=\"item\" icon=\"mi/baseline/email\" tooltip=\"Invia email\" variant=\"dark\" tone=\"weak\"></mds-radial-menu-item>\n  <mds-radial-menu-item slot=\"item\" icon=\"mi/baseline/print\" tooltip=\"Stampa\" variant=\"dark\" tone=\"weak\"></mds-radial-menu-item>\n  <mds-radial-menu-item slot=\"item\" icon=\"mi/baseline/delete\" tooltip=\"Elimina\" variant=\"error\"></mds-radial-menu-item>\n</mds-radial-menu>\n```\n\n#### Trigger Button Variant and Tone\n\nUse `variant` and `tone` to style the central trigger button to match the surrounding UI. Defaults are `variant=\"dark\"` and `tone=\"strong\"`.\n\n```html\n<!-- Primary trigger in a content area -->\n<mds-radial-menu variant=\"primary\" tone=\"strong\">\n  <mds-radial-menu-item slot=\"item\" icon=\"mi/baseline/edit\" tooltip=\"Modifica\" variant=\"primary\" tone=\"weak\"></mds-radial-menu-item>\n  <mds-radial-menu-item slot=\"item\" icon=\"mi/baseline/ios-share\" tooltip=\"Condividi\" variant=\"primary\" tone=\"weak\"></mds-radial-menu-item>\n  <mds-radial-menu-item slot=\"item\" icon=\"mi/baseline/delete\" tooltip=\"Elimina\" variant=\"error\" tone=\"weak\"></mds-radial-menu-item>\n</mds-radial-menu>\n\n<!-- Light trigger overlaid on a dark image -->\n<mds-radial-menu variant=\"light\" tone=\"weak\">\n  <mds-radial-menu-item slot=\"item\" icon=\"mi/baseline/favorite\" tooltip=\"Aggiungi ai preferiti\" variant=\"light\"></mds-radial-menu-item>\n  <mds-radial-menu-item slot=\"item\" icon=\"mi/baseline/ios-share\" tooltip=\"Condividi\" variant=\"light\"></mds-radial-menu-item>\n</mds-radial-menu>\n```\n\n#### Fan Layout with Angle Range\n\nRestrict `angle-start` and `angle-end` to create a fan instead of a full ring. This is useful when the component is positioned in a corner of a card or image where a full ring would overlap content.\n\n```html\n<!-- Quarter-circle fan opening toward the top-left, placed at the bottom-right corner -->\n<mds-radial-menu angle-start=\"180\" angle-end=\"270\" direction=\"counterclockwise\" radius=\"5\">\n  <mds-radial-menu-item slot=\"item\" icon=\"mi/baseline/favorite\" tooltip=\"Aggiungi ai preferiti\" variant=\"light\"></mds-radial-menu-item>\n  <mds-radial-menu-item slot=\"item\" icon=\"mi/baseline/ios-share\" tooltip=\"Condividi\" variant=\"light\"></mds-radial-menu-item>\n  <mds-radial-menu-item slot=\"item\" icon=\"mi/baseline/delete\" tooltip=\"Elimina\" variant=\"error\"></mds-radial-menu-item>\n</mds-radial-menu>\n```\n\n#### Adjusting the Radius\n\nSet `radius` (in `rem`) to control how far items travel from the trigger when the menu opens. Increase it when items would otherwise overlap; decrease it in constrained layouts.\n\n```html\n<mds-radial-menu radius=\"7\" variant=\"secondary\" tone=\"outline\">\n  <mds-radial-menu-item slot=\"item\" icon=\"mi/baseline/edit\" tooltip=\"Modifica\" variant=\"secondary\" tone=\"weak\"></mds-radial-menu-item>\n  <mds-radial-menu-item slot=\"item\" icon=\"mi/baseline/content-copy\" tooltip=\"Copia\" variant=\"secondary\" tone=\"weak\"></mds-radial-menu-item>\n  <mds-radial-menu-item slot=\"item\" icon=\"mi/baseline/delete\" tooltip=\"Elimina\" variant=\"error\" tone=\"weak\"></mds-radial-menu-item>\n</mds-radial-menu>\n```\n\n#### Controlling the Open State Programmatically\n\nThe `opened` attribute reflects the menu's open state and can be set from JavaScript to open or close the menu without a user interaction. Remove the attribute (or set the prop to `undefined`) to close it - do not set `opened=\"false\"`.\n\n```html\n<mds-radial-menu id=\"menu-azioni\">\n  <mds-radial-menu-item slot=\"item\" icon=\"mi/baseline/edit\" tooltip=\"Modifica\" variant=\"dark\" tone=\"weak\"></mds-radial-menu-item>\n  <mds-radial-menu-item slot=\"item\" icon=\"mi/baseline/delete\" tooltip=\"Elimina\" variant=\"error\" tone=\"weak\"></mds-radial-menu-item>\n</mds-radial-menu>\n\n<script>\n  const menu = document.querySelector('#menu-azioni');\n  // open programmatically\n  menu.opened = true;\n  // close programmatically - remove the prop, do not set false\n  menu.opened = undefined;\n</script>\n```\n\n#### Contextual (Right-Click) Menu with Backdrop\n\nSet `interaction=\"rightclick\"` to hide the trigger button and open the menu at the cursor position on a context-menu event. Add `backdrop` to show an overlay that blocks the page while the menu is open.\n\n```html\n<mds-radial-menu interaction=\"rightclick\" disc backdrop>\n  <mds-radial-menu-item slot=\"item\" icon=\"mi/baseline/favorite\" tooltip=\"Aggiungi ai preferiti\" variant=\"dark\" tone=\"text\"></mds-radial-menu-item>\n  <mds-radial-menu-item slot=\"item\" icon=\"mi/baseline/email\" tooltip=\"Invia email\" variant=\"dark\" tone=\"text\"></mds-radial-menu-item>\n  <mds-radial-menu-item slot=\"item\" icon=\"mi/baseline/insert-drive-file\" tooltip=\"Nuovo documento\" variant=\"dark\" tone=\"text\"></mds-radial-menu-item>\n  <mds-radial-menu-item slot=\"item\" icon=\"mi/baseline/info\" tooltip=\"Informazioni\" variant=\"dark\" tone=\"text\"></mds-radial-menu-item>\n  <mds-radial-menu-item slot=\"item\" icon=\"mi/baseline/print\" tooltip=\"Stampa\" variant=\"dark\" tone=\"text\"></mds-radial-menu-item>\n  <mds-radial-menu-item slot=\"item\" icon=\"mi/baseline/delete\" tooltip=\"Elimina\" variant=\"error\" tone=\"text\"></mds-radial-menu-item>\n</mds-radial-menu>\n```\n\n#### Disc Decoration\n\nEnable the `disc` attribute to render a decorative circular background beneath the items, visually grouping the open menu. Combine with `backdrop` for modal-style emphasis.\n\n```html\n<mds-radial-menu disc variant=\"dark\" tone=\"strong\">\n  <mds-radial-menu-item slot=\"item\" icon=\"mi/baseline/edit\" tooltip=\"Modifica\" variant=\"dark\" tone=\"weak\"></mds-radial-menu-item>\n  <mds-radial-menu-item slot=\"item\" icon=\"mi/baseline/ios-share\" tooltip=\"Condividi\" variant=\"dark\" tone=\"weak\"></mds-radial-menu-item>\n  <mds-radial-menu-item slot=\"item\" icon=\"mi/baseline/delete\" tooltip=\"Elimina\" variant=\"error\" tone=\"weak\"></mds-radial-menu-item>\n</mds-radial-menu>\n```\n\n#### Custom Trigger Icon\n\nOverride the default \"more-vert\" glyph with any slug from the Magma icon library using the `icon` prop. The trigger automatically switches to the close icon while the menu is open.\n\n```html\n<mds-radial-menu icon=\"mi/baseline/add\" variant=\"primary\" tone=\"strong\">\n  <mds-radial-menu-item slot=\"item\" icon=\"mi/baseline/edit\" tooltip=\"Modifica\" variant=\"primary\" tone=\"weak\"></mds-radial-menu-item>\n  <mds-radial-menu-item slot=\"item\" icon=\"mi/baseline/content-copy\" tooltip=\"Duplica\" variant=\"primary\" tone=\"weak\"></mds-radial-menu-item>\n  <mds-radial-menu-item slot=\"item\" icon=\"mi/baseline/delete\" tooltip=\"Elimina\" variant=\"error\" tone=\"weak\"></mds-radial-menu-item>\n</mds-radial-menu>\n```\n\n#### Sizing\n\nUse the `size` prop to resize the trigger button and all items simultaneously. Do not override dimensions with inline `width` / `height`.\n\n```html\n<mds-radial-menu size=\"sm\" variant=\"dark\" tone=\"strong\">\n  <mds-radial-menu-item slot=\"item\" icon=\"mi/baseline/edit\" tooltip=\"Modifica\" variant=\"dark\" tone=\"weak\"></mds-radial-menu-item>\n  <mds-radial-menu-item slot=\"item\" icon=\"mi/baseline/delete\" tooltip=\"Elimina\" variant=\"error\" tone=\"weak\"></mds-radial-menu-item>\n</mds-radial-menu>\n```\n\n#### Styling Customization\n\nStyle the component through its documented `--mds-radial-menu-*` CSS custom properties. Use Magma color tokens wrapped in `rgb(var(...))` so dark mode and high-contrast modes keep working.\n\n```css\n.my-context mds-radial-menu {\n  --mds-radial-menu-radius: 7rem;\n  --mds-radial-menu-transition-duration: 300ms;\n  --mds-radial-menu-disc-background: rgb(var(--tone-neutral) / 0.8);\n  --mds-radial-menu-disc-size: 12rem;\n}\n```\n",
@@ -24772,7 +25234,12 @@
           "docs": "Timing function of the radial menu transition."
         }
       ],
-      "slots": [],
+      "slots": [
+        {
+          "name": "item",
+          "docs": "Add `mds-radial-menu-item` elements or `components` to this slot."
+        }
+      ],
       "parts": [
         {
           "name": "radial-menu",
@@ -24852,7 +25319,7 @@
           "mutable": false,
           "attr": "size",
           "reflectToAttr": true,
-          "docs": "",
+          "docs": "Specifies the size of the menu item.",
           "docsTags": [
             {
               "name": "default",
@@ -25425,7 +25892,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element."
+          "text": "- Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element."
         },
         {
           "name": "part",
@@ -25605,7 +26072,7 @@
           },
           "signature": "hide() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Hides the status bar.",
           "docsTags": []
         }
       ],
@@ -25630,7 +26097,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element."
         }
       ],
@@ -25678,7 +26145,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `mds-tepper-bar-item` element/s."
+          "text": "- Add `mds-tepper-bar-item` element/s."
         },
         {
           "name": "slot",
@@ -25845,12 +26312,12 @@
       ],
       "slots": [
         {
-          "name": "content",
-          "docs": "Add `HTML elements` or `components`, one per mds-stepper-bar-item added"
+          "name": "",
+          "docs": "Add `mds-tepper-bar-item` element/s."
         },
         {
-          "name": "default",
-          "docs": "Add `mds-tepper-bar-item` element/s."
+          "name": "content",
+          "docs": "Add `HTML elements` or `components`, one per mds-stepper-bar-item added"
         }
       ],
       "parts": [
@@ -26211,7 +26678,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -26360,7 +26827,7 @@
         },
         {
           "name": "slot",
-          "text": "default - Add `mds-tab-item` element/s."
+          "text": "- Add `mds-tab-item` element/s."
         }
       ],
       "usage": {
@@ -26764,12 +27231,12 @@
       ],
       "slots": [
         {
-          "name": "content",
-          "docs": "Add `HTML elements` or `components`, one per mds-tab-item added."
+          "name": "",
+          "docs": "Add `mds-tab-item` element/s."
         },
         {
-          "name": "default",
-          "docs": "Add `mds-tab-item` element/s."
+          "name": "content",
+          "docs": "Add `HTML elements` or `components`, one per mds-tab-item added."
         }
       ],
       "parts": [
@@ -26830,7 +27297,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `mds-tab-bar-item` element/s."
+          "text": "- Add `mds-tab-bar-item` element/s."
         }
       ],
       "usage": {
@@ -26873,7 +27340,7 @@
       "styles": [],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Add `mds-tab-bar-item` element/s."
         }
       ],
@@ -26892,7 +27359,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - **Deprecated**, use the `label` property instead. Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here."
+          "text": "- **Deprecated**, use the `label` property instead. Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here."
         }
       ],
       "usage": {
@@ -26912,7 +27379,7 @@
           "mutable": false,
           "attr": "icon",
           "reflectToAttr": false,
-          "docs": "",
+          "docs": "The icon displayed in the tab bar item.",
           "docsTags": [
             {
               "name": "default",
@@ -27066,7 +27533,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "**Deprecated**, use the `label` property instead. Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here."
         }
       ],
@@ -27559,11 +28026,11 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Put `mds-table-header`, `mds-table-body`, `mds-table-footer` element/s."
+          "text": "- Put `mds-table-header`, `mds-table-body`, `mds-table-footer` element/s."
         },
         {
           "name": "slot",
-          "text": "batch-actions - Put `mds-button` element/s."
+          "text": "batch-action - Put `mds-button` element/s."
         },
         {
           "name": "part",
@@ -27647,7 +28114,7 @@
           "mutable": true,
           "attr": "selection",
           "reflectToAttr": true,
-          "docs": "",
+          "docs": "Indicates whether row selection is currently active in the table.",
           "docsTags": [],
           "values": [
             {
@@ -27803,12 +28270,12 @@
       ],
       "slots": [
         {
-          "name": "batch-actions",
-          "docs": "Put `mds-button` element/s."
+          "name": "",
+          "docs": "Put `mds-table-header`, `mds-table-body`, `mds-table-footer` element/s."
         },
         {
-          "name": "default",
-          "docs": "Put `mds-table-header`, `mds-table-body`, `mds-table-footer` element/s."
+          "name": "batch-action",
+          "docs": "Put `mds-button` element/s."
         }
       ],
       "parts": [
@@ -27854,7 +28321,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Put `mds-table-row` element/s."
+          "text": "- Put `mds-table-row` element/s."
         }
       ],
       "usage": {
@@ -27874,7 +28341,7 @@
           "mutable": false,
           "attr": "interactive",
           "reflectToAttr": true,
-          "docs": "",
+          "docs": "Specifies whether the rows react to user interaction (hover/focus).",
           "docsTags": [],
           "values": [
             {
@@ -27900,7 +28367,7 @@
           "mutable": false,
           "attr": "selection",
           "reflectToAttr": true,
-          "docs": "",
+          "docs": "Enables the selection column for the rows in this table body.",
           "docsTags": [],
           "values": [
             {
@@ -27948,7 +28415,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Put `mds-table-row` element/s."
         }
       ],
@@ -27967,7 +28434,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `text string`, `HTML elements` or `components` to this slot."
+          "text": "- Add `text string`, `HTML elements` or `components` to this slot."
         }
       ],
       "usage": {
@@ -28033,7 +28500,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Add `text string`, `HTML elements` or `components` to this slot."
         }
       ],
@@ -28062,7 +28529,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `mds-table-row` element/s."
+          "text": "- Add `mds-table-row` element/s."
         }
       ],
       "usage": {
@@ -28077,7 +28544,7 @@
       "styles": [],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Add `mds-table-row` element/s."
         }
       ],
@@ -28096,7 +28563,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `mds-table-row` element/s."
+          "text": "- Add `mds-table-row` element/s."
         }
       ],
       "usage": {
@@ -28116,7 +28583,7 @@
           "mutable": false,
           "attr": "selectable",
           "reflectToAttr": false,
-          "docs": "",
+          "docs": "Enables the select-all checkbox in the header.",
           "docsTags": [],
           "values": [
             {
@@ -28145,12 +28612,12 @@
               {
                 "name": "selectedItems",
                 "type": "number",
-                "docs": ""
+                "docs": "the number of currently selected rows"
               },
               {
                 "name": "totalItems",
                 "type": "number",
-                "docs": ""
+                "docs": "the total number of selectable rows"
               }
             ],
             "references": {
@@ -28170,16 +28637,25 @@
             {
               "name": "selectedItems",
               "type": "number",
-              "docs": ""
+              "docs": "the number of currently selected rows"
             },
             {
               "name": "totalItems",
               "type": "number",
-              "docs": ""
+              "docs": "the total number of selectable rows"
             }
           ],
-          "docs": "",
-          "docsTags": []
+          "docs": "Updates the header's select-all state from the number of selected rows.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "selectedItems the number of currently selected rows"
+            },
+            {
+              "name": "param",
+              "text": "totalItems the total number of selectable rows"
+            }
+          ]
         },
         {
           "name": "updateLang",
@@ -28200,7 +28676,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -28209,7 +28685,7 @@
       "styles": [],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Add `mds-table-row` element/s."
         }
       ],
@@ -28278,7 +28754,7 @@
           "mutable": true,
           "attr": "direction",
           "reflectToAttr": true,
-          "docs": "",
+          "docs": "Specifies the current sort direction of the column.",
           "docsTags": [
             {
               "name": "default",
@@ -28411,7 +28887,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Put `mds-table-cell` element/s."
+          "text": "- Put `mds-table-cell` element/s."
         },
         {
           "name": "slot",
@@ -28435,7 +28911,7 @@
           "mutable": false,
           "attr": "interactive",
           "reflectToAttr": true,
-          "docs": "",
+          "docs": "Specifies whether the row reacts to user interaction (hover/focus).",
           "docsTags": [],
           "values": [
             {
@@ -28461,7 +28937,7 @@
           "mutable": false,
           "attr": "overlay-actions",
           "reflectToAttr": true,
-          "docs": "",
+          "docs": "Specifies whether the row's actions are shown as an overlay.",
           "docsTags": [],
           "values": [
             {
@@ -28484,7 +28960,7 @@
           "mutable": false,
           "attr": "selectable",
           "reflectToAttr": true,
-          "docs": "",
+          "docs": "Specifies whether the row can be selected via a checkbox.",
           "docsTags": [
             {
               "name": "default",
@@ -28516,7 +28992,7 @@
           "mutable": true,
           "attr": "selected",
           "reflectToAttr": true,
-          "docs": "",
+          "docs": "Specifies whether the row is currently selected.",
           "docsTags": [],
           "values": [
             {
@@ -28542,7 +29018,7 @@
           "mutable": false,
           "attr": "value",
           "reflectToAttr": true,
-          "docs": "",
+          "docs": "The value associated with the row, emitted when the row is selected.",
           "docsTags": [],
           "values": [
             {
@@ -28581,7 +29057,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -28616,12 +29092,12 @@
       ],
       "slots": [
         {
-          "name": "action",
-          "docs": "Put `mds-button` element/s or other kind of actions as aside menu for the single row."
+          "name": "",
+          "docs": "Put `mds-table-cell` element/s."
         },
         {
-          "name": "default",
-          "docs": "Put `mds-table-cell` element/s."
+          "name": "action",
+          "docs": "Put `mds-button` element/s or other kind of actions as aside menu for the single row."
         }
       ],
       "parts": [],
@@ -28651,7 +29127,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here."
+          "text": "- Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here."
         }
       ],
       "usage": {
@@ -29167,7 +29643,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here."
         }
       ],
@@ -29388,7 +29864,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here."
+          "text": "- Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here."
         },
         {
           "name": "slot",
@@ -29685,12 +30161,12 @@
       ],
       "slots": [
         {
-          "name": "action",
-          "docs": "Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element."
+          "name": "",
+          "docs": "Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here."
         },
         {
-          "name": "default",
-          "docs": "Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here."
+          "name": "action",
+          "docs": "Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element."
         },
         {
           "name": "icon",
@@ -29718,7 +30194,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here."
+          "text": "- Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here."
         }
       ],
       "usage": {
@@ -30149,7 +30625,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here."
         }
       ],
@@ -30192,7 +30668,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `mds-tree-item` element/s."
+          "text": "- Add `mds-tree-item` element/s."
         }
       ],
       "usage": {
@@ -30641,7 +31117,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Add `mds-tree-item` element/s."
         }
       ],
@@ -30660,7 +31136,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `mds-tree-item` element/s."
+          "text": "- Add `mds-tree-item` element/s."
         },
         {
           "name": "slot",
@@ -30756,7 +31232,7 @@
           "mutable": false,
           "attr": "depth",
           "reflectToAttr": true,
-          "docs": "",
+          "docs": "Specifies the tree branch depth. Internal: used by CSS to remove branch lines on first-level elements.",
           "docsTags": [],
           "values": [
             {
@@ -30953,7 +31429,7 @@
           },
           "signature": "expand() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Expands the tree item, revealing its children.",
           "docsTags": []
         },
         {
@@ -30975,7 +31451,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -31178,12 +31654,12 @@
       ],
       "slots": [
         {
-          "name": "action",
-          "docs": "Add `mds-button`, `mds-icon` or other types component and HTML element/s."
+          "name": "",
+          "docs": "Add `mds-tree-item` element/s."
         },
         {
-          "name": "default",
-          "docs": "Add `mds-tree-item` element/s."
+          "name": "action",
+          "docs": "Add `mds-button`, `mds-icon` or other types component and HTML element/s."
         }
       ],
       "parts": [
@@ -31365,7 +31841,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -31444,7 +31920,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `text string`, `HTML elements` or `components` to this slot."
+          "text": "- Add `text string`, `HTML elements` or `components` to this slot."
         }
       ],
       "usage": {
@@ -31549,7 +32025,7 @@
           },
           "signature": "updateLang() => Promise<void>",
           "parameters": [],
-          "docs": "",
+          "docs": "Updates the component's texts to the locale currently set on the host element.",
           "docsTags": []
         }
       ],
@@ -31574,7 +32050,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "docs": "Add `text string`, `HTML elements` or `components` to this slot."
         }
       ],
@@ -31614,7 +32090,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Write browser support missing message here."
+          "text": "- Write browser support missing message here."
         },
         {
           "name": "slot",
@@ -31898,12 +32374,12 @@
       ],
       "slots": [
         {
-          "name": "content",
-          "docs": "Add video content overlay here, add `text string`, `HTML elements` or `components` to this slot."
+          "name": "",
+          "docs": "Write browser support missing message here."
         },
         {
-          "name": "default",
-          "docs": "Write browser support missing message here."
+          "name": "content",
+          "docs": "Add video content overlay here, add `text string`, `HTML elements` or `components` to this slot."
         }
       ],
       "parts": [],
@@ -31921,7 +32397,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "default - Add `HTML elements` or `components` to this slot, it is **recommended** to use `mds-img` or `img` element."
+          "text": "- Add `HTML elements` or `components` to this slot, it is **recommended** to use `mds-img` or `img` element."
         },
         {
           "name": "slot",
@@ -31957,6 +32433,10 @@
         }
       ],
       "slots": [
+        {
+          "name": "",
+          "docs": "Add `HTML elements` or `components` to this slot, it is **recommended** to use `mds-img` or `img` element."
+        },
         {
           "name": "action",
           "docs": "Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element."
@@ -31964,10 +32444,6 @@
         {
           "name": "content",
           "docs": "Put text elements here,"
-        },
-        {
-          "name": "default",
-          "docs": "Add `HTML elements` or `components` to this slot, it is **recommended** to use `mds-img` or `img` element."
         }
       ],
       "parts": [