@maggioli-design-system/styles 17.2.0 → 17.2.1

package/CHANGELOG.md

@@ -4,6 +4,17 @@ Every release of `@maggioli-design-system/styles`, newest first. Each section is
 release with the same tag, written by git-cliff from the conventional commits of the
 package.
 
+## [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
+
 ## [styles@17.2.0] - 2026-10-15
 
 ### Bug Fixes

package/dist/css/colors-hex-brand-rnd.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.0
+@magma-design-system/design-tokens v15.2.1
 Generated by Style Dictionary
 Do not edit directly
-Generated at Thu, 15 Oct 2026 16:07:06 GMT
+Generated at Tue, 20 Oct 2026 14:18:30 GMT
 */
 
 :root {

package/dist/css/colors-hex-brand.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.0
+@magma-design-system/design-tokens v15.2.1
 Generated by Style Dictionary
 Do not edit directly
-Generated at Thu, 15 Oct 2026 16:07:06 GMT
+Generated at Tue, 20 Oct 2026 14:18:30 GMT
 */
 
 :root {

package/dist/css/colors-hex-default.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.0
+@magma-design-system/design-tokens v15.2.1
 Generated by Style Dictionary
 Do not edit directly
-Generated at Thu, 15 Oct 2026 16:07:06 GMT
+Generated at Tue, 20 Oct 2026 14:18:30 GMT
 */
 
 :root {

package/dist/css/colors-hex-label.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.0
+@magma-design-system/design-tokens v15.2.1
 Generated by Style Dictionary
 Do not edit directly
-Generated at Thu, 15 Oct 2026 16:07:06 GMT
+Generated at Tue, 20 Oct 2026 14:18:30 GMT
 */
 
 :root {

package/dist/css/colors-hex-status.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.0
+@magma-design-system/design-tokens v15.2.1
 Generated by Style Dictionary
 Do not edit directly
-Generated at Thu, 15 Oct 2026 16:07:06 GMT
+Generated at Tue, 20 Oct 2026 14:18:30 GMT
 */
 
 :root {

package/dist/css/colors-hex-theme.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.0
+@magma-design-system/design-tokens v15.2.1
 Generated by Style Dictionary
 Do not edit directly
-Generated at Thu, 15 Oct 2026 16:07:06 GMT
+Generated at Tue, 20 Oct 2026 14:18:30 GMT
 */
 
 :root {

package/dist/css/colors-hex-tones.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.0
+@magma-design-system/design-tokens v15.2.1
 Generated by Style Dictionary
 Do not edit directly
-Generated at Thu, 15 Oct 2026 16:07:06 GMT
+Generated at Tue, 20 Oct 2026 14:18:30 GMT
 */
 
 :root {

package/dist/css/colors-hex.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.0
+@magma-design-system/design-tokens v15.2.1
 Generated by Style Dictionary
 Do not edit directly
-Generated at Thu, 15 Oct 2026 16:07:06 GMT
+Generated at Tue, 20 Oct 2026 14:18:30 GMT
 */
 
 :root {

package/dist/css/colors-rgb-brand-rnd.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.0
+@magma-design-system/design-tokens v15.2.1
 Generated by Style Dictionary
 Do not edit directly
-Generated at Thu, 15 Oct 2026 16:07:06 GMT
+Generated at Tue, 20 Oct 2026 14:18:30 GMT
 */
 
 :root {

package/dist/css/colors-rgb-brand.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.0
+@magma-design-system/design-tokens v15.2.1
 Generated by Style Dictionary
 Do not edit directly
-Generated at Thu, 15 Oct 2026 16:07:06 GMT
+Generated at Tue, 20 Oct 2026 14:18:30 GMT
 */
 
 :root {

package/dist/css/colors-rgb-default.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.0
+@magma-design-system/design-tokens v15.2.1
 Generated by Style Dictionary
 Do not edit directly
-Generated at Thu, 15 Oct 2026 16:07:06 GMT
+Generated at Tue, 20 Oct 2026 14:18:30 GMT
 */
 
 :root {

package/dist/css/colors-rgb-label.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.0
+@magma-design-system/design-tokens v15.2.1
 Generated by Style Dictionary
 Do not edit directly
-Generated at Thu, 15 Oct 2026 16:07:06 GMT
+Generated at Tue, 20 Oct 2026 14:18:30 GMT
 */
 
 :root {

package/dist/css/colors-rgb-status.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.0
+@magma-design-system/design-tokens v15.2.1
 Generated by Style Dictionary
 Do not edit directly
-Generated at Thu, 15 Oct 2026 16:07:06 GMT
+Generated at Tue, 20 Oct 2026 14:18:30 GMT
 */
 
 :root {

package/dist/css/colors-rgb-theme.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.0
+@magma-design-system/design-tokens v15.2.1
 Generated by Style Dictionary
 Do not edit directly
-Generated at Thu, 15 Oct 2026 16:07:06 GMT
+Generated at Tue, 20 Oct 2026 14:18:30 GMT
 */
 
 :root {

package/dist/css/colors-rgb-tones.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.0
+@magma-design-system/design-tokens v15.2.1
 Generated by Style Dictionary
 Do not edit directly
-Generated at Thu, 15 Oct 2026 16:07:06 GMT
+Generated at Tue, 20 Oct 2026 14:18:30 GMT
 */
 
 :root {

package/dist/css/colors-rgb.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.0
+@magma-design-system/design-tokens v15.2.1
 Generated by Style Dictionary
 Do not edit directly
-Generated at Thu, 15 Oct 2026 16:07:06 GMT
+Generated at Tue, 20 Oct 2026 14:18:30 GMT
 */
 
 :root {

package/dist/css/globals.css

@@ -485,7 +485,7 @@
 
 @property --mds-badge-radius {
   inherits: true;
-  initial-value: 16px;
+  initial-value: 1000px;
   syntax: '<length>';
 }
 
@@ -619,28 +619,16 @@
   syntax: '<color>';
 }
 
-@property --mds-breadcrumb-button-color-current {
-  inherits: true;
-  initial-value: rgb(5 5 5);
-  syntax: '<color>';
-}
-
-@property --mds-breadcrumb-current-button-color {
-  inherits: true;
-  initial-value: rgb(119 119 119);
-  syntax: '<color>';
-}
-
 /* mds-button-dropdown */
 @property --mds-button-dropdown-radius {
   inherits: true;
-  initial-value: 24px;
+  initial-value: 40px;
   syntax: '<length>';
 }
 
 @property --mds-button-dropdown-window-radius {
   inherits: true;
-  initial-value: 24px;
+  initial-value: 40px;
   syntax: '<length>';
 }
 
@@ -669,18 +657,6 @@
   syntax: '<number>';
 }
 
-@property --mds-button-border-high-contrast-hover-width {
-  inherits: true;
-  initial-value: 3px;
-  syntax: '<length>';
-}
-
-@property --mds-button-border-high-contrast-width {
-  inherits: true;
-  initial-value: 2px;
-  syntax: '<length>';
-}
-
 @property --mds-button-border-hover-opacity {
   inherits: true;
   initial-value: 0.75;
@@ -729,6 +705,12 @@
   syntax: '<length>';
 }
 
+@property --mds-button-label-transform {
+  inherits: true;
+  initial-value: uppercase;
+  syntax: 'none | capitalize | uppercase | lowercase | full-width | full-size-kana';
+}
+
 @property --mds-button-line-clamp {
   inherits: true;
   initial-value: 1;
@@ -741,223 +723,6 @@
   syntax: '<length>';
 }
 
-/* mds-calendar-cell */
-@property --mds-calendar-cell-background {
-  inherits: true;
-  initial-value: transparent;
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-boundaries-background {
-  inherits: true;
-  initial-value: transparent;
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-boundaries-color {
-  inherits: true;
-  initial-value: rgb(5 5 5);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-boundaries-padding {
-  inherits: true;
-  initial-value: 4px;
-  syntax: '<length>';
-}
-
-@property --mds-calendar-cell-color {
-  inherits: true;
-  initial-value: rgb(5 5 5);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-disabled-background {
-  inherits: true;
-  initial-value: transparent;
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-disabled-color {
-  inherits: true;
-  initial-value: rgb(119 119 119);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-other-month-background {
-  inherits: true;
-  initial-value: transparent;
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-other-month-color {
-  inherits: true;
-  initial-value: rgb(119 119 119);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-preselection-current-month-background {
-  inherits: true;
-  initial-value: rgb(204 212 226);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-preselection-current-month-boundaries-background {
-  inherits: true;
-  initial-value: rgb( 236 237 240 );
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-preselection-current-month-boundaries-color {
-  inherits: true;
-  initial-value: rgb(119 119 119);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-preselection-current-month-color {
-  inherits: true;
-  initial-value: rgb(119 119 119);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-preselection-other-month-background {
-  inherits: true;
-  initial-value: rgb(220 224 231);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-preselection-other-month-boundaries-background {
-  inherits: true;
-  initial-value: rgb(248 248 248);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-preselection-other-month-boundaries-color {
-  inherits: true;
-  initial-value: rgb(119 119 119);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-preselection-other-month-color {
-  inherits: true;
-  initial-value: rgb(119 119 119);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-preselection-today-background {
-  inherits: true;
-  initial-value: rgb(220 224 231);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-preselection-today-color {
-  inherits: true;
-  initial-value: rgb(7 76 204);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-selection-boundaries-border-radius {
-  inherits: true;
-  initial-value: 200px;
-  syntax: '<length>';
-}
-
-@property --mds-calendar-cell-selection-current-month-background {
-  inherits: true;
-  initial-value: rgb(36 103 231);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-selection-current-month-boundaries-background {
-  inherits: true;
-  initial-value: rgb(248 248 248);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-selection-current-month-boundaries-color {
-  inherits: true;
-  initial-value: rgb(73 73 73);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-selection-current-month-color {
-  inherits: true;
-  initial-value: rgb(255 255 255);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-selection-current-month-weekend-background {
-  inherits: true;
-  initial-value: rgb(7 76 204);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-selection-current-month-weekend-boundaries-background {
-  inherits: true;
-  initial-value: rgb( 7 76 204 );
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-selection-current-month-weekend-boundaries-color {
-  inherits: true;
-  initial-value: rgb(73 73 73);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-selection-current-month-weekend-color {
-  inherits: true;
-  initial-value: rgb(148 172 218);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-selection-other-month-background {
-  inherits: true;
-  initial-value: rgb(204 212 226);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-selection-other-month-boundaries-background {
-  inherits: true;
-  initial-value: rgb(236 237 240);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-selection-other-month-boundaries-color {
-  inherits: true;
-  initial-value: rgb(119 119 119);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-selection-other-month-color {
-  inherits: true;
-  initial-value: rgb(99 99 99);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-selection-week-boundaries-border-radius {
-  inherits: true;
-  initial-value: 200px;
-  syntax: '<length>';
-}
-
-@property --mds-calendar-cell-size {
-  inherits: true;
-  initial-value: 48px;
-  syntax: '<length>';
-}
-
-@property --mds-calendar-cell-weekend-background {
-  inherits: true;
-  initial-value: transparent;
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-weekend-color {
-  inherits: true;
-  initial-value: rgb(99 99 99);
-  syntax: '<color>';
-}
-
 /* mds-calendar */
 @property --mds-calendar-background {
   inherits: true;
@@ -967,16 +732,10 @@
 
 @property --mds-calendar-border-radius {
   inherits: true;
-  initial-value: 16px;
+  initial-value: 28px;
   syntax: '<length>';
 }
 
-@property --mds-calendar-day-number-color {
-  inherits: true;
-  initial-value: rgb(5 5 5);
-  syntax: '<color>';
-}
-
 @property --mds-calendar-max-width {
   inherits: true;
   initial-value: 480px;
@@ -1017,7 +776,7 @@
 /* mds-chip */
 @property --mds-chip-background {
   inherits: true;
-  initial-value: rgb(225 225 225);
+  initial-value: rgb(255 255 255);
   syntax: '<color>';
 }
 
@@ -1079,7 +838,7 @@
 
 @property --mds-dropdown-backdrop-duration {
   inherits: true;
-  initial-value: 200ms;
+  initial-value: 300ms;
   syntax: '<time>';
 }
 
@@ -1309,7 +1068,7 @@
 
 @property --mds-entity-icon-radius {
   inherits: true;
-  initial-value: 12px;
+  initial-value: 20px;
   syntax: '<length>';
 }
 
@@ -1444,18 +1203,6 @@
   syntax: 'true | false';
 }
 
-@property --mds-header-color {
-  inherits: true;
-  initial-value: rgb(5 5 5);
-  syntax: '<color>';
-}
-
-@property --mds-header-icon-color {
-  inherits: true;
-  initial-value: rgb(5 5 5);
-  syntax: '<color>';
-}
-
 @property --mds-header-inline-margin {
   inherits: true;
   initial-value: 24px;
@@ -1738,12 +1485,6 @@
   syntax: '<color>';
 }
 
-@property --mds-input-date-icon-color-rgb {
-  inherits: true;
-  initial-value: 0 0 0;
-  syntax: '<integer>+';
-}
-
 @property --mds-input-date-variant-color-rgb {
   inherits: true;
   initial-value: 0 0 0;
@@ -2115,13 +1856,13 @@
 /* mds-keyboard */
 @property --mds-keyboard-background {
   inherits: true;
-  initial-value: rgb(201 208 219);
+  initial-value: rgb(208 208 208);
   syntax: '<color>';
 }
 
 @property --mds-keyboard-background-default {
   inherits: true;
-  initial-value: rgb(201 208 219);
+  initial-value: rgb(208 208 208);
   syntax: '<color>';
 }
 
@@ -2431,67 +2172,6 @@
   syntax: '<number>';
 }
 
-/* mds-paginator-item */
-@property --mds-paginator-item-background {
-  inherits: true;
-  initial-value: transparent;
-  syntax: '<color>';
-}
-
-@property --mds-paginator-item-background-disabled {
-  inherits: true;
-  initial-value: rgb(225 225 225);
-  syntax: '<color>';
-}
-
-@property --mds-paginator-item-background-hover {
-  inherits: true;
-  initial-value: rgb(208 208 208);
-  syntax: '<color>';
-}
-
-@property --mds-paginator-item-background-selected {
-  inherits: true;
-  initial-value: rgb(7 76 204);
-  syntax: '<color>';
-}
-
-@property --mds-paginator-item-color {
-  inherits: true;
-  initial-value: rgb(5 5 5);
-  syntax: '<color>';
-}
-
-@property --mds-paginator-item-color-disabled {
-  inherits: true;
-  initial-value: rgb(119 119 119);
-  syntax: '<color>';
-}
-
-@property --mds-paginator-item-color-hover {
-  inherits: true;
-  initial-value: rgb(5 5 5);
-  syntax: '<color>';
-}
-
-@property --mds-paginator-item-color-selected {
-  inherits: true;
-  initial-value: rgb(255 255 255);
-  syntax: '<color>';
-}
-
-@property --mds-paginator-item-radius {
-  inherits: true;
-  initial-value: 200px;
-  syntax: '<length>';
-}
-
-@property --mds-paginator-item-size {
-  inherits: true;
-  initial-value: 36px;
-  syntax: '<length>';
-}
-
 /* mds-paginator */
 @property --mds-paginator-background {
   inherits: true;
@@ -2606,11 +2286,7 @@
 }
 
 /* mds-price-table-features */
-@property --mds-price-table-features-border-color {
-  inherits: true;
-  initial-value: rgb(219 219 219);
-  syntax: '<color>';
-}
+
 
 /* mds-price-table-list-item */
 @property --mds-price-table-list-item-supported-icon-color {
@@ -2659,7 +2335,7 @@
 
 @property --mds-progress-radius {
   inherits: true;
-  initial-value: 28px;
+  initial-value: 40px;
   syntax: '<length>';
 }
 
@@ -3106,7 +2782,13 @@
 /* mds-table */
 @property --mds-table-border-color {
   inherits: true;
-  initial-value: rgb(196 196 196);
+  initial-value: rgb(219 219 219);
+  syntax: '<color>';
+}
+
+@property --mds-table-separator-color {
+  inherits: true;
+  initial-value: rgb(219 219 219);
   syntax: '<color>';
 }
 
@@ -3141,6 +2823,13 @@
   syntax: '<color>';
 }
 
+/* mds-toast-region */
+@property --mds-toast-region-gap {
+  inherits: true;
+  initial-value: 8px;
+  syntax: '<length>';
+}
+
 /* mds-toast */
 @property --mds-toast-background {
   inherits: true;
@@ -3224,7 +2913,7 @@
 /* mds-tree-item */
 @property --mds-tree-item-branch-border-radius {
   inherits: true;
-  initial-value: 16px;
+  initial-value: 28px;
   syntax: '<length>';
 }
 
@@ -3235,24 +2924,6 @@
   syntax: 'true | false';
 }
 
-@property --mds-tree-toggle-icon-chevron-expanded-background {
-  inherits: true;
-  initial-value: rgb(36 103 231);
-  syntax: '<color>';
-}
-
-@property --mds-tree-toggle-icon-chevron-expanded-color {
-  inherits: true;
-  initial-value: rgb(255 255 255);
-  syntax: '<color>';
-}
-
-@property --mds-tree-toggle-icon-folder-expanded-color {
-  inherits: true;
-  initial-value: rgb(36 103 231);
-  syntax: '<color>';
-}
-
 /* mds-url-view */
 @property --mds-url-view-background {
   inherits: true;
@@ -3268,7 +2939,7 @@
 
 @property --mds-url-view-radius {
   inherits: true;
-  initial-value: 12px;
+  initial-value: 20px;
   syntax: '<length>';
 }
 

package/dist/css/hydrated.css

@@ -105,6 +105,7 @@ mds-table-header-cell:not(:is([hydrated], .hydrated)),
 mds-table-row:not(:is([hydrated], .hydrated)),
 mds-text:not(:is([hydrated], .hydrated)),
 mds-toast:not(:is([hydrated], .hydrated)),
+mds-toast-region:not(:is([hydrated], .hydrated)),
 mds-tooltip:not(:is([hydrated], .hydrated)),
 mds-tree:not(:is([hydrated], .hydrated)),
 mds-tree-item:not(:is([hydrated], .hydrated)),
@@ -239,6 +240,7 @@ mds-table-header-cell:is([hydrated], .hydrated),
 mds-table-row:is([hydrated], .hydrated),
 mds-text:is([hydrated], .hydrated),
 mds-toast:is([hydrated], .hydrated),
+mds-toast-region:is([hydrated], .hydrated),
 mds-tooltip:is([hydrated], .hydrated),
 mds-tree:is([hydrated], .hydrated),
 mds-tree-item:is([hydrated], .hydrated),

package/dist/css/semantic.css

@@ -187,16 +187,18 @@
   --magma-accent-ai-on-emphasis: var(--magma-tint-text-on-emphasis);
 }
 
-/* Dark ink: the canvas, not pure black (spec 6.5) */
+/* Dark: the fill ink takes the canvas (spec 6.5), the shadow ink pure black (spec 6.1c) */
 :root:not(.pref-theme-scheme-light).pref-mode-dark,
 :root.pref-theme-scheme-dark {
   --magma-tint-text-on-emphasis: var(--magma-tint-default);
+  --magma-shadow-ink: var(--tone-neutral-seed);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not(.pref-theme-scheme-light).pref-mode-system,
   :root:not([data-magma-pref]) {
     --magma-tint-text-on-emphasis: var(--magma-tint-default);
+    --magma-shadow-ink: var(--tone-neutral-seed);
   }
 }
 

package/dist/css/tailwind-theme-color.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.0
+@magma-design-system/design-tokens v15.2.1
 Generated by Style Dictionary
 Do not edit directly
-Generated at Thu, 15 Oct 2026 16:07:06 GMT
+Generated at Tue, 20 Oct 2026 14:18:30 GMT
 */
 
 @theme {

package/dist/css/tailwind-theme-typography.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.0
+@magma-design-system/design-tokens v15.2.1
 Generated by Style Dictionary
 Do not edit directly
-Generated at Thu, 15 Oct 2026 16:07:06 GMT
+Generated at Tue, 20 Oct 2026 14:18:30 GMT
 */
 
 @theme {
@@ -238,7 +238,7 @@ Generated at Thu, 15 Oct 2026 16:07:06 GMT
 }
 
 @utility transition-cosmetic {
-  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
+  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, rotate, scale, transform, translate, width;
   transition-timing-function: var(--default-transition-timing-function); /* default cubic-bezier(0.4, 0, 0.2, 1) */
   transition-duration: var(--default-transition-duration); /* default 150ms */
 }

package/dist/css/tokens.editor.css

@@ -240,7 +240,7 @@
     --shadow-ring-strong-4: 0 0 0 4px rgb(var(--tone-neutral-01) / 0.6);
 
     /* motion */
-    --transition-property-cosmetic: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
+    --transition-property-cosmetic: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, rotate, scale, transform, translate, width;
     --transition-property-size: height, margin, padding, width;
 
     /* palette */
@@ -908,7 +908,7 @@
     --mds-badge-border-color: rgb(47 182 243);
     --mds-badge-border-width: 1px;
     --mds-badge-color: rgb(255 255 255);
-    --mds-badge-radius: 16px;
+    --mds-badge-radius: 1000px;
     --mds-badge-transition-duration: var(--duration-200);
 
     /* component: mds-banner */
@@ -921,7 +921,7 @@
     --mds-banner-icon-color: rgb(7 76 204);
     --mds-banner-radius: 40px;
     --mds-banner-transition-duration: 300ms;
-    --mds-banner-shadow: var(--shadow-lg-sharp);
+    --mds-banner-shadow: none;
     --mds-banner-transition-timing-function: var(--ease-in-out-expo, cubic-bezier(1, 0, 0, 1));
 
     /* component: mds-bibliography */
@@ -931,13 +931,14 @@
 
     /* component: mds-breadcrumb */
     --mds-breadcrumb-button-background-disabled: transparent;
-    --mds-breadcrumb-button-color-current: rgb(5 5 5);
-    --mds-breadcrumb-current-button-color: rgb(119 119 119);
     --mds-breadcrumb-arrow-depth-color: rgb(var(--magma-text-subtle));
     --mds-breadcrumb-button-background-hover: rgb(var(--magma-wash-soft));
+    --mds-breadcrumb-button-background-selected: rgb(var(--magma-wash-base));
     --mds-breadcrumb-button-background: transparent;
     --mds-breadcrumb-button-color-hover: rgb(var(--magma-text-default));
+    --mds-breadcrumb-button-color-selected: var( --mds-breadcrumb-button-color-current, var(--mds-breadcrumb-current-button-color, rgb(var(--magma-text-default))) );
     --mds-breadcrumb-button-color: rgb(var(--magma-text-default));
+    --mds-button-background: var(--mds-breadcrumb-button-background-disabled);
 
     /* component: mds-breadcrumb-item */
     --mds-breadcrumb-item-arrow-depth-color: rgb(99 99 99);
@@ -951,7 +952,6 @@
     --mds-breadcrumb-item-button-border-color-rgb-selected: var(--magma-wash-base);
     --mds-breadcrumb-item-button-border-color-rgb-hover: var(--magma-wash-soft);
     --mds-breadcrumb-item-button-border-color-rgb: var( --mds-breadcrumb-item-button-border-color-rgb-hover );
-    --mds-button-background: var(--mds-breadcrumb-item-button-background);
     --mds-button-border-color-rgb: var(--mds-breadcrumb-item-button-border-color-rgb);
     --mds-button-color: var(--mds-breadcrumb-item-button-color);
     --mds-button-radius: var(--mds-breadcrumb-item-button-border-radius);
@@ -959,8 +959,6 @@
     /* component: mds-button */
     --mds-button-await-duration: 0.725s;
     --mds-button-border-default-opacity: 0;
-    --mds-button-border-high-contrast-hover-width: 3px;
-    --mds-button-border-high-contrast-width: 2px;
     --mds-button-border-hover-opacity: 0.75;
     --mds-button-border-opacity: 0;
     --mds-button-border-tone-outline-hover-width: 3px;
@@ -968,6 +966,7 @@
     --mds-button-border-tone-weak-hover-width: 2px;
     --mds-button-border-width: 2px;
     --mds-button-gap: 8px;
+    --mds-button-label-transform: uppercase;
     --mds-button-line-clamp: 1;
     --mds-spinner-duration: var(--mds-button-await-duration);
     --mds-button-border-hover-width: --spacing(50);
@@ -976,66 +975,27 @@
     --mds-text-line-clamp: var(--mds-button-line-clamp);
 
     /* component: mds-button-dropdown */
-    --mds-button-dropdown-radius: 24px;
-    --mds-button-dropdown-window-radius: 24px;
+    --mds-button-dropdown-radius: 40px;
+    --mds-button-dropdown-window-radius: 40px;
 
     /* component: mds-calendar */
     --mds-calendar-background: rgb(248 248 248);
-    --mds-calendar-border-radius: 16px;
-    --mds-calendar-day-number-color: rgb(5 5 5);
+    --mds-calendar-border-radius: 28px;
     --mds-calendar-max-width: 480px;
     --mds-calendar-padding: 16px;
     --mds-calendar-select-month-or-year-height: 36px;
     --mds-calendar-select-month-or-year-width: 224px;
+    --mds-calendar-day-number-color: rgb(var(--magma-text-default));
     --mds-calendar-cell-gap: --spacing(50);
     --mds-calendar-cell-other-month-visibility: visible;
 
-    /* component: mds-calendar-cell */
-    --mds-calendar-cell-background: transparent;
-    --mds-calendar-cell-boundaries-background: transparent;
-    --mds-calendar-cell-boundaries-color: rgb(5 5 5);
-    --mds-calendar-cell-boundaries-padding: 4px;
-    --mds-calendar-cell-color: rgb(5 5 5);
-    --mds-calendar-cell-disabled-background: transparent;
-    --mds-calendar-cell-disabled-color: rgb(119 119 119);
-    --mds-calendar-cell-other-month-background: transparent;
-    --mds-calendar-cell-other-month-color: rgb(119 119 119);
-    --mds-calendar-cell-preselection-current-month-background: rgb(204 212 226);
-    --mds-calendar-cell-preselection-current-month-boundaries-background: rgb( 236 237 240 );
-    --mds-calendar-cell-preselection-current-month-boundaries-color: rgb(119 119 119);
-    --mds-calendar-cell-preselection-current-month-color: rgb(119 119 119);
-    --mds-calendar-cell-preselection-other-month-background: rgb(220 224 231);
-    --mds-calendar-cell-preselection-other-month-boundaries-background: rgb(248 248 248);
-    --mds-calendar-cell-preselection-other-month-boundaries-color: rgb(119 119 119);
-    --mds-calendar-cell-preselection-other-month-color: rgb(119 119 119);
-    --mds-calendar-cell-preselection-today-background: rgb(220 224 231);
-    --mds-calendar-cell-preselection-today-color: rgb(7 76 204);
-    --mds-calendar-cell-selection-boundaries-border-radius: 200px;
-    --mds-calendar-cell-selection-current-month-background: rgb(36 103 231);
-    --mds-calendar-cell-selection-current-month-boundaries-background: rgb(248 248 248);
-    --mds-calendar-cell-selection-current-month-boundaries-color: rgb(73 73 73);
-    --mds-calendar-cell-selection-current-month-color: rgb(255 255 255);
-    --mds-calendar-cell-selection-current-month-weekend-background: rgb(7 76 204);
-    --mds-calendar-cell-selection-current-month-weekend-boundaries-background: rgb( 7 76 204 );
-    --mds-calendar-cell-selection-current-month-weekend-boundaries-color: rgb(73 73 73);
-    --mds-calendar-cell-selection-current-month-weekend-color: rgb(148 172 218);
-    --mds-calendar-cell-selection-other-month-background: rgb(204 212 226);
-    --mds-calendar-cell-selection-other-month-boundaries-background: rgb(236 237 240);
-    --mds-calendar-cell-selection-other-month-boundaries-color: rgb(119 119 119);
-    --mds-calendar-cell-selection-other-month-color: rgb(99 99 99);
-    --mds-calendar-cell-selection-week-boundaries-border-radius: 200px;
-    --mds-calendar-cell-size: 48px;
-    --mds-calendar-cell-weekend-background: transparent;
-    --mds-calendar-cell-weekend-color: rgb(99 99 99);
-    --mds-calendar-cell-inner-background: var(--mds-calendar-cell-preselection-today-background);
-
     /* component: mds-card */
     --mds-card-gap: 0;
     --mds-card-padding: 0;
     --mds-card-background: rgb(var(--magma-surface-raised));
 
     /* component: mds-chip */
-    --mds-chip-background: rgb(225 225 225);
+    --mds-chip-background: rgb(255 255 255);
     --mds-chip-border: transparent;
     --mds-chip-color: rgb(73 73 73);
     --mds-chip-icon-background: rgb(7 76 204);
@@ -1044,7 +1004,7 @@
     --mds-chip-color-selected: rgb(var(--magma-text-default));
     --mds-chip-icon-background-selected: rgb(var(--magma-accent-emphasis-hover));
     --mds-chip-icon-color-selected: rgb(var(--magma-text-on-emphasis));
-    --mds-chip-background-selected: rgb(var(--magma-wash-base));
+    --mds-chip-background-selected: rgb(var(--magma-surface-overlay));
     --mds-chip-border-selected: transparent;
     --mds-chip-shadow: var(--shadow-sm-sharp);
     --mds-chip-shadow-selected: var(--shadow-sm-sharp);
@@ -1058,7 +1018,7 @@
 
     /* component: mds-dropdown */
     --mds-dropdown-arrow-background: rgb(255 255 255);
-    --mds-dropdown-backdrop-duration: 200ms;
+    --mds-dropdown-backdrop-duration: 300ms;
     --mds-dropdown-backdrop-z-index: 4000;
     --mds-dropdown-background: rgb(255 255 255);
     --mds-dropdown-drop-shadow-color-rgb: rgb(5 5 5);
@@ -1067,7 +1027,7 @@
     --mds-dropdown-transform-from: scale(0.9) translateY(-3%);
     --mds-dropdown-transform-to: scale(1) translate(0, 0);
     --mds-dropdown-z-index: 5000;
-    --mds-dropdown-drop-shadow: drop-shadow(0 0 4px rgb(var(--magma-shadow-ink) / 0.075)) drop-shadow(0 0 4px rgb(var(--magma-shadow-ink) / 0.45)) drop-shadow(0 0 4px rgb(var(--magma-shadow-ink) / 0.45));
+    --mds-dropdown-drop-shadow: drop-shadow(0 0 4px rgb(var(--magma-text-default) / 0.075)) drop-shadow(0 0 4px rgb(var(--magma-text-default) / 0.45)) drop-shadow(0 0 4px rgb(var(--magma-text-default) / 0.45));
     --mds-dropdown-ease: var(--ease-out-expo);
 
     /* component: mds-emoji */
@@ -1108,7 +1068,7 @@
     --mds-entity-detail-color: rgb(73 73 73);
     --mds-entity-icon-background: rgb(216 222 254);
     --mds-entity-icon-color: rgb(63 94 248);
-    --mds-entity-icon-radius: 12px;
+    --mds-entity-icon-radius: 20px;
 
     /* component: mds-file */
     --mds-file-preview-icon-color: rgb(var(--label-amaranth-04));
@@ -1145,8 +1105,6 @@
     --mds-header-backdrop-blur-strength: 2px;
     --mds-header-backdrop-height: 64px;
     --mds-header-backdrop-show: true;
-    --mds-header-color: rgb(5 5 5);
-    --mds-header-icon-color: rgb(5 5 5);
     --mds-header-inline-margin: 24px;
     --mds-header-inline-margin-mobile: 16px;
     --mds-header-modal-icon-color: rgb(255 255 255);
@@ -1221,7 +1179,6 @@
     --mds-input-date-field-background-empty: rgb(255 232 230);
     --mds-input-date-field-color-empty: rgb(89 0 0);
     --mds-input-date-icon-color: rgb(36 103 231);
-    --mds-input-date-icon-color-rgb: rgb(0 0 0);
     --mds-input-date-variant-color-rgb: rgb(0 0 0);
     --mds-input-date-ring: var(--shadow-ring-strong-2);
     --mds-input-date-shadow: 0 1px 3px 0 rgb(var(--mds-input-date-variant-color-rgb) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-date-variant-color-rgb) / 0.06);
@@ -1329,8 +1286,8 @@
     --mds-input-upload-drag-area-border: 3px dashed rgb(var(--magma-border-default));
 
     /* component: mds-keyboard */
-    --mds-keyboard-background: rgb(201 208 219);
-    --mds-keyboard-background-default: rgb(201 208 219);
+    --mds-keyboard-background: rgb(208 208 208);
+    --mds-keyboard-background-default: rgb(208 208 208);
     --mds-keyboard-background-fail: rgb(255 214 211);
     --mds-keyboard-background-pass: rgb(191 233 205);
     --mds-keyboard-color: rgb(99 99 99);
@@ -1343,7 +1300,7 @@
     --mds-keyboard-padding: 8px;
     --mds-keyboard-spinner-duration: 1s;
     --mds-keyboard-illumination-shadow: 0 0 3px 0 rgb(255 255 255 / 0.5);
-    --mds-keyboard-key-background: rgb(var(--tone-porcelain-06));
+    --mds-keyboard-key-background: rgb(var(--magma-wash-strong));
     --mds-keyboard-key-illumination-dark-opacity: 0.5;
     --mds-keyboard-key-illumination-light-opacity: 0.15;
     --mds-keyboard-key-illumination-shadow: 0 0 1px 0 rgb(255 255 255 / 0.5);
@@ -1405,7 +1362,7 @@
     --mds-modal-window-height: auto;
     --mds-modal-window-max-height: calc(100dvh - calc(var(--mds-modal-window-distance) * 2));
     --mds-modal-window-shadow: var(--shadow-ring-strong-2), var(--shadow-2xl);
-    --mds-modal-transition-timing-funciton: var(--ease-in-out-quint);
+    --mds-modal-transition-timing-function: var( --mds-modal-transition-timing-funciton, var(--ease-in-out-quint) );
 
     /* component: mds-note */
     --mds-note-background: rgb(253 236 186);
@@ -1441,16 +1398,6 @@
     --mds-paginator-transition-duration: var(--duration-200);
 
     /* component: mds-paginator-item */
-    --mds-paginator-item-background: transparent;
-    --mds-paginator-item-background-disabled: rgb(225 225 225);
-    --mds-paginator-item-background-selected: rgb(7 76 204);
-    --mds-paginator-item-color: rgb(5 5 5);
-    --mds-paginator-item-color-disabled: rgb(119 119 119);
-    --mds-paginator-item-color-hover: rgb(5 5 5);
-    --mds-paginator-item-color-selected: rgb(255 255 255);
-    --mds-paginator-item-size: 36px;
-    --mds-paginator-item-radius: 200px;
-    --mds-paginator-item-shadow-selected: var(--shadow-md-sharp);
     --mds-paginator-item-transition-duration: var(--duration-200);
 
     /* component: mds-pref-animation */
@@ -1471,7 +1418,7 @@
     --mds-pref-theme-item-color-variant-primary: rgb(36 103 231);
 
     /* component: mds-price-table-features */
-    --mds-price-table-features-border-color: rgb(219 219 219);
+    --mds-price-table-features-border-color: rgb(var(--magma-border-muted));
     --mds-price-table-features-padding: --spacing(300);
     --mds-price-table-features-transition-duration: var(--duration-200);
 
@@ -1502,7 +1449,7 @@
 
     /* component: mds-progress */
     --mds-progress-duration: 750ms;
-    --mds-progress-radius: 28px;
+    --mds-progress-radius: 40px;
     --mds-progress-transition-duration: var(--duration-300);
 
     /* component: mds-push-notification */
@@ -1541,8 +1488,8 @@
     --mds-radial-menu-transition-timing-function: var(--ease-out-expo);
     --mds-radial-menu-nth-siblings: 0;
     --mds-radial-menu-radius-current: 0;
-    --mds-radial-menu-is-full-circle: 1;
-    --mds-radial-menu-is-start-greater-than-end: 1;
+    --mds-radial-menu-is-full-circle: cos( clamp( 0deg, max(var(--private-radial-menu-sweep) - 360deg, 360deg - var(--private-radial-menu-sweep)) * 1000, 90deg ) );
+    --mds-radial-menu-is-start-greater-than-end: sin( clamp(-90deg, var(--private-radial-menu-sweep) * 1000, 90deg) );
     --mds-radial-menu-item-offset-per-child: calc( (var(--mds-radial-menu-angle-end) - var(--mds-radial-menu-angle-start)) / (var(--mds-radial-menu-nth-siblings) + var(--mds-radial-menu-is-full-circle)) );
     --mds-radial-menu-item-angle-offset: calc( var(--mds-radial-menu-direction) * var(--mds-radial-menu-item-index) * var(--mds-radial-menu-item-offset-per-child) );
     --mds-radial-menu-item-delay: calc( (var(--mds-radial-menu-item-index) + 1) * var(--mds-radial-menu-delay) );
@@ -1620,15 +1567,15 @@
     --mds-tab-tabs-wrapper-shadow: 0 0 0 --spacing(50) var(--mds-tab-tabs-wrapper-shadow-color) inset;
     --mds-tab-item-selected-background: rgb(var(--magma-wash-strong));
     --mds-tab-item-default-background: transparent;
-    --mds-tab-item-default-shadow: transparent;
+    --mds-tab-item-default-shadow: none;
     --mds-tab-item-hover-background: transparent;
     --mds-tab-item-hover-color: rgb(var(--magma-text-default));
-    --mds-tab-item-hover-shadow: transparent;
     --mds-tab-item-radius: min( calc(var(--mds-tab-tabs-radius) - var(--mds-tab-tabs-padding)), var(--magma-corner-cap) * var(--private-tab-item-height) );
     --mds-tab-scroll-behavior: smooth;
     --mds-tab-tabs-overflow-shadow: 0 0 var(--mds-tab-tabs-overflow-shadow-size) -2px rgb(0 0 0 / 0.375);
     --mds-tab-transition-timing-function: var(--ease-out-expo);
     --mds-tab-corner-shape: var(--magma-corner-shape);
+    --mds-tab-item-hover-shadow: none;
     --mds-tab-contents-height: auto;
 
     /* component: mds-tab-bar */
@@ -1645,7 +1592,8 @@
     --mds-button-corner-shape: var(--mds-tab-item-corner-shape, var(--magma-corner-shape));
 
     /* component: mds-table */
-    --mds-table-border-color: rgb(196 196 196);
+    --mds-table-border-color: rgb(219 219 219);
+    --mds-table-separator-color: rgb(219 219 219);
     --mds-table-background: rgb(var(--magma-wash-strong));
     --mds-table-body-background-hover: rgb(var(--magma-surface-default));
     --mds-table-color: rgb(var(--magma-text-default));
@@ -1669,8 +1617,8 @@
     /* component: mds-table-cell */
     --mds-table-cell-background: var(--mds-table-cell-background-alt);
     --mds-table-cell-color: var(--mds-table-cell-color-alt);
-    --mds-table-cell-background-alt: var(--mds-table-row-background-alt);
-    --mds-table-cell-color-alt: var(--mds-table-row-color-alt);
+    --mds-table-cell-background-alt: var(--mds-table-background);
+    --mds-table-cell-color-alt: var(--mds-table-color);
     --mds-table-cell-transition-duration: var(--duration-200);
 
     /* component: mds-table-footer */
@@ -1702,6 +1650,9 @@
     --mds-toast-width: auto;
     --mds-toast-shadow: var(--shadow-ring-strong-2);
 
+    /* component: mds-toast-region */
+    --mds-toast-region-gap: 8px;
+
     /* component: mds-tooltip */
     --mds-tooltip-arrow-background: rgb(255 255 255);
     --mds-tooltip-background: rgb(255 255 255);
@@ -1710,15 +1661,12 @@
     --mds-tooltip-transform-from: scale(0.9) translateY(calc(16px * -1));
     --mds-tooltip-transform-to: scale(1) translate(0, 0);
     --mds-tooltip-z-index: 6000;
-    --mds-tooltip-drop-shadow: drop-shadow(0 0 4px rgb(var(--magma-shadow-ink) / 0.075)) drop-shadow(0 0 4px rgb(var(--magma-shadow-ink) / 0.45)) drop-shadow(0 0 4px rgb(var(--magma-shadow-ink) / 0.45));
+    --mds-tooltip-drop-shadow: drop-shadow(0 0 4px rgb(var(--magma-text-default) / 0.075)) drop-shadow(0 0 4px rgb(var(--magma-text-default) / 0.45)) drop-shadow(0 0 4px rgb(var(--magma-text-default) / 0.45));
     --mds-tooltip-ease: var(--ease-out-expo);
 
     /* component: mds-tree */
     --mds-tree-branch-use-rounded-border: true;
-    --mds-tree-toggle-icon-chevron-expanded-background: rgb(36 103 231);
-    --mds-tree-toggle-icon-chevron-expanded-color: rgb(255 255 255);
-    --mds-tree-toggle-icon-folder-expanded-color: rgb(36 103 231);
-    --mds-tree-actions-border-radius: var(--radius-lg);
+    --mds-tree-actions-border-radius: var(--magma-radius-lg);
     --mds-tree-actions-gap: --spacing(50);
     --mds-tree-label-default-background: transparent;
     --mds-tree-label-hover-background: rgb(var(--magma-wash-soft));
@@ -1729,28 +1677,31 @@
     --mds-tree-branch-border-size: --spacing(50);
     --mds-tree-branch-dot-default-color: rgb(var(--magma-border-default));
     --mds-tree-branch-dot-expanded-color: rgb(var(--magma-border-strong));
-    --mds-tree-toggle-gap: --spacing(150);
+    --mds-tree-toggle-gap: --spacing(100);
     --mds-tree-toggle-icon-async-background: rgb(var(--magma-wash-base));
     --mds-tree-toggle-icon-async-color: rgb(var(--magma-accent-fg));
     --mds-tree-toggle-icon-chevron-default-background: rgb(var(--magma-accent-emphasis));
     --mds-tree-toggle-icon-chevron-default-color: rgb(var(--magma-text-on-emphasis));
+    --mds-tree-toggle-icon-chevron-expanded-background: var( --mds-tree-toggle-icon-chevron-default-background );
+    --mds-tree-toggle-icon-chevron-expanded-color: var(--mds-tree-toggle-icon-chevron-default-color);
     --mds-tree-toggle-icon-folder-default-background: rgb(var(--magma-wash-strong));
     --mds-tree-toggle-icon-folder-default-color: rgb(var(--magma-accent-emphasis));
+    --mds-tree-toggle-icon-folder-expanded-color: var(--mds-tree-toggle-icon-folder-default-color);
     --mds-tree-toggle-icon-position-right-default-background: transparent;
     --mds-tree-toggle-icon-position-right-default-color: rgb(var(--magma-text-subtle));
     --mds-tree-toggle-icon-position-right-expanded-background: transparent;
     --mds-tree-toggle-icon-position-right-expanded-color: rgb(var(--magma-text-subtle));
     --mds-tree-transition-duration: 300ms;
     --mds-tree-transition-timing-function: var(--ease-in-out-expo);
-    --mds-tree-toggle-border-radius: var(--radius-lg);
+    --mds-tree-toggle-border-radius: var(--magma-radius-lg);
     --mds-tree-toggle-size: --spacing(900);
 
     /* component: mds-tree-item */
-    --mds-tree-item-branch-border-radius: 16px;
+    --mds-tree-item-branch-border-radius: 28px;
     --mds-tree-item-children-padding-left: calc( calc(var(--mds-tree-item-toggle-size) - var(--mds-tree-item-branch-border-size)) / 2 );
     --mds-tree-item-icon-background-color: var( --mds-tree-item-toggle-icon-chevron-default-background );
     --mds-tree-item-icon-color: var(--mds-tree-item-toggle-icon-chevron-default-color);
-    --mds-tree-branch-border-radius: var(--radius-lg);
+    --mds-tree-branch-border-radius: var(--private-tree-item-branch-border-radius);
     --mds-tree-item-actions-border-radius: var(--mds-tree-actions-border-radius);
     --mds-tree-item-actions-gap: var(--mds-tree-actions-gap);
     --mds-tree-item-branch-border-color: var(--mds-tree-branch-border-color);
@@ -1762,17 +1713,17 @@
     --mds-tree-item-label-icon-default-color: var(--mds-tree-label-icon-default-color);
     --mds-tree-item-label-icon-hover-color: var(--mds-tree-label-icon-hover-color);
     --mds-tree-item-line-clamp: var(--mds-tree-line-clamp);
-    --mds-tree-item-toggle-gap: var(--mds-tree-toggle-gap);
+    --mds-tree-item-toggle-gap: var(--mds-tree-toggle-gap, --spacing(100));
     --mds-tree-item-toggle-icon-async-background: var(--mds-tree-toggle-icon-async-background);
     --mds-tree-item-toggle-icon-async-color: var(--mds-tree-toggle-icon-async-color);
     --mds-tree-item-toggle-icon-chevron-default-background: var( --mds-tree-toggle-icon-chevron-default-background );
     --mds-tree-item-toggle-icon-chevron-default-color: var( --mds-tree-toggle-icon-chevron-default-color );
-    --mds-tree-item-toggle-icon-chevron-expanded-background: var( --mds-tree-item-toggle-icon-chevron-default-background );
-    --mds-tree-item-toggle-icon-chevron-expanded-color: var( --mds-tree-item-toggle-icon-chevron-default-color );
+    --mds-tree-item-toggle-icon-chevron-expanded-background: var( --mds-tree-toggle-icon-chevron-expanded-background, var(--mds-tree-item-toggle-icon-chevron-default-background) );
+    --mds-tree-item-toggle-icon-chevron-expanded-color: var( --mds-tree-toggle-icon-chevron-expanded-color, var(--mds-tree-item-toggle-icon-chevron-default-color) );
     --mds-tree-item-toggle-icon-folder-default-background: var( --mds-tree-toggle-icon-folder-default-background );
     --mds-tree-item-toggle-icon-folder-default-color: var( --mds-tree-toggle-icon-folder-default-color );
     --mds-tree-item-toggle-icon-folder-expanded-background: var( --mds-tree-item-toggle-icon-folder-default-background );
-    --mds-tree-item-toggle-icon-folder-expanded-color: var( --mds-tree-item-toggle-icon-folder-default-color );
+    --mds-tree-item-toggle-icon-folder-expanded-color: var( --mds-tree-toggle-icon-folder-expanded-color, var(--mds-tree-item-toggle-icon-folder-default-color) );
     --mds-tree-item-toggle-icon-position-right-default-background: var( --mds-tree-toggle-icon-position-right-default-background );
     --mds-tree-item-toggle-icon-position-right-default-color: var( --mds-tree-toggle-icon-position-right-default-color );
     --mds-tree-item-toggle-icon-position-right-expanded-background: var( --mds-tree-toggle-icon-position-right-expanded-background );
@@ -1784,7 +1735,7 @@
     /* component: mds-url-view */
     --mds-url-view-background: rgb(237 237 237);
     --mds-url-view-color: rgb(5 5 5);
-    --mds-url-view-radius: 12px;
+    --mds-url-view-radius: 20px;
     --mds-url-view-shadow: var(--shadow-ring-2);
     --mds-url-view-transition-duration: var(--duration-200);
     --mds-url-view-header-shadow: var(--shadow-sm-sharp);

package/dist/css/transitions.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.0
+@magma-design-system/design-tokens v15.2.1
 Generated by Style Dictionary
 Do not edit directly
-Generated at Thu, 15 Oct 2026 16:07:06 GMT
+Generated at Tue, 20 Oct 2026 14:18:30 GMT
 */
 
 :root {
@@ -40,6 +40,6 @@ Generated at Thu, 15 Oct 2026 16:07:06 GMT
   --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
   --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
 
-  --transition-property-cosmetic: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
+  --transition-property-cosmetic: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, rotate, scale, transform, translate, width;
   --transition-property-size: height, margin, padding, width;
 }

package/dist/css/typography.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.0
+@magma-design-system/design-tokens v15.2.1
 Generated by Style Dictionary
 Do not edit directly
-Generated at Thu, 15 Oct 2026 16:07:06 GMT
+Generated at Tue, 20 Oct 2026 14:18:30 GMT
 */
 
 :root {

package/dist/tailwind/consumption.json

@@ -4593,7 +4593,7 @@
         "--default-transition-timing-function",
         "--default-transition-duration"
       ],
-      "css": ".transition-cosmetic {\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n  transition-timing-function: var(--default-transition-timing-function);\n  transition-duration: var(--default-transition-duration);\n}"
+      "css": ".transition-cosmetic {\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, rotate, scale, transform, translate, width;\n  transition-timing-function: var(--default-transition-timing-function);\n  transition-duration: var(--default-transition-duration);\n}"
     },
     "transition-size": {
       "source": "@maggioli-design-system/design-tokens/dist/css/tailwind-theme-typography.css",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/styles",
-  "version": "17.2.0",
+  "version": "17.2.1",
   "description": "This module contains SCSS and CSS styles used by Maggioli Design System, it also makes available a Tailwind config based on Maggioli design tokens.",
   "main": "./tailwind.config.js",
   "scripts": {
@@ -59,11 +59,11 @@
   ],
   "license": "ISC",
   "dependencies": {
-    "@fontsource/karla": "5.1.0",
-    "@fontsource/merriweather": "5.1.0",
-    "@fontsource/roboto": "5.1.0",
-    "@fontsource/roboto-mono": "5.1.0",
-    "@maggioli-design-system/design-tokens": "^15.2.0",
+    "@fontsource/karla": "5.3.0",
+    "@fontsource/merriweather": "5.3.0",
+    "@fontsource/roboto": "5.3.0",
+    "@fontsource/roboto-mono": "5.3.0",
+    "@maggioli-design-system/design-tokens": "^15.2.1",
     "normalize.css": "8.0.1"
   },
   "devDependencies": {
@@ -71,7 +71,7 @@
     "autoprefixer": "10.6.1",
     "handlebars": "4.7.10",
     "postcss-cli": "11.0.1",
-    "postcss": "8.5.30",
+    "postcss": "8.5.31",
     "postcss-import": "16.2.0",
     "tailwindcss": "4.3.3"
   }