@motifx-community/ui 0.1.0-beta.0 → 0.1.0-beta.2

package/dist/styles.css

@@ -376,6 +376,11 @@
     --mx-datagrid-filter-text-off-text-decoration: line-through;
     --mx-date-box-times-min-width: 6rem;
     --mx-date-box-times-max-height: 18rem;
+    --mx-date-range-box-field-width: 20rem;
+    --mx-date-range-box-separator-icon: var(--mx-icon-dash);
+    --mx-date-range-box-separator-size: 1rem;
+    --mx-date-range-box-presets-min-width: 9rem;
+    --mx-date-range-box-presets-max-height: 18rem;
     --mx-drawer-size: 20rem;
     --mx-drawer-inset: 0px;
     --mx-drawer-max-size: 85%;
@@ -404,8 +409,11 @@
     --mx-drop-down-field-box-cursor: default;
     --mx-drop-down-search-variant: outline;
     --mx-drop-down-search-size: sm;
+    --mx-drop-down-value-missing-text-decoration: underline;
     --mx-drop-down-chevron-icon: var(--mx-icon-chevron-down);
     --mx-drop-down-chevron-open-rotate: 0.5turn;
+    --mx-drop-down-spinner-border-end-color: rgb(0 0 0 / 0);
+    --mx-drop-down-spinner-shape-display: initial;
     --mx-field-width: 16rem;
     --mx-field-variant: outline;
     --mx-field-label-mode: top;
@@ -440,6 +448,8 @@
     --mx-field-box-underline-readonly-invalid-focus-shadow: initial;
     --mx-field-box-pressed-bg: initial;
     --mx-field-box-pressed-color: initial;
+    --mx-field-box-border-style: initial;
+    --mx-field-box-border-color: initial;
     --mx-field-frame-focus-border-color: initial;
     --mx-field-frame-focus-border-width: initial;
     --mx-field-frame-readonly-focus-border-width: initial;
@@ -495,6 +505,13 @@
     --mx-field-frame-end-readonly-focus-border-end-width: initial;
     --mx-field-frame-end-readonly-invalid-focus-border-block-width: initial;
     --mx-field-frame-end-readonly-invalid-focus-border-end-width: initial;
+    --mx-file-uploader-field-width: 26rem;
+    --mx-file-uploader-field-box-border-style: dashed;
+    --mx-file-uploader-action-variant: ghost;
+    --mx-file-uploader-select-hover-cursor: pointer;
+    --mx-file-uploader-upload-hover-cursor: pointer;
+    --mx-file-uploader-icon-icon: var(--mx-icon-file);
+    --mx-file-uploader-icon-size: 1.25rem;
     --mx-filterbuilder-elbow-length: 0px;
     --mx-filterbuilder-elbow-color: rgb(0 0 0 / 0);
     --mx-filterbuilder-value-width: 12rem;
@@ -551,6 +568,8 @@
     --mx-listbox-check-checked-disabled-border-color: rgb(0 0 0 / 0);
     --mx-listbox-idle-bg: rgb(0 0 0 / 0);
     --mx-listbox-container-margin: initial;
+    --mx-load-panel-cancel-variant: outline;
+    --mx-load-panel-pane-shown-min-width: 10rem;
     --mx-lookup-popup-width: 28rem;
     --mx-menu-item-white-space: nowrap;
     --mx-menu-item-checked-bg: initial;
@@ -586,6 +605,11 @@
     --mx-pagination-step-overlap: 0.375rem;
     --mx-pagination-number-width: 4rem;
     --mx-pagination-size-width: 5.5rem;
+    --mx-popover-enter-offset: 4px;
+    --mx-popover-close-variant: ghost;
+    --mx-popover-surface-max-width: 24rem;
+    --mx-popover-arrow-display: block;
+    --mx-popover-arrow-size: 0.75rem;
     --mx-popup-list-box-box-bg: rgb(0 0 0 / 0);
     --mx-popup-list-box-box-hover-bg: rgb(0 0 0 / 0);
     --mx-popup-list-box-box-focus-bg: rgb(0 0 0 / 0);
@@ -873,6 +897,7 @@
     --mx-scheduler-swipe-icon-display: block;
     --mx-scheduler-swipe-icon-icon: var(--mx-icon-chevron-end);
     --mx-scheduler-swipe-icon-previous-icon: var(--mx-icon-chevron-start);
+    --mx-scroll-view-panel-height: 3rem;
     --mx-sheet-inset: 0px;
     --mx-sheet-peek-height: 6rem;
     --mx-sheet-close-button-variant: ghost;
@@ -973,6 +998,10 @@
     --mx-slider-stop-radius: initial;
     --mx-slider-stop-bg: initial;
     --mx-slider-stop-active-bg: initial;
+    --mx-sortable-item-sortable-cursor: grab;
+    --mx-sortable-item-dragging-opacity: 0.4;
+    --mx-sortable-line-height: 2px;
+    --mx-sortable-ghost-opacity: 0.9;
     --mx-spinner-size-md: 1.5rem;
     --mx-spinner-size-lg: 2.5rem;
     --mx-spinner-ring-width-md: 0.1875rem;
@@ -995,6 +1024,21 @@
     --mx-spinner-shape-display: initial;
     --mx-spinner-shape-contained-bg: initial;
     --mx-spinner-shape-contained-scale: initial;
+    --mx-stepper-font-size-lg: 1rem;
+    --mx-stepper-line-min-length: 1rem;
+    --mx-stepper-size-sm: 1.5rem;
+    --mx-stepper-size-md: 1.75rem;
+    --mx-stepper-size-lg: 2.25rem;
+    --mx-stepper-padding-sm: 0.25rem;
+    --mx-stepper-padding-md: 0.375rem;
+    --mx-stepper-padding-lg: 0.5rem;
+    --mx-stepper-step-hover-cursor: pointer;
+    --mx-stepper-indicator-border-width: 1px;
+    --mx-stepper-indicator-disabled-bg: initial;
+    --mx-stepper-mark-done-icon: var(--mx-icon-check);
+    --mx-stepper-mark-error-icon: var(--mx-icon-danger);
+    --mx-stepper-line-height: 2px;
+    --mx-stepper-line-radius: initial;
     --mx-switch-track-width-sm: 2rem;
     --mx-switch-track-width-md: 2.5rem;
     --mx-switch-track-width-lg: 3rem;
@@ -1183,6 +1227,11 @@
     --mx-window-body-bg: initial;
     --mx-window-footer-padding: initial;
     --mx-window-footer-bg: initial;
+    --mx-wizard-rail-width: 14rem;
+    --mx-wizard-previous-variant: outline;
+    --mx-wizard-next-variant: solid;
+    --mx-wizard-next-tone: accent;
+    --mx-wizard-bar-border-top-width: 1px;
     --mx-accordion-font-size-sm: var(--mx-font-size-caption);
     --mx-accordion-font-size-md: var(--mx-font-size-body);
     --mx-accordion-font-size-lg: var(--mx-font-size-body-large);
@@ -1360,6 +1409,7 @@
     --mx-calendar-cell-focus-glow: var(--mx-focus-ring-halo);
     --mx-calendar-cell-focus-outline-offset: var(--mx-focus-ring-offset);
     --mx-calendar-cell-today-font-weight: var(--mx-font-weight-semibold);
+    --mx-calendar-cell-range-in-radius: var(--mx-radius-none);
     --mx-calendar-today-padding-block: var(--mx-space-1);
     --mx-calendar-today-padding-inline: var(--mx-space-3);
     --mx-calendar-today-radius: var(--mx-radius-md);
@@ -1660,6 +1710,13 @@
     --mx-date-box-times-beside-padding-start: var(--mx-space-1);
     --mx-date-box-times-beside-border-start-width: var(--mx-border-width-1);
     --mx-date-box-times-beside-border-start-color: var(--mx-color-stroke-divider);
+    --mx-date-range-box-popup-gap: var(--mx-space-1);
+    --mx-date-range-box-calendar-container-padding: var(--mx-space-2);
+    --mx-date-range-box-separator-margin-inline: var(--mx-space-1);
+    --mx-date-range-box-presets-focus-glow: var(--mx-focus-ring-halo);
+    --mx-date-range-box-presets-beside-padding-start: var(--mx-space-1);
+    --mx-date-range-box-presets-beside-border-start-width: var(--mx-border-width-1);
+    --mx-date-range-box-presets-beside-border-start-color: var(--mx-color-stroke-divider);
     --mx-drawer-font-family: var(--mx-font-family-sans);
     --mx-drawer-scrim-bg: var(--mx-color-bg-smoke);
     --mx-drawer-panel-border-color: var(--mx-color-stroke-surface);
@@ -1695,6 +1752,9 @@
     --mx-drop-down-field-frame-focus-border-width: var(--mx-border-width-1);
     --mx-drop-down-field-frame-border-bottom-color: var(--mx-color-stroke-control-default);
     --mx-drop-down-chevron-size: var(--mx-icon-size-sm);
+    --mx-drop-down-spinner-size: var(--mx-icon-size-sm);
+    --mx-drop-down-spinner-border-width: var(--mx-border-width-2);
+    --mx-drop-down-spinner-radius: var(--mx-radius-full);
     --mx-field-border-width: var(--mx-border-width-1);
     --mx-field-gap: var(--mx-space-2);
     --mx-field-label-gap: var(--mx-space-1);
@@ -1759,6 +1819,41 @@
     --mx-field-foot-font-size: var(--mx-font-size-caption);
     --mx-field-foot-line-height: var(--mx-font-line-caption);
     --mx-field-foot-shown-padding-top: var(--mx-space-1);
+    --mx-file-uploader-box-gap: var(--mx-space-3);
+    --mx-file-uploader-button-gap: var(--mx-space-2);
+    --mx-file-uploader-item-gap: var(--mx-space-2);
+    --mx-file-uploader-field-box-border-color: var(--mx-color-stroke-control-strong);
+    --mx-file-uploader-field-box-radius: var(--mx-radius-lg);
+    --mx-file-uploader-field-box-hover-bg: var(--mx-color-fill-subtle-secondary);
+    --mx-file-uploader-field-border-width: var(--mx-border-width-1);
+    --mx-file-uploader-field-padding-sm: var(--mx-space-2);
+    --mx-file-uploader-field-padding-md: var(--mx-space-3);
+    --mx-file-uploader-field-padding-lg: var(--mx-space-4);
+    --mx-file-uploader-select-padding-block: var(--mx-space-1);
+    --mx-file-uploader-select-padding-inline: var(--mx-space-3);
+    --mx-file-uploader-select-radius: var(--mx-radius-sm);
+    --mx-file-uploader-select-font-weight: var(--mx-font-weight-semibold);
+    --mx-file-uploader-select-border-width: var(--mx-border-width-1);
+    --mx-file-uploader-select-border-color: var(--mx-color-stroke-control-strong);
+    --mx-file-uploader-select-hover-bg: var(--mx-color-fill-subtle-secondary);
+    --mx-file-uploader-select-pressed-bg: var(--mx-color-fill-subtle-tertiary);
+    --mx-file-uploader-select-focus-glow: var(--mx-focus-ring-halo);
+    --mx-file-uploader-select-focus-outline-offset: var(--mx-focus-ring-offset);
+    --mx-file-uploader-select-disabled-border-color: var(--mx-color-stroke-control-default);
+    --mx-file-uploader-upload-padding-block: var(--mx-space-1);
+    --mx-file-uploader-upload-padding-inline: var(--mx-space-3);
+    --mx-file-uploader-upload-radius: var(--mx-radius-sm);
+    --mx-file-uploader-upload-font-weight: var(--mx-font-weight-semibold);
+    --mx-file-uploader-upload-border-width: var(--mx-border-width-1);
+    --mx-file-uploader-upload-focus-glow: var(--mx-focus-ring-halo);
+    --mx-file-uploader-upload-focus-outline-offset: var(--mx-focus-ring-offset);
+    --mx-file-uploader-list-margin-top: var(--mx-space-2);
+    --mx-file-uploader-list-gap: var(--mx-space-1);
+    --mx-file-uploader-item-padding-block: var(--mx-space-1);
+    --mx-file-uploader-item-padding-inline: var(--mx-space-2);
+    --mx-file-uploader-item-radius: var(--mx-radius-sm);
+    --mx-file-uploader-size-font-size: var(--mx-font-size-caption);
+    --mx-file-uploader-state-font-size: var(--mx-font-size-caption);
     --mx-filterbuilder-indent: var(--mx-space-6);
     --mx-filterbuilder-line-width: var(--mx-border-width-1);
     --mx-filterbuilder-line-color: var(--mx-color-stroke-divider);
@@ -1861,6 +1956,15 @@
     --mx-listbox-check-border-color: var(--mx-color-stroke-control-strong);
     --mx-listbox-check-disabled-border-color: var(--mx-color-stroke-control-default);
     --mx-listbox-check-checked-disabled-bg: var(--mx-color-fill-accent-disabled);
+    --mx-load-panel-padding: var(--mx-space-4);
+    --mx-load-panel-gap: var(--mx-space-3);
+    --mx-load-panel-shade-shaded-bg: var(--mx-color-bg-smoke);
+    --mx-load-panel-pane-shown-border-width: var(--mx-border-width-1);
+    --mx-load-panel-pane-shown-border-color: var(--mx-color-stroke-surface);
+    --mx-load-panel-pane-shown-radius: var(--mx-radius-lg);
+    --mx-load-panel-pane-shown-padding-block: var(--mx-space-4);
+    --mx-load-panel-pane-shown-padding-inline: var(--mx-space-5);
+    --mx-load-panel-message-font-size: var(--mx-font-size-body);
     --mx-lookup-column-gap: var(--mx-space-3);
     --mx-lookup-header-padding-block: var(--mx-space-1);
     --mx-lookup-header-padding-inline: var(--mx-control-padding-md);
@@ -1911,6 +2015,24 @@
     --mx-pagination-gap: var(--mx-space-1);
     --mx-pagination-info-font-size: var(--mx-font-size-body);
     --mx-pagination-info-padding-inline: var(--mx-space-2);
+    --mx-popover-offset: var(--mx-space-2);
+    --mx-popover-header-gap: var(--mx-space-2);
+    --mx-popover-surface-border-width: var(--mx-border-width-1);
+    --mx-popover-surface-border-color: var(--mx-color-stroke-surface);
+    --mx-popover-surface-radius: var(--mx-radius-lg);
+    --mx-popover-surface-font-size: var(--mx-font-size-body);
+    --mx-popover-surface-line-height: var(--mx-font-line-body);
+    --mx-popover-surface-focus-glow: var(--mx-focus-ring-halo);
+    --mx-popover-surface-focus-outline-offset: var(--mx-focus-ring-offset);
+    --mx-popover-arrow-border-width: var(--mx-border-width-1);
+    --mx-popover-arrow-border-color: var(--mx-color-stroke-surface);
+    --mx-popover-header-padding-block: var(--mx-space-2);
+    --mx-popover-header-padding-start: var(--mx-space-3);
+    --mx-popover-header-padding-end: var(--mx-space-2);
+    --mx-popover-header-border-bottom-width: var(--mx-border-width-1);
+    --mx-popover-header-border-bottom-color: var(--mx-color-stroke-divider);
+    --mx-popover-title-font-weight: var(--mx-font-weight-semibold);
+    --mx-popover-body-padding: var(--mx-space-3);
     --mx-popup-offset: var(--mx-space-1);
     --mx-popup-with-list-surface-padding-block: var(--mx-space-1);
     --mx-popup-list-item-height: var(--mx-control-height-md);
@@ -2173,6 +2295,11 @@
     --mx-scheduler-swipe-edge-border-color: var(--mx-color-stroke-card);
     --mx-scheduler-swipe-icon-width: var(--mx-icon-size-md);
     --mx-scheduler-swipe-icon-height: var(--mx-icon-size-md);
+    --mx-scroll-view-panel-gap: var(--mx-space-2);
+    --mx-scroll-view-box-focus-glow: var(--mx-focus-ring-halo);
+    --mx-scroll-view-box-focus-outline-offset: var(--mx-focus-ring-offset);
+    --mx-scroll-view-pull-font-size: var(--mx-font-size-caption);
+    --mx-scroll-view-bottom-font-size: var(--mx-font-size-caption);
     --mx-sheet-font-family: var(--mx-font-family-sans);
     --mx-sheet-top-gap: var(--mx-space-10);
     --mx-sheet-handle-area: var(--mx-space-6);
@@ -2235,6 +2362,11 @@
     --mx-slider-bubble-shadow: var(--mx-shadow-4);
     --mx-slider-tick-bg: var(--mx-color-stroke-control-strong);
     --mx-slider-tick-label-font-size: var(--mx-font-size-caption);
+    --mx-sortable-gap: var(--mx-space-1);
+    --mx-sortable-item-focus-glow: var(--mx-focus-ring-halo);
+    --mx-sortable-item-focus-outline-offset: var(--mx-focus-ring-offset);
+    --mx-sortable-line-radius: var(--mx-radius-full);
+    --mx-sortable-ghost-radius: var(--mx-radius-md);
     --mx-spinner-gap: var(--mx-space-2);
     --mx-spinner-cover-padding: var(--mx-space-4);
     --mx-spinner-cover-background: var(--mx-color-bg-glass);
