@mcp-b/react-components 0.1.1 → 0.1.2

package/dist/styles/shell.css

@@ -4,9 +4,10 @@
   flex-direction: column;
   height: 100%;
   min-height: 400px;
-  border-radius: var(--sigvelo-border-radius-md);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
-  background: var(--sigvelo-paper-color);
+  border-radius: var(--sigvelo-radius-md);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
+  background: var(--sigvelo-color-surface);
   overflow: hidden;
 }
 
@@ -14,16 +15,16 @@
   display: flex;
   align-items: center;
   padding: 0.75rem 1rem;
-  background: var(--sigvelo-neutral-fill-softer);
+  background: var(--sigvelo-color-neutral-bg-subtle);
   border-bottom: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-neutral-stroke-soft);
+    var(--sigvelo-color-neutral-border-muted);
 }
 
 .shell__heading {
   margin: 0;
   font-size: 0.9375rem;
   font-weight: var(--sigvelo-font-weight-semibold);
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
 }
 
 .shell__body {
@@ -39,9 +40,9 @@
   flex-direction: column;
   gap: 0.25rem;
   padding: 0.5rem;
-  background: var(--sigvelo-neutral-fill-softer);
+  background: var(--sigvelo-color-neutral-bg-subtle);
   border-right: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-neutral-stroke-soft);
+    var(--sigvelo-color-neutral-border-muted);
 }
 
 .shell__action {
@@ -52,9 +53,9 @@
   height: 2.5rem;
   padding: 0;
   border: none;
-  border-radius: var(--sigvelo-border-radius-md);
+  border-radius: var(--sigvelo-radius-md);
   background: transparent;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
   cursor: pointer;
   transition:
     background-color 0.15s ease,
@@ -62,18 +63,18 @@
 }
 
 .shell__action:hover {
-  background: var(--sigvelo-neutral-fill-softer);
-  color: var(--sigvelo-neutral-text-on-soft);
+  background: var(--sigvelo-color-neutral-bg-subtle);
+  color: var(--sigvelo-color-neutral-text-on-subtle);
 }
 
 .shell__action--active {
-  background: var(--sigvelo-primary-fill-mid);
-  color: var(--sigvelo-primary-text-on-mid);
+  background: var(--sigvelo-color-primary-bg);
+  color: var(--sigvelo-color-primary-text-on-bg);
 }
 
 .shell__action--active:hover {
-  background: color-mix(in oklab, var(--sigvelo-primary-fill-mid), black 5%);
-  color: var(--sigvelo-primary-text-on-mid);
+  background: color-mix(in oklab, var(--sigvelo-color-primary-bg), black 5%);
+  color: var(--sigvelo-color-primary-text-on-bg);
 }
 
 .shell__action svg {
@@ -87,9 +88,9 @@
   flex-direction: column;
   width: 260px;
   max-width: 100%;
-  background: var(--sigvelo-paper-color);
+  background: var(--sigvelo-color-surface);
   border-right: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-neutral-stroke-soft);
+    var(--sigvelo-color-neutral-border-muted);
   overflow: hidden;
 }
 
@@ -101,9 +102,9 @@
   padding: 0.75rem 1rem;
   font-size: 0.875rem;
   font-weight: var(--sigvelo-font-weight-bold);
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
   border-bottom: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-neutral-stroke-soft);
+    var(--sigvelo-color-neutral-border-muted);
 }
 
 .shell__panel-content {

package/dist/styles/slider.css

@@ -6,12 +6,18 @@
   width: 100%;
 }
 
+.slider[data-orientation="vertical"] {
+  width: auto;
+  height: 100%;
+  min-height: 11rem;
+}
+
 .slider__output {
-  font-family: var(--sigvelo-font-family);
+  font-family: var(--sigvelo-font-sans);
   font-size: 0.875rem;
   font-weight: var(--sigvelo-font-weight-semibold);
   font-variant-numeric: tabular-nums;
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
   text-align: end;
 }
 
