@agile-team/mach-table-vue 0.28.0 → 0.29.2

package/dist/mach-table.css

@@ -3,7 +3,7 @@
     "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
   --mach-font-size: 13px;
   --mach-font-size-sm: 12px;
-  --mach-header-font-weight: 600;
+  --mach-header-font-weight: 650;
   --mach-cell-padding: 9px;
   --mach-row-h: 36px;
   --mach-header-h: 40px;
@@ -21,10 +21,10 @@
   --mach-cell-border-color: transparent;
   --mach-border-width: 1px;
   --mach-header-border-width: 1px;
-  --mach-header-accent-color: var(--mach-border-color);
-  --mach-header-bg: #fafbfd;
-  --mach-header-group-bg: #f4f6fa;
-  --mach-header-fg: #475569;
+  --mach-header-accent-color: #d9e1eb;
+  --mach-header-bg: #f4f7fb;
+  --mach-header-group-bg: #edf2f8;
+  --mach-header-fg: #344054;
   --mach-body-bg: #ffffff;
   --mach-body-fg: #26303f;
 
@@ -133,7 +133,7 @@
 }
 
 .mach-toolbar__button,
-.mach-toolbar__select,
+.mach-toolbar__select-host,
 .mach-toolbar__selection {
   height: 32px;
   padding: 0 10px;
@@ -152,7 +152,7 @@
 }
 
 .mach-toolbar__button:hover:not(:disabled),