@@ -2247,6 +2379,23 @@
     --mx-spinner-shape-size-sm: var(--mx-icon-size-md);
     --mx-spinner-morph-duration: calc(var(--mx-motion-duration-slow) * 15);
     --mx-spinner-spin-duration: calc(var(--mx-motion-duration-slow) * 9);
+    --mx-stepper-font-size-sm: var(--mx-font-size-caption);
+    --mx-stepper-font-size-md: var(--mx-font-size-body);
+    --mx-stepper-description-font-size: var(--mx-font-size-caption);
+    --mx-stepper-gap: var(--mx-space-2);
+    --mx-stepper-line-gap: var(--mx-space-2);
+    --mx-stepper-step-radius: var(--mx-radius-sm);
+    --mx-stepper-step-hover-bg: var(--mx-color-fill-subtle-secondary);
+    --mx-stepper-step-pressed-bg: var(--mx-color-fill-subtle-tertiary);
+    --mx-stepper-step-focus-glow: var(--mx-focus-ring-halo);
+    --mx-stepper-step-focus-outline-offset: var(--mx-focus-ring-offset);
+    --mx-stepper-indicator-radius: var(--mx-radius-full);
+    --mx-stepper-indicator-border-color: var(--mx-color-stroke-control-strong);
+    --mx-stepper-indicator-font-size: var(--mx-font-size-caption);
+    --mx-stepper-indicator-font-weight: var(--mx-font-weight-semibold);
+    --mx-stepper-indicator-disabled-border-color: var(--mx-color-stroke-control-default);
+    --mx-stepper-label-current-font-weight: var(--mx-font-weight-semibold);
+    --mx-stepper-line-bg: var(--mx-color-stroke-control-secondary);
     --mx-switch-thumb-inset: var(--mx-space-1);
     --mx-switch-gap: var(--mx-space-2);
     --mx-switch-text-padding: var(--mx-space-2);
@@ -2661,6 +2810,10 @@
     --mx-window-footer-border-top-color: var(--mx-color-stroke-divider);
     --mx-window-message-gap: var(--mx-space-3);
     --mx-window-message-icon-size: var(--mx-icon-size-lg);
+    --mx-wizard-gap: var(--mx-space-4);
+    --mx-wizard-bar-gap: var(--mx-space-2);
+    --mx-wizard-bar-padding-top: var(--mx-space-3);
+    --mx-wizard-bar-border-top-color: var(--mx-color-stroke-divider);
     --mx-accordion-container-color: var(--mx-color-fg-primary);
     --mx-accordion-container-list-bg: var(--mx-color-bg-card);
     --mx-accordion-item-separated-bg: var(--mx-color-bg-card);
@@ -2814,6 +2967,13 @@
     --mx-calendar-cell-selected-bg: var(--mx-color-accent-solid);
     --mx-calendar-cell-selected-color: var(--mx-color-accent-on-solid);
     --mx-calendar-cell-selected-hover-bg: var(--mx-color-accent-solid);
+    --mx-calendar-cell-range-start-bg: var(--mx-color-accent-solid);
+    --mx-calendar-cell-range-start-color: var(--mx-color-accent-on-solid);
+    --mx-calendar-cell-range-end-bg: var(--mx-color-accent-solid);
+    --mx-calendar-cell-range-end-color: var(--mx-color-accent-on-solid);
+    --mx-calendar-cell-range-single-bg: var(--mx-color-accent-solid);
+    --mx-calendar-cell-range-single-color: var(--mx-color-accent-on-solid);
+    --mx-calendar-cell-range-in-bg: var(--mx-color-accent-subtle);
     --mx-calendar-cell-disabled-color: var(--mx-color-fg-disabled);
     --mx-calendar-today-color: var(--mx-color-accent-fg);
     --mx-calendar-today-focus-outline-width: var(--mx-focus-ring-width);
@@ -2999,6 +3159,10 @@
     --mx-date-box-times-focus-outline-width: var(--mx-focus-ring-width);
     --mx-date-box-times-focus-outline-color: var(--mx-focus-ring-color);
     --mx-date-box-times-focus-outline-offset: calc(-1 * var(--mx-focus-ring-width));
+    --mx-date-range-box-separator-bg: var(--mx-color-fg-tertiary);
+    --mx-date-range-box-presets-focus-outline-width: var(--mx-focus-ring-width);
+    --mx-date-range-box-presets-focus-outline-color: var(--mx-focus-ring-color);
+    --mx-date-range-box-presets-focus-outline-offset: calc(-1 * var(--mx-focus-ring-width));
     --mx-disabled-element-color: var(--mx-color-fg-disabled);
     --mx-drawer-panel-bg: var(--mx-color-bg-surface);
     --mx-drawer-panel-shadow: var(--mx-elevation-dialog);
@@ -3014,8 +3178,10 @@
     --mx-drop-down-field-box-pressed-color: var(--mx-color-fg-primary);
     --mx-drop-down-field-frame-focus-border-bottom-color: var(--mx-color-accent-solid);
     --mx-drop-down-value-placeholder-color: var(--mx-color-fg-secondary);
+    --mx-drop-down-value-missing-color: var(--mx-color-fg-secondary);
     --mx-drop-down-chevron-color: var(--mx-color-fg-secondary);
     --mx-drop-down-chevron-disabled-color: var(--mx-color-fg-disabled);
+    --mx-drop-down-spinner-color: var(--mx-color-fg-secondary);
     --mx-field-box-bg: var(--mx-color-fill-control-default);
     --mx-field-box-color: var(--mx-color-fg-primary);
     --mx-field-box-hover-bg: var(--mx-color-fill-control-secondary);
@@ -3059,6 +3225,29 @@
     --mx-field-button-disabled-color: var(--mx-color-fg-disabled);
     --mx-field-foot-color: var(--mx-color-fg-secondary);
     --mx-field-message-invalid-color: var(--mx-color-danger-fg);
+    --mx-file-uploader-over-bg: var(--mx-color-accent-subtle);
+    --mx-file-uploader-over-border-color: var(--mx-color-accent-solid);
+    --mx-file-uploader-select-color: var(--mx-color-fg-primary);
+    --mx-file-uploader-select-bg: var(--mx-color-fill-control-default);
+    --mx-file-uploader-select-focus-outline-width: var(--mx-focus-ring-width);
+    --mx-file-uploader-select-focus-outline-color: var(--mx-focus-ring-color);
+    --mx-file-uploader-select-disabled-color: var(--mx-color-fg-disabled);
+    --mx-file-uploader-upload-color: var(--mx-color-accent-on-solid);
+    --mx-file-uploader-upload-bg: var(--mx-color-accent-solid);
+    --mx-file-uploader-upload-border-color: var(--mx-color-accent-solid);
+    --mx-file-uploader-upload-hover-bg: var(--mx-color-accent-solid-hover);
+    --mx-file-uploader-upload-pressed-bg: var(--mx-color-accent-solid-hover);
+    --mx-file-uploader-upload-focus-outline-width: var(--mx-focus-ring-width);
+    --mx-file-uploader-upload-focus-outline-color: var(--mx-focus-ring-color);
+    --mx-file-uploader-hint-color: var(--mx-color-fg-secondary);
+    --mx-file-uploader-item-error-bg: var(--mx-color-danger-subtle);
+    --mx-file-uploader-item-invalid-bg: var(--mx-color-danger-subtle);
+    --mx-file-uploader-icon-bg: var(--mx-color-fg-secondary);
+    --mx-file-uploader-name-color: var(--mx-color-fg-primary);
+    --mx-file-uploader-size-color: var(--mx-color-fg-secondary);
+    --mx-file-uploader-state-color: var(--mx-color-fg-secondary);
+    --mx-file-uploader-state-done-color: var(--mx-color-success-fg);
+    --mx-file-uploader-state-error-color: var(--mx-color-danger-fg);
     --mx-filterbuilder-container-color: var(--mx-color-fg-primary);
     --mx-layout-panel-card-bg: var(--mx-color-bg-card);
     --mx-layout-panel-card-shadow: var(--mx-elevation-card);
@@ -3094,6 +3283,9 @@
     --mx-listbox-keys-outline-width: var(--mx-focus-ring-width);
     --mx-listbox-keys-outline-color: var(--mx-focus-ring-color);
     --mx-listbox-keys-outline-offset: calc(-1 * var(--mx-focus-ring-width));
+    --mx-load-panel-pane-shown-bg: var(--mx-color-bg-surface);
+    --mx-load-panel-pane-shown-shadow: var(--mx-elevation-popup);
+    --mx-load-panel-message-color: var(--mx-color-fg-primary);
     --mx-lookup-header-color: var(--mx-color-fg-secondary);
     --mx-menu-item-color: var(--mx-color-fg-primary);
     --mx-menu-item-focus-outline-width: var(--mx-focus-ring-width);
@@ -3115,6 +3307,13 @@
     --mx-menubar-item-focus-outline-width: var(--mx-focus-ring-width);
     --mx-menubar-item-focus-outline-color: var(--mx-focus-ring-color);
     --mx-pagination-info-color: var(--mx-color-fg-secondary);
+    --mx-popover-surface-bg: var(--mx-color-bg-surface);
+    --mx-popover-surface-shadow: var(--mx-elevation-popup);
+    --mx-popover-surface-color: var(--mx-color-fg-primary);
+    --mx-popover-surface-focus-outline-width: var(--mx-focus-ring-width);
+    --mx-popover-surface-focus-outline-color: var(--mx-focus-ring-color);
+    --mx-popover-arrow-bg: var(--mx-color-bg-surface);
+    --mx-popover-title-color: var(--mx-color-fg-primary);
     --mx-popup-list-item-radius: var(--mx-item-radius);
     --mx-popup-surface-bg: var(--mx-color-bg-surface);
     --mx-popup-surface-shadow: var(--mx-elevation-popup);
@@ -3244,6 +3443,11 @@
     --mx-scheduler-swipe-edge-shadow: var(--mx-elevation-card);
     --mx-scheduler-swipe-edge-ready-bg: var(--mx-color-accent-solid);
     --mx-scheduler-swipe-edge-ready-color: var(--mx-color-accent-on-solid);
+    --mx-scroll-view-box-focus-outline-width: var(--mx-focus-ring-width);
+    --mx-scroll-view-box-focus-outline-color: var(--mx-focus-ring-color);
+    --mx-scroll-view-pull-color: var(--mx-color-fg-secondary);
+    --mx-scroll-view-pull-refreshing-color: var(--mx-color-fg-primary);
+    --mx-scroll-view-bottom-color: var(--mx-color-fg-secondary);
     --mx-sheet-panel-bg: var(--mx-color-bg-surface);
     --mx-sheet-panel-shadow: var(--mx-elevation-dialog);
     --mx-sheet-panel-color: var(--mx-color-fg-primary);
@@ -3267,6 +3471,11 @@
     --mx-slider-bubble-bg: var(--mx-color-accent-solid);
     --mx-slider-tick-label-color: var(--mx-color-fg-secondary);
     --mx-slider-tick-label-disabled-color: var(--mx-color-fg-disabled);
+    --mx-sortable-container-target-bg: var(--mx-color-accent-subtle);
+    --mx-sortable-item-focus-outline-width: var(--mx-focus-ring-width);
+    --mx-sortable-item-focus-outline-color: var(--mx-focus-ring-color);
+    --mx-sortable-line-bg: var(--mx-color-accent-solid);
+    --mx-sortable-ghost-shadow: var(--mx-elevation-popup);
     --mx-spinner-fg: var(--mx-color-fg-secondary);
     --mx-spinner-accent: var(--mx-color-accent-solid);
     --mx-spinner-neutral: var(--mx-color-fg-secondary);
@@ -3277,6 +3486,31 @@
     --mx-spinner-focus-width: var(--mx-focus-ring-width);
     --mx-spinner-focus-offset: calc(var(--mx-focus-ring-width) * -1);
     --mx-spinner-focus-color: var(--mx-focus-ring-color);
+    --mx-stepper-step-color: var(--mx-color-fg-secondary);
+    --mx-stepper-step-focus-outline-width: var(--mx-focus-ring-width);
+    --mx-stepper-step-focus-outline-color: var(--mx-focus-ring-color);
+    --mx-stepper-step-disabled-color: var(--mx-color-fg-disabled);
+    --mx-stepper-step-current-color: var(--mx-color-fg-primary);
+    --mx-stepper-step-done-color: var(--mx-color-fg-primary);
+    --mx-stepper-indicator-bg: var(--mx-color-fill-control-default);
+    --mx-stepper-indicator-color: var(--mx-color-fg-secondary);
+    --mx-stepper-indicator-current-bg: var(--mx-color-accent-solid);
+    --mx-stepper-indicator-current-border-color: var(--mx-color-accent-solid);
+    --mx-stepper-indicator-current-color: var(--mx-color-accent-on-solid);
+    --mx-stepper-indicator-done-bg: var(--mx-color-accent-solid);
+    --mx-stepper-indicator-done-border-color: var(--mx-color-accent-solid);
+    --mx-stepper-indicator-done-color: var(--mx-color-accent-on-solid);
+    --mx-stepper-indicator-error-bg: var(--mx-color-danger-solid);
+    --mx-stepper-indicator-error-border-color: var(--mx-color-danger-solid);
+    --mx-stepper-indicator-error-color: var(--mx-color-danger-on-solid);
+    --mx-stepper-indicator-disabled-color: var(--mx-color-fg-disabled);
+    --mx-stepper-mark-done-bg: var(--mx-color-accent-on-solid);
+    --mx-stepper-mark-error-bg: var(--mx-color-danger-on-solid);
+    --mx-stepper-label-error-color: var(--mx-color-danger-fg);
+    --mx-stepper-description-color: var(--mx-color-fg-secondary);
+    --mx-stepper-description-disabled-color: var(--mx-color-fg-disabled);
+    --mx-stepper-note-color: var(--mx-color-fg-secondary);
+    --mx-stepper-line-done-bg: var(--mx-color-accent-solid);
     --mx-switch-track-bg: var(--mx-color-fill-control-default);
     --mx-switch-track-checked-bg: var(--mx-color-accent-solid);
     --mx-switch-track-checked-border-color: var(--mx-color-accent-solid);
@@ -3508,6 +3742,7 @@
     --mx-button-group-item-face-toggled-color: var(--mx-color-accent-on-subtle);
     --mx-button-group-item-face-outline-toggled-color: var(--mx-color-accent-on-subtle);
     --mx-button-group-item-face-ghost-toggled-color: var(--mx-color-accent-on-subtle);
+    --mx-calendar-cell-range-in-color: var(--mx-color-accent-on-subtle);
     --mx-card-card-filled-bg: var(--mx-color-fill-neutral);
     --mx-chip-chip-bg: var(--mx-color-fill-neutral);
     --mx-chip-chip-accent-color: var(--mx-color-accent-on-subtle);
@@ -3629,6 +3864,9 @@
     --mx-number-box-spin-layout: inline;
     --mx-number-box-glyph-inline-up-icon: initial;
     --mx-number-box-glyph-inline-down-icon: initial;
+    --mx-popover-enter-offset: 10px;
+    --mx-popover-header-border-bottom-width: initial;
+    --mx-popover-header-border-bottom-color: initial;
     --mx-popup-list-box-box-disabled-shadow: 0px 0px 0px 0px rgb(0 0 0 / 0);
     --mx-popup-list-item-height: 2.25rem;
     --mx-popup-list-box-space-box-padding-block: 0px;
@@ -3713,6 +3951,9 @@
     --mx-spinner-ring-width-md: 0.25rem;
     --mx-spinner-track-color: rgb(0 0 0 / 0);
     --mx-spinner-shape-size-md: 2rem;
+    --mx-stepper-size-sm: 1.25rem;
+    --mx-stepper-size-md: 1.5rem;
+    --mx-stepper-size-lg: 2rem;
     --mx-switch-gap: 0.625rem;
     --mx-switch-track-disabled-bg: rgb(0 0 0 / 0);
     --mx-tabdocs-tab-title-bg: rgb(0 0 0 / 0);
@@ -3883,6 +4124,7 @@
     --mx-slider-core-disabled-bg: var(--mx-color-fill-accent-disabled);
     --mx-slider-bubble-border-width: var(--mx-border-width-1);
     --mx-slider-bubble-border-color: var(--mx-color-stroke-card);
+    --mx-sortable-ghost-radius: var(--mx-radius-sm);
     --mx-switch-track-bg: var(--mx-color-fill-subtle-tertiary);
     --mx-switch-track-hover-bg: var(--mx-color-fill-subtle-secondary);
     --mx-switch-track-pressed-bg: var(--mx-color-stroke-control-default);
@@ -4128,6 +4370,7 @@
     --mx-field-indicator-readonly-invalid-focus-shadow: initial;
     --mx-field-indicator-filled-readonly-invalid-focus-shadow: initial;
     --mx-field-indicator-underline-readonly-invalid-focus-shadow: initial;
+    --mx-file-uploader-select-bg: initial;
     --mx-list-item-active-color: initial;
     --mx-listbox-field-box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 0);
     --mx-listbox-field-frame-border-color: rgb(0 0 0 / 0);
@@ -4138,6 +4381,15 @@
     --mx-listbox-field-indicator-invalid-focus-shadow: none;
     --mx-listbox-field-indicator-readonly-focus-shadow: none;
     --mx-listbox-field-indicator-readonly-invalid-focus-shadow: none;
