@adea-ai/ui 0.113.1 → 0.115.0

package/dist/r/src/components/ui/sheet/sheet.tsx

@@ -34,8 +34,9 @@ import { createDialogFocusRestoration, DialogOverlay } from '../dialog/dialog'
  *
  * Its parts read alike everywhere: `SheetHeader` holds a heading, a description
  * and a full-width rule beneath, with the close button in the corner;
- * `SheetBody` scrolls on its own; `SheetFooter` is a full-width tinted band that
- * holds the decision.
+ * `SheetBody` scrolls on its own; `SheetFooter` is a full-width band that holds
+ * the decision. Pass `band` to the header, the footer, or both to step those
+ * parts onto the ladder's subtle-fill rung (see `SheetFooter`).
  *
  * Controlled sheets opened from outside a `SheetTrigger` restore focus to the
  * element focused before opening. Pass `restoreFocusRef` when a stable external
@@ -174,13 +175,20 @@ export function SheetCloseButton(props: ComponentProps<typeof KobalteDialog.Clos
   return <KobalteDialog.CloseButton class={cn(local.class)} {...rest} />
 }
 
-export function SheetHeader(props: ComponentProps<'div'>) {
-  const [local, rest] = splitProps(props, ['class'])
+/**
+ * The sheet's title band: a heading, a description and the full-width rule
+ * beneath, with the close button in the corner. `band` steps the band onto the
+ * subtle-fill rung (see `SheetFooter`) — the two-toned anatomy of a sheet that
+ * reads as a panel beside the work rather than one flat canvas.
+ */
+export function SheetHeader(props: ComponentProps<'div'> & { band?: boolean }) {
+  const [local, rest] = splitProps(props, ['class', 'band'])
   return (
     <div
       data-slot="sheet-header"
       class={cn(
         'flex shrink-0 flex-col gap-1.5 border-b border-border p-4 pe-12 text-start',
+        { 'bg-muted': local.band },
         local.class
       )}
       {...rest}
@@ -199,13 +207,27 @@ export function SheetBody(props: ComponentProps<'div'>) {
   )
 }
 
-export function SheetFooter(props: ComponentProps<'div'>) {
-  const [local, rest] = splitProps(props, ['class'])
+/**
+ * The sheet's decision band: a full-width, hairline-ruled strip that holds the
+ * actions. `band` paints it with `--muted` — the elevation ladder's
+ * subtle-fill rung, one step up from the panel's `--background` — so the sheet
+ * reads two-toned: title band and decision band on the raised rung, scrolling
+ * body on the panel surface. The rung already exists for cards, sidebars and
+ * input fills; this is the panel-shaped overlay family claiming it. Opt-in
+ * because the flat panel is the documented default: the centred modal
+ * separates with veil, hairline and shadow instead (the elevated overlay rung
+ * amplifies the canvas chroma, which reads as a cast across a large panel),
+ * and a host opts a whole sheet family in by passing the prop where it composes
+ * the parts — not by restyling them from the outside.
+ */
+export function SheetFooter(props: ComponentProps<'div'> & { band?: boolean }) {
+  const [local, rest] = splitProps(props, ['class', 'band'])
   return (
     <div
       data-slot="sheet-footer"
       class={cn(
         'flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-border bg-background px-4 py-3',
+        { 'bg-muted': local.band },
         local.class
       )}
       {...rest}

package/dist/r/src/components/ui/status-chip/status-chip.tsx

@@ -13,7 +13,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip'
  * with no text (unreadable to anyone who cannot see it) and a bare word with no
  * explanation ("Needs configuration" — of what?).
  *
- * The tones are deliberately not a rainbow. Six cover what a status can actually
+ * The tones are deliberately not a rainbow. Seven cover what a status can actually
  * mean:
  *
  * - `neutral` — fine, and there is nothing to say about it.
@@ -21,6 +21,8 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip'
  * - `warning` — degraded, or needs a decision from the user.
  * - `danger` — blocked, failed, unrecoverable without intervention.
  * - `info` — in flight or scheduled; work is happening, nothing is wrong.
+ * - `pending` — running now with no result yet (a check, a build). The ring
+ *   turns, so it reads as live rather than as a settled state.
  * - `unknown` — the honest absence of information.
  *
  * `unknown` is not the same as `neutral`, and collapsing them is the mistake
@@ -39,6 +41,7 @@ export const statusDotVariants = cva('size-2 shrink-0 rounded-full', {
       warning: 'bg-warning',
       danger: 'bg-destructive',
       info: 'bg-info',
+      pending: 'border-2 border-info border-r-transparent motion-safe:animate-spin',
       unknown: 'border border-muted-foreground bg-transparent',
     },
   },
@@ -51,10 +54,18 @@ const labelTone: Record<StatusTone, string> = {
   warning: 'text-foreground',
   danger: 'text-foreground',
   info: 'text-foreground',
+  pending: 'text-foreground',
   unknown: 'text-muted-foreground',
 }
 
-export type StatusTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'unknown'
+export type StatusTone =
+  | 'neutral'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'info'
+  | 'pending'
+  | 'unknown'
 
 export type StatusChipProps = Omit<ComponentProps<'span'>, 'children'> & {
   tone?: StatusTone

package/dist/r/src/styles/base.css

@@ -96,7 +96,8 @@
 }
 
 /* Emitted only when ListRowControl is used. A described row changes its own
-   height and stacks trailing actions when its available width gets tight. */
+   height and stacks trailing actions when its available width gets tight,
+   unless the row opts out with `stackTrailing={false}`. */
 @utility list-row-description {
   &[data-description] {
     align-items: flex-start;
@@ -111,23 +112,23 @@
   }
 
   @container list-row (width < 28rem) {
-    &[data-description] [data-slot='list-row-content'] {
+    &[data-description]:not([data-stack-trailing='never']) [data-slot='list-row-content'] {
       align-items: stretch;
       flex-direction: column;
     }
 
-    &[data-description] [data-slot='list-row-label'],
-    &[data-description] [data-slot='list-row-trailing'] {
+    &[data-description]:not([data-stack-trailing='never']) [data-slot='list-row-label'],
+    &[data-description]:not([data-stack-trailing='never']) [data-slot='list-row-trailing'] {
       flex: none;
       width: 100%;
     }
 
-    &[data-description] [data-slot='list-row-trailing'] {
+    &[data-description]:not([data-stack-trailing='never']) [data-slot='list-row-trailing'] {
       flex-wrap: wrap;
       justify-content: flex-end;
     }
 
-    &[data-description] [data-slot='list-row-trailing'] button {
+    &[data-description]:not([data-stack-trailing='never']) [data-slot='list-row-trailing'] button {
       max-width: 100%;
       white-space: normal;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.113.1",
+  "version": "0.115.0",
   "description": "The Adea design system: Kobalte-backed Solid components, semantic OKLCH tokens, and the app-shell layout primitives shared by Adea and Cortana.",
   "keywords": [
     "adea",

package/src/components/composites/list-row/list-row-control.tsx

@@ -18,6 +18,12 @@ export type ListRowControlProps<T extends ValidComponent = 'div'> = PolymorphicP
     trailing?: JSX.Element
     /** A second line that wraps and grows the row to fit its content. */
     description?: string
+    /**
+     * Whether a described row may drop its trailing slot onto its own line when
+     * the row gets narrow (the default). Pass `false` for a short, truncating
+     * label whose single action must stay beside it.
+     */
+    stackTrailing?: boolean
     /** Native button type; defaults to `button` for button rows. */
     type?: ComponentProps<'button'>['type']
   }
@@ -37,6 +43,7 @@ export function ListRowControl<T extends ValidComponent = 'div'>(props: ListRowC
     'leading',
     'trailing',
     'description',
+    'stackTrailing',
     'type',
     'tabIndex',
     'children',
@@ -52,6 +59,7 @@ export function ListRowControl<T extends ValidComponent = 'div'>(props: ListRowC
       aria-current={local.selected ? 'true' : undefined}
       data-selected={local.selected ? '' : undefined}
       data-description={local.description ? '' : undefined}
+      data-stack-trailing={local.stackTrailing === false ? 'never' : undefined}
       class={cn(
         'group/row list-row-description flex min-w-0 items-center gap-2.5 rounded-md px-2 text-sm',
         'transition-colors ease-out outline-none',

package/src/components/composites/tree/index.ts

@@ -1,3 +1,3 @@
 /** Keyboard-accessible tree rows with virtualization-aware focus handoff. */
-export { Tree, TreeRow, type TreeProps, type TreeRowProps } from './tree'
+export { Tree, TreeRow, TreeRowActions, type TreeProps, type TreeRowProps } from './tree'
 export type { TreeItemDescriptor } from './tree-navigation'

package/src/components/composites/tree/tree.tsx

@@ -238,7 +238,12 @@ export function Tree(props: TreeProps) {
         role="tree"
         aria-multiselectable={local.selectionMode === 'multiple' ? 'true' : undefined}
         data-slot="tree"
-        class={cn('flex min-w-0 flex-col', local.class)}
+        class={cn(
+          /* A virtualized host remounts rows as it scrolls; scroll anchoring
+             would latch onto the focused row and fight the scrollbar. */
+          'flex min-w-0 flex-col [overflow-anchor:none]',
+          local.class
+        )}
         onKeyDown={handleKeyDown}
       >
         {local.children}
@@ -382,6 +387,31 @@ export function TreeRow(props: TreeRowProps) {
   )
 }
 
+/**
+ * TreeRowActions.
+ *
+ * Row-level commands (rename, copy, delete) that stay out of the way until the
+ * row is hovered or holds focus, so a long tree reads as names rather than a
+ * wall of buttons. Put it in `TreeRow`'s `trailing` slot beside any status that
+ * must stay visible. `pinned` keeps the actions shown, e.g. while a destructive
+ * action waits for its confirming second press.
+ */
+export function TreeRowActions(props: ComponentProps<'span'> & { pinned?: boolean }) {
+  const [local, rest] = splitProps(props, ['class', 'pinned'])
+  return (
+    <span
+      data-slot="tree-row-actions"
+      data-pinned={local.pinned ? '' : undefined}
+      class={cn(
+        'flex shrink-0 items-center gap-1 opacity-0 transition-opacity ease-out',
+        'group-hover/tree-row:opacity-100 group-focus-within/tree-row:opacity-100 data-pinned:opacity-100',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
 function isActionTarget(target: EventTarget | null, currentTarget: HTMLElement): boolean {
   if (!(target instanceof Element) || target === currentTarget) return false
   return Boolean(

package/src/components/layout/contextual-sidebar/contextual-sidebar.tsx

@@ -27,6 +27,13 @@ export type ContextualSidebarProps = {
   label: string
   /** Visible navigation title and mobile dialog title. */
   title: string
+  /**
+   * Where the title row shows. `always` (default) draws it on desktop and in
+   * the mobile sheet; `mobile` keeps the desktop title for assistive
+   * technology only and drops the desktop row, for hosts whose top bar
+   * already names the context. A `header` slot keeps the row visible.
+   */
+  titleVisibility?: 'always' | 'mobile'
   /** Host-controlled expanded state for the desktop panel and mobile dialog. */
   open: boolean
   onOpenChange(open: boolean): void
@@ -169,10 +176,19 @@ export function ContextualSidebar(props: ContextualSidebarProps) {
           />
         </Show>
         <Show when={!mobile || mobileMount()?.connected}>
-          <SidebarNavHeader class={cn(mobile && 'pe-12', props.headerClass)}>
-            <SidebarNavTitle as={props.headingAs ?? 'h2'}>{props.title}</SidebarNavTitle>
-            {props.header?.(context)}
-          </SidebarNavHeader>
+          <Show
+            when={mobile || props.titleVisibility !== 'mobile' || props.header}
+            fallback={
+              <SidebarNavTitle as={props.headingAs ?? 'h2'} class="sr-only">
+                {props.title}
+              </SidebarNavTitle>
+            }
+          >
+            <SidebarNavHeader class={cn(mobile && 'pe-12', props.headerClass)}>
+              <SidebarNavTitle as={props.headingAs ?? 'h2'}>{props.title}</SidebarNavTitle>
+              {props.header?.(context)}
+            </SidebarNavHeader>
+          </Show>
           <SidebarNavContent class={props.contentClass}>{props.content(context)}</SidebarNavContent>
           {props.footer ? (
             <SidebarNavFooter class={props.footerClass}>{props.footer(context)}</SidebarNavFooter>

package/src/components/layout/sidebar-nav/sidebar-nav.tsx

@@ -140,6 +140,12 @@ export type SidebarNavSectionProps = ComponentProps<'div'> & {
   count?: number
   /** A control at the trailing edge of the heading row. */
   action?: JSX.Element
+  /**
+   * When the trailing action shows. `hover` (default) reveals it on hover or
+   * focus; `always` keeps it visible, for a section whose primary action is
+   * creating its first item.
+   */
+  actionVisibility?: 'hover' | 'always'
   /** Semantic heading element for a host's section hierarchy. */
   headingAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 }
@@ -156,6 +162,7 @@ export function SidebarNavSection(props: SidebarNavSectionProps) {
     'triggerProps',
     'count',
     'action',
+    'actionVisibility',
     'headingAs',
     'children',
   ])
@@ -237,7 +244,13 @@ export function SidebarNavSection(props: SidebarNavSectionProps) {
           </Show>
         </Polymorphic>
         <Show when={local.action}>
-          <span class="shrink-0 opacity-0 transition-opacity ease-out group-hover/section-header:opacity-100 focus-within:opacity-100 [@media(any-pointer:coarse)]:opacity-100">
+          <span
+            data-slot="sidebar-nav-section-action"
+            class={cn('shrink-0', {
+              'opacity-0 transition-opacity ease-out group-hover/section-header:opacity-100 focus-within:opacity-100 [@media(any-pointer:coarse)]:opacity-100':
+                local.actionVisibility !== 'always',
+            })}
+          >
             {local.action}
           </span>
         </Show>

package/src/components/layout/top-bar/top-bar.tsx

@@ -99,7 +99,9 @@ export function TopBarTitle(
     <div
       data-slot="top-bar-title"
       class={cn(
-        'truncate text-sm font-medium',
+        /* The title slot sits in the drag region; a link, button or field
+           placed in it (a breadcrumb, a view's search) must stay pressable. */
+        'truncate text-sm font-medium [&_:is(a,button,input)]:window-no-drag',
         local.align === 'center' && 'text-center',
         local.class
       )}
@@ -114,7 +116,10 @@ export function TopBarBreadcrumb(props: ComponentProps<'div'>) {
   return (
     <div
       data-slot="top-bar-breadcrumb"
-      class={cn('flex min-w-0 items-center gap-1.5 text-sm', local.class)}
+      class={cn(
+        'flex min-w-0 items-center gap-1.5 text-sm [&_:is(a,button,input)]:window-no-drag',
+        local.class
+      )}
       {...rest}
     />
   )

package/src/components/ui/dialog/dialog.tsx

@@ -314,12 +314,19 @@ export function DialogContent(props: DialogContentProps) {
   )
 }
 
-export function DialogHeader(props: ComponentProps<'div'>) {
-  const [local, rest] = splitProps(props, ['class'])
+/**
+ * The dialog's title block. `band` steps it onto the elevation ladder's
+ * subtle-fill rung (`--muted`), the same treatment as the sheet parts' band —
+ * for the dialog family whose panel anatomy matches a sheet's (a title band
+ * over a full-bleed shell, such as a settings dialog) rather than the centred
+ * modal's documented flat surface. See `SheetFooter` for the rung's rationale.
+ */
+export function DialogHeader(props: ComponentProps<'div'> & { band?: boolean }) {
+  const [local, rest] = splitProps(props, ['class', 'band'])
   return (
     <div
       data-slot="dialog-header"
-      class={cn('flex flex-col gap-1.5 pe-6 text-start', local.class)}
+      class={cn('flex flex-col gap-1.5 pe-6 text-start', { 'bg-muted': local.band }, local.class)}
       {...rest}
     />
   )

package/src/components/ui/input/input-control.tsx

@@ -9,17 +9,28 @@ import { cn } from '#lib/utils'
  * when a consumer needs only the control; `Input` adds native datalist
  * suggestions for forms that need them.
  */
-export type InputControlProps = ComponentProps<'input'>
+export type InputControlProps = Omit<ComponentProps<'input'>, 'size'> & {
+  /**
+   * The control rung, matching `SelectTrigger`: `sm` for a dense toolbar or
+   * pane filter beside `icon-sm` actions, `md` (the default) everywhere else.
+   */
+  size?: 'sm' | 'md' | 'lg'
+}
 
 export function InputControl(props: InputControlProps) {
-  const [local, rest] = splitProps(props, ['class', 'type'])
+  const [local, rest] = splitProps(props, ['class', 'type', 'size'])
 
   return (
     <input
       data-slot="input"
       type={local.type ?? 'text'}
       class={cn(
-        'h-control-md w-full min-w-0 rounded-md border border-input bg-transparent px-control-md py-1 text-sm',
+        'w-full min-w-0 rounded-md border border-input bg-transparent py-1',
+        {
+          'h-control-sm px-control-sm text-xs': local.size === 'sm',
+          'h-control-md px-control-md text-sm': local.size === 'md' || local.size === undefined,
+          'h-control-lg px-control-lg text-sm': local.size === 'lg',
+        },
         'transition-[color,box-shadow,border-color] ease-out outline-none',
         'placeholder:text-muted-foreground',
         'selection:bg-primary selection:text-primary-foreground',

package/src/components/ui/input/input.tsx

@@ -1,7 +1,6 @@
-import type { ComponentProps } from 'solid-js'
 import { createUniqueId, For, Show, splitProps } from 'solid-js'
 import { useFormFieldControl } from '#lib/form-field'
-import { InputControl } from './input-control'
+import { InputControl, type InputControlProps } from './input-control'
 
 /**
  * Input.
@@ -12,10 +11,11 @@ import { InputControl } from './input-control'
  * them separate is what lets an input sit inside a custom control without
  * inheriting a form's ARIA graph.
  *
- * Height comes from `h-control-md`; an input cannot be given a new height
- * without a new token, which is what keeps it aligned with Button and Select.
+ * Height comes from the control tokens (`size`, `md` by default); an input
+ * cannot be given a height off that ladder, which is what keeps it aligned
+ * with Button and Select.
  */
-export type InputProps = ComponentProps<'input'> & {
+export type InputProps = InputControlProps & {
   /** Native text suggestions; custom values remain valid and submit unchanged. */
   suggestions?: readonly string[]
 }

package/src/components/ui/sheet/sheet.tsx

@@ -34,8 +34,9 @@ import { createDialogFocusRestoration, DialogOverlay } from '../dialog/dialog'
  *
  * Its parts read alike everywhere: `SheetHeader` holds a heading, a description
  * and a full-width rule beneath, with the close button in the corner;
- * `SheetBody` scrolls on its own; `SheetFooter` is a full-width tinted band that
- * holds the decision.
+ * `SheetBody` scrolls on its own; `SheetFooter` is a full-width band that holds
+ * the decision. Pass `band` to the header, the footer, or both to step those
+ * parts onto the ladder's subtle-fill rung (see `SheetFooter`).
  *
  * Controlled sheets opened from outside a `SheetTrigger` restore focus to the
  * element focused before opening. Pass `restoreFocusRef` when a stable external
@@ -174,13 +175,20 @@ export function SheetCloseButton(props: ComponentProps<typeof KobalteDialog.Clos
   return <KobalteDialog.CloseButton class={cn(local.class)} {...rest} />
 }
 
-export function SheetHeader(props: ComponentProps<'div'>) {
-  const [local, rest] = splitProps(props, ['class'])
+/**
+ * The sheet's title band: a heading, a description and the full-width rule
+ * beneath, with the close button in the corner. `band` steps the band onto the
+ * subtle-fill rung (see `SheetFooter`) — the two-toned anatomy of a sheet that
+ * reads as a panel beside the work rather than one flat canvas.
+ */
+export function SheetHeader(props: ComponentProps<'div'> & { band?: boolean }) {
+  const [local, rest] = splitProps(props, ['class', 'band'])
   return (
     <div
       data-slot="sheet-header"
       class={cn(
         'flex shrink-0 flex-col gap-1.5 border-b border-border p-4 pe-12 text-start',
+        { 'bg-muted': local.band },
         local.class
       )}
       {...rest}
@@ -199,13 +207,27 @@ export function SheetBody(props: ComponentProps<'div'>) {
   )
 }
 
-export function SheetFooter(props: ComponentProps<'div'>) {
-  const [local, rest] = splitProps(props, ['class'])
+/**
+ * The sheet's decision band: a full-width, hairline-ruled strip that holds the
+ * actions. `band` paints it with `--muted` — the elevation ladder's
+ * subtle-fill rung, one step up from the panel's `--background` — so the sheet
+ * reads two-toned: title band and decision band on the raised rung, scrolling
+ * body on the panel surface. The rung already exists for cards, sidebars and
+ * input fills; this is the panel-shaped overlay family claiming it. Opt-in
+ * because the flat panel is the documented default: the centred modal
+ * separates with veil, hairline and shadow instead (the elevated overlay rung
+ * amplifies the canvas chroma, which reads as a cast across a large panel),
+ * and a host opts a whole sheet family in by passing the prop where it composes
+ * the parts — not by restyling them from the outside.
+ */
+export function SheetFooter(props: ComponentProps<'div'> & { band?: boolean }) {
+  const [local, rest] = splitProps(props, ['class', 'band'])
   return (
     <div
       data-slot="sheet-footer"
       class={cn(
         'flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-border bg-background px-4 py-3',
+        { 'bg-muted': local.band },
         local.class
       )}
       {...rest}

package/src/components/ui/status-chip/status-chip.tsx

@@ -13,7 +13,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip'
  * with no text (unreadable to anyone who cannot see it) and a bare word with no
  * explanation ("Needs configuration" — of what?).
  *
- * The tones are deliberately not a rainbow. Six cover what a status can actually
+ * The tones are deliberately not a rainbow. Seven cover what a status can actually
  * mean:
  *
  * - `neutral` — fine, and there is nothing to say about it.
@@ -21,6 +21,8 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip'
  * - `warning` — degraded, or needs a decision from the user.
  * - `danger` — blocked, failed, unrecoverable without intervention.
  * - `info` — in flight or scheduled; work is happening, nothing is wrong.
+ * - `pending` — running now with no result yet (a check, a build). The ring
+ *   turns, so it reads as live rather than as a settled state.
  * - `unknown` — the honest absence of information.
  *
  * `unknown` is not the same as `neutral`, and collapsing them is the mistake
@@ -39,6 +41,7 @@ export const statusDotVariants = cva('size-2 shrink-0 rounded-full', {
       warning: 'bg-warning',
       danger: 'bg-destructive',
       info: 'bg-info',
+      pending: 'border-2 border-info border-r-transparent motion-safe:animate-spin',
       unknown: 'border border-muted-foreground bg-transparent',
     },
   },
@@ -51,10 +54,18 @@ const labelTone: Record<StatusTone, string> = {
   warning: 'text-foreground',
   danger: 'text-foreground',
   info: 'text-foreground',
+  pending: 'text-foreground',
   unknown: 'text-muted-foreground',
 }
 
-export type StatusTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'unknown'
+export type StatusTone =
+  | 'neutral'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'info'
+  | 'pending'
+  | 'unknown'
 
 export type StatusChipProps = Omit<ComponentProps<'span'>, 'children'> & {
   tone?: StatusTone

package/src/styles/base.css

@@ -96,7 +96,8 @@
 }
 
 /* Emitted only when ListRowControl is used. A described row changes its own
-   height and stacks trailing actions when its available width gets tight. */
+   height and stacks trailing actions when its available width gets tight,
+   unless the row opts out with `stackTrailing={false}`. */
 @utility list-row-description {
   &[data-description] {
     align-items: flex-start;
@@ -111,23 +112,23 @@
   }
 
   @container list-row (width < 28rem) {
-    &[data-description] [data-slot='list-row-content'] {
+    &[data-description]:not([data-stack-trailing='never']) [data-slot='list-row-content'] {
       align-items: stretch;
       flex-direction: column;
     }
 
-    &[data-description] [data-slot='list-row-label'],
-    &[data-description] [data-slot='list-row-trailing'] {
+    &[data-description]:not([data-stack-trailing='never']) [data-slot='list-row-label'],
+    &[data-description]:not([data-stack-trailing='never']) [data-slot='list-row-trailing'] {
       flex: none;
       width: 100%;
     }
 
-    &[data-description] [data-slot='list-row-trailing'] {
+    &[data-description]:not([data-stack-trailing='never']) [data-slot='list-row-trailing'] {
       flex-wrap: wrap;
       justify-content: flex-end;
     }
 
-    &[data-description] [data-slot='list-row-trailing'] button {
+    &[data-description]:not([data-stack-trailing='never']) [data-slot='list-row-trailing'] button {
       max-width: 100%;
       white-space: normal;
     }