@maple-design/ui-vue 1.1.0 → 1.1.1

package/lib/maple.css

@@ -1289,7 +1289,7 @@
   --mp-button-disabled-color: var(--mp-color-fill-2);
   --mp-button-disabled-solid-text-color: var(--mp-sys-color-content-on-dark);
   --mp-button-disabled-text-color: var(--mp-sys-color-content-disabled);
-  --mp-button-focus-color: var(--mp-sys-color-content-brand);
+  --mp-button-focus-color: var(--mp-sys-color-action-primary);
   --mp-button-info-color: var(--mp-sys-color-status-info);
   --mp-button-info-disabled-color: rgb(var(--mp-blue-3));
   --mp-button-info-foreground-color: var(--mp-sys-color-content-info);
@@ -2918,7 +2918,7 @@ svg.mp-svg-icon--spin {
 .mp-selected-options__toggle:focus-visible,
 .mp-selected-options__clear:focus-visible,
 .mp-selected-options__remove:focus-visible {
-  outline: 2px solid var(--mp-sys-color-content-brand);
+  outline: 2px solid var(--mp-sys-color-action-primary);
   outline-offset: 1px;
 }
 .mp-selected-options__toggle {
@@ -3054,10 +3054,13 @@ svg.mp-svg-icon--spin {
   white-space: normal;
   overflow-wrap: anywhere;
 }
-.mp-selection-editor .mp-select-option.mp-select-option-selected,
-.mp-selection-editor .mp-select-option.mp-select-option-selected:hover {
-  background: var(--mp-selection-editor-selected-background);
-  color: var(--mp-selection-editor-accent);
+.mp-selection-editor .mp-select-option.mp-select-option-selected:not(.mp-select-option-disabled) {
+  background: var(--mp-select-popup-option-bg-selected);
+  color: var(--mp-select-popup-option-text-color-selected);
+}
+.mp-selection-editor .mp-select-option.mp-select-option-selected:not(.mp-select-option-disabled):hover,
+.mp-selection-editor .mp-select-option.mp-select-option-selected:not(.mp-select-option-disabled).mp-select-option-active {
+  background: var(--mp-select-popup-option-bg-selected-hover);
 }
 .mp-selection-editor .mp-select-option-disabled {
   opacity: var(--mp-selected-options-disabled-opacity);
@@ -3085,9 +3088,13 @@ svg.mp-svg-icon--spin {
   white-space: normal;
   overflow-wrap: anywhere;
 }
-.mp-selection-editor .mp-cascader-option > span:first-child {
-  order: 2;
-  margin-inline-start: var(--mp-selection-editor-gap);
+.mp-selection-editor .mp-cascader-option .mp-cascader-option-checkbox {
+  order: -1;
+  flex: none;
+  margin-inline-end: var(--mp-selection-editor-gap);
+}
+.mp-selection-editor .mp-cascader-option .mp-cascader-option-checkbox .mp-checkbox {
+  margin-inline-end: 0;
 }
 .mp-selection-editor .mp-selection-indicator {
   margin: 0;
@@ -3095,11 +3102,13 @@ svg.mp-svg-icon--spin {
   height: var(--mp-selection-editor-check-size);
   border-radius: var(--mp-selection-editor-radius);
 }
-.mp-selection-editor .mp-cascader-option.mp-cascader-option-selected,
-.mp-selection-editor .mp-cascader-option.mp-cascader-option-selected:hover,
-.mp-selection-editor .mp-cascader-option-active {
-  background: var(--mp-selection-editor-selected-background);
-  color: var(--mp-selection-editor-accent);
+.mp-selection-editor .mp-cascader-option.mp-cascader-option-selected:not(.mp-cascader-option-disabled) {
+  background: var(--mp-cascader-item-bg-active);
+  color: var(--mp-cascader-item-text-color-active);
+}
+.mp-selection-editor .mp-cascader-option.mp-cascader-option-selected:not(.mp-cascader-option-disabled):hover,
+.mp-selection-editor .mp-cascader-option.mp-cascader-option-selected:not(.mp-cascader-option-disabled).mp-cascader-option-active {
+  background: var(--mp-cascader-item-bg-hover);
 }
 .mp-selection-editor--mobile {
   width: 100%;
@@ -3114,8 +3123,6 @@ svg.mp-svg-icon--spin {
 .mp-selection-editor--mobile .mp-select-dropdown .mp-select-option,
 .mp-selection-editor--mobile .mp-cascader-option {
   min-height: var(--mp-selection-editor-touch-height);
-  border-radius: 0;
-  border-bottom: 1px solid var(--mp-selection-editor-border);
   font-size: var(--mp-selection-editor-touch-font-size);
 }
 .mp-selection-editor--mobile .mp-selection-indicator {
@@ -3240,6 +3247,17 @@ svg.mp-svg-icon--spin {
 .mp-selection-editor--mobile .mp-tree-node {
   min-height: var(--mp-selection-editor-touch-height);
 }
+.mp-selection-editor--select .mp-select-dropdown .mp-select-dropdown-list-wrapper,
+.mp-selection-editor--auto-complete .mp-select-dropdown .mp-select-dropdown-list-wrapper,
+.mp-selection-editor--people-select .mp-select-dropdown .mp-select-dropdown-list-wrapper {
+  padding-inline: var(--mp-select-popup-padding-horizontal);
+}
+.mp-selection-editor--select.mp-selection-editor--mobile .mp-select-dropdown .mp-select-option,
+.mp-selection-editor--auto-complete.mp-selection-editor--mobile .mp-select-dropdown .mp-select-option,
+.mp-selection-editor--people-select.mp-selection-editor--mobile .mp-select-dropdown .mp-select-option {
+  border-radius: var(--mp-select-popup-option-border-radius);
+  border-bottom: 0;
+}
 :root,
 :where([data-mp-theme]) {
   --mp-tag-fade-duration: var(--mp-sys-motion-duration-fast);
@@ -5241,28 +5259,31 @@ svg.mp-svg-icon--spin {
    * Popup Box
    **********************************************/
   --mp-select-popup-max-height: 200px;
-  --mp-select-popup-border-radius: var(--mp-sys-radius-md);
+  --mp-select-popup-border-radius: var(--mp-sys-radius-lg);
   --mp-select-popup-padding-vertical: var(--mp-sys-space-2);
   --mp-select-popup-font-size: var(--mp-sys-font-size-md);
   --mp-select-popup-bg: var(--mp-sys-color-surface-overlay);
-  --mp-select-popup-border-color: var(--mp-sys-color-border-default);
-  --mp-select-popup-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  --mp-select-popup-border-color: var(--mp-sys-color-border-subtle);
+  --mp-select-popup-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
   /**********************************************
    * Popup Options
    * status: default / disabled / selected / hover
    **********************************************/
   --mp-select-popup-option-height: 36px;
   --mp-select-popup-option-font-weight-selected: var(--mp-sys-font-weight-medium);
-  --mp-select-popup-option-padding-horizontal: var(--mp-sys-space-5);
-  --mp-select-popup-option-bg: var(--mp-sys-color-surface-overlay);
+  --mp-select-popup-option-padding-horizontal: var(--mp-sys-space-4);
+  --mp-select-popup-padding-horizontal: var(--mp-sys-space-3);
+  --mp-select-popup-option-border-radius: var(--mp-sys-radius-lg);
+  --mp-select-popup-option-bg: transparent;
   --mp-select-popup-option-bg-hover: var(--mp-sys-color-state-hover);
-  --mp-select-popup-option-bg-selected: var(--mp-sys-color-surface-overlay);
-  --mp-select-popup-option-bg-disabled: var(--mp-sys-color-surface-overlay);
+  --mp-select-popup-option-bg-selected: transparent;
+  --mp-select-popup-option-bg-selected-hover: var(--mp-select-popup-option-bg-hover);
+  --mp-select-popup-option-bg-disabled: transparent;
   --mp-select-popup-option-text-color: var(--mp-sys-color-content-primary);
   --mp-select-popup-option-text-color-hover: var(--mp-sys-color-content-primary);
-  --mp-select-popup-option-text-color-selected: var(--mp-sys-color-content-primary);
+  --mp-select-popup-option-text-color-selected: var(--mp-sys-color-action-primary);
   --mp-select-popup-option-text-color-disabled: var(--mp-sys-color-content-disabled);
-  --mp-select-popup-option-check-color: var(--mp-sys-color-content-primary);
+  --mp-select-popup-option-check-color: var(--mp-sys-color-action-primary);
   --mp-select-popup-option-check-size: var(--mp-sys-font-size-md);
   --mp-select-popup-option-check-gap: var(--mp-sys-space-4);
   --mp-select-popup-group-title-height: 20px;
@@ -5303,6 +5324,8 @@ svg.mp-svg-icon--spin {
   list-style: none;
 }
 .mp-select-dropdown-list-wrapper {
+  box-sizing: border-box;
+  padding-inline: var(--mp-select-popup-padding-horizontal);
   max-height: var(--mp-select-popup-max-height);
   overflow-y: auto;
 }
@@ -5314,6 +5337,8 @@ svg.mp-svg-icon--spin {
   box-sizing: border-box;
   width: 100%;
   padding: 0 var(--mp-select-popup-option-padding-horizontal);
+  border-radius: var(--mp-select-popup-option-border-radius);
+  transition: background-color var(--mp-sys-motion-duration-fast) var(--mp-sys-motion-easing-standard), color var(--mp-sys-motion-duration-fast) var(--mp-sys-motion-easing-standard);
   color: var(--mp-select-popup-option-text-color);
   font-size: var(--mp-select-popup-font-size);
   line-height: var(--mp-select-popup-option-height);
@@ -5353,11 +5378,14 @@ svg.mp-svg-icon--spin {
   font-weight: var(--mp-select-popup-option-font-weight-selected);
   background-color: var(--mp-select-popup-option-bg-selected);
 }
-.mp-select-dropdown .mp-select-option-active,
-.mp-select-dropdown .mp-select-option:not(.mp-select-dropdown .mp-select-option-disabled):hover {
+.mp-select-dropdown .mp-select-option-active:not(.mp-select-option-selected):not(.mp-select-option-disabled),
+.mp-select-dropdown .mp-select-option:not(.mp-select-option-selected):not(.mp-select-option-disabled):hover {
   color: var(--mp-select-popup-option-text-color-hover);
   background-color: var(--mp-select-popup-option-bg-hover);
-  transition: all var(--mp-sys-motion-duration-fast) var(--mp-sys-motion-easing-standard);
+}
+.mp-select-dropdown .mp-select-option-selected:not(.mp-select-option-disabled):hover,
+.mp-select-dropdown .mp-select-option-selected.mp-select-option-active:not(.mp-select-option-disabled) {
+  background-color: var(--mp-select-popup-option-bg-selected-hover);
 }
 .mp-select-dropdown .mp-select-option-disabled {
   color: var(--mp-select-popup-option-text-color-disabled);
@@ -5457,11 +5485,16 @@ svg.mp-svg-icon--spin {
   color: var(--mp-auto-complete-option-text-color-selected);
   background-color: var(--mp-auto-complete-option-bg-selected);
 }
-.mp-select-dropdown:where(.mp-auto-complete__dropdown) .mp-select-option-active,
-.mp-select-dropdown:where(.mp-auto-complete__dropdown) .mp-select-option:not(.mp-select-dropdown:where(.mp-auto-complete__dropdown) .mp-select-option-disabled):hover {
+.mp-select-dropdown:where(.mp-auto-complete__dropdown) .mp-select-option-active:not(.mp-select-option-selected):not(.mp-select-option-disabled),
+.mp-select-dropdown:where(.mp-auto-complete__dropdown) .mp-select-option:not(.mp-select-option-selected):not(.mp-select-option-disabled):hover {
   color: var(--mp-auto-complete-option-text-color-hover);
   background-color: var(--mp-auto-complete-option-bg-hover);
 }
+.mp-select-dropdown:where(.mp-auto-complete__dropdown) .mp-select-option-selected.mp-select-option-active:not(.mp-select-option-disabled),
+.mp-select-dropdown:where(.mp-auto-complete__dropdown) .mp-select-option-selected:not(.mp-select-option-disabled):hover {
+  color: var(--mp-auto-complete-option-text-color-selected);
+  background-color: var(--mp-auto-complete-option-bg-hover);
+}
 .mp-select-dropdown:where(.mp-auto-complete__dropdown) .mp-select-option-disabled {
   color: var(--mp-auto-complete-option-text-color-disabled);
   background-color: var(--mp-auto-complete-option-bg-disabled);
@@ -5724,7 +5757,7 @@ svg.mp-svg-icon--spin {
   --mp-back-top-background: var(--mp-sys-color-surface-raised);
   --mp-back-top-text-color: var(--mp-sys-color-content-brand);
   --mp-back-top-hover-background: var(--mp-sys-color-state-hover);
-  --mp-back-top-focus-color: var(--mp-sys-color-content-brand);
+  --mp-back-top-focus-color: var(--mp-sys-color-action-primary);
   --mp-back-top-focus-width: 2px;
   --mp-back-top-focus-offset: 2px;
   --mp-back-top-z-index: var(--mp-z-index-local-sticky);
@@ -6347,7 +6380,7 @@ svg.mp-svg-icon--spin {
   --mp-breadcrumb-touch-target-size: 44px;
   --mp-breadcrumb-separator-margin: var(--mp-breadcrumb-item-separator-margin);
   --mp-breadcrumb-separator-font-size: var(--mp-breadcrumb-item-separator-font-size);
-  --mp-breadcrumb-item-active-color: rgb(var(--mp-primary-8));
+  --mp-breadcrumb-item-active-color: var(--mp-sys-color-action-primary);
   --mp-breadcrumb-item-inactive-color: var(--mp-color-text-2);
   --mp-breadcrumb-item-separator-margin: 0 var(--mp-breadcrumb-margin-separator-horizontal);
   --mp-breadcrumb-item-separator-font-size: 14px;
@@ -7071,7 +7104,7 @@ svg.mp-svg-icon--spin {
   --mp-carousel-card-opacity: 0.6;
   --mp-carousel-focus-width: 2px;
   --mp-carousel-focus-offset: 2px;
-  --mp-carousel-focus-color: var(--mp-sys-color-content-brand);
+  --mp-carousel-focus-color: var(--mp-sys-color-action-primary);
 }
 .mp-carousel {
   position: relative;
@@ -7247,6 +7280,146 @@ svg.mp-svg-icon--spin {
   left: var(--mp-carousel-arrow-margin);
 }
 :root,
+:where([data-mp-theme]) {
+  --mp-checkbox-control-color: var(--mp-sys-color-content-secondary);
+  --mp-checkbox-control-color-checked: var(--mp-sys-color-action-primary);
+  --mp-checkbox-control-color-disabled: var(--mp-sys-color-content-disabled);
+  --mp-checkbox-control-color-error: var(--mp-sys-color-content-danger);
+  --mp-checkbox-control-size: 24px;
+  --mp-checkbox-control-border-radius: 2px;
+  --mp-checkbox-label-text-color: var(--mp-sys-color-content-primary);
+  --mp-checkbox-label-text-color-disabled: var(--mp-sys-color-content-disabled);
+  --mp-checkbox-label-font-size: var(--mp-font-size-md);
+  --mp-checkbox-label-gap: 0;
+  --mp-checkbox-action-padding: 6px;
+  --mp-checkbox-group-gap: 0;
+  --mp-checkbox-animation-duration: var(--mp-sys-motion-duration-standard);
+  --mp-checkbox-mark-color: var(--mp-sys-color-content-on-bright);
+  --mp-internal-checkbox-border-width: 1px;
+  --mp-internal-checkbox-border-radius: var(--mp-checkbox-control-border-radius);
+  --mp-internal-checkbox-action-radius: 50%;
+  --mp-internal-checkbox-focus-width: 2px;
+  --mp-internal-checkbox-focus-offset: 2px;
+  --mp-internal-checkbox-hover-background: var(--mp-sys-color-state-hover);
+  --mp-internal-checkbox-background: var(--mp-sys-color-surface-default);
+  --mp-internal-checkbox-background-disabled: var(--mp-sys-color-surface-muted);
+  --mp-internal-checkbox-mark-size: 75%;
+  --mp-internal-checkbox-mark-height: 2px;
+  --mp-internal-checkbox-mark-radius: 1px;
+  --mp-internal-checkbox-mark-color: var(--mp-checkbox-mark-color);
+}
+.mp-checkbox {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  color: var(--mp-internal-checkbox-instance-unchecked-color, var(--mp-checkbox-control-color));
+  font-size: var(--mp-checkbox-label-font-size);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+.mp-checkbox__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  opacity: 0;
+  clip-path: inset(50%);
+}
+.mp-checkbox__control {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  box-sizing: content-box;
+  padding: var(--mp-checkbox-action-padding);
+  border-radius: var(--mp-internal-checkbox-action-radius);
+  transition: background-color var(--mp-checkbox-animation-duration);
+}
+.mp-checkbox__input:focus-visible + .mp-checkbox__control {
+  outline: var(--mp-internal-checkbox-focus-width) solid var(--mp-checkbox-control-color-checked);
+  outline-offset: var(--mp-internal-checkbox-focus-offset);
+}
+.mp-checkbox__icon {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  box-sizing: border-box;
+  width: var(--mp-internal-checkbox-instance-size, var(--mp-checkbox-control-size));
+  height: var(--mp-internal-checkbox-instance-size, var(--mp-checkbox-control-size));
+  border: var(--mp-internal-checkbox-border-width) solid currentColor;
+  border-radius: var(--mp-internal-checkbox-border-radius);
+  background-color: var(--mp-internal-checkbox-background);
+  transition: background-color var(--mp-checkbox-animation-duration), border-color var(--mp-checkbox-animation-duration);
+}
+.mp-checkbox__check {
+  display: block;
+  width: var(--mp-internal-checkbox-mark-size);
+  height: var(--mp-internal-checkbox-mark-size);
+  color: var(--mp-internal-checkbox-mark-color);
+}
+.mp-checkbox__mark {
+  width: var(--mp-internal-checkbox-mark-size);
+  height: var(--mp-internal-checkbox-mark-height);
+  border-radius: var(--mp-internal-checkbox-mark-radius);
+  background-color: var(--mp-internal-checkbox-mark-color);
+}
+.mp-checkbox__label {
+  margin-inline-start: var(--mp-checkbox-label-gap);
+  color: var(--mp-checkbox-label-text-color);
+}
+.mp-checkbox--checked,
+.mp-checkbox--indeterminate {
+  color: var(--mp-internal-checkbox-instance-checked-color, var(--mp-checkbox-control-color-checked));
+}
+.mp-checkbox--checked .mp-checkbox__icon,
+.mp-checkbox--indeterminate .mp-checkbox__icon {
+  background-color: currentColor;
+}
+.mp-checkbox--error {
+  color: var(--mp-checkbox-control-color-error);
+}
+.mp-checkbox--disabled {
+  color: var(--mp-checkbox-control-color-disabled);
+  cursor: not-allowed;
+}
+.mp-checkbox--disabled .mp-checkbox__icon {
+  background-color: var(--mp-internal-checkbox-background-disabled);
+}
+.mp-checkbox--disabled.mp-checkbox--checked .mp-checkbox__icon,
+.mp-checkbox--disabled.mp-checkbox--indeterminate .mp-checkbox__icon {
+  background-color: currentColor;
+}
+.mp-checkbox--disabled .mp-checkbox__label {
+  color: var(--mp-checkbox-label-text-color-disabled);
+}
+@media (hover: hover) {
+  .mp-checkbox:not(.mp-checkbox--disabled):not(.mp-checkbox--readonly):hover .mp-checkbox__control {
+    background-color: var(--mp-internal-checkbox-hover-background);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mp-checkbox__control,
+  .mp-checkbox__icon {
+    transition: none;
+  }
+}
+.mp-checkbox-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--mp-checkbox-group-gap);
+}
+.mp-checkbox-group--horizontal {
+  flex-direction: row;
+}
+.mp-checkbox-group--vertical {
+  flex-direction: column;
+  align-items: flex-start;
+}
+:root,
 :where([data-mp-theme]) {
   --mp-cascader-popup-max-height: 200px;
   --mp-cascader-popup-border-radius: var(--mp-sys-radius-md);
@@ -7256,7 +7429,7 @@ svg.mp-svg-icon--spin {
   --mp-cascader-size-item-height: 36px;
   --mp-cascader-font-item-size: var(--mp-sys-font-size-md);
   --mp-cascader-margin-item-icon-left: var(--mp-sys-space-5);
-  --mp-cascader-item-check-color: var(--mp-sys-color-content-primary);
+  --mp-cascader-item-check-color: var(--mp-sys-color-action-primary);
   --mp-cascader-item-check-size: var(--mp-sys-font-size-md);
   --mp-cascader-item-text-color: var(--mp-sys-color-content-primary);
   --mp-cascader-item-icon-color: var(--mp-sys-color-content-secondary);
@@ -7264,11 +7437,11 @@ svg.mp-svg-icon--spin {
   --mp-cascader-padding-item-right: var(--mp-sys-space-5);
   --mp-cascader-size-item-icon: 12px;
   --mp-cascader-item-text-color-hover: var(--mp-cascader-item-text-color);
-  --mp-cascader-item-text-color-active: var(--mp-cascader-item-text-color);
+  --mp-cascader-item-text-color-active: var(--mp-sys-color-action-primary);
   --mp-cascader-item-text-color-disabled: var(--mp-sys-color-content-disabled);
   --mp-cascader-item-text-color-disabled-active: var(--mp-sys-color-content-disabled);
-  --mp-cascader-item-bg-active: var(--mp-color-fill-2);
-  --mp-cascader-item-bg-hover: var(--mp-cascader-item-bg-active);
+  --mp-cascader-item-bg-active: transparent;
+  --mp-cascader-item-bg-hover: var(--mp-color-fill-2);
   --mp-cascader-item-bg-disabled: transparent;
   --mp-cascader-item-bg-disabled-active: var(--mp-color-fill-2);
   --mp-cascader-checkbox-bg-hover: var(--mp-color-fill-3);
@@ -7467,17 +7640,44 @@ svg.mp-svg-icon--spin {
 .mp-cascader-search-option-disabled:hover .mp-cascader-option-check {
   color: var(--mp-cascader-item-text-color-disabled);
 }
-.mp-cascader-option-active {
-  color: var(--mp-cascader-item-text-color-active);
-  background-color: var(--mp-cascader-item-bg-active);
+.mp-cascader-option-active,
+.mp-cascader-search-option-active {
+  color: var(--mp-cascader-item-text-color-hover);
+  background-color: var(--mp-cascader-item-bg-hover);
   transition: all var(--mp-sys-motion-duration-standard) var(--mp-sys-motion-easing-standard);
 }
-.mp-cascader-option-active:hover {
+.mp-cascader-option-selected,
+.mp-cascader-search-option-selected {
   color: var(--mp-cascader-item-text-color-active);
   background-color: var(--mp-cascader-item-bg-active);
 }
+.mp-cascader-option-selected:hover,
+.mp-cascader-search-option-selected:hover,
+.mp-cascader-option-selected.mp-cascader-option-active,
+.mp-cascader-search-option-selected.mp-cascader-option-active,
+.mp-cascader-option-selected.mp-cascader-search-option-active,
+.mp-cascader-search-option-selected.mp-cascader-search-option-active,
+.mp-cascader-option-selected.mp-cascader-search-option-hover,
+.mp-cascader-search-option-selected.mp-cascader-search-option-hover {
+  color: var(--mp-cascader-item-text-color-active);
+  background-color: var(--mp-cascader-item-bg-hover);
+}
 .mp-cascader-option-active.mp-cascader-option-disabled,
-.mp-cascader-option-active.mp-cascader-option-disabled:hover {
+.mp-cascader-option-active.mp-cascader-search-option-disabled,
+.mp-cascader-search-option-active.mp-cascader-option-disabled,
+.mp-cascader-search-option-active.mp-cascader-search-option-disabled,
+.mp-cascader-option-active.mp-cascader-option-disabled:hover,
+.mp-cascader-option-active.mp-cascader-search-option-disabled:hover,
+.mp-cascader-search-option-active.mp-cascader-option-disabled:hover,
+.mp-cascader-search-option-active.mp-cascader-search-option-disabled:hover,
+.mp-cascader-option-selected.mp-cascader-option-disabled,
+.mp-cascader-option-selected.mp-cascader-search-option-disabled,
+.mp-cascader-search-option-selected.mp-cascader-option-disabled,
+.mp-cascader-search-option-selected.mp-cascader-search-option-disabled,
+.mp-cascader-option-selected.mp-cascader-option-disabled:hover,
+.mp-cascader-option-selected.mp-cascader-search-option-disabled:hover,
+.mp-cascader-search-option-selected.mp-cascader-option-disabled:hover,
+.mp-cascader-search-option-selected.mp-cascader-search-option-disabled:hover {
   color: var(--mp-cascader-item-text-color-disabled-active);
   background-color: var(--mp-cascader-item-bg-disabled-active);
 }
@@ -7589,146 +7789,6 @@ svg.mp-svg-icon--spin {
   cursor: pointer;
 }
 :root,
-:where([data-mp-theme]) {
-  --mp-checkbox-control-color: var(--mp-sys-color-content-secondary);
-  --mp-checkbox-control-color-checked: var(--mp-sys-color-content-brand);
-  --mp-checkbox-control-color-disabled: var(--mp-sys-color-content-disabled);
-  --mp-checkbox-control-color-error: var(--mp-sys-color-content-danger);
-  --mp-checkbox-control-size: 24px;
-  --mp-checkbox-control-border-radius: 2px;
-  --mp-checkbox-label-text-color: var(--mp-sys-color-content-primary);
-  --mp-checkbox-label-text-color-disabled: var(--mp-sys-color-content-disabled);
-  --mp-checkbox-label-font-size: var(--mp-font-size-md);
-  --mp-checkbox-label-gap: 0;
-  --mp-checkbox-action-padding: 6px;
-  --mp-checkbox-group-gap: 0;
-  --mp-checkbox-animation-duration: var(--mp-sys-motion-duration-standard);
-  --mp-checkbox-mark-color: var(--mp-sys-color-content-on-bright);
-  --mp-internal-checkbox-border-width: 1px;
-  --mp-internal-checkbox-border-radius: var(--mp-checkbox-control-border-radius);
-  --mp-internal-checkbox-action-radius: 50%;
-  --mp-internal-checkbox-focus-width: 2px;
-  --mp-internal-checkbox-focus-offset: 2px;
-  --mp-internal-checkbox-hover-background: var(--mp-sys-color-state-hover);
-  --mp-internal-checkbox-background: var(--mp-sys-color-surface-default);
-  --mp-internal-checkbox-background-disabled: var(--mp-sys-color-surface-muted);
-  --mp-internal-checkbox-mark-size: 75%;
-  --mp-internal-checkbox-mark-height: 2px;
-  --mp-internal-checkbox-mark-radius: 1px;
-  --mp-internal-checkbox-mark-color: var(--mp-checkbox-mark-color);
-}
-.mp-checkbox {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  box-sizing: border-box;
-  color: var(--mp-internal-checkbox-instance-unchecked-color, var(--mp-checkbox-control-color));
-  font-size: var(--mp-checkbox-label-font-size);
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-}
-.mp-checkbox__input {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: 0;
-  opacity: 0;
-  clip-path: inset(50%);
-}
-.mp-checkbox__control {
-  position: relative;
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  justify-content: center;
-  box-sizing: content-box;
-  padding: var(--mp-checkbox-action-padding);
-  border-radius: var(--mp-internal-checkbox-action-radius);
-  transition: background-color var(--mp-checkbox-animation-duration);
-}
-.mp-checkbox__input:focus-visible + .mp-checkbox__control {
-  outline: var(--mp-internal-checkbox-focus-width) solid var(--mp-checkbox-control-color-checked);
-  outline-offset: var(--mp-internal-checkbox-focus-offset);
-}
-.mp-checkbox__icon {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  box-sizing: border-box;
-  width: var(--mp-internal-checkbox-instance-size, var(--mp-checkbox-control-size));
-  height: var(--mp-internal-checkbox-instance-size, var(--mp-checkbox-control-size));
-  border: var(--mp-internal-checkbox-border-width) solid currentColor;
-  border-radius: var(--mp-internal-checkbox-border-radius);
-  background-color: var(--mp-internal-checkbox-background);
-  transition: background-color var(--mp-checkbox-animation-duration), border-color var(--mp-checkbox-animation-duration);
-}
-.mp-checkbox__check {
-  display: block;
-  width: var(--mp-internal-checkbox-mark-size);
-  height: var(--mp-internal-checkbox-mark-size);
-  color: var(--mp-internal-checkbox-mark-color);
-}
-.mp-checkbox__mark {
-  width: var(--mp-internal-checkbox-mark-size);
-  height: var(--mp-internal-checkbox-mark-height);
-  border-radius: var(--mp-internal-checkbox-mark-radius);
-  background-color: var(--mp-internal-checkbox-mark-color);
-}
-.mp-checkbox__label {
-  margin-inline-start: var(--mp-checkbox-label-gap);
-  color: var(--mp-checkbox-label-text-color);
-}
-.mp-checkbox--checked,
-.mp-checkbox--indeterminate {
-  color: var(--mp-internal-checkbox-instance-checked-color, var(--mp-checkbox-control-color-checked));
-}
-.mp-checkbox--checked .mp-checkbox__icon,
-.mp-checkbox--indeterminate .mp-checkbox__icon {
-  background-color: currentColor;
-}
-.mp-checkbox--error {
-  color: var(--mp-checkbox-control-color-error);
-}
-.mp-checkbox--disabled {
-  color: var(--mp-checkbox-control-color-disabled);
-  cursor: not-allowed;
-}
-.mp-checkbox--disabled .mp-checkbox__icon {
-  background-color: var(--mp-internal-checkbox-background-disabled);
-}
-.mp-checkbox--disabled.mp-checkbox--checked .mp-checkbox__icon,
-.mp-checkbox--disabled.mp-checkbox--indeterminate .mp-checkbox__icon {
-  background-color: currentColor;
-}
-.mp-checkbox--disabled .mp-checkbox__label {
-  color: var(--mp-checkbox-label-text-color-disabled);
-}
-@media (hover: hover) {
-  .mp-checkbox:not(.mp-checkbox--disabled):not(.mp-checkbox--readonly):hover .mp-checkbox__control {
-    background-color: var(--mp-internal-checkbox-hover-background);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .mp-checkbox__control,
-  .mp-checkbox__icon {
-    transition: none;
-  }
-}
-.mp-checkbox-group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--mp-checkbox-group-gap);
-}
-.mp-checkbox-group--horizontal {
-  flex-direction: row;
-}
-.mp-checkbox-group--vertical {
-  flex-direction: column;
-  align-items: flex-start;
-}
-:root,
 :where([data-mp-theme]) {
   --mp-code-font-size: 14px;
   --mp-code-line-height: 1.7;
@@ -10813,7 +10873,7 @@ svg.mp-svg-icon--spin {
 }
 :root,
 :where([data-mp-theme]) {
-  --mp-ellipsis-focus-color: var(--mp-sys-color-content-brand);
+  --mp-ellipsis-focus-color: var(--mp-sys-color-action-primary);
   --mp-ellipsis-focus-width: 2px;
   --mp-ellipsis-focus-offset: 2px;
 }
@@ -12852,7 +12912,7 @@ svg.mp-svg-icon--spin {
 :where([data-mp-theme]) {
   --mp-nav-menu-background: var(--mp-sys-color-surface-overlay);
   --mp-nav-menu-color: var(--mp-sys-color-content-primary);
-  --mp-nav-menu-active-color: var(--mp-sys-color-content-brand);
+  --mp-nav-menu-active-color: var(--mp-sys-color-action-primary);
   --mp-nav-menu-disabled-color: var(--mp-color-text-disabled);
   --mp-nav-menu-border-color: var(--mp-sys-color-border-default);
   --mp-nav-menu-height: 48px;
@@ -13345,11 +13405,11 @@ svg.mp-svg-icon--spin {
   --mp-pagination-touch-size: 44px;
   --mp-pagination-focus-width: 2px;
   --mp-pagination-focus-offset: 1px;
-  --mp-pagination-focus-color: var(--mp-sys-color-content-brand);
+  --mp-pagination-focus-color: var(--mp-sys-color-action-primary);
   --mp-pagination-item-background: transparent;
   --mp-pagination-hover-background: var(--mp-color-fill-1);
   --mp-pagination-active-background: var(--mp-color-primary-light-1);
-  --mp-pagination-active-color: var(--mp-sys-color-content-brand);
+  --mp-pagination-active-color: var(--mp-sys-color-action-primary);
   --mp-pagination-disabled-color: var(--mp-color-text-disabled);
   --mp-pagination-disabled-background: var(--mp-color-fill-1);
 }
@@ -13579,6 +13639,12 @@ svg.mp-svg-icon--spin {
   align-items: center;
   justify-content: center;
 }
+.mp-people-select-people {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--mp-people-select-content-gap);
+}
 :root,
 :where([data-mp-theme]) {
   --mp-progress-group-transition-duration: var(--mp-sys-motion-duration-standard);
@@ -13870,8 +13936,8 @@ svg.mp-svg-icon--spin {
   --mp-progress-font-size: var(--mp-sys-font-size-sm);
   --mp-progress-text-color: var(--mp-sys-color-content-secondary);
   --mp-progress-track-color: var(--mp-sys-color-state-hover);
-  --mp-progress-default-color: var(--mp-sys-color-content-brand);
-  --mp-progress-primary-color: var(--mp-sys-color-content-brand);
+  --mp-progress-default-color: var(--mp-sys-color-action-primary);
+  --mp-progress-primary-color: var(--mp-sys-color-action-primary);
   --mp-progress-secondary-color: var(--mp-sys-color-content-secondary);
   --mp-progress-tertiary-color: var(--mp-sys-color-content-tertiary);
   --mp-progress-info-color: var(--mp-sys-color-content-info);
@@ -14139,7 +14205,7 @@ svg.mp-svg-icon--spin {
 }
 :root,
 :where([data-mp-theme]) {
-  --mp-radio-control-color-checked: var(--mp-sys-color-content-brand);
+  --mp-radio-control-color-checked: var(--mp-sys-color-action-primary);
   --mp-radio-control-color: var(--mp-sys-color-content-secondary);
   --mp-radio-control-color-disabled: var(--mp-sys-color-content-disabled);
   --mp-radio-control-color-error: var(--mp-sys-color-content-danger);
@@ -14351,7 +14417,7 @@ svg.mp-svg-icon--spin {
   --mp-rate-disabled-color: var(--mp-sys-color-content-disabled);
   --mp-rate-error-color: var(--mp-sys-color-content-danger);
   --mp-rate-active-scale: 1.2;
-  --mp-rate-focus-color: var(--mp-sys-color-content-brand);
+  --mp-rate-focus-color: var(--mp-sys-color-action-primary);
   --mp-rate-focus-width: 2px;
   --mp-rate-focus-offset: 2px;
   --mp-rate-size: 24px;
@@ -14359,7 +14425,7 @@ svg.mp-svg-icon--spin {
   --mp-rate-min-height: 0px;
   --mp-rate-action-padding: 4px;
   --mp-rate-empty-color: var(--mp-color-text);
-  --mp-rate-active-color: var(--mp-sys-color-content-brand);
+  --mp-rate-active-color: var(--mp-sys-color-action-primary);
   --mp-rate-transition-duration: 250ms;
   --mp-rate-scale-duration: 250ms;
   --mp-rate-transition-timing-function: ease;
@@ -14946,10 +15012,10 @@ svg.mp-svg-icon--spin {
 }
 :root,
 :where([data-mp-theme]) {
-  --mp-slider-active-color: var(--mp-sys-color-content-brand);
+  --mp-slider-active-color: var(--mp-sys-color-action-primary);
   --mp-slider-track-color: var(--mp-sys-color-state-hover);
   --mp-slider-thumb-color: var(--mp-sys-color-surface-default);
-  --mp-slider-thumb-border-color: var(--mp-sys-color-content-brand);
+  --mp-slider-thumb-border-color: var(--mp-sys-color-action-primary);
   --mp-slider-text-color: var(--mp-sys-color-content-secondary);
   --mp-slider-tooltip-background: var(--mp-sys-color-surface-tooltip);
   --mp-slider-tooltip-color: var(--mp-sys-color-content-on-dark);
@@ -15287,15 +15353,15 @@ svg.mp-svg-icon--spin {
   --mp-steps-circle-item-tail-color-wait: var(--mp-sys-color-border-default);
   --mp-steps-circle-item-title-color-wait: var(--mp-sys-color-content-secondary);
   --mp-steps-circle-item-description-color-wait: var(--mp-sys-color-content-secondary);
-  --mp-steps-circle-item-bg-process: var(--mp-sys-color-content-brand);
+  --mp-steps-circle-item-bg-process: var(--mp-sys-color-action-primary);
   --mp-steps-circle-item-border-color-process: transparent;
   --mp-steps-circle-item-icon-text-color-process: var(--mp-sys-color-surface-default);
-  --mp-steps-circle-item-tail-color-process: var(--mp-sys-color-content-brand);
+  --mp-steps-circle-item-tail-color-process: var(--mp-sys-color-action-primary);
   --mp-steps-circle-item-title-color-process: var(--mp-sys-color-content-primary);
   --mp-steps-circle-item-description-color-process: var(--mp-sys-color-content-secondary);
   --mp-steps-circle-item-bg-finish: var(--mp-sys-color-state-selected);
   --mp-steps-circle-item-border-color-finish: transparent;
-  --mp-steps-circle-item-icon-text-color-finish: var(--mp-sys-color-content-brand);
+  --mp-steps-circle-item-icon-text-color-finish: var(--mp-sys-color-action-primary);
   --mp-steps-circle-item-title-color-finish: var(--mp-sys-color-content-primary);
   --mp-steps-circle-item-description-color-finish: var(--mp-sys-color-content-secondary);
   --mp-steps-circle-item-bg-error: var(--mp-sys-color-content-danger);
@@ -15321,13 +15387,13 @@ svg.mp-svg-icon--spin {
   --mp-steps-dot-item-tail-color-wait: var(--mp-sys-color-border-default);
   --mp-steps-dot-item-title-color-wait: var(--mp-sys-color-content-secondary);
   --mp-steps-dot-item-description-color-wait: var(--mp-sys-color-content-secondary);
-  --mp-steps-dot-item-bg-process: var(--mp-sys-color-content-brand);
-  --mp-steps-dot-item-border-color-process: var(--mp-sys-color-content-brand);
-  --mp-steps-dot-item-tail-color-process: var(--mp-sys-color-content-brand);
+  --mp-steps-dot-item-bg-process: var(--mp-sys-color-action-primary);
+  --mp-steps-dot-item-border-color-process: var(--mp-sys-color-action-primary);
+  --mp-steps-dot-item-tail-color-process: var(--mp-sys-color-action-primary);
   --mp-steps-dot-item-title-color-process: var(--mp-sys-color-content-primary);
   --mp-steps-dot-item-description-color-process: var(--mp-sys-color-content-secondary);
-  --mp-steps-dot-item-bg-finish: var(--mp-sys-color-content-brand);
-  --mp-steps-dot-item-border-color-finish: var(--mp-sys-color-content-brand);
+  --mp-steps-dot-item-bg-finish: var(--mp-sys-color-action-primary);
+  --mp-steps-dot-item-border-color-finish: var(--mp-sys-color-action-primary);
   --mp-steps-dot-item-title-color-finish: var(--mp-sys-color-content-primary);
   --mp-steps-dot-item-description-color-finish: var(--mp-sys-color-content-secondary);
   --mp-steps-dot-item-bg-error: var(--mp-sys-color-content-danger);
@@ -15346,7 +15412,7 @@ svg.mp-svg-icon--spin {
   --mp-steps-arrow-item-bg-wait: var(--mp-sys-color-surface-muted);
   --mp-steps-arrow-item-title-color-wait: var(--mp-sys-color-content-secondary);
   --mp-steps-arrow-item-description-color-wait: var(--mp-sys-color-content-secondary);
-  --mp-steps-arrow-item-bg-process: var(--mp-sys-color-content-brand);
+  --mp-steps-arrow-item-bg-process: var(--mp-sys-color-action-primary);
   --mp-steps-arrow-item-title-color-process: var(--mp-sys-color-surface-default);
   --mp-steps-arrow-item-description-color-process: var(--mp-sys-color-surface-default);
   --mp-steps-arrow-item-bg-finish: var(--mp-sys-color-state-selected);
@@ -15364,7 +15430,7 @@ svg.mp-svg-icon--spin {
   --mp-steps-navigation-arrow-spacing-right: 10px;
   --mp-steps-navigation-ink-spacing-left: 0;
   --mp-steps-navigation-ink-spacing-right: 30px;
-  --mp-steps-navigation-ink-bg: var(--mp-sys-color-content-brand);
+  --mp-steps-navigation-ink-bg: var(--mp-sys-color-action-primary);
   --mp-steps-changeable-hover-text-color: var(--mp-sys-color-content-brand);
   --mp-steps-node-font-weight: 500;
   --mp-steps-transition-duration-1: 0.1s;
@@ -16039,7 +16105,7 @@ svg.mp-svg-icon--spin {
   --mp-switch-size-lg-scale: 1.2;
   --mp-switch-hit-area: 0px;
   --mp-switch-track-background: var(--mp-sys-color-content-secondary);
-  --mp-switch-track-active-background: var(--mp-sys-color-content-brand);
+  --mp-switch-track-active-background: var(--mp-sys-color-action-primary);
   --mp-switch-track-error-background: var(--mp-sys-color-content-danger);
   --mp-switch-handle-background: var(--mp-sys-color-surface-default);
   --mp-switch-handle-color: var(--mp-sys-color-content-brand);
@@ -16241,10 +16307,10 @@ svg.mp-svg-icon--spin {
   --mp-tab-bar-item-focus-color: currentColor;
   --mp-tab-bar-item-font-size: var(--mp-font-size-sm);
   --mp-tab-bar-item-inactive-color: var(--mp-color-text-2);
-  --mp-tab-bar-item-active-color: var(--mp-sys-color-content-brand);
+  --mp-tab-bar-item-active-color: var(--mp-sys-color-action-primary);
   --mp-tab-bar-item-active-background-color: transparent;
   --mp-tab-bar-item-variant-active-background-color: color-mix(in srgb, var(--mp-color-primary) 14%, var(--mp-tab-bar-background-color));
-  --mp-tab-bar-item-variant-active-color: var(--mp-sys-color-content-brand);
+  --mp-tab-bar-item-variant-active-color: var(--mp-sys-color-action-primary);
   --mp-tab-bar-item-line-height: 1;
   --mp-tab-bar-item-icon-size: 22px;
   --mp-tab-bar-item-icon-margin-bottom: 5px;
@@ -16507,7 +16573,7 @@ svg.mp-svg-icon--spin {
 :where([data-mp-theme]) {
   --mp-tabs-background: var(--mp-sys-color-surface-default);
   --mp-tabs-title-text-color: var(--mp-sys-color-content-secondary);
-  --mp-tabs-title-text-color-active: var(--mp-sys-color-content-brand);
+  --mp-tabs-title-text-color-active: var(--mp-sys-color-action-primary);
   --mp-tabs-title-text-color-disabled: var(--mp-sys-color-content-disabled);
   --mp-tabs-muted-background: var(--mp-sys-color-surface-muted);
   --mp-tabs-border-color: var(--mp-sys-color-border-default);