@mcp-b/react-components 0.16.1 → 0.18.0

package/dist/styles/browser-live-view.css

@@ -5,7 +5,7 @@
 .browser-live-view {
   position: relative;
   display: flex;
-  width: 100%;
+  inline-size: 100%;
   aspect-ratio: 16 / 10;
   font-family: inherit;
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -16,25 +16,31 @@
 }
 
 .browser-live-view__frame {
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   border: none;
+  opacity: 0;
+  transition: opacity var(--sigvelo-motion-duration-presence) var(--sigvelo-motion-ease-enter);
+}
+
+.browser-live-view[data-frame-state="ready"] .browser-live-view__frame {
+  opacity: 1;
 }
 
 /* The chip itself is the library Badge (sm/destructive) — only the overlay
    placement lives here. */
 .browser-live-view__badge {
   position: absolute;
-  top: 0.5rem;
-  inset-inline-end: 0.5rem;
+  inset-block-start: var(--sigvelo-spacing-2);
+  inset-inline-end: var(--sigvelo-spacing-2);
   z-index: 1;
   box-shadow: var(--sigvelo-shadow-sm);
   pointer-events: none;
 }
 
 .browser-live-view__badge-dot {
-  width: var(--sigvelo-spacing-1-5);
-  height: var(--sigvelo-spacing-1-5);
+  inline-size: var(--sigvelo-spacing-1-5);
+  block-size: var(--sigvelo-spacing-1-5);
   border-radius: 50%;
   background-color: currentColor;
   animation: browser-live-view-pulse 1.4s ease-in-out infinite;
@@ -46,8 +52,8 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 0.25rem;
-  width: 100%;
+  gap: var(--sigvelo-spacing-1);
+  inline-size: 100%;
 }
 
 .browser-live-view__ended-title {
@@ -59,7 +65,7 @@
 .browser-live-view__ended-detail {
   font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
-  max-width: 80%;
+  max-inline-size: 80%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -67,8 +73,8 @@
 
 /* An expired view showing a screenshot fallback keeps the image flush */
 .browser-live-view[data-expired] > img {
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   object-fit: cover;
 }
 
@@ -81,10 +87,11 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-compact);
+  z-index: 1;
 }
 
 .browser-live-view__state-spinner {
@@ -95,15 +102,15 @@
    the button is focused */
 .browser-live-view__expand {
   position: absolute;
-  inset-block-end: 0.5rem;
-  inset-inline-end: 0.5rem;
+  inset-block-end: var(--sigvelo-spacing-2);
+  inset-inline-end: var(--sigvelo-spacing-2);
   z-index: 1;
   background-color: var(--sigvelo-color-surface);
   box-shadow: var(--sigvelo-shadow-sm);
   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);
 }
 
 .browser-live-view:hover .browser-live-view__expand,
@@ -121,7 +128,7 @@
 .browser-live-view__dialog-body {
   position: relative;
   flex: 1;
-  min-height: 0;
+  min-block-size: 0;
   display: flex;
   border-radius: var(--sigvelo-radius-md);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
@@ -129,14 +136,14 @@
 }
 
 .browser-live-view__dialog-body > iframe {
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   border: none;
 }
 
 .browser-live-view__dialog-body > img {
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   object-fit: contain;
 }
 
@@ -162,3 +169,13 @@
     animation: none;
   }
 }
+
+:root[data-motion="reduce"] :is(.browser-live-view__badge-dot, .browser-live-view__state-spinner) {
+  animation: none;
+}
+
+@media (hover: none) {
+  .browser-live-view__expand {
+    opacity: 1;
+  }
+}

package/dist/styles/browser-replay.css

@@ -56,7 +56,7 @@
   background-color: var(--sigvelo-color-surface);
 }
 
