@nordmanai/nif 0.2.16 → 0.2.18

package/dist/ui/components/nm-sidebar/nm-sidebar.d.ts

@@ -129,6 +129,8 @@ export declare function NmSidebarMenuActions({ className, showOnHover, ...props
 }): ReactNode;
 /** A row of controls in the header or footer, such as a primary button and an icon button, spaced apart. */
 export declare function NmSidebarBar({ className, ...props }: ComponentProps<'div'>): ReactNode;
+/** The product name at the top of the sidebar. Static: it has a row's geometry so it lines up with the rows below, but no hover or press. */
+export declare function NmSidebarBrand({ className, ...props }: ComponentProps<'div'>): ReactNode;
 /** A count or a short word at the end of a row. The NIF Chip, small. */
 export declare function NmSidebarMenuBadge({ className, ...props }: ComponentProps<typeof NmChip>): ReactNode;
 /** Two lines in a row, such as a name and a plan in the footer. For a large menu button. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nordmanai/nif",
-  "version": "0.2.16",
+  "version": "0.2.18",
   "description": "Nordman Interface Framework: the one UI and UX system for every Nordman product. Base UI, in the shadcn composition, styled by NIF tokens.",
   "type": "module",
   "sideEffects": [

package/registry/index.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.15",
+  "version": "0.2.17",
   "versions": {
     "@animate-ui/react": "^2.4.2",
     "@base-ui/react": "^1.9.0",

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

@@ -2,6 +2,8 @@
   .nm-sidebar-provider {
     --nm-sidebar-width: var(--nm-width-sidebar);
     --nm-sidebar-width-icon: var(--nm-width-sidebar-icon);
+    /* The sidebar shares the page's background; only its divider separates it. Floating and inset variants keep their raised card. */
+    --nm-sidebar-bg: var(--nm-canvas);
     position: relative;
     box-sizing: border-box;
     display: flex;
@@ -39,7 +41,7 @@
     min-height: 0;
     overflow: hidden;
     color: var(--nm-fg);
-    background: var(--nm-raised);
+    background: var(--nm-sidebar-bg);
     transition:
       width var(--reveal) var(--ease),
       padding var(--reveal) var(--ease);
@@ -97,7 +99,7 @@
     inset-inline-start: 0;
     width: var(--nm-sidebar-width);
     border-inline-end: var(--nm-rule) solid var(--nm-border-strong);
-    background: var(--nm-raised);
+    background: var(--nm-sidebar-bg);
   }
   .nm-sidebar[data-side='right'][data-peek] .nm-sidebar__inner {
     inset-inline-start: auto;
@@ -175,18 +177,37 @@
   .nm-sidebar-provider > .nm-sidebar__trigger--anchored {
     position: absolute;
     top: var(--nm-space-12);
-    inset-inline-start: var(--nm-space-12);
+    /* Its icon sits where a row's icon sits: the group padding, the row border, then the row's icon padding. */
+    inset-inline-start: calc(var(--nm-space-8) + var(--nm-rule));
     z-index: calc(var(--nm-rail-z) + 1);
   }
   /* The header leaves the anchored toggle's room and lines its first row up with it. */
   .nm-sidebar-provider:has(> .nm-sidebar__trigger--anchored) .nm-sidebar__header {
     padding-block-start: var(--nm-space-12);
-    padding-inline-start: calc(var(--nm-space-12) + var(--nm-icon-control) + var(--nm-space-8));
+    /* The first row's text starts where a row's text starts: after the icon column. */
+    padding-inline-start: calc(var(--nm-space-8) + var(--nm-icon-button) + var(--nm-space-8));
     min-height: calc(var(--nm-space-12) + var(--nm-icon-control) + var(--nm-space-8));
   }
-  .nm-sidebar-provider:has(> .nm-sidebar__trigger--anchored) .nm-sidebar__header > .nm-sidebar__menu > .nm-sidebar__menu-item:first-child > .nm-sidebar__menu-button {
+  .nm-sidebar-provider:has(> .nm-sidebar__trigger--anchored) .nm-sidebar__header > .nm-sidebar__menu > .nm-sidebar__menu-item:first-child > .nm-sidebar__menu-button,
+  .nm-sidebar-provider:has(> .nm-sidebar__trigger--anchored) .nm-sidebar__header > .nm-sidebar__brand {
     min-height: var(--nm-icon-control);
   }
+  /* The product name: a row's geometry and type, semibold, with nothing to hover or press. */
+  .nm-sidebar__brand {
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-8);
+    box-sizing: border-box;
+    width: 100%;
+    height: var(--control-h);
+    padding: 0 var(--nm-icon-pad);
+    border: var(--nm-rule) solid transparent;
+    color: var(--nm-fg);
+    font: inherit;
+    font-size: var(--nm-type-ui);
+    font-weight: var(--nm-weight-semibold);
+    white-space: nowrap;
+  }
   /* Holds the anchored toggle's place in a bar while the sidebar is closed. */
   .nm-sidebar__trigger-space {
     display: inline-block;

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

@@ -503,6 +503,10 @@ export function NmSidebarMenuActions({ className, showOnHover = false, ...props
 export function NmSidebarBar({ className, ...props }: ComponentProps<'div'>): ReactNode {
   return <div data-slot="sidebar-bar" className={nmClass('nm-sidebar__bar', className)} {...props} />;
 }
+/** The product name at the top of the sidebar. Static: it has a row's geometry so it lines up with the rows below, but no hover or press. */
+export function NmSidebarBrand({ className, ...props }: ComponentProps<'div'>): ReactNode {
+  return <div data-slot="sidebar-brand" className={nmClass('nm-sidebar__brand', className)} {...props} />;
+}
 /** A count or a short word at the end of a row. The NIF Chip, small. */
 export function NmSidebarMenuBadge({ className, ...props }: ComponentProps<typeof NmChip>): ReactNode {
   return <NmChip data-slot="sidebar-menu-badge" size="sm" className={nmClass('nm-sidebar__menu-badge', className)} {...props} />;