@mcp-b/react-components 0.19.0 → 0.20.1

package/dist/styles/recipes.css

@@ -42,6 +42,54 @@
   --sigvelo-recipe-group-label-line-height: inherit;
 }
 
+:where([data-slot="select-trigger"][data-size="sm"], .toggle--sm) {
+  --sigvelo-recipe-control-height: var(--sigvelo-control-height-sm);
+  --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);
+}
+
+:where([data-slot="select-trigger"][data-size="md"], .toggle--md) {
+  --sigvelo-recipe-control-height: var(--sigvelo-control-height-md);
+  --sigvelo-recipe-control-padding-inline: var(--sigvelo-control-padding-inline-md);
+  --sigvelo-recipe-control-font-size: var(--sigvelo-control-text-md);
+  --sigvelo-recipe-control-icon-size: var(--sigvelo-control-icon-size-md);
+}
+
+:where(.toggle--lg) {
+  --sigvelo-recipe-control-height: var(--sigvelo-control-height-lg);
+  --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);
+}
+
+:where([data-slot="menubar"], [data-slot="toolbar"]) {
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-1);
+  padding: var(--sigvelo-spacing-1);
+  background-color: var(--sigvelo-color-canvas);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
+  border-radius: var(--sigvelo-radius-md);
+}
+
+:where([data-slot="menubar"], [data-slot="toolbar"])[data-orientation="vertical"] {
+  flex-direction: column;
+}
+
+:where(
+  [data-slot="dialog-footer"],
+  [data-slot="alert-dialog-footer"],
+  [data-slot="message-edit-actions"],
+  [data-slot="subagent-run-actions"]
+) {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--sigvelo-spacing-2);
+}
+
 /*
  * Composer add and command pickers share a slightly roomier hierarchy than
  * general-purpose menus while continuing to inherit the surface and row
@@ -136,7 +184,7 @@
   padding-inline: var(--sigvelo-recipe-control-padding-inline);
   font-family: inherit;
   font-size: var(--sigvelo-recipe-control-font-size);
-  line-height: 1.25;
+  line-height: var(--sigvelo-leading-compact);
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-recipe-field-background);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-recipe-field-border);
@@ -190,7 +238,7 @@
   [data-slot="select-trigger"],
   [data-slot="combobox-input"],
   [data-slot="field-control"]
-):is([aria-invalid="true"], [data-invalid="true"], [data-invalid=""]) {
+):is([aria-invalid="true"], [data-invalid]) {
   border-color: var(--sigvelo-color-danger-bg);
 }
 
@@ -200,22 +248,38 @@
   [data-slot="select-trigger"],
   [data-slot="combobox-input"],
   [data-slot="field-control"]
-):is([aria-invalid="true"], [data-invalid="true"], [data-invalid=""]):focus-visible {
+):is([aria-invalid="true"], [data-invalid]):focus-visible {
   box-shadow: var(--sigvelo-recipe-invalid-focus-shadow);
 }
 
 :where(
-  [data-slot="input"]:disabled,
+  [data-slot="input"][data-disabled],
   [data-slot="textarea"]:disabled,
   [data-slot="select-trigger"][data-disabled],
-  [data-slot="field-control"]:disabled,
-  [data-slot="number-field-input"]:disabled,
-  [data-slot="toolbar-input"]:disabled
+  [data-slot="field-control"][data-disabled],
+  [data-slot="number-field-input"][data-disabled],
+  [data-slot="toolbar-input"][data-disabled]
 ) {
   cursor: not-allowed;
   opacity: var(--sigvelo-recipe-disabled-opacity);
 }
 
+:where(
+  [data-slot="dropdown-menu-content"],
+  [data-slot="context-menu-content"],
+  [data-slot="menubar-content"],
+  [data-slot="select-content"],
+  [data-slot="combobox-content"],
+  [data-slot="autocomplete-content"],
+  [data-slot="popover-content"],
+  [data-slot="hover-card-content"],
+  [data-slot="tooltip-content"],
+  [data-slot="navigation-menu-popup"]
+) {
+  max-inline-size: var(--available-width);
+  max-block-size: var(--available-height);
+}
+
 :where(
   [data-slot="dropdown-menu-content"],
   [data-slot="context-menu-content"],
@@ -231,8 +295,6 @@
   [data-slot="alert-dialog-content"],
   [data-slot="toast"]
 ) {
-  max-inline-size: var(--available-width);
-  max-block-size: var(--available-height);
   padding: var(--sigvelo-recipe-surface-padding);
   font-family: inherit;
   color: var(--sigvelo-color-text);
@@ -269,7 +331,7 @@
   padding-inline: var(--sigvelo-recipe-row-padding-inline);
   font-family: inherit;
   font-size: var(--sigvelo-recipe-row-font-size);
-  line-height: 1.25;
+  line-height: var(--sigvelo-leading-compact);
   color: var(--sigvelo-color-text);
   text-decoration: none;
   border-radius: var(--sigvelo-recipe-row-radius);
@@ -420,7 +482,10 @@
   line-height: var(--sigvelo-leading-normal);
 }
 
-:where([data-slot="dropdown-menu-trigger"]:not([data-unstyled]), [data-slot="popover-trigger"]) {
+:where(
+  [data-slot="dropdown-menu-trigger"]:not([data-unstyled]),
+  [data-slot="popover-trigger"]:not([data-unstyled])
+) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -431,7 +496,7 @@
   font-family: inherit;
   font-size: var(--sigvelo-recipe-control-font-size);
   font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: 1.25;
+  line-height: var(--sigvelo-leading-compact);
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-color-canvas);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -444,17 +509,17 @@
     border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
-:where([data-slot="dropdown-menu-trigger"]:not([data-unstyled]), [data-slot="popover-trigger"]):is(
-  :hover,
-  [data-popup-open]
-) {
+:where(
+  [data-slot="dropdown-menu-trigger"]:not([data-unstyled]),
+  [data-slot="popover-trigger"]:not([data-unstyled])
+):is(:hover:not([data-disabled]), [data-popup-open]) {
   color: var(--sigvelo-color-neutral-text-on-subtle);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
 }
 
 :where(
   [data-slot="dropdown-menu-trigger"]:not([data-unstyled]),
-  [data-slot="popover-trigger"]
+  [data-slot="popover-trigger"]:not([data-unstyled])
 ):focus-visible {
   outline: none;
   box-shadow: var(--sigvelo-recipe-focus-shadow);
@@ -485,7 +550,7 @@
   [data-slot="combobox-clear"],
   [data-slot="autocomplete-trigger"],
   [data-slot="autocomplete-clear"]
-):hover {
+):hover:not([data-disabled]) {
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
 }
@@ -500,6 +565,16 @@
   box-shadow: var(--sigvelo-recipe-focus-shadow);
 }
 
+:where(
+  [data-slot="combobox-trigger"],
+  [data-slot="combobox-clear"],
+  [data-slot="autocomplete-trigger"],
+  [data-slot="autocomplete-clear"]
+)[data-disabled] {
+  cursor: not-allowed;
+  opacity: var(--sigvelo-recipe-disabled-opacity);
+}
+
 :where([data-slot="combobox-list"], [data-slot="autocomplete-list"]) {
   max-block-size: min(22.5rem, var(--available-height));
   padding: var(--sigvelo-spacing-1);

package/dist/styles/scroll-area.css

@@ -1,13 +1,10 @@
 .scroll-area {
-  position: relative;
   overflow: hidden;
 }
 
 .scroll-area__viewport {
   inline-size: 100%;
   block-size: 100%;
-  overflow: auto;
-  scrollbar-width: none;
 }
 
 .scroll-area__viewport:focus-visible {
@@ -15,12 +12,7 @@
   outline-offset: -2px;
 }
 
-.scroll-area__viewport::-webkit-scrollbar {
-  display: none;
-}
-
 .scroll-area__scrollbar {
-  position: absolute;
   display: flex;
   padding: var(--sigvelo-spacing-0-5);
   background-color: transparent;
@@ -29,8 +21,6 @@
   transition:
     opacity var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
     background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
-  user-select: none;
-  touch-action: none;
 }
 
 .scroll-area__scrollbar:is([data-hovering], [data-scrolling]) {
@@ -47,21 +37,16 @@
 }
 
 .scroll-area__scrollbar[data-orientation="vertical"] {
-  inset-block: 0;
-  inset-inline-end: 0;
   inline-size: var(--sigvelo-spacing-2-5);
   flex-direction: column;
 }
 
 .scroll-area__scrollbar[data-orientation="horizontal"] {
-  inset-inline: 0;
-  inset-block-end: 0;
   block-size: var(--sigvelo-spacing-2-5);
   flex-direction: row;
 }
 
 .scroll-area__thumb {
-  flex: 1;
   background-color: color-mix(in oklab, var(--sigvelo-color-text-muted), transparent 70%);
   border-radius: var(--sigvelo-radius-full);
   transition: background-color var(--sigvelo-motion-duration-interaction)
@@ -77,8 +62,5 @@
 }
 
 .scroll-area__corner {
-  position: absolute;
-  inset-inline-end: 0;
-  inset-block-end: 0;
   background-color: color-mix(in oklab, var(--sigvelo-color-neutral-bg-subtle), transparent 50%);
 }

package/dist/styles/select.css

@@ -5,7 +5,7 @@
   font-family: inherit;
   font-size: var(--sigvelo-text-sm);
   font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: 1;
+  line-height: var(--sigvelo-leading-none);
 }
 
 .select__trigger {
@@ -39,13 +39,6 @@
   block-size: var(--sigvelo-recipe-control-icon-size);
 }
 
-.select__trigger--sm {
-  --sigvelo-recipe-control-height: var(--sigvelo-control-height-sm);
-  --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);
-}
-
 .select__popup {
   --sigvelo-recipe-surface-padding: 0;
   --sigvelo-recipe-popup-min-inline-size: 8rem;
@@ -55,7 +48,11 @@
 }
 
 .select__list {
+  position: relative;
+  max-block-size: var(--available-height);
   padding: var(--sigvelo-spacing-1);
+  overflow-y: auto;
+  scroll-padding-block: var(--sigvelo-spacing-6);
 }
 
 .select__option {

package/dist/styles/slider.css

@@ -46,7 +46,6 @@
 }
 
 .slider__track {
-  position: relative;
   display: flex;
   align-items: center;
   inline-size: 100%;

package/dist/styles/stepper.css

@@ -70,7 +70,7 @@
   box-shadow: var(--sigvelo-recipe-focus-shadow);
 }
 
-.stepper__trigger:disabled {
+.stepper__trigger[data-disabled] {
   cursor: not-allowed;
 }
 
@@ -85,7 +85,7 @@
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-bold);
-  line-height: 1;
+  line-height: var(--sigvelo-leading-none);
   font-variant-numeric: tabular-nums;
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -159,7 +159,7 @@
   color: var(--sigvelo-color-text);
   font-size: var(--sigvelo-text-sm);
   font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: 1.2;
+  line-height: var(--sigvelo-leading-tight);
 }
 
 .stepper__title[data-state="inactive"] {
@@ -202,7 +202,7 @@
   border-radius: var(--sigvelo-radius-md);
 }
 
-.stepper__content--hidden {
+.stepper__content[data-hidden] {
   display: none;
 }
 

package/dist/styles/streamdown.css

@@ -64,7 +64,7 @@ button[data-streamdown="link"] {
   margin-block: var(--sigvelo-spacing-3) var(--sigvelo-spacing-1-5);
   font-size: 1.125em;
   font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: 1.25;
+  line-height: var(--sigvelo-leading-compact);
 }
 
 [data-streamdown="heading-1"],

package/dist/styles/subagent-run.css

@@ -88,7 +88,7 @@
   gap: var(--sigvelo-spacing-3);
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-xs);
-  line-height: 1.5;
+  line-height: var(--sigvelo-leading-normal);
 }
 
 .subagent-run__progress-label > :first-child {
@@ -115,7 +115,7 @@
   gap: var(--sigvelo-spacing-2);
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-compact);
-  line-height: 1.5;
+  line-height: var(--sigvelo-leading-normal);
 }
 
 .subagent-run__milestone::before {
@@ -129,13 +129,6 @@
   background-color: var(--sigvelo-color-neutral-bg-subtle);
 }
 
-.subagent-run__actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--sigvelo-spacing-2);
-  justify-content: flex-end;
-}
-
 @media (forced-colors: active) {
   .subagent-run__milestone::before {
     border-color: CanvasText;

package/dist/styles/switch.css

@@ -40,11 +40,11 @@
   background-color: color-mix(in oklab, var(--sigvelo-color-primary-bg), transparent 10%);
 }
 
-.switch:is([aria-invalid="true"], [data-invalid="true"], [data-invalid=""]) {
+.switch:is([aria-invalid="true"], [data-invalid]) {
   box-shadow: inset 0 0 0 var(--sigvelo-border-width) var(--sigvelo-color-danger-bg);
 }
 
-.switch:is([aria-invalid="true"], [data-invalid="true"], [data-invalid=""]):focus-visible {
+.switch:is([aria-invalid="true"], [data-invalid]):focus-visible {
   box-shadow:
     inset 0 0 0 var(--sigvelo-border-width) var(--sigvelo-color-danger-bg),
     var(--sigvelo-recipe-invalid-focus-shadow);

package/dist/styles/tabs.css

@@ -3,6 +3,10 @@
   flex-direction: column;
 }
 
+.tabs[data-orientation="vertical"] {
+  flex-direction: row;
+}
+
 .tabs--bordered {
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-muted);
@@ -20,22 +24,43 @@
   padding-inline: var(--sigvelo-spacing-1);
 }
 
+.tabs__list[data-orientation="vertical"] {
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  border-block-end: none;
+  border-inline-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
+  padding-block: var(--sigvelo-spacing-1);
+  padding-inline: 0;
+}
+
 .tabs__list--line {
   gap: var(--sigvelo-spacing-2);
   border-block-end-color: transparent;
   padding-inline: 0;
 }
 
+.tabs__list--line[data-orientation="vertical"] {
+  border-inline-end-color: transparent;
+  padding-block: 0;
+}
+
 .tabs--bordered .tabs__list {
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   border-block-end: none;
   padding: var(--sigvelo-spacing-1);
 }
 
+.tabs--bordered .tabs__list[data-orientation="vertical"] {
+  border-inline-end: none;
+}
+
 .tabs__tab {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  min-inline-size: 0;
   min-block-size: var(--sigvelo-recipe-control-height);
   padding-block: 0;
   padding-inline: var(--sigvelo-recipe-control-padding-inline);
@@ -54,6 +79,14 @@
     background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
+.tabs__tab[data-orientation="vertical"] {
+  justify-content: flex-start;
+  border-block-end: none;
+  border-inline-end: calc(var(--sigvelo-border-width) * 2) solid transparent;
+  margin-block-end: 0;
+  margin-inline-end: calc(var(--sigvelo-border-width) * -1);
+}
+
 .tabs__tab:hover:not([data-disabled]) {
   color: var(--sigvelo-color-text);
 }
@@ -68,6 +101,10 @@
   border-block-end-color: var(--sigvelo-color-primary-bg);
 }
 
+.tabs__tab[data-orientation="vertical"][data-active] {
+  border-inline-end-color: var(--sigvelo-color-primary-bg);
+}
+
 .tabs__indicator {
   position: absolute;
   z-index: 1;
@@ -83,10 +120,27 @@
     translate var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-change);
 }
 
+.tabs__indicator[data-orientation="vertical"] {
+  inset-block-start: 0;
+  inset-block-end: auto;
+  inset-inline-start: auto;
+  inset-inline-end: 0;
+  inline-size: calc(var(--sigvelo-border-width) * 2);
+  block-size: var(--active-tab-height);
+  translate: 0 var(--active-tab-top);
+  transition:
+    block-size var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-change),
+    translate var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-change);
+}
+
 .tabs__list:has(> .tabs__indicator) .tabs__tab[data-active] {
   border-block-end-color: transparent;
 }
 
+.tabs__list:has(> .tabs__indicator) .tabs__tab[data-orientation="vertical"][data-active] {
+  border-inline-end-color: transparent;
+}
+
 .tabs__tab[data-disabled] {
   opacity: var(--sigvelo-recipe-disabled-opacity);
   cursor: not-allowed;
@@ -98,6 +152,11 @@
   margin-block-end: 0;
 }
 
+.tabs--bordered .tabs__tab[data-orientation="vertical"] {
+  border-inline-end: none;
+  margin-inline-end: 0;
+}
+
 .tabs--bordered .tabs__tab[data-active] {
   background-color: var(--sigvelo-color-canvas);
   color: var(--sigvelo-color-text);
@@ -158,7 +217,3 @@
 :root[data-motion="reduce"] .tabs__indicator {
   transition: none;
 }
-
-.tabs__tab {
-  min-inline-size: 0;
-}

package/dist/styles/task.css

@@ -72,7 +72,7 @@
   position: relative;
   font-size: var(--sigvelo-text-compact);
   color: var(--sigvelo-color-text);
-  line-height: 1.6;
+  line-height: var(--sigvelo-leading-body);
 }
 
 .task__item::before {

package/dist/styles/terminal.css

@@ -29,10 +29,6 @@
   color: var(--sigvelo-color-neutral-300);
 }
 
-.terminal__status {
-  /* Badge handles styling */
-}
-
 .terminal__actions {
   display: inline-flex;
   align-items: center;
@@ -63,7 +59,7 @@
   margin: 0;
   font-family: var(--sigvelo-font-mono);
   font-size: var(--sigvelo-text-xs);
-  line-height: 1.6;
+  line-height: var(--sigvelo-leading-body);
   color: var(--sigvelo-color-neutral-100);
   white-space: pre-wrap;
   word-break: break-word;

package/dist/styles/theme-mode-control.css

@@ -25,7 +25,7 @@
   font-family: inherit;
   font-size: var(--sigvelo-text-sm);
   font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: 1;
+  line-height: var(--sigvelo-leading-none);
   transition:
     color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
     background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),

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

