@nordmanai/nif 0.2.5 → 0.2.9

package/registry/ui/components/nm-button-group/nm-button-group.css

@@ -88,7 +88,7 @@
     gap: var(--nm-space-8);
     min-height: var(--control-h);
     padding: 0 var(--control-px);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-control-r);
     background: var(--nm-raised);
     color: var(--nm-fg-muted);

package/registry/ui/components/nm-calendar/nm-calendar.css

@@ -126,7 +126,7 @@
   }
 
   .nm-calendar__day--today .nm-calendar__day-button {
-    border-color: var(--nm-stroke);
+    border-color: var(--nm-border-stroke);
   }
 
   .nm-calendar__day--outside .nm-calendar__day-button {

package/registry/ui/components/nm-card/nm-card.css

@@ -6,7 +6,7 @@
     gap: var(--nm-space-12);
     min-width: 0;
     padding: var(--nm-card-pad);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-radius-lg);
     background: var(--nm-raised);
     color: var(--nm-fg);
@@ -39,7 +39,7 @@
   }
 
   .nm-card[data-interactive]:hover:not([data-disabled]) {
-    border-color: var(--nm-stroke);
+    border-color: var(--nm-border-stroke);
     background: var(--nm-inset);
   }
 

package/registry/ui/components/nm-chatbox/nm-chatbox.css

@@ -407,7 +407,7 @@
     align-items: center;
     gap: var(--nm-space-4);
     padding: var(--nm-icon-pad);
-    border: var(--nm-rule) solid var(--nm-line);
+    border: var(--nm-rule) solid var(--nm-border);
     border-radius: calc((var(--nm-icon-control) + var(--nm-rule) * 2) / 2);
     background: transparent;
     color: var(--nm-fg-subtle);

package/registry/ui/components/nm-checkbox/nm-checkbox.css

@@ -8,9 +8,9 @@
     width: var(--nm-icon-button);
     height: var(--nm-icon-button);
     padding: 0;
-    border: var(--nm-rule) solid var(--nm-stroke);
+    border: var(--nm-rule) solid var(--nm-border-stroke);
     border-radius: var(--nm-radius-sm);
-    background: transparent;
+    background: var(--nm-borderless-fill);
     color: var(--nm-canvas);
     cursor: pointer;
     transition:

package/registry/ui/components/nm-chip/nm-chip.css

@@ -62,7 +62,7 @@
   }
 
   .nm-chip[data-tone='outline'] {
-    border-color: var(--nm-line-strong);
+    border-color: var(--nm-border-strong);
     background: transparent;
     color: var(--nm-fg);
   }

package/registry/ui/components/nm-code-block/nm-code-block.css

@@ -5,7 +5,7 @@
     width: 100%;
     min-width: 0;
     overflow: hidden;
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-radius-lg);
     background: var(--nm-inset);
     color: var(--nm-fg);

package/registry/ui/components/nm-collection/nm-collection.css

@@ -96,7 +96,7 @@
     justify-content: space-between;
     gap: var(--nm-space-8);
     padding: var(--table-cell-py) var(--table-gap);
-    border-bottom: var(--nm-rule) solid var(--nm-line);
+    border-bottom: var(--nm-rule) solid var(--nm-border);
     border-radius: 0;
     color: var(--nm-fg-subtle);
     font-size: var(--table-fs);
@@ -111,7 +111,7 @@
   .nm-collection__head:hover,
   .nm-collection__head:focus-within {
     padding-block: var(--table-head-py);
-    border-bottom-color: var(--nm-line-strong);
+    border-bottom-color: var(--nm-border-strong);
     background: transparent;
     color: var(--nm-fg-subtle);
     font-size: var(--table-head-fs);

package/registry/ui/components/nm-color-picker/nm-color-picker.css

@@ -9,7 +9,7 @@
     box-sizing: border-box;
     width: var(--nm-icon-button);
     height: var(--nm-icon-button);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-radius-sm);
     background: var(--nm-swatch);
   }

package/registry/ui/components/nm-combobox/nm-combobox.css

@@ -7,7 +7,7 @@
     min-width: 0;
     height: var(--nm-field-h);
     padding: 0 var(--control-px);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-control-r);
     background: var(--nm-raised);
     color: var(--nm-fg);