-.mach-toolbar__select:hover {
+.mach-toolbar__select-host:hover {
   color: var(--mach-primary, #2563eb);
   border-color: var(--mach-primary, #2563eb);
 }
@@ -169,6 +169,24 @@
   font-size: 12px;
 }
 
+.mach-toolbar__select-host {
+  width: 82px;
+  padding: 0;
+}
+
+.mach-toolbar__select-control,
+.mach-toolbar__select-control .mach-select-trigger {
+  width: 100%;
+  height: 100%;
+}
+
+.mach-toolbar__select-control .mach-select-trigger {
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  box-shadow: none;
+}
+
 @media (max-width: 640px) {
   .mach-toolbar { align-items: stretch; flex-direction: column; }
   .mach-toolbar__main, .mach-toolbar__aside { flex-wrap: wrap; }
@@ -200,9 +218,10 @@
 .mach-root.mach-theme-dark.mach-size--large {
   --mach-border-color: #26324a;
   --mach-row-border-color: #1c2740;
+  --mach-header-accent-color: #33415e;
   --mach-header-bg: #101a2e;
   --mach-header-group-bg: #16213a;
-  --mach-header-fg: #9fb0c7;
+  --mach-header-fg: #c3cee0;
   --mach-body-bg: #0d1526;
   --mach-body-fg: #dbe4f0;
   --mach-row-hover-bg: #142138;
@@ -227,6 +246,13 @@
   box-sizing: border-box;
 }
 
+.mach-portal,
+.mach-portal *,
+.mach-portal *::before,
+.mach-portal *::after {
+  box-sizing: border-box;
+}
+
 .mach-root:focus-visible {
   outline: 2px solid var(--mach-primary);
   outline-offset: -2px;
@@ -239,6 +265,7 @@
   height: var(--mach-header-h);
   background: var(--mach-header-bg);
   border-bottom: var(--mach-header-border-width) solid var(--mach-header-accent-color);
+  box-shadow: 0 1px 2px color-mix(in srgb, var(--mach-header-fg) 8%, transparent);
   overflow: hidden;
   position: relative;
   z-index: 3;
@@ -298,10 +325,6 @@
   background: var(--mach-header-group-bg);
 }
 
-.mach-header-cell--sorted {
-  color: var(--mach-primary);
-}
-
 .mach-header-label--custom {
   display: inline-flex;
   align-items: center;
@@ -317,13 +340,22 @@
   border-right: var(--mach-border-width) solid transparent;
   color: var(--mach-header-fg);
   font-weight: var(--mach-header-font-weight);
-  font-size: calc(var(--mach-font-size) - 1px);
-  letter-spacing: 0.2px;
+  font-size: var(--mach-font-size);
+  letter-spacing: 0.15px;
   cursor: default;
   overflow: hidden;
   white-space: nowrap;
   background: var(--mach-header-bg);
-  transition: color var(--mach-transition);
+  transition: color var(--mach-transition), background-color var(--mach-transition);
+}
+
+.mach-header-cell--leaf:hover {
+  background: color-mix(in srgb, var(--mach-primary) 4%, var(--mach-header-bg));
+}
+
+.mach-header-cell.mach-header-cell--sorted {
+  color: var(--mach-primary);
+  background: color-mix(in srgb, var(--mach-primary) 5%, var(--mach-header-bg));
 }
 
 .mach-root.mach-cell-borders .mach-header-cell {
@@ -338,6 +370,16 @@
   cursor: pointer;
 }
 
+.mach-header-cell--selection {
+  justify-content: center;
+  gap: 0;
+  padding: 0;
+}
+
+.mach-header-cell--selection .mach-header-label:empty {
+  display: none;
+}
+
 .mach-sort-indicator {
   display: inline-flex;
   align-items: center;
@@ -346,6 +388,11 @@
   flex-shrink: 0;
 }
 
+.mach-sort-indicator svg {
+  width: 10px;
+  height: 10px;
+}
+
 .mach-sort-indicator:empty {
   display: none;
 }
@@ -364,20 +411,32 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 18px;
-  height: 18px;
+  width: 22px;
+  height: 22px;
   padding: 0;
   border: none;
   border-radius: var(--mach-radius-sm);
   background: transparent;
   color: inherit;
-  opacity: 0.3;
+  opacity: 0.36;
   cursor: pointer;
   flex-shrink: 0;
+  transition: opacity var(--mach-transition), color var(--mach-transition), background-color var(--mach-transition);
+}
+
+.mach-filter-btn svg {
+  width: 12px;
+  height: 12px;
+  pointer-events: none;
+}
+
+.mach-header-cell:hover .mach-filter-btn,
+.mach-header-cell:hover .mach-menu-btn {
+  opacity: 0.62;
 }
 
 .mach-filter-btn:hover {
-  opacity: 0.85;
+  opacity: 1;
   background: var(--mach-row-hover-bg);
 }
 
@@ -408,25 +467,32 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 18px;
-  height: 18px;
+  width: 22px;
+  height: 22px;
   padding: 0;
   border: none;
   border-radius: var(--mach-radius-sm);
   background: transparent;
   color: inherit;
-  opacity: 0.3;
+  opacity: 0.36;
   cursor: pointer;
   flex-shrink: 0;
   font-size: 12px;
   line-height: 1;
+  transition: opacity var(--mach-transition), color var(--mach-transition), background-color var(--mach-transition);
 }
 
 .mach-menu-btn:hover {
-  opacity: 0.85;
+  opacity: 1;
   background: var(--mach-row-hover-bg);
 }
 
+.mach-menu-btn svg {
+  width: 12px;
+  height: 12px;
+  pointer-events: none;
+}
+
 .mach-header-resize {
   position: absolute;
   top: 0;
@@ -449,18 +515,44 @@
 }
 
 .mach-header-cell--dragging {
-  opacity: 0.4;
+  opacity: 0.22;
+}
+
+.mach-column-drag-ghost {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: calc(var(--mach-z-menu) + 1);
+  display: flex;
+  align-items: center;
+  height: var(--mach-header-h);
+  max-width: calc(100vw - 16px);
+  padding: 0 var(--mach-cell-padding);
+  overflow: hidden;
+  color: var(--mach-body-fg);
+  font: var(--mach-header-font-weight) var(--mach-font-size)/1.3 var(--mach-font-family);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  pointer-events: none;
+  background: var(--mach-body-bg);
+  border: 1px solid var(--mach-primary);
+  border-radius: var(--mach-radius);
+  box-shadow: var(--mach-shadow);
+  opacity: 0.96;
+  will-change: transform;
 }
 
 .mach-drop-indicator {
   position: absolute;
   top: 3px;
+  left: 0;
   width: 2px;
   height: calc(100% - 6px);
   border-radius: 2px;
   background: var(--mach-primary);
   z-index: 4;
   pointer-events: none;
+  will-change: transform;
 }
 
 .mach-root--dragging {
@@ -552,8 +644,10 @@
 
 .mach-cell {
   position: absolute;
+  top: 0;
   display: flex;
   align-items: center;
+  height: 100%;
   padding: 0 var(--mach-cell-padding);
   border-right: 1px solid var(--mach-cell-border-color);
   overflow: hidden;
@@ -605,6 +699,12 @@
   z-index: 1;
 }
 
+.mach-cell--selection.mach-cell--focus {
+  box-shadow: none;
+  border-radius: 0;
+  z-index: auto;
+}
+
 .mach-row--hover,
 .mach-row--hover .mach-cell {
   background: var(--mach-row-hover-bg);
@@ -755,12 +855,14 @@ input.mach-select-all {
 
 .mach-row-drop-indicator {
   position: absolute;
+  top: 0;
   left: 0;
   width: 100%;
   height: 2px;
   background: var(--mach-primary);
   z-index: 5;
   pointer-events: none;
+  will-change: transform;
 }
 
 .mach-root--row-dragging {
@@ -778,9 +880,9 @@ input.mach-select-all {
 
 .mach-editor-input.mach-editor-invalid,
 .mach-editor-invalid .mach-editor-input,
-.mach-editor-invalid.mach-editor-select,
+.mach-editor-invalid .mach-select-trigger,
 .mach-editor-invalid input,
-.mach-editor-invalid select {
+.mach-editor-invalid select:not([hidden]) {
   border-color: #ef4444 !important;
   box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35);
 }
@@ -836,42 +938,39 @@ input.mach-select-all {
   background: color-mix(in srgb, var(--mach-primary) 7%, transparent) !important;
 }
 
-.mach-cell--range.mach-cell--range-top {
-  box-shadow: inset 0 1.5px 0 var(--mach-primary);
-}
-
-.mach-cell--range.mach-cell--range-bottom {
-  box-shadow: inset 0 -1.5px 0 var(--mach-primary);
-}
-
-.mach-cell--range.mach-cell--range-left {
-  box-shadow: inset 1.5px 0 0 var(--mach-primary);
-}
-
-.mach-cell--range.mach-cell--range-right {
-  box-shadow: inset -1.5px 0 0 var(--mach-primary);
+.mach-cell--range::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  border: 0 solid var(--mach-primary);
+  pointer-events: none;
 }
 
-.mach-cell--range.mach-cell--range-top.mach-cell--range-left {
-  box-shadow: inset 1.5px 1.5px 0 var(--mach-primary);
+.mach-cell--range.mach-cell--range-top::after {
+  border-top-width: 1.5px;
 }
 
-.mach-cell--range.mach-cell--range-top.mach-cell--range-right {
-  box-shadow: inset -1.5px 1.5px 0 var(--mach-primary);
+.mach-cell--range.mach-cell--range-bottom::after {
+  border-bottom-width: 1.5px;
 }
 
-.mach-cell--range.mach-cell--range-bottom.mach-cell--range-left {
-  box-shadow: inset 1.5px -1.5px 0 var(--mach-primary);
+.mach-cell--range.mach-cell--range-left::after {
+  border-left-width: 1.5px;
 }
 
-.mach-cell--range.mach-cell--range-bottom.mach-cell--range-right {
-  box-shadow: inset -1.5px -1.5px 0 var(--mach-primary);
+.mach-cell--range.mach-cell--range-right::after {
+  border-right-width: 1.5px;
 }
 
 .mach-cell--range.mach-cell--focus {
   box-shadow: inset 0 0 0 var(--mach-focus-width) var(--mach-cell-focus-color);
 }
 
+.mach-cell--range.mach-cell--focus::after {
+  display: none;
+}
+
 .mach-context-menu {
   position: fixed;
   z-index: var(--mach-z-menu);
@@ -1025,7 +1124,7 @@ input.mach-select-all {
 }
 
 .mach-editor-input,
-.mach-editor-select {
+.mach-editor-select-control .mach-select-trigger {
   width: 100%;
   height: calc(var(--mach-row-h) - 8px);
   padding: 0 6px;
@@ -1038,6 +1137,167 @@ input.mach-select-all {
   outline: none;
 }
 
+.mach-select-control {
+  position: relative;
+  display: inline-flex;
+  min-width: 0;
+  font-family: var(--mach-font-family, inherit);
+  font-size: var(--mach-font-size, 14px);
+}
+
+.mach-select-native[hidden] {
+  display: none !important;
+}
+
+.mach-select-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  min-width: 0;
+  height: 34px;
+  padding: 0 10px;
+  border: 1px solid var(--mach-border-color, #e6eaf0);
+  border-radius: var(--mach-radius, 6px);
+  outline: none;
+  color: var(--mach-body-fg, #1f2937);
+  background: var(--mach-body-bg, #fff);
+  font: inherit;
+  line-height: 1;
+  text-align: left;
+  cursor: pointer;
+  transition: border-color var(--mach-transition, .15s ease),
+    box-shadow var(--mach-transition, .15s ease),
+    background-color var(--mach-transition, .15s ease);
+}
+
+.mach-select-trigger:hover {
+  border-color: color-mix(in srgb, var(--mach-primary, #2563eb) 44%, var(--mach-border-color, #e6eaf0));
+  background: color-mix(in srgb, var(--mach-primary, #2563eb) 3%, var(--mach-body-bg, #fff));
+}
+
+.mach-select-trigger:focus-visible,
+.mach-select-trigger[aria-expanded="true"] {
+  border-color: var(--mach-primary, #2563eb);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mach-primary, #2563eb) 12%, transparent);
+}
+
+.mach-select-value {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mach-select-caret {
+  width: 8px;
+  height: 8px;
+  flex: 0 0 auto;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  transform: translateY(-2px) rotate(45deg);
+  transition: transform var(--mach-transition, .15s ease);
+}
+
+.mach-select-trigger[aria-expanded="true"] .mach-select-caret {
+  transform: translateY(2px) rotate(225deg);
+}
+
+.mach-select-listbox {
+  position: fixed;
+  z-index: var(--mach-z-menu, 1200);
+  display: none;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 112px;
+  max-width: min(320px, calc(100vw - 16px));
+  max-height: min(244px, calc(100vh - 16px));
+  padding: 5px;
+  overflow: auto;
+  overscroll-behavior: contain;
+  border: 1px solid color-mix(in srgb, var(--mach-border-color, #e6eaf0) 88%, var(--mach-primary, #2563eb));
+  border-radius: calc(var(--mach-radius-lg, 8px) + 1px);
+  color: var(--mach-body-fg, #1f2937);
+  background: var(--mach-body-bg, #fff);
+  box-shadow: 0 14px 36px color-mix(in srgb, var(--mach-body-fg, #1f2937) 18%, transparent),
+    var(--mach-shadow-sm, 0 1px 3px rgba(15, 23, 42, .12));
+  font-family: var(--mach-font-family, inherit);
+  font-size: var(--mach-font-size, 14px);
+  isolation: isolate;
+}
+
+.mach-select-listbox--open {
+  display: flex;
+  animation: mach-select-listbox-in .12s ease-out;
+}
+
+.mach-select-option {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  width: 100%;
+  min-height: 32px;
+  padding: 0 30px 0 10px;
+  border: 0;
+  border-radius: var(--mach-radius, 6px);
+  outline: none;
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: color var(--mach-transition, .15s ease), background-color var(--mach-transition, .15s ease);
+}
+
+.mach-select-option:hover,
+.mach-select-option:focus-visible,
+.mach-select-option--active {
+  color: var(--mach-primary, #2563eb);
+  background: color-mix(in srgb, var(--mach-primary, #2563eb) 9%, var(--mach-body-bg, #fff));
+}
+
+.mach-select-option[aria-selected="true"] {
+  color: var(--mach-primary, #2563eb);
+  background: color-mix(in srgb, var(--mach-primary, #2563eb) 13%, var(--mach-body-bg, #fff));
+  font-weight: 600;
+}
+
+.mach-select-option[aria-selected="true"]::after {
+  content: "✓";
+  position: absolute;
+  right: 10px;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.mach-select-option:disabled {
+  opacity: .42;
+  cursor: not-allowed;
+}
+
+@keyframes mach-select-listbox-in {
+  from { transform: translateY(-3px) scale(.99); }
+  to { transform: translateY(0) scale(1); }
+}
+
+.mach-select-listbox--above {
+  transform-origin: bottom;
+}
+
+.mach-filter-select-control {
+  width: 100%;
+}
+
+.mach-filter-select-trigger {
+  width: 100%;
+  background: color-mix(in srgb, var(--mach-header-bg) 62%, var(--mach-body-bg));
+}
+
+.mach-filter-listbox {
+  width: auto;
+}
+
 .mach-overlay {
   position: absolute;
   inset: 0;
@@ -1053,6 +1313,72 @@ input.mach-select-all {
   font-size: var(--mach-font-size);
 }
 
+.mach-overlay-content {
+  max-width: min(100%, 320px);
+}
+
+.mach-loading {
+  display: grid;
+  justify-items: center;
+  gap: 14px;
+  min-width: 172px;
+  padding: 20px 24px;
+}
+
+.mach-loading__visual {
+  position: relative;
+  display: grid;
+  gap: 8px;
+  width: 132px;
+  padding: 14px 16px;
+  overflow: hidden;
+  background: color-mix(in srgb, var(--mach-header-bg) 82%, var(--mach-body-bg));
+  border: 1px solid var(--mach-border-color);
+  border-radius: var(--mach-radius-lg);
+  box-shadow: var(--mach-shadow-sm);
+}
+
+.mach-loading__visual::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(
+    100deg,
+    transparent 20%,
+    color-mix(in srgb, var(--mach-primary) 11%, transparent) 50%,
+    transparent 80%
+  );
+  animation: mach-loading-sweep 1.35s ease-in-out infinite;
+}
+
+.mach-loading__row {
+  height: 7px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--mach-primary) 13%, var(--mach-border-color));
+}
+
+.mach-loading__row:nth-child(2) { width: 82%; }
+.mach-loading__row:nth-child(3) { width: 92%; }
+.mach-loading__row:nth-child(4) { width: 66%; }
+
+.mach-loading__status {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--mach-header-fg);
+  font-size: var(--mach-font-size-sm);
+}
+
+.mach-loading__spinner {
+  width: 14px;
+  height: 14px;
+}
+
+.mach-loading__label {
+  line-height: 1;
+}
+
 .mach-spinner {
   width: 22px;
   height: 22px;
@@ -1068,34 +1394,41 @@ input.mach-select-all {
   }
 }
 
+@keyframes mach-loading-sweep {
+  to {
+    transform: translateX(100%);
+  }
+}
+
 .mach-filter-panel {
   position: fixed;
   z-index: var(--mach-z-popup);
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  min-width: 190px;
-  padding: 10px;
+  gap: 10px;
+  width: 224px;
+  max-width: calc(100vw - 16px);
+  padding: 12px;
   background: var(--mach-body-bg);
   color: var(--mach-body-fg);
-  border: 1px solid var(--mach-border-color);
-  border-radius: var(--mach-radius-lg);
-  box-shadow: var(--mach-shadow);
+  border: 1px solid color-mix(in srgb, var(--mach-border-color) 88%, var(--mach-primary));
+  border-radius: calc(var(--mach-radius-lg) + 2px);
+  box-shadow: 0 14px 36px color-mix(in srgb, var(--mach-body-fg) 16%, transparent), var(--mach-shadow-sm);
   font-family: var(--mach-font-family);
   font-size: var(--mach-font-size);
+  animation: mach-filter-panel-in 0.14s ease-out;
 }
 
 .mach-filter-body {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 8px;
 }
 
-.mach-filter-select,
 .mach-filter-input {
   width: 100%;
-  height: 27px;
-  padding: 0 7px;
+  height: 34px;
+  padding: 0 10px;
   border: 1px solid var(--mach-border-color);
   border-radius: var(--mach-radius);
   font-family: inherit;
@@ -1103,11 +1436,19 @@ input.mach-select-all {
   color: inherit;
   background: var(--mach-body-bg);
   outline: none;
+  transition: border-color var(--mach-transition), box-shadow var(--mach-transition);
 }
 
-.mach-filter-select:focus,
 .mach-filter-input:focus {
   border-color: var(--mach-primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mach-primary) 12%, transparent);
+}
+
+@keyframes mach-filter-panel-in {
+  from {
+    opacity: 0;
+    transform: translateY(-3px) scale(0.99);
+  }
 }
 
 .mach-filter-set-list {
@@ -1289,7 +1630,7 @@ input.mach-select-all {
   white-space: nowrap;
 }
 
-.mach-column-workbench-pin,
+.mach-column-workbench-pin-control,
 .mach-column-workbench-move {
   height: 26px;
   border: 1px solid var(--mach-border-color);
@@ -1299,6 +1640,20 @@ input.mach-select-all {
   font: inherit;
 }
 
+.mach-column-workbench-pin-control {
+  width: 108px;
+  border: 0;
+}
+
+.mach-column-workbench-pin-control .mach-select-trigger {
+  width: 100%;
+  height: 26px;
+  padding: 0 7px;
+  border-radius: var(--mach-radius);
+  font-size: 12px;
+  box-shadow: none;
+}
+
 .mach-column-workbench-move {
   padding: 0;
   cursor: pointer;
@@ -1427,6 +1782,7 @@ input.mach-select-all {
   line-height: 1;
   cursor: pointer;
   white-space: nowrap;
+  transition: color var(--mach-transition), background-color var(--mach-transition), transform var(--mach-transition);
 }
 
 .mach-action-btn:hover {
@@ -1435,7 +1791,15 @@ input.mach-select-all {
 }
 
 .mach-action-btn--danger:hover {
+  background: color-mix(in srgb, var(--mach-danger) 10%, transparent);
   color: var(--mach-danger);
+  transform: scale(1.06);
+}
+
+.mach-action-btn--success:hover {
+  background: color-mix(in srgb, var(--mach-success) 12%, transparent);
+  color: var(--mach-success);
+  transform: scale(1.06);
 }
 
 .mach-action-btn--primary {
@@ -1679,7 +2043,7 @@ input.mach-select-all {
 }
 
 .mach-cell-editor-shell > .mach-editor-input,
-.mach-cell-editor-shell > .mach-editor-select,
+.mach-cell-editor-shell > .mach-editor-select-control,
 .mach-cell-editor-shell > :not(.mach-cell-editor-controls),
 .mach-row-editor-shell > * {
   flex: 1 1 auto;
@@ -1690,6 +2054,7 @@ input.mach-select-all {
   display: inline-flex;
   flex: 0 0 auto;
   align-items: center;
+  gap: 2px;
   padding: 2px;
   border: 1px solid var(--mach-border-color);
   border-radius: var(--mach-radius);
@@ -1701,14 +2066,15 @@ input.mach-select-all {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 23px;
-  height: 23px;
+  width: 22px;
+  height: 22px;
   padding: 0;
   border: 0;
   border-radius: var(--mach-radius-sm);
   background: transparent;
   color: var(--mach-header-fg);
   cursor: pointer;
+  transition: color var(--mach-transition), background-color var(--mach-transition), transform var(--mach-transition);
 }
 
 .mach-edit-control svg {
@@ -1717,11 +2083,21 @@ input.mach-select-all {
 }
 
 .mach-edit-control--confirm {
-  color: var(--mach-primary);
+  color: var(--mach-success);
 }
 
-.mach-edit-control:hover {
-  background: var(--mach-row-hover-bg);
+.mach-edit-control--confirm:hover {
+  background: color-mix(in srgb, var(--mach-success) 12%, transparent);
+  transform: scale(1.06);
+}
+
+.mach-edit-control--cancel {
+  color: var(--mach-danger);
+}
+
+.mach-edit-control--cancel:hover {
+  background: color-mix(in srgb, var(--mach-danger) 10%, transparent);
+  transform: scale(1.06);
 }
 
 .mach-edit-control:disabled {
@@ -1735,13 +2111,14 @@ input.mach-select-all {
 }
 
 .mach-cell--row-editing .mach-editor-input,
-.mach-cell--row-editing .mach-editor-select {
+.mach-cell--row-editing .mach-editor-select-control .mach-select-trigger {
   border-color: color-mix(in srgb, var(--mach-primary) 45%, var(--mach-border-color));
   box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
 }
 
 .mach-cell--row-editing .mach-editor-input:focus,
-.mach-cell--row-editing .mach-editor-select:focus {
+.mach-cell--row-editing .mach-editor-select-control .mach-select-trigger:focus-visible,
+.mach-cell--row-editing .mach-editor-select-control .mach-select-trigger[aria-expanded="true"] {
   border-color: var(--mach-primary);
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--mach-primary) 12%, transparent);
 }
@@ -1840,21 +2217,21 @@ input.mach-select-all {
   cursor: not-allowed;
 }
 
-.mach-pagination-size {
+.mach-pagination-size-control {
   height: 24px;
   margin-left: 6px;
-  padding: 0 4px;
-  border: var(--mach-border-width) solid var(--mach-border-color);
-  border-radius: var(--mach-radius-sm);
-  background: var(--mach-body-bg);
-  color: var(--mach-header-fg);
+  width: 92px;
   font-size: var(--mach-font-size-sm);
-  outline: none;
-  cursor: pointer;
 }
 
-.mach-pagination-size:focus-visible {
-  border-color: var(--mach-primary);
+.mach-pagination-size-control .mach-select-trigger {
+  width: 100%;
+  height: 24px;
+  padding: 0 6px;
+  border-width: var(--mach-border-width);
+  border-radius: var(--mach-radius-sm);
+  color: var(--mach-header-fg);
+  box-shadow: none;
 }
 
 .mach-watermark {
@@ -1888,7 +2265,14 @@ input.mach-select-all {
 .mach-empty__hint {
   font-size: var(--mach-font-size-sm);
   color: var(--mach-header-fg);
-}
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mach-spinner,
+  .mach-loading__visual::before {
+    animation-duration: 2.4s;
+  }
+}
 
 .mach-cell--center {
   justify-content: center;