@@ -24,6 +30,13 @@
   cursor: pointer;
 }
 
+.slider[data-orientation="vertical"] .slider__control {
+  justify-content: center;
+  width: 1.25rem;
+  height: 100%;
+  min-height: 11rem;
+}
+
 .slider[data-disabled] .slider__control {
   cursor: not-allowed;
 }
@@ -34,8 +47,14 @@
   align-items: center;
   width: 100%;
   height: 0.5rem;
-  background-color: var(--sigvelo-neutral-fill-softer);
-  border-radius: var(--sigvelo-border-radius-pill);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  border-radius: var(--sigvelo-radius-full);
+}
+
+.slider[data-orientation="vertical"] .slider__track {
+  justify-content: center;
+  width: 0.5rem;
+  height: 100%;
 }
 
 .slider[data-disabled] .slider__track {
@@ -44,8 +63,13 @@
 
 .slider__indicator {
   height: 100%;
-  background-color: var(--sigvelo-primary-fill-mid);
-  border-radius: var(--sigvelo-border-radius-pill);
+  background-color: var(--sigvelo-color-primary-bg);
+  border-radius: var(--sigvelo-radius-full);
+}
+
+.slider[data-orientation="vertical"] .slider__indicator {
+  width: 100%;
+  height: auto;
 }
 
 .slider__thumb {
@@ -54,9 +78,9 @@
   justify-content: center;
   width: 1.25rem;
   height: 1.25rem;
-  background-color: var(--sigvelo-background-color);
-  border: 2px solid var(--sigvelo-primary-fill-mid);
-  border-radius: var(--sigvelo-border-radius-pill);
+  background-color: var(--sigvelo-color-canvas);
+  border: 2px solid var(--sigvelo-color-primary-bg);
+  border-radius: var(--sigvelo-radius-full);
   cursor: grab;
   transition:
     box-shadow 150ms ease,
@@ -74,8 +98,8 @@
 .slider__thumb:focus-visible {
   outline: none;
   box-shadow:
-    0 0 0 2px var(--sigvelo-background-color),
-    0 0 0 4px var(--sigvelo-focus-color);
+    0 0 0 2px var(--sigvelo-color-canvas),
+    0 0 0 4px var(--sigvelo-color-focus);
 }
 
 .slider[data-disabled] .slider__thumb {

package/dist/styles/sources.css

@@ -2,8 +2,8 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  font-family: var(--sigvelo-font-family);
-  color: var(--sigvelo-text-body);
+  font-family: var(--sigvelo-font-sans);
+  color: var(--sigvelo-color-text);
 }
 
 .sources__trigger {
@@ -14,8 +14,8 @@
   padding-inline: 0.75rem;
   background-color: transparent;
   border: none;
-  border-radius: var(--sigvelo-border-radius-sm);
-  color: var(--sigvelo-text-muted);
+  border-radius: var(--sigvelo-radius-sm);
+  color: var(--sigvelo-color-text-muted);
   font-family: inherit;
   font-size: 0.8125rem;
   font-weight: var(--sigvelo-font-weight-semibold);
@@ -26,15 +26,15 @@
 }
 
 .sources__trigger:hover:not([data-disabled]) {
-  background-color: var(--sigvelo-neutral-fill-softer);
-  color: var(--sigvelo-text-body);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  color: var(--sigvelo-color-text);
 }
 
 .sources__trigger:focus-visible {
   outline: none;
   box-shadow:
-    0 0 0 2px var(--sigvelo-background-color),
-    0 0 0 4px var(--sigvelo-focus-color);
+    0 0 0 2px var(--sigvelo-color-canvas),
+    0 0 0 4px var(--sigvelo-color-focus);
 }
 
 .sources__trigger-icon {
@@ -92,11 +92,11 @@
   gap: 0.625rem;
   padding-block: 0.5rem;
   padding-inline: 0.75rem;
-  color: var(--sigvelo-text-body);
-  background-color: var(--sigvelo-paper-color);
+  color: var(--sigvelo-color-text);
+  background-color: var(--sigvelo-color-surface);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-neutral-stroke-softer);
-  border-radius: var(--sigvelo-border-radius-sm);
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-sm);
   text-decoration: none;
   transition:
     background-color 150ms ease,
@@ -104,22 +104,22 @@
 }
 
 .sources__link:hover {
-  background-color: var(--sigvelo-neutral-fill-softer);
-  border-color: var(--sigvelo-neutral-stroke-soft);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  border-color: var(--sigvelo-color-neutral-border-muted);
 }
 
 .sources__link:focus-visible {
   outline: none;
   box-shadow:
-    0 0 0 2px var(--sigvelo-background-color),
-    0 0 0 4px var(--sigvelo-focus-color);
+    0 0 0 2px var(--sigvelo-color-canvas),
+    0 0 0 4px var(--sigvelo-color-focus);
 }
 
 .sources__link-icon {
   display: inline-flex;
   flex-shrink: 0;
   margin-block-start: 0.125rem;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
 }
 
 .sources__link-body {
@@ -132,7 +132,7 @@
 .sources__link-title {
   font-size: 0.875rem;
   font-weight: var(--sigvelo-font-weight-semibold);
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -140,7 +140,7 @@
 
 .sources__link-description {
   font-size: 0.75rem;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
   line-height: 1.4;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -151,7 +151,7 @@
 
 .sources__link-host {
   font-size: 0.6875rem;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
   font-variant-numeric: tabular-nums;
 }
 

package/dist/styles/stepper.css

@@ -2,8 +2,8 @@
   display: grid;
   width: 100%;
   gap: 1rem;
-  color: var(--sigvelo-text-body);
-  font-family: var(--sigvelo-font-family);
+  color: var(--sigvelo-color-text);
+  font-family: var(--sigvelo-font-sans);
 }
 
 .stepper__nav {
@@ -56,7 +56,7 @@
   text-decoration: none;
   background: transparent;
   border: 0;
-  border-radius: var(--sigvelo-border-radius-pill);
+  border-radius: var(--sigvelo-radius-full);
   cursor: pointer;
 }
 
@@ -77,15 +77,15 @@
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
   font-size: 0.75rem;
   font-weight: var(--sigvelo-font-weight-bold);
   line-height: 1;
   font-variant-numeric: tabular-nums;
-  background-color: var(--sigvelo-neutral-fill-softer);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-neutral-stroke-softer);
-  border-radius: var(--sigvelo-border-radius-pill);
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-full);
   transition:
     background-color 150ms ease,
     border-color 150ms ease,
