@mcp-b/react-components 0.16.1 → 0.18.0

package/dist/styles/queue.css

@@ -1,8 +1,8 @@
 .queue {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-  width: 100%;
+  gap: var(--sigvelo-spacing-2);
+  inline-size: 100%;
   font-family: inherit;
   color: var(--sigvelo-color-text);
 }
@@ -15,9 +15,10 @@
 .queue__section-trigger {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding-block: 0.4375rem;
-  padding-inline: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
+  min-block-size: var(--sigvelo-control-height-xs);
+  padding-block: 0;
+  padding-inline: var(--sigvelo-control-padding-inline-xs);
   background-color: transparent;
   border: none;
   border-radius: var(--sigvelo-radius-sm);
@@ -30,8 +31,8 @@
   cursor: pointer;
   text-align: start;
   transition:
-    background-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),
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .queue__section-trigger:hover:not([data-disabled]) {
@@ -46,33 +47,29 @@
 
 .queue__section-icon {
   display: inline-flex;
-  transition: transform var(--sigvelo-duration-medium) var(--sigvelo-ease-standard);
+  transition: rotate var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-change);
 }
 
 .queue__section-trigger[data-panel-open] .queue__section-icon {
-  transform: rotate(90deg);
+  rotate: 90deg;
 }
 
 .queue__section-label {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
-}
-
-.queue__section-count {
-  /* Badge sm already sized appropriately */
+  gap: var(--sigvelo-spacing-2);
 }
 
 .queue__list {
-  margin-block: 0.5rem 0.25rem;
+  margin-block: var(--sigvelo-spacing-2) var(--sigvelo-spacing-1);
 }
 
 .queue__list-viewport {
-  max-height: 10rem;
+  max-block-size: 10rem;
 }
 
 .queue__list-scroll {
-  padding-inline-end: 1rem;
+  padding-inline-end: var(--sigvelo-spacing-4);
 }
 
 .queue__list-inner {
@@ -88,10 +85,11 @@
   display: flex;
   align-items: flex-start;
   gap: var(--sigvelo-spacing-2-5);
-  padding-block: 0.5rem;
-  padding-inline: 0.5rem;
+  padding-block: var(--sigvelo-spacing-2);
+  padding-inline: var(--sigvelo-spacing-2);
   border-radius: var(--sigvelo-radius-sm);
-  transition: background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+  transition: background-color var(--sigvelo-motion-duration-interaction)
+    var(--sigvelo-motion-ease-change);
 }
 
 .queue__item:hover {
@@ -116,12 +114,15 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1rem;
-  height: 1rem;
+  inline-size: var(--sigvelo-control-icon-size-md);
+  block-size: var(--sigvelo-control-icon-size-md);
   margin-block-start: var(--sigvelo-spacing-0-5);
   border-radius: var(--sigvelo-radius-full);
   color: var(--sigvelo-color-text-muted);
   flex-shrink: 0;
+  transition:
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .queue__item-indicator--active {
@@ -135,13 +136,17 @@
 
 .queue__item-content {
   flex: 1;
-  min-width: 0;
+  min-inline-size: 0;
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: var(--sigvelo-spacing-1);
   font-size: var(--sigvelo-text-sm);
   color: var(--sigvelo-color-text);
   line-height: 1.4;
+  transition:
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    text-decoration-color var(--sigvelo-motion-duration-interaction)
+      var(--sigvelo-motion-ease-change);
 }
 
 .queue__item-description {
@@ -149,6 +154,10 @@
   font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
   line-height: 1.4;
+  transition:
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    text-decoration-color var(--sigvelo-motion-duration-interaction)
+      var(--sigvelo-motion-ease-change);
 }
 
 .queue__item-description--complete {
@@ -159,10 +168,10 @@
 .queue__item-actions {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--sigvelo-spacing-1);
   flex-shrink: 0;
   opacity: 0;
-  transition: opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+  transition: opacity var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .queue__item-actions:focus-within {
@@ -170,19 +179,19 @@
 }
 
 .queue__item-action {
-  min-width: 0;
+  min-inline-size: 0;
 }
 
 .queue__item-attachment {
   display: flex;
   align-items: center;
   gap: var(--sigvelo-spacing-1-5);
-  margin-block-start: 0.25rem;
+  margin-block-start: var(--sigvelo-spacing-1);
 }
 
 .queue__item-image {
-  width: 2.5rem;
-  height: 2.5rem;
+  inline-size: var(--sigvelo-control-height-lg);
+  block-size: var(--sigvelo-control-height-lg);
   object-fit: cover;
   border-radius: var(--sigvelo-radius-sm);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -193,14 +202,21 @@
   display: inline-flex;
   align-items: center;
   gap: var(--sigvelo-spacing-1-5);
-  padding-block: 0.3125rem;
-  padding-inline: 0.5rem;
+  min-block-size: var(--sigvelo-control-height-xs);
+  padding-block: 0;
+  padding-inline: var(--sigvelo-spacing-2);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   border-radius: var(--sigvelo-radius-sm);
   font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text);
 }
 
+@media (hover: none) {
+  .queue__item-actions {
+    opacity: 1;
+  }
+}
+
 .queue__item-file-icon {
   display: inline-flex;
   color: var(--sigvelo-color-text-muted);

package/dist/styles/radio.css

@@ -13,12 +13,14 @@
 }
 
 .radio {
+  --sigvelo-recipe-radio-size: var(--sigvelo-control-icon-size-lg);
+
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1.125rem;
-  height: 1.125rem;
+  inline-size: var(--sigvelo-recipe-radio-size);
+  block-size: var(--sigvelo-recipe-radio-size);
   flex-shrink: 0;
   background-color: var(--sigvelo-color-canvas);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -27,10 +29,10 @@
   outline: none;
   cursor: pointer;
   transition:
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    border-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    box-shadow var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .radio:hover:not([data-disabled]) {
@@ -62,14 +64,19 @@
 
 .radio__indicator {
   display: block;
-  width: 0.5rem;
-  height: 0.5rem;
+  inline-size: var(--sigvelo-spacing-2);
+  block-size: var(--sigvelo-spacing-2);
   background-color: var(--sigvelo-color-primary-text-on-bg);
   border-radius: var(--sigvelo-radius-full);
-  transform: scale(0);
-  transition: transform var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+  opacity: 1;
+  scale: 1;
+  transition:
+    opacity var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    scale var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-enter);
 }
 
-.radio[data-checked] .radio__indicator {
-  transform: scale(1);
+.radio__indicator[data-starting-style],
+.radio__indicator[data-ending-style] {
+  opacity: 0;
+  scale: 0;
 }

package/dist/styles/reasoning.css

@@ -1,6 +1,7 @@
 .reasoning__text {
   padding-inline-start: var(--sigvelo-spacing-3);
-  border-inline-start: var(--sigvelo-border-style) 2px var(--sigvelo-color-neutral-border-subtle);
+  border-inline-start: var(--sigvelo-border-style) calc(var(--sigvelo-border-width) * 2)
+    var(--sigvelo-color-neutral-border-subtle);
 }
 
 @media (forced-colors: active) {

package/dist/styles/recipes.css

@@ -4,10 +4,11 @@
  * supported variation. Consumers can override these variables by inheritance.
  */
 :where(:root, [data-theme="light"], [data-theme="dark"]) {
-  --sigvelo-recipe-control-height: var(--sigvelo-control-height-sm);
-  --sigvelo-recipe-control-padding-inline: var(--sigvelo-spacing-2);
-  --sigvelo-recipe-control-gap: var(--sigvelo-spacing-1-5);
-  --sigvelo-recipe-control-font-size: var(--sigvelo-control-text-sm);
+  --sigvelo-recipe-control-height: var(--sigvelo-density-compact-control-height);
+  --sigvelo-recipe-control-padding-inline: var(--sigvelo-density-compact-control-padding-inline);
+  --sigvelo-recipe-control-gap: var(--sigvelo-density-compact-control-gap);
+  --sigvelo-recipe-control-font-size: var(--sigvelo-density-compact-control-font-size);
+  --sigvelo-recipe-control-icon-size: var(--sigvelo-density-compact-control-icon-size);
   --sigvelo-recipe-control-radius: var(--sigvelo-radius-md);
   --sigvelo-recipe-field-background: var(--sigvelo-color-canvas);
   --sigvelo-recipe-field-border: var(--sigvelo-color-neutral-border-muted);
@@ -25,12 +26,76 @@
   --sigvelo-recipe-surface-radius: var(--sigvelo-radius-md);
   --sigvelo-recipe-surface-shadow: var(--sigvelo-shadow-lg);
   --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-1);
-  --sigvelo-recipe-row-min-height: var(--sigvelo-control-height-xs);
-  --sigvelo-recipe-row-padding-block: var(--sigvelo-spacing-0-5);
-  --sigvelo-recipe-row-padding-inline: var(--sigvelo-spacing-2);
-  --sigvelo-recipe-row-gap: var(--sigvelo-spacing-1-5);
-  --sigvelo-recipe-row-font-size: var(--sigvelo-text-compact);
+  --sigvelo-recipe-popup-min-inline-size: 10rem;
+  --sigvelo-recipe-popup-arrow-size: var(--sigvelo-spacing-3);
+  --sigvelo-recipe-row-min-height: var(--sigvelo-density-compact-control-height);
+  --sigvelo-recipe-row-padding-block: var(--sigvelo-spacing-1);
+  --sigvelo-recipe-row-padding-inline: var(--sigvelo-density-compact-control-padding-inline);
+  --sigvelo-recipe-row-gap: var(--sigvelo-density-compact-control-gap);
+  --sigvelo-recipe-row-font-size: var(--sigvelo-density-compact-control-font-size);
   --sigvelo-recipe-row-radius: var(--sigvelo-radius-sm);
+  --sigvelo-recipe-group-label-padding-block: var(--sigvelo-spacing-1-5);
+  --sigvelo-recipe-group-label-padding-inline: var(--sigvelo-recipe-row-padding-inline);
+  --sigvelo-recipe-group-label-color: var(--sigvelo-color-text-muted);
+  --sigvelo-recipe-group-label-font-size: var(--sigvelo-text-xs);
+  --sigvelo-recipe-group-label-font-weight: var(--sigvelo-font-weight-semibold);
+  --sigvelo-recipe-group-label-line-height: inherit;
+}
+
+/*
+ * Composer add and command pickers share a slightly roomier hierarchy than
+ * general-purpose menus while continuing to inherit the surface and row
+ * recipes for their actual anatomy and interaction states.
+ */
+:where([data-recipe~="composer-command-surface"]) {
+  --sigvelo-recipe-surface-radius: var(--sigvelo-radius-xl);
+  --sigvelo-recipe-surface-shadow: var(--sigvelo-shadow-xl);
+  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-1);
+  --sigvelo-recipe-row-min-height: var(--sigvelo-density-compact-control-height);
+  --sigvelo-recipe-row-padding-block: var(--sigvelo-spacing-1);
+  --sigvelo-recipe-row-padding-inline: var(--sigvelo-density-compact-control-padding-inline);
+  --sigvelo-recipe-row-gap: var(--sigvelo-density-compact-control-gap);
+  --sigvelo-recipe-row-font-size: var(--sigvelo-density-compact-control-font-size);
+  --sigvelo-recipe-row-radius: var(--sigvelo-radius-md);
+  --sigvelo-recipe-group-label-padding-block: var(--sigvelo-spacing-2);
+  --sigvelo-recipe-group-label-padding-inline: var(
+    --sigvelo-density-compact-control-padding-inline
+  );
+  --sigvelo-recipe-group-label-font-size: var(--sigvelo-density-compact-control-font-size);
+  --sigvelo-recipe-group-label-font-weight: var(--sigvelo-font-weight-normal);
+  --sigvelo-recipe-group-label-line-height: var(--sigvelo-leading-tight);
+  --sigvelo-combobox-popup-padding: var(--sigvelo-spacing-1);
+}
+
+/* Shared application compositions opt in explicitly; component CSS continues
+   to own their headers, rows, controls, and semantic states. */
+:where([data-recipe~="wide-scroll-picker"]) {
+  inline-size: min(46rem, calc(100dvw - 1rem));
+  max-block-size: min(28rem, calc(100dvh - 2rem));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+}
+
+:where([data-recipe~="framed-panel"]) {
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  overflow: hidden;
+  font-family: inherit;
+  color: var(--sigvelo-color-text);
+  background-color: var(--sigvelo-color-surface);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-md);
+}
+
+:where([data-recipe~="disclosure-stack"]) {
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  font-family: inherit;
+  color: var(--sigvelo-color-text);
 }
 
 @media (any-pointer: coarse) {
@@ -49,6 +114,10 @@
   ) {
     block-size: var(--sigvelo-control-height-xl);
   }
+
+  :where([data-recipe~="composer-command-surface"]) {
+    --sigvelo-recipe-row-min-height: var(--sigvelo-control-height-xl);
+  }
 }
 
 :where(
@@ -73,9 +142,9 @@
   border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-recipe-field-border);
   border-radius: var(--sigvelo-recipe-control-radius);
   transition:
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    border-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    box-shadow var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 :where(
@@ -119,6 +188,7 @@
   [data-slot="input"],
   [data-slot="textarea"],
   [data-slot="select-trigger"],
+  [data-slot="combobox-input"],
   [data-slot="field-control"]
 ):is([aria-invalid="true"], [data-invalid="true"], [data-invalid=""]) {
   border-color: var(--sigvelo-color-danger-bg);
@@ -128,6 +198,7 @@
   [data-slot="input"],
   [data-slot="textarea"],
   [data-slot="select-trigger"],
+  [data-slot="combobox-input"],
   [data-slot="field-control"]
 ):is([aria-invalid="true"], [data-invalid="true"], [data-invalid=""]):focus-visible {
   box-shadow: var(--sigvelo-recipe-invalid-focus-shadow);
@@ -200,13 +271,14 @@
   font-size: var(--sigvelo-recipe-row-font-size);
   line-height: 1.25;
   color: var(--sigvelo-color-text);
+  text-decoration: none;
   border-radius: var(--sigvelo-recipe-row-radius);
   cursor: pointer;
   outline: none;
   user-select: none;
   transition:
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 :where(
@@ -251,6 +323,103 @@
   opacity: var(--sigvelo-recipe-disabled-opacity);
 }
 
+:where(
+    [data-slot="dropdown-menu-item"],
+    [data-slot="dropdown-menu-radio-item"],
+    [data-slot="dropdown-menu-checkbox-item"],
+    [data-slot="dropdown-menu-sub-trigger"],
+    [data-slot="context-menu-item"],
+    [data-slot="context-menu-radio-item"],
+    [data-slot="context-menu-checkbox-item"],
+    [data-slot="context-menu-sub-trigger"],
+    [data-slot="menubar-item"],
+    [data-slot="menubar-radio-item"],
+    [data-slot="menubar-checkbox-item"],
+    [data-slot="menubar-sub-trigger"],
+    [data-slot="select-item"],
+    [data-slot="combobox-item"],
+    [data-slot="autocomplete-item"]
+  )
+  > svg {
+  inline-size: var(--sigvelo-density-compact-control-icon-size);
+  block-size: var(--sigvelo-density-compact-control-icon-size);
+  flex: none;
+}
+
+:where(
+  [data-slot="dropdown-menu-arrow"],
+  [data-slot="popover-arrow"],
+  [data-slot="tooltip-arrow"],
+  [data-slot="hover-card-arrow"],
+  [data-slot="navigation-menu-arrow"]
+) {
+  inline-size: var(--sigvelo-recipe-popup-arrow-size);
+  block-size: var(--sigvelo-recipe-popup-arrow-size);
+  background-color: var(--sigvelo-recipe-surface-background);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-recipe-surface-border);
+  rotate: 45deg;
+}
+
+:where(
+  [data-slot="dropdown-menu-arrow"],
+  [data-slot="popover-arrow"],
+  [data-slot="tooltip-arrow"],
+  [data-slot="hover-card-arrow"],
+  [data-slot="navigation-menu-arrow"]
+)[data-side="top"] {
+  border-block-start: none;
+  border-inline-start: none;
+}
+
+:where(
+  [data-slot="dropdown-menu-arrow"],
+  [data-slot="popover-arrow"],
+  [data-slot="tooltip-arrow"],
+  [data-slot="hover-card-arrow"],
+  [data-slot="navigation-menu-arrow"]
+)[data-side="bottom"] {
+  border-block-end: none;
+  border-inline-end: none;
+}
+
+:where(
+  [data-slot="dropdown-menu-arrow"],
+  [data-slot="popover-arrow"],
+  [data-slot="tooltip-arrow"],
+  [data-slot="hover-card-arrow"],
+  [data-slot="navigation-menu-arrow"]
+)[data-side="left"] {
+  border-block-end: none;
+  border-inline-start: none;
+}
+
+:where(
+  [data-slot="dropdown-menu-arrow"],
+  [data-slot="popover-arrow"],
+  [data-slot="tooltip-arrow"],
+  [data-slot="hover-card-arrow"],
+  [data-slot="navigation-menu-arrow"]
+)[data-side="right"] {
+  border-block-start: none;
+  border-inline-end: none;
+}
+
+:where([data-slot="context-menu-item-indicator"], [data-slot="menubar-item-indicator"]) {
+  display: inline-flex;
+  flex: 0 0 1rem;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1rem;
+}
+
+:where([data-slot="popover-description"], [data-slot="toast-description"]) {
+  margin: 0;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  line-height: var(--sigvelo-leading-normal);
+}
+
 :where([data-slot="dropdown-menu-trigger"]:not([data-unstyled]), [data-slot="popover-trigger"]) {
   display: inline-flex;
   align-items: center;
@@ -375,8 +544,8 @@
   font-weight: var(--sigvelo-font-weight-semibold);
   cursor: pointer;
   transition:
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 :where(
@@ -399,12 +568,11 @@
 
 :where(
   [data-slot="chain-of-thought-trigger-icon"],
-  [data-slot="reasoning-trigger-icon"],
   [data-slot="sources-trigger-icon"],
   [data-slot="task-trigger-icon"]
 ) {
   display: inline-flex;
-  transition: transform var(--sigvelo-duration-medium) var(--sigvelo-ease-standard);
+  transition: rotate var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-change);
 }
 
 :where(
@@ -415,11 +583,10 @@
   )[data-panel-open]
   > :where(
     [data-slot="chain-of-thought-trigger-icon"],
-    [data-slot="reasoning-trigger-icon"],
     [data-slot="sources-trigger-icon"],
     [data-slot="task-trigger-icon"]
   ) {
-  transform: rotate(90deg);
+  rotate: 90deg;
 }
 
 :where([data-slot="meter-track"], [data-slot="progress-track"]) {
@@ -435,7 +602,20 @@
   block-size: 100%;
   background-color: var(--sigvelo-color-primary-bg);
   border-radius: var(--sigvelo-radius-full);
-  transition: width var(--sigvelo-duration-slow) var(--sigvelo-ease-standard);
+  transition:
+    width var(--sigvelo-motion-duration-layout) var(--sigvelo-motion-ease-change),
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-slot="meter-indicator"], [data-slot="progress-indicator"]) {
+    transition: background-color var(--sigvelo-duration-reduced) var(--sigvelo-motion-ease-change);
+  }
+}
+
+:root[data-motion="reduce"]
+  :where([data-slot="meter-indicator"], [data-slot="progress-indicator"]) {
+  transition: background-color var(--sigvelo-duration-reduced) var(--sigvelo-motion-ease-change);
 }
 
 :where(
@@ -446,11 +626,12 @@
   [data-slot="combobox-group-label"],
   [data-slot="autocomplete-group-label"]
 ) {
-  padding-block: var(--sigvelo-spacing-1-5);
-  padding-inline: var(--sigvelo-recipe-row-padding-inline);
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-xs);
-  font-weight: var(--sigvelo-font-weight-semibold);
+  padding-block: var(--sigvelo-recipe-group-label-padding-block);
+  padding-inline: var(--sigvelo-recipe-group-label-padding-inline);
+  color: var(--sigvelo-recipe-group-label-color);
+  font-size: var(--sigvelo-recipe-group-label-font-size);
+  font-weight: var(--sigvelo-recipe-group-label-font-weight);
+  line-height: var(--sigvelo-recipe-group-label-line-height);
 }
 
 :where(

package/dist/styles/resizable-side-panel.css

@@ -22,10 +22,11 @@
   position: absolute;
   inset-block: 0;
   inset-inline-start: 50%;
-  inline-size: 1px;
-  transform: translateX(-50%);
+  inline-size: var(--sigvelo-border-width);
+  translate: -50% 0;
   background: transparent;
-  transition: background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+  transition: background-color var(--sigvelo-motion-duration-interaction)
+    var(--sigvelo-motion-ease-change);
 }
 
 .resizable-side-panel__handle:hover::before,
@@ -57,10 +58,3 @@ body.is-resizing-side-panel {
 body.is-resizing-side-panel .resizable-side-panel {
   transition: none;
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .resizable-side-panel,
-  .resizable-side-panel__handle::before {
-    transition: none;
-  }
-}