@revolist/ui 4.0.1-rc → 4.0.1

package/styles/_compositions.scss

@@ -2,6 +2,7 @@
 @use './disclosure';
 @use './alert';
 @use './loading';
+@use './control';
 
 .rv-example-card {
   box-sizing: border-box;
@@ -11,104 +12,406 @@
   border: 0;
   border-radius: 10px;
   color: var(--rv-example-card-text, var(--rv-ui-text));
-  background: color-mix(in srgb, var(--rv-example-card-text, var(--rv-ui-text)) 4%, var(--rv-example-card-surface, var(--rv-ui-surface)));
+  background: color-mix(
+    in srgb,
+    var(--rv-example-card-text, var(--rv-ui-text)) 4%,
+    var(--rv-example-card-surface, var(--rv-ui-surface))
+  );
   font: 400 13px/1.5 var(--rv-example-card-font, system-ui, sans-serif);
 }
-@media (max-width: 560px) { .rv-example-card { padding: 12px; } }
+@media (max-width: 560px) {
+  .rv-example-card {
+    padding: 12px;
+  }
+}
 
-.rv-number-stepper, .rv-toolbar, .rv-date-picker, .rv-date-range-picker { display: flex; align-items: center; gap: 8px; min-width: 0; }
-.rv-toolbar { flex-wrap: wrap; }
-.rv-toolbar-separator { height: 24px; border-inline-start: 1px solid var(--rv-ui-border); }
-.rv-field__error { color: var(--rv-ui-danger); font-size: 12px; }
-.rv-panel, .rv-empty-state { padding: 16px; border: 1px solid var(--rv-ui-border); border-radius: var(--rv-ui-radius, 8px); background: var(--rv-ui-surface); color: var(--rv-ui-text); }
-.rv-empty-state { text-align: center; }
-.rv-popover, .rv-menu, .rv-tooltip { border: 1px solid var(--rv-ui-border); border-radius: var(--rv-ui-radius, 8px); background: var(--rv-ui-surface-elevated); color: var(--rv-ui-text); box-shadow: 0 8px 24px var(--rv-ui-shadow); padding: 8px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: auto; z-index: 10000; }
-.rv-popover[hidden] { display: none; }
-.rv-menu { display: grid; gap: 2px; }
-.rv-menu > [role='menuitem'] { justify-content: start; text-align: start; }
-.rv-menu-separator { border-block-start: 1px solid var(--rv-ui-border); margin-block: 4px; }
-.rv-tooltip { font-size: 12px; padding: 6px 10px; pointer-events: none; }
-.rv-radio-group { display: flex; flex-wrap: wrap; gap: 12px; border: 0; padding: 0; margin: 0; }
-.rv-radio-group label { display: inline-flex; align-items: center; gap: 6px; }
-.rv-loading-container { position: relative; }
-.rv-loading-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--rv-ui-surface, white) 85%, transparent); }
-.rv-spinner { display: inline-flex; font-size: 24px; }
-.rv-spinner > span { animation: rv-ui-spin 1s linear infinite; }
+.rv-number-stepper,
+.rv-toolbar,
+.rv-date-picker,
+.rv-date-range-picker {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+.rv-toolbar {
+  flex-wrap: wrap;
+}
+.rv-toolbar-separator {
+  height: 24px;
+  border-inline-start: 1px solid var(--rv-ui-border);
+}
+.rv-field__error {
+  color: var(--rv-ui-danger);
+  font-size: 12px;
+}
+.rv-panel,
+.rv-empty-state {
+  padding: 16px;
+  border: 1px solid var(--rv-ui-border);
+  border-radius: var(--rv-ui-radius, 8px);
+  background: var(--rv-ui-surface);
+  color: var(--rv-ui-text);
+}
+.rv-empty-state {
+  text-align: center;
+}
+.rv-popover,
+.rv-menu {
+  border: 1px solid var(--rv-ui-border);
+  border-radius: var(--rv-ui-radius, 8px);
+  background: var(--rv-ui-surface-elevated);
+  color: var(--rv-ui-text);
+  box-shadow: 0 8px 24px var(--rv-ui-shadow);
+  padding: 8px;
+  max-width: calc(100vw - 16px);
+  max-height: calc(100vh - 16px);
+  overflow: auto;
+  z-index: 10000;
+}
+.rv-popover[hidden] {
+  display: none;
+}
+.rv-menu {
+  display: grid;
+  gap: 2px;
+}
+.rv-menu > [role='menuitem'] {
+  justify-content: start;
+  text-align: start;
+}
+.rv-menu-separator {
+  border-block-start: 1px solid var(--rv-ui-border);
+  margin-block: 4px;
+}
 
-.rv-circular-progress { width: 36px; height: 36px; stroke-width: 3; color: var(--rv-ui-accent); }
-.rv-resize-handle { position: relative; width: 12px; min-height: 48px; flex: 0 0 12px; cursor: col-resize; touch-action: none; user-select: none; }
-.rv-resize-handle::after { content: ''; position: absolute; inset-block: 0; inset-inline-start: 5px; width: 2px; border-radius: 2px; background: var(--rv-ui-border-strong); transition: background-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1)); }
-.rv-resize-handle:hover::after, .rv-resize-handle:focus-visible::after { background: var(--rv-ui-accent); }
-.rv-resize-handle:focus-visible { outline: 2px solid var(--rv-ui-accent); }
-.rv-btn[aria-pressed='true'] { background: var(--rv-ui-selected-bg); color: var(--rv-ui-selected-accent-fg, var(--rv-ui-accent-text)); border-color: transparent; font-weight: 500; }
-.rv-btn-sm { height: auto; min-height: 26px; padding: 4px 8px; font-size: 12px; }
-@media (prefers-reduced-motion: reduce) { .rv-spinner > span { animation: none; } }
-@media (max-width: 480px) { .rv-date-range-picker { flex-wrap: wrap; } .rv-date-range-picker > .rv-control { flex: 1 1 120px; } }
+.rv-radio-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+.rv-radio-group label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.rv-loading-container {
+  position: relative;
+}
+.rv-loading-overlay {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: color-mix(in srgb, var(--rv-ui-surface, white) 85%, transparent);
+}
+.rv-spinner {
+  display: inline-flex;
+  font-size: 24px;
+}
+.rv-spinner > span {
+  animation: rv-ui-spin 1s linear infinite;
+}
 