@@ -95,16 +95,16 @@
 
 .stepper__indicator[data-state="active"],
 .stepper__indicator[data-state="loading"] {
-  color: var(--sigvelo-primary-text-on-mid);
-  background-color: var(--sigvelo-primary-fill-mid);
-  border-color: var(--sigvelo-primary-fill-mid);
-  box-shadow: 0 0 0 4px color-mix(in oklab, var(--sigvelo-primary-fill-mid), transparent 84%);
+  color: var(--sigvelo-color-primary-text-on-bg);
+  background-color: var(--sigvelo-color-primary-bg);
+  border-color: var(--sigvelo-color-primary-bg);
+  box-shadow: 0 0 0 4px color-mix(in oklab, var(--sigvelo-color-primary-bg), transparent 84%);
 }
 
 .stepper__indicator[data-state="completed"] {
-  color: var(--sigvelo-success-text-on-mid);
-  background-color: var(--sigvelo-success-fill-mid);
-  border-color: var(--sigvelo-success-fill-mid);
+  color: var(--sigvelo-color-success-text-on-bg);
+  background-color: var(--sigvelo-color-success-bg);
+  border-color: var(--sigvelo-color-success-bg);
 }
 
 .stepper__indicator-content {
@@ -124,18 +124,18 @@
   flex: 1 1 auto;
   margin-block: 0.8125rem;
   margin-inline: 0.5rem;
-  background-color: var(--sigvelo-neutral-stroke-softer);
-  border-radius: var(--sigvelo-border-radius-pill);
+  background-color: var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-full);
   transition: background-color 150ms ease;
 }
 
 .stepper__separator[data-state="completed"] {
-  background-color: var(--sigvelo-success-fill-mid);
+  background-color: var(--sigvelo-color-success-bg);
 }
 
 .stepper__separator[data-state="active"],
 .stepper__separator[data-state="loading"] {
-  background-color: var(--sigvelo-primary-stroke-soft);
+  background-color: var(--sigvelo-color-primary-border-muted);
 }
 
 .stepper__nav[data-orientation="vertical"] .stepper__separator {
@@ -150,19 +150,19 @@
 
 .stepper__title {
   margin: 0;
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
   font-size: 0.875rem;
   font-weight: var(--sigvelo-font-weight-semibold);
   line-height: 1.2;
 }
 
 .stepper__title[data-state="inactive"] {
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
 }
 
 .stepper__description {
   margin-block-start: 0.1875rem;
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
   font-size: 0.8125rem;
   line-height: 1.35;
 }
@@ -180,7 +180,7 @@
 .stepper__content:focus-visible {
   outline: var(--sigvelo-focus-ring);
   outline-offset: var(--sigvelo-focus-offset);
-  border-radius: var(--sigvelo-border-radius-md);
+  border-radius: var(--sigvelo-radius-md);
 }
 
 .stepper__content--hidden {

package/dist/styles/switch.css

@@ -4,31 +4,47 @@
   align-items: center;
   width: 2.75rem;
   height: 1.5rem;
+  flex-shrink: 0;
   padding: 0.125rem;
-  background-color: var(--sigvelo-neutral-fill-softer);
-  border: none;
-  border-radius: var(--sigvelo-border-radius-pill);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width) transparent;
+  border-radius: var(--sigvelo-radius-full);
+  outline: none;
   cursor: pointer;
-  transition: background-color 150ms ease;
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease,
+    box-shadow 150ms ease;
 }
 
 .switch:hover:not([data-disabled]) {
-  background-color: color-mix(in oklab, var(--sigvelo-neutral-fill-softer), transparent 20%);
+  background-color: color-mix(in oklab, var(--sigvelo-color-neutral-bg-subtle), transparent 20%);
 }
 
 .switch:focus-visible {
   outline: none;
   box-shadow:
-    0 0 0 2px var(--sigvelo-background-color),
-    0 0 0 4px var(--sigvelo-focus-color);
+    0 0 0 2px var(--sigvelo-color-canvas),
+    0 0 0 4px var(--sigvelo-color-focus);
 }
 
 .switch[data-checked] {
-  background-color: var(--sigvelo-primary-fill-mid);
+  background-color: var(--sigvelo-color-primary-bg);
 }
 
 .switch[data-checked]:hover:not([data-disabled]) {
-  background-color: color-mix(in oklab, var(--sigvelo-primary-fill-mid), transparent 10%);
+  background-color: color-mix(in oklab, var(--sigvelo-color-primary-bg), transparent 10%);
+}
+
+.switch:is([aria-invalid="true"], [data-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 {
+  box-shadow:
+    inset 0 0 0 var(--sigvelo-border-width) var(--sigvelo-color-danger-bg),
+    0 0 0 2px var(--sigvelo-color-canvas),
+    0 0 0 4px color-mix(in oklab, var(--sigvelo-color-danger-bg), transparent 80%);
 }
 
 .switch[data-disabled] {
@@ -55,11 +71,11 @@
   display: block;
   width: 1.25rem;
   height: 1.25rem;
-  background-color: var(--sigvelo-background-color);
-  border-radius: var(--sigvelo-border-radius-pill);
+  background-color: var(--sigvelo-color-canvas);
+  border-radius: var(--sigvelo-radius-full);
   box-shadow:
-    0 1px 3px 0 color-mix(in oklab, var(--sigvelo-text-body), transparent 90%),
-    0 1px 2px -1px color-mix(in oklab, var(--sigvelo-text-body), transparent 90%);
+    0 1px 3px 0 color-mix(in oklab, var(--sigvelo-color-text), transparent 90%),
+    0 1px 2px -1px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%);
   transition: transform 150ms ease;
 }
 

package/dist/styles/tabs.css

@@ -5,20 +5,27 @@
 }
 
 .tabs--bordered {
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
-  border-radius: var(--sigvelo-border-radius-md);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
+  border-radius: var(--sigvelo-radius-md);
   overflow: hidden;
 }
 
 .tabs__list {
   display: flex;
   gap: 0.25rem;
-  border-bottom: 1px solid var(--sigvelo-neutral-stroke-soft);
+  border-bottom: 1px solid var(--sigvelo-color-neutral-border-muted);
   padding-inline: 0.25rem;
 }
 