+    --mx-load-panel-pane-shown-border-width: initial;
+    --mx-load-panel-pane-shown-border-color: initial;
+    --mx-popover-enter-offset: 6px;
+    --mx-popover-surface-border-width: initial;
+    --mx-popover-surface-border-color: initial;
+    --mx-popover-arrow-border-width: initial;
+    --mx-popover-arrow-border-color: initial;
+    --mx-popover-header-border-bottom-width: initial;
+    --mx-popover-header-border-bottom-color: initial;
     --mx-popup-list-box-box-disabled-shadow: 0px 0px 0px 0px rgb(0 0 0 / 0);
     --mx-radiogroup-size-sm: 1rem;
     --mx-radiogroup-size-md: 1.125rem;
@@ -4167,6 +4419,15 @@
     --mx-scheduler-swipe-edge-border-color: initial;
     --mx-sheet-list-box-box-disabled-shadow: 0px 0px 0px 0px rgb(0 0 0 / 0);
     --mx-skeleton-animation: pulse;
+    --mx-stepper-padding-sm: 0.375rem;
+    --mx-stepper-padding-md: 0.5rem;
+    --mx-stepper-padding-lg: 0.625rem;
+    --mx-stepper-indicator-current-border-color: initial;
+    --mx-stepper-indicator-done-border-color: initial;
+    --mx-stepper-indicator-error-border-color: initial;
+    --mx-stepper-indicator-disabled-border-color: initial;
+    --mx-stepper-indicator-border-width: initial;
+    --mx-stepper-indicator-border-color: initial;
     --mx-switch-track-height-md: 1.375rem;
     --mx-tabdocs-indicator-height: 3px;
     --mx-tabdocs-autohide-indicator-height: 3px;
@@ -4177,6 +4438,8 @@
     --mx-treeview-spinner-duration: 1080ms;
     --mx-treeview-search-variant: filled;
     --mx-window-bar-dialog-color: initial;
+    --mx-wizard-bar-border-top-width: initial;
+    --mx-wizard-bar-border-top-color: initial;
     --mx-accordion-content-padding: var(--mx-space-5);
     --mx-accordion-container-separated-gap: var(--mx-space-3);
     --mx-avatar-square-radius-xs: var(--mx-radius-sm);
@@ -4199,6 +4462,7 @@
     --mx-combo-box-field-frame-focus-border-width: var(--mx-border-width-2);
     --mx-combo-box-field-frame-border-bottom-color: var(--mx-color-stroke-control-strong);
     --mx-date-box-calendar-container-padding: var(--mx-space-3);
+    --mx-date-range-box-calendar-container-padding: var(--mx-space-3);
     --mx-drawer-panel-start-radius-end: var(--mx-radius-xl);
     --mx-drawer-panel-end-radius-start: var(--mx-radius-xl);
     --mx-drawer-panel-top-radius-bottom: var(--mx-radius-xl);
@@ -4242,6 +4506,9 @@
     --mx-field-frame-readonly-invalid-focus-border-width: var(--mx-border-width-2);
     --mx-field-frame-filled-readonly-invalid-focus-border-width: var(--mx-border-width-2);
     --mx-field-frame-underline-readonly-invalid-focus-border-width: var(--mx-border-width-2);
+    --mx-file-uploader-select-radius: var(--mx-radius-md);
+    --mx-file-uploader-upload-radius: var(--mx-radius-md);
+    --mx-file-uploader-item-radius: var(--mx-radius-md);
     --mx-form-layout-row-gap: var(--mx-space-5);
     --mx-form-layout-column-gap: var(--mx-space-6);
     --mx-form-layout-group-padding: var(--mx-space-5);
@@ -4289,6 +4556,10 @@
     --mx-skeleton-duration: calc(var(--mx-motion-duration-slow) * 4);
     --mx-skeleton-bone-text-radius: var(--mx-radius-sm);
     --mx-skeleton-bone-rect-radius: var(--mx-radius-lg);
+    --mx-sortable-ghost-radius: var(--mx-radius-lg);
+    --mx-stepper-step-radius: var(--mx-radius-md);
+    --mx-stepper-line-radius: var(--mx-radius-full);
+    --mx-stepper-line-bg: var(--mx-color-stroke-divider);
     --mx-switch-gap: var(--mx-space-3);
     --mx-tabs-pill-gap: var(--mx-space-2);
     --mx-tabs-panel-padding: var(--mx-space-5);
@@ -4316,6 +4587,10 @@
     --mx-scheduler-appointment-lifted-shadow: var(--mx-elevation-popup);
     --mx-scheduler-swipe-edge-bg: var(--mx-color-accent-subtle);
     --mx-scheduler-swipe-edge-shadow: var(--mx-elevation-popup);
+    --mx-stepper-indicator-done-bg: var(--mx-color-accent-subtle);
+    --mx-stepper-indicator-error-bg: var(--mx-color-danger-subtle);
+    --mx-stepper-indicator-error-color: var(--mx-color-danger-fg);
+    --mx-stepper-mark-error-bg: var(--mx-color-danger-fg);
     --mx-recurrence-editor-day-button-face-toggled-bg: var(--mx-color-selection-bg);
     --mx-recurrence-editor-day-button-face-toggled-color: var(--mx-color-selection-fg);
     --mx-recurrence-editor-day-button-face-toggled-hover-bg: var(--mx-color-selection-bg);
@@ -4324,6 +4599,9 @@
     --mx-recurrence-editor-day-button-face-outline-toggled-border-color: var(--mx-color-selection-bg);
     --mx-recurrence-editor-day-button-face-outline-toggled-hover-bg: var(--mx-color-selection-bg);
     --mx-scheduler-swipe-edge-color: var(--mx-color-accent-on-subtle);
+    --mx-stepper-indicator-bg: var(--mx-color-fill-neutral);
+    --mx-stepper-indicator-done-color: var(--mx-color-accent-on-subtle);
+    --mx-stepper-mark-done-bg: var(--mx-color-accent-on-subtle);
   }
 }
 
@@ -4353,6 +4631,12 @@
     --mx-listbox-field-indicator-invalid-focus-shadow: none;
     --mx-listbox-field-indicator-readonly-focus-shadow: none;
     --mx-listbox-field-indicator-readonly-invalid-focus-shadow: none;
+    --mx-popover-enter-offset: 6px;
+    --mx-popover-arrow-display: initial;
+    --mx-popover-arrow-size: initial;
+    --mx-popover-arrow-bg: initial;
+    --mx-popover-arrow-border-width: initial;
+    --mx-popover-arrow-border-color: initial;
     --mx-recurrence-editor-day-button-variant: outline;
     --mx-scheduler-timeline-cell-width: 4.5rem;
     --mx-scheduler-timeline-lane-size: 2rem;
@@ -4369,6 +4653,16 @@
     --mx-scheduler-swipe-edge-border-color: initial;
     --mx-scheduler-unavailable-display: initial;
     --mx-scheduler-unavailable-image: initial;
+    --mx-sortable-line-height: 1px;
+    --mx-stepper-size-md: 1.875rem;
+    --mx-stepper-size-lg: 2.375rem;
+    --mx-stepper-padding-sm: 0.375rem;
+    --mx-stepper-padding-md: 0.5rem;
+    --mx-stepper-padding-lg: 0.625rem;
+    --mx-stepper-indicator-done-bg: initial;
+    --mx-stepper-indicator-error-bg: initial;
+    --mx-stepper-indicator-disabled-border-color: initial;
+    --mx-stepper-line-height: 1px;
     --mx-treeview-spinner-duration: 960ms;
     --mx-window-bar-dialog-color: initial;
     --mx-avatar-square-radius-sm: var(--mx-radius-xs);
@@ -4376,6 +4670,12 @@
     --mx-avatar-square-radius-lg: var(--mx-radius-sm);
     --mx-avatar-square-radius-xl: var(--mx-radius-md);
     --mx-breadcrumb-link-radius: var(--mx-radius-full);
+    --mx-file-uploader-select-radius: var(--mx-radius-md);
+    --mx-file-uploader-select-font-weight: var(--mx-font-weight-medium);
+    --mx-file-uploader-upload-radius: var(--mx-radius-md);
+    --mx-file-uploader-upload-font-weight: var(--mx-font-weight-medium);
+    --mx-file-uploader-item-radius: var(--mx-radius-md);
+    --mx-popover-title-font-weight: var(--mx-font-weight-medium);
     --mx-recurrence-editor-day-button-face-radius: var(--mx-radius-full);
     --mx-recurrence-editor-day-button-face-padding-inline: var(--mx-space-2);
     --mx-recurrence-editor-days-gap: var(--mx-space-2);
@@ -4400,6 +4700,12 @@
     --mx-scheduler-agenda-row-radius: var(--mx-radius-md);
     --mx-scheduler-agenda-content-gap: var(--mx-space-3);
     --mx-scheduler-agenda-text-font-weight: var(--mx-font-weight-regular);
+    --mx-sortable-ghost-radius: var(--mx-radius-lg);
+    --mx-stepper-step-radius: var(--mx-radius-md);
+    --mx-stepper-indicator-border-color: var(--mx-color-stroke-control-default);
+    --mx-stepper-indicator-font-weight: var(--mx-font-weight-medium);
+    --mx-stepper-label-current-font-weight: var(--mx-font-weight-medium);
+    --mx-stepper-line-bg: var(--mx-color-stroke-divider);
     --mx-combo-box-field-box-bg: var(--mx-color-fill-control-tertiary);
     --mx-combo-box-field-box-hover-bg: var(--mx-color-fill-control-default);
     --mx-combo-box-field-box-focus-bg: var(--mx-color-fill-control-tertiary);
@@ -4430,6 +4736,10 @@
     --mx-scheduler-resize-grip-shadow: var(--mx-elevation-card);
     --mx-scheduler-swipe-edge-shadow: var(--mx-elevation-window);
     --mx-scheduler-swipe-edge-ready-bg: var(--mx-color-accent-subtle);
+    --mx-stepper-indicator-done-color: var(--mx-color-accent-fg);
+    --mx-stepper-indicator-error-color: var(--mx-color-danger-fg);
+    --mx-stepper-mark-done-bg: var(--mx-color-accent-fg);
+    --mx-stepper-mark-error-bg: var(--mx-color-danger-fg);
     --mx-tabdocs-menu-search-box-bg: var(--mx-color-fill-control-tertiary);
     --mx-recurrence-editor-day-button-face-toggled-bg: var(--mx-color-selection-bg);
     --mx-recurrence-editor-day-button-face-toggled-color: var(--mx-color-selection-fg);
@@ -4562,6 +4872,10 @@
     --mx-drop-down-field-box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 0);
     --mx-drop-down-field-frame-focus-border-width: 3px;
     --mx-drop-down-search-variant: filled;
+    --mx-drop-down-spinner-border-width: initial;
+    --mx-drop-down-spinner-border-end-color: initial;
+    --mx-drop-down-spinner-radius: initial;
+    --mx-drop-down-spinner-shape-display: block;
     --mx-field-variant: filled;
     --mx-field-label-mode: floating;
     --mx-field-notch: cut;
@@ -4618,6 +4932,7 @@
     --mx-field-label-floating-color: initial;
     --mx-field-button-hover-color: initial;
     --mx-field-button-pressed-color: initial;
+    --mx-file-uploader-select-bg: initial;
     --mx-form-layout-caption-float: inline-start;
     --mx-form-layout-group-border-width: initial;
     --mx-form-layout-group-border-color: initial;
@@ -4642,11 +4957,24 @@
     --mx-listbox-check-radius: 2px;
     --mx-listbox-check-disabled-bg: rgb(0 0 0 / 0);
     --mx-listbox-check-bg: initial;
+    --mx-load-panel-cancel-variant: ghost;
+    --mx-load-panel-pane-shown-border-width: initial;
+    --mx-load-panel-pane-shown-border-color: initial;
     --mx-menu-item-height: 2.75rem;
     --mx-menu-panel-gap: 2px;
     --mx-menu-check-disabled-color: currentcolor;
     --mx-menu-icon-disabled-color: currentcolor;
     --mx-menubar-bar-radius: initial;
+    --mx-popover-enter-offset: 0px;
+    --mx-popover-surface-border-width: initial;
+    --mx-popover-surface-border-color: initial;
+    --mx-popover-header-border-bottom-width: initial;
+    --mx-popover-header-border-bottom-color: initial;
+    --mx-popover-arrow-display: initial;
+    --mx-popover-arrow-size: initial;
+    --mx-popover-arrow-bg: initial;
+    --mx-popover-arrow-border-width: initial;
+    --mx-popover-arrow-border-color: initial;
     --mx-popup-list-box-box-disabled-shadow: 0px 0px 0px 0px rgb(0 0 0 / 0);
     --mx-popup-list-container-padding-block: 0px;
     --mx-popup-list-box-space-box-padding-block: 0px;
@@ -4823,6 +5151,23 @@
     --mx-spinner-ring-display: none;
     --mx-spinner-shape-display: block;
     --mx-spinner-shape-contained-scale: 0.8;
+    --mx-stepper-size-sm: 1.25rem;
+    --mx-stepper-size-md: 1.5rem;
+    --mx-stepper-size-lg: 2rem;
+    --mx-stepper-padding-sm: 0.375rem;
+    --mx-stepper-padding-md: 0.5rem;
+    --mx-stepper-padding-lg: 0.75rem;
+    --mx-stepper-step-radius: initial;
+    --mx-stepper-indicator-current-border-color: initial;
+    --mx-stepper-indicator-done-border-color: initial;
+    --mx-stepper-indicator-error-border-color: initial;
+    --mx-stepper-indicator-disabled-border-color: initial;
+    --mx-stepper-indicator-border-width: initial;
+    --mx-stepper-indicator-border-color: initial;
+    --mx-stepper-mark-error-icon: var(--mx-icon-caution);
+    --mx-stepper-label-current-font-weight: initial;
+    --mx-stepper-line-height: 1px;
+    --mx-stepper-line-done-bg: initial;
     --mx-switch-track-width-sm: 2.75rem;
     --mx-switch-track-width-md: 3.25rem;
     --mx-switch-track-width-lg: 3.75rem;
@@ -4897,6 +5242,9 @@
     --mx-window-footer-padding-block: initial;
     --mx-window-footer-padding-inline: initial;
     --mx-window-message-icon-size: 1.5rem;
+    --mx-wizard-previous-variant: ghost;
+    --mx-wizard-bar-border-top-width: initial;
+    --mx-wizard-bar-border-top-color: initial;
     --mx-accordion-height-sm: var(--mx-control-height-md);
     --mx-accordion-height-md: var(--mx-control-height-lg);
     --mx-accordion-padding-sm: var(--mx-space-3);
@@ -5029,6 +5377,11 @@
     --mx-field-frame-underline-readonly-border-bottom-color: var(--mx-color-stroke-control-default);
     --mx-field-indicator-radius: calc(0.25rem - var(--mx-border-width-1));
     --mx-field-button-radius: var(--mx-radius-full);
+    --mx-file-uploader-select-radius: var(--mx-radius-full);
+    --mx-file-uploader-select-font-weight: var(--mx-font-weight-medium);
+    --mx-file-uploader-upload-radius: var(--mx-radius-full);
+    --mx-file-uploader-upload-font-weight: var(--mx-font-weight-medium);
+    --mx-file-uploader-item-radius: var(--mx-radius-full);
     --mx-form-layout-group-radius: var(--mx-radius-md);
     --mx-form-layout-caption-font-weight: var(--mx-font-weight-medium);
     --mx-layout-panel-outline-radius: var(--mx-radius-md);
@@ -5062,6 +5415,8 @@
     --mx-menubar-item-padding-inline: var(--mx-space-3);
     --mx-menubar-item-radius: var(--mx-radius-full);
     --mx-menubar-item-pressed-bg: var(--mx-color-fill-subtle-tertiary);
+    --mx-popover-surface-radius: var(--mx-radius-md);
+    --mx-popover-title-font-weight: var(--mx-font-weight-medium);
     --mx-popup-with-list-surface-padding-block: var(--mx-space-2);
     --mx-popup-list-item-height: var(--mx-space-12);
     --mx-popup-list-container-padding-inline: var(--mx-space-1);
@@ -5126,6 +5481,8 @@
     --mx-slider-tick-radius: var(--mx-radius-full);
     --mx-slider-stop-radius: var(--mx-radius-full);
     --mx-spinner-box-contained-radius: var(--mx-radius-full);
+    --mx-stepper-indicator-font-weight: var(--mx-font-weight-medium);
+    --mx-stepper-line-bg: var(--mx-color-stroke-divider);
     --mx-switch-gap: var(--mx-space-3);
     --mx-switch-track-border-width: var(--mx-border-width-2);
     --mx-switch-thumb-bg: var(--mx-color-stroke-control-strong);
@@ -5335,6 +5692,11 @@
     --mx-slider-tick-label-disabled-color: var(--mx-color-fg-on-accent-disabled);
     --mx-slider-stop-active-bg: var(--mx-color-accent-on-solid);
     --mx-spinner-box-contained-bg: var(--mx-color-accent-subtle);