@@ -23,7 +23,7 @@
   }
 
   .nm-combobox__group:not([data-bare]):focus-within {
-    border-color: var(--nm-stroke);
+    border-color: var(--nm-border-stroke);
   }
 
   .nm-combobox__input {

package/registry/ui/components/nm-command/nm-command.css

@@ -7,7 +7,7 @@
     width: 100%;
     padding: var(--nm-space-12) var(--nm-space-24) var(--nm-space-24);
     overflow: hidden;
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-radius-lg);
     background: var(--nm-panel);
     color: var(--nm-fg);

package/registry/ui/components/nm-composer/nm-composer.css

@@ -6,7 +6,7 @@
     gap: var(--nm-space-24);
     width: 100%;
     padding: var(--nm-space-12);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-radius-lg);
     background: var(--nm-raised);
     color: var(--nm-fg);
@@ -15,7 +15,7 @@
   }
 
   .nm-composer:focus-within {
-    border-color: var(--nm-stroke);
+    border-color: var(--nm-border-stroke);
   }
 
   .nm-composer[data-disabled='true'] {
@@ -217,7 +217,7 @@
     margin: 0;
     padding: 0 0 var(--nm-space-12);
     list-style: none;
-    border-bottom: var(--nm-rule) solid var(--nm-line);
+    border-bottom: var(--nm-rule) solid var(--nm-border);
   }
 
   .nm-composer__queued {

package/registry/ui/components/nm-date-picker/nm-date-picker.css

@@ -7,7 +7,7 @@
     min-width: var(--nm-width-date);
     height: var(--nm-field-h);
     padding: 0 var(--control-px);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-control-r);
     background: var(--nm-raised);
     color: var(--nm-fg);
@@ -28,7 +28,7 @@
   }
 
   .nm-picker__trigger:hover:not(:disabled) {
-    border-color: var(--nm-stroke);
+    border-color: var(--nm-border-stroke);
   }
 
   .nm-picker__trigger:focus-visible,

package/registry/ui/components/nm-dialog/nm-dialog.css

@@ -23,7 +23,7 @@
     width: min(var(--nm-width-dialog), calc(100% - var(--nm-space-24) * 2));
     max-height: 70%;
     overflow: hidden;
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-radius-lg);
     background: var(--nm-panel);
     color: var(--nm-fg);
@@ -56,6 +56,21 @@
     color: var(--nm-fg-muted);
     font-size: var(--nm-type-ui-sm);
   }
+  .nm-dialog__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-12);
+    min-height: 0;
+    padding: var(--nm-space-16) var(--nm-space-24) 0;
+    overflow: auto;
+  }
+  .nm-dialog__footer {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--nm-space-8);
+    justify-content: flex-end;
+    padding: var(--nm-space-24);
+  }
 
   .nm-dialog[data-size='full'] {
     inset: 0;

package/registry/ui/components/nm-dialog/nm-dialog.tsx

@@ -31,6 +31,14 @@ export function NmDialogHeader({ className, ...props }: ComponentProps<'div'>) {
   return <div data-slot="dialog-header" className={nmClass('nm-dialog__header', className)} {...props} />;
 }
 
+/** The content between the header and the footer. It scrolls when the dialog is full. */
+export function NmDialogBody({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="dialog-body" className={nmClass('nm-dialog__body', className)} {...props} />;
+}
+/** The actions at the end, right-aligned. */
+export function NmDialogFooter({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="dialog-footer" className={nmClass('nm-dialog__footer', className)} {...props} />;
+}
 export function NmDialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
   return <DialogPrimitive.Title data-slot="dialog-title" className={nmClass('nm-dialog__title', className as string)} {...props} />;
 }

package/registry/ui/components/nm-drawer/nm-drawer.css

@@ -0,0 +1,70 @@
+  .nm-drawer__backdrop {
+    position: fixed;
+    z-index: var(--nm-menu-z);
+    inset: 0;
+    background: rgb(var(--nm-canvas-rgb) / 0.7);
+    transition: opacity var(--reveal) var(--ease);
+  }
+  .nm-drawer__backdrop[data-starting-style],
+  .nm-drawer__backdrop[data-ending-style] {
+    opacity: 0;
+  }
+  /* The panel sits on an edge and takes the whole height. It slides in from its own edge. */
+  .nm-drawer {
+    position: fixed;
+    z-index: var(--nm-menu-z);
+    inset-block: 0;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    width: var(--nm-width-drawer);
+    max-width: 100%;
+    background: var(--nm-raised);
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui);
+    outline: none;
+    /* The motion popup owns transform: it slides the panel in from its side. */
+    transition: opacity var(--reveal) var(--ease);
+  }
+  .nm-drawer[data-side='left'] {
+    inset-inline-start: 0;
+    border-inline-end: var(--nm-rule) solid var(--nm-border-strong);
+  }
+  .nm-drawer[data-side='right'] {
+    inset-inline-end: 0;
+    border-inline-start: var(--nm-rule) solid var(--nm-border-strong);
+  }
+  .nm-drawer[data-starting-style],
+  .nm-drawer[data-ending-style] {
+    opacity: 0;
+  }
+  .nm-drawer__header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-4);
+    padding: var(--nm-space-16);
+  }
+  .nm-drawer__footer {
+    display: flex;
+    gap: var(--nm-space-8);
+    justify-content: flex-end;
+    margin-top: auto;
+    padding: var(--nm-space-16);
+  }
+  .nm-drawer__title {
+    margin: 0;
+    font-size: var(--nm-type-body);
+    font-weight: var(--nm-weight-medium);
+  }
+  .nm-drawer__description {
+    margin: 0;
+    color: var(--nm-fg-muted);
+    font-size: var(--nm-type-ui-sm);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .nm-drawer,
+    .nm-drawer__backdrop {
+      transition: none;
+    }
+  }