+.tabs__list--line {
+  gap: 0.5rem;
+  border-bottom-color: transparent;
+  padding-inline: 0;
+}
+
 .tabs--bordered .tabs__list {
-  background-color: var(--sigvelo-neutral-fill-softer);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
   border-bottom: none;
   padding: 0.25rem;
 }
@@ -29,10 +36,10 @@
   justify-content: center;
   padding-block: 0.5rem;
   padding-inline: 1rem;
-  font-family: var(--sigvelo-font-family);
+  font-family: var(--sigvelo-font-sans);
   font-size: 0.875rem;
   font-weight: var(--sigvelo-font-weight-semibold);
-  color: var(--sigvelo-text-muted);
+  color: var(--sigvelo-color-text-muted);
   background-color: transparent;
   border: none;
   border-block-end: 2px solid transparent;
@@ -45,19 +52,19 @@
 }
 
 .tabs__tab:hover:not([data-disabled]) {
-  color: var(--sigvelo-text-body);
+  color: var(--sigvelo-color-text);
 }
 
 .tabs__tab:focus-visible {
   outline: none;
   box-shadow:
-    0 0 0 2px var(--sigvelo-background-color),
-    0 0 0 4px var(--sigvelo-focus-color);
+    0 0 0 2px var(--sigvelo-color-canvas),
+    0 0 0 4px var(--sigvelo-color-focus);
 }
 
 .tabs__tab[data-selected] {
-  color: var(--sigvelo-text-body);
-  border-block-end-color: var(--sigvelo-primary-fill-mid);
+  color: var(--sigvelo-color-text);
+  border-block-end-color: var(--sigvelo-color-primary-bg);
 }
 
 .tabs__tab[data-disabled] {
@@ -67,13 +74,13 @@
 
 .tabs--bordered .tabs__tab {
   border-block-end: none;
-  border-radius: calc(var(--sigvelo-border-radius-md) - 2px);
+  border-radius: calc(var(--sigvelo-radius-md) - 2px);
   margin-block-end: 0;
 }
 
 .tabs--bordered .tabs__tab[data-selected] {
-  background-color: var(--sigvelo-background-color);
-  color: var(--sigvelo-text-body);
+  background-color: var(--sigvelo-color-canvas);
+  color: var(--sigvelo-color-text);
 }
 
 .tabs__panel {
@@ -86,8 +93,8 @@
 
 .tabs__panel:focus-visible {
   outline: none;
-  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--sigvelo-focus-color), transparent 80%);
-  border-radius: var(--sigvelo-border-radius-md);
+  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--sigvelo-color-focus), transparent 80%);
+  border-radius: var(--sigvelo-radius-md);
 }
 
 @container (max-width: 24rem) {