+    --mx-stepper-indicator-bg: var(--mx-color-fg-secondary);
+    --mx-stepper-indicator-color: var(--mx-color-bg-canvas);
+    --mx-stepper-indicator-error-bg: var(--mx-color-danger-subtle);
+    --mx-stepper-indicator-error-color: var(--mx-color-danger-fg);
+    --mx-stepper-mark-error-bg: var(--mx-color-danger-fg);
     --mx-switch-track-pressed-bg: var(--mx-color-fill-control-default);
     --mx-switch-track-checked-pressed-bg: var(--mx-color-accent-solid);
     --mx-switch-track-disabled-border-color: var(--mx-color-fill-control-disabled);
@@ -5418,6 +5780,7 @@
     --mx-slider-stop-bg: var(--mx-color-selection-fg);
     --mx-spinner-track-color: var(--mx-color-selection-bg);
     --mx-spinner-shape-contained-bg: var(--mx-color-accent-on-subtle);
+    --mx-stepper-indicator-disabled-bg: var(--mx-color-fill-neutral);
     --mx-tabs-tab-pill-selected-bg: var(--mx-color-selection-bg);
     --mx-toast-action-face-bg: var(--mx-color-selection-bg);
     --mx-toast-action-face-hover-bg: var(--mx-color-selection-bg);
@@ -5918,6 +6281,15 @@
     --_calendar-cell-selected-shadow: var(--mx-calendar-cell-selected-shadow);
     --_calendar-cell-selected-color: var(--mx-calendar-cell-selected-color);
     --_calendar-cell-selected-hover-bg: var(--mx-calendar-cell-selected-hover-bg);
+    --_calendar-cell-range-start-bg: var(--mx-calendar-cell-range-start-bg);
+    --_calendar-cell-range-start-color: var(--mx-calendar-cell-range-start-color);
+    --_calendar-cell-range-end-bg: var(--mx-calendar-cell-range-end-bg);
+    --_calendar-cell-range-end-color: var(--mx-calendar-cell-range-end-color);
+    --_calendar-cell-range-single-bg: var(--mx-calendar-cell-range-single-bg);
+    --_calendar-cell-range-single-color: var(--mx-calendar-cell-range-single-color);
+    --_calendar-cell-range-in-bg: var(--mx-calendar-cell-range-in-bg);
+    --_calendar-cell-range-in-color: var(--mx-calendar-cell-range-in-color);
+    --_calendar-cell-range-in-radius: var(--mx-calendar-cell-range-in-radius);
     --_calendar-cell-disabled-color: var(--mx-calendar-cell-disabled-color);
     --_calendar-today-padding-block: var(--mx-calendar-today-padding-block);
     --_calendar-today-padding-inline: var(--mx-calendar-today-padding-inline);
@@ -6540,6 +6912,23 @@
     --_date-box-times-beside-border-start-color: var(--mx-date-box-times-beside-border-start-color);
   }
 
+  .mx-date-range-box, .mx-date-range-box__popup {
+    --_date-range-box-popup-gap: var(--mx-date-range-box-popup-gap);
+    --_date-range-box-separator-icon: var(--mx-date-range-box-separator-icon);
+    --_date-range-box-separator-bg: var(--mx-date-range-box-separator-bg);
+    --_date-range-box-separator-size: var(--mx-date-range-box-separator-size);
+    --_date-range-box-separator-margin-inline: var(--mx-date-range-box-separator-margin-inline);
+    --_date-range-box-presets-min-width: var(--mx-date-range-box-presets-min-width);
+    --_date-range-box-presets-max-height: var(--mx-date-range-box-presets-max-height);
+    --_date-range-box-presets-focus-outline-width: var(--mx-date-range-box-presets-focus-outline-width);
+    --_date-range-box-presets-focus-outline-color: var(--mx-date-range-box-presets-focus-outline-color);
+    --_date-range-box-presets-focus-outline-offset: var(--mx-date-range-box-presets-focus-outline-offset);
+    --_date-range-box-presets-focus-glow: var(--mx-date-range-box-presets-focus-glow);
+    --_date-range-box-presets-beside-padding-start: var(--mx-date-range-box-presets-beside-padding-start);
+    --_date-range-box-presets-beside-border-start-width: var(--mx-date-range-box-presets-beside-border-start-width);
+    --_date-range-box-presets-beside-border-start-color: var(--mx-date-range-box-presets-beside-border-start-color);
+  }
+
   [data-disabled] [aria-disabled='true'], [data-disabled][aria-disabled='true'] {
     --_disabled-element-color: var(--mx-disabled-element-color);
   }
@@ -6588,11 +6977,19 @@
   .mx-drop-down, .mx-drop-down__popup {
     --_drop-down-popup-gap: var(--mx-drop-down-popup-gap);
     --_drop-down-value-placeholder-color: var(--mx-drop-down-value-placeholder-color);
+    --_drop-down-value-missing-color: var(--mx-drop-down-value-missing-color);
+    --_drop-down-value-missing-text-decoration: var(--mx-drop-down-value-missing-text-decoration);
     --_drop-down-chevron-size: var(--mx-drop-down-chevron-size);
     --_drop-down-chevron-color: var(--mx-drop-down-chevron-color);
     --_drop-down-chevron-icon: var(--mx-drop-down-chevron-icon);
     --_drop-down-chevron-disabled-color: var(--mx-drop-down-chevron-disabled-color);
+    --_drop-down-spinner-size: var(--mx-drop-down-spinner-size);
+    --_drop-down-spinner-border-width: var(--mx-drop-down-spinner-border-width);
+    --_drop-down-spinner-border-end-color: var(--mx-drop-down-spinner-border-end-color);
+    --_drop-down-spinner-radius: var(--mx-drop-down-spinner-radius);
+    --_drop-down-spinner-color: var(--mx-drop-down-spinner-color);
     --_drop-down-chevron-open-rotate: var(--mx-drop-down-chevron-open-rotate);
+    --_drop-down-spinner-shape-display: var(--mx-drop-down-spinner-shape-display);
   }
 
   .mx-field {
@@ -6792,6 +7189,66 @@
     --_field-box-pressed-bg: var(--mx-field-box-pressed-bg);
     --_field-box-underline-disabled-shadow: var(--mx-field-box-underline-disabled-shadow);
     --_field-box-pressed-color: var(--mx-field-box-pressed-color);
+    --_field-box-border-style: var(--mx-field-box-border-style);
+    --_field-box-border-color: var(--mx-field-box-border-color);
+  }
+
+  .mx-file-uploader {
+    --_file-uploader-box-gap: var(--mx-file-uploader-box-gap);
+    --_file-uploader-button-gap: var(--mx-file-uploader-button-gap);
+    --_file-uploader-item-gap: var(--mx-file-uploader-item-gap);
+    --_file-uploader-over-bg: var(--mx-file-uploader-over-bg);
+    --_file-uploader-over-border-color: var(--mx-file-uploader-over-border-color);
+    --_file-uploader-select-padding-block: var(--mx-file-uploader-select-padding-block);
+    --_file-uploader-select-padding-inline: var(--mx-file-uploader-select-padding-inline);
+    --_file-uploader-select-radius: var(--mx-file-uploader-select-radius);
+    --_file-uploader-select-color: var(--mx-file-uploader-select-color);
+    --_file-uploader-select-font-weight: var(--mx-file-uploader-select-font-weight);
+    --_file-uploader-select-bg: var(--mx-file-uploader-select-bg);
+    --_file-uploader-select-border-width: var(--mx-file-uploader-select-border-width);
+    --_file-uploader-select-border-color: var(--mx-file-uploader-select-border-color);
+    --_file-uploader-select-hover-bg: var(--mx-file-uploader-select-hover-bg);
+    --_file-uploader-select-hover-cursor: var(--mx-file-uploader-select-hover-cursor);
+    --_file-uploader-select-pressed-bg: var(--mx-file-uploader-select-pressed-bg);
+    --_file-uploader-select-focus-glow: var(--mx-file-uploader-select-focus-glow);
+    --_file-uploader-select-focus-outline-width: var(--mx-file-uploader-select-focus-outline-width);
+    --_file-uploader-select-focus-outline-color: var(--mx-file-uploader-select-focus-outline-color);
+    --_file-uploader-select-focus-outline-offset: var(--mx-file-uploader-select-focus-outline-offset);
+    --_file-uploader-select-disabled-color: var(--mx-file-uploader-select-disabled-color);
+    --_file-uploader-select-disabled-border-color: var(--mx-file-uploader-select-disabled-border-color);
+    --_file-uploader-upload-padding-block: var(--mx-file-uploader-upload-padding-block);
+    --_file-uploader-upload-padding-inline: var(--mx-file-uploader-upload-padding-inline);
+    --_file-uploader-upload-radius: var(--mx-file-uploader-upload-radius);
+    --_file-uploader-upload-color: var(--mx-file-uploader-upload-color);
+    --_file-uploader-upload-font-weight: var(--mx-file-uploader-upload-font-weight);
+    --_file-uploader-upload-bg: var(--mx-file-uploader-upload-bg);
+    --_file-uploader-upload-border-width: var(--mx-file-uploader-upload-border-width);
+    --_file-uploader-upload-border-color: var(--mx-file-uploader-upload-border-color);
+    --_file-uploader-upload-hover-bg: var(--mx-file-uploader-upload-hover-bg);
+    --_file-uploader-upload-hover-cursor: var(--mx-file-uploader-upload-hover-cursor);
+    --_file-uploader-upload-pressed-bg: var(--mx-file-uploader-upload-pressed-bg);
+    --_file-uploader-upload-focus-glow: var(--mx-file-uploader-upload-focus-glow);
+    --_file-uploader-upload-focus-outline-width: var(--mx-file-uploader-upload-focus-outline-width);
+    --_file-uploader-upload-focus-outline-color: var(--mx-file-uploader-upload-focus-outline-color);
+    --_file-uploader-upload-focus-outline-offset: var(--mx-file-uploader-upload-focus-outline-offset);
+    --_file-uploader-hint-color: var(--mx-file-uploader-hint-color);
+    --_file-uploader-list-margin-top: var(--mx-file-uploader-list-margin-top);
+    --_file-uploader-list-gap: var(--mx-file-uploader-list-gap);
+    --_file-uploader-item-padding-block: var(--mx-file-uploader-item-padding-block);
+    --_file-uploader-item-padding-inline: var(--mx-file-uploader-item-padding-inline);
+    --_file-uploader-item-radius: var(--mx-file-uploader-item-radius);
+    --_file-uploader-item-error-bg: var(--mx-file-uploader-item-error-bg);
+    --_file-uploader-item-invalid-bg: var(--mx-file-uploader-item-invalid-bg);
+    --_file-uploader-icon-icon: var(--mx-file-uploader-icon-icon);
+    --_file-uploader-icon-bg: var(--mx-file-uploader-icon-bg);
+    --_file-uploader-icon-size: var(--mx-file-uploader-icon-size);
+    --_file-uploader-name-color: var(--mx-file-uploader-name-color);
+    --_file-uploader-size-color: var(--mx-file-uploader-size-color);
+    --_file-uploader-size-font-size: var(--mx-file-uploader-size-font-size);
+    --_file-uploader-state-color: var(--mx-file-uploader-state-color);
+    --_file-uploader-state-font-size: var(--mx-file-uploader-state-font-size);
+    --_file-uploader-state-done-color: var(--mx-file-uploader-state-done-color);
+    --_file-uploader-state-error-color: var(--mx-file-uploader-state-error-color);
   }
 
   .mx-filter-builder {
@@ -6961,6 +7418,22 @@
     --_listbox-box-padding-inline: var(--mx-listbox-box-padding-inline);
   }
 
+  .mx-load-panel {
+    --_load-panel-padding: var(--mx-load-panel-padding);
+    --_load-panel-gap: var(--mx-load-panel-gap);
+    --_load-panel-shade-shaded-bg: var(--mx-load-panel-shade-shaded-bg);
+    --_load-panel-pane-shown-bg: var(--mx-load-panel-pane-shown-bg);
+    --_load-panel-pane-shown-border-width: var(--mx-load-panel-pane-shown-border-width);
+    --_load-panel-pane-shown-border-color: var(--mx-load-panel-pane-shown-border-color);
+    --_load-panel-pane-shown-radius: var(--mx-load-panel-pane-shown-radius);
+    --_load-panel-pane-shown-shadow: var(--mx-load-panel-pane-shown-shadow);
+    --_load-panel-pane-shown-padding-block: var(--mx-load-panel-pane-shown-padding-block);
+    --_load-panel-pane-shown-padding-inline: var(--mx-load-panel-pane-shown-padding-inline);
+    --_load-panel-pane-shown-min-width: var(--mx-load-panel-pane-shown-min-width);
+    --_load-panel-message-color: var(--mx-load-panel-message-color);
+    --_load-panel-message-font-size: var(--mx-load-panel-message-font-size);
+  }
+
   .mx-lookup, .mx-lookup__popup {
     --_lookup-popup-width: var(--mx-lookup-popup-width);
     --_lookup-column-gap: var(--mx-lookup-column-gap);
@@ -7082,6 +7555,38 @@
     --_pagination-info-padding-inline: var(--mx-pagination-info-padding-inline);
   }
 
+  .mx-popover {
+    --_popover-offset: var(--mx-popover-offset);
+    --_popover-enter-offset: var(--mx-popover-enter-offset);
+    --_popover-header-gap: var(--mx-popover-header-gap);
+    --_popover-surface-bg: var(--mx-popover-surface-bg);
+    --_popover-surface-border-width: var(--mx-popover-surface-border-width);
+    --_popover-surface-border-color: var(--mx-popover-surface-border-color);
+    --_popover-surface-radius: var(--mx-popover-surface-radius);
+    --_popover-surface-shadow: var(--mx-popover-surface-shadow);
+    --_popover-surface-color: var(--mx-popover-surface-color);
+    --_popover-surface-font-size: var(--mx-popover-surface-font-size);
+    --_popover-surface-line-height: var(--mx-popover-surface-line-height);
+    --_popover-surface-max-width: var(--mx-popover-surface-max-width);
+    --_popover-surface-focus-glow: var(--mx-popover-surface-focus-glow);
+    --_popover-surface-focus-outline-width: var(--mx-popover-surface-focus-outline-width);
+    --_popover-surface-focus-outline-color: var(--mx-popover-surface-focus-outline-color);
+    --_popover-surface-focus-outline-offset: var(--mx-popover-surface-focus-outline-offset);
+    --_popover-arrow-display: var(--mx-popover-arrow-display);
+    --_popover-arrow-size: var(--mx-popover-arrow-size);
+    --_popover-arrow-bg: var(--mx-popover-arrow-bg);
+    --_popover-arrow-border-width: var(--mx-popover-arrow-border-width);
+    --_popover-arrow-border-color: var(--mx-popover-arrow-border-color);
+    --_popover-header-padding-block: var(--mx-popover-header-padding-block);
+    --_popover-header-padding-start: var(--mx-popover-header-padding-start);
+    --_popover-header-padding-end: var(--mx-popover-header-padding-end);
+    --_popover-title-font-weight: var(--mx-popover-title-font-weight);
+    --_popover-title-color: var(--mx-popover-title-color);
+    --_popover-body-padding: var(--mx-popover-body-padding);
+    --_popover-header-border-bottom-width: var(--mx-popover-header-border-bottom-width);
+    --_popover-header-border-bottom-color: var(--mx-popover-header-border-bottom-color);
+  }
+
   .mx-popup {
     --_popup-offset: var(--mx-popup-offset);
     --_popup-surface-padding-block: var(--mx-popup-surface-padding-block);
@@ -7670,6 +8175,20 @@
     --_scheduler-agenda-weekday-text-transform: var(--mx-scheduler-agenda-weekday-text-transform);
   }
 
+  .mx-scroll-view {
+    --_scroll-view-panel-height: var(--mx-scroll-view-panel-height);
+    --_scroll-view-panel-gap: var(--mx-scroll-view-panel-gap);
+    --_scroll-view-box-focus-glow: var(--mx-scroll-view-box-focus-glow);
+    --_scroll-view-box-focus-outline-width: var(--mx-scroll-view-box-focus-outline-width);
+    --_scroll-view-box-focus-outline-color: var(--mx-scroll-view-box-focus-outline-color);
+    --_scroll-view-box-focus-outline-offset: var(--mx-scroll-view-box-focus-outline-offset);
+    --_scroll-view-pull-color: var(--mx-scroll-view-pull-color);
+    --_scroll-view-pull-font-size: var(--mx-scroll-view-pull-font-size);
+    --_scroll-view-pull-refreshing-color: var(--mx-scroll-view-pull-refreshing-color);
+    --_scroll-view-bottom-color: var(--mx-scroll-view-bottom-color);
+    --_scroll-view-bottom-font-size: var(--mx-scroll-view-bottom-font-size);
+  }
+
   .mx-bottom-sheet {
     --_sheet-font-family: var(--mx-sheet-font-family);
     --_sheet-inset: var(--mx-sheet-inset);
@@ -7821,7 +8340,24 @@
     --_slider-stop-active-bg: var(--mx-slider-stop-active-bg);
   }
 
