Skip to content

Releases: magma-design-system/magma

styles@17.3.0

Choose a tag to compare

@github-actions github-actions released this 21 Oct 16:50

[styles@17.3.0] - 2026-10-21

Bug Fixes

  • (design-tokens,styles) Size utilities with a t-shirt name read the container, not spacing

Features

  • (styles) List the aliases and the keyword variables of the theme in consumption.json

magma@2.5.0

Choose a tag to compare

@github-actions github-actions released this 21 Oct 16:50

[magma@2.5.0] - 2026-10-21

Bug Fixes

  • (mds-card) Keep the footer at the bottom of the card without a content

Documentation

  • (magma,mds-button,mds-text) Point links inside a sentence to mds-link
  • (stencil) Require Magma tokens for the values of component sheets
  • (mds-input-switch) Write the input tag and the type values as code
  • (mds-button,mds-link,mds-text) Regenerate the readmes from the usage docs
  • (magma) Write spacing with the numeric steps, a t-shirt size is a container size

Features

  • (mds-link) Add the inline link for running text
  • (mds-entity) Expose the infos part, 2px between the name and the detail

Refactor

  • (stencil) Take the lengths and durations of the component sheets from the tokens

magma@2.4.1

Choose a tag to compare

@github-actions github-actions released this 21 Oct 12:14

[magma@2.4.1] - 2026-10-21

Bug Fixes

  • (mds-emoji) Read CSS custom properties once the emoji has a computed style
  • (mds-emoji) Keep hearing the pointer when the host is moved
  • (mds-tree-item) Count the first and the last child among the items
  • (mds-input-switch) Keep the page still when clicked in a scrolled box

Documentation

  • (magma) Describe the single trunk main and the manual release

design-tokens@15.2.2

Choose a tag to compare

[design-tokens@15.2.2] - 2026-10-21

Bug Fixes

  • (design-tokens,styles) Size utilities with a t-shirt name read the container, not spacing

svg-icons@4.6.0

Choose a tag to compare

@github-actions github-actions released this 20 Oct 10:24

[svg-icons@4.6.0] - 2026-10-20

Build

  • (design-tokens,identity,styles,svg-icons,icons,magma) Ship CHANGELOG.md in every package

Features

  • (svg-icons) Add new icons

styles@17.2.1

Choose a tag to compare

@github-actions github-actions released this 20 Oct 14:17

[styles@17.2.1] - 2026-10-20

Bug Fixes

  • (design-tokens,styles,magma) The shadow ink stays dark in dark mode, no more light halo
  • (design-tokens,styles) Transition-cosmetic animates translate, scale and rotate

Documentation

  • (styles,magma) A pill that casts a shadow takes surface-overlay, not a wash

magma@2.4.0

Choose a tag to compare

@github-actions github-actions released this 20 Oct 14:17

[magma@2.4.0] - 2026-10-20