@@ -52,7 +52,7 @@
   font-size: var(--sigvelo-density-compact-control-font-size);
   font-variant-numeric: tabular-nums;
   font-weight: var(--sigvelo-font-weight-normal);
-  line-height: 1;
+  line-height: var(--sigvelo-leading-none);
 }
 
 .think-thread-status-indicators__item {

package/dist/styles/toast.css

@@ -65,41 +65,12 @@
   margin: 0;
   font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: 1.25;
+  line-height: var(--sigvelo-leading-compact);
   color: var(--sigvelo-color-text);
 }
 
 .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;
-  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-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-motion-duration-interaction)
-    var(--sigvelo-motion-ease-change);
-}
-
-.toast__action:hover {
-  background-color: color-mix(in oklab, var(--sigvelo-color-primary-bg), transparent 10%);
-}
-
-.toast__action:focus-visible {
-  outline: none;
-  box-shadow: var(--sigvelo-recipe-focus-shadow);
 }
 
 .toast__close {

package/dist/styles/toggle.css

@@ -9,7 +9,7 @@
   font-family: inherit;
   font-size: var(--sigvelo-recipe-control-font-size);
   font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: 1.25;
+  line-height: var(--sigvelo-leading-compact);
   color: var(--sigvelo-color-text);
   background-color: transparent;
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -29,27 +29,13 @@
   border-color: var(--sigvelo-color-neutral-border-muted);
 }
 
-.toggle--sm {
-  --sigvelo-recipe-control-height: var(--sigvelo-control-height-sm);
-  --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-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 {
+.toggle:hover:not([data-disabled]) {
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   color: var(--sigvelo-color-neutral-text-on-subtle);
 }
@@ -65,13 +51,13 @@
   border-color: var(--sigvelo-color-neutral-bg-subtle);
 }
 
-.toggle:active:not(:disabled) {
+.toggle:active:not([data-disabled]) {
   translate: 0 var(--sigvelo-motion-distance-xs);
 }
 
-.toggle:disabled {
+.toggle[data-disabled] {
   opacity: var(--sigvelo-recipe-disabled-opacity);
-  pointer-events: none;
+  cursor: not-allowed;
 }
 
 @media (prefers-reduced-motion: reduce) {