-/* Play/pause is the library Button (ghost/icon-sm) and the scrubber is the
+/* Play/pause is the small icon-only library Button and the scrubber is the
    library Slider — only flex sizing lives here. */
 .browser-replay__toggle {
   flex: 0 0 auto;

package/dist/styles/browser-run-panel.css

@@ -1,7 +1,7 @@
 .browser-run-panel {
   min-inline-size: 0;
   min-block-size: 0;
-  height: 100%;
+  block-size: 100%;
 }
 
 .browser-run-panel .web-preview__nav:has(.browser-run-panel__tabs) {
@@ -18,7 +18,10 @@
   flex: 1;
   min-inline-size: 0;
   flex-wrap: nowrap;
-  overflow-x: auto;
+  gap: 0;
+  padding-inline: 0;
+  border-block-end: 0;
+  overflow-inline: auto;
   scrollbar-width: none;
 }
 
@@ -28,17 +31,17 @@
 
 .browser-run-panel__tab.button {
   min-inline-size: min(11rem, 45vw);
-  min-block-size: 2.75rem;
+  min-block-size: var(--sigvelo-control-height-xl);
   max-inline-size: 13rem;
   flex: 0 0 auto;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
   padding-inline: var(--sigvelo-spacing-3);
   border-radius: var(--sigvelo-radius-md) var(--sigvelo-radius-md) 0 0;
   text-align: start;
   white-space: nowrap;
 }
 
-.browser-run-panel__tab[aria-selected="true"] {
+.browser-run-panel__tab[data-active] {
   background: var(--sigvelo-color-surface);
   color: var(--sigvelo-color-text);
 }
@@ -117,8 +120,12 @@
   }
 }
 