Bug Fixes

  • (mds-accordion-timer,mds-accordion-timer-item) Announce each selection once, keep the open one
  • (mds-accordion) Announce every change of the open items, and only those
  • (mds-pref-mode,mds-pref-animation,mds-pref-consumption,mds-pref-contrast) Announce a pick once
  • (mds-pref-theme) Announce a theme or a corner shape once, not on every render
  • (mds-pref-language) Select the item of a language set from code
  • (mds-toast) Emit mdsToastClose once per dismissal and stop the countdown on hide
  • (mds-push-notification-item) Send the id the close event declares
  • (mds-header) Type the visibility detail as the string it carries
  • (mds-file) Send the description the card shows
  • (mds-breadcrumb) Name the item the back arrow selects as the caller
  • (mds-details) Write the user's toggle into opened
  • (mds-calendar) Put a backwards range in order
  • (mds-table,mds-table-row) Follow a selection made from code, remove the scroll listener
  • (mds-notification) Stop following the target when the badge leaves the page
  • (mds-label) Wrap at the width the label is given with truncate none or all
  • (design-tokens,styles,magma) The shadow ink stays dark in dark mode, no more light halo
  • (mds-dropdown) A second click on the caller closes the panel
  • (mds-button-dropdown) The link and the initial focus belong to the primary action
  • (mds-emoji) The gaze follows the direction of the pointer, at any size
  • (mds-table) Call setActions only on a header that has it
  • (mds-modal) Open the dialog after the render that reflects position and animation
  • (mds-text) Keep the accents of a truncated label or option text visible
  • (mds-chip) Paint the ground with surface-overlay, not the grey wash
  • (mds-banner) Paint the neutral ground with surface-overlay, not the card's surface-raised
  • (mds-input-otp,mds-pref-theme-item,mds-stepper-bar-item,stencil) Import the FOUC sheets
  • (mds-text) Import the animation preference sheet
  • (mds-tooltip) Import the dark high-contrast shadow sheet
  • (mds-avatar,mds-avatar-stack) Spell the pill on the corner axis
  • (mds-entity) Take the radii and the shape of the corner axis
  • (mds-chip,mds-mention) Spell the pills on the corner axis
  • (mds-hr,mds-separator) Spell the rounded rule on the corner axis
  • (mds-input-switch,mds-input) Spell the switch and the password dots as pills
  • (mds-notification,mds-radial-progress) Spell the circles on the corner axis
  • (mds-paginator,mds-paginator-item) Spell the pills on the corner axis
  • (mds-horizontal-scroll) Spell the dots and the arrows as pills
  • (mds-breadcrumb-item) Spell the pill of the button on the corner axis
  • (mds-filter,mds-filter-item) Spell the pills on the corner axis
  • (mds-badge) Spell the pill on the corner axis
  • (mds-stepper-bar-item) Take the radii of the corner axis
  • (mds-push-notification-item) Take the radii of the corner axis
  • (mds-tooltip,mds-text,mds-note) Take the smallest step of the corner axis
  • (mds-accordion-item,mds-accordion-timer-item,mds-details) Cap the corner of the header
  • (mds-bibliography) Spell the pill of the link on the corner axis
  • (mds-price-table-list,mds-zero,mds-usage) Take the radii of the corner axis
  • (mds-toast,mds-status-bar) Take the radii of the corner axis
  • (mds-header) Round the inline bar on the corner axis
  • (mds-policy-ai) Take the radii of the corner axis
  • (mds-table-row) Round the actions panel on the corner axis
  • (mds-url-view) Round the window on the corner axis
  • (mds-tree,mds-tree-item) Take the radii of the corner axis
  • (mds-button-dropdown) Round the corners as mds-button does, on the corner axis
  • (mds-calendar,mds-calendar-cell) Take the radii of the corner axis
  • (mds-input-select,mds-input-tip-item,mds-input-range,mds-input-upload) Take the corner axis
  • (mds-keyboard,mds-keyboard-key) Paint the keyboard with the washes of the active theme
  • (mds-pref-theme-item) Take the wash of the active theme and the pill radius
  • (mds-input-select) Take the radius of mds-input, on the host
  • (mds-accordion) Keep the ids of the items
  • (mds-breadcrumb) Keep the ids of the items
  • (mds-filter) Keep the ids of the items
  • (mds-tab-bar) Keep the ids of the items
  • (mds-tree,mds-tree-item) The toggle takes its expanded colours and its gap
  • (mds-tab,mds-tab-item) The items take the default and the hover shadow
  • (mds-progress,mds-stepper-bar-item) --mds-progress-radius rounds the bar again
  • (mds-dropdown) The backdrop takes the z-index and the duration set on the dropdown
  • (mds-label) Name the delete button in Spanish
  • (mds-label) Load a deletable label without an error
  • (mds-tab) Leave a content panel past the last item hidden
  • (mds-pref-animation,mds-pref-consumption,mds-pref-contrast) Ignore a mode outside the union
  • (mds-pref-language,mds-pref-language-item) Take three-letter codes, ignore invalid ones
  • (mds-pref-theme,mds-pref-theme-item) Ignore an invalid theme name, scheme or corner shape
  • (mds-emoji) Ignore a name outside the dictionary
  • (mds-input-otp) Submit a paste that fills the last cell instead of throwing
  • (mds-icon) Decode a base64 icon with its padding, draw a saved SVG file inline
  • (mds-img) Skip a srcset-consumption entry without its level
  • (mds-bibliography) Describe author as a string, read an array per entry
  • (mds-avatar) Give every pair of initials a variant
  • (mds-horizontal-scroll) Measure the slotted elements, not the text between them
  • (mds-notification) Describe the element the badge sits on with its count
  • (mds-kpi-item) Build the accessible name from the parts that are there
  • (mds-price-table-list,mds-usage) Drop the main landmark and the document-edit roles
  • (mds-progress,mds-benchmark-bar) Keep the progressbar values valid and follow aria-hidden
  • (mds-toast) Announce the toast as a status message
  • (mds-spinner,mds-video-wall,mds-emoji) Follow the Magma animation preference
  • (mds-tree,mds-tree-item) Give the tree a structure and the branches their state
  • (mds-button,mds-filter-item) Click on Enter and Space as the pointer does, never while busy
  • (mds-input-otp) Leave Tab, Backspace and the shortcuts to the keyboard
  • (mds-details) Toggle on Space, and keep the closed content out of the tab order
  • (mds-file,mds-file-preview) Make the download cards buttons the keyboard activates
  • (mds-tooltip,mds-help) Show the tooltip on focus as on hover
  • (mds-tab-bar-item) Reach and activate the items from the keyboard
  • (mds-paginator,mds-paginator-item) Take the disabled arrows out of the tab order
  • (mds-breadcrumb,mds-breadcrumb-item) Keep the current page selected under the keyboard
  • (mds-modal,mds-status-bar) Let strict veto the swipe, and keep the status bar non-modal
  • (mds-radial-menu) Close the open menu on an outside click and on Escape
  • (mds-details) Keep an open details hidden inside a closed one
  • (mds-calendar,mds-calendar-cell) The cell properties reach the cells, the day colour paints
  • (mds-price-table-list-item) The supported icon takes its hover colour
  • (mds-table-cell,mds-table-row,mds-table) The -alt colours paint the sorted column
  • (mds-header,mds-header-bar) The icon colours of the header reach the hamburger
  • (mds-price-table-features,mds-price-table-features-cell) The border colour reaches the cells
  • (mds-toast) MdsToastClose waits for the exit transition, not for 1000 ms
  • (mds-tree-item) MdsTreeItemCollapse waits for the branch transition, not for 1000 ms
  • (mds-keyboard-key) The space key is wide again
  • (mds-paginator,mds-paginator-item) The item properties reach the items from the paginator
  • (mds-push-notification-item) Style only the tones its type accepts
  • (mds-card) Read the layout from the slots, again when the content changes
  • (mds-table) Show the batch bar for buttons added after load
  • (mds-price-table-list) Show the items rendered after load
  • (mds-tree,mds-tree-item) Open on load, hand the props to the items that arrive later
  • (mds-calendar) Show the preselection area for the content of its slot
  • (mds-pref,mds-pref-language,mds-pref-theme) Size on load, follow the items added later
  • (mds-avatar-stack) Count the avatars added after load
  • (mds-img) Follow the consumption preference the page applies
  • (storybook) Turn off the boolean controls of the form-associated components
  • (mds-tree-item) Round the corners of the folder toggle again
  • (mds-input-switch) Round the focus ring of the checkbox and radio again
  • (mds-avatar) Show the sources in one order, never an empty avatar
  • (mds-bibliography) Keep every first name, link the title only with a url
  • (mds-button-dropdown) Pass truncate to the label of the primary action
  • (mds-calendar-cell) Paint selection none as no selection, deprecate weekend
  • (mds-input-date-range-preselection) Keep the author's slot, let the click through
  • (mds-dropdown,mds-tooltip,mds-help) Keep the placement while it has room
  • (mds-emoji) Keep the mouse tracking off once stopFollowMouse is called
  • (mds-file,mds-file-preview) Show no extension for a filename without one
  • (mds-header) Hide the hamburger of the bar without a menu slot
  • (mds-header-bar) Open and close the menu of the header with setOpened
  • (mds-notification) Hide a dismissed badge with the disabled strategy too
  • (mds-pref) Show the reload notice in the visible panel
  • (mds-pref-theme) Keep a name, scheme or corner shape set after load
  • (mds-pref-contrast) Stop querying the contrast of the system on each pick
  • (mds-push-notification) Hide once the last item goes, label the clear button
  • (mds-stepper-bar) Hide the other panels with the hidden attribute
  • (mds-keyboard) Accept the keys of a shortcut in any order
  • (mds-note) Turn Enter into a click only while the note is deletable
  • (mds-calendar-cell) Le...