-.rv-ui-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
-.rv-form-section, .rv-radio-group { min-inline-size: 0; }
+.rv-circular-progress {
+  width: 36px;
+  height: 36px;
+  stroke-width: 3;
+  color: var(--rv-ui-accent);
+}
+.rv-panel-resize-handle {
+  position: absolute;
+  z-index: 4;
+  inset-block: 0;
+  right: 0;
+  display: flex;
+}
+.rv-panel-resize-handle[data-edge='left'] {
+  right: auto;
+  left: 0;
+}
 
-.rv-badge--inline { position: static; inset: auto; transform: none; }
+.rv-resize-handle {
+  position: relative;
+  width: 12px;
+  min-height: 48px;
+  flex: 0 0 12px;
+  cursor: col-resize;
+  touch-action: none;
+  user-select: none;
+}
+.rv-resize-handle::after {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 5px;
+  width: 1px;
+  border-radius: 2px;
+  background: var(--rv-ui-border);
+  transition: background-color var(--rv-ui-motion-fast, 120ms)
+    var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
+}
+.rv-resize-handle:hover::after,
+.rv-resize-handle:focus-visible::after {
+  background: var(--rv-ui-accent);
+}
+.rv-resize-handle:focus-visible {
+  outline: none;
+}
+@media (forced-colors: active) {
+  .rv-resize-handle:focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
+}
+.rv-btn[aria-pressed='true'] {
+  background: var(--rv-ui-selected-bg);
+  color: var(--rv-ui-selected-accent-fg, var(--rv-ui-accent-text));
+  border-color: transparent;
+  font-weight: 500;
+}
+.rv-btn-sm {
+  height: auto;
+  min-height: 26px;
+  padding: 4px 8px;
+  font-size: 12px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .rv-spinner > span {
+    animation: none;
+  }
+}
+@media (max-width: 480px) {
+  .rv-date-range-picker {
+    flex-wrap: wrap;
+  }
+  .rv-date-range-picker > .rv-control {
+    flex: 1 1 120px;
+  }
+}
 