+:root[data-motion="reduce"] .browser-run-panel__spinner {
+  animation: none;
+}
+
 @media (forced-colors: active) {
-  .browser-run-panel__tab[aria-selected="true"] {
+  .browser-run-panel__tab[data-active] {
     outline: 2px solid Highlight;
     outline-offset: -2px;
   }

package/dist/styles/button.css

@@ -2,6 +2,7 @@
   --sigvelo-recipe-button-height: var(--sigvelo-control-height-md);
   --sigvelo-recipe-button-padding-inline: var(--sigvelo-spacing-3);
   --sigvelo-recipe-button-font-size: var(--sigvelo-control-text-md);
+  --sigvelo-recipe-button-icon-size: var(--sigvelo-control-icon-size-md);
   --sigvelo-recipe-button-radius: var(--sigvelo-radius-md);
 
   display: inline-flex;
@@ -20,17 +21,26 @@
   line-height: 1.25;
   text-decoration: none;
   border-radius: var(--sigvelo-recipe-button-radius);
+  translate: 0;
   transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    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);
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    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),
+    translate var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
+}
+
+.button svg {
+  inline-size: var(--sigvelo-recipe-button-icon-size);
+  block-size: var(--sigvelo-recipe-button-icon-size);
+  flex: none;
 }
 
 /* ponytail: one brightness rule covers press feedback for every variant;
    upgrade to per-variant color-mix rules if filter side effects ever bite */
 .button:active:not([data-disabled]) {
   filter: brightness(0.94);
+  translate: 0 var(--sigvelo-motion-distance-xs);
 }
 
 .button:focus-visible {
@@ -131,63 +141,46 @@
 
 .button--xs {
   --sigvelo-recipe-button-height: var(--sigvelo-control-height-xs);
-  --sigvelo-recipe-button-padding-inline: var(--sigvelo-spacing-2);
+  --sigvelo-recipe-button-padding-inline: var(--sigvelo-control-padding-inline-xs);
   --sigvelo-recipe-button-font-size: var(--sigvelo-control-text-xs);
+  --sigvelo-recipe-button-icon-size: var(--sigvelo-control-icon-size-xs);
   --sigvelo-recipe-button-radius: var(--sigvelo-radius-sm);
 }
 
 .button--sm {
   --sigvelo-recipe-button-height: var(--sigvelo-control-height-sm);
-  --sigvelo-recipe-button-padding-inline: var(--sigvelo-spacing-2-5);
+  --sigvelo-recipe-button-padding-inline: var(--sigvelo-control-padding-inline-sm);
   --sigvelo-recipe-button-font-size: var(--sigvelo-control-text-sm);
+  --sigvelo-recipe-button-icon-size: var(--sigvelo-control-icon-size-sm);
   --sigvelo-recipe-button-radius: var(--sigvelo-radius-sm);
 }
 
 .button--md {
   --sigvelo-recipe-button-height: var(--sigvelo-control-height-md);
-  --sigvelo-recipe-button-padding-inline: var(--sigvelo-spacing-3);
+  --sigvelo-recipe-button-padding-inline: var(--sigvelo-control-padding-inline-md);
   --sigvelo-recipe-button-font-size: var(--sigvelo-control-text-md);
+  --sigvelo-recipe-button-icon-size: var(--sigvelo-control-icon-size-md);
 }
 
 .button--lg {
   --sigvelo-recipe-button-height: var(--sigvelo-control-height-lg);
-  --sigvelo-recipe-button-padding-inline: var(--sigvelo-spacing-4);
+  --sigvelo-recipe-button-padding-inline: var(--sigvelo-control-padding-inline-lg);
   --sigvelo-recipe-button-font-size: var(--sigvelo-control-text-lg);
+  --sigvelo-recipe-button-icon-size: var(--sigvelo-control-icon-size-lg);
 }
 
 .button--xl {
   --sigvelo-recipe-button-height: var(--sigvelo-control-height-xl);
-  --sigvelo-recipe-button-padding-inline: 1.25rem;
+  --sigvelo-recipe-button-padding-inline: var(--sigvelo-control-padding-inline-xl);
   --sigvelo-recipe-button-font-size: var(--sigvelo-control-text-xl);
+  --sigvelo-recipe-button-icon-size: var(--sigvelo-control-icon-size-xl);
 }
 
-.button--icon {
-  --sigvelo-recipe-button-padding-inline: 0;
-
-  inline-size: var(--sigvelo-recipe-button-height);
-}
-
-.button--icon-xs {
-  --sigvelo-recipe-button-height: var(--sigvelo-control-height-xs);
-  --sigvelo-recipe-button-padding-inline: 0;
-  --sigvelo-recipe-button-radius: var(--sigvelo-radius-sm);
-
-  inline-size: var(--sigvelo-recipe-button-height);
-}
-
-.button--icon-sm {
-  --sigvelo-recipe-button-height: var(--sigvelo-control-height-sm);
-  --sigvelo-recipe-button-padding-inline: 0;
-  --sigvelo-recipe-button-radius: var(--sigvelo-radius-sm);
-
-  inline-size: var(--sigvelo-recipe-button-height);
-}
-
-.button--icon-lg {
-  --sigvelo-recipe-button-height: var(--sigvelo-control-height-lg);
+.button[data-icon-only] {
   --sigvelo-recipe-button-padding-inline: 0;
 
   inline-size: var(--sigvelo-recipe-button-height);
+  flex: none;
 }
 
 @media (forced-colors: active) {
@@ -206,3 +199,13 @@
     opacity: 1;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .button {
+    translate: none;
+  }
+}
+
+:root[data-motion="reduce"] .button {
+  translate: none;
+}

package/dist/styles/card.css

@@ -4,11 +4,9 @@
   /* Shadow-led elevation: no perimeter border */
   border-radius: var(--sigvelo-radius-lg);
   padding: var(--sigvelo-spacing-4);
-  container-type: inline-size;
   box-shadow: var(--sigvelo-shadow-sm);
-  transition:
-    box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    transform var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+  transition: box-shadow var(--sigvelo-motion-duration-interaction)
+    var(--sigvelo-motion-ease-change);
 }
 
 .card[data-size="sm"] {
@@ -58,12 +56,14 @@
 }
 
 .card__title {
+  min-inline-size: 0;
   font-size: var(--sigvelo-text-base);
   font-weight: var(--sigvelo-font-weight-semibold);
   line-height: var(--sigvelo-leading-tight);
 }
 
 .card__description {
+  min-inline-size: 0;
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-compact);
 }
