prime-ui-kit 0.9.3 → 0.10.0

package/dist/index.css

@@ -31,6 +31,7 @@
   --prime-ref-color-green-400: #4ade80;
   --prime-ref-color-green-500: #22c55e;
   --prime-ref-color-green-700: #15803d;
+  --prime-ref-color-green-800: #166534;
   --prime-ref-color-orange-100: #ffedd5;
   --prime-ref-color-orange-300: #fdba74;
   --prime-ref-color-orange-400: #fb923c;
@@ -324,6 +325,7 @@
   --prime-color-palette-yellow-text: var(--prime-ref-color-yellow-800);
   --prime-color-success-default: var(--prime-ref-color-green-700);
   --prime-color-success-fg: var(--prime-ref-color-white);
+  --prime-color-success-hover: var(--prime-ref-color-green-800);
   --prime-color-success-soft: var(--prime-ref-color-green-100);
   --prime-color-success-text: var(--prime-ref-color-green-700);
   --prime-color-text-disabled: var(--prime-ref-color-gray-400);
@@ -740,6 +742,7 @@
   --prime-color-palette-yellow-text: var(--prime-ref-color-yellow-300);
   --prime-color-success-default: var(--prime-ref-color-green-400);
   --prime-color-success-fg: var(--prime-ref-color-gray-950);
+  --prime-color-success-hover: var(--prime-ref-color-green-300);
   --prime-color-success-soft: color-mix(in srgb, var(--prime-ref-color-green-500) 16%, transparent);
   --prime-color-success-text: var(--prime-ref-color-green-300);
   --prime-color-text-disabled: var(--prime-ref-color-gray-600);
@@ -1326,6 +1329,25 @@ input::-moz-focus-inner {
     --btn-fg: var(--prime-color-text-primary);
   }
 }
