@nordmanai/nif 0.2.14 → 0.2.16

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

@@ -70,9 +70,17 @@ export type NmSidebarTriggerProps = Omit<ComponentProps<'button'>, 'aria-label'>
     icon?: NmIconId;
     /** On by default: a tooltip with the name and the ⌘B shortcut. */
     tooltip?: boolean;
+    /**
+     * Keeps the toggle at one spot of the provider whether the sidebar is open or closed: it is taken out of
+     * the flow and anchored at the top start corner, above the sidebar. The header leaves room for it, and
+     * `NmSidebarTriggerSpace` holds its place in a bar while the sidebar is closed.
+     */
+    anchored?: boolean;
 };
 /** The button that opens and closes the sidebar. In the main area's bar, or in the sidebar's own header. Resting on it peeks the sidebar. */
-export declare function NmSidebarTrigger({ className, label, icon, tooltip, onClick, onPointerEnter, onPointerLeave, ...props }: NmSidebarTriggerProps): ReactNode;
+export declare function NmSidebarTrigger({ className, label, icon, tooltip, anchored, onClick, onPointerEnter, onPointerLeave, ...props }: NmSidebarTriggerProps): ReactNode;
+/** Holds the anchored trigger's place in a bar while the sidebar is closed, so the bar's content starts beside it. */
+export declare function NmSidebarTriggerSpace({ className, ...props }: ComponentProps<'span'>): ReactNode;
 /** A thin strip on the sidebar's edge. Clicking it toggles the sidebar. */
 export declare function NmSidebarRail({ className, label, ...props }: ComponentProps<'button'> & {
     label?: string;
@@ -142,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.14",
+  "version": "0.2.16",
   "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.13",
+  "version": "0.2.15",
   "versions": {
     "@animate-ui/react": "^2.4.2",
     "@base-ui/react": "^1.9.0",

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

@@ -171,6 +171,29 @@
   .nm-sidebar__trigger {
     flex-shrink: 0;
   }
+  /* Anchored: one toggle at the provider's top start corner, above the sidebar, that never moves. */
+  .nm-sidebar-provider > .nm-sidebar__trigger--anchored {
+    position: absolute;
+    top: var(--nm-space-12);
+    inset-inline-start: var(--nm-space-12);
+    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));
+    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 {
+    min-height: var(--nm-icon-control);
+  }
+  /* Holds the anchored toggle's place in a bar while the sidebar is closed. */
+  .nm-sidebar__trigger-space {
+    display: inline-block;
+    flex-shrink: 0;
+    width: var(--nm-icon-control);
+    height: var(--nm-icon-control);
+  }
   /* A header with the toggle in it is a row: the brand or switcher, then the toggle at the end. */
   .nm-sidebar__header:has(> .nm-sidebar__trigger) {
     flex-direction: row;
@@ -433,6 +456,9 @@
     padding-inline-end: var(--nm-icon-control);
   }
   .nm-sidebar__menu-item:has(> .nm-sidebar__menu-actions) > .nm-sidebar__menu-button {
+    padding-inline-end: var(--nm-icon-control);
+  }
+  .nm-sidebar__menu-item:has(> .nm-sidebar__menu-actions > :nth-child(2)) > .nm-sidebar__menu-button {
     padding-inline-end: calc(var(--nm-icon-control) * 2);
   }
   /* A group of actions at the end of a row. Its actions sit in flow inside it; the group takes the row's end. */
@@ -484,6 +510,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

@@ -295,10 +295,16 @@ export type NmSidebarTriggerProps = Omit<ComponentProps<'button'>, 'aria-label'>
   icon?: NmIconId;
   /** On by default: a tooltip with the name and the ⌘B shortcut. */
   tooltip?: boolean;
+  /**
+   * Keeps the toggle at one spot of the provider whether the sidebar is open or closed: it is taken out of
+   * the flow and anchored at the top start corner, above the sidebar. The header leaves room for it, and
+   * `NmSidebarTriggerSpace` holds its place in a bar while the sidebar is closed.
+   */
+  anchored?: boolean;
 };
 
 /** The button that opens and closes the sidebar. In the main area's bar, or in the sidebar's own header. Resting on it peeks the sidebar. */
-export function NmSidebarTrigger({ className, label, icon = 'panel-left', tooltip = true, onClick, onPointerEnter, onPointerLeave, ...props }: NmSidebarTriggerProps): ReactNode {
+export function NmSidebarTrigger({ className, label, icon = 'panel-left', tooltip = true, anchored = false, onClick, onPointerEnter, onPointerLeave, ...props }: NmSidebarTriggerProps): ReactNode {
   const { open, isMobile, toggleSidebar, peekIn, peekOut } = useSidebar();
   const name = label ?? (open || isMobile ? 'Close sidebar' : 'Open sidebar');
   const button = (
@@ -307,7 +313,8 @@ export function NmSidebarTrigger({ className, label, icon = 'panel-left', toolti
       glyph={icon}
       label={name}
       tone="quiet"
-      className={nmClass('nm-sidebar__trigger', className)}
+      data-anchored={anchored ? 'true' : undefined}
+      className={nmClass('nm-sidebar__trigger', anchored ? 'nm-sidebar__trigger--anchored' : null, className)}
       onClick={(event) => {
         onClick?.(event);
         toggleSidebar();
@@ -337,6 +344,11 @@ export function NmSidebarTrigger({ className, label, icon = 'panel-left', toolti
   );
 }
 
+/** Holds the anchored trigger's place in a bar while the sidebar is closed, so the bar's content starts beside it. */
+export function NmSidebarTriggerSpace({ className, ...props }: ComponentProps<'span'>): ReactNode {
+  return <span aria-hidden="true" data-slot="sidebar-trigger-space" className={nmClass('nm-sidebar__trigger-space', className)} {...props} />;
+}
+
 /** A thin strip on the sidebar's edge. Clicking it toggles the sidebar. */
 export function NmSidebarRail({ className, label = 'Toggle sidebar', ...props }: ComponentProps<'button'> & { label?: string }): ReactNode {
   const { toggleSidebar } = useSidebar();
@@ -559,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} />;
 }
 
 /**