@mcp-b/react-components 0.17.0 → 0.19.0

package/dist/styles/think-thread-picker.css

@@ -3,7 +3,7 @@
   block-size: 100%;
   min-block-size: 0;
   display: grid;
-  grid-template-rows: auto minmax(0, 1fr) auto;
+  grid-template-rows: auto auto minmax(0, 1fr) auto;
   overflow: hidden;
   border-inline-end: 0;
   background: var(--sigvelo-color-surface);
@@ -11,13 +11,16 @@
 }
 
 .think-thread-picker__header {
-  min-block-size: 2.75rem;
+  min-block-size: var(--sigvelo-density-compact-control-height);
   min-inline-size: 0;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding-block: 0.5rem;
-  padding-inline: calc(0.875rem + env(safe-area-inset-left, 0px)) var(--sigvelo-spacing-2-5);
+  gap: var(--sigvelo-density-compact-control-gap);
+  padding-block: var(--sigvelo-spacing-1);
+  padding-inline: calc(
+      var(--sigvelo-density-compact-control-padding-inline) + env(safe-area-inset-left, 0px)
+    )
+    var(--sigvelo-density-compact-control-padding-inline);
 }
 
 .think-thread-picker__title {
@@ -26,20 +29,27 @@
   flex: 1 1 auto;
   overflow: hidden;
   color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-compact);
+  font-size: var(--sigvelo-density-compact-control-font-size);
   font-weight: var(--sigvelo-font-weight-semibold);
   line-height: var(--sigvelo-leading-tight);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.think-thread-picker__search {
+  --sigvelo-recipe-control-height: var(--sigvelo-density-compact-control-height);
+  --sigvelo-recipe-control-radius: var(--sigvelo-radius-sm);
+
+  padding: 0 var(--sigvelo-spacing-2) var(--sigvelo-spacing-2);
+}
+
 .think-thread-status-indicators {
   min-inline-size: 0;
   display: inline-flex;
   align-items: center;
-  gap: var(--sigvelo-spacing-1);
+  gap: var(--sigvelo-density-compact-control-gap);
   color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-xs);
+  font-size: var(--sigvelo-density-compact-control-font-size);
   font-variant-numeric: tabular-nums;
   font-weight: var(--sigvelo-font-weight-normal);
   line-height: 1;
@@ -53,8 +63,8 @@
 }
 
 .think-thread-status-indicators__item svg {
-  inline-size: 0.75rem;
-  block-size: 0.75rem;
+  inline-size: var(--sigvelo-density-compact-control-icon-size);
+  block-size: var(--sigvelo-density-compact-control-icon-size);
 }
 
 .think-thread-status-indicators__item[data-status="running"] {
@@ -121,45 +131,136 @@
   list-style: none;
 }
 
+.think-thread-picker__item {
+  min-inline-size: 0;
+  display: grid;
+}
+
 .think-thread-picker__thread {
+  grid-area: 1 / 1;
   inline-size: 100%;
   min-inline-size: 0;
-  min-block-size: 2rem;
+  min-block-size: var(--sigvelo-density-compact-control-height);
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
-  padding: 0.3125rem 0.5rem;
+  padding-block: 0;
+  padding-inline: var(--sigvelo-density-compact-control-padding-inline);
   align-items: center;
   justify-content: flex-start;
-  column-gap: 0.5rem;
-  border-radius: var(--sigvelo-radius-sm);
+  column-gap: var(--sigvelo-spacing-1);
+  border-radius: var(--sigvelo-radius-md);
   color: var(--sigvelo-color-text);
   font-weight: var(--sigvelo-font-weight-normal);
   text-align: start;
 }
 