-.rv-control { color-scheme: var(--rv-ui-color-scheme, normal); }
-.rv-combobox .dropdown-trigger, .rv-multi-select .dropdown-trigger {
-  min-height: 38px; padding: 8px 24px 8px 10px;
-  border: 1px solid var(--rv-ui-border); border-radius: 8px;
-  background: var(--rv-ui-surface-sunken); color: var(--rv-ui-text);
-}
-.rv-combobox .dropdown-trigger:focus-visible, .rv-multi-select .dropdown-trigger:focus-visible { outline: 2px solid var(--rv-ui-accent); outline-offset: 1px; }
-.rv-single-slider:focus-visible { outline: 2px solid var(--rv-ui-accent); outline-offset: 2px; }
+.rv-ui-dialog {
+  width: min(560px, calc(100vw - 32px));
+  max-height: calc(100dvh - 32px);
+}
+.rv-form-section,
+.rv-radio-group {
+  min-inline-size: 0;
+}
+
+.rv-badge--inline {
+  position: static;
+  inset: auto;
+  transform: none;
+}
 
-.rv-spinner__ring { @include loading.ring; }
-.rv-rating { display: inline-flex; align-items: center; gap: 4px; }
-.rv-rating__star { display: inline-flex; color: var(--rv-rating-color, var(--rv-ui-accent)); }
-.rv-rating label { position: relative; display: inline-flex; padding: 4px; cursor: pointer; border-radius: 4px; }
-.rv-rating label input { position: absolute; opacity: 0; width: 1px; height: 1px; }
-.rv-rating label:has(input:focus-visible) { outline: 2px solid var(--rv-ui-accent); }
-.rv-rating label:has(input:disabled) { opacity: .55; cursor: not-allowed; }
+.rv-control {
+  color-scheme: var(--rv-ui-color-scheme, normal);
+}
+.rv-combobox .dropdown-trigger,
+.rv-multi-select .dropdown-trigger {
+  @include control.action-size;
+  padding-inline-end: 24px;
+  border: 1px solid var(--rv-ui-border);
+  border-radius: 8px;
+  background: var(--rv-ui-surface-sunken);
+  color: var(--rv-ui-text);
+}
+.rv-combobox .dropdown-trigger:focus-visible,
+.rv-multi-select .dropdown-trigger:focus-visible {
+  outline: 2px solid var(--rv-ui-accent);
+  outline-offset: 1px;
+}
+.rv-single-slider:focus-visible {
+  outline: 2px solid var(--rv-ui-accent);
+  outline-offset: 2px;
+}
+
+.rv-spinner__ring {
+  @include loading.ring;
+}
+.rv-rating {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.rv-rating__star {
+  display: inline-flex;
+  color: var(--rv-rating-color, var(--rv-ui-accent));
+}
+.rv-rating label {
+  position: relative;
+  display: inline-flex;
+  padding: 4px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+.rv-rating label input {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+}
+.rv-rating label:has(input:focus-visible) {
+  outline: 2px solid var(--rv-ui-accent);
+}
+.rv-rating label:has(input:disabled) {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
 
-.rv-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+.rv-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
 
-.rv-toolbar-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-block: 5px; }
+.rv-toolbar-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 14px;
+  padding-block: 5px;
+}
 
-.rv-radio-group label:has(input:disabled) { opacity: .55; cursor: not-allowed; }
-.rv-date-range-picker { flex-wrap: wrap; }
-.rv-date-range-picker > .rv-control { flex: 1 1 170px; min-inline-size: min(170px, 100%); }
-.rv-date-range-picker > .rv-btn { flex: none; }
+.rv-radio-group label:has(input:disabled) {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.rv-date-range-picker {
+  flex-wrap: wrap;
+}
+.rv-date-range-picker > .rv-control {
+  flex: 1 1 170px;
+  min-inline-size: min(170px, 100%);
+}
+.rv-date-range-picker > .rv-btn {
+  flex: none;
+}
 
 .rv-slider-field {
   --range-color: var(--rv-slider-field-accent, var(--rv-ui-accent));
-  display: grid; grid-template-columns: minmax(90px, 42%) minmax(90px, 1fr) auto;
-  align-items: center; gap: 16px; min-width: 0; width: 100%; box-sizing: border-box; color: var(--rv-ui-text);
-  &--stacked { grid-template-columns: minmax(0, 1fr) auto; }
-  &--stacked .rv-slider-field__label { grid-column: 1 / -1; }
-  &--none, &--thumb { grid-template-columns: minmax(90px, 42%) minmax(90px, 1fr); }
-  &--stacked.rv-slider-field--none, &--stacked.rv-slider-field--thumb { grid-template-columns: minmax(0, 1fr); }
-  &.is-disabled { --range-color: var(--rv-ui-border); color: var(--rv-ui-text-muted); }
-}
-.rv-slider-field__track { position: relative; display: flex; align-items: center; min-width: 0; direction: ltr; }
+  display: grid;
+  grid-template-columns: minmax(90px, 42%) minmax(90px, 1fr) auto;
+  align-items: center;
+  gap: 16px;
+  min-width: 0;
+  width: 100%;
+  box-sizing: border-box;
+  color: var(--rv-ui-text);
+  &--stacked {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+  &--stacked .rv-slider-field__label {
+    grid-column: 1 / -1;
+  }
+  &--none,
+  &--thumb {
+    grid-template-columns: minmax(90px, 42%) minmax(90px, 1fr);
+  }
+  &--stacked.rv-slider-field--none,
+  &--stacked.rv-slider-field--thumb {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  &.is-disabled {
+    --range-color: var(--rv-ui-border);
+    color: var(--rv-ui-text-muted);
+  }
+}
+.rv-slider-field__track {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  direction: ltr;
+}
 .rv-slider-field__value {
-  position: relative; inset: auto; height: auto; min-width: 36px; padding: 4px 7px; border-radius: 6px; font-size: 12px; line-height: 1.4; box-sizing: border-box;
-  --rv-ui-badge-bg: color-mix(in srgb, var(--range-color) 65%, black); --rv-ui-badge-fg: white;
-  text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums;
-  &::before { content: ''; position: absolute; width: 10px; height: 10px; inset-inline-start: -5px; top: calc(50% - 5px); transform: rotate(45deg); background: inherit; }
+  position: relative;
+  inset: auto;
+  height: auto;
+  min-width: 36px;
+  padding: 4px 7px;
+  border-radius: 6px;
+  font-size: 12px;
+  line-height: 1.4;
+  box-sizing: border-box;
+  --rv-ui-badge-bg: color-mix(in srgb, var(--range-color) 65%, black);
+  --rv-ui-badge-fg: white;
+  text-align: center;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+  &::before {
+    content: '';
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    inset-inline-start: -5px;
+    top: calc(50% - 5px);
+    transform: rotate(45deg);
+    background: inherit;
+  }
 }
 .rv-slider-field.is-disabled .rv-slider-field__value,
-.rv-slider-field.is-disabled .rv-slider-field__thumb-value { background: var(--rv-ui-border); color: var(--rv-ui-text-muted); }
+.rv-slider-field.is-disabled .rv-slider-field__thumb-value {
+  background: var(--rv-ui-border);
+  color: var(--rv-ui-text-muted);
+}
 .rv-slider-field__ticks {
-  position: absolute; inset-inline: 10px; top: calc(50% - 2px); display: flex; justify-content: space-between; pointer-events: none;
-  i { width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, var(--range-color) 40%, var(--rv-ui-surface)); }
+  position: absolute;
+  inset-inline: 10px;
+  top: calc(50% - 2px);
+  display: flex;
+  justify-content: space-between;
+  pointer-events: none;
+  i {
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: color-mix(
+      in srgb,
+      var(--range-color) 40%,
+      var(--rv-ui-surface)
+    );
+  }
 }
 .rv-slider-field__thumb-value {
-  position: absolute; left: calc(10px + (100% - 20px) * var(--rv-slider-field-position)); transform: translateX(-50%);
-  min-width: 20px; height: 20px; border-radius: 50%; padding: 0 3px; box-sizing: border-box;
-  display: grid; place-items: center; background: color-mix(in srgb, var(--range-color) 65%, black); color: white;
-  pointer-events: none; font-size: 11px; font-variant-numeric: tabular-nums;
+  position: absolute;
+  left: calc(10px + (100% - 20px) * var(--rv-slider-field-position));
+  transform: translateX(-50%);
+  min-width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  padding: 0 3px;
+  box-sizing: border-box;
+  display: grid;
+  place-items: center;
+  background: color-mix(in srgb, var(--range-color) 65%, black);
+  color: white;
+  pointer-events: none;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
 }
 @media (max-width: 520px) {
-  .rv-slider-field { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; }
-  .rv-slider-field__label { grid-column: 1 / -1; }
-  .rv-slider-field--none, .rv-slider-field--thumb { grid-template-columns: minmax(0, 1fr); }
+  .rv-slider-field {
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 8px 14px;
+  }
+  .rv-slider-field__label {
+    grid-column: 1 / -1;
+  }
+  .rv-slider-field--none,
+  .rv-slider-field--thumb {
+    grid-template-columns: minmax(0, 1fr);
+  }
 }
 
 button.rv-rating-choice {
@@ -123,10 +426,29 @@ button.rv-rating-choice {
   background: transparent;
   box-shadow: none;
   cursor: pointer;
-  transition: background-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1)), opacity var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1));
-  .rv-rating__star { color: var(--rv-rating-color, var(--rating-progress-star-color, var(--rv-ui-accent))); }
-  .rv-svg-icon { --rv-icon-size: 24px; }
-  &:hover { background: var(--rv-ui-hover, var(--rv-ui-surface-hover)); }
-  &:focus-visible { outline: 2px solid var(--rv-ui-accent); outline-offset: 1px; }
-  &:disabled { opacity: .55; cursor: not-allowed; }
+  transition:
+    background-color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1)),
+    opacity var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
+  .rv-rating__star {
+    color: var(
+      --rv-rating-color,
+      var(--rating-progress-star-color, var(--rv-ui-accent))
+    );
+  }
+  .rv-svg-icon {
+    --rv-icon-size: 24px;
+  }
+  &:hover {
+    background: var(--rv-ui-hover, var(--rv-ui-surface-hover));
+  }
+  &:focus-visible {
+    outline: 2px solid var(--rv-ui-accent);
+    outline-offset: 1px;
+  }
+  &:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
 }