package/registry/ui/components/nm-drawer/nm-drawer.tsx

@@ -0,0 +1,41 @@
+import type { ComponentProps } from 'react';
+import { Dialog as DialogPrimitive } from '../../lib/nm-motion.ts';
+import { nmClass } from '../../lib/nm-class.ts';
+import type { NmDrawerSide } from '../../config/nm-drawer.ts';
+
+/**
+ * A panel that slides in from an edge, over the page, with a scrim behind it. The shadcn Sheet, on the Base UI
+ * Dialog, styled by NIF tokens. For navigation on a phone, filters, or a form that should not leave the page.
+ */
+export function NmDrawer(props: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="drawer" {...props} />;
+}
+export function NmDrawerTrigger(props: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+export function NmDrawerClose(props: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+/** The panel. `side` is the edge it comes from. Its width is the --nm-width-drawer token. */
+export function NmDrawerContent({ className, children, side = 'left', ...props }: DialogPrimitive.Popup.Props & { side?: NmDrawerSide }) {
+  return (
+    <DialogPrimitive.Portal>
+      <DialogPrimitive.Backdrop data-slot="drawer-overlay" className="nm-drawer__backdrop" />
+      <DialogPrimitive.Popup data-slot="drawer-content" data-side={side} from={side} className={nmClass('nm-drawer', className as string)} {...props}>
+        {children}
+      </DialogPrimitive.Popup>
+    </DialogPrimitive.Portal>
+  );
+}
+export function NmDrawerHeader({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="drawer-header" className={nmClass('nm-drawer__header', className)} {...props} />;
+}
+export function NmDrawerFooter({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="drawer-footer" className={nmClass('nm-drawer__footer', className)} {...props} />;
+}
+export function NmDrawerTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return <DialogPrimitive.Title data-slot="drawer-title" className={nmClass('nm-drawer__title', className as string)} {...props} />;
+}
+export function NmDrawerDescription({ className, ...props }: DialogPrimitive.Description.Props) {
+  return <DialogPrimitive.Description data-slot="drawer-description" className={nmClass('nm-drawer__description', className as string)} {...props} />;
+}

package/registry/ui/components/nm-dropdown/nm-dropdown.css

@@ -83,7 +83,7 @@
     max-height: var(--nm-dropdown-max);
     margin: 0;
     padding: var(--nm-list-pad);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-menu-radius);
     background: var(--nm-panel);
     color: var(--nm-fg);
@@ -160,7 +160,7 @@
     height: 0;
     margin: var(--nm-space-8) 0;
     border: 0;
-    border-top: var(--nm-rule) solid var(--nm-line);
+    border-top: var(--nm-rule) solid var(--nm-border);
     background: transparent;
   }
 

package/registry/ui/components/nm-dropdown-menu/nm-dropdown-menu.css

@@ -15,7 +15,7 @@
     padding: var(--nm-list-pad);
     overflow-x: hidden;
     overflow-y: auto;
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-menu-radius);
     background: var(--nm-panel);
     color: var(--nm-fg);

