@nordmanai/nif 0.2.11 → 0.2.13

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

@@ -1,12 +1,15 @@
 import { type ButtonHTMLAttributes, type MouseEvent, type ReactNode } from 'react';
 import type { NmIconId } from '../../config/nm-icons.ts';
 import { NM_BUTTON_SIZES, NM_BUTTON_TONES, type NmButtonSize, type NmButtonTone } from '../../config/nm-button.ts';
+import { type NmControlShape } from '../../config/nm-shape.ts';
 export type NmButtonProps = {
     label: string;
     /** Content of the button in place of the icon and label, for a button that holds more than text. The label is still its accessible name when icon only. */
     children?: ReactNode;
     tone: NmButtonTone;
     size?: NmButtonSize;
+    /** Soft follows the themed radius; round is a pill. */
+    shape?: NmControlShape;
     block?: boolean;
     type?: 'button' | 'submit';
     disabled?: boolean;

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

@@ -1,5 +1,6 @@
 import { type ReactNode, type Ref, type TextareaHTMLAttributes } from 'react';
 import { type NmComposerAttachment, type NmComposerQueued } from '../../config/nm-composer.ts';
+import type { NmControlShape } from '../../config/nm-shape.ts';
 import type { NmIconId } from '../../config/nm-icons.ts';
 import type { OrbAdapter } from 'orb-ui';
 import type { NmVoiceOrbAgentState } from '../../config/nm-voice-orb.ts';
@@ -72,5 +73,7 @@ export type NmComposerProps = {
     formless?: boolean;
     /** The host owns the text: the field is not controlled by `value`, and `value` only says whether there is any. */
     uncontrolled?: boolean;
+    /** Shape of every button in the bar, own and hosted. Round makes them circles. */
+    buttonShape?: NmControlShape;
 };
 export declare function NmComposer(props: NmComposerProps): ReactNode;

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

@@ -30,6 +30,8 @@ type SidebarContextValue = {
     setCollapsible: (mode: NmSidebarCollapsible) => void;
 };
 /** The sidebar's state: expanded or collapsed, peeking, on a desktop or a phone, and the function that toggles it. */
+/** The sidebar context when there is one. For a part that lives in a bar shared by pages with and without a sidebar. */
+export declare function useOptionalSidebar(): SidebarContextValue | null;
 export declare function useSidebar(): SidebarContextValue;
 export type NmSidebarProviderProps = ComponentProps<'div'> & {
     defaultOpen?: boolean;
@@ -73,7 +75,9 @@ export declare function NmSidebarRail({ className, label, ...props }: ComponentP
     label?: string;
 }): ReactNode;
 /** The main area beside the sidebar. With the inset variant it is the raised card. */
-export declare function NmSidebarInset({ className, ...props }: ComponentProps<'main'>): ReactNode;
+export declare function NmSidebarInset({ className, render, ref, ...props }: ComponentProps<'main'> & {
+    render?: RenderProp;
+}): ReactNode;
 /** A search field in the sidebar. The NIF Input. */
 export declare function NmSidebarInput({ className, ...props }: ComponentProps<typeof NmInput>): ReactNode;
 /** Sticky at the top: a brand, a title or a workspace switcher, and the toggle when the sidebar collapses to it. */
@@ -122,10 +126,12 @@ export declare function NmSidebarMenuSkeleton({ className, showIcon, ...props }:
 /** Rows under a row, indented by a line. */
 export declare function NmSidebarMenuSub({ className, ...props }: ComponentProps<'ul'>): ReactNode;
 export declare function NmSidebarMenuSubItem({ className, ...props }: ComponentProps<'li'>): ReactNode;
-export declare function NmSidebarMenuSubButton({ render, size, isActive, className, ref, ...props }: ComponentProps<'a'> & {
+export declare function NmSidebarMenuSubButton({ render, size, isActive, disabled, className, ref, ...props }: ComponentProps<'a'> & {
     render?: RenderProp;
     size?: Exclude<NmSidebarButtonSize, 'lg'>;
     isActive?: boolean;
+    /** 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'> & {

package/dist/ui/components/nm-small-icon-button/nm-small-icon-button.d.ts

@@ -1,10 +1,13 @@
 import { type ButtonHTMLAttributes, type MouseEvent, type ReactNode } from 'react';
 import type { NmIconId } from '../../config/nm-icons.ts';
 import { type NmSmallIconButtonTone } from '../../config/nm-small-icon-button.ts';
+import type { NmControlShape } from '../../config/nm-shape.ts';
 export type NmSmallIconButtonProps = {
     label: string;
     icon: NmIconId;
     tone?: NmSmallIconButtonTone;
+    /** Soft follows the themed radius; round is a full circle. */
+    shape?: NmControlShape;
     active?: boolean;
     iconContent?: ReactNode;
     testId?: string;
@@ -14,6 +17,8 @@ export declare const NmSmallIconButton: import("react").ForwardRefExoticComponen
     label: string;
     icon: NmIconId;
     tone?: NmSmallIconButtonTone;
+    /** Soft follows the themed radius; round is a full circle. */
+    shape?: NmControlShape;
     active?: boolean;
     iconContent?: ReactNode;
     testId?: string;

package/dist/ui/components/nordman-icon-button/nordman-icon-button.d.ts

@@ -1,5 +1,6 @@
 import { type ButtonHTMLAttributes, type ReactNode } from 'react';
 import type { NmIconId } from '../../config/nm-icons.ts';
+import { type NmControlShape } from '../../config/nm-shape.ts';
 import { NM_ICON_BUTTON_TONES, type NmIconButtonTone } from '../../config/nm-icon-button.ts';
 import { type NordmanChromeIconId } from '../../config/nordman-chrome.ts';
 export declare const NORDMAN_ICON_BUTTON_VARIANTS: {
@@ -11,6 +12,8 @@ export declare const NordmanIconButton: import("react").ForwardRefExoticComponen
     label: string;
     href?: string;
     tone?: NmIconButtonTone;
+    /** Soft follows the themed radius; round is a full circle. */
+    shape?: NmControlShape;
     variant?: NordmanIconButtonVariant;
     testId?: string;
     imageSrc?: string;

package/dist/ui/config/nm-button.d.ts

@@ -32,6 +32,7 @@ export declare const NM_BUTTON_CLASSES: {
     readonly large: 'nm-button--large';
     readonly block: 'nm-button--block';
     readonly icon: 'nm-button--icon';
+    readonly round: 'nm-button--round';
 };
 /** The button's class names, for triggers that must stay a Base UI part, such as a menu or popover trigger. */
 export declare function nmButtonClassName(tone: NmButtonTone, size?: NmButtonSize, iconOnly?: boolean): string;

package/dist/ui/config/nm-composer.d.ts

@@ -1,7 +1,3 @@
-/**
- * Composer: the message box. Built from the Nordman AI design:
- * one framed box, the text on top, actions in a row beneath. Add on the left, dictate and voice on the right.
- */
 export declare const NM_COMPOSER_COPY: {
     readonly placeholder: 'Ask Nordman';
     readonly attach: 'Add';
@@ -42,6 +38,8 @@ export declare const NM_COMPOSER_CLASSES: {
     readonly primary: 'nm-composer__button--primary';
     readonly stopMark: 'nm-composer__stop-mark';
 };
+/** Set on the root with a shape value; every button in the bar, own or hosted, takes that shape. */
+export declare const NM_COMPOSER_SHAPE_ATTRIBUTE = "data-button-shape";
 export type NmComposerAttachment = {
     id: string;
     name: string;

package/dist/ui/config/nm-icon-button.d.ts

@@ -1,3 +1,4 @@
+import { type NmControlShape } from './nm-shape.ts';
 export declare const NM_ICON_BUTTON_TONES: {
     readonly line: 'line';
     readonly raised: 'raised';
@@ -17,8 +18,9 @@ export declare const NM_ICON_BUTTON_CLASSES: {
     readonly solid: 'nm-icon-button--solid';
     readonly panel: 'nm-icon-button--panel';
     readonly invert: 'nm-icon-button--invert';
+    readonly round: 'nm-icon-button--round';
 };
 /** Shared geometry hook for send / stop / during-run primary composer actions. */
 export declare const NM_CHATBOX_ACTION_CLASS = "nm-chatbox__send";
-export declare function nmIconButtonClassName(tone?: NmIconButtonTone): string;
-export declare function nmChatboxActionButtonClassName(): string;
+export declare function nmIconButtonClassName(tone?: NmIconButtonTone, shape?: NmControlShape): string;
+export declare function nmChatboxActionButtonClassName(shape?: NmControlShape): string;

package/dist/ui/config/nm-shape.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Control shape. Soft is the kit default: corners follow the themed radius scale.
+ * Round is a full circle (or pill): it ignores the radius scale, a circle has no corner to scale.
+ */
+export declare const NM_CONTROL_SHAPES: {
+    readonly soft: 'soft';
+    readonly round: 'round';
+};
+export type NmControlShape = (typeof NM_CONTROL_SHAPES)[keyof typeof NM_CONTROL_SHAPES];
+/** The data attribute a container sets to round every control inside it. */
+export declare const NM_SHAPE_ATTRIBUTE = "data-button-shape";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nordmanai/nif",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "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.11",
+  "version": "0.2.13",
   "versions": {
     "@animate-ui/react": "^2.4.2",
     "@base-ui/react": "^1.9.0",
@@ -268,6 +268,7 @@
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
         "config/nm-message.ts",
+        "config/nm-shape.ts",
         "config/nordman-chrome.ts",
         "kit-logger.ts",
         "lib/logger.ts",
@@ -494,6 +495,7 @@
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nordman-chrome.ts",
         "kit-logger.ts",
         "lib/bar-overflow.ts",
@@ -810,6 +812,7 @@
         "config/nm-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "kit-logger.ts",
         "lib/logger.ts",
         "lib/nm-motion.ts"
@@ -1137,6 +1140,7 @@
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "kit-logger.ts",
         "lib/logger.ts"
       ],
@@ -1590,6 +1594,7 @@
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nordman-chrome.ts",
         "kit-logger.ts",
         "lib/logger.ts",
@@ -1803,6 +1808,7 @@
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nm-side-panel.ts",
         "config/nm-small-icon-button.ts",
         "config/nordman-chrome.ts",
@@ -2311,6 +2317,7 @@
         "config/nm-composer.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nm-site-palette.ts",
         "config/nm-voice-orb.ts",
         "kit-logger.ts",
@@ -2677,6 +2684,7 @@
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nordman-chrome.ts",
         "kit-logger.ts",
         "lib/logger.ts",
@@ -3020,6 +3028,7 @@
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nm-side-panel.ts",
         "config/nordman-chrome.ts",
         "kit-logger.ts",
@@ -3371,6 +3380,7 @@
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nordman-chrome.ts",
         "kit-logger.ts",
         "lib/logger.ts",
@@ -3579,6 +3589,7 @@
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
         "config/nm-list-item.ts",
+        "config/nm-shape.ts",
         "config/nordman-chrome.ts",
         "kit-logger.ts",
         "lib/logger.ts",
@@ -3770,6 +3781,7 @@
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
         "config/nm-modal.ts",
+        "config/nm-shape.ts",
         "config/nordman-chrome.ts",
         "content/nm-modal.ts",
         "kit-logger.ts",
@@ -4086,6 +4098,7 @@
         "config/nm-icons.ts",
         "config/nm-panel-bar.ts",
         "config/nm-segmented.ts",
+        "config/nm-shape.ts",
         "kit-logger.ts",
         "lib/logger.ts"
       ],
@@ -4313,6 +4326,7 @@
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
         "config/nm-questionnaire.ts",
+        "config/nm-shape.ts",
         "config/nm-side-panel.ts",
         "config/nordman-chrome.ts",
         "kit-logger.ts",
@@ -4657,6 +4671,7 @@
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
         "config/nm-segmented.ts",
+        "config/nm-shape.ts",
         "kit-logger.ts",
         "lib/logger.ts"
       ],
@@ -4972,6 +4987,7 @@
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nm-side-panel.ts",
         "kit-logger.ts",
         "lib/logger.ts",
@@ -5144,6 +5160,7 @@
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nm-sidebar.ts",
         "config/nm-small-icon-button.ts",
         "config/nordman-chrome.ts",
@@ -5332,6 +5349,7 @@
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nm-small-icon-button.ts",
         "config/nordman-chrome.ts",
         "kit-logger.ts",
@@ -5693,6 +5711,7 @@
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nm-side-panel.ts",
         "kit-logger.ts",
         "lib/logger.ts",
@@ -5864,6 +5883,7 @@
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "kit-logger.ts",
         "lib/logger.ts",
         "lib/nm-class.ts",
@@ -6041,6 +6061,7 @@
         "config/nm-icon-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nordman-chrome.ts",
         "kit-logger.ts",
         "lib/logger.ts",
@@ -6202,6 +6223,7 @@
         "config/nm-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nordman-login.ts",
         "content/nordman-login.ts",
         "kit-logger.ts",
@@ -6383,6 +6405,7 @@
         "config/nm-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nordman-login.ts",
         "content/nordman-login.ts",
         "kit-logger.ts",
@@ -6540,6 +6563,7 @@
         "config/nm-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "content/nordman-login.ts",
         "kit-logger.ts",
         "lib/logger.ts",
@@ -6704,6 +6728,7 @@
         "config/nm-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nordman-login.ts",
         "content/nordman-login.ts",
         "kit-logger.ts",
@@ -6863,6 +6888,7 @@
         "config/nm-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nordman-login.ts",
         "content/nordman-login.ts",
         "kit-logger.ts",
@@ -7035,6 +7061,7 @@
         "config/nm-button.ts",
         "config/nm-icons-extended.ts",
         "config/nm-icons.ts",
+        "config/nm-shape.ts",
         "config/nordman-login.ts",
         "content/nordman-login.ts",
         "kit-logger.ts",

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

@@ -30,6 +30,9 @@
     height: var(--control-h-lg);
   }
 
+  .nm-button--round {
+    border-radius: var(--nm-radius-round);
+  }
   .nm-button--block {
     width: 100%;
   }

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

@@ -7,6 +7,7 @@ import {
   type NmButtonSize,
   type NmButtonTone,
 } from '../../config/nm-button.ts';
+import { NM_CONTROL_SHAPES, type NmControlShape } from '../../config/nm-shape.ts';
 import { createLogger } from '../../kit-logger.ts';
 import { AnimateIcon, Button as MotionButton } from '../../lib/nm-motion.ts';
 import { NmIcon } from '../nm-icon/nm-icon.tsx';
@@ -19,6 +20,8 @@ export type NmButtonProps = {
   children?: ReactNode;
   tone: NmButtonTone;
   size?: NmButtonSize;
+  /** Soft follows the themed radius; round is a pill. */
+  shape?: NmControlShape;
   block?: boolean;
   type?: 'button' | 'submit';
   disabled?: boolean;
@@ -34,12 +37,13 @@ export type NmButtonProps = {
 type NmButtonNativeProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof NmButtonProps | 'children' | 'aria-pressed'>;
 
 export const NmButton = forwardRef<HTMLButtonElement, NmButtonProps & NmButtonNativeProps>(function NmButton(props, ref): ReactNode {
-  const { label, children, tone, size: sizeProp, block, type, disabled, pressed, icon, iconOnly, testId, onClick, className: extra, ...rest } = props;
+  const { label, children, tone, size: sizeProp, shape, block, type, disabled, pressed, icon, iconOnly, testId, onClick, className: extra, ...rest } = props;
   const size = sizeProp ?? NM_BUTTON_SIZES.default;
   const className = [
     NM_BUTTON_CLASSES.root,
     NM_BUTTON_CLASSES[tone],
     NM_BUTTON_CLASSES[size],
+    shape === NM_CONTROL_SHAPES.round ? NM_BUTTON_CLASSES.round : null,
     block ? NM_BUTTON_CLASSES.block : null,
     iconOnly ? NM_BUTTON_CLASSES.icon : null,
     extra,

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

@@ -185,18 +185,25 @@
     outline: none;
   }
 
+  /* Send, Stop, Done and the voice button are the primary action: they take the theme accent. */
   .nm-composer__button--primary {
-    background: var(--nm-fg);
+    background: var(--nm-accent);
     color: var(--nm-canvas);
   }
 
   .nm-composer__button--primary:hover:not(:disabled),
   .nm-composer__button--primary:focus-visible {
-    background: var(--nm-fg);
+    background: var(--nm-accent);
     color: var(--nm-canvas);
     opacity: 0.88;
   }
 
+  /* Round shape: every button in the bar, the composer's own and any hosted icon button, is a circle. */
+  .nm-composer[data-button-shape='round'] .nm-composer__button,
+  .nm-composer[data-button-shape='round'] .nm-icon-button {
+    border-radius: var(--nm-radius-round);
+  }
+
   .nm-composer__button:disabled {
     cursor: default;
     opacity: 0.4;

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

@@ -6,7 +6,9 @@ import {
   NM_COMPOSER_INLINE_MARK as MARK,
   type NmComposerAttachment,
   type NmComposerQueued,
+  NM_COMPOSER_SHAPE_ATTRIBUTE,
 } from '../../config/nm-composer.ts';
+import type { NmControlShape } from '../../config/nm-shape.ts';
 import { NmIcon } from '../nm-icon/nm-icon.tsx';
 import type { NmIconId } from '../../config/nm-icons.ts';
 import { NmVoiceOrb } from '../nm-voice-orb/nm-voice-orb.tsx';
@@ -78,6 +80,8 @@ export type NmComposerProps = {
   formless?: boolean;
   /** The host owns the text: the field is not controlled by `value`, and `value` only says whether there is any. */
   uncontrolled?: boolean;
+  /** Shape of every button in the bar, own and hosted. Round makes them circles. */
+  buttonShape?: NmControlShape;
 };
 
 type InlinePart = { kind: 'text'; value: string } | { kind: 'chip'; label: string; occurrence: number };
@@ -337,7 +341,7 @@ export function NmComposer(props: NmComposerProps): ReactNode {
     );
   } else {
     action = (
-      <button type="button" className={C.button} aria-label={COPY.voice} data-testid="voice-button" disabled={props.disabled} onClick={props.onVoice}>
+      <button type="button" className={`${C.button} ${C.primary}`} aria-label={COPY.voice} data-testid="voice-button" disabled={props.disabled} onClick={props.onVoice}>
         <NmIcon id="audio-lines" />
       </button>
     );
@@ -348,6 +352,7 @@ export function NmComposer(props: NmComposerProps): ReactNode {
     <Root
       ref={rootRef as never}
       className={C.root}
+      {...{ [NM_COMPOSER_SHAPE_ATTRIBUTE]: props.buttonShape }}
       data-disabled={props.disabled ? 'true' : undefined}
       data-testid={props.testId}
       {...(props.formless

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

@@ -80,7 +80,8 @@
      The column keeps its collapsed width in the flow, and the inner panel floats out over the page. */
   .nm-sidebar[data-peek] {
     overflow: visible;
-    z-index: 1;
+    /* Over the main area and its top bar, under menus. */
+    z-index: var(--nm-rail-z);
   }
   .nm-sidebar[data-mode='offcanvas'][data-peek] {
     width: 0;

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

@@ -63,6 +63,10 @@ const SidebarContext = createContext<SidebarContextValue | null>(null);
 const PEEK_KEEPS = '[data-slot="sidebar"], [data-slot="sidebar-trigger"], [data-slot="tooltip-content"], [role="menu"], [role="dialog"]';
 
 /** The sidebar's state: expanded or collapsed, peeking, on a desktop or a phone, and the function that toggles it. */
+/** The sidebar context when there is one. For a part that lives in a bar shared by pages with and without a sidebar. */
+export function useOptionalSidebar(): SidebarContextValue | null {
+  return useContext(SidebarContext);
+}
 export function useSidebar(): SidebarContextValue {
   const context = useContext(SidebarContext);
   if (!context) {
@@ -345,8 +349,13 @@ export function NmSidebarRail({ className, label = 'Toggle sidebar', ...props }:
 }
 
 /** The main area beside the sidebar. With the inset variant it is the raised card. */
-export function NmSidebarInset({ className, ...props }: ComponentProps<'main'>): ReactNode {
-  return <main data-slot="sidebar-inset" className={nmClass('nm-sidebar__inset', className)} {...props} />;
+export function NmSidebarInset({ className, render, ref, ...props }: ComponentProps<'main'> & { render?: RenderProp }): ReactNode {
+  return useRender({
+    render,
+    ref,
+    defaultTagName: 'main',
+    props: { 'data-slot': 'sidebar-inset', className: nmClass('nm-sidebar__inset', className), ...props },
+  });
 }
 
 /** A search field in the sidebar. The NIF Input. */
@@ -507,10 +516,17 @@ export function NmSidebarMenuSubButton({
   render,
   size = 'default',
   isActive = false,
+  disabled = false,
   className,
   ref,
   ...props
-}: ComponentProps<'a'> & { render?: RenderProp; size?: Exclude<NmSidebarButtonSize, 'lg'>; isActive?: boolean }): ReactNode {
+}: ComponentProps<'a'> & {
+  render?: RenderProp;
+  size?: Exclude<NmSidebarButtonSize, 'lg'>;
+  isActive?: boolean;
+  /** Not available. A link gets aria-disabled; a rendered button gets disabled. */
+  disabled?: boolean;
+}): ReactNode {
   return useRender({
     render,
     ref,
@@ -519,6 +535,9 @@ export function NmSidebarMenuSubButton({
       'data-slot': 'sidebar-menu-sub-button',
       'data-size': size,
       'data-active': isActive ? '' : undefined,
+      'data-disabled': disabled ? '' : undefined,
+      'aria-disabled': disabled ? true : undefined,
+      disabled: disabled ? true : undefined,
       'aria-current': isActive ? 'page' : undefined,
       className: nmClass('nm-sidebar__menu-sub-button', className),
       ...props,

package/registry/ui/components/nm-small-icon-button/nm-small-icon-button.tsx

@@ -6,6 +6,7 @@ import {
 } from '../../config/nm-small-icon-button.ts';
 import { NM_ICON_BUTTON_TONES, type NmIconButtonTone } from '../../config/nm-icon-button.ts';
 import { NordmanIconButton } from '../nordman-icon-button/nordman-icon-button.tsx';
+import type { NmControlShape } from '../../config/nm-shape.ts';
 import { createLogger } from '../../kit-logger.ts';
 
 const logger = createLogger('interface-nm-small-icon-button');
@@ -19,6 +20,8 @@ export type NmSmallIconButtonProps = {
   label: string;
   icon: NmIconId;
   tone?: NmSmallIconButtonTone;
+  /** Soft follows the themed radius; round is a full circle. */
+  shape?: NmControlShape;
   active?: boolean;
   iconContent?: ReactNode;
   testId?: string;
@@ -31,6 +34,7 @@ export const NmSmallIconButton = forwardRef<HTMLButtonElement, NmSmallIconButton
       label,
       icon,
       tone = NM_SMALL_ICON_BUTTON_TONES.solid,
+      shape,
       active = false,
       iconContent,
       testId,
@@ -47,6 +51,7 @@ export const NmSmallIconButton = forwardRef<HTMLButtonElement, NmSmallIconButton
         glyph={icon}
         label={label}
         tone={SMALL_ICON_BUTTON_TONE[tone]}
+        shape={shape}
         active={active}
         disabled={disabled}
         testId={testId}

package/registry/ui/components/nordman-icon-button/nordman-icon-button.css

@@ -93,6 +93,9 @@
     cursor: pointer;
   }
 
+  .nm-icon-button--round {
+    border-radius: var(--nm-radius-round);
+  }
   .nm-icon-button--invert.nm-chatbox__send:not(:disabled),
   .nm-icon-button--invert.nm-chatbox__send:not(:disabled):hover,
   .nm-icon-button--invert.nm-chatbox__send:not(:disabled):focus-visible {

package/registry/ui/components/nordman-icon-button/nordman-icon-button.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';
 import type { NmIconId } from '../../config/nm-icons.ts';
+import { NM_CONTROL_SHAPES, type NmControlShape } from '../../config/nm-shape.ts';
 import {
   NM_ICON_BUTTON_CLASSES,
   NM_ICON_BUTTON_TONES,
@@ -24,6 +25,8 @@ type NordmanIconButtonProps = {
   label: string;
   href?: string;
   tone?: NmIconButtonTone;
+  /** Soft follows the themed radius; round is a full circle. */
+  shape?: NmControlShape;
   variant?: NordmanIconButtonVariant;
   testId?: string;
   imageSrc?: string;
@@ -55,12 +58,14 @@ function iconButtonTone(
 
 function iconButtonClass(
   tone: NmIconButtonTone,
+  shape: NmControlShape | undefined,
   active: boolean,
   className: string | undefined,
 ): string {
   return [
     NM_ICON_BUTTON_CLASSES.root,
     tone === NM_ICON_BUTTON_TONES.line ? '' : NM_ICON_BUTTON_CLASSES[tone],
+    shape === NM_CONTROL_SHAPES.round ? NM_ICON_BUTTON_CLASSES.round : '',
     active ? NM_ICON_BUTTON_CLASSES.active : '',
     className ?? '',
   ]
@@ -127,6 +132,7 @@ export const NordmanIconButton = forwardRef<HTMLButtonElement, NordmanIconButton
       label,
       href,
       tone,
+      shape,
       variant,
       active = false,
       pressed,
@@ -142,7 +148,7 @@ export const NordmanIconButton = forwardRef<HTMLButtonElement, NordmanIconButton
       ...rest
     } = props;
     const resolvedTone = iconButtonTone(tone, variant);
-    const buttonClass = iconButtonClass(resolvedTone, active, className);
+    const buttonClass = iconButtonClass(resolvedTone, shape, active, className);
     const marked = pressed ?? checked ?? (active ? true : undefined);
     logger.debug('render', glyph ?? icon ?? label, { href: Boolean(href), tone: resolvedTone });
     const face = (

package/registry/ui/config/nm-button.ts

@@ -36,6 +36,7 @@ export const NM_BUTTON_CLASSES = {
   large: 'nm-button--large',
   block: 'nm-button--block',
   icon: 'nm-button--icon',
+  round: 'nm-button--round',
 } as const;
 
 /** The button's class names, for triggers that must stay a Base UI part, such as a menu or popover trigger. */