package/styles/_control.scss

@@ -1,28 +1,58 @@
 @use './motion';
+// Standalone actions and dropdowns share dimensions and typography across adapters.
+@mixin action-size {
+  box-sizing: border-box;
+  min-height: var(--rv-control-height, 32px);
+  padding: var(--rv-control-padding, 6px 12px);
+  font-family: inherit;
+  font-size: var(--rv-control-font-size, 0.875rem);
+  line-height: 1;
+}
+
 // One native field presentation, also available to legacy consumer selectors.
 @mixin field {
   appearance: none;
   box-sizing: border-box;
   width: 100%;
   min-width: 0;
-  min-height: var(--rv-control-height, 38px);
-  padding: var(--rv-control-padding, 8px 10px);
+  @include action-size;
   border: 1px solid var(--rv-control-border, var(--rv-ui-border));
   border-radius: var(--rv-control-radius, 8px);
   background-color: var(--rv-control-bg, var(--rv-ui-surface-sunken));
   color: var(--rv-control-color, inherit);
-  font: inherit;
-  line-height: 1.25;
+
   color-scheme: var(--rv-ui-color-scheme, normal);
   transition:
     border-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease),
-    background-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease),
+    background-color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, ease),
     opacity var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease);
-  &::placeholder { color: var(--rv-ui-text-muted); opacity: .8; }
-  &:hover:not(:disabled):not([readonly]) { border-color: var(--rv-ui-border-strong); }
-  &:focus { transition: none; outline: none; border-color: var(--rv-ui-accent); box-shadow: 0 0 0 3px var(--rv-ui-focus-ring); }
-  &:disabled { cursor: not-allowed; opacity: var(--rv-control-disabled-opacity, .55); }
-  &[readonly] { background-color: var(--rv-ui-surface); border-style: dashed; }
-  &[aria-invalid='true'] { border-color: var(--rv-ui-danger); }
-  &[aria-invalid='true']:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--rv-ui-danger) 20%, transparent); }
+  &::placeholder {
+    color: var(--rv-ui-text-muted);
+    opacity: 0.8;
+  }
+  &:hover:not(:disabled):not([readonly]) {
+    border-color: var(--rv-ui-border-strong);
+  }
+  &:focus {
+    transition: none;
+    outline: none;
+    border-color: var(--rv-ui-accent);
+    box-shadow: 0 0 0 3px var(--rv-ui-focus-ring);
+  }
+  &:disabled {
+    cursor: not-allowed;
+    opacity: var(--rv-control-disabled-opacity, 0.55);
+  }
+  &[readonly] {
+    background-color: var(--rv-ui-surface);
+    border-style: dashed;
+  }
+  &[aria-invalid='true'] {
+    border-color: var(--rv-ui-danger);
+  }
+  &[aria-invalid='true']:focus {
+    box-shadow: 0 0 0 3px
+      color-mix(in srgb, var(--rv-ui-danger) 20%, transparent);
+  }
 }

