@nordmanai/nif 0.2.15 → 0.2.17

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

@@ -150,9 +150,10 @@ export declare function NmSidebarMenuSubButton({ render, size, isActive, disable
     /** Not available. A link gets aria-disabled; a rendered button gets disabled. */
     disabled?: boolean;
 }): ReactNode;
-/** A chevron at the end of a row. In a collapsible row it points right and turns down when the row is open. With `menu` it points down, for a row that opens a menu. */
-export declare function NmSidebarChevron({ className, menu, ...props }: Omit<ComponentProps<typeof NmIcon>, 'id'> & {
+/** A chevron at the end of a row. In a collapsible row it points right and turns down when the row is open. With `menu` it points down, for a row that opens a menu below. With `flyout` it keeps pointing right, for a row whose menu opens beside the sidebar. */
+export declare function NmSidebarChevron({ className, menu, flyout, ...props }: Omit<ComponentProps<typeof NmIcon>, 'id'> & {
     menu?: boolean;
+    flyout?: boolean;
 }): ReactNode;
 /**
  * A dropdown menu opened from the sidebar. It closes the moment the sidebar goes out of view

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nordmanai/nif",
-  "version": "0.2.15",
+  "version": "0.2.17",
   "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.14",
+  "version": "0.2.16",
   "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;
@@ -510,6 +512,11 @@
   .nm-sidebar__chevron[data-menu] {
     transform: none;
   }
+  [aria-expanded='true'] > .nm-sidebar__chevron[data-flyout],
+  [data-popup-open] > .nm-sidebar__chevron[data-flyout],
+  .nm-sidebar__chevron[data-flyout] {
+    transform: rotate(-90deg);
+  }
 
   /* The action at the end of a row sits over the row's end, centred on its height. */
   .nm-sidebar__menu-action {

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

@@ -571,9 +571,9 @@ export function NmSidebarMenuSubButton({
   });
 }
 
-/** A chevron at the end of a row. In a collapsible row it points right and turns down when the row is open. With `menu` it points down, for a row that opens a menu. */
-export function NmSidebarChevron({ className, menu = false, ...props }: Omit<ComponentProps<typeof NmIcon>, 'id'> & { menu?: boolean }): ReactNode {
-  return <NmIcon id="chevron" data-menu={menu ? '' : undefined} className={nmClass('nm-sidebar__chevron', className)} {...props} />;
+/** A chevron at the end of a row. In a collapsible row it points right and turns down when the row is open. With `menu` it points down, for a row that opens a menu below. With `flyout` it keeps pointing right, for a row whose menu opens beside the sidebar. */
+export function NmSidebarChevron({ className, menu = false, flyout = false, ...props }: Omit<ComponentProps<typeof NmIcon>, 'id'> & { menu?: boolean; flyout?: boolean }): ReactNode {
+  return <NmIcon id="chevron" data-menu={menu ? '' : undefined} data-flyout={flyout ? '' : undefined} className={nmClass('nm-sidebar__chevron', className)} {...props} />;
 }
 
 /**