Read more

icons@1.95.0

Choose a tag to compare

@github-actions github-actions released this 20 Oct 10:24

[icons@1.95.0] - 2026-10-20

Build

  • (design-tokens,identity,styles,svg-icons,icons,magma) Ship CHANGELOG.md in every package

Documentation

  • (icons) Document the icon-adding workflow

Features

  • (icons) Add new icons

design-tokens@15.2.1

Choose a tag to compare

[design-tokens@15.2.1] - 2026-10-20

Bug Fixes

  • (design-tokens) Ui no longer overwrites a JavaScript or package.json config with JSON
  • (design-tokens) The CLI no longer prints Ajv strict-mode warnings on every start
  • (design-tokens,styles,magma) The shadow ink stays dark in dark mode, no more light halo
  • (design-tokens,styles) Transition-cosmetic animates translate, scale and rotate
  • (design-tokens) The playground draft no longer wins silently over a changed config

styles@17.2.0

Choose a tag to compare

@github-actions github-actions released this 15 Oct 16:05

[styles@17.2.0] - 2026-10-15

Bug Fixes

  • (styles) Keep the box of the hydrated components against tailwind's preflight
  • (styles) Give every role of the semantic tailwind bridge its light default as fallback

Build

  • (design-tokens,identity,styles,svg-icons,icons,magma) Ship CHANGELOG.md in every package

Documentation

  • (styles) Add the tailwind half of editor autocomplete to the readme

Features

  • (styles) Carry the role descriptions into consumption.json and the editor sheet
  • (styles) Fall back to the round scale where corner-shape cannot be drawn

Refactor

  • (styles) Move the token resolver of properties.ts into css-resolve.ts