package/registry/ui/components/nm-field/nm-field.css

@@ -7,7 +7,7 @@
     box-sizing: border-box;
     min-height: var(--nm-field-h);
     padding: 0 var(--control-px);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-control-r);
     background: var(--nm-raised);
     color: var(--nm-fg-subtle);
@@ -22,7 +22,7 @@
 
   .nm-field:not(.nm-field--stack):focus-within,
   .nm-field__box:focus-within {
-    border-color: var(--nm-stroke);
+    border-color: var(--nm-border-stroke);
   }
 
   .nm-field__icon,
@@ -131,7 +131,7 @@
     min-height: var(--nm-field-h);
     max-height: var(--nm-field-h);
     padding: 0 var(--control-px);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-control-r);
     background: var(--nm-raised);
   }
@@ -256,7 +256,7 @@
     width: var(--nm-field-h);
     height: var(--nm-field-h);
     padding: 0;
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-control-r);
     background: var(--nm-raised);
     color: var(--nm-fg);
@@ -279,7 +279,7 @@
     padding: var(--nm-menu-pad);
     overflow: auto;
     list-style: none;
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-control-menu-radius);
     background: var(--nm-panel);
     max-height: var(--nm-dropdown-max);
@@ -290,7 +290,7 @@
     align-items: center;
     gap: var(--nm-space-8);
     padding: var(--nm-space-8) var(--nm-control-option-inset);
-    border-bottom: var(--nm-rule) solid var(--nm-line);
+    border-bottom: var(--nm-rule) solid var(--nm-border);
   }
 
   .nm-field__search-input {

package/registry/ui/components/nm-hover-card/nm-hover-card.css

@@ -9,7 +9,7 @@
     gap: var(--nm-space-12);
     width: var(--nm-width-popup-sm);
     padding: var(--nm-panel-pad);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-control-menu-radius);
     background: var(--nm-panel);
     color: var(--nm-fg);

package/registry/ui/components/nm-input/nm-input.css

@@ -5,7 +5,7 @@
     min-width: 0;
     height: var(--nm-field-h);
     padding: 0 var(--control-px);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-control-r);
     background: var(--nm-raised);
     color: var(--nm-fg);
@@ -24,7 +24,7 @@
   }
 
   .nm-input:hover:not(:disabled) {
-    border-color: var(--nm-stroke);
+    border-color: var(--nm-border-stroke);
   }
 
   .nm-input:focus-visible {
@@ -51,7 +51,7 @@
     margin-right: var(--control-px);
     padding: 0 var(--control-px);
     border: 0;
-    border-right: var(--nm-rule) solid var(--nm-line-strong);
+    border-right: var(--nm-rule) solid var(--nm-border-strong);
     background: var(--nm-panel);
     color: var(--nm-fg);
     font: inherit;

package/registry/ui/components/nm-input-group/nm-input-group.css

@@ -4,14 +4,14 @@
     box-sizing: border-box;
     width: 100%;
     height: var(--nm-field-h);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-control-r);
     background: var(--nm-raised);
     transition: border-color 0.15s;
   }
 
   .nm-input-group:hover {
-    border-color: var(--nm-stroke);
+    border-color: var(--nm-border-stroke);
   }
 
   .nm-input-group:focus-within {

package/registry/ui/components/nm-message/nm-message.css

@@ -169,7 +169,7 @@
     margin-top: 0.75em;
     margin-bottom: 0.75em;
     color: var(--nm-fg-subtle);
-    border-left-color: var(--nm-line);
+    border-left-color: var(--nm-border);
     font-weight: var(--nm-weight-regular);
   }
 

package/registry/ui/components/nm-native-select/nm-native-select.css

@@ -8,7 +8,7 @@
     width: 100%;
     height: var(--nm-field-h);
     padding: 0 calc(var(--control-px) + var(--nm-icon-button) + var(--nm-space-8)) 0 var(--control-px);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-control-r);
     background: var(--nm-raised);
     color: var(--nm-fg);