package/styles/_disclosure.scss

@@ -26,13 +26,21 @@ details[open] > .rv-disclosure-summary--compact::before {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .rv-disclosure-summary--compact::before { transition: none; }
+  .rv-disclosure-summary--compact::before {
+    transition: none;
+  }
 }
 
 // Keep native details state, keyboard behavior and intrinsic content sizing.
 // Browsers without these capabilities retain immediate native disclosure behavior.
-@supports (interpolate-size: allow-keywords) and (transition-behavior: allow-discrete) {
-  :where(.rv-ui details, .rv-disclosure, .rv-format-inspector-section, .rv-configurator-available-fields) {
+@supports (interpolate-size: allow-keywords) and
+  (transition-behavior: allow-discrete) {
+  :where(
+    .rv-ui details,
+    .rv-disclosure,
+    .rv-format-inspector-section,
+    .rv-configurator-available-fields
+  ) {
     interpolate-size: allow-keywords;
 
     &::details-content {
@@ -41,8 +49,10 @@ details[open] > .rv-disclosure-summary--compact::before {
       overflow: clip;
       overflow-clip-margin: 4px;
       transition:
-        block-size var(--rv-ui-motion-normal, 160ms) var(--rv-ui-motion-ease, ease-out),
-        opacity var(--rv-ui-motion-normal, 160ms) var(--rv-ui-motion-ease, ease-out),
+        block-size var(--rv-ui-motion-normal, 160ms)
+          var(--rv-ui-motion-ease, ease-out),
+        opacity var(--rv-ui-motion-normal, 160ms)
+          var(--rv-ui-motion-ease, ease-out),
         content-visibility var(--rv-ui-motion-normal, 160ms) allow-discrete;
     }
 

package/styles/_editor-counter.scss

@@ -1,13 +1,21 @@
 @use './motion';
-revo-grid, .rv-ui, :root {
+revo-grid,
+.rv-ui,
+:root {
   .revo-counter {
     --counter-button-size: 24px;
     --counter-value-size: 14px;
     --counter-spacing: 4px;
     --counter-button-bg: var(--revo-grid-background, var(--rv-ui-surface));
     --counter-button-color: var(--revo-grid-text, var(--rv-ui-text));
-    --counter-button-hover-bg: var(--revo-primary-light, var(--rv-ui-surface-hover));
-    --counter-button-border-color: var(--revo-grid-cell-border, var(--rv-ui-border));
+    --counter-button-hover-bg: var(
+      --revo-primary-light,
+      var(--rv-ui-surface-hover)
+    );
+    --counter-button-border-color: var(
+      --revo-grid-cell-border,
+      var(--rv-ui-border)
+    );
     --counter-value-color: var(--revo-grid-text, var(--rv-ui-text));
     --counter-disabled-opacity: 0.5;
 
@@ -32,8 +40,10 @@ revo-grid, .rv-ui, :root {
       line-height: 1;
       cursor: pointer;
       transition:
-        background-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease),
-        border-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease),
+        background-color var(--rv-ui-motion-fast, 120ms)
+          var(--rv-ui-motion-ease, ease),
+        border-color var(--rv-ui-motion-fast, 120ms)
+          var(--rv-ui-motion-ease, ease),
         color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease),
         opacity var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease);
       padding: 0;
@@ -65,4 +75,4 @@ revo-grid, .rv-ui, :root {
       user-select: none;
     }
   }
-}
+}