-  .mx-spinner, .mx-button__spinner {
+  .mx-sortable {
+    --_sortable-gap: var(--mx-sortable-gap);
+    --_sortable-container-target-bg: var(--mx-sortable-container-target-bg);
+    --_sortable-item-sortable-cursor: var(--mx-sortable-item-sortable-cursor);
+    --_sortable-item-dragging-opacity: var(--mx-sortable-item-dragging-opacity);
+    --_sortable-item-focus-glow: var(--mx-sortable-item-focus-glow);
+    --_sortable-item-focus-outline-width: var(--mx-sortable-item-focus-outline-width);
+    --_sortable-item-focus-outline-color: var(--mx-sortable-item-focus-outline-color);
+    --_sortable-item-focus-outline-offset: var(--mx-sortable-item-focus-outline-offset);
+    --_sortable-line-height: var(--mx-sortable-line-height);
+    --_sortable-line-radius: var(--mx-sortable-line-radius);
+    --_sortable-line-bg: var(--mx-sortable-line-bg);
+    --_sortable-ghost-radius: var(--mx-sortable-ghost-radius);
+    --_sortable-ghost-shadow: var(--mx-sortable-ghost-shadow);
+    --_sortable-ghost-opacity: var(--mx-sortable-ghost-opacity);
+  }
+
+  .mx-spinner, .mx-button__spinner, .mx-drop-down__spinner {
     --_spinner-gap: var(--mx-spinner-gap);
     --_spinner-cover-padding: var(--mx-spinner-cover-padding);
     --_spinner-cover-background: var(--mx-spinner-cover-background);
@@ -7868,6 +8404,66 @@
     --_spinner-shape-contained-scale: var(--mx-spinner-shape-contained-scale);
   }
 
+  .mx-stepper {
+    --_stepper-size-sm: var(--mx-stepper-size-sm);
+    --_stepper-size-md: var(--mx-stepper-size-md);
+    --_stepper-size-lg: var(--mx-stepper-size-lg);
+    --_stepper-font-size-sm: var(--mx-stepper-font-size-sm);
+    --_stepper-font-size-md: var(--mx-stepper-font-size-md);
+    --_stepper-font-size-lg: var(--mx-stepper-font-size-lg);
+    --_stepper-description-font-size: var(--mx-stepper-description-font-size);
+    --_stepper-padding-sm: var(--mx-stepper-padding-sm);
+    --_stepper-padding-md: var(--mx-stepper-padding-md);
+    --_stepper-padding-lg: var(--mx-stepper-padding-lg);
+    --_stepper-gap: var(--mx-stepper-gap);
+    --_stepper-line-gap: var(--mx-stepper-line-gap);
+    --_stepper-line-min-length: var(--mx-stepper-line-min-length);
+    --_stepper-step-radius: var(--mx-stepper-step-radius);
+    --_stepper-step-color: var(--mx-stepper-step-color);
+    --_stepper-step-hover-bg: var(--mx-stepper-step-hover-bg);
+    --_stepper-step-hover-cursor: var(--mx-stepper-step-hover-cursor);
+    --_stepper-step-pressed-bg: var(--mx-stepper-step-pressed-bg);
+    --_stepper-step-focus-glow: var(--mx-stepper-step-focus-glow);
+    --_stepper-step-focus-outline-width: var(--mx-stepper-step-focus-outline-width);
+    --_stepper-step-focus-outline-color: var(--mx-stepper-step-focus-outline-color);
+    --_stepper-step-focus-outline-offset: var(--mx-stepper-step-focus-outline-offset);
+    --_stepper-step-disabled-color: var(--mx-stepper-step-disabled-color);
+    --_stepper-step-current-color: var(--mx-stepper-step-current-color);
+    --_stepper-step-done-color: var(--mx-stepper-step-done-color);
+    --_stepper-indicator-radius: var(--mx-stepper-indicator-radius);
+    --_stepper-indicator-bg: var(--mx-stepper-indicator-bg);
+    --_stepper-indicator-border-width: var(--mx-stepper-indicator-border-width);
+    --_stepper-indicator-border-color: var(--mx-stepper-indicator-border-color);
+    --_stepper-indicator-color: var(--mx-stepper-indicator-color);
+    --_stepper-indicator-font-size: var(--mx-stepper-indicator-font-size);
+    --_stepper-indicator-font-weight: var(--mx-stepper-indicator-font-weight);
+    --_stepper-indicator-current-bg: var(--mx-stepper-indicator-current-bg);
+    --_stepper-indicator-current-border-color: var(--mx-stepper-indicator-current-border-color);
+    --_stepper-indicator-current-color: var(--mx-stepper-indicator-current-color);
+    --_stepper-indicator-done-bg: var(--mx-stepper-indicator-done-bg);
+    --_stepper-indicator-done-border-color: var(--mx-stepper-indicator-done-border-color);
+    --_stepper-indicator-done-color: var(--mx-stepper-indicator-done-color);
+    --_stepper-indicator-error-bg: var(--mx-stepper-indicator-error-bg);
+    --_stepper-indicator-error-border-color: var(--mx-stepper-indicator-error-border-color);
+    --_stepper-indicator-error-color: var(--mx-stepper-indicator-error-color);
+    --_stepper-indicator-disabled-border-color: var(--mx-stepper-indicator-disabled-border-color);
+    --_stepper-indicator-disabled-color: var(--mx-stepper-indicator-disabled-color);
+    --_stepper-mark-done-icon: var(--mx-stepper-mark-done-icon);
+    --_stepper-mark-done-bg: var(--mx-stepper-mark-done-bg);
+    --_stepper-mark-error-icon: var(--mx-stepper-mark-error-icon);
+    --_stepper-mark-error-bg: var(--mx-stepper-mark-error-bg);
+    --_stepper-label-current-font-weight: var(--mx-stepper-label-current-font-weight);
+    --_stepper-label-error-color: var(--mx-stepper-label-error-color);
+    --_stepper-description-color: var(--mx-stepper-description-color);
+    --_stepper-description-disabled-color: var(--mx-stepper-description-disabled-color);
+    --_stepper-note-color: var(--mx-stepper-note-color);
+    --_stepper-line-height: var(--mx-stepper-line-height);
+    --_stepper-line-bg: var(--mx-stepper-line-bg);
+    --_stepper-line-done-bg: var(--mx-stepper-line-done-bg);
+    --_stepper-line-radius: var(--mx-stepper-line-radius);
+    --_stepper-indicator-disabled-bg: var(--mx-stepper-indicator-disabled-bg);
+  }
+
   .mx-switch {
     --_switch-thumb-inset: var(--mx-switch-thumb-inset);
     --_switch-gap: var(--mx-switch-gap);
@@ -8617,6 +9213,15 @@
     --_window-footer-padding-inline: var(--mx-window-footer-padding-inline);
     --_window-bar-dialog-color: var(--mx-window-bar-dialog-color);
   }
+
+  .mx-wizard {
+    --_wizard-gap: var(--mx-wizard-gap);
+    --_wizard-bar-gap: var(--mx-wizard-bar-gap);
+    --_wizard-rail-width: var(--mx-wizard-rail-width);
+    --_wizard-bar-padding-top: var(--mx-wizard-bar-padding-top);
+    --_wizard-bar-border-top-width: var(--mx-wizard-bar-border-top-width);
+    --_wizard-bar-border-top-color: var(--mx-wizard-bar-border-top-color);
+  }
 }
 
 /* Generated by scripts/build-icons.mjs from tokens/icons/: do not edit. */
@@ -8671,6 +9276,8 @@
     --mx-icon-dock-guide-up: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M2.5%202.5h11v11h-11zM2.5%206.5h11%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E");
     --mx-icon-dock-guide-down: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M2.5%202.5h11v11h-11zM2.5%209.5h11%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E");
     --mx-icon-drag-dots: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M4.4%204a1.1%201.1%200%201%200%202.2%200a1.1%201.1%200%201%200-2.2%200zM4.4%208a1.1%201.1%200%201%200%202.2%200a1.1%201.1%200%201%200-2.2%200zM4.4%2012a1.1%201.1%200%201%200%202.2%200a1.1%201.1%200%201%200-2.2%200zM9.4%204a1.1%201.1%200%201%200%202.2%200a1.1%201.1%200%201%200-2.2%200zM9.4%208a1.1%201.1%200%201%200%202.2%200a1.1%201.1%200%201%200-2.2%200zM9.4%2012a1.1%201.1%200%201%200%202.2%200a1.1%201.1%200%201%200-2.2%200z%27%20fill%3D%27black%27%2F%3E%3C%2Fsvg%3E");
+    --mx-icon-upload: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M8%2010V2.5M4.75%205.75L8%202.5l3.25%203.25M3%2012.5v1h10v-1%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E");
+    --mx-icon-file: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M4%201.75h5.5L13%205.25v9H4zM9.25%201.75v3.75H13%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E");
   }
 
   .mx-glyph[data-icon='blocked'] {
@@ -8769,6 +9376,10 @@
     --_icon: var(--mx-icon-eyedropper);
   }
 
+  .mx-glyph[data-icon='file'] {
+    --_icon: var(--mx-icon-file);
+  }
+
   .mx-glyph[data-icon='filter'] {
     --_icon: var(--mx-icon-filter);
   }
@@ -8864,6 +9475,10 @@
   .mx-glyph[data-icon='undo'] {
     --_icon: var(--mx-icon-undo);
   }
+
+  .mx-glyph[data-icon='upload'] {
+    --_icon: var(--mx-icon-upload);
+  }
 }
 
 /* Generated by scripts/build-shapes.mjs from tokens/shapes. Do not edit; edit the source and run `npm run tokens`. */
@@ -10766,8 +11381,10 @@
 }
 
 /* DropDown: the field shows the chosen item; the list opens on a popup below it. The box's pointer
-   and the popup's search box are places. Only the layout is here: the chosen item's text and the
-   arrow are units of the drop-down's schema (`$units`), painted by units.css. */
+   and the popup's search box are places. Only the layout is here: the chosen item's text, the
+   arrow and the spinner are units of the drop-down's schema (`$units`), painted by units.css.
+   JS writes data-loading on the root while the value's item is asked for, data-missing on the
+   text when the data source does not have the key. */
 @layer mx.components {
   .mx-drop-down__display {
     display: flex;
@@ -10796,6 +11413,42 @@
     transition: rotate var(--mx-motion-duration-fast) var(--mx-motion-easing-standard);
   }
 
+  /* While the value's item is asked for: the spinner in the arrow's place, no clear button. */
+  .mx-drop-down__spinner {
+    display: none;
+    position: relative;
+    flex: none;
+    animation: mx-drop-down-spin var(--_spinner-duration) linear infinite;
+  }
+
+  /* A shape that becomes the next one, where the language draws the spinner as one (the spinner's shapes). */
+  .mx-drop-down__spinner::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    clip-path: var(--_spinner-shape-1);
+    animation: mx-spinner-morph var(--_spinner-morph-duration) infinite;
+  }
+
+  .mx-drop-down[data-loading] > :where(.mx-field__box) > * > .mx-drop-down__spinner {
+    display: block;
+  }
+
+  .mx-drop-down[data-loading] > :where(.mx-field__box) > * > :is(.mx-drop-down__chevron, .mx-drop-down__clear) {
+    display: none;
+  }
+
+  /* A key the data source does not have: the key itself, muted and underlined (`missing`); the title tells why. */
+  .mx-drop-down__text[data-missing] {
+    text-decoration-style: dotted;
+  }
+
+  @keyframes mx-drop-down-spin {
+    to {
+      rotate: 1turn;
+    }
+  }
+
   /* The search box stays; the list scrolls. */
   .mx-drop-down__popup {
     display: flex;
@@ -12438,6 +13091,603 @@
   }
 }
 