@@ -83,8 +83,7 @@
 }
 
 .card--hover:hover {
-  box-shadow: var(--sigvelo-shadow-sm);
-  transform: translateY(-1px);
+  box-shadow: var(--sigvelo-shadow-md);
 }
 
 .card--hover:focus-visible {

package/dist/styles/chain-of-thought.css

@@ -1,11 +1,3 @@
-.chain-of-thought {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  font-family: inherit;
-  color: var(--sigvelo-color-text);
-}
-
 .chain-of-thought__steps {
   display: flex;
   flex-direction: column;
@@ -13,8 +5,9 @@
   margin: 0;
   padding-block: var(--sigvelo-spacing-2);
   padding-inline: var(--sigvelo-spacing-2);
-  margin-inline-start: 1rem;
-  border-inline-start: var(--sigvelo-border-style) 2px var(--sigvelo-color-neutral-border-subtle);
+  margin-inline-start: var(--sigvelo-spacing-4);
+  border-inline-start: var(--sigvelo-border-style) calc(var(--sigvelo-border-width) * 2)
+    var(--sigvelo-color-neutral-border-subtle);
   list-style: none;
 }
 
@@ -30,9 +23,9 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1.25rem;
-  height: 1.25rem;
-  margin-inline-start: -1.625rem;
+  inline-size: var(--sigvelo-spacing-5);
+  block-size: var(--sigvelo-spacing-5);
+  margin-inline-start: calc((var(--sigvelo-spacing-6) + var(--sigvelo-spacing-0-5)) * -1);
   border-radius: var(--sigvelo-radius-full);
   background-color: var(--sigvelo-color-surface);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -58,7 +51,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--sigvelo-spacing-1-5);
-  min-width: 0;
+  min-inline-size: 0;
   flex: 1;
 }
 
@@ -101,8 +94,9 @@
 .chain-of-thought__search-result {
   display: inline-flex;
   align-items: center;
-  padding-block: 0.25rem;
-  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: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
@@ -110,13 +104,13 @@
   font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text);
   text-decoration: none;
-  max-width: 18rem;
+  max-inline-size: 18rem;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    border-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);
 }
 
 .chain-of-thought__search-result:hover {
@@ -133,13 +127,13 @@
   margin: 0;
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
-  max-width: 18rem;
+  gap: var(--sigvelo-spacing-1);
+  max-inline-size: 18rem;
 }
 
 .chain-of-thought__image-img {
-  width: 100%;
-  height: auto;
+  inline-size: 100%;
+  block-size: auto;
   border-radius: var(--sigvelo-radius-sm);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
@@ -147,7 +141,7 @@
 
 .chain-of-thought__image-frame {
   display: flex;
-  max-height: 22rem;
+  max-block-size: 22rem;
   align-items: center;
   justify-content: center;
   overflow: hidden;
@@ -178,6 +172,10 @@
   }
 }
 
+:root[data-motion="reduce"] .chain-of-thought__step--active .chain-of-thought__step-indicator {
+  animation: none;
+}
+
 @media (forced-colors: active) {
   .chain-of-thought__step-indicator,
   .chain-of-thought__search-result {

package/dist/styles/checkbox.css

@@ -1,9 +1,11 @@
 .checkbox {
+  --sigvelo-recipe-checkbox-size: var(--sigvelo-control-icon-size-md);
+
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1rem;
-  height: 1rem;
+  inline-size: var(--sigvelo-recipe-checkbox-size);
+  block-size: var(--sigvelo-recipe-checkbox-size);
   flex-shrink: 0;
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-muted);
@@ -12,9 +14,9 @@
   outline: none;
   cursor: pointer;
   transition:
-    background-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);
+    background-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);
 }
 
 .checkbox:hover:not([data-disabled]) {
@@ -49,4 +51,15 @@
   align-items: center;
   justify-content: center;
   color: var(--sigvelo-color-primary-text-on-bg);
+  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);
+}
+
+.checkbox__indicator[data-starting-style],
+.checkbox__indicator[data-ending-style] {
+  opacity: 0;
+  scale: var(--sigvelo-motion-presence-scale);
 }

package/dist/styles/checkpoint.css