@@ -21,7 +21,7 @@
   }
 
   .nm-native-select__control:hover:not(:disabled) {
-    border-color: var(--nm-stroke);
+    border-color: var(--nm-border-stroke);
   }
 
   .nm-native-select__control:focus-visible {

package/registry/ui/components/nm-popover/nm-popover.css

@@ -9,7 +9,7 @@
     gap: var(--nm-space-12);
     width: var(--nm-width-popup);
     padding: var(--nm-panel-pad);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-control-menu-radius);
     background: var(--nm-panel);
     color: var(--nm-fg);

package/registry/ui/components/nm-prose/nm-prose.css

@@ -45,7 +45,7 @@
 
   .nm-prose blockquote {
     padding-inline-start: var(--nm-space-12);
-    border-inline-start: var(--nm-space-2) solid var(--nm-line-strong);
+    border-inline-start: var(--nm-space-2) solid var(--nm-border-strong);
     color: var(--nm-fg-muted);
   }
 
@@ -66,7 +66,7 @@
   .nm-prose hr {
     margin: var(--nm-space-24) 0;
     border: 0;
-    border-top: var(--nm-rule) solid var(--nm-divider);
+    border-top: var(--nm-rule) solid var(--nm-border-divider);
   }
 
   .nm-prose table {
@@ -76,6 +76,6 @@
 
   .nm-prose :is(th, td) {
     padding: var(--nm-space-8) var(--nm-space-12);
-    border-bottom: var(--nm-rule) solid var(--nm-line);
+    border-bottom: var(--nm-rule) solid var(--nm-border);
     text-align: start;
   }

package/registry/ui/components/nm-questionnaire/nm-questionnaire.css

@@ -12,7 +12,7 @@
 
   .nm-questionnaire--card {
     padding: var(--nm-space-24);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-radius-lg);
     background: var(--nm-raised);
   }
@@ -68,7 +68,7 @@
     gap: var(--nm-space-12);
     box-sizing: border-box;
     padding: var(--nm-space-12);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-control-r);
     background: transparent;
     cursor: pointer;
@@ -102,7 +102,7 @@
     width: var(--nm-icon-button);
     height: var(--nm-icon-button);
     margin-top: var(--nm-space-2);
-    border: var(--nm-rule) solid var(--nm-stroke);
+    border: var(--nm-rule) solid var(--nm-border-stroke);
     border-radius: 50%;
     color: var(--nm-canvas);
   }

package/registry/ui/components/nm-radio-group/nm-radio-group.css

@@ -15,9 +15,9 @@
     width: var(--nm-icon-button);
     height: var(--nm-icon-button);
     padding: 0;
-    border: var(--nm-rule) solid var(--nm-stroke);
+    border: var(--nm-rule) solid var(--nm-border-stroke);
     border-radius: 50%;
-    background: transparent;
+    background: var(--nm-borderless-fill);
     cursor: pointer;
     transition: border-color 0.15s;
   }

package/registry/ui/components/nm-segmented/nm-segmented.css

@@ -3,7 +3,7 @@
     align-items: stretch;
     gap: var(--nm-space-2);
     padding: var(--toggle-pad);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--toggle-r);
     background: transparent;
   }

package/registry/ui/components/nm-select/nm-select.css

@@ -7,7 +7,7 @@
     min-width: 0;
     height: var(--nm-field-h);
     padding: 0 var(--control-px);
-    border: var(--nm-rule) solid var(--nm-line-strong);
+    border: var(--nm-rule) solid var(--nm-border-strong);
     border-radius: var(--nm-control-r);
     background: var(--nm-raised);
     color: var(--nm-fg);
@@ -27,7 +27,7 @@
   .nm-select__trigger:hover,
   .nm-select__trigger[data-popup-open],
   .nm-select__trigger:focus-visible {
-    border-color: var(--nm-stroke);
+    border-color: var(--nm-border-stroke);
     outline: none;
   }
 

package/registry/ui/components/nm-separator/nm-separator.css

@@ -1,6 +1,6 @@
   .nm-separator {
     flex-shrink: 0;
-    background: var(--nm-line);
+    background: var(--nm-border);
   }
 
   .nm-separator[data-orientation='horizontal'] {

package/registry/ui/components/nm-side-panel/nm-side-panel.css

@@ -40,7 +40,7 @@
     flex: 0 0 var(--nm-side-panel-basis);
     flex-direction: column;
     min-height: 0;
-    border-inline-start: var(--nm-rule) solid var(--nm-divider);
+    border-inline-start: var(--nm-rule) solid var(--nm-border-divider);
     background: var(--nm-canvas);
   }