+/* Stepper: a row (or a column) of steps with a line between them. Only the layout is here: a step, its indicator,
+   the mark and the number in it, the texts and the line are units of the schema (`$units`). Horizontal, the texts
+   sit under the indicator (`data-labels="bottom"`: the steps share the width and the line runs from one indicator
+   to the next) or after it (`end`: the line grows between the steps). Vertical, the line stands under the
+   indicator. The space around a step is the plain `padding` token, which the line's place is measured from. */
+@layer mx.components {
+    .mx-stepper {
+        display: block;
+        box-sizing: border-box;
+        inline-size: 100%;
+        min-inline-size: 0;
+    }
+
+    .mx-stepper[data-size='sm'] {
+        --_size: var(--_stepper-size-sm);
+        --_font-size: var(--_stepper-font-size-sm);
+        --_padding: var(--_stepper-padding-sm);
+    }
+
+    .mx-stepper[data-size='md'] {
+        --_size: var(--_stepper-size-md);
+        --_font-size: var(--_stepper-font-size-md);
+        --_padding: var(--_stepper-padding-md);
+    }
+
+    .mx-stepper[data-size='lg'] {
+        --_size: var(--_stepper-size-lg);
+        --_font-size: var(--_stepper-font-size-lg);
+        --_padding: var(--_stepper-padding-lg);
+    }
+
+    .mx-stepper__list {
+        display: flex;
+        align-items: flex-start;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .mx-stepper__item {
+        display: flex;
+        position: relative;
+        min-inline-size: 0;
+    }
+
+    .mx-stepper__step {
+        display: flex;
+        box-sizing: border-box;
+        align-items: center;
+        min-inline-size: 0;
+        margin: 0;
+        border: 0;
+        background: none;
+        color: inherit;
+        font: inherit;
+        text-align: start;
+        appearance: none;
+    }
+
+    .mx-stepper__indicator {
+        display: inline-flex;
+        flex: none;
+        box-sizing: border-box;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .mx-stepper__number {
+        line-height: 1;
+    }
+
+    .mx-stepper__icon,
+    .mx-stepper__indicator > :is(img, svg) {
+        inline-size: calc(var(--_size) * 0.6);
+        block-size: calc(var(--_size) * 0.6);
+    }
+
+    .mx-stepper__texts {
+        display: flex;
+        flex-direction: column;
+        min-inline-size: 0;
+    }
+
+    .mx-stepper__label {
+        overflow-wrap: anywhere;
+    }
+
+    /* Texts after the indicator: the line grows between the steps. */
+    .mx-stepper:not([data-orientation='vertical'])[data-labels='end'] .mx-stepper__item {
+        align-items: center;
+    }
+
+    /* The steps keep their size; the room left goes to the lines, equally. */
+    .mx-stepper:not([data-orientation='vertical'])[data-labels='end'] .mx-stepper__item:not(:last-child) {
+        flex: 1 1 auto;
+    }
+
+    .mx-stepper:not([data-orientation='vertical'])[data-labels='end'] .mx-stepper__step {
+        flex: 0 1 auto;
+    }
+
+    .mx-stepper:not([data-orientation='vertical'])[data-labels='end'] .mx-stepper__line {
+        flex: 1 0 var(--_stepper-line-min-length);
+        margin-inline: var(--_stepper-line-gap);
+    }
+
+    /* Beside the indicator the texts stay on one line and end in an ellipsis when the row is short of room. */
+    .mx-stepper:not([data-orientation='vertical'])[data-labels='end'] .mx-stepper__label,
+    .mx-stepper:not([data-orientation='vertical'])[data-labels='end'] .mx-stepper__description {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    /* Texts under the indicator: equal steps, the line from one indicator to the next. */
+    .mx-stepper:not([data-orientation='vertical']):not([data-labels='end']) .mx-stepper__item {
+        flex: 1 1 0;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .mx-stepper:not([data-orientation='vertical']):not([data-labels='end']) .mx-stepper__step {
+        flex-direction: column;
+        inline-size: 100%;
+        text-align: center;
+    }
+
+    .mx-stepper:not([data-orientation='vertical']):not([data-labels='end']) .mx-stepper__texts {
+        align-items: center;
+    }
+
+    .mx-stepper:not([data-orientation='vertical']):not([data-labels='end']) .mx-stepper__line {
+        position: absolute;
+        inset-block-start: calc(var(--_padding) + var(--_size) / 2);
+        inset-inline-start: calc(50% + var(--_size) / 2 + var(--_stepper-line-gap));
+        inset-inline-end: calc(-50% + var(--_size) / 2 + var(--_stepper-line-gap));
+        translate: 0 -50%;
+    }
+
+    /* Vertical: the line stands under the indicator, the texts beside it. */
+    .mx-stepper[data-orientation='vertical'] > .mx-stepper__list {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .mx-stepper[data-orientation='vertical'] .mx-stepper__item {
+        flex-direction: column;
+    }
+
+    .mx-stepper[data-orientation='vertical'] .mx-stepper__line {
+        flex: 1 1 auto;
+        min-block-size: var(--_stepper-line-min-length);
+        margin-block: var(--_stepper-line-gap);
+        margin-inline-start: calc(var(--_padding) + var(--_size) / 2);
+        translate: -50% 0;
+    }
+
+    .mx-stepper[data-orientation='vertical'] .mx-stepper__line:dir(rtl) {
+        translate: 50% 0;
+    }
+}
+
+/* Wizard: the stepper, the pages and the bar with the buttons. Only the layout is here: the frame, a page and the
+   bar are units of the schema; the buttons are the kit's, their look in the bar from the wizard's places. Standing
+   (`data-orientation="vertical"`), the stepper takes a column at the start and the pages and the bar the rest. */
+@layer mx.components {
+    .mx-wizard {
+        display: flex;
+        box-sizing: border-box;
+        flex-direction: column;
+        gap: var(--_wizard-gap);
+        inline-size: 100%;
+        min-inline-size: 0;
+    }
+
+    .mx-wizard[data-orientation='vertical'] {
+        display: grid;
+        grid-template-rows: minmax(0, 1fr) auto;
+        grid-template-columns: auto minmax(0, 1fr);
+        column-gap: var(--_wizard-gap);
+    }
+
+    .mx-wizard[data-orientation='vertical'] > .mx-wizard__stepper {
+        grid-row: 1 / span 2;
+        inline-size: var(--_wizard-rail-width);
+    }
+
+    .mx-wizard__pages {
+        flex: 1 1 auto;
+        min-inline-size: 0;
+        min-block-size: 0;
+    }
+
+    .mx-wizard__bar {
+        display: flex;
+        justify-content: flex-end;
+        gap: var(--_wizard-bar-gap);
+    }
+
+    .mx-wizard[data-orientation='vertical'] > .mx-wizard__bar {
+        grid-column: 2;
+    }
+}
+
+/* Popover: a surface in the top layer next to its target. placePopup writes its position; the gap to the target is the
+   margin of the side it opens on, and it comes in from the target by `enter-offset`. Only the layout is here: the
+   surface, the arrow, the header, the title and the body are units of the schema. The arrow is a square turned on its
+   corner, its inner half clipped away, set along the edge towards the target where the component puts it. */
+@layer mx.components {
+    .mx-popover {
+        position: fixed;
+        inset: auto;
+        z-index: var(--mx-z-dropdown);
+        box-sizing: border-box;
+        margin: 0;
+        overflow: visible;
+        animation: mx-popover-in var(--mx-motion-duration-fast) var(--mx-motion-easing-out);
+
+        --_enter: 0 0;
+    }
+
+    .mx-popover:is([popover]:not(:popover-open), [hidden]) {
+        display: none;
+    }
+
+    .mx-popover[data-side='bottom'] {
+        margin-block-start: var(--_popover-offset);
+
+        --_enter: 0 calc(-1 * var(--_popover-enter-offset));
+    }
+
+    .mx-popover[data-side='top'] {
+        margin-block-end: var(--_popover-offset);
+
+        --_enter: 0 var(--_popover-enter-offset);
+    }
+
+    .mx-popover[data-side='end'] {
+        margin-inline-start: var(--_popover-offset);
+
+        --_enter: calc(-1 * var(--_popover-enter-offset)) 0;
+    }
+
+    .mx-popover[data-side='start'] {
+        margin-inline-end: var(--_popover-offset);
+
+        --_enter: var(--_popover-enter-offset) 0;
+    }
+
+    .mx-popover[data-side='end']:dir(rtl) {
+        --_enter: var(--_popover-enter-offset) 0;
+    }
+
+    .mx-popover[data-side='start']:dir(rtl) {
+        --_enter: calc(-1 * var(--_popover-enter-offset)) 0;
+    }
+
+    .mx-popover__arrow {
+        position: absolute;
+        box-sizing: border-box;
+        clip-path: polygon(0 0, 100% 0, 0 100%);
+        pointer-events: none;
+    }
+
+    .mx-popover:not([data-arrow]) > .mx-popover__arrow {
+        display: none;
+    }
+
+    .mx-popover[data-side='bottom'] > .mx-popover__arrow {
+        top: 0;
+        translate: -50% -50%;
+        rotate: 45deg;
+    }
+
+    .mx-popover[data-side='top'] > .mx-popover__arrow {
+        bottom: 0;
+        translate: -50% 50%;
+        rotate: 225deg;
+    }
+
+    .mx-popover:is([data-side='end']:dir(ltr), [data-side='start']:dir(rtl)) > .mx-popover__arrow {
+        left: 0;
+        translate: -50% -50%;
+        rotate: -45deg;
+    }
+
+    .mx-popover:is([data-side='start']:dir(ltr), [data-side='end']:dir(rtl)) > .mx-popover__arrow {
+        right: 0;
+        translate: 50% -50%;
+        rotate: 135deg;
+    }
+
+    .mx-popover__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--_popover-header-gap);
+    }
+
+    .mx-popover__title {
+        flex: 1 1 auto;
+        min-inline-size: 0;
+    }
+
+    .mx-popover__close {
+        flex: none;
+        margin-inline-start: auto;
+    }
+
+    .mx-popover__body {
+        min-inline-size: 0;
+    }
+
+    @keyframes mx-popover-in {
+        from {
+            opacity: 0;
+            translate: var(--_enter);
+        }
+    }
+}
+
+/* LoadPanel: a layer over a container (absolute, inside it) or over the page (fixed), a pane in the middle with the
+   indicator, the message and a Cancel button. Only the layout is here: the shade, the pane and the message are units
+   of the schema; the indicator is the kit's spinner and the button the kit's, their look in the pane from the
+   panel's places. A container it covers carries `data-mx-covered` (`position: relative`, as for the spinner's cover). */
+@layer mx.components {
+    .mx-load-panel {
+        position: absolute;
+        inset: 0;
+        z-index: var(--mx-z-overlay);
+        display: flex;
+        box-sizing: border-box;
+        align-items: center;
+        justify-content: center;
+        padding: var(--_load-panel-padding);
+        border-radius: inherit;
+        outline: none;
+    }
+
+    .mx-load-panel[data-page] {
+        position: fixed;
+        border-radius: 0;
+    }
+
+    .mx-load-panel[hidden] {
+        display: none;
+    }
+
+    .mx-load-panel__pane {
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+        align-items: center;
+        gap: var(--_load-panel-gap);
+        max-inline-size: 100%;
+        text-align: center;
+    }
+
+    .mx-load-panel__message:empty {
+        display: none;
+    }
+}
+
+/* DateRangeBox: a field with two masked inputs, a separator between them, the calendars and the presets on a popup.
+   Only the layout is here: the separator and the list of presets are units of the schema, the calendars a place. */
+@layer mx.components {
+    .mx-date-range-box .mx-field__input {
+        flex: 1 1 0;
+        min-inline-size: 0;
+    }
+
+    .mx-date-range-box__tools {
+        display: flex;
+        flex: 1 1 0;
+        align-items: center;
+        min-inline-size: 0;
+    }
+
+    .mx-date-range-box__separator {
+        flex: none;
+    }
+
+    .mx-date-range-box__popup {
+        display: flex;
+        align-items: stretch;
+        gap: var(--_date-range-box-popup-gap);
+    }
+
+    .mx-date-range-box__presets {
+        overflow: auto;
+    }
+}
+
+/* FileUploader: the field's box holds the select button, the drop hint and the Upload button; the files are listed
+   under it. Only the layout is here: the box when a file is dragged over it, the select button, the hint, a row of
+   the list, its texts and the state are units of the schema; the row's buttons and progress bar are the kit's,
+   their look in a row from the uploader's places. */
+@layer mx.components {
+    .mx-file-uploader .mx-field__box {
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--_file-uploader-box-gap);
+    }
+
+    .mx-file-uploader__select,
+    .mx-file-uploader__upload {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--_file-uploader-button-gap);
+        margin: 0;
+        border: 0;
+        background: none;
+        color: inherit;
+        font: inherit;
+        appearance: none;
+    }
+
+    .mx-file-uploader__upload {
+        margin-inline-start: auto;
+    }
+
+    .mx-file-uploader__drop {
+        flex: 1 1 auto;
+        min-inline-size: 0;
+    }
+
+    .mx-file-uploader__list {
+        display: flex;
+        flex-direction: column;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .mx-file-uploader__item {
+        display: flex;
+        align-items: center;
+        gap: var(--_file-uploader-item-gap);
+        min-inline-size: 0;
+    }
+
+    .mx-file-uploader__icon {
+        flex: none;
+    }
+
+    .mx-file-uploader__texts {
+        display: flex;
+        flex: 1 1 auto;
+        flex-wrap: wrap;
+        align-items: baseline;
+        column-gap: var(--_file-uploader-item-gap);
+        min-inline-size: 0;
+    }
+
+    .mx-file-uploader__name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .mx-file-uploader__progress {
+        flex-basis: 100%;
+    }
+
+    /* The bar's own label is the file's name, already on the row: kept for readers, not shown. */
+    .mx-file-uploader__progress .mx-progress__head {
+        position: absolute;
+        inline-size: 1px;
+        block-size: 1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
+    }
+
+    .mx-file-uploader__actions {
+        display: inline-flex;
+        flex: none;
+        align-items: center;
+    }
+}
+
+/* Sortable: the items as they are, one under the other or side by side, a line where a drop would land, a copy of
+   the item after the pointer. Only the layout is here: the container, an item (dragged or not), the line and the copy
+   are units of the schema. */
+@layer mx.components {
+    .mx-sortable {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        min-inline-size: 0;
+    }
+
+    .mx-sortable[data-orientation='horizontal'] {
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: center;
+    }
+
+    .mx-sortable__item {
+        touch-action: pan-y;
+    }
+
+    .mx-sortable[data-orientation='horizontal'] > .mx-sortable__item {
+        touch-action: pan-x;
+    }
+
+    .mx-sortable__item[data-dragging] {
+        pointer-events: none;
+    }
+
+    .mx-sortable__line {
+        position: absolute;
+        z-index: var(--mx-z-sticky);
+        pointer-events: none;
+    }
+
+    .mx-sortable:not([data-orientation='horizontal']) > .mx-sortable__line {
+        inset-inline: 0;
+        translate: 0 -50%;
+    }
+
+    .mx-sortable[data-orientation='horizontal'] > .mx-sortable__line {
+        inset-block: 0;
+        translate: -50% 0;
+    }
+
+    .mx-sortable[data-orientation='horizontal'] > .mx-sortable__line:dir(rtl) {
+        translate: 50% 0;
+    }
+
+    .mx-sortable__ghost {
+        position: fixed;
+        z-index: var(--mx-z-toast);
+        pointer-events: none;
+    }
+}
+
+/* ScrollView: the box that scrolls, its content, a pull-down panel kept above the content and shown by moving the
+   content down, a panel under the content while more loads. Only the layout is here: the box, the two panels and
+   their texts are units of the schema. The scrollbars are the design system's; `data-bars` says when they show:
+   `always` as they are, `onScroll` and `onHover` with the thumb clear until scrolling or the pointer, `never` none. */
+@layer mx.components {
+    .mx-scroll-view {
+        position: relative;
+        box-sizing: border-box;
+        min-inline-size: 0;
+        min-block-size: 0;
+        overflow: auto;
+        overscroll-behavior: contain;
+    }
+
+    .mx-scroll-view[data-direction='vertical'] {
+        overflow-x: hidden;
+    }
+
+    .mx-scroll-view[data-direction='horizontal'] {
+        overflow-y: hidden;
+    }
+
+    .mx-scroll-view[data-bars='never'] {
+        scrollbar-width: none;
+    }
+
+    .mx-scroll-view[data-bars='never']::-webkit-scrollbar {
+        display: none;
+    }
+
+    .mx-scroll-view[data-bars='onScroll']:not([data-scrolling])::-webkit-scrollbar-thumb,
+    .mx-scroll-view[data-bars='onHover']:not(:hover, :focus-within)::-webkit-scrollbar-thumb {
+        background-color: transparent;
+    }
+
+    .mx-scroll-view__content {
+        min-inline-size: 100%;
+        transition: translate var(--mx-motion-duration-normal) var(--mx-motion-easing-out);
+    }
+
+    .mx-scroll-view[data-pulling] > .mx-scroll-view__content {
+        transition: none;
+    }
+
+    .mx-scroll-view__pull,
+    .mx-scroll-view__bottom {
+        display: flex;
+        box-sizing: border-box;
+        align-items: center;
+        justify-content: center;
+        gap: var(--_scroll-view-panel-gap);
+        block-size: var(--_scroll-view-panel-height);
+    }
+
+    /* Above the content, out of sight until the content is pulled down. */
+    .mx-scroll-view__pull {
+        margin-block-start: calc(-1 * var(--_scroll-view-panel-height));
+    }
+}
+
 /* Toast and Toaster. A toaster is a region with a fixed stack at each edge position in use; a toast
    is a surface whose tone shows in its glyph and wherever a design language draws it (the units in
    units.css: the surface, a stripe along its start edge, a timer line along its bottom, the glyph on
@@ -19618,6 +20868,30 @@
     background-color: var(--_calendar-cell-selected-hover-bg, var(--_calendar-cell-selected-bg, transparent));
   }
 
+  .mx-calendar__cell[data-range='start'] {
+    background-color: var(--_calendar-cell-range-start-bg, transparent);
+    color: var(--_calendar-cell-range-start-color, inherit);
+  }
+
+  .mx-calendar__cell[data-range='end'] {
+    background-color: var(--_calendar-cell-range-end-bg, var(--_calendar-cell-range-start-bg, transparent));
+    color: var(--_calendar-cell-range-end-color, var(--_calendar-cell-range-start-color, inherit));
+  }
+
+  .mx-calendar__cell[data-range='single'] {
+    background-color: var(--_calendar-cell-range-single-bg, var(--_calendar-cell-range-start-bg, transparent));
+    color: var(--_calendar-cell-range-single-color, var(--_calendar-cell-range-start-color, inherit));
+  }
+
+  .mx-calendar__cell[data-range='in'] {
+    background-color: var(--_calendar-cell-range-in-bg, transparent);
+    border-start-start-radius: var(--_calendar-cell-range-in-radius, var(--_calendar-cell-radius, 0px));
+    border-start-end-radius: var(--_calendar-cell-range-in-radius, var(--_calendar-cell-radius, 0px));
+    border-end-start-radius: var(--_calendar-cell-range-in-radius, var(--_calendar-cell-radius, 0px));
+    border-end-end-radius: var(--_calendar-cell-range-in-radius, var(--_calendar-cell-radius, 0px));
+    color: var(--_calendar-cell-range-in-color, inherit);
+  }
+
   .mx-calendar__cell[aria-disabled='true'] {
     color: var(--_calendar-cell-disabled-color, inherit);
   }
@@ -21299,6 +22573,40 @@
     border-inline-start-color: var(--_date-box-times-beside-border-start-color, currentcolor);
   }
 
+  .mx-date-range-box__separator {
+    inline-size: var(--_date-range-box-separator-size, auto);
+    block-size: var(--_date-range-box-separator-size, auto);
+    margin-inline-end: var(--_date-range-box-separator-margin-inline, 0px);
+    margin-inline-start: var(--_date-range-box-separator-margin-inline, 0px);
+    background-color: var(--_date-range-box-separator-bg, transparent);
+    --_icon: var(--_date-range-box-separator-icon, none);
+  }
+
+  .mx-date-range-box__popup > .mx-date-range-box__presets {
+    min-inline-size: var(--_date-range-box-presets-min-width, auto);
+    max-block-size: var(--_date-range-box-presets-max-height, none);
+    border-style: solid;
+    border-block-start-width: 0px;
+    border-inline-end-width: 0px;
+    border-block-end-width: 0px;
+    border-inline-start-width: 0px;
+    outline-style: solid;
+    outline-width: 0px;
+  }
+
+  .mx-date-range-box__popup > .mx-date-range-box__presets:focus-visible {
+    box-shadow: var(--_date-range-box-presets-focus-glow, 0 0 #0000), 0 0 #0000;
+    outline-width: var(--_date-range-box-presets-focus-outline-width, 0px);
+    outline-color: var(--_date-range-box-presets-focus-outline-color, currentcolor);
+    outline-offset: var(--_date-range-box-presets-focus-outline-offset, 0px);
+  }
+
+  .mx-date-range-box__popup > .mx-calendar + .mx-date-range-box__presets {
+    padding-inline-start: var(--_date-range-box-presets-beside-padding-start, 0px);
+    border-inline-start-width: var(--_date-range-box-presets-beside-border-start-width, 0px);
+    border-inline-start-color: var(--_date-range-box-presets-beside-border-start-color, currentcolor);
+  }
+
   :where([data-disabled] [aria-disabled='true'], [data-disabled][aria-disabled='true']) {
     color: var(--_disabled-element-color, inherit);
     cursor: default;
@@ -21412,6 +22720,11 @@
     color: var(--_drop-down-value-placeholder-color, inherit);
   }
 
+  .mx-drop-down__text[data-missing] {
+    color: var(--_drop-down-value-missing-color, inherit);
+    text-decoration-line: var(--_drop-down-value-missing-text-decoration, none);
+  }
+
   .mx-drop-down__chevron {
     inline-size: var(--_drop-down-chevron-size, auto);
     block-size: var(--_drop-down-chevron-size, auto);
@@ -21427,21 +22740,42 @@
     color: var(--_drop-down-chevron-disabled-color, var(--_drop-down-chevron-color, inherit));
   }
 
+  .mx-drop-down__spinner {
+    inline-size: var(--_drop-down-spinner-size, auto);
+    block-size: var(--_drop-down-spinner-size, auto);
+    border-style: solid;
+    border-block-start-width: var(--_drop-down-spinner-border-width, 0px);
+    border-inline-end-width: var(--_drop-down-spinner-border-width, 0px);
+    border-block-end-width: var(--_drop-down-spinner-border-width, 0px);
+    border-inline-start-width: var(--_drop-down-spinner-border-width, 0px);
+    border-inline-end-color: var(--_drop-down-spinner-border-end-color, currentcolor);
+    border-start-start-radius: var(--_drop-down-spinner-radius, 0px);
+    border-start-end-radius: var(--_drop-down-spinner-radius, 0px);
+    border-end-start-radius: var(--_drop-down-spinner-radius, 0px);
+    border-end-end-radius: var(--_drop-down-spinner-radius, 0px);
+    color: var(--_drop-down-spinner-color, inherit);
+  }
+
+  .mx-drop-down__spinner::before {
+    display: var(--_drop-down-spinner-shape-display, none);
+    background-color: currentcolor;
+  }
+
   :where(.mx-field) > .mx-field__box {
     min-block-size: var(--_box-height);
     padding-inline-end: var(--_padding-end);
     padding-inline-start: var(--_padding-start);
     gap: var(--_field-gap);
     background-color: var(--_field-box-bg, transparent);
-    border-style: solid;
+    border-style: var(--_field-box-border-style, solid);
     border-block-start-width: var(--_field-border-width);
     border-inline-end-width: var(--_field-border-width);
     border-block-end-width: var(--_field-border-width);
     border-inline-start-width: var(--_field-border-width);
-    border-block-start-color: transparent;
-    border-inline-end-color: transparent;
-    border-block-end-color: transparent;
-    border-inline-start-color: transparent;
+    border-block-start-color: var(--_field-box-border-color, transparent);
+    border-inline-end-color: var(--_field-box-border-color, transparent);
+    border-block-end-color: var(--_field-box-border-color, transparent);
+    border-inline-start-color: var(--_field-box-border-color, transparent);
     border-start-start-radius: var(--_field-box-radius, 0px);
     border-start-end-radius: var(--_field-box-radius, 0px);
     border-end-start-radius: var(--_field-box-radius, 0px);
@@ -22103,6 +23437,163 @@
     margin-inline-start: auto;
   }
 
+  .mx-file-uploader[data-dragover] .mx-field__box {
+    background-color: var(--_file-uploader-over-bg, transparent);
+    border-block-start-color: var(--_file-uploader-over-border-color, currentcolor);
+    border-inline-end-color: var(--_file-uploader-over-border-color, currentcolor);
+    border-block-end-color: var(--_file-uploader-over-border-color, currentcolor);
+    border-inline-start-color: var(--_file-uploader-over-border-color, currentcolor);
+  }
+
+  .mx-file-uploader__select {
+    padding-block-start: var(--_file-uploader-select-padding-block, 0px);
+    padding-inline-end: var(--_file-uploader-select-padding-inline, 0px);
+    padding-block-end: var(--_file-uploader-select-padding-block, 0px);
+    padding-inline-start: var(--_file-uploader-select-padding-inline, 0px);
+    background-color: var(--_file-uploader-select-bg, transparent);
+    border-style: solid;
+    border-block-start-width: var(--_file-uploader-select-border-width, 0px);
+    border-inline-end-width: var(--_file-uploader-select-border-width, 0px);
+    border-block-end-width: var(--_file-uploader-select-border-width, 0px);
+    border-inline-start-width: var(--_file-uploader-select-border-width, 0px);
+    border-block-start-color: var(--_file-uploader-select-border-color, currentcolor);
+    border-inline-end-color: var(--_file-uploader-select-border-color, currentcolor);
+    border-block-end-color: var(--_file-uploader-select-border-color, currentcolor);
+    border-inline-start-color: var(--_file-uploader-select-border-color, currentcolor);
+    border-start-start-radius: var(--_file-uploader-select-radius, 0px);
+    border-start-end-radius: var(--_file-uploader-select-radius, 0px);
+    border-end-start-radius: var(--_file-uploader-select-radius, 0px);
+    border-end-end-radius: var(--_file-uploader-select-radius, 0px);
+    color: var(--_file-uploader-select-color, inherit);
+    font-weight: var(--_file-uploader-select-font-weight, inherit);
+    outline-style: solid;
+    outline-width: 0px;
+    cursor: default;
+  }
+
+  .mx-file-uploader__select:not(:disabled):hover {
+    background-color: var(--_file-uploader-select-hover-bg, var(--_file-uploader-select-bg, transparent));
+    cursor: var(--_file-uploader-select-hover-cursor, default);
+  }
+
+  .mx-file-uploader__select:not(:disabled):active {
+    background-color: var(--_file-uploader-select-pressed-bg, var(--_file-uploader-select-hover-bg, var(--_file-uploader-select-bg, transparent)));
+  }
+
+  .mx-file-uploader__select:focus-visible {
+    box-shadow: var(--_file-uploader-select-focus-glow, 0 0 #0000), 0 0 #0000;
+    outline-width: var(--_file-uploader-select-focus-outline-width, 0px);
+    outline-color: var(--_file-uploader-select-focus-outline-color, currentcolor);
+    outline-offset: var(--_file-uploader-select-focus-outline-offset, 0px);
+  }
+
+  .mx-file-uploader__select:disabled {
+    border-block-start-color: var(--_file-uploader-select-disabled-border-color, var(--_file-uploader-select-border-color, currentcolor));
+    border-inline-end-color: var(--_file-uploader-select-disabled-border-color, var(--_file-uploader-select-border-color, currentcolor));
+    border-block-end-color: var(--_file-uploader-select-disabled-border-color, var(--_file-uploader-select-border-color, currentcolor));
+    border-inline-start-color: var(--_file-uploader-select-disabled-border-color, var(--_file-uploader-select-border-color, currentcolor));
+    color: var(--_file-uploader-select-disabled-color, var(--_file-uploader-select-color, inherit));
+  }
+
+  .mx-file-uploader__upload {
+    padding-block-start: var(--_file-uploader-upload-padding-block, 0px);
+    padding-inline-end: var(--_file-uploader-upload-padding-inline, 0px);
+    padding-block-end: var(--_file-uploader-upload-padding-block, 0px);
+    padding-inline-start: var(--_file-uploader-upload-padding-inline, 0px);
+    background-color: var(--_file-uploader-upload-bg, transparent);
+    border-style: solid;
+    border-block-start-width: var(--_file-uploader-upload-border-width, 0px);
+    border-inline-end-width: var(--_file-uploader-upload-border-width, 0px);
+    border-block-end-width: var(--_file-uploader-upload-border-width, 0px);
+    border-inline-start-width: var(--_file-uploader-upload-border-width, 0px);
+    border-block-start-color: var(--_file-uploader-upload-border-color, currentcolor);
+    border-inline-end-color: var(--_file-uploader-upload-border-color, currentcolor);
+    border-block-end-color: var(--_file-uploader-upload-border-color, currentcolor);
+    border-inline-start-color: var(--_file-uploader-upload-border-color, currentcolor);
+    border-start-start-radius: var(--_file-uploader-upload-radius, 0px);
+    border-start-end-radius: var(--_file-uploader-upload-radius, 0px);
+    border-end-start-radius: var(--_file-uploader-upload-radius, 0px);
+    border-end-end-radius: var(--_file-uploader-upload-radius, 0px);
+    color: var(--_file-uploader-upload-color, inherit);
+    font-weight: var(--_file-uploader-upload-font-weight, inherit);
+    outline-style: solid;
+    outline-width: 0px;
+    cursor: default;
+  }
+
+  .mx-file-uploader__upload:not(:disabled):hover {
+    background-color: var(--_file-uploader-upload-hover-bg, var(--_file-uploader-upload-bg, transparent));
+    cursor: var(--_file-uploader-upload-hover-cursor, default);
+  }
+
+  .mx-file-uploader__upload:not(:disabled):active {
+    background-color: var(--_file-uploader-upload-pressed-bg, var(--_file-uploader-upload-hover-bg, var(--_file-uploader-upload-bg, transparent)));
+  }
+
+  .mx-file-uploader__upload:focus-visible {
+    box-shadow: var(--_file-uploader-upload-focus-glow, 0 0 #0000), 0 0 #0000;
+    outline-width: var(--_file-uploader-upload-focus-outline-width, 0px);
+    outline-color: var(--_file-uploader-upload-focus-outline-color, currentcolor);
+    outline-offset: var(--_file-uploader-upload-focus-outline-offset, 0px);
+  }
+
+  .mx-file-uploader__drop {
+    color: var(--_file-uploader-hint-color, inherit);
+  }
+
+  .mx-file-uploader__list {
+    margin-block-start: var(--_file-uploader-list-margin-top, 0px);
+    gap: var(--_file-uploader-list-gap, normal);
+  }
+
+  .mx-file-uploader__item {
+    padding-block-start: var(--_file-uploader-item-padding-block, 0px);
+    padding-inline-end: var(--_file-uploader-item-padding-inline, 0px);
+    padding-block-end: var(--_file-uploader-item-padding-block, 0px);
+    padding-inline-start: var(--_file-uploader-item-padding-inline, 0px);
+    border-start-start-radius: var(--_file-uploader-item-radius, 0px);
+    border-start-end-radius: var(--_file-uploader-item-radius, 0px);
+    border-end-start-radius: var(--_file-uploader-item-radius, 0px);
+    border-end-end-radius: var(--_file-uploader-item-radius, 0px);
+  }
+
+  .mx-file-uploader__item[data-status='error'] {
+    background-color: var(--_file-uploader-item-error-bg, transparent);
+  }
+
+  .mx-file-uploader__item[data-status='invalid'] {
+    background-color: var(--_file-uploader-item-invalid-bg, transparent);
+  }
+
+  .mx-file-uploader__icon {
+    inline-size: var(--_file-uploader-icon-size, auto);
+    block-size: var(--_file-uploader-icon-size, auto);
+    background-color: var(--_file-uploader-icon-bg, transparent);
+    --_icon: var(--_file-uploader-icon-icon, none);
+  }
+
+  .mx-file-uploader__name {
+    color: var(--_file-uploader-name-color, inherit);
+  }
+
+  .mx-file-uploader__size {
+    color: var(--_file-uploader-size-color, inherit);
+    font-size: var(--_file-uploader-size-font-size, inherit);
+  }
+
+  .mx-file-uploader__state {
+    color: var(--_file-uploader-state-color, inherit);
+    font-size: var(--_file-uploader-state-font-size, inherit);
+  }
+
+  .mx-file-uploader__item[data-status='done'] .mx-file-uploader__state {
+    color: var(--_file-uploader-state-done-color, var(--_file-uploader-state-color, inherit));
+  }
+
+  .mx-file-uploader__item:is([data-status='error'], [data-status='invalid']) .mx-file-uploader__state {
+    color: var(--_file-uploader-state-error-color, var(--_file-uploader-state-color, inherit));
+  }
+
   .mx-filter-builder {
     color: var(--_filterbuilder-container-color, inherit);
     font-size: var(--_filterbuilder-container-font-size, inherit);
@@ -22540,6 +24031,45 @@
     background-color: var(--_listbox-idle-bg, transparent);
   }
 
+  .mx-load-panel[data-shade] {
+    background-color: var(--_load-panel-shade-shaded-bg, transparent);
+  }
+
+  .mx-load-panel__pane {
+    border-style: solid;
+    border-block-start-width: 0px;
+    border-inline-end-width: 0px;
+    border-block-end-width: 0px;
+    border-inline-start-width: 0px;
+  }
+
+  .mx-load-panel[data-pane] > .mx-load-panel__pane {
+    min-inline-size: var(--_load-panel-pane-shown-min-width, auto);
+    padding-block-start: var(--_load-panel-pane-shown-padding-block, 0px);
+    padding-inline-end: var(--_load-panel-pane-shown-padding-inline, 0px);
+    padding-block-end: var(--_load-panel-pane-shown-padding-block, 0px);
+    padding-inline-start: var(--_load-panel-pane-shown-padding-inline, 0px);
+    background-color: var(--_load-panel-pane-shown-bg, transparent);
+    border-block-start-width: var(--_load-panel-pane-shown-border-width, 0px);
+    border-inline-end-width: var(--_load-panel-pane-shown-border-width, 0px);
+    border-block-end-width: var(--_load-panel-pane-shown-border-width, 0px);
+    border-inline-start-width: var(--_load-panel-pane-shown-border-width, 0px);
+    border-block-start-color: var(--_load-panel-pane-shown-border-color, currentcolor);
+    border-inline-end-color: var(--_load-panel-pane-shown-border-color, currentcolor);
+    border-block-end-color: var(--_load-panel-pane-shown-border-color, currentcolor);
+    border-inline-start-color: var(--_load-panel-pane-shown-border-color, currentcolor);
+    border-start-start-radius: var(--_load-panel-pane-shown-radius, 0px);
+    border-start-end-radius: var(--_load-panel-pane-shown-radius, 0px);
+    border-end-start-radius: var(--_load-panel-pane-shown-radius, 0px);
+    border-end-end-radius: var(--_load-panel-pane-shown-radius, 0px);
+    box-shadow: var(--_load-panel-pane-shown-shadow, none);
+  }
+
+  .mx-load-panel__message {
+    color: var(--_load-panel-message-color, inherit);
+    font-size: var(--_load-panel-message-font-size, inherit);
+  }
+
   .mx-lookup__header {
     padding-block-start: var(--_lookup-header-padding-block, 0px);
     padding-inline-end: var(--_lookup-header-padding-inline, 0px);
@@ -22826,6 +24356,78 @@
     font-size: var(--_pagination-info-font-size, inherit);
   }
 
+  .mx-popover {
+    max-inline-size: var(--_popover-surface-max-width, none);
+    background-color: var(--_popover-surface-bg, transparent);
+    border-style: solid;
+    border-block-start-width: var(--_popover-surface-border-width, 0px);
+    border-inline-end-width: var(--_popover-surface-border-width, 0px);
+    border-block-end-width: var(--_popover-surface-border-width, 0px);
+    border-inline-start-width: var(--_popover-surface-border-width, 0px);
+    border-block-start-color: var(--_popover-surface-border-color, currentcolor);
+    border-inline-end-color: var(--_popover-surface-border-color, currentcolor);
+    border-block-end-color: var(--_popover-surface-border-color, currentcolor);
+    border-inline-start-color: var(--_popover-surface-border-color, currentcolor);
+    border-start-start-radius: var(--_popover-surface-radius, 0px);
+    border-start-end-radius: var(--_popover-surface-radius, 0px);
+    border-end-start-radius: var(--_popover-surface-radius, 0px);
+    border-end-end-radius: var(--_popover-surface-radius, 0px);
+    box-shadow: 0 0 #0000, var(--_popover-surface-shadow, 0 0 #0000);
+    color: var(--_popover-surface-color, inherit);
+    font-size: var(--_popover-surface-font-size, inherit);
+    line-height: var(--_popover-surface-line-height, inherit);
+    outline-style: solid;
+    outline-width: 0px;
+  }
+
+  .mx-popover:focus-visible {
+    box-shadow: var(--_popover-surface-focus-glow, 0 0 #0000), var(--_popover-surface-shadow, 0 0 #0000);
+    outline-width: var(--_popover-surface-focus-outline-width, 0px);
+    outline-color: var(--_popover-surface-focus-outline-color, currentcolor);
+    outline-offset: var(--_popover-surface-focus-outline-offset, 0px);
+  }
+
+  .mx-popover__arrow {
+    display: var(--_popover-arrow-display, none);
+    inline-size: var(--_popover-arrow-size, auto);
+    block-size: var(--_popover-arrow-size, auto);
+    background-color: var(--_popover-arrow-bg, transparent);
+    border-style: solid;
+    border-block-start-width: var(--_popover-arrow-border-width, 0px);
+    border-inline-end-width: var(--_popover-arrow-border-width, 0px);
+    border-block-end-width: var(--_popover-arrow-border-width, 0px);
+    border-inline-start-width: var(--_popover-arrow-border-width, 0px);
+    border-block-start-color: var(--_popover-arrow-border-color, currentcolor);
+    border-inline-end-color: var(--_popover-arrow-border-color, currentcolor);
+    border-block-end-color: var(--_popover-arrow-border-color, currentcolor);
+    border-inline-start-color: var(--_popover-arrow-border-color, currentcolor);
+  }
+
+  .mx-popover__header {
+    padding-block-start: var(--_popover-header-padding-block, 0px);
+    padding-inline-end: var(--_popover-header-padding-end, 0px);
+    padding-block-end: var(--_popover-header-padding-block, 0px);
+    padding-inline-start: var(--_popover-header-padding-start, 0px);
+    border-style: solid;
+    border-block-start-width: 0px;
+    border-inline-end-width: 0px;
+    border-block-end-width: var(--_popover-header-border-bottom-width, 0px);
+    border-inline-start-width: 0px;
+    border-block-end-color: var(--_popover-header-border-bottom-color, currentcolor);
+  }
+
+  .mx-popover__title {
+    color: var(--_popover-title-color, inherit);
+    font-weight: var(--_popover-title-font-weight, inherit);
+  }
+
+  .mx-popover__body {
+    padding-block-start: var(--_popover-body-padding, 0px);
+    padding-inline-end: var(--_popover-body-padding, 0px);
+    padding-block-end: var(--_popover-body-padding, 0px);
+    padding-inline-start: var(--_popover-body-padding, 0px);
+  }
+
   .mx-popup {
     padding-block-start: var(--_popup-surface-padding-block, var(--_popup-surface-padding, 0px));
     padding-inline-end: var(--_popup-surface-padding-inline, var(--_popup-surface-padding, 0px));
@@ -24172,6 +25774,32 @@
     color: var(--_scheduler-state-danger-color, inherit);
   }
 
+  .mx-scroll-view {
+    outline-style: solid;
+    outline-width: 0px;
+  }
+
+  .mx-scroll-view:focus-visible {
+    box-shadow: var(--_scroll-view-box-focus-glow, 0 0 #0000), 0 0 #0000;
+    outline-width: var(--_scroll-view-box-focus-outline-width, 0px);
+    outline-color: var(--_scroll-view-box-focus-outline-color, currentcolor);
+    outline-offset: var(--_scroll-view-box-focus-outline-offset, 0px);
+  }
+
+  .mx-scroll-view__pull {
+    color: var(--_scroll-view-pull-color, inherit);
+    font-size: var(--_scroll-view-pull-font-size, inherit);
+  }
+
+  .mx-scroll-view[data-pull-state='refreshing'] .mx-scroll-view__pull {
+    color: var(--_scroll-view-pull-refreshing-color, var(--_scroll-view-pull-color, inherit));
+  }
+
+  .mx-scroll-view__bottom {
+    color: var(--_scroll-view-bottom-color, inherit);
+    font-size: var(--_scroll-view-bottom-font-size, inherit);
+  }
+
   .mx-bottom-sheet__scrim {
     background-color: var(--_sheet-scrim-bg, transparent);
   }
@@ -24571,6 +26199,61 @@
     display: none;
   }
 
+  .mx-sortable {
+    gap: var(--_sortable-gap);
+  }
+
+  .mx-sortable[data-drop-target] {
+    background-color: var(--_sortable-container-target-bg, transparent);
+  }
+
+  .mx-sortable__item {
+    outline-style: solid;
+    outline-width: 0px;
+  }
+
+  .mx-sortable[data-sortable] > .mx-sortable__item {
+    cursor: var(--_sortable-item-sortable-cursor, inherit);
+  }
+
+  .mx-sortable__item[data-dragging] {
+    opacity: var(--_sortable-item-dragging-opacity, 1);
+  }
+
+  .mx-sortable__item:focus-visible {
+    box-shadow: var(--_sortable-item-focus-glow, 0 0 #0000), 0 0 #0000;
+    outline-width: var(--_sortable-item-focus-outline-width, 0px);
+    outline-color: var(--_sortable-item-focus-outline-color, currentcolor);
+    outline-offset: var(--_sortable-item-focus-outline-offset, 0px);
+  }
+
+  .mx-sortable__line {
+    block-size: var(--_sortable-line-height, auto);
+    background-color: var(--_sortable-line-bg, transparent);
+    border-start-start-radius: var(--_sortable-line-radius, 0px);
+    border-start-end-radius: var(--_sortable-line-radius, 0px);
+    border-end-start-radius: var(--_sortable-line-radius, 0px);
+    border-end-end-radius: var(--_sortable-line-radius, 0px);
+  }
+
+  .mx-sortable__line:where(.mx-sortable[data-orientation='horizontal'] *) {
+    block-size: auto;
+    inline-size: var(--_sortable-line-height, auto);
+    border-start-start-radius: var(--_sortable-line-radius, 0px);
+    border-end-start-radius: var(--_sortable-line-radius, 0px);
+    border-start-end-radius: var(--_sortable-line-radius, 0px);
+    border-end-end-radius: var(--_sortable-line-radius, 0px);
+  }
+
+  .mx-sortable__ghost {
+    border-start-start-radius: var(--_sortable-ghost-radius, 0px);
+    border-start-end-radius: var(--_sortable-ghost-radius, 0px);
+    border-end-start-radius: var(--_sortable-ghost-radius, 0px);
+    border-end-end-radius: var(--_sortable-ghost-radius, 0px);
+    box-shadow: var(--_sortable-ghost-shadow, none);
+    opacity: var(--_sortable-ghost-opacity, 1);
+  }
+
   .mx-spinner[data-contained] .mx-spinner__box {
     padding-block-start: var(--_spinner-box-contained-padding, 0px);
     padding-inline-end: var(--_spinner-box-contained-padding, 0px);
@@ -24614,6 +26297,168 @@
     scale: var(--_spinner-shape-contained-scale, none);
   }
 
+  .mx-stepper__step {
+    padding-block-start: var(--_padding);
+    padding-inline-end: var(--_padding);
+    padding-block-end: var(--_padding);
+    padding-inline-start: var(--_padding);
+    gap: var(--_stepper-gap);
+    border-start-start-radius: var(--_stepper-step-radius, 0px);
+    border-start-end-radius: var(--_stepper-step-radius, 0px);
+    border-end-start-radius: var(--_stepper-step-radius, 0px);
+    border-end-end-radius: var(--_stepper-step-radius, 0px);
+    color: var(--_stepper-step-color, inherit);
+    font-size: var(--_font-size);
+    outline-style: solid;
+    outline-width: 0px;
+    cursor: default;
+  }
+
+  button.mx-stepper__step:not([aria-disabled='true']):hover {
+    background-color: var(--_stepper-step-hover-bg, transparent);
+    cursor: var(--_stepper-step-hover-cursor, default);
+  }
+
+  button.mx-stepper__step:not([aria-disabled='true']):active {
+    background-color: var(--_stepper-step-pressed-bg, var(--_stepper-step-hover-bg, transparent));
+  }
+
+  .mx-stepper__step:focus-visible {
+    box-shadow: var(--_stepper-step-focus-glow, 0 0 #0000), 0 0 #0000;
+    outline-width: var(--_stepper-step-focus-outline-width, 0px);
+    outline-color: var(--_stepper-step-focus-outline-color, currentcolor);
+    outline-offset: var(--_stepper-step-focus-outline-offset, 0px);
+  }
+
+  .mx-stepper__step[aria-disabled='true'] {
+    color: var(--_stepper-step-disabled-color, var(--_stepper-step-color, inherit));
+  }
+
+  .mx-stepper__step[aria-current] {
+    color: var(--_stepper-step-current-color, var(--_stepper-step-color, inherit));
+  }
+
+  .mx-stepper__step[data-status='done'] {
+    color: var(--_stepper-step-done-color, var(--_stepper-step-color, inherit));
+  }
+
+  .mx-stepper__indicator {
+    inline-size: var(--_size);
+    block-size: var(--_size);
+    background-color: var(--_stepper-indicator-bg, transparent);
+    border-style: solid;
+    border-block-start-width: var(--_stepper-indicator-border-width, 0px);
+    border-inline-end-width: var(--_stepper-indicator-border-width, 0px);
+    border-block-end-width: var(--_stepper-indicator-border-width, 0px);
+    border-inline-start-width: var(--_stepper-indicator-border-width, 0px);
+    border-block-start-color: var(--_stepper-indicator-border-color, currentcolor);
+    border-inline-end-color: var(--_stepper-indicator-border-color, currentcolor);
+    border-block-end-color: var(--_stepper-indicator-border-color, currentcolor);
+    border-inline-start-color: var(--_stepper-indicator-border-color, currentcolor);
+    border-start-start-radius: var(--_stepper-indicator-radius, 0px);
+    border-start-end-radius: var(--_stepper-indicator-radius, 0px);
+    border-end-start-radius: var(--_stepper-indicator-radius, 0px);
+    border-end-end-radius: var(--_stepper-indicator-radius, 0px);
+    color: var(--_stepper-indicator-color, inherit);
+    font-size: var(--_stepper-indicator-font-size, inherit);
+    font-weight: var(--_stepper-indicator-font-weight, inherit);
+  }
+
+  .mx-stepper__indicator[data-status='current'] {
+    background-color: var(--_stepper-indicator-current-bg, var(--_stepper-indicator-bg, transparent));
+    border-block-start-color: var(--_stepper-indicator-current-border-color, var(--_stepper-indicator-border-color, currentcolor));
+    border-inline-end-color: var(--_stepper-indicator-current-border-color, var(--_stepper-indicator-border-color, currentcolor));
+    border-block-end-color: var(--_stepper-indicator-current-border-color, var(--_stepper-indicator-border-color, currentcolor));
+    border-inline-start-color: var(--_stepper-indicator-current-border-color, var(--_stepper-indicator-border-color, currentcolor));
+    color: var(--_stepper-indicator-current-color, var(--_stepper-indicator-color, inherit));
+  }
+
+  .mx-stepper__indicator[data-status='done'] {
+    background-color: var(--_stepper-indicator-done-bg, var(--_stepper-indicator-bg, transparent));
+    border-block-start-color: var(--_stepper-indicator-done-border-color, var(--_stepper-indicator-border-color, currentcolor));
+    border-inline-end-color: var(--_stepper-indicator-done-border-color, var(--_stepper-indicator-border-color, currentcolor));
+    border-block-end-color: var(--_stepper-indicator-done-border-color, var(--_stepper-indicator-border-color, currentcolor));
+    border-inline-start-color: var(--_stepper-indicator-done-border-color, var(--_stepper-indicator-border-color, currentcolor));
+    color: var(--_stepper-indicator-done-color, var(--_stepper-indicator-color, inherit));
+  }
+
+  .mx-stepper__indicator[data-status='error'] {
+    background-color: var(--_stepper-indicator-error-bg, var(--_stepper-indicator-bg, transparent));
+    border-block-start-color: var(--_stepper-indicator-error-border-color, var(--_stepper-indicator-border-color, currentcolor));
+    border-inline-end-color: var(--_stepper-indicator-error-border-color, var(--_stepper-indicator-border-color, currentcolor));
+    border-block-end-color: var(--_stepper-indicator-error-border-color, var(--_stepper-indicator-border-color, currentcolor));
+    border-inline-start-color: var(--_stepper-indicator-error-border-color, var(--_stepper-indicator-border-color, currentcolor));
+    color: var(--_stepper-indicator-error-color, var(--_stepper-indicator-color, inherit));
+  }
+
+  .mx-stepper__step[aria-disabled='true'] .mx-stepper__indicator {
+    background-color: var(--_stepper-indicator-disabled-bg, var(--_stepper-indicator-bg, transparent));
+    border-block-start-color: var(--_stepper-indicator-disabled-border-color, var(--_stepper-indicator-border-color, currentcolor));
+    border-inline-end-color: var(--_stepper-indicator-disabled-border-color, var(--_stepper-indicator-border-color, currentcolor));
+    border-block-end-color: var(--_stepper-indicator-disabled-border-color, var(--_stepper-indicator-border-color, currentcolor));
+    border-inline-start-color: var(--_stepper-indicator-disabled-border-color, var(--_stepper-indicator-border-color, currentcolor));
+    color: var(--_stepper-indicator-disabled-color, var(--_stepper-indicator-color, inherit));
+  }
+
+  .mx-stepper__mark {
+    inline-size: calc(var(--_size) * 0.6);
+    block-size: calc(var(--_size) * 0.6);
+  }
+
+  .mx-stepper__mark[data-status='done'] {
+    background-color: var(--_stepper-mark-done-bg, transparent);
+    --_icon: var(--_stepper-mark-done-icon, none);
+  }
+
+  .mx-stepper__mark[data-status='error'] {
+    background-color: var(--_stepper-mark-error-bg, transparent);
+    --_icon: var(--_stepper-mark-error-icon, none);
+  }
+
+  .mx-stepper__step[aria-current] .mx-stepper__label {
+    font-weight: var(--_stepper-label-current-font-weight, inherit);
+  }
+
+  .mx-stepper__step[data-status='error'] .mx-stepper__label {
+    color: var(--_stepper-label-error-color, inherit);
+  }
+
+  .mx-stepper__description {
+    color: var(--_stepper-description-color, inherit);
+    font-size: var(--_stepper-description-font-size);
+  }
+
+  .mx-stepper__step[aria-disabled='true'] .mx-stepper__description {
+    color: var(--_stepper-description-disabled-color, var(--_stepper-description-color, inherit));
+  }
+
+  .mx-stepper__note {
+    color: var(--_stepper-note-color, inherit);
+    font-size: var(--_stepper-description-font-size);
+  }
+
+  .mx-stepper__line {
+    block-size: var(--_stepper-line-height, auto);
+    background-color: var(--_stepper-line-bg, transparent);
+    border-start-start-radius: var(--_stepper-line-radius, 0px);
+    border-start-end-radius: var(--_stepper-line-radius, 0px);
+    border-end-start-radius: var(--_stepper-line-radius, 0px);
+    border-end-end-radius: var(--_stepper-line-radius, 0px);
+  }
+
+  .mx-stepper__line:where(.mx-stepper[data-orientation='vertical'] *) {
+    block-size: auto;
+    inline-size: var(--_stepper-line-height, auto);
+    border-start-start-radius: var(--_stepper-line-radius, 0px);
+    border-end-start-radius: var(--_stepper-line-radius, 0px);
+    border-start-end-radius: var(--_stepper-line-radius, 0px);
+    border-end-end-radius: var(--_stepper-line-radius, 0px);
+  }
+
+  .mx-stepper__line[data-status='done'] {
+    background-color: var(--_stepper-line-done-bg, var(--_stepper-line-bg, transparent));
+  }
+
   .mx-switch__input {
     block-size: var(--_track-height);
     min-inline-size: var(--_track-width);
@@ -26524,6 +28369,16 @@
   .mx-message-box[data-tone='danger'] > .mx-message-box__icon > * {
     color: var(--_window-message-icon-danger-color, var(--_window-message-icon-color, inherit));
   }
+
+  .mx-wizard__bar {
+    padding-block-start: var(--_wizard-bar-padding-top, 0px);
+    border-style: solid;
+    border-block-start-width: var(--_wizard-bar-border-top-width, 0px);
+    border-inline-end-width: 0px;
+    border-block-end-width: 0px;
+    border-inline-start-width: 0px;
+    border-block-start-color: var(--_wizard-bar-border-top-color, currentcolor);
+  }
 }
 
 /* Generated by scripts/build-tokens.mjs from tokens/schema and tokens/languages. Do not edit; edit the source and run `npm run tokens`. */
@@ -26774,6 +28629,16 @@
     --_calendar-container-padding: var(--mx-date-box-calendar-container-padding);
   }
 
+  /* date-range-box: field — The field under a range box: two dates wide. */
+  .mx-date-range-box {
+    --_field-width: var(--mx-date-range-box-field-width);
+  }
+
+  /* date-range-box: calendar — A calendar on the popup. */
+  .mx-date-range-box__popup > .mx-calendar {
+    --_calendar-container-padding: var(--mx-date-range-box-calendar-container-padding);
+  }
+
   /* drawer: close-button — The close button in the header. */
   .mx-drawer__tools > .mx-drawer__close {
     --_button-variant: var(--mx-drawer-close-button-variant);
@@ -26826,6 +28691,24 @@
     --_field-size: var(--mx-drop-down-search-size);
   }
 
+  /* file-uploader: field — The field under an uploader: the box is the drop zone (a dashed frame where the language draws one). */
+  .mx-file-uploader {
+    --_field-width: var(--mx-file-uploader-field-width);
+    --_field-box-border-style: var(--mx-file-uploader-field-box-border-style);
+    --_field-border-width: var(--mx-file-uploader-field-border-width);
+    --_field-box-border-color: var(--mx-file-uploader-field-box-border-color);
+    --_field-box-hover-bg: var(--mx-file-uploader-field-box-hover-bg);
+    --_field-box-radius: var(--mx-file-uploader-field-box-radius);
+    --_field-padding-sm: var(--mx-file-uploader-field-padding-sm);
+    --_field-padding-md: var(--mx-file-uploader-field-padding-md);
+    --_field-padding-lg: var(--mx-file-uploader-field-padding-lg);
+  }
+
+  /* file-uploader: action — A row's buttons: cancel, retry, remove. */
+  .mx-file-uploader__action {
+    --_button-variant: var(--mx-file-uploader-action-variant);
+  }
+
   /* filterbuilder: field-button — The button that chooses a condition's field. */
   .mx-filter-builder__cell > .mx-filter-builder__field {
     --_button-variant: var(--mx-filterbuilder-field-button-variant);
@@ -26914,6 +28797,16 @@
     --_list-item-radius: var(--mx-listbox-list-item-radius);
   }
 
+  /* load-panel: cancel — The Cancel button in the pane. */
+  .mx-load-panel__cancel {
+    --_button-variant: var(--mx-load-panel-cancel-variant);
+  }
+
+  /* popover: close — The close button in the header. */
+  .mx-popover__close {
+    --_button-variant: var(--mx-popover-close-variant);
+  }
+
   /* popup: list-box — A list box inside a popup: the surface is its frame, so by default the list draws none of its own (no frame, fill or shadow). */
   .mx-popup .mx-list-box {
     --_field-frame-display: var(--mx-popup-list-box-frame-display);
@@ -27370,4 +29263,15 @@
     --_button-variant: var(--mx-window-footer-main-button-variant);
     --_button-size: var(--mx-window-footer-main-button-size);
   }
+
+  /* wizard: previous — The Back button. */
+  .mx-wizard__previous {
+    --_button-variant: var(--mx-wizard-previous-variant);
+  }
+
+  /* wizard: next — The Next button, Finish on the last step. */
+  .mx-wizard__next {
+    --_button-variant: var(--mx-wizard-next-variant);
+    --_button-tone: var(--mx-wizard-next-tone);
+  }
 }