-.think-thread-picker__thread[data-selected="true"] {
+.think-thread-picker__item:has(.think-thread-picker__delete) .think-thread-picker__thread {
+  grid-template-columns:
+    minmax(0, 1fr)
+    minmax(var(--sigvelo-density-compact-control-height), max-content);
+}
+
+.think-thread-picker__thread[aria-current="page"] {
   background: color-mix(in oklab, var(--sigvelo-color-neutral-bg-subtle), transparent 18%);
   color: var(--sigvelo-color-text);
   font-weight: var(--sigvelo-font-weight-semibold);
 }
 
-.think-thread-picker__thread[data-selected="true"]:hover:not([data-disabled]) {
+.think-thread-picker__thread[aria-current="page"]:hover:not([data-disabled]),
+.think-thread-picker__item:hover
+  .think-thread-picker__thread[aria-current="page"]:not([data-disabled]) {
   background: color-mix(in oklab, var(--sigvelo-color-neutral-bg-subtle), transparent 18%);
 }
 
+.think-thread-picker__item:hover
+  .think-thread-picker__thread:not([aria-current="page"], [data-disabled]) {
+  background-color: color-mix(in oklab, transparent, var(--sigvelo-color-text) 5%);
+}
+
 .think-thread-picker__thread-title {
   min-inline-size: 0;
   display: block;
   overflow: hidden;
-  font-size: var(--sigvelo-text-compact);
-  line-height: var(--sigvelo-leading-snug);
+  font-size: var(--sigvelo-density-compact-control-font-size);
+  line-height: var(--sigvelo-leading-tight);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.think-thread-picker__delete {
+  grid-area: 1 / 1;
+  align-self: center;
+  justify-self: end;
+  z-index: 1;
+  margin-inline-end: var(--sigvelo-density-compact-control-padding-inline);
+  color: var(--sigvelo-color-text-muted);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
+}
+
+.think-thread-picker__thread-time,
+.think-thread-picker__thread-status {
+  justify-self: end;
+  transition: opacity var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
+}
+
+.think-thread-picker__item:has(.think-thread-picker__delete):focus-within
+  :is(.think-thread-picker__thread-time, .think-thread-picker__thread-status) {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.think-thread-picker__item:has(.think-thread-picker__delete):focus-within
+  .think-thread-picker__delete {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .think-thread-picker__item:has(.think-thread-picker__delete):hover
+    :is(.think-thread-picker__thread-time, .think-thread-picker__thread-status) {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .think-thread-picker__item:has(.think-thread-picker__delete):hover .think-thread-picker__delete {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+@media (any-pointer: coarse) {
+  .think-thread-picker__item:has(.think-thread-picker__delete)
+    :is(.think-thread-picker__thread-time, .think-thread-picker__thread-status) {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .think-thread-picker__delete {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+.think-thread-picker__delete-error {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--sigvelo-spacing-2);
+  margin: calc(-1 * var(--sigvelo-spacing-2)) 0 var(--sigvelo-spacing-4);
+  color: var(--sigvelo-color-danger-text);
+  font-size: var(--sigvelo-text-compact);
+  line-height: var(--sigvelo-leading-normal);
+}
+
+.think-thread-picker__delete-error svg {
+  flex: 0 0 auto;
+  margin-block-start: 0.125rem;
+}
+
 .think-thread-picker__thread-time {
   color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-xs);
+  font-size: var(--sigvelo-density-compact-control-font-size);
   line-height: var(--sigvelo-leading-tight);
 }
 
@@ -177,31 +278,37 @@
   block-size: var(--sigvelo-spacing-3);
 }
 
-.think-thread-picker__thread[data-status="pending"] .think-thread-picker__thread-status,
-.think-thread-picker__thread[data-status="running"] .think-thread-picker__thread-status,
-.think-thread-picker__thread[data-status="starting"] .think-thread-picker__thread-status,
-.think-thread-picker__thread[data-status="streaming"] .think-thread-picker__thread-status,
-.think-thread-picker__thread[data-status="submitted"] .think-thread-picker__thread-status,
-.think-thread-picker__thread[data-status="recovering"] .think-thread-picker__thread-status {
+.think-thread-picker__thread[data-thread-status="pending"] .think-thread-picker__thread-status,
+.think-thread-picker__thread[data-thread-status="running"] .think-thread-picker__thread-status,
+.think-thread-picker__thread[data-thread-status="starting"] .think-thread-picker__thread-status,
+.think-thread-picker__thread[data-thread-status="streaming"] .think-thread-picker__thread-status,
+.think-thread-picker__thread[data-thread-status="submitted"] .think-thread-picker__thread-status,
+.think-thread-picker__thread[data-thread-status="recovering"] .think-thread-picker__thread-status {
   color: var(--sigvelo-color-primary-text);
 }
 
-.think-thread-picker__thread[data-status="pending"] .think-thread-picker__thread-status svg,
-.think-thread-picker__thread[data-status="running"] .think-thread-picker__thread-status svg,
-.think-thread-picker__thread[data-status="starting"] .think-thread-picker__thread-status svg,
-.think-thread-picker__thread[data-status="streaming"] .think-thread-picker__thread-status svg,
-.think-thread-picker__thread[data-status="submitted"] .think-thread-picker__thread-status svg,
-.think-thread-picker__thread[data-status="recovering"] .think-thread-picker__thread-status svg {
+.think-thread-picker__thread[data-thread-status="pending"] .think-thread-picker__thread-status svg,
+.think-thread-picker__thread[data-thread-status="running"] .think-thread-picker__thread-status svg,
+.think-thread-picker__thread[data-thread-status="starting"] .think-thread-picker__thread-status svg,
+.think-thread-picker__thread[data-thread-status="streaming"]
+  .think-thread-picker__thread-status
+  svg,
+.think-thread-picker__thread[data-thread-status="submitted"]
+  .think-thread-picker__thread-status
+  svg,
+.think-thread-picker__thread[data-thread-status="recovering"]
+  .think-thread-picker__thread-status
+  svg {
   animation: think-thread-picker-spin 900ms linear infinite;
 }
 
-.think-thread-picker__thread[data-status="error"] .think-thread-picker__thread-status {
+.think-thread-picker__thread[data-thread-status="error"] .think-thread-picker__thread-status {
   color: var(--sigvelo-color-danger-text);
 }
 
-.think-thread-picker__thread[data-status="aborted"] .think-thread-picker__thread-status,
-.think-thread-picker__thread[data-status="interrupted"] .think-thread-picker__thread-status,
-.think-thread-picker__thread[data-status="skipped"] .think-thread-picker__thread-status {
+.think-thread-picker__thread[data-thread-status="aborted"] .think-thread-picker__thread-status,
+.think-thread-picker__thread[data-thread-status="interrupted"] .think-thread-picker__thread-status,
+.think-thread-picker__thread[data-thread-status="skipped"] .think-thread-picker__thread-status {
   color: var(--sigvelo-color-warning-text);
 }
 
@@ -214,18 +321,18 @@
 
 .think-thread-picker__footer {
   display: flex;
-  justify-content: center;
-  padding-block: var(--sigvelo-spacing-2-5)
-    calc(var(--sigvelo-spacing-3) + env(safe-area-inset-bottom, 0px));
-  padding-inline: calc(var(--sigvelo-spacing-3) + env(safe-area-inset-left, 0px))
-    var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-spacing-0-5) var(--sigvelo-spacing-1)
+    calc(var(--sigvelo-spacing-0-5) + env(safe-area-inset-bottom, 0px));
+  border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
 }
 
 .think-thread-picker__create {
-  inline-size: auto;
-  max-inline-size: 100%;
-  border-radius: 999rem;
-  box-shadow: var(--sigvelo-shadow-xs);
+  inline-size: 100%;
+  justify-content: flex-start;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
 }
 
 .think-thread-picker__create svg {
@@ -245,22 +352,57 @@
     grid-template-rows: auto auto auto;
   }
 
+  .think-thread-picker__header {
+    display: none;
+  }
+
+  .think-thread-picker__search {
+    --sigvelo-recipe-control-height: var(--sigvelo-density-compact-control-height);
+    --sigvelo-recipe-control-font-size: var(--sigvelo-density-compact-control-font-size);
+    --sigvelo-recipe-control-icon-size: var(--sigvelo-density-compact-control-icon-size);
+
+    padding: 0 var(--sigvelo-spacing-1);
+    border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+      var(--sigvelo-color-neutral-border-subtle);
+  }
+
+  .think-thread-picker__search .field__control {
+    border-color: transparent;
+    background: transparent;
+  }
+
   .think-thread-picker__nav,
   .think-thread-picker__scroll,
   .think-thread-picker__viewport {
     block-size: auto;
-    max-block-size: 20rem;
+    max-block-size: min(16rem, 42dvh);
+  }
+
+  .think-thread-picker__viewport {
+    padding: var(--sigvelo-spacing-1);
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
   .think-thread-status-indicators__item[data-status="running"] svg,
-  .think-thread-picker__thread[data-status="pending"] .think-thread-picker__thread-status svg,
-  .think-thread-picker__thread[data-status="running"] .think-thread-picker__thread-status svg,
-  .think-thread-picker__thread[data-status="starting"] .think-thread-picker__thread-status svg,
-  .think-thread-picker__thread[data-status="streaming"] .think-thread-picker__thread-status svg,
-  .think-thread-picker__thread[data-status="submitted"] .think-thread-picker__thread-status svg,
-  .think-thread-picker__thread[data-status="recovering"] .think-thread-picker__thread-status svg {
+  .think-thread-picker__thread[data-thread-status="pending"]
+    .think-thread-picker__thread-status
+    svg,
+  .think-thread-picker__thread[data-thread-status="running"]
+    .think-thread-picker__thread-status
+    svg,
+  .think-thread-picker__thread[data-thread-status="starting"]
+    .think-thread-picker__thread-status
+    svg,
+  .think-thread-picker__thread[data-thread-status="streaming"]
+    .think-thread-picker__thread-status
+    svg,
+  .think-thread-picker__thread[data-thread-status="submitted"]
+    .think-thread-picker__thread-status
+    svg,
+  .think-thread-picker__thread[data-thread-status="recovering"]
+    .think-thread-picker__thread-status
+    svg {
     animation: none;
   }
 }

package/dist/styles/toast.css

@@ -1,54 +1,63 @@
 .toast__viewport {
   position: fixed;
-  inset-block-end: 1rem;
-  inset-inline-end: 1rem;
+  inset-block-end: var(--sigvelo-spacing-4);
+  inset-inline-end: var(--sigvelo-spacing-4);
   z-index: 100;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  max-width: 24rem;
-  width: 100%;
+  inline-size: min(24rem, calc(100dvi - var(--sigvelo-spacing-8)));
+  max-inline-size: 100%;
   pointer-events: none;
 }
 
 .toast {
   --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-3);
+  --sigvelo-toast-stack-offset: calc(var(--toast-offset-y, 0px) * -1);
 
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  z-index: calc(100 - var(--toast-index));
   display: flex;
   flex-direction: column;
-  width: 100%;
+  inline-size: 100%;
   pointer-events: auto;
+  translate: var(--toast-swipe-movement-x, 0px)
+    calc(var(--sigvelo-toast-stack-offset) + var(--toast-swipe-movement-y, 0px));
   transition:
-    opacity var(--sigvelo-duration-medium) var(--sigvelo-ease-standard),
-    transform var(--sigvelo-duration-medium) var(--sigvelo-ease-standard);
+    opacity var(--sigvelo-motion-duration-presence) var(--sigvelo-motion-ease-change),
+    translate var(--sigvelo-motion-duration-layout) var(--sigvelo-motion-ease-change);
 }
 
 .toast[data-starting-style],
 .toast[data-ending-style] {
   opacity: 0;
-  transform: translateX(100%);
+  translate: calc(100% + var(--sigvelo-motion-distance-md) + var(--toast-swipe-movement-x, 0px))
+    calc(var(--sigvelo-toast-stack-offset) + var(--toast-swipe-movement-y, 0px));
+}
+
+.toast[data-ending-style] {
+  transition-timing-function: var(--sigvelo-motion-ease-exit);
 }
 
 .toast[data-type="success"] {
-  border-inline-start: 4px solid var(--sigvelo-color-success-bg);
+  border-inline-start: calc(var(--sigvelo-border-width) * 4) solid var(--sigvelo-color-success-bg);
 }
 
 .toast[data-type="error"] {
-  border-inline-start: 4px solid var(--sigvelo-color-danger-bg);
+  border-inline-start: calc(var(--sigvelo-border-width) * 4) solid var(--sigvelo-color-danger-bg);
 }
 
 .toast[data-type="warning"] {
-  border-inline-start: 4px solid var(--sigvelo-color-warning-bg);
+  border-inline-start: calc(var(--sigvelo-border-width) * 4) solid var(--sigvelo-color-warning-bg);
 }
 
 .toast[data-type="info"] {
-  border-inline-start: 4px solid var(--sigvelo-color-focus);
+  border-inline-start: calc(var(--sigvelo-border-width) * 4) solid var(--sigvelo-color-focus);
 }
 
 .toast__content {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: var(--sigvelo-spacing-1);
   flex: 1;
 }
 
@@ -61,21 +70,27 @@
 }
 
 .toast__action {
+  --sigvelo-recipe-control-height: var(--sigvelo-control-height-xs);
+  --sigvelo-recipe-control-padding-inline: var(--sigvelo-control-padding-inline-xs);
+  --sigvelo-recipe-control-font-size: var(--sigvelo-control-text-xs);
+
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding-block: var(--sigvelo-spacing-1-5);
-  padding-inline: var(--sigvelo-spacing-3);
+  min-block-size: var(--sigvelo-recipe-control-height);
+  padding-block: 0;
+  padding-inline: var(--sigvelo-recipe-control-padding-inline);
   margin-block-start: var(--sigvelo-spacing-2);
   font-family: inherit;
-  font-size: var(--sigvelo-text-xs);
+  font-size: var(--sigvelo-recipe-control-font-size);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-primary-text-on-bg);
   background-color: var(--sigvelo-color-primary-bg);
   border: none;
   border-radius: var(--sigvelo-radius-sm);
   cursor: pointer;
-  transition: background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+  transition: background-color var(--sigvelo-motion-duration-interaction)
+    var(--sigvelo-motion-ease-change);
 }
 
 .toast__action:hover {
@@ -89,13 +104,13 @@
 
 .toast__close {
   position: absolute;
-  inset-block-start: 0.5rem;
-  inset-inline-end: 0.5rem;
+  inset-block-start: var(--sigvelo-spacing-2);
+  inset-inline-end: var(--sigvelo-spacing-2);
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
+  inline-size: var(--sigvelo-control-height-xs);
+  block-size: var(--sigvelo-control-height-xs);
   padding: 0;
   font-size: var(--sigvelo-text-base);
   color: var(--sigvelo-color-text-muted);
@@ -105,11 +120,11 @@
   cursor: pointer;
   opacity: 0;
   transition:
-    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    opacity var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
-.toast:hover .toast__close {
+.toast:is(:hover, :focus-within) .toast__close {
   opacity: 1;
 }
 
@@ -123,3 +138,9 @@
   outline: none;
   box-shadow: var(--sigvelo-recipe-focus-shadow);
 }
+
+@media (hover: none) {
+  .toast__close {
+    opacity: 1;
+  }
+}

package/dist/styles/toggle-group.css

@@ -3,7 +3,7 @@
   align-items: center;
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   border-radius: var(--sigvelo-radius-md);
-  padding: 0.25rem;
+  padding: var(--sigvelo-spacing-1);
   gap: var(--sigvelo-spacing-0-5);
 }
 
@@ -13,40 +13,13 @@
 
 .toggle-group--lg {
   padding: var(--sigvelo-spacing-1-5);
-  gap: 0.25rem;
+  gap: var(--sigvelo-spacing-1);
 }
 
 .toggle-group__item {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-block-size: var(--sigvelo-recipe-control-height);
-  padding-block: 0;
-  padding-inline: var(--sigvelo-recipe-control-padding-inline);
-  font-family: inherit;
-  font-size: var(--sigvelo-recipe-control-font-size);
-  font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text-muted);
-  background-color: transparent;
   border: none;
   border-radius: calc(var(--sigvelo-radius-md) - 2px);
-  cursor: pointer;
-  transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.toggle-group--sm .toggle-group__item {
-  --sigvelo-recipe-control-height: var(--sigvelo-control-height-sm);
-  --sigvelo-recipe-control-padding-inline: var(--sigvelo-spacing-2);
-  --sigvelo-recipe-control-font-size: var(--sigvelo-control-text-sm);
-}
-
-.toggle-group--lg .toggle-group__item {
-  --sigvelo-recipe-control-height: var(--sigvelo-control-height-lg);
-  --sigvelo-recipe-control-padding-inline: var(--sigvelo-spacing-4);
-  --sigvelo-recipe-control-font-size: var(--sigvelo-control-text-lg);
 }
 
 .toggle-group__item:hover:not([data-disabled]) {
@@ -54,8 +27,6 @@
 }
 
 .toggle-group__item:focus-visible {
-  outline: none;
-  box-shadow: var(--sigvelo-recipe-focus-shadow);
   z-index: 1;
 }
 
@@ -67,11 +38,6 @@
     0 1px 2px -1px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%);
 }
 
-.toggle-group__item[data-disabled] {
-  opacity: var(--sigvelo-recipe-disabled-opacity);
-  cursor: not-allowed;
-}
-
 @media (forced-colors: active) {
   .toggle-group__item[data-pressed] {
     outline: 2px solid Highlight;

package/dist/styles/toggle.css

@@ -16,10 +16,12 @@
     var(--sigvelo-color-neutral-border-muted);
   border-radius: var(--sigvelo-radius-md);
   cursor: pointer;
+  translate: 0;
   transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    border-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    translate var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .toggle--outline {
@@ -29,14 +31,22 @@
 
 .toggle--sm {
   --sigvelo-recipe-control-height: var(--sigvelo-control-height-sm);
-  --sigvelo-recipe-control-padding-inline: var(--sigvelo-spacing-2);
+  --sigvelo-recipe-control-padding-inline: var(--sigvelo-control-padding-inline-sm);
   --sigvelo-recipe-control-font-size: var(--sigvelo-control-text-sm);
+  --sigvelo-recipe-control-icon-size: var(--sigvelo-control-icon-size-sm);
 }
 
 .toggle--lg {
   --sigvelo-recipe-control-height: var(--sigvelo-control-height-lg);
-  --sigvelo-recipe-control-padding-inline: var(--sigvelo-spacing-4);
+  --sigvelo-recipe-control-padding-inline: var(--sigvelo-control-padding-inline-lg);
   --sigvelo-recipe-control-font-size: var(--sigvelo-control-text-lg);
+  --sigvelo-recipe-control-icon-size: var(--sigvelo-control-icon-size-lg);
+}
+
+.toggle > svg {
+  inline-size: var(--sigvelo-recipe-control-icon-size);
+  block-size: var(--sigvelo-recipe-control-icon-size);
+  flex: none;
 }
 
 .toggle:hover {
@@ -55,7 +65,21 @@
   border-color: var(--sigvelo-color-neutral-bg-subtle);
 }
 
+.toggle:active:not(:disabled) {
+  translate: 0 var(--sigvelo-motion-distance-xs);
+}
+
 .toggle:disabled {
   opacity: var(--sigvelo-recipe-disabled-opacity);
   pointer-events: none;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .toggle {
+    translate: none;
+  }
+}
+
+:root[data-motion="reduce"] .toggle {
+  translate: none;
+}