@@ -0,0 +1,58 @@
+.checkpoint {
+  max-inline-size: 100%;
+  gap: var(--sigvelo-spacing-1);
+  font-size: var(--sigvelo-text-xs);
+}
+
+.checkpoint__icon {
+  color: var(--sigvelo-color-text-muted);
+}
+
+.checkpoint__content {
+  display: flex;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  gap: var(--sigvelo-spacing-0-5) var(--sigvelo-spacing-1);
+  align-items: baseline;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  overflow-wrap: anywhere;
+}
+
+.checkpoint__title {
+  min-inline-size: 0;
+  color: var(--sigvelo-color-text);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  overflow-wrap: anywhere;
+}
+
+.checkpoint__description {
+  min-inline-size: 0;
+  color: var(--sigvelo-color-text-muted);
+  overflow-wrap: anywhere;
+}
+
+.checkpoint__title + .checkpoint__description::before {
+  content: "\00b7";
+  margin-inline-end: var(--sigvelo-spacing-1);
+}
+
+.checkpoint__actions {
+  display: inline-flex;
+  flex: 0 1 auto;
+  gap: var(--sigvelo-spacing-1);
+  align-items: center;
+  min-inline-size: 0;
+}
+
+.checkpoint__actions > * {
+  min-inline-size: 0;
+  max-inline-size: 100%;
+}
+
+@media (forced-colors: active) {
+  .checkpoint.marker--separator::before,
+  .checkpoint.marker--separator::after {
+    background-color: CanvasText;
+  }
+}

package/dist/styles/codex-model-selector.css

@@ -36,15 +36,11 @@
   background-color: var(--sigvelo-color-neutral-bg-muted);
   border-radius: var(--sigvelo-radius-full);
   opacity: 0;
-  transform: scale(0.96);
-  transition:
-    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    transform var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+  transition: opacity var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .codex-model-selector__trigger:is(:hover, :focus-visible, [data-popup-open])::before {
   opacity: 1;
-  transform: scale(1);
 }
 
 .codex-model-selector__trigger:focus-visible {
@@ -89,8 +85,8 @@
 }
 
 .codex-model-selector__trigger-icon {
-  inline-size: 0.875rem;
-  block-size: 0.875rem;
+  inline-size: var(--sigvelo-control-icon-size-sm);
+  block-size: var(--sigvelo-control-icon-size-sm);
 }
 
 .codex-model-selector__menu {

package/dist/styles/collapsible.css

@@ -1,7 +1,7 @@
 .collapsible {
   display: flex;
   flex-direction: column;
-  width: 100%;
+  inline-size: 100%;
 }
 
 .collapsible__trigger {
@@ -9,7 +9,7 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--sigvelo-recipe-control-gap);
-  width: 100%;
+  inline-size: 100%;
   min-block-size: var(--sigvelo-recipe-control-height);
   padding-block: 0;
   padding-inline: var(--sigvelo-recipe-control-padding-inline);
@@ -24,8 +24,8 @@
   border-radius: var(--sigvelo-radius-md);
   cursor: pointer;
   transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    border-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);
 }
 
 .collapsible__trigger:hover {
@@ -44,16 +44,16 @@
 
 .collapsible__trigger::after {
   content: "";
-  width: 0;
-  height: 0;
+  inline-size: 0;
+  block-size: 0;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-top: 5px solid currentColor;
-  transition: transform var(--sigvelo-duration-medium) var(--sigvelo-ease-standard);
+  transition: rotate var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .collapsible__trigger[data-panel-open]::after {
-  transform: rotate(180deg);
+  rotate: 180deg;
 }
 
 .collapsible__trigger[data-panel-open] {
@@ -69,10 +69,10 @@
 }
 
 .collapsible__panel > * {
-  padding: 1rem;
+  padding: var(--sigvelo-spacing-4);
   background-color: var(--sigvelo-color-surface);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-muted);
-  border-top: none;
+  border-block-start: none;
   border-radius: 0 0 var(--sigvelo-radius-md) var(--sigvelo-radius-md);
 }