@nordmanai/nif 0.2.5 → 0.2.8

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

@@ -0,0 +1,41 @@
+import type { ComponentProps } from 'react';
+import { Dialog as DialogPrimitive } from '../../lib/nm-motion.ts';
+import { nmClass } from '../../lib/nm-class.ts';
+import type { NmDrawerSide } from '../../config/nm-drawer.ts';
+
+/**
+ * A panel that slides in from an edge, over the page, with a scrim behind it. The shadcn Sheet, on the Base UI
+ * Dialog, styled by NIF tokens. For navigation on a phone, filters, or a form that should not leave the page.
+ */
+export function NmDrawer(props: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="drawer" {...props} />;
+}
+export function NmDrawerTrigger(props: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+export function NmDrawerClose(props: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+/** The panel. `side` is the edge it comes from. Its width is the --nm-width-drawer token. */
+export function NmDrawerContent({ className, children, side = 'left', ...props }: DialogPrimitive.Popup.Props & { side?: NmDrawerSide }) {
+  return (
+    <DialogPrimitive.Portal>
+      <DialogPrimitive.Backdrop data-slot="drawer-overlay" className="nm-drawer__backdrop" />
+      <DialogPrimitive.Popup data-slot="drawer-content" data-side={side} from={side} className={nmClass('nm-drawer', className as string)} {...props}>
+        {children}
+      </DialogPrimitive.Popup>
+    </DialogPrimitive.Portal>
+  );
+}
+export function NmDrawerHeader({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="drawer-header" className={nmClass('nm-drawer__header', className)} {...props} />;
+}
+export function NmDrawerFooter({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="drawer-footer" className={nmClass('nm-drawer__footer', className)} {...props} />;
+}
+export function NmDrawerTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return <DialogPrimitive.Title data-slot="drawer-title" className={nmClass('nm-drawer__title', className as string)} {...props} />;
+}
+export function NmDrawerDescription({ className, ...props }: DialogPrimitive.Description.Props) {
+  return <DialogPrimitive.Description data-slot="drawer-description" className={nmClass('nm-drawer__description', className as string)} {...props} />;
+}

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

@@ -0,0 +1,647 @@
+  /* The provider holds the sidebar and the main area side by side. */
+  .nm-sidebar-provider {
+    --nm-sidebar-width: var(--nm-width-sidebar);
+    --nm-sidebar-width-icon: var(--nm-width-sidebar-icon);
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    width: 100%;
+    min-height: 100%;
+    min-width: 0;
+    overflow: hidden;
+    background: var(--nm-canvas);
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui);
+  }
+  /* A fixed height frames the provider as a card: a sidebar shown inside a page. */
+  .nm-sidebar-provider[data-height='sm'],
+  .nm-sidebar-provider[data-height='lg'] {
+    min-height: 0;
+    border: var(--nm-rule) solid var(--nm-line-strong);
+    border-radius: var(--nm-radius-lg);
+  }
+  .nm-sidebar-provider[data-height='sm'] {
+    height: var(--nm-height-sidebar-sm);
+  }
+  .nm-sidebar-provider[data-height='lg'] {
+    height: var(--nm-height-sidebar-lg);
+  }
+
+  /* The sidebar: a column that takes its width from the provider and gives it up when collapsed. */
+  .nm-sidebar {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    flex: 0 0 auto;
+    flex-direction: column;
+    width: var(--nm-sidebar-width);
+    min-height: 0;
+    overflow: hidden;
+    color: var(--nm-fg);
+    background: var(--nm-raised);
+    transition:
+      width var(--reveal) var(--ease),
+      padding var(--reveal) var(--ease);
+  }
+  .nm-sidebar[data-side='right'] {
+    order: 1;
+  }
+  .nm-sidebar[data-variant='sidebar'][data-side='left'] {
+    border-inline-end: var(--nm-rule) solid var(--nm-divider);
+  }
+  .nm-sidebar[data-variant='sidebar'][data-side='right'] {
+    border-inline-start: var(--nm-rule) solid var(--nm-divider);
+  }
+  .nm-sidebar[data-collapsible='offcanvas'] {
+    width: 0;
+    border-width: 0;
+  }
+  .nm-sidebar[data-collapsible='icon'],
+  .nm-sidebar[data-collapsible='toggle'] {
+    width: var(--nm-sidebar-width-icon);
+  }
+
+  /* The inner column keeps its width while the outer one closes, so nothing reflows on the way out. */
+  .nm-sidebar__inner {
+    box-sizing: border-box;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
+  }
+  .nm-sidebar[data-collapsible='offcanvas'] .nm-sidebar__inner {
+    width: var(--nm-sidebar-width);
+  }
+
+  /* Peek: the collapsed sidebar shown in full over the main area while the pointer rests on it or on the toggle.
+     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;
+  }
+  .nm-sidebar[data-mode='offcanvas'][data-peek] {
+    width: 0;
+    border-width: 0;
+  }
+  .nm-sidebar[data-mode='icon'][data-peek],
+  .nm-sidebar[data-mode='toggle'][data-peek] {
+    width: var(--nm-sidebar-width-icon);
+  }
+  .nm-sidebar[data-peek] .nm-sidebar__inner {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: var(--nm-sidebar-width);
+    border-inline-end: var(--nm-rule) solid var(--nm-line-strong);
+    background: var(--nm-raised);
+  }
+  .nm-sidebar[data-side='right'][data-peek] .nm-sidebar__inner {
+    inset-inline-start: auto;
+    inset-inline-end: 0;
+    border-inline-end: 0;
+    border-inline-start: var(--nm-rule) solid var(--nm-line-strong);
+  }
+  .nm-sidebar[data-variant='floating'][data-peek] .nm-sidebar__inner,
+  .nm-sidebar[data-variant='inset'][data-peek] .nm-sidebar__inner {
+    inset-block: var(--nm-space-8);
+    inset-inline-start: var(--nm-space-8);
+    border: var(--nm-rule) solid var(--nm-line-strong);
+    border-radius: var(--nm-radius-lg);
+  }
+  .nm-sidebar[data-variant='floating'][data-side='right'][data-peek] .nm-sidebar__inner,
+  .nm-sidebar[data-variant='inset'][data-side='right'][data-peek] .nm-sidebar__inner {
+    inset-inline-start: auto;
+    inset-inline-end: var(--nm-space-8);
+  }
+
+  /* Floating: a raised card inside a margin. Inset: the sidebar is on the canvas and the main area is the card. */
+  .nm-sidebar[data-variant='floating'],
+  .nm-sidebar[data-variant='inset'] {
+    padding: var(--nm-space-8);
+    background: var(--nm-canvas);
+  }
+  .nm-sidebar[data-variant='floating'][data-side='left'],
+  .nm-sidebar[data-variant='inset'][data-side='left'] {
+    padding-inline-end: 0;
+  }
+  .nm-sidebar[data-variant='floating'][data-side='right'],
+  .nm-sidebar[data-variant='inset'][data-side='right'] {
+    padding-inline-start: 0;
+  }
+  .nm-sidebar[data-variant='floating'] .nm-sidebar__inner {
+    border: var(--nm-rule) solid var(--nm-line-strong);
+    border-radius: var(--nm-radius-lg);
+    background: var(--nm-raised);
+  }
+  .nm-sidebar[data-variant='floating'][data-collapsible='offcanvas'],
+  .nm-sidebar[data-variant='inset'][data-collapsible='offcanvas'],
+  .nm-sidebar[data-variant='floating'][data-mode='offcanvas'][data-peek],
+  .nm-sidebar[data-variant='inset'][data-mode='offcanvas'][data-peek] {
+    padding-inline: 0;
+  }
+
+  /* On a phone the sidebar is a drawer over the page: the NIF Drawer at the sidebar's phone width. */
+  .nm-sidebar__sheet {
+    --nm-width-drawer: var(--nm-width-sidebar-mobile);
+  }
+
+  /* The main area. With the inset variant it is the raised card. */
+  .nm-sidebar__inset {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    background: var(--nm-canvas);
+  }
+  .nm-sidebar[data-variant='inset'] ~ .nm-sidebar__inset {
+    margin: var(--nm-space-8);
+    overflow: hidden;
+    border-radius: var(--nm-radius-lg);
+    background: var(--nm-raised);
+  }
+
+  /* The button that toggles the sidebar: the quiet NIF icon button, kept in place in a bar or a header. */
+  .nm-sidebar__trigger {
+    flex-shrink: 0;
+  }
+  /* 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;
+    align-items: center;
+  }
+  .nm-sidebar__header:has(> .nm-sidebar__trigger) > :not(.nm-sidebar__trigger) {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+  .nm-sidebar[data-side='right'] .nm-sidebar__header:has(> .nm-sidebar__trigger) {
+    flex-direction: row-reverse;
+  }
+  .nm-sidebar[data-collapsible='icon'] .nm-sidebar__header:has(> .nm-sidebar__trigger) {
+    flex-direction: column;
+  }
+
+  /* The thin strip on the edge that toggles the sidebar. A line appears on hover. */
+  .nm-sidebar__rail {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: calc(var(--nm-space-8) * -1);
+    z-index: 1;
+    width: var(--nm-space-16);
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: w-resize;
+    outline: none;
+  }
+  .nm-sidebar[data-side='right'] .nm-sidebar__rail {
+    inset-inline-end: auto;
+    inset-inline-start: calc(var(--nm-space-8) * -1);
+    cursor: e-resize;
+  }
+  .nm-sidebar[data-state='collapsed'] .nm-sidebar__rail {
+    cursor: e-resize;
+  }
+  .nm-sidebar[data-state='collapsed'][data-side='right'] .nm-sidebar__rail {
+    cursor: w-resize;
+  }
+  .nm-sidebar__rail::after {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    left: 50%;
+    width: var(--nm-rule);
+    background: var(--nm-line-strong);
+    opacity: 0;
+    transition: opacity var(--reveal) var(--ease);
+  }
+  .nm-sidebar__rail:hover::after {
+    opacity: 1;
+  }
+
+  /* Header and footer stay put. The content between them scrolls. */
+  .nm-sidebar__header,
+  .nm-sidebar__footer {
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: column;
+    gap: var(--nm-space-8);
+    padding: var(--nm-space-8);
+  }
+  .nm-sidebar__content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+    overflow: hidden auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--nm-line-strong) transparent;
+  }
+  .nm-sidebar[data-collapsible='icon'] .nm-sidebar__content {
+    overflow: hidden;
+  }
+  .nm-sidebar__separator {
+    width: auto;
+    margin-inline: var(--nm-space-8);
+  }
+  .nm-sidebar__input {
+    height: var(--control-h);
+    background: var(--nm-panel);
+    border-color: transparent;
+  }
+
+  /* A group: label, optional action, then its rows. */
+  .nm-sidebar__group {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    padding: var(--nm-space-8);
+  }
+  .nm-sidebar__group-label {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--nm-space-8);
+    box-sizing: border-box;
+    height: var(--control-h);
+    padding: 0 var(--nm-icon-pad);
+    border-radius: var(--nm-control-r);
+    color: var(--nm-fg-subtle);
+    font-size: var(--nm-type-ui-sm);
+    font-weight: var(--nm-weight-medium);
+    line-height: var(--nm-leading-tight);
+    letter-spacing: var(--nm-track);
+    white-space: nowrap;
+    outline: none;
+  }
+  .nm-sidebar__group-label .nm-icon {
+    flex-shrink: 0;
+    width: var(--nm-icon-sm);
+    height: var(--nm-icon-sm);
+  }
+  /* Actions are the NIF small icon button, quiet. A tighter pad fits them inside a row. */
+  .nm-sidebar__group-action,
+  .nm-sidebar__menu-action {
+    --nm-icon-pad: var(--nm-space-6);
+    position: absolute;
+    inset-inline-end: var(--nm-space-4);
+    color: var(--nm-fg-subtle);
+  }
+  .nm-sidebar__group-action {
+    top: calc(var(--nm-space-8) + (var(--control-h) - var(--nm-icon-button) - var(--nm-space-6) * 2) / 2);
+    inset-inline-end: var(--nm-space-12);
+  }
+  .nm-sidebar__group-content {
+    width: 100%;
+    min-width: 0;
+  }
+
+  /* The menu is a plain list. */
+  .nm-sidebar__menu,
+  .nm-sidebar__menu-sub {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-2);
+    width: 100%;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .nm-sidebar__menu-item,
+  .nm-sidebar__menu-sub-item {
+    position: relative;
+    min-width: 0;
+  }
+
+  /* A row: an icon and a label. Quiet at rest, filled on hover, filled and firm when active. */
+  .nm-sidebar__menu-button {
+    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;
+    border-radius: var(--nm-control-r);
+    background: transparent;
+    color: var(--nm-fg);
+    font: inherit;
+    font-size: var(--nm-type-ui);
+    font-weight: var(--nm-weight-regular);
+    line-height: var(--nm-leading-tight);
+    text-align: start;
+    text-decoration: none;
+    white-space: nowrap;
+    overflow: hidden;
+    cursor: pointer;
+    outline: none;
+    transition:
+      background-color var(--reveal) var(--ease),
+      color var(--reveal) var(--ease);
+  }
+  .nm-sidebar__menu-button > span:not(.nm-avatar) {
+    min-width: 0;
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .nm-sidebar__menu-button > .nm-icon {
+    flex-shrink: 0;
+    width: var(--nm-icon-button);
+    height: var(--nm-icon-button);
+    color: var(--nm-fg-muted);
+    transition: color var(--reveal) var(--ease);
+  }
+  /* An avatar in a row: the NIF Avatar, on the strong line so it stays a disc when the row fills on hover or when active. */
+  .nm-sidebar__menu-button > .nm-avatar {
+    flex-shrink: 0;
+    background: var(--nm-line-strong);
+    color: var(--nm-fg);
+  }
+  .nm-sidebar__menu-button:hover,
+  .nm-sidebar__menu-button:focus-visible,
+  .nm-sidebar__menu-button[data-popup-open] {
+    background: var(--nm-line);
+    color: var(--nm-fg);
+  }
+  .nm-sidebar__menu-button:hover > .nm-icon,
+  .nm-sidebar__menu-button:focus-visible > .nm-icon,
+  .nm-sidebar__menu-button[data-active] > .nm-icon {
+    color: var(--nm-fg);
+  }
+  .nm-sidebar__menu-button:focus-visible {
+    outline: var(--nm-rule) solid var(--focus);
+    outline-offset: calc(var(--nm-rule) * -1);
+  }
+  .nm-sidebar__menu-button[data-active] {
+    background: var(--nm-panel);
+    color: var(--nm-fg);
+    font-weight: var(--nm-weight-medium);
+  }
+  .nm-sidebar__menu-button:disabled,
+  .nm-sidebar__menu-button[aria-disabled='true'] {
+    pointer-events: none;
+    opacity: var(--control-disabled-opacity);
+  }
+  .nm-sidebar__menu-button[data-variant='outline'] {
+    border-color: var(--nm-line-strong);
+    background: var(--nm-raised);
+  }
+  .nm-sidebar__menu-button[data-variant='outline']:hover,
+  .nm-sidebar__menu-button[data-variant='outline'][data-active] {
+    background: var(--nm-panel);
+  }
+  .nm-sidebar__menu-button[data-size='sm'] {
+    height: var(--control-h-sm);
+    font-size: var(--nm-type-ui-sm);
+  }
+  .nm-sidebar__menu-button[data-size='lg'] {
+    height: var(--control-h-lg);
+  }
+  /* A large row with two lines of text, such as the person in the footer. */
+  .nm-sidebar__menu-button > .nm-sidebar__text {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--nm-space-2);
+    min-width: 0;
+    line-height: var(--nm-leading-tight);
+  }
+  .nm-sidebar__text > span {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .nm-sidebar__text > span + span {
+    color: var(--nm-fg-subtle);
+    font-size: var(--nm-type-ui-sm);
+    font-weight: var(--nm-weight-regular);
+  }
+  /* A row with a badge or an action leaves room for it. */
+  .nm-sidebar__menu-item:has(> .nm-sidebar__menu-badge) > .nm-sidebar__menu-button,
+  .nm-sidebar__menu-item:has(> .nm-sidebar__menu-action) > .nm-sidebar__menu-button {
+    padding-inline-end: var(--nm-icon-control);
+  }
+
+  /* The chevron of a row that opens. It points right when closed and down when open. */
+  .nm-sidebar__chevron {
+    flex-shrink: 0;
+    margin-inline-start: auto;
+    width: var(--nm-icon-sm);
+    height: var(--nm-icon-sm);
+    color: var(--nm-fg-subtle);
+    transform: rotate(-90deg);
+    transition: transform var(--reveal) var(--ease);
+  }
+  [aria-expanded='true'] > .nm-sidebar__chevron,
+  [data-panel-open] > .nm-sidebar__chevron,
+  [data-open] > .nm-sidebar__chevron,
+  .nm-sidebar__chevron[data-menu] {
+    transform: none;
+  }
+
+  /* The action at the end of a row sits over the row's end, centred on its height. */
+  .nm-sidebar__menu-action {
+    /* Centred by arithmetic, not a transform: the motion button owns transform. */
+    top: calc(50% - (var(--nm-icon-button) + var(--nm-space-6) * 2) / 2);
+    transition:
+      opacity var(--reveal) var(--ease),
+      background-color var(--reveal) var(--ease);
+  }
+  .nm-sidebar__menu-action[data-show-on-hover] {
+    opacity: 0;
+  }
+  .nm-sidebar__menu-item:hover > .nm-sidebar__menu-action[data-show-on-hover],
+  .nm-sidebar__menu-item:focus-within > .nm-sidebar__menu-action[data-show-on-hover],
+  .nm-sidebar__menu-item:has(> [data-active]) > .nm-sidebar__menu-action[data-show-on-hover],
+  .nm-sidebar__menu-action[data-show-on-hover][data-popup-open],
+  .nm-sidebar__menu-action[data-show-on-hover][aria-expanded='true'] {
+    opacity: 1;
+  }
+
+  /* A count at the end of a row: the NIF Chip, small, quiet until the row is hovered or active. */
+  .nm-sidebar__menu-badge {
+    position: absolute;
+    top: 50%;
+    inset-inline-end: var(--nm-icon-pad);
+    background: transparent;
+    color: var(--nm-fg-subtle);
+    font-variant-numeric: tabular-nums;
+    pointer-events: none;
+    user-select: none;
+    transform: translateY(-50%);
+  }
+  .nm-sidebar__menu-item:hover > .nm-sidebar__menu-badge,
+  .nm-sidebar__menu-item:has(> [data-active]) > .nm-sidebar__menu-badge {
+    color: var(--nm-fg);
+  }
+
+  /* A row's shape while it loads. */
+  .nm-sidebar__menu-skeleton {
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-8);
+    box-sizing: border-box;
+    height: var(--control-h);
+    padding: 0 var(--nm-icon-pad);
+  }
+  .nm-sidebar__menu-skeleton-icon {
+    flex-shrink: 0;
+    width: var(--nm-icon-button);
+    height: var(--nm-icon-button);
+    border-radius: var(--nm-radius-sm);
+  }
+  .nm-sidebar__menu-skeleton-text {
+    flex: 1 1 auto;
+    max-width: var(--nm-sidebar-skeleton-width, 100%);
+    height: var(--nm-space-12);
+    border-radius: var(--nm-radius-sm);
+  }
+
+  /* Rows under a row. A line runs down from the parent's icon, and the rows sit after it. */
+  .nm-sidebar__menu-sub {
+    box-sizing: border-box;
+    width: auto;
+    margin-inline-start: calc(var(--nm-icon-pad) + var(--nm-icon-button) / 2);
+    padding-inline-start: calc(var(--nm-icon-pad) + var(--nm-icon-button) / 2);
+    padding-block: var(--nm-space-2);
+    border-inline-start: var(--nm-rule) solid var(--nm-line);
+  }
+  .nm-sidebar__menu-sub-button {
+    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: 0;
+    border-radius: var(--nm-control-r);
+    background: transparent;
+    color: var(--nm-fg-muted);
+    font: inherit;
+    font-size: var(--nm-type-ui);
+    font-weight: var(--nm-weight-regular);
+    line-height: var(--nm-leading-tight);
+    text-align: start;
+    text-decoration: none;
+    white-space: nowrap;
+    overflow: hidden;
+    cursor: pointer;
+    outline: none;
+    transition:
+      background-color var(--reveal) var(--ease),
+      color var(--reveal) var(--ease);
+  }
+  .nm-sidebar__menu-sub-button > span {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .nm-sidebar__menu-sub-button > .nm-icon {
+    flex-shrink: 0;
+    width: var(--nm-icon-sm);
+    height: var(--nm-icon-sm);
+    color: var(--nm-fg-subtle);
+  }
+  .nm-sidebar__menu-sub-button:hover,
+  .nm-sidebar__menu-sub-button:focus-visible {
+    background: var(--nm-line);
+    color: var(--nm-fg);
+  }
+  .nm-sidebar__menu-sub-button:focus-visible {
+    outline: var(--nm-rule) solid var(--focus);
+    outline-offset: calc(var(--nm-rule) * -1);
+  }
+  .nm-sidebar__menu-sub-button[data-active] {
+    background: var(--nm-panel);
+    color: var(--nm-fg);
+    font-weight: var(--nm-weight-medium);
+  }
+  .nm-sidebar__menu-sub-button[data-size='sm'] {
+    height: var(--control-h-sm);
+    font-size: var(--nm-type-ui-sm);
+  }
+  .nm-sidebar__menu-sub-button:disabled,
+  .nm-sidebar__menu-sub-button[aria-disabled='true'] {
+    pointer-events: none;
+    opacity: var(--control-disabled-opacity);
+  }
+
+  /* Collapsed to icons: every row is a square with its icon in the middle. Labels, badges, actions and sub rows go. */
+  .nm-sidebar[data-collapsible='icon'] .nm-sidebar__header,
+  .nm-sidebar[data-collapsible='icon'] .nm-sidebar__footer,
+  .nm-sidebar[data-collapsible='icon'] .nm-sidebar__group {
+    align-items: center;
+  }
+  .nm-sidebar[data-collapsible='icon'] .nm-sidebar__group-label,
+  .nm-sidebar[data-collapsible='icon'] .nm-sidebar__group-action,
+  .nm-sidebar[data-collapsible='icon'] .nm-sidebar__menu-badge,
+  .nm-sidebar[data-collapsible='icon'] .nm-sidebar__menu-action,
+  .nm-sidebar[data-collapsible='icon'] .nm-sidebar__menu-sub,
+  .nm-sidebar[data-collapsible='icon'] .nm-sidebar__input,
+  .nm-sidebar[data-collapsible='icon'] .nm-sidebar__chevron,
+  .nm-sidebar[data-collapsible='icon'] .nm-sidebar__menu-skeleton-text,
+  .nm-sidebar[data-collapsible='icon'] .nm-sidebar__menu-button:not(:has(.nm-icon, .nm-avatar)) {
+    display: none;
+  }
+  .nm-sidebar[data-collapsible='icon'] .nm-sidebar__menu-button {
+    width: var(--control-h);
+    height: var(--control-h);
+    padding: 0;
+    justify-content: center;
+  }
+  /* The label leaves the view but stays in the accessibility tree, so the row keeps its name. */
+  .nm-sidebar[data-collapsible='icon'] .nm-sidebar__menu-button > span:not(.nm-avatar),
+  .nm-sidebar[data-collapsible='icon'] .nm-sidebar__menu-button > .nm-sidebar__text {
+    position: absolute;
+    width: var(--nm-rule);
+    height: var(--nm-rule);
+    margin: calc(var(--nm-rule) * -1);
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+  .nm-sidebar[data-collapsible='icon'] .nm-sidebar__menu-button[data-size='lg'] {
+    width: var(--control-h-lg);
+    height: var(--control-h-lg);
+  }
+  .nm-sidebar[data-collapsible='icon'] .nm-sidebar__menu-button[data-size='sm'] {
+    width: var(--control-h-sm);
+    height: var(--control-h-sm);
+  }
+  .nm-sidebar[data-collapsible='icon'] .nm-sidebar__menu-skeleton {
+    width: var(--control-h);
+    padding: 0;
+    justify-content: center;
+  }
+
+  /* Collapsed to the toggle: only the toggle in the header remains, centred in the narrow column. */
+  .nm-sidebar[data-collapsible='toggle'] .nm-sidebar__inner > :not(.nm-sidebar__header),
+  .nm-sidebar[data-collapsible='toggle'] .nm-sidebar__header > :not(.nm-sidebar__trigger) {
+    display: none;
+  }
+  .nm-sidebar[data-collapsible='toggle'] .nm-sidebar__header {
+    align-items: center;
+    justify-content: center;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .nm-sidebar,
+    .nm-sidebar__menu-button,
+    .nm-sidebar__chevron,
+    .nm-sidebar__menu-action {
+      transition: none;
+    }
+  }