+.Button_root[data-tone=success][data-variant=solid] {
+  --btn-bg: var(--prime-color-success-default);
+  --btn-bg-hover: var(--prime-color-success-hover);
+  --btn-fg: var(--prime-color-success-fg);
+}
+.Button_root[data-tone=success][data-variant=soft] {
+  --btn-bg: var(--prime-color-success-soft);
+  --btn-bg-hover: color-mix( in srgb, var(--prime-color-success-soft) 88%, var(--prime-color-success-default) );
+  --btn-fg: var(--prime-color-success-text);
+}
+.Button_root[data-tone=success][data-variant=outline] {
+  --btn-line: var(--prime-color-border-default);
+  --btn-bg-hover: var(--prime-color-success-soft);
+  --btn-fg: var(--prime-color-success-text);
+}
+.Button_root[data-tone=success][data-variant=ghost] {
+  --btn-bg-hover: var(--prime-color-success-soft);
+  --btn-fg: var(--prime-color-success-text);
+}
 .Button_root[data-tone=danger][data-variant=solid] {
   --btn-bg: var(--prime-color-danger-default);
   --btn-bg-hover: var(--prime-color-danger-hover);
@@ -1654,6 +1676,228 @@ input::-moz-focus-inner {
   height: var(--prime-icon-size);
 }
 
+/* src/icons/glyphMotion.module.css */
+.glyphMotion_root {
+  overflow: visible;
+}
+.glyphMotion_root {
+  --icon-play-length: calc(var(--prime-motion-duration-slow) + 3 * var(--prime-motion-stagger));
+}
+.glyphMotion_root[data-play] {
+  animation: glyphMotion_carrier var(--icon-play-length) linear;
+}
+@keyframes glyphMotion_carrier {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.glyphMotion_root [data-motion] {
+  --icon-dx: 0;
+  --icon-dy: 0;
+  --icon-shift: 4px;
+  --icon-angle: 26deg;
+  --icon-sign: 1;
+  --icon-scale: 1.35;
+  --icon-squeeze: 0.65;
+  --icon-turn: 1turn;
+  --icon-delay: 0;
+  transform-box: fill-box;
+  transform-origin: center;
+}
+.glyphMotion_root [data-dir=up] {
+  --icon-dy: -1;
+}
+.glyphMotion_root [data-dir=down] {
+  --icon-dy: 1;
+}
+.glyphMotion_root [data-dir=left] {
+  --icon-dx: -1;
+  --icon-sign: -1;
+}
+.glyphMotion_root [data-dir=right] {
+  --icon-dx: 1;
+}
+.glyphMotion_root [data-dir=up-right] {
+  --icon-dx: 0.7;
+  --icon-dy: -0.7;
+}
+.glyphMotion_root [data-dir=up-left] {
+  --icon-dx: -0.7;
+  --icon-dy: -0.7;
+}
+.glyphMotion_root [data-dir=down-right] {
+  --icon-dx: 0.7;
+  --icon-dy: 0.7;
+}
+.glyphMotion_root [data-dir=down-left] {
+  --icon-dx: -0.7;
+  --icon-dy: 0.7;
+}
+.glyphMotion_root [data-turn=quarter] {
+  --icon-turn: 0.25turn;
+}
+.glyphMotion_root [data-turn=half] {
+  --icon-turn: 0.5turn;
+}
+.glyphMotion_root [data-origin=top] {
+  transform-origin: top;
+}
+.glyphMotion_root [data-origin=bottom] {
+  transform-origin: bottom;
+}
+.glyphMotion_root [data-origin=left] {
+  transform-origin: left;
+}
+.glyphMotion_root [data-origin=right] {
+  transform-origin: right;
+}
+.glyphMotion_root [data-origin=top-left] {
+  transform-origin: top left;
+}
+.glyphMotion_root [data-origin=top-right] {
+  transform-origin: top right;
+}
+.glyphMotion_root [data-origin=bottom-left] {
+  transform-origin: bottom left;
+}
+.glyphMotion_root [data-origin=bottom-right] {
+  transform-origin: bottom right;
+}
+.glyphMotion_root [data-delay="1"] {
+  --icon-delay: 1;
+}
+.glyphMotion_root [data-delay="2"] {
+  --icon-delay: 2;
+}
+.glyphMotion_root [data-delay="3"] {
+  --icon-delay: 3;
+}
+.glyphMotion_root[data-play] [data-motion] {
+  animation-duration: var(--prime-motion-duration-base);
+  animation-timing-function: var(--prime-motion-easing-standard);
+  animation-delay: calc(var(--icon-delay) * var(--prime-motion-stagger));
+  animation-fill-mode: both;
+}
+.glyphMotion_root[data-play] [data-motion=nudge] {
+  animation-name: glyphMotion_nudge;
+}
+@keyframes glyphMotion_nudge {
+  50% {
+    translate: calc(var(--icon-dx) * var(--icon-shift)) calc(var(--icon-dy) * var(--icon-shift));
+  }
+}
+.glyphMotion_root[data-play] [data-motion=shake] {
+  animation-name: glyphMotion_shake;
+}
+@keyframes glyphMotion_shake {
+  20%, 60% {
+    translate: calc(var(--icon-shift) / 2) 0;
+  }
+  40%, 80% {
+    translate: calc(var(--icon-shift) / -2) 0;
+  }
+}
+.glyphMotion_root[data-play] [data-motion=tilt] {
+  animation-name: glyphMotion_tilt;
+}
+@keyframes glyphMotion_tilt {
+  50% {
+    rotate: calc(var(--icon-sign) * var(--icon-angle));
+  }
+}
+.glyphMotion_root[data-play] [data-motion=swing] {
+  animation-name: glyphMotion_swing;
+  animation-duration: var(--prime-motion-duration-slow);
+}
+@keyframes glyphMotion_swing {
+  20% {
+    rotate: var(--icon-angle);
+  }
+  45% {
+    rotate: calc(var(--icon-angle) * -0.7);
+  }
+  70% {
+    rotate: calc(var(--icon-angle) * 0.35);
+  }
+  90% {
+    rotate: calc(var(--icon-angle) * -0.1);
+  }
+}
+.glyphMotion_root[data-play] [data-motion=spin] {
+  animation-name: glyphMotion_spin;
+  animation-duration: var(--prime-motion-duration-slow);
+}
+@keyframes glyphMotion_spin {
+  to {
+    rotate: var(--icon-turn);
+  }
+}
+.glyphMotion_root[data-play] [data-motion=pop] {
+  animation-name: glyphMotion_pop;
+}
+@keyframes glyphMotion_pop {
+  45% {
+    scale: var(--icon-scale);
+  }
+}
+.glyphMotion_root[data-play] [data-motion=squeeze] {
+  animation-name: glyphMotion_squeeze;
+}
+@keyframes glyphMotion_squeeze {
+  45% {
+    scale: var(--icon-squeeze);
+  }
+}
+.glyphMotion_root[data-play] [data-motion=blink] {
+  animation-name: glyphMotion_blink;
+}
+@keyframes glyphMotion_blink {
+  45%, 55% {
+    scale: 1 0.1;
+  }
+}
+.glyphMotion_root[data-play] [data-motion=grow] {
+  animation-name: glyphMotion_grow-y;
+}
+.glyphMotion_root[data-play] [data-motion=grow][data-axis=x] {
+  animation-name: glyphMotion_grow-x;
+}
+@keyframes glyphMotion_grow-y {
+  40% {
+    scale: 1 0.45;
+  }
+}
+@keyframes glyphMotion_grow-x {
+  40% {
+    scale: 0.45 1;
+  }
+}
+.glyphMotion_root[data-play] [data-motion=draw] {
+  animation-name: glyphMotion_draw;
+  animation-timing-function: var(--prime-motion-easing-enter);
+}
+@keyframes glyphMotion_draw {
+  from {
+    stroke-dasharray: 1;
+    stroke-dashoffset: 1;
+  }
+  to {
+    stroke-dasharray: 1;
+    stroke-dashoffset: 0;
+  }
+}
+.glyphMotion_root[data-icon-motion=generic] > * {
+  transform-box: view-box;
+  transform-origin: center;
+}
+.glyphMotion_root[data-play][data-icon-motion=generic] > * {
+  animation: glyphMotion_pop var(--prime-motion-duration-base) var(--prime-motion-easing-standard);
+  --icon-scale: 1.1;
+}
+
 /* src/icons/Icon.module.css */
 .Icon_root {
   display: inline-flex;
@@ -5154,138 +5398,6 @@ button.LinkButton_root {
   height: var(--prime-hint-icon);
 }
 
-/* src/internal/ChoiceField.module.css */
-.ChoiceField_tier {
-  --prime-choice-size: var(--prime-control-m-choice);
-  --prime-choice-gap: var(--prime-control-m-gap);
-  --prime-choice-text: var(--prime-control-m-text-size);
-  --prime-choice-line-height: var(--prime-control-m-line-height);
-}
-.ChoiceField_tier[data-size=xs] {
-  --prime-choice-size: var(--prime-control-xs-choice);
-  --prime-choice-gap: var(--prime-control-xs-gap);
-  --prime-choice-text: var(--prime-control-xs-text-size);
-  --prime-choice-line-height: var(--prime-control-xs-line-height);
-}
-.ChoiceField_tier[data-size=s] {
-  --prime-choice-size: var(--prime-control-s-choice);
-  --prime-choice-gap: var(--prime-control-s-gap);
-  --prime-choice-text: var(--prime-control-s-text-size);
-  --prime-choice-line-height: var(--prime-control-s-line-height);
-}
-.ChoiceField_tier[data-size=l] {
-  --prime-choice-size: var(--prime-control-l-choice);
-  --prime-choice-gap: var(--prime-control-l-gap);
-  --prime-choice-text: var(--prime-control-l-text-size);
-  --prime-choice-line-height: var(--prime-control-l-line-height);
-}
-.ChoiceField_tier[data-size=xl] {
-  --prime-choice-size: var(--prime-control-xl-choice);
-  --prime-choice-gap: var(--prime-control-xl-gap);
-  --prime-choice-text: var(--prime-control-xl-text-size);
-  --prime-choice-line-height: var(--prime-control-xl-line-height);
-}
-.ChoiceField_field {
-  box-sizing: border-box;
-  width: fit-content;
-  max-width: 100%;
-  min-width: 0;
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  column-gap: var(--prime-choice-gap);
-  row-gap: 0;
-  align-content: start;
-}
-.ChoiceField_row {
-  grid-column: 1 / -1;
-  display: grid;
-  grid-template-columns: subgrid;
-  column-gap: var(--prime-choice-gap);
-  align-items: start;
-  width: 100%;
-  min-width: 0;
-  font-family: var(--prime-font-family-sans);
-  font-size: var(--prime-choice-text);
-  line-height: var(--prime-choice-line-height);
-  font-weight: var(--prime-font-weight-regular);
-  color: var(--prime-color-text-primary);
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-}
-.ChoiceField_field[data-readonly=true] .ChoiceField_row {
-  cursor: default;
-}
-.ChoiceField_field[data-disabled=true] .ChoiceField_row {
-  color: var(--prime-color-text-disabled);
-  cursor: not-allowed;
-}
-.ChoiceField_controlCell {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: max(var(--prime-choice-control-height, var(--prime-choice-size)), var(--prime-choice-line-height));
-}
-.ChoiceField_input {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  opacity: 0;
-  pointer-events: none;
-}
-.ChoiceField_text {
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-.ChoiceField_support {
-  grid-column: 2;
-  min-width: 0;
-}
-.ChoiceField_visual {
-  background: var(--prime-color-fill-strong);
-  box-shadow: inset 0 0 0 var(--prime-border-width) var(--prime-color-border-control);
-  transition:
-    background-color var(--choice-bg-duration, var(--prime-motion-duration-fast)) var(--prime-motion-easing-standard),
-    box-shadow var(--prime-motion-duration-fast) var(--prime-motion-easing-standard),
-    transform var(--prime-motion-duration-fast) var(--prime-motion-easing-standard);
-}
-@media (hover: hover) {
-  .ChoiceField_field:not([data-disabled=true], [data-readonly=true]) .ChoiceField_row:hover .ChoiceField_visual {
-    background: var(--prime-color-fill-strong-hover);
-  }
-}
-.ChoiceField_field:not([data-disabled=true], [data-readonly=true]) .ChoiceField_row:active .ChoiceField_visual {
-  transform: scale(var(--prime-motion-press-scale-compact));
-}
-:is(.ChoiceField_field:is([data-state=checked], [data-state=indeterminate]) .ChoiceField_visual, .ChoiceField_visual:is([data-state=checked], [data-state=indeterminate])) {
-  background: var(--prime-color-accent-default);
-}
-@media (hover: hover) {
-  .ChoiceField_field:is([data-state=checked], [data-state=indeterminate]):not([data-disabled=true], [data-readonly=true]) .ChoiceField_row:hover .ChoiceField_visual {
-    background: var(--prime-color-accent-hover);
-  }
-}
-.ChoiceField_input:focus-visible + .ChoiceField_visual {
-  outline: var(--prime-focus-width) solid var(--prime-color-focus-ring);
-  outline-offset: var(--prime-focus-offset);
-}
-.ChoiceField_field[data-invalid=true][data-state=unchecked] .ChoiceField_visual {
-  box-shadow: inset 0 0 0 var(--prime-border-width) var(--prime-color-danger-border);
-}
-.ChoiceField_field[data-invalid=true] .ChoiceField_input:focus-visible + .ChoiceField_visual {
-  outline-color: var(--prime-color-danger-border);
-}
-:is(.ChoiceField_field[data-disabled=true] .ChoiceField_visual, .ChoiceField_visual[data-disabled=true]) {
-  background: var(--prime-color-fill-muted);
-  box-shadow: none;
-  transform: none;
-}
-:is(.ChoiceField_field[data-disabled=true]:is([data-state=checked], [data-state=indeterminate]) .ChoiceField_visual, .ChoiceField_visual[data-disabled=true]:is([data-state=checked], [data-state=indeterminate])) {
-  background: var(--choice-bg-disabled-checked, var(--prime-color-fill-muted));
-}
-
 /* src/components/label/Label.module.css */
 .Label_root {
   --prime-label-size: var(--prime-control-m-label-size);
@@ -5386,6 +5498,48 @@ button.LinkButton_root {
 .FieldFrame_root:has(> .FieldFrame_body :is(input, textarea, select):disabled) :is(.FieldFrame_label, .FieldFrame_label *, .FieldFrame_supportText:not([data-invalid=true])) {
   color: var(--prime-color-text-disabled);
 }
+.FieldFrame_root[data-shake] > .FieldFrame_body > :not(.FieldFrame_support),
+.FieldFrame_shakeSelf[data-shake] {
+  animation: FieldFrame_field-shake-odd var(--prime-motion-duration-base) var(--prime-motion-easing-standard);
+}
+.FieldFrame_root[data-shake=even] > .FieldFrame_body > :not(.FieldFrame_support),
+.FieldFrame_shakeSelf[data-shake=even] {
+  animation-name: FieldFrame_field-shake-even;
+}
+@keyframes FieldFrame_field-shake-odd {
+  12% {
+    translate: calc(-1 * var(--prime-space-2)) 0;
+  }
+  32% {
+    translate: var(--prime-space-2) 0;
+  }
+  52% {
+    translate: calc(-1 * var(--prime-space-1)) 0;
+  }
+  72% {
+    translate: var(--prime-space-1) 0;
+  }
+  88% {
+    translate: calc(-0.5 * var(--prime-space-1)) 0;
+  }
+}
+@keyframes FieldFrame_field-shake-even {
+  12% {
+    translate: calc(-1 * var(--prime-space-2)) 0;
+  }
+  32% {
+    translate: var(--prime-space-2) 0;
+  }
+  52% {
+    translate: calc(-1 * var(--prime-space-1)) 0;
+  }
+  72% {
+    translate: var(--prime-space-1) 0;
+  }
+  88% {
+    translate: calc(-0.5 * var(--prime-space-1)) 0;
+  }
+}
 .FieldFrame_body {
   display: flex;
   flex-direction: column;
@@ -5440,6 +5594,147 @@ button.LinkButton_root {
 .FieldFrame_counter[data-invalid=true] {
   color: var(--prime-color-danger-text);
 }
+.FieldFrame_leaving[data-state=closed] {
+  animation: FieldFrame_field-error-leave var(--prime-motion-duration-fast) var(--prime-motion-easing-exit) both;
+}
+@keyframes FieldFrame_field-error-leave {
+  to {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--prime-space-1)));
+  }
+}
+
+/* src/internal/ChoiceField.module.css */
+.ChoiceField_tier {
+  --prime-choice-size: var(--prime-control-m-choice);
+  --prime-choice-gap: var(--prime-control-m-gap);
+  --prime-choice-text: var(--prime-control-m-text-size);
+  --prime-choice-line-height: var(--prime-control-m-line-height);
+}
+.ChoiceField_tier[data-size=xs] {
+  --prime-choice-size: var(--prime-control-xs-choice);
+  --prime-choice-gap: var(--prime-control-xs-gap);
+  --prime-choice-text: var(--prime-control-xs-text-size);
+  --prime-choice-line-height: var(--prime-control-xs-line-height);
+}
+.ChoiceField_tier[data-size=s] {
+  --prime-choice-size: var(--prime-control-s-choice);
+  --prime-choice-gap: var(--prime-control-s-gap);
+  --prime-choice-text: var(--prime-control-s-text-size);
+  --prime-choice-line-height: var(--prime-control-s-line-height);
+}
+.ChoiceField_tier[data-size=l] {
+  --prime-choice-size: var(--prime-control-l-choice);
+  --prime-choice-gap: var(--prime-control-l-gap);
+  --prime-choice-text: var(--prime-control-l-text-size);
+  --prime-choice-line-height: var(--prime-control-l-line-height);
+}
+.ChoiceField_tier[data-size=xl] {
+  --prime-choice-size: var(--prime-control-xl-choice);
+  --prime-choice-gap: var(--prime-control-xl-gap);
+  --prime-choice-text: var(--prime-control-xl-text-size);
+  --prime-choice-line-height: var(--prime-control-xl-line-height);
+}
+.ChoiceField_field {
+  box-sizing: border-box;
+  width: fit-content;
+  max-width: 100%;
+  min-width: 0;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  column-gap: var(--prime-choice-gap);
+  row-gap: 0;
+  align-content: start;
+}
+.ChoiceField_row {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: subgrid;
+  column-gap: var(--prime-choice-gap);
+  align-items: start;
+  width: 100%;
+  min-width: 0;
+  font-family: var(--prime-font-family-sans);
+  font-size: var(--prime-choice-text);
+  line-height: var(--prime-choice-line-height);
+  font-weight: var(--prime-font-weight-regular);
+  color: var(--prime-color-text-primary);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+.ChoiceField_field[data-readonly=true] .ChoiceField_row {
+  cursor: default;
+}
+.ChoiceField_field[data-disabled=true] .ChoiceField_row {
+  color: var(--prime-color-text-disabled);
+  cursor: not-allowed;
+}
+.ChoiceField_controlCell {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: max(var(--prime-choice-control-height, var(--prime-choice-size)), var(--prime-choice-line-height));
+}
+.ChoiceField_input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+.ChoiceField_text {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.ChoiceField_support {
+  grid-column: 2;
+  min-width: 0;
+}
+.ChoiceField_visual {
+  background: var(--prime-color-fill-strong);
+  box-shadow: inset 0 0 0 var(--prime-border-width) var(--prime-color-border-control);
+  transition:
+    background-color var(--choice-bg-duration, var(--prime-motion-duration-fast)) var(--prime-motion-easing-standard),
+    box-shadow var(--prime-motion-duration-fast) var(--prime-motion-easing-standard),
+    transform var(--prime-motion-duration-fast) var(--prime-motion-easing-standard);
+}
+@media (hover: hover) {
+  .ChoiceField_field:not([data-disabled=true], [data-readonly=true]) .ChoiceField_row:hover .ChoiceField_visual {
+    background: var(--prime-color-fill-strong-hover);
+  }
+}
+.ChoiceField_field:not([data-disabled=true], [data-readonly=true]) .ChoiceField_row:active .ChoiceField_visual {
+  transform: scale(var(--prime-motion-press-scale-compact));
+}
+:is(.ChoiceField_field:is([data-state=checked], [data-state=indeterminate]) .ChoiceField_visual, .ChoiceField_visual:is([data-state=checked], [data-state=indeterminate])) {
+  background: var(--prime-color-accent-default);
+}
+@media (hover: hover) {
+  .ChoiceField_field:is([data-state=checked], [data-state=indeterminate]):not([data-disabled=true], [data-readonly=true]) .ChoiceField_row:hover .ChoiceField_visual {
+    background: var(--prime-color-accent-hover);
+  }
+}
+.ChoiceField_input:focus-visible + .ChoiceField_visual {
+  outline: var(--prime-focus-width) solid var(--prime-color-focus-ring);
+  outline-offset: var(--prime-focus-offset);
+}
+.ChoiceField_field[data-invalid=true][data-state=unchecked] .ChoiceField_visual {
+  box-shadow: inset 0 0 0 var(--prime-border-width) var(--prime-color-danger-border);
+}
+.ChoiceField_field[data-invalid=true] .ChoiceField_input:focus-visible + .ChoiceField_visual {
+  outline-color: var(--prime-color-danger-border);
+}
+:is(.ChoiceField_field[data-disabled=true] .ChoiceField_visual, .ChoiceField_visual[data-disabled=true]) {
+  background: var(--prime-color-fill-muted);
+  box-shadow: none;
+  transform: none;
+}
+:is(.ChoiceField_field[data-disabled=true]:is([data-state=checked], [data-state=indeterminate]) .ChoiceField_visual, .ChoiceField_visual[data-disabled=true]:is([data-state=checked], [data-state=indeterminate])) {
+  background: var(--choice-bg-disabled-checked, var(--prime-color-fill-muted));
+}
 
 /* src/components/checkbox/Checkbox.module.css */
 .Checkbox_root,

package/dist/index.js

@@ -62,13 +62,12 @@ import {
   suspendTransitions,
   useNotifications,
   useSidebar
-} from "./chunks/chunk-OAE4IQX2.js";
+} from "./chunks/chunk-K4FACFQ2.js";
 import {
   Button,
   COLOR_PRESETS,
   Checkbox,
   ColorSwatches,
-  ControlSizeProvider,
   Divider,
   EmptyPage,
   Hint,
@@ -88,9 +87,12 @@ import {
   stepDown,
   textTones,
   tones,
-  useOptionalControlSize,
   variants
-} from "./chunks/chunk-6JTZOA5I.js";
+} from "./chunks/chunk-4TRNUP45.js";
+import {
+  ControlSizeProvider,
+  useOptionalControlSize
+} from "./chunks/chunk-GFKDZFQR.js";
 export {
   Accordion,
   AppHeader,

package/dist/internal/ChoiceField.d.ts

@@ -1,5 +1,5 @@
 import type * as React from "react";
-import type { FieldIds } from "@/internal/FieldFrame";
+import { type FieldIds } from "@/internal/FieldFrame";
 import type { ControlSize, DataState } from "@/internal/states";
 /** Class of the visually hidden native input that sits on top of the visual control. */
 export declare const choiceInputClass: string;

package/dist/internal/FieldFrame.d.ts

@@ -48,6 +48,23 @@ export declare function useFieldFrame(explicitId: string | undefined, { label, h
     error?: React.ReactNode;
     invalid?: boolean;
 }, ariaDescribedBy?: string): FieldIds;
+/**
+ * `data-shake` of a field root: the control shakes once when the field turns invalid or its error
+ * message changes (foundation §7, rule 14) — never for an error it mounts with. The value
+ * alternates between `odd` and `even` so a new error restarts the keyframes.
+ */
+export declare function useErrorShake(invalid: boolean, error: React.ReactNode): "odd" | "even" | undefined;
+/**
+ * The error that has just been fixed, kept on screen while it fades out (`fast`, `exit`) so the
+ * message leaves as smoothly as it arrived; the hint takes the slot after it. `null` when nothing
+ * is leaving. Reduced motion drops it at once.
+ */
+export declare function useLeavingError(showError: boolean, error: React.ReactNode): {
+    node: React.ReactNode;
+    onExitEnd: (event: React.SyntheticEvent<Element>) => void;
+} | null;
+/** Class of the leaving error message (`useLeavingError`), for frames that render their own row. */
+export declare const leavingErrorClass: string;
 type FieldFrameRenderProps = Omit<FieldFrameProps, "focusRing"> & {
     size: ControlSize;
     ids: FieldIds;

package/dist/tokens/primitives.d.ts

@@ -68,6 +68,7 @@ export declare const primitiveTokens: {
             readonly 400: "#4ade80";
             readonly 500: "#22c55e";
             readonly 700: "#15803d";
+            readonly 800: "#166534";
         };
         readonly teal: {
             readonly 100: "#ccfbf1";

package/dist/tokens/semantic.d.ts

@@ -72,6 +72,7 @@ export declare const semanticTokens: {
         };
         readonly success: {
             readonly default: "{color.green.700}";
+            readonly hover: "{color.green.800}";
             readonly fg: "{color.white}";
             readonly soft: "{color.green.100}";
             readonly text: "{color.green.700}";

package/dist/tokens/themes/dark.d.ts

@@ -49,6 +49,7 @@ export declare const darkThemeOverrides: {
         };
         readonly success: {
             readonly default: "{color.green.400}";
+            readonly hover: "{color.green.300}";
             readonly fg: "{color.gray.950}";
             readonly soft: "color-mix(in srgb, var(--prime-ref-color-green-500) 16%, transparent)";
             readonly text: "{color.green.300}";