@cedar-design/ui-vue 1.1.0 → 1.1.1

package/lib/cedar.css

@@ -2556,7 +2556,7 @@ body {
   --c-button-disabled-color: var(--c-color-fill-2);
   --c-button-disabled-solid-text-color: var(--c-sys-color-content-on-dark);
   --c-button-disabled-text-color: var(--c-sys-color-content-disabled);
-  --c-button-focus-color: var(--c-sys-color-content-brand);
+  --c-button-focus-color: var(--c-sys-color-action-primary);
   --c-button-info-color: var(--c-sys-color-status-info);
   --c-button-info-disabled-color: rgb(var(--c-blue-3));
   --c-button-info-foreground-color: var(--c-sys-color-content-info);
@@ -4131,7 +4131,7 @@ body {
 .c-selected-options__toggle:focus-visible,
 .c-selected-options__clear:focus-visible,
 .c-selected-options__remove:focus-visible {
-  outline: 2px solid var(--c-sys-color-content-brand);
+  outline: 2px solid var(--c-sys-color-action-primary);
   outline-offset: 1px;
 }
 .c-selected-options__toggle {
@@ -4267,10 +4267,13 @@ body {
   white-space: normal;
   overflow-wrap: anywhere;
 }
-.c-selection-editor .c-select-option.c-select-option-selected,
-.c-selection-editor .c-select-option.c-select-option-selected:hover {
-  background: var(--c-selection-editor-selected-background);
-  color: var(--c-selection-editor-accent);
+.c-selection-editor .c-select-option.c-select-option-selected:not(.c-select-option-disabled) {
+  background: var(--c-select-popup-option-bg-selected);
+  color: var(--c-select-popup-option-text-color-selected);
+}
+.c-selection-editor .c-select-option.c-select-option-selected:not(.c-select-option-disabled):hover,
+.c-selection-editor .c-select-option.c-select-option-selected:not(.c-select-option-disabled).c-select-option-active {
+  background: var(--c-select-popup-option-bg-selected-hover);
 }
 .c-selection-editor .c-select-option-disabled {
   opacity: var(--c-selected-options-disabled-opacity);
@@ -4298,9 +4301,13 @@ body {
   white-space: normal;
   overflow-wrap: anywhere;
 }
-.c-selection-editor .c-cascader-option > span:first-child {
-  order: 2;
-  margin-inline-start: var(--c-selection-editor-gap);
+.c-selection-editor .c-cascader-option .c-cascader-option-checkbox {
+  order: -1;
+  flex: none;
+  margin-inline-end: var(--c-selection-editor-gap);
+}
+.c-selection-editor .c-cascader-option .c-cascader-option-checkbox .c-checkbox {
+  margin-inline-end: 0;
 }
 .c-selection-editor .c-selection-indicator {
   margin: 0;
@@ -4308,11 +4315,13 @@ body {
   height: var(--c-selection-editor-check-size);
   border-radius: var(--c-selection-editor-radius);
 }
-.c-selection-editor .c-cascader-option.c-cascader-option-selected,
-.c-selection-editor .c-cascader-option.c-cascader-option-selected:hover,
-.c-selection-editor .c-cascader-option-active {
-  background: var(--c-selection-editor-selected-background);
-  color: var(--c-selection-editor-accent);
+.c-selection-editor .c-cascader-option.c-cascader-option-selected:not(.c-cascader-option-disabled) {
+  background: var(--c-cascader-item-bg-active);
+  color: var(--c-cascader-item-text-color-active);
+}
+.c-selection-editor .c-cascader-option.c-cascader-option-selected:not(.c-cascader-option-disabled):hover,
+.c-selection-editor .c-cascader-option.c-cascader-option-selected:not(.c-cascader-option-disabled).c-cascader-option-active {
+  background: var(--c-cascader-item-bg-hover);
 }
 .c-selection-editor--mobile {
   width: 100%;
@@ -4327,8 +4336,6 @@ body {
 .c-selection-editor--mobile .c-select-dropdown .c-select-option,
 .c-selection-editor--mobile .c-cascader-option {
   min-height: var(--c-selection-editor-touch-height);
-  border-radius: 0;
-  border-bottom: 1px solid var(--c-selection-editor-border);
   font-size: var(--c-selection-editor-touch-font-size);
 }
 .c-selection-editor--mobile .c-selection-indicator {
@@ -4453,6 +4460,17 @@ body {
 .c-selection-editor--mobile .c-tree-node {
   min-height: var(--c-selection-editor-touch-height);
 }
+.c-selection-editor--select .c-select-dropdown .c-select-dropdown-list-wrapper,
+.c-selection-editor--auto-complete .c-select-dropdown .c-select-dropdown-list-wrapper,
+.c-selection-editor--people-select .c-select-dropdown .c-select-dropdown-list-wrapper {
+  padding-inline: var(--c-select-popup-padding-horizontal);
+}
+.c-selection-editor--select.c-selection-editor--mobile .c-select-dropdown .c-select-option,
+.c-selection-editor--auto-complete.c-selection-editor--mobile .c-select-dropdown .c-select-option,
+.c-selection-editor--people-select.c-selection-editor--mobile .c-select-dropdown .c-select-option {
+  border-radius: var(--c-select-popup-option-border-radius);
+  border-bottom: 0;
+}
 :root,
 :where([data-c-theme]) {
   --c-tag-fade-duration: var(--c-sys-motion-duration-fast);
@@ -5637,7 +5655,7 @@ body {
   --c-anchor-title-margin-bottom: var(--c-spacing-1);
   --c-anchor-color-title: var(--c-color-text-2);
   --c-anchor-color-title-hover: rgb(var(--c-primary-5));
-  --c-anchor-color-title-active: var(--c-sys-color-content-brand);
+  --c-anchor-color-title-active: var(--c-sys-color-action-primary);
   --c-anchor-font-weight-title-hover: var(--c-font-weight-500);
   --c-anchor-font-weight-title-active: var(--c-font-weight-500);
   --c-anchor-color-bg-title-hover: var(--c-color-fill-2);
@@ -6092,28 +6110,31 @@ body {
    * Popup Box
    **********************************************/
   --c-select-popup-max-height: 200px;
-  --c-select-popup-border-radius: var(--c-sys-radius-md);
+  --c-select-popup-border-radius: var(--c-sys-radius-lg);
   --c-select-popup-padding-vertical: var(--c-sys-space-2);
   --c-select-popup-font-size: var(--c-sys-font-size-md);
   --c-select-popup-bg: var(--c-sys-color-surface-overlay);
-  --c-select-popup-border-color: var(--c-sys-color-border-default);
-  --c-select-popup-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  --c-select-popup-border-color: var(--c-sys-color-border-subtle);
+  --c-select-popup-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
   /**********************************************
    * Popup Options
    * status: default / disabled / selected / hover
    **********************************************/
   --c-select-popup-option-height: 36px;
   --c-select-popup-option-font-weight-selected: var(--c-sys-font-weight-medium);
-  --c-select-popup-option-padding-horizontal: var(--c-sys-space-5);
-  --c-select-popup-option-bg: var(--c-sys-color-surface-overlay);
+  --c-select-popup-option-padding-horizontal: var(--c-sys-space-4);
+  --c-select-popup-padding-horizontal: var(--c-sys-space-3);
+  --c-select-popup-option-border-radius: var(--c-sys-radius-lg);
+  --c-select-popup-option-bg: transparent;
   --c-select-popup-option-bg-hover: var(--c-sys-color-state-hover);
-  --c-select-popup-option-bg-selected: var(--c-sys-color-surface-overlay);
-  --c-select-popup-option-bg-disabled: var(--c-sys-color-surface-overlay);
+  --c-select-popup-option-bg-selected: transparent;
+  --c-select-popup-option-bg-selected-hover: var(--c-select-popup-option-bg-hover);
+  --c-select-popup-option-bg-disabled: transparent;
   --c-select-popup-option-text-color: var(--c-sys-color-content-primary);
   --c-select-popup-option-text-color-hover: var(--c-sys-color-content-primary);
-  --c-select-popup-option-text-color-selected: var(--c-sys-color-content-primary);
+  --c-select-popup-option-text-color-selected: var(--c-sys-color-action-primary);
   --c-select-popup-option-text-color-disabled: var(--c-sys-color-content-disabled);
-  --c-select-popup-option-check-color: var(--c-sys-color-content-primary);
+  --c-select-popup-option-check-color: var(--c-sys-color-action-primary);
   --c-select-popup-option-check-size: var(--c-sys-font-size-md);
   --c-select-popup-option-check-gap: var(--c-sys-space-4);
   --c-select-popup-group-title-height: 20px;
@@ -6154,6 +6175,8 @@ body {
   list-style: none;
 }
 .c-select-dropdown-list-wrapper {
+  box-sizing: border-box;
+  padding-inline: var(--c-select-popup-padding-horizontal);
   max-height: var(--c-select-popup-max-height);
   overflow-y: auto;
 }
@@ -6165,6 +6188,8 @@ body {
   box-sizing: border-box;
   width: 100%;
   padding: 0 var(--c-select-popup-option-padding-horizontal);
+  border-radius: var(--c-select-popup-option-border-radius);
+  transition: background-color var(--c-sys-motion-duration-fast) var(--c-sys-motion-easing-standard), color var(--c-sys-motion-duration-fast) var(--c-sys-motion-easing-standard);
   color: var(--c-select-popup-option-text-color);
   font-size: var(--c-select-popup-font-size);
   line-height: var(--c-select-popup-option-height);
@@ -6204,11 +6229,14 @@ body {
   font-weight: var(--c-select-popup-option-font-weight-selected);
   background-color: var(--c-select-popup-option-bg-selected);
 }
-.c-select-dropdown .c-select-option-active,
-.c-select-dropdown .c-select-option:not(.c-select-dropdown .c-select-option-disabled):hover {
+.c-select-dropdown .c-select-option-active:not(.c-select-option-selected):not(.c-select-option-disabled),
+.c-select-dropdown .c-select-option:not(.c-select-option-selected):not(.c-select-option-disabled):hover {
   color: var(--c-select-popup-option-text-color-hover);
   background-color: var(--c-select-popup-option-bg-hover);
-  transition: all var(--c-sys-motion-duration-fast) var(--c-sys-motion-easing-standard);
+}
+.c-select-dropdown .c-select-option-selected:not(.c-select-option-disabled):hover,
+.c-select-dropdown .c-select-option-selected.c-select-option-active:not(.c-select-option-disabled) {
+  background-color: var(--c-select-popup-option-bg-selected-hover);
 }
 .c-select-dropdown .c-select-option-disabled {
   color: var(--c-select-popup-option-text-color-disabled);
@@ -6308,11 +6336,16 @@ body {
   color: var(--c-auto-complete-option-text-color-selected);
   background-color: var(--c-auto-complete-option-bg-selected);
 }
-.c-select-dropdown:where(.c-auto-complete__dropdown) .c-select-option-active,
-.c-select-dropdown:where(.c-auto-complete__dropdown) .c-select-option:not(.c-select-dropdown:where(.c-auto-complete__dropdown) .c-select-option-disabled):hover {
+.c-select-dropdown:where(.c-auto-complete__dropdown) .c-select-option-active:not(.c-select-option-selected):not(.c-select-option-disabled),
+.c-select-dropdown:where(.c-auto-complete__dropdown) .c-select-option:not(.c-select-option-selected):not(.c-select-option-disabled):hover {
   color: var(--c-auto-complete-option-text-color-hover);
   background-color: var(--c-auto-complete-option-bg-hover);
 }
+.c-select-dropdown:where(.c-auto-complete__dropdown) .c-select-option-selected.c-select-option-active:not(.c-select-option-disabled),
+.c-select-dropdown:where(.c-auto-complete__dropdown) .c-select-option-selected:not(.c-select-option-disabled):hover {
+  color: var(--c-auto-complete-option-text-color-selected);
+  background-color: var(--c-auto-complete-option-bg-hover);
+}
 .c-select-dropdown:where(.c-auto-complete__dropdown) .c-select-option-disabled {
   color: var(--c-auto-complete-option-text-color-disabled);
   background-color: var(--c-auto-complete-option-bg-disabled);
@@ -6575,7 +6608,7 @@ body {
   --c-back-top-background: var(--c-sys-color-surface-raised);
   --c-back-top-text-color: var(--c-sys-color-content-brand);
   --c-back-top-hover-background: var(--c-sys-color-state-hover);
-  --c-back-top-focus-color: var(--c-sys-color-content-brand);
+  --c-back-top-focus-color: var(--c-sys-color-action-primary);
   --c-back-top-focus-width: 2px;
   --c-back-top-focus-offset: 2px;
   --c-back-top-z-index: var(--c-z-index-local-sticky);
@@ -7363,7 +7396,7 @@ body {
   --c-radio-control-size: 14px;
   --c-radio-control-color-disabled: var(--c-sys-color-content-disabled);
   --c-radio-control-color-error: var(--c-sys-color-content-danger);
-  --c-radio-control-color-checked: var(--c-sys-color-content-brand);
+  --c-radio-control-color-checked: var(--c-sys-color-action-primary);
   --c-radio-action-padding: calc((var(--c-internal-radio-mask-height) / 2) - (var(--c-radio-control-size) / 2));
   --c-radio-label-text-color: var(--c-sys-color-content-primary);
   --c-radio-label-text-color-disabled: var(--c-sys-color-content-disabled);
@@ -8683,7 +8716,7 @@ svg.c-icon-spin {
   --c-carousel-card-opacity: 0.6;
   --c-carousel-focus-width: 2px;
   --c-carousel-focus-offset: 2px;
-  --c-carousel-focus-color: var(--c-sys-color-content-brand);
+  --c-carousel-focus-color: var(--c-sys-color-action-primary);
 }
 .c-carousel {
   position: relative;
@@ -8861,7 +8894,7 @@ svg.c-icon-spin {
 :root,
 :where([data-c-theme]) {
   --c-checkbox-control-color: var(--c-sys-color-content-secondary);
-  --c-checkbox-control-color-checked: var(--c-sys-color-content-brand);
+  --c-checkbox-control-color-checked: var(--c-sys-color-action-primary);
   --c-checkbox-control-color-disabled: var(--c-sys-color-content-disabled);
   --c-checkbox-control-color-error: var(--c-sys-color-content-danger);
   --c-checkbox-control-size: 14px;
@@ -9008,7 +9041,7 @@ svg.c-icon-spin {
   --c-cascader-size-item-height: 36px;
   --c-cascader-font-item-size: var(--c-sys-font-size-md);
   --c-cascader-margin-item-icon-left: var(--c-sys-space-5);
-  --c-cascader-item-check-color: var(--c-sys-color-content-primary);
+  --c-cascader-item-check-color: var(--c-sys-color-action-primary);
   --c-cascader-item-check-size: var(--c-sys-font-size-md);
   --c-cascader-item-text-color: var(--c-sys-color-content-primary);
   --c-cascader-item-icon-color: var(--c-sys-color-content-secondary);
@@ -9016,11 +9049,11 @@ svg.c-icon-spin {
   --c-cascader-padding-item-right: var(--c-sys-space-5);
   --c-cascader-size-item-icon: 12px;
   --c-cascader-item-text-color-hover: var(--c-cascader-item-text-color);
-  --c-cascader-item-text-color-active: var(--c-cascader-item-text-color);
+  --c-cascader-item-text-color-active: var(--c-sys-color-action-primary);
   --c-cascader-item-text-color-disabled: var(--c-sys-color-content-disabled);
   --c-cascader-item-text-color-disabled-active: var(--c-sys-color-content-disabled);
-  --c-cascader-item-bg-active: var(--c-color-fill-2);
-  --c-cascader-item-bg-hover: var(--c-cascader-item-bg-active);
+  --c-cascader-item-bg-active: transparent;
+  --c-cascader-item-bg-hover: var(--c-color-fill-2);
   --c-cascader-item-bg-disabled: transparent;
   --c-cascader-item-bg-disabled-active: var(--c-color-fill-2);
   --c-cascader-checkbox-bg-hover: var(--c-color-fill-3);
@@ -9219,17 +9252,44 @@ svg.c-icon-spin {
 .c-cascader-search-option-disabled:hover .c-cascader-option-check {
   color: var(--c-cascader-item-text-color-disabled);
 }
-.c-cascader-option-active {
-  color: var(--c-cascader-item-text-color-active);
-  background-color: var(--c-cascader-item-bg-active);
+.c-cascader-option-active,
+.c-cascader-search-option-active {
+  color: var(--c-cascader-item-text-color-hover);
+  background-color: var(--c-cascader-item-bg-hover);
   transition: all var(--c-sys-motion-duration-standard) var(--c-sys-motion-easing-standard);
 }
-.c-cascader-option-active:hover {
+.c-cascader-option-selected,
+.c-cascader-search-option-selected {
   color: var(--c-cascader-item-text-color-active);
   background-color: var(--c-cascader-item-bg-active);
 }
+.c-cascader-option-selected:hover,
+.c-cascader-search-option-selected:hover,
+.c-cascader-option-selected.c-cascader-option-active,
+.c-cascader-search-option-selected.c-cascader-option-active,
+.c-cascader-option-selected.c-cascader-search-option-active,
+.c-cascader-search-option-selected.c-cascader-search-option-active,
+.c-cascader-option-selected.c-cascader-search-option-hover,
+.c-cascader-search-option-selected.c-cascader-search-option-hover {
+  color: var(--c-cascader-item-text-color-active);
+  background-color: var(--c-cascader-item-bg-hover);
+}
 .c-cascader-option-active.c-cascader-option-disabled,
-.c-cascader-option-active.c-cascader-option-disabled:hover {
+.c-cascader-option-active.c-cascader-search-option-disabled,
+.c-cascader-search-option-active.c-cascader-option-disabled,
+.c-cascader-search-option-active.c-cascader-search-option-disabled,
+.c-cascader-option-active.c-cascader-option-disabled:hover,
+.c-cascader-option-active.c-cascader-search-option-disabled:hover,
+.c-cascader-search-option-active.c-cascader-option-disabled:hover,
+.c-cascader-search-option-active.c-cascader-search-option-disabled:hover,
+.c-cascader-option-selected.c-cascader-option-disabled,
+.c-cascader-option-selected.c-cascader-search-option-disabled,
+.c-cascader-search-option-selected.c-cascader-option-disabled,
+.c-cascader-search-option-selected.c-cascader-search-option-disabled,
+.c-cascader-option-selected.c-cascader-option-disabled:hover,
+.c-cascader-option-selected.c-cascader-search-option-disabled:hover,
+.c-cascader-search-option-selected.c-cascader-option-disabled:hover,
+.c-cascader-search-option-selected.c-cascader-search-option-disabled:hover {
   color: var(--c-cascader-item-text-color-disabled-active);
   background-color: var(--c-cascader-item-bg-disabled-active);
 }
@@ -11867,7 +11927,7 @@ svg.c-icon-spin {
   --c-date-picker-shortcuts-placement-item-margin-vertical: 5px;
   --c-date-picker-shortcuts-inline-item-margin-vertical: 5px;
   --c-date-picker-shortcuts-inline-item-margin-right: var(--c-spacing-5);
-  --c-date-picker-shortcuts-active-text-color: var(--c-sys-color-content-brand);
+  --c-date-picker-shortcuts-active-text-color: var(--c-sys-color-action-primary);
   --c-date-picker-transition-duration-1: var(--c-transition-duration-1);
   --c-date-picker-transition-timing-function-linear: var(--c-transition-timing-function-linear);
 }
@@ -13142,7 +13202,7 @@ svg.c-icon-spin {
 }
 :root,
 :where([data-c-theme]) {
-  --c-ellipsis-focus-color: var(--c-sys-color-content-brand);
+  --c-ellipsis-focus-color: var(--c-sys-color-action-primary);
   --c-ellipsis-focus-width: 2px;
   --c-ellipsis-focus-offset: 2px;
 }
@@ -13285,7 +13345,7 @@ svg.c-icon-spin {
   --c-form-status-validating-focus-bg: var(--c-color-bg-2);
   --c-form-status-validating-border-color: transparent;
   --c-form-status-validating-hover-border-color: transparent;
-  --c-form-status-validating-focus-border-color: var(--c-sys-color-content-brand);
+  --c-form-status-validating-focus-border-color: var(--c-sys-color-action-primary);
   --c-form-status-validating-focus-shadow-size: var(--c-shadow-distance-none);
   --c-form-status-validating-focus-shadow-color: var(--c-color-primary-light-2);
   --c-form-status-validating-tip-text-color: var(--c-sys-color-content-brand);
@@ -14622,7 +14682,7 @@ svg.c-icon-spin {
 :root,
 :where([data-c-theme]) {
   --c-layout-border-color: var(--c-color-border-2);
-  --c-layout-focus-color: var(--c-sys-color-content-brand);
+  --c-layout-focus-color: var(--c-sys-color-action-primary);
   --c-layout-trigger-height: var(--c-size-12);
   --c-layout-font-color: var(--c-color-text-1);
   --c-layout-sider-background-light: var(--c-color-bg-2);
@@ -15750,7 +15810,7 @@ svg.c-icon-spin {
   --c-nav-menu-light-item-bg-hover: var(--c-color-fill-2);
   --c-nav-menu-light-item-bg-selected: var(--c-color-fill-2);
   --c-nav-menu-light-item-text-color: var(--c-color-text-2);
-  --c-nav-menu-light-item-text-color-selected: var(--c-sys-color-content-brand);
+  --c-nav-menu-light-item-text-color-selected: var(--c-sys-color-action-primary);
   --c-nav-menu-light-item-text-color-disabled: var(--c-color-text-4);
   --c-nav-menu-row-height: 40px;
   --c-nav-menu-row-height-xs: 28px;
@@ -16357,11 +16417,11 @@ svg.c-icon-spin {
   --c-pagination-touch-size: 44px;
   --c-pagination-focus-width: 2px;
   --c-pagination-focus-offset: 1px;
-  --c-pagination-focus-color: var(--c-sys-color-content-brand);
+  --c-pagination-focus-color: var(--c-sys-color-action-primary);
   --c-pagination-item-background: transparent;
   --c-pagination-hover-background: var(--c-color-fill-1);
   --c-pagination-active-background: var(--c-color-primary-light-1);
-  --c-pagination-active-color: var(--c-sys-color-content-brand);
+  --c-pagination-active-color: var(--c-sys-color-action-primary);
   --c-pagination-disabled-color: var(--c-color-text-4);
   --c-pagination-disabled-background: var(--c-color-fill-1);
 }
@@ -16588,6 +16648,12 @@ svg.c-icon-spin {
   align-items: center;
   justify-content: center;
 }
+.c-people-select-people {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--c-people-select-content-gap);
+}
 :root,
 :where([data-c-theme]) {
   --c-progress-group-transition-duration: var(--c-sys-motion-duration-standard);
@@ -16879,8 +16945,8 @@ svg.c-icon-spin {
   --c-progress-font-size: var(--c-sys-font-size-sm);
   --c-progress-text-color: var(--c-sys-color-content-secondary);
   --c-progress-track-color: var(--c-sys-color-state-hover);
-  --c-progress-default-color: var(--c-sys-color-content-brand);
-  --c-progress-primary-color: var(--c-sys-color-content-brand);
+  --c-progress-default-color: var(--c-sys-color-action-primary);
+  --c-progress-primary-color: var(--c-sys-color-action-primary);
   --c-progress-secondary-color: var(--c-sys-color-content-secondary);
   --c-progress-tertiary-color: var(--c-sys-color-content-tertiary);
   --c-progress-info-color: var(--c-sys-color-content-info);
@@ -17103,7 +17169,7 @@ svg.c-icon-spin {
   --c-rate-disabled-color: var(--c-sys-color-content-disabled);
   --c-rate-error-color: var(--c-sys-color-content-danger);
   --c-rate-active-scale: 1.2;
-  --c-rate-focus-color: var(--c-sys-color-content-brand);
+  --c-rate-focus-color: var(--c-sys-color-action-primary);
   --c-rate-focus-width: 2px;
   --c-rate-focus-offset: 2px;
   --c-rate-size: var(--c-font-size-title-3);
@@ -17398,7 +17464,7 @@ svg.c-icon-spin {
   --c-scheduler-lane-height: 38px;
   --c-scheduler-font-size: 14px;
   --c-scheduler-line-height: 1.5;
-  --c-scheduler-focus-color: var(--c-sys-color-content-brand);
+  --c-scheduler-focus-color: var(--c-sys-color-action-primary);
   --c-scheduler-now-color: var(--c-sys-color-content-danger);
   --c-scheduler-now-width: 2px;
   --c-scheduler-now-z-index: 3;
@@ -18321,10 +18387,10 @@ svg.c-icon-spin {
 }
 :root,
 :where([data-c-theme]) {
-  --c-slider-active-color: var(--c-sys-color-content-brand);
+  --c-slider-active-color: var(--c-sys-color-action-primary);
   --c-slider-track-color: var(--c-sys-color-state-hover);
   --c-slider-thumb-color: var(--c-sys-color-surface-default);
-  --c-slider-thumb-border-color: var(--c-sys-color-content-brand);
+  --c-slider-thumb-border-color: var(--c-sys-color-action-primary);
   --c-slider-text-color: var(--c-sys-color-content-secondary);
   --c-slider-tooltip-background: var(--c-sys-color-surface-tooltip);
   --c-slider-tooltip-color: var(--c-sys-color-content-on-dark);
@@ -18715,15 +18781,15 @@ svg.c-icon-spin {
   --c-steps-circle-item-tail-color-wait: var(--c-sys-color-border-default);
   --c-steps-circle-item-title-color-wait: var(--c-sys-color-content-secondary);
   --c-steps-circle-item-description-color-wait: var(--c-sys-color-content-secondary);
-  --c-steps-circle-item-bg-process: var(--c-sys-color-content-brand);
+  --c-steps-circle-item-bg-process: var(--c-sys-color-action-primary);
   --c-steps-circle-item-border-color-process: transparent;
   --c-steps-circle-item-icon-text-color-process: var(--c-sys-color-surface-default);
-  --c-steps-circle-item-tail-color-process: var(--c-sys-color-content-brand);
+  --c-steps-circle-item-tail-color-process: var(--c-sys-color-action-primary);
   --c-steps-circle-item-title-color-process: var(--c-sys-color-content-primary);
   --c-steps-circle-item-description-color-process: var(--c-sys-color-content-secondary);
   --c-steps-circle-item-bg-finish: var(--c-sys-color-state-selected);
   --c-steps-circle-item-border-color-finish: transparent;
-  --c-steps-circle-item-icon-text-color-finish: var(--c-sys-color-content-brand);
+  --c-steps-circle-item-icon-text-color-finish: var(--c-sys-color-action-primary);
   --c-steps-circle-item-title-color-finish: var(--c-sys-color-content-primary);
   --c-steps-circle-item-description-color-finish: var(--c-sys-color-content-secondary);
   --c-steps-circle-item-bg-error: var(--c-sys-color-content-danger);
@@ -18749,13 +18815,13 @@ svg.c-icon-spin {
   --c-steps-dot-item-tail-color-wait: var(--c-sys-color-border-default);
   --c-steps-dot-item-title-color-wait: var(--c-sys-color-content-secondary);
   --c-steps-dot-item-description-color-wait: var(--c-sys-color-content-secondary);
-  --c-steps-dot-item-bg-process: var(--c-sys-color-content-brand);
-  --c-steps-dot-item-border-color-process: var(--c-sys-color-content-brand);
-  --c-steps-dot-item-tail-color-process: var(--c-sys-color-content-brand);
+  --c-steps-dot-item-bg-process: var(--c-sys-color-action-primary);
+  --c-steps-dot-item-border-color-process: var(--c-sys-color-action-primary);
+  --c-steps-dot-item-tail-color-process: var(--c-sys-color-action-primary);
   --c-steps-dot-item-title-color-process: var(--c-sys-color-content-primary);
   --c-steps-dot-item-description-color-process: var(--c-sys-color-content-secondary);
-  --c-steps-dot-item-bg-finish: var(--c-sys-color-content-brand);
-  --c-steps-dot-item-border-color-finish: var(--c-sys-color-content-brand);
+  --c-steps-dot-item-bg-finish: var(--c-sys-color-action-primary);
+  --c-steps-dot-item-border-color-finish: var(--c-sys-color-action-primary);
   --c-steps-dot-item-title-color-finish: var(--c-sys-color-content-primary);
   --c-steps-dot-item-description-color-finish: var(--c-sys-color-content-secondary);
   --c-steps-dot-item-bg-error: var(--c-sys-color-content-danger);
@@ -18774,7 +18840,7 @@ svg.c-icon-spin {
   --c-steps-arrow-item-bg-wait: var(--c-sys-color-surface-muted);
   --c-steps-arrow-item-title-color-wait: var(--c-sys-color-content-secondary);
   --c-steps-arrow-item-description-color-wait: var(--c-sys-color-content-secondary);
-  --c-steps-arrow-item-bg-process: var(--c-sys-color-content-brand);
+  --c-steps-arrow-item-bg-process: var(--c-sys-color-action-primary);
   --c-steps-arrow-item-title-color-process: var(--c-sys-color-surface-default);
   --c-steps-arrow-item-description-color-process: var(--c-sys-color-surface-default);
   --c-steps-arrow-item-bg-finish: var(--c-sys-color-state-selected);
@@ -18792,7 +18858,7 @@ svg.c-icon-spin {
   --c-steps-navigation-arrow-spacing-right: var(--c-spacing-5);
   --c-steps-navigation-ink-spacing-left: var(--c-spacing-none);
   --c-steps-navigation-ink-spacing-right: 30px;
-  --c-steps-navigation-ink-bg: var(--c-sys-color-content-brand);
+  --c-steps-navigation-ink-bg: var(--c-sys-color-action-primary);
   --c-steps-changeable-hover-text-color: var(--c-sys-color-content-brand);
   --c-steps-node-font-weight: var(--c-font-weight-500);
   --c-steps-transition-duration-1: var(--c-transition-duration-1);
@@ -19428,7 +19494,7 @@ svg.c-icon-spin {
   --c-switch-size-lg-scale: 1.2;
   --c-switch-hit-area: 0px;
   --c-switch-track-background: var(--c-sys-color-content-secondary);
-  --c-switch-track-active-background: var(--c-sys-color-content-brand);
+  --c-switch-track-active-background: var(--c-sys-color-action-primary);
   --c-switch-track-error-background: var(--c-sys-color-content-danger);
   --c-switch-handle-background: var(--c-sys-color-surface-default);
   --c-switch-handle-color: var(--c-sys-color-content-brand);
@@ -20107,14 +20173,14 @@ svg.c-icon-spin {
   --c-table-header-cell-action-margin-left: 2px;
   --c-table-th-actions-margin-left: 8px;
   --c-table-header-filters-icon-color: var(--c-color-text-2);
-  --c-table-header-filters-icon-active-color: var(--c-sys-color-content-brand);
+  --c-table-header-filters-icon-active-color: var(--c-sys-color-action-primary);
   --c-table-header-filters-icon-hover-bg: var(--c-color-neutral-4);
   --c-table-filters-icon-font-size: 16px;
   --c-table-filters-width: 24px;
   --c-table-filters-icon-hover-bg: var(--c-color-fill-4);
   --c-table-header-sorter-icon-color: var(--c-color-neutral-5);
   --c-table-header-sorter-icon-next-color: var(--c-color-neutral-6);
-  --c-table-header-sorter-icon-active-color: var(--c-sys-color-content-brand);
+  --c-table-header-sorter-icon-active-color: var(--c-sys-color-action-primary);
   --c-table-header-sorter-icon-margin-left: var(--c-spacing-4);
   --c-table-header-sorter-icon-height: 8px;
   --c-table-header-sorter-icon-width: 14px;
@@ -21092,7 +21158,7 @@ svg.c-icon-spin {
 :where([data-c-theme]) {
   --c-tabs-background: var(--c-sys-color-surface-default);
   --c-tabs-title-text-color: var(--c-sys-color-content-secondary);
-  --c-tabs-title-text-color-active: var(--c-sys-color-content-brand);
+  --c-tabs-title-text-color-active: var(--c-sys-color-action-primary);
   --c-tabs-title-text-color-disabled: var(--c-sys-color-content-disabled);
   --c-tabs-muted-background: var(--c-sys-color-surface-muted);
   --c-tabs-border-color: var(--c-sys-color-border-default);
@@ -21793,7 +21859,7 @@ svg.c-icon-spin {
   --c-tree-focus-outline-width: 2px;
   --c-tree-title-text-color: var(--c-color-text-1);
   --c-tree-title-text-color-hover: var(--c-color-text-1);
-  --c-tree-title-text-color-active: var(--c-sys-color-content-brand);
+  --c-tree-title-text-color-active: var(--c-sys-color-action-primary);
   --c-tree-title-text-color-disabled: var(--c-color-text-4);
   --c-tree-title-text-color-active-disabled: var(--c-color-primary-light-3);
   --c-tree-title-bg-hover: var(--c-color-fill-2);
@@ -22198,13 +22264,14 @@ svg.c-icon-spin {
 :root,
 :where([data-c-theme]) {
   --c-tree-select-option-active-background: var(--c-color-fill-2);
-  --c-tree-select-option-radius: var(--c-sys-radius-sm);
-  --c-tree-select-popup-padding-left: var(--c-spacing-5);
-  --c-tree-select-popup-padding-right: var(--c-spacing-2);
-  --c-tree-select-popup-padding-vertical: var(--c-spacing-2);
+  --c-tree-select-option-radius: var(--c-select-popup-option-border-radius);
+  --c-tree-select-popup-padding-left: var(--c-select-popup-padding-horizontal);
+  --c-tree-select-popup-padding-right: var(--c-select-popup-padding-horizontal);
+  --c-tree-select-popup-padding-vertical: var(--c-select-popup-padding-vertical);
   --c-tree-select-highlight-font-weight: var(--c-font-weight-500);
 }
 .c-tree-select-popup {
+  --c-tree-title-text-color-active: var(--c-select-popup-option-text-color-selected);
   box-sizing: border-box;
   padding: var(--c-tree-select-popup-padding-vertical) 0;
   background-color: var(--c-color-bg-popup);
@@ -22220,7 +22287,31 @@ svg.c-icon-spin {
   overflow: auto;
 }
 .c-tree-select-popup .c-tree-node {
-  padding-inline-start: 0;
+  isolation: isolate;
+  box-sizing: border-box;
+  min-height: var(--c-select-popup-option-height);
+  padding-inline: var(--c-select-popup-option-padding-horizontal);
+  border-bottom: 0;
+  border-radius: var(--c-tree-select-option-radius);
+}
+.c-tree-select-popup .c-tree-node-title,
+.c-tree-select-popup .c-tree-node-selected .c-tree-node-title {
+  position: static;
+  min-width: 0;
+  min-height: inherit;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+}
+.c-tree-select-popup .c-tree-node-title-text {
+  flex: 1;
+  min-width: 0;
+}
+.c-tree-select-popup .c-tree-node:hover .c-tree-select-option:not(.c-tree-select-option-selected):not(.c-tree-select-option-disabled)::before {
+  background: var(--c-tree-select-option-active-background);
+}
+.c-tree-select-popup .c-tree-node:hover .c-tree-select-option-selected:not(.c-tree-select-option-disabled)::before {
+  background: var(--c-select-popup-option-bg-selected-hover);
 }
 .c-tree-select-highlight {
   font-weight: var(--c-tree-select-highlight-font-weight);
@@ -22239,10 +22330,27 @@ svg.c-icon-spin {
 }
 .c-tree-select-option {
   display: block;
+  overflow-wrap: anywhere;
 }
-.c-tree-select-option-active {
-  background: var(--c-tree-select-option-active-background);
+.c-tree-select-option::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
   border-radius: var(--c-tree-select-option-radius);
+  pointer-events: none;
+}
+.c-tree-select-option-active:not(.c-tree-select-option-selected):not(.c-tree-select-option-disabled)::before {
+  background: var(--c-tree-select-option-active-background);
+}
+.c-tree-select-option-selected:not(.c-tree-select-option-disabled) {
+  color: var(--c-select-popup-option-text-color-selected);
+}
+.c-tree-select-option-selected:not(.c-tree-select-option-disabled)::before {
+  background: var(--c-select-popup-option-bg-selected);
+}
+.c-tree-select-option-active.c-tree-select-option-selected:not(.c-tree-select-option-disabled)::before {
+  background: var(--c-select-popup-option-bg-selected-hover);
 }
 :root,
 :where([data-c-theme]) {

package/lib/checkbox/base.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const components = require("../_utils/maple/components.js");
+const presentation = require("./presentation.js");
+const _Checkbox = components.withPropsDefaultsSetter(presentation.default, presentation.default.props);
+exports.default = _Checkbox;

package/lib/checkbox/index.js

@@ -2,14 +2,14 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const globalConfig = require("../_utils/global-config.js");
 const groupPresentation = require("./group-presentation.js");
-const presentation = require("./presentation.js");
+const base = require("./base.js");
 const props = require("./props.js");
 const Checkbox = globalConfig.withInstall(
-  presentation.default,
-  Object.assign(presentation.default, {
+  base.default,
+  Object.assign(base.default, {
     Group: groupPresentation.default
   }),
-  { components: [presentation.default, groupPresentation.default] }
+  { components: [base.default, groupPresentation.default] }
 );
 const _CheckboxComponent = Checkbox;
 const _CheckboxGroupComponent = groupPresentation.default;

package/lib/checkbox/presentation.js

@@ -2,5 +2,5 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const withFieldPresentation = require("../_components/field-presentation/with-field-presentation.js");
 const checkbox_vue_vue_type_script_setup_true_lang = require("./checkbox.vue.js");
-const _Checkbox = withFieldPresentation.withFieldPresentation(checkbox_vue_vue_type_script_setup_true_lang.default, { methods: ["toggle", "focus", "blur"] });
-exports.default = _Checkbox;
+const Checkbox = withFieldPresentation.withFieldPresentation(checkbox_vue_vue_type_script_setup_true_lang.default, { methods: ["toggle", "focus", "blur"] });
+exports.default = Checkbox;

package/lib/checkbox/style/index.css

@@ -4,7 +4,7 @@
 :root,
 :where([data-c-theme]) {
   --c-checkbox-control-color: var(--c-sys-color-content-secondary);
-  --c-checkbox-control-color-checked: var(--c-sys-color-content-brand);
+  --c-checkbox-control-color-checked: var(--c-sys-color-action-primary);
   --c-checkbox-control-color-disabled: var(--c-sys-color-content-disabled);
   --c-checkbox-control-color-error: var(--c-sys-color-content-danger);
   --c-checkbox-control-size: 14px;