@nordmanai/nif 0.2.1 → 0.2.3

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

@@ -124,10 +124,11 @@ export function NmMessage(props: {
 
 /* ----- Reasoning ----- */
 
-export function NmReasoning(props: { text: string; streaming?: boolean; seconds?: number; defaultOpen?: boolean }): ReactNode {
-  const label = props.streaming ? 'Thinking' : `Thought for ${props.seconds ?? 0} seconds`;
+/** `label` is the heading in the product's language; without it the heading says Thinking, or how long the thought took. */
+export function NmReasoning(props: { text: string; streaming?: boolean; seconds?: number; label?: string; defaultOpen?: boolean }): ReactNode {
+  const label = props.label ?? (props.streaming ? 'Thinking' : props.seconds == null ? 'Thoughts' : `Thought for ${props.seconds} seconds`);
   return (
-    <NmTrace ariaLabel="Reasoning">
+    <NmTrace ariaLabel={label}>
       <NmTraceCollapsible defaultOpen={props.defaultOpen}>
         <NmTraceCollapsibleTrigger>
           <NmTraceLine status={props.streaming ? 'running' : undefined}>
@@ -519,8 +520,10 @@ const TOOL_TITLE: Record<NmToolState, (name: string) => string> = {
   'output-denied': (n) => `Denied ${n}`,
 };
 
+/** `title` is the row's heading in the product's language; without it the heading is built from the state and name. */
 export function NmTool(props: {
   name: string;
+  title?: string;
   state: NmToolState;
   input?: string;
   output?: string;
@@ -542,7 +545,7 @@ export function NmTool(props: {
           <NmTraceCollapsibleTrigger>
             <NmTraceLine status={status}>
               <NmTraceIcon><NmTraceGlyph kind="command" /></NmTraceIcon>
-              <NmTraceTitle shimmer={running}>{TOOL_TITLE[props.state](props.name)}</NmTraceTitle>
+              <NmTraceTitle shimmer={running}>{props.title ?? TOOL_TITLE[props.state](props.name)}</NmTraceTitle>
             </NmTraceLine>
           </NmTraceCollapsibleTrigger>
           <NmTraceCollapsibleContent>

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

@@ -0,0 +1,85 @@
+  .nm-alert {
+    position: relative;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    column-gap: var(--nm-space-12);
+    row-gap: var(--nm-space-4);
+    align-items: start;
+    padding: var(--nm-space-16);
+    border: var(--nm-rule) solid var(--nm-line-strong);
+    border-radius: var(--nm-radius-lg);
+    background: var(--nm-panel);
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui);
+    line-height: var(--nm-leading-normal);
+    width: 100%;
+  }
+
+  .nm-alert[data-tone='danger'],
+  .nm-alert[data-tone='destructive'] {
+    border-color: rgb(var(--nm-destructive-rgb) / 40%);
+    background: rgb(var(--nm-destructive-rgb) / 10%);
+    color: rgb(var(--nm-destructive-rgb));
+  }
+
+  .nm-alert[data-tone='warning'],
+  .nm-alert[data-tone='info'],
+  .nm-alert[data-tone='success'] {
+    background: var(--nm-raised);
+  }
+
+  .nm-alert > svg,
+  .nm-alert > .nm-icon,
+  .nm-alert__icon {
+    grid-column: 1;
+    grid-row: 1 / -1;
+    display: inline-flex;
+    flex-shrink: 0;
+    margin-top: var(--nm-space-2);
+    color: currentColor;
+  }
+
+  .nm-alert__title {
+    grid-column: 2;
+    grid-row: 1;
+    font-weight: var(--nm-weight-semibold);
+    font-size: var(--nm-type-ui);
+    line-height: var(--nm-leading-tight);
+    letter-spacing: var(--nm-track-tight);
+    margin: 0;
+  }
+
+  .nm-alert__description {
+    grid-column: 2;
+    font-size: var(--nm-type-ui-sm);
+    color: var(--nm-fg-muted);
+    line-height: var(--nm-leading-relaxed);
+    margin: 0;
+  }
+
+  .nm-alert[data-tone='danger'] .nm-alert__description,
+  .nm-alert[data-tone='destructive'] .nm-alert__description {
+    color: rgb(var(--nm-destructive-rgb) / 80%);
+  }
+
+  .nm-alert__action {
+    grid-column: 3;
+    grid-row: 1 / -1;
+    align-self: center;
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .nm-alert__body {
+    grid-column: 2;
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-4);
+    min-width: 0;
+  }
+
+  .nm-alert > :not(svg):not(.nm-icon):not(.nm-alert__icon):not(.nm-alert__title):not(.nm-alert__description):not(.nm-alert__action):not(.nm-alert__body) {
+    grid-column: 2;
+  }

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

@@ -0,0 +1,35 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { nmClass } from '../../lib/nm-class.ts';
+
+export type NmAlertTone = 'default' | 'info' | 'warning' | 'danger' | 'success';
+
+/**
+ * A notice inside the page. The shadcn Alert composition, styled by NIF tokens.
+ * Compose with NmIcon, NmAlertTitle, NmAlertDescription and NmAlertAction.
+ */
+export function NmAlert({
+  tone = 'default',
+  icon,
+  className,
+  children,
+  ...props
+}: ComponentProps<'div'> & { tone?: NmAlertTone; icon?: ReactNode }): ReactNode {
+  return (
+    <div role="alert" data-slot="alert" data-tone={tone} className={nmClass('nm-alert', className)} {...props}>
+      {icon != null ? <span className="nm-alert__icon">{icon}</span> : null}
+      {children}
+    </div>
+  );
+}
+
+export function NmAlertTitle({ className, ...props }: ComponentProps<'div'>): ReactNode {
+  return <div data-slot="alert-title" className={nmClass('nm-alert__title', className)} {...props} />;
+}
+
+export function NmAlertDescription({ className, ...props }: ComponentProps<'div'>): ReactNode {
+  return <div data-slot="alert-description" className={nmClass('nm-alert__description', className)} {...props} />;
+}
+
+export function NmAlertAction({ className, ...props }: ComponentProps<'div'>): ReactNode {
+  return <div data-slot="alert-action" className={nmClass('nm-alert__action', className)} {...props} />;
+}

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

@@ -64,6 +64,30 @@
     color: rgb(var(--nm-destructive-rgb));
   }
 
+  .nm-button--ghost {
+    border-color: transparent;
+    background: transparent;
+    color: var(--nm-fg);
+  }
+
+  .nm-button--ghost:hover:not(:disabled) {
+    background: var(--nm-panel);
+  }
+
+  .nm-button--link {
+    height: auto;
+    padding: 0;
+    line-height: var(--nm-leading-snug);
+    border-color: transparent;
+    background: transparent;
+    color: var(--nm-fg);
+    text-underline-offset: 4px;
+  }
+
+  .nm-button--link:hover:not(:disabled) {
+    text-decoration: underline;
+  }
+
   .nm-button--filled:hover:not(:disabled),
   .nm-button--danger:hover:not(:disabled) {
     opacity: var(--btn-hover);

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { forwardRef, type ButtonHTMLAttributes, type MouseEvent, type ReactNode } from 'react';
 import type { NmIconId } from '../../config/nm-icons.ts';
 import {
   NM_BUTTON_CLASSES,
@@ -8,12 +8,15 @@ import {
   type NmButtonTone,
 } from '../../config/nm-button.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';
 
 const logger = createLogger('interface-nm-button');
 
 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;
   block?: boolean;
@@ -24,35 +27,53 @@ export type NmButtonProps = {
   /** Shows the icon alone, in a square. The label is still its accessible name. */
   iconOnly?: boolean;
   testId?: string;
-  onClick?: () => void;
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 };
 
-export function NmButton(props: NmButtonProps): ReactNode {
-  const size = props.size ?? NM_BUTTON_SIZES.default;
+/** Any other button attribute, ref and event goes to the button, so a Base UI trigger can render a NmButton. */
+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 size = sizeProp ?? NM_BUTTON_SIZES.default;
   const className = [
     NM_BUTTON_CLASSES.root,
-    NM_BUTTON_CLASSES[props.tone],
+    NM_BUTTON_CLASSES[tone],
     NM_BUTTON_CLASSES[size],
-    props.block ? NM_BUTTON_CLASSES.block : null,
-    props.iconOnly ? NM_BUTTON_CLASSES.icon : null,
+    block ? NM_BUTTON_CLASSES.block : null,
+    iconOnly ? NM_BUTTON_CLASSES.icon : null,
+    extra,
   ]
     .filter(Boolean)
     .join(' ');
-  logger.debug('render', props.label, { tone: props.tone, size });
-  return (
-    <button
+  logger.debug('render', label, { tone, size });
+  const button = (
+    <MotionButton
+      {...(rest as object)}
+      ref={ref}
       className={className}
-      type={props.type ?? 'button'}
-      disabled={props.disabled}
-      aria-pressed={props.pressed}
-      aria-label={props.iconOnly ? props.label : undefined}
-      data-testid={props.testId}
-      onClick={props.onClick}
+      type={type ?? 'button'}
+      disabled={disabled}
+      aria-pressed={pressed}
+      aria-label={rest['aria-label'] ?? (iconOnly ? label : undefined)}
+      data-testid={testId ?? rest['data-testid' as keyof typeof rest]}
+      onClick={onClick}
+      hoverScale={disabled ? 1 : 1.02}
+      tapScale={disabled ? 1 : 0.97}
     >
-      {props.icon ? <NmIcon id={props.icon} className="nm-button__icon" /> : null}
-      {props.iconOnly ? null : <span className="nm-button__label">{props.label}</span>}
-    </button>
+      {children != null ? (
+        children
+      ) : (
+        <>
+          {icon ? <NmIcon id={icon} className="nm-button__icon" /> : null}
+          {iconOnly ? null : <span className="nm-button__label">{label}</span>}
+        </>
+      )}
+    </MotionButton>
   );
-}
+  // The icon plays its animation when the button is hovered.
+  // Always wrapped, so the control keeps its place in the tree when its icon is added or removed.
+  return <AnimateIcon animateOnHover={Boolean(icon)} asChild>{button}</AnimateIcon>;
+});
 
 export { NM_BUTTON_SIZES, NM_BUTTON_TONES };

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

@@ -1,4 +1,4 @@
-import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
+import { Checkbox as CheckboxPrimitive } from '../../lib/nm-motion.ts';
 import { nmClass } from '../../lib/nm-class.ts';
 import { NmIcon } from '../nm-icon/nm-icon.tsx';
 

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

@@ -26,12 +26,37 @@
     padding: 0 var(--badge-px);
   }
 
+  /* In a sentence: the type of the text around it, and a height that fits a line of it. */
+  .nm-chip[data-size='inline'] {
+    --nm-chip-fs: 1em;
+    --nm-chip-h: calc(var(--nm-chip-fs) * var(--nm-leading-normal));
+    padding: 0 var(--nm-space-8);
+    font-size: var(--nm-chip-fs);
+    line-height: var(--nm-leading-none);
+    vertical-align: top;
+    position: relative;
+    /* Centred in the host's line, which the host may name; without a name the line is as tall as the chip. */
+    top: calc((var(--nm-inline-line, var(--nm-chip-h)) - var(--nm-chip-h)) / 2);
+  }
+
   /* Icons read these two tokens, so the chip scales them to its own type. */
   .nm-chip {
     --nm-icon: var(--nm-chip-fs);
     --nm-icon-button: var(--nm-chip-fs);
   }
 
+  .nm-chip__leading {
+    display: inline-flex;
+    flex-shrink: 0;
+    width: var(--nm-chip-fs);
+    height: var(--nm-chip-fs);
+  }
+
+  .nm-chip__leading > * {
+    width: 100%;
+    height: 100%;
+  }
+
   .nm-chip svg {
     flex-shrink: 0;
   }

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

@@ -1,10 +1,12 @@
 import type { ComponentProps, ReactNode } from 'react';
 import { nmClass } from '../../lib/nm-class.ts';
 import type { NmIconId } from '../../config/nm-icons.ts';
+import { AnimateIcon } from '../../lib/nm-motion.ts';
 import { NmIcon } from '../nm-icon/nm-icon.tsx';
 
 export const NM_CHIP_TONES = ['neutral', 'outline', 'filled', 'ok', 'warn', 'error'] as const;
-export const NM_CHIP_SIZES = ['default', 'sm'] as const;
+/** `inline` takes the size of the text around it, for a chip that sits in a sentence. */
+export const NM_CHIP_SIZES = ['default', 'sm', 'inline'] as const;
 export type NmChipTone = (typeof NM_CHIP_TONES)[number];
 export type NmChipSize = (typeof NM_CHIP_SIZES)[number];
 
@@ -12,6 +14,8 @@ type NmChipBase = {
   tone?: NmChipTone;
   size?: NmChipSize;
   icon?: NmIconId;
+  /** A mark in the icon's place, such as an app's logo. `icon` wins when both are given. */
+  leading?: ReactNode;
   /** A chip that stands for a chosen filter or option. */
   selected?: boolean;
   disabled?: boolean;
@@ -35,6 +39,7 @@ export function NmChip({
   tone = 'neutral',
   size = 'default',
   icon,
+  leading,
   selected,
   disabled,
   children,
@@ -55,7 +60,7 @@ export function NmChip({
   } as const;
   const body = (
     <>
-      {icon ? <NmIcon id={icon} /> : null}
+      {icon ? <NmIcon id={icon} /> : leading != null ? <span className="nm-chip__leading">{leading}</span> : null}
       {children}
     </>
   );
@@ -67,11 +72,12 @@ export function NmChip({
     );
   }
   if (onClick) {
-    return (
+    const button = (
       <button className={classes} {...(rest as ComponentProps<'button'>)} {...state} type="button" disabled={disabled} aria-pressed={rest.role ? undefined : (selected ?? undefined)} onClick={onClick}>
         {body}
       </button>
     );
+    return <AnimateIcon animateOnHover={Boolean(icon)} asChild>{button}</AnimateIcon>;
   }
   return (
     <span {...rest} {...state} className={classes}>

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

@@ -0,0 +1,3 @@
+  .nm-collapsible__content {
+    overflow: hidden;
+  }

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

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import { Collapsible as CollapsiblePrimitive } from '../../lib/nm-motion.ts';
+import { nmClass } from '../../lib/nm-class.ts';
+
+/** Content that opens and closes under a trigger. Built on the Base UI Collapsible, animated by Animate UI. */
+export function NmCollapsible(props: CollapsiblePrimitive.Root.Props): ReactNode {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+export function NmCollapsibleTrigger(props: CollapsiblePrimitive.Trigger.Props): ReactNode {
+  return <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />;
+}
+
+export function NmCollapsibleContent({ className, ...props }: CollapsiblePrimitive.Panel.Props): ReactNode {
+  return <CollapsiblePrimitive.Panel data-slot="collapsible-content" className={nmClass('nm-collapsible__content', className as string)} {...props} />;
+}

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';
+import { Combobox as ComboboxPrimitive } from '../../lib/nm-motion.ts';
 import { nmClass } from '../../lib/nm-class.ts';
 import { NmIcon } from '../nm-icon/nm-icon.tsx';
 

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

@@ -188,3 +188,51 @@
       transform: rotate(360deg);
     }
   }
+
+  /* The compact list for a popover: it takes the popover's frame, and its rows are menu rows. */
+  .nm-command[data-variant='menu'] {
+    gap: var(--nm-space-4);
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+  }
+
+  .nm-command[data-variant='menu'] .nm-command__list {
+    margin: 0;
+  }
+
+  .nm-command[data-variant='menu'] [cmdk-list-sizer] {
+    gap: var(--nm-space-4);
+  }
+
+  .nm-command[data-variant='menu'] .nm-command__item {
+    min-height: var(--nm-icon-control);
+    padding: var(--nm-icon-pad);
+    border-radius: var(--nm-panel-item-radius);
+  }
+
+  .nm-command__description {
+    color: var(--nm-fg-subtle);
+    font-size: var(--nm-type-ui-sm);
+    font-weight: var(--nm-weight-regular);
+  }
+
+  .nm-command[data-variant='menu'] .nm-command__description {
+    margin-left: auto;
+    color: var(--nm-fg-subtle);
+    font-size: var(--nm-type-ui-sm);
+    font-weight: var(--nm-weight-regular);
+  }
+
+  .nm-command__icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    width: var(--nm-icon);
+    height: var(--nm-icon);
+  }
+
+  .nm-command__icon > * {
+    width: 100%;
+    height: 100%;
+  }

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

@@ -1,6 +1,7 @@
 import { NmChip } from '../nm-chip/nm-chip.tsx';
 import { useState, type ComponentProps, type ReactNode } from 'react';
 import { Command as CommandPrimitive } from 'cmdk';
+import { AnimateIcon } from '../../lib/nm-motion.ts';
 import { nmClass } from '../../lib/nm-class.ts';
 import { NmDialog, NmDialogContent, NmDialogDescription, NmDialogHeader, NmDialogTitle } from '../nm-dialog/nm-dialog.tsx';
 import { NmIcon } from '../nm-icon/nm-icon.tsx';
@@ -9,8 +10,9 @@ import { NmIcon } from '../nm-icon/nm-icon.tsx';
  * Command: search and run. The shadcn Command composition on cmdk, which gives filtering, arrow-key
  * navigation and the listbox roles. Everything you see is NIF tokens.
  */
-export function NmCommand({ className, ...props }: ComponentProps<typeof CommandPrimitive>) {
-  return <CommandPrimitive data-slot="command" className={nmClass('nm-command', className)} {...props} />;
+/** `variant="menu"` is the compact list for a popover: no frame, rows the size of menu rows. */
+export function NmCommand({ className, variant = 'panel', ...props }: ComponentProps<typeof CommandPrimitive> & { variant?: 'panel' | 'menu' }) {
+  return <CommandPrimitive data-slot="command" data-variant={variant} className={nmClass('nm-command', className)} {...props} />;
 }
 
 export function NmCommandDialog({
@@ -109,9 +111,11 @@ export function NmCommandSeparator({ className, ...props }: ComponentProps<typeo
 
 export function NmCommandItem({ className, children, ...props }: ComponentProps<typeof CommandPrimitive.Item>) {
   return (
-    <CommandPrimitive.Item data-slot="command-item" className={nmClass('nm-command__item', className)} {...props}>
-      {children}
-    </CommandPrimitive.Item>
+    <AnimateIcon animateOnHover asChild>
+      <CommandPrimitive.Item data-slot="command-item" className={nmClass('nm-command__item', className)} {...props}>
+        {children}
+      </CommandPrimitive.Item>
+    </AnimateIcon>
   );
 }
 
@@ -123,3 +127,13 @@ export function NmCommandItemActions({ className, ...props }: ComponentProps<'sp
 export function NmCommandShortcut({ className, ...props }: ComponentProps<'span'>) {
   return <span data-slot="command-shortcut" className={nmClass('nm-command__shortcut', className)} {...props} />;
 }
+
+/** A quiet line after an item's name. In the menu variant it sits at the end of the row. */
+export function NmCommandDescription({ className, ...props }: ComponentProps<'span'>) {
+  return <span data-slot="command-description" className={nmClass('nm-command__description', className)} {...props} />;
+}
+
+/** The slot for a mark at the start of an item, such as an app's logo. It sizes whatever it holds. */
+export function NmCommandIcon({ className, ...props }: ComponentProps<'span'>) {
+  return <span data-slot="command-icon" className={nmClass('nm-command__icon', className)} {...props} />;
+}

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

@@ -1,4 +1,5 @@
   .nm-composer {
+    position: relative;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
@@ -33,13 +34,85 @@
     gap: var(--nm-space-8);
   }
 
+  /*
+   * While it listens, the field stays where it is, hidden, so the box keeps its height. The listening content lies
+   * over it and fills exactly that space, whatever it draws.
+   */
+  .nm-composer__listening {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+  }
+
+  /* Whatever the host puts there is the size of the space and no more. */
+  .nm-composer .nm-composer__listening > * {
+    flex: 1 1 auto;
+    width: 100%;
+    min-width: 0;
+    height: 100%;
+    min-height: 0;
+  }
+
+  .nm-composer__field-wrap[data-listening='true'] > :not(.nm-composer__listening) {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .nm-composer__field-wrap {
+    --nm-composer-line: var(--nm-space-24);
+    position: relative;
+  }
+
+  .nm-composer__field[data-inline='true'] {
+    position: relative;
+    z-index: 1;
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+    caret-color: var(--nm-fg);
+  }
+
+  /* The words with the chips drawn in them, over the field, with the field's own type and line. */
+  .nm-composer__inline {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    overflow: auto;
+    scrollbar-width: none;
+    pointer-events: none;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    color: var(--nm-fg);
+    font: inherit;
+    line-height: var(--nm-composer-line);
+    user-select: none;
+  }
+
+  .nm-composer__inline::-webkit-scrollbar {
+    display: none;
+  }
+
+  .nm-composer__inline {
+    --nm-inline-line: var(--nm-composer-line);
+  }
+
+  .nm-composer__inline-chip {
+    pointer-events: auto;
+    user-select: none;
+  }
+
   .nm-composer__field {
     display: block;
     box-sizing: border-box;
     width: 100%;
-    --nm-composer-line: calc(var(--nm-space-16) + var(--nm-space-4));
+    --nm-composer-line: var(--nm-space-24);
     min-height: var(--nm-composer-line);
-    max-height: calc(var(--nm-composer-line) * 8);
+    /* Three lines, then it scrolls, without a scrollbar in any browser. */
+    max-height: calc(var(--nm-composer-line) * 3);
+    overflow-y: auto;
+    scrollbar-width: none;
     margin: 0;
     padding: 0;
     border: 0;
@@ -49,7 +122,17 @@
     line-height: var(--nm-composer-line);
     outline: none;
     resize: none;
-    field-sizing: content;
+    transition: height var(--reveal) var(--ease);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .nm-composer__field {
+      transition: none;
+    }
+  }
+
+  .nm-composer__field::-webkit-scrollbar {
+    display: none;
   }
 
   .nm-composer__field::placeholder {
@@ -58,6 +141,7 @@
   }
 
   .nm-composer__bar {
+    min-height: var(--control-h);
     display: flex;
     align-items: center;
     justify-content: space-between;