@flamingo-stack/openframe-frontend-core 0.0.771 → 0.0.772

package/dist/{knowledge-PZYA65GL.cjs → knowledge-CYJP4XYY.cjs}

@@ -8,10 +8,10 @@ var _chunkSTEJZPIOcjs = require('./chunk-STEJZPIO.cjs');
 var _chunkDKOLQPE7cjs = require('./chunk-DKOLQPE7.cjs');
 
 
-var _chunkALNP25TXcjs = require('./chunk-ALNP25TX.cjs');
+var _chunkZVKJKWABcjs = require('./chunk-ZVKJKWAB.cjs');
 require('./chunk-LJT2KRE2.cjs');
 require('./chunk-RB7VLVMD.cjs');
-require('./chunk-2LTJ4457.cjs');
+require('./chunk-V3W56L2D.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
 require('./chunk-XVFM6SJA.cjs');
@@ -1903,7 +1903,7 @@ function KnowledgeScreen(_props) {
   const cast = _chunkSTEJZPIOcjs.useProductDemoCast.call(void 0, );
   const fixture = _react.useMemo.call(void 0, () => buildKnowledgeFixture(cast), [cast]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkALNP25TXcjs.KnowledgeBaseArticleView,
+    _chunkZVKJKWABcjs.KnowledgeBaseArticleView,
     {
       ...fixture.article,
       content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkILZEXCJHcjs.SimpleMarkdownRenderer, { content: fixture.content, textSize: "compact" })

package/dist/{logs-GYTZWHDP.cjs → logs-NL3ZBQKC.cjs}

@@ -16,10 +16,10 @@ var _chunkDKOLQPE7cjs = require('./chunk-DKOLQPE7.cjs');
 
 
 
-var _chunkALNP25TXcjs = require('./chunk-ALNP25TX.cjs');
+var _chunkZVKJKWABcjs = require('./chunk-ZVKJKWAB.cjs');
 require('./chunk-LJT2KRE2.cjs');
 require('./chunk-RB7VLVMD.cjs');
-require('./chunk-2LTJ4457.cjs');
+require('./chunk-V3W56L2D.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
 require('./chunk-XVFM6SJA.cjs');
@@ -1884,7 +1884,7 @@ function entry(logId, minutesAgo, severity, toolType, device2, summary) {
     id: logId,
     logId,
     timestamp: displayTime(_chunkDKOLQPE7cjs.demoMinutesAgo.call(void 0, minutesAgo)),
-    status: { label: severity, variant: _chunkALNP25TXcjs.logSeverityVariant.call(void 0, severity) },
+    status: { label: severity, variant: _chunkZVKJKWABcjs.logSeverityVariant.call(void 0, severity) },
     source: { name: toolType, toolType },
     device: device2,
     description: { title: summary }
@@ -1956,13 +1956,13 @@ var NO_FILTERS = {};
 var ACTION_COLUMNS = ["copy", "quickView", "open"];
 var BESIDE_DRAWER_HIDDEN = [...ACTION_COLUMNS, "tool", "source"];
 var logHref = () => "#";
-var copyAction = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkALNP25TXcjs.LogCopyIconButton, {});
+var copyAction = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZVKJKWABcjs.LogCopyIconButton, {});
 function LogsScreen({ compact = false }) {
   const [dock, setDock] = _react.useState.call(void 0, null);
   const selected = LOGS_FIXTURE_SELECTED;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full bg-ods-bg", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-w-0 flex-1 overflow-clip", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkALNP25TXcjs.LogsPageView,
+      _chunkZVKJKWABcjs.LogsPageView,
       {
         showHeader: false,
         className: "p-[var(--spacing-system-l)]",
@@ -1970,7 +1970,7 @@ function LogsScreen({ compact = false }) {
         onSearchChange: noop,
         onOpenFilters: noop,
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkALNP25TXcjs.LogsTableView,
+          _chunkZVKJKWABcjs.LogsTableView,
           {
             logs: LOGS_FIXTURE_ENTRIES,
             facets: LOGS_FIXTURE_FACETS,
@@ -1984,8 +1984,8 @@ function LogsScreen({ compact = false }) {
         )
       }
     ) }),
-    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: setDock, className: "relative w-[calc(400px+var(--spacing-system-m))] shrink-0", children: dock && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkALNP25TXcjs.AppLayoutDrawerContainerContext.Provider, { value: dock, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkALNP25TXcjs.LogDrawer,
+    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: setDock, className: "relative w-[calc(400px+var(--spacing-system-m))] shrink-0", children: dock && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZVKJKWABcjs.AppLayoutDrawerContainerContext.Provider, { value: dock, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkZVKJKWABcjs.LogDrawer,
       {
         docked: true,
         isOpen: true,
@@ -1997,12 +1997,12 @@ function LogsScreen({ compact = false }) {
           { label: "Log ID", value: selected.logId },
           {
             label: "Source",
-            value: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkALNP25TXcjs.ToolBadge, { toolType: _chunkYI3CDGKMcjs.normalizeToolTypeWithFallback.call(void 0, selected.source.toolType) })
+            value: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZVKJKWABcjs.ToolBadge, { toolType: _chunkYI3CDGKMcjs.normalizeToolTypeWithFallback.call(void 0, selected.source.toolType) })
           },
-          { label: "Device", value: _chunkALNP25TXcjs.logSourceLabels.call(void 0, selected.device).deviceName }
+          { label: "Device", value: _chunkZVKJKWABcjs.logSourceLabels.call(void 0, selected.device).deviceName }
         ],
         deviceCard: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkALNP25TXcjs.DeviceCard,
+          _chunkZVKJKWABcjs.DeviceCard,
           {
             ...LOGS_FIXTURE_DEVICE,
             actions: {

package/dist/{policies-OIK7NWJ7.cjs → policies-WTUV4EIT.cjs}

@@ -10,10 +10,10 @@ var _chunkDKOLQPE7cjs = require('./chunk-DKOLQPE7.cjs');
 
 
 
-var _chunkALNP25TXcjs = require('./chunk-ALNP25TX.cjs');
+var _chunkZVKJKWABcjs = require('./chunk-ZVKJKWAB.cjs');
 require('./chunk-LJT2KRE2.cjs');
 require('./chunk-RB7VLVMD.cjs');
-require('./chunk-2LTJ4457.cjs');
+require('./chunk-V3W56L2D.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
 require('./chunk-XVFM6SJA.cjs');
@@ -1889,14 +1889,14 @@ var POLICIES = [
   policy("policy-local-admins", "No local admins", "No everyday account is a local administrator.", false, 0)
 ];
 var POLICIES_FIXTURE = {
-  summary: _chunkALNP25TXcjs.computePolicySummary.call(void 0, POLICIES),
+  summary: _chunkZVKJKWABcjs.computePolicySummary.call(void 0, POLICIES),
   rows: POLICIES.map((item) => ({
     id: item.id,
     name: item.name,
     description: item.description,
     critical: item.critical,
     severityLabel: item.critical ? "Critical" : "Low",
-    status: _chunkALNP25TXcjs.getPolicyTableStatus.call(void 0, item),
+    status: _chunkZVKJKWABcjs.getPolicyTableStatus.call(void 0, item),
     actions: [
       { label: "Policy Details", onClick: noop },
       { label: "Delete Policy", onClick: noop }
@@ -1910,16 +1910,16 @@ var POLICIES_FIXTURE = {
 var _jsxruntime = require('react/jsx-runtime');
 function PoliciesScreen({ compact = false }) {
   const table = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkALNP25TXcjs.PoliciesTable,
+    _chunkZVKJKWABcjs.PoliciesTable,
     {
       rows: POLICIES_FIXTURE.rows,
       rowAsLink: true,
-      rightSlot: compact ? void 0 : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkALNP25TXcjs.DataTable.RowCount, {}),
+      rightSlot: compact ? void 0 : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZVKJKWABcjs.DataTable.RowCount, {}),
       emptyMessage: "No policies found."
     }
   );
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col gap-[var(--spacing-system-l)] bg-ods-bg p-[var(--spacing-system-l)]", children: [
-    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkALNP25TXcjs.PolicySummaryCards, { summary: POLICIES_FIXTURE.summary, now: POLICIES_FIXTURE.now }),
+    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZVKJKWABcjs.PolicySummaryCards, { summary: POLICIES_FIXTURE.summary, now: POLICIES_FIXTURE.now }),
     table
   ] });
 }

package/dist/{remote-session-3HFVODOT.cjs → remote-session-TC3BZDBZ.cjs}

@@ -11,7 +11,7 @@ var _chunkDKOLQPE7cjs = require('./chunk-DKOLQPE7.cjs');
 
 
 
-var _chunk2LTJ4457cjs = require('./chunk-2LTJ4457.cjs');
+var _chunkV3W56L2Dcjs = require('./chunk-V3W56L2D.cjs');
 require('./chunk-A6P6DHEZ.cjs');
 require('./chunk-5QP3K2CE.cjs');
 require('./chunk-LELS4XMX.cjs');
@@ -1918,7 +1918,7 @@ function TaskbarApp({ icon, active = false }) {
   );
 }
 function RemoteDesktopPicture({ desktop }) {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: `absolute inset-0 flex flex-col overflow-hidden ${_chunk2LTJ4457cjs.DEVICE_WALLPAPER_CLASS}`, children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: `absolute inset-0 flex flex-col overflow-hidden ${_chunkV3W56L2Dcjs.DEVICE_WALLPAPER_CLASS}`, children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative min-h-0 flex-1", children: [
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "absolute left-[var(--spacing-system-sf)] top-[var(--spacing-system-sf)] hidden flex-col gap-[var(--spacing-system-sf)] content-md:flex", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DesktopShortcut, { icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkIYHH5EIOcjs.TrashIcon, { className: "h-5 w-5" }), label: "Recycle Bin" }),
@@ -1982,7 +1982,7 @@ function RemoteSessionScreen({ compact = false }) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col bg-ods-bg", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-[var(--spacing-system-l)] flex-shrink-0" }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunk2LTJ4457cjs.RemoteDesktopView,
+      _chunkV3W56L2Dcjs.RemoteDesktopView,
       {
         ...fixture.view,
         onEnterFullscreen: noop,
@@ -1993,7 +1993,7 @@ function RemoteSessionScreen({ compact = false }) {
         screen: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RemoteDesktopPicture, { desktop: fixture.desktop }),
         chat: compact ? null : (
           // The side column needs the room of the wide layout; a narrow frame keeps the screen alone.
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "hidden min-h-0 content-md:flex", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2LTJ4457cjs.RemoteDesktopChatPanel, { ...fixture.chat, sending: false, onSend: keepDraft, variant: "side" }) })
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "hidden min-h-0 content-md:flex", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkV3W56L2Dcjs.RemoteDesktopChatPanel, { ...fixture.chat, sending: false, onSend: keepDraft, variant: "side" }) })
         )
       }
     ) })

package/dist/{scripts-K4L3STNZ.cjs → scripts-EE6MLBQP.cjs}

@@ -13,12 +13,12 @@ var _chunkDKOLQPE7cjs = require('./chunk-DKOLQPE7.cjs');
 
 
 
-var _chunkALNP25TXcjs = require('./chunk-ALNP25TX.cjs');
+var _chunkZVKJKWABcjs = require('./chunk-ZVKJKWAB.cjs');
 require('./chunk-LJT2KRE2.cjs');
 require('./chunk-RB7VLVMD.cjs');
 
 
-var _chunk2LTJ4457cjs = require('./chunk-2LTJ4457.cjs');
+var _chunkV3W56L2Dcjs = require('./chunk-V3W56L2D.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
 require('./chunk-XVFM6SJA.cjs');
@@ -1993,8 +1993,8 @@ function buildScriptsFixture(cast) {
 var _jsxruntime = require('react/jsx-runtime');
 var WIDE_HIDDEN_COLUMNS = ["result", "open"];
 var COMPACT_COLUMNS = [
-  { ..._chunkALNP25TXcjs.EXECUTION_COLUMNS.machineId, width: "flex-1 min-w-0", hideAt: void 0 },
-  _chunkALNP25TXcjs.EXECUTION_COLUMNS.status
+  { ..._chunkZVKJKWABcjs.EXECUTION_COLUMNS.machineId, width: "flex-1 min-w-0", hideAt: void 0 },
+  _chunkZVKJKWABcjs.EXECUTION_COLUMNS.status
 ];
 var COMPACT_ROWS = 4;
 var TOKEN_CLASS = {
@@ -2044,16 +2044,16 @@ function ScriptCodePicture({ script }) {
       children: [
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-xxs)] border-b border-ods-border p-[var(--spacing-system-m)]", children: [
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 items-center justify-between gap-[var(--spacing-system-m)]", children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2LTJ4457cjs.TruncateText, { variant: "h4", children: script.name }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkV3W56L2Dcjs.TruncateText, { variant: "h4", children: script.name }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex shrink-0 items-center gap-[var(--spacing-system-xxs)] text-ods-text-primary text-h6", children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTPKKRHUMcjs.TimerIcon, { className: "size-4 text-ods-text-secondary" }),
               `${schedule.repeat} ${schedule.time} \xB7 ${schedule.deviceCount} devices`
             ] })
           ] }),
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 items-center justify-between gap-[var(--spacing-system-m)]", children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2LTJ4457cjs.TruncateText, { variant: "h6", tone: "secondary", children: `Written by ${provenance.author} \xB7 approved by ${provenance.approver}` }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkV3W56L2Dcjs.TruncateText, { variant: "h6", tone: "secondary", children: `Written by ${provenance.author} \xB7 approved by ${provenance.approver}` }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunkALNP25TXcjs.ScriptShellBadge,
+              _chunkZVKJKWABcjs.ScriptShellBadge,
               {
                 value: script.shellType,
                 className: "shrink-0 text-ods-text-secondary text-h6",
@@ -2077,7 +2077,7 @@ function ScriptsScreen({ compact = false }) {
     return (
       // Four runs of the card's row height fill the frame; the padding is what is left round them.
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full overflow-hidden bg-ods-bg p-[var(--spacing-system-xsf)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkALNP25TXcjs.ScriptExecutionsTable,
+        _chunkZVKJKWABcjs.ScriptExecutionsTable,
         {
           rows: fixture.executions.slice(0, COMPACT_ROWS),
           columns: COMPACT_COLUMNS,
@@ -2087,13 +2087,13 @@ function ScriptsScreen({ compact = false }) {
       ) })
     );
   }
-  const renderOutput = (row) => row.id === fixture.openExecutionId ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkALNP25TXcjs.ScriptExecutionResult, { result: row.result, empty: "\u2014" }) : null;
+  const renderOutput = (row) => row.id === fixture.openExecutionId ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZVKJKWABcjs.ScriptExecutionResult, { result: row.result, empty: "\u2014" }) : null;
   return (
     // The frame's tighter padding and no header row: the output opened under a run needs the height.
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full gap-[var(--spacing-system-m)] overflow-hidden bg-ods-bg p-[var(--spacing-system-m)]", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-[39%] shrink-0", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ScriptCodePicture, { script: fixture.script }) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-w-0 flex-1 overflow-hidden", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkALNP25TXcjs.ScriptExecutionsTable,
+        _chunkZVKJKWABcjs.ScriptExecutionsTable,
         {
           rows: fixture.executions,
           hideColumns: WIDE_HIDDEN_COLUMNS,

package/dist/{software-update-RWV2RI5C.cjs → software-update-HX6PN4SB.cjs}

@@ -15,12 +15,12 @@ var _chunkDKOLQPE7cjs = require('./chunk-DKOLQPE7.cjs');
 
 
 
-var _chunkALNP25TXcjs = require('./chunk-ALNP25TX.cjs');
+var _chunkZVKJKWABcjs = require('./chunk-ZVKJKWAB.cjs');
 require('./chunk-LJT2KRE2.cjs');
 require('./chunk-RB7VLVMD.cjs');
 
 
-var _chunk2LTJ4457cjs = require('./chunk-2LTJ4457.cjs');
+var _chunkV3W56L2Dcjs = require('./chunk-V3W56L2D.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
 require('./chunk-XVFM6SJA.cjs');
@@ -1918,14 +1918,14 @@ var noop = () => {
 var HIDDEN_WHEN_COMPACT = ["organization"];
 function StaticPackageField({ value }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunk2LTJ4457cjs.Autocomplete,
+    _chunkV3W56L2Dcjs.Autocomplete,
     {
-      label: _chunkALNP25TXcjs.PACKAGE_SEARCH_LABEL,
+      label: _chunkZVKJKWABcjs.PACKAGE_SEARCH_LABEL,
       labelVariant: "large",
       options: value ? [{ value: value.id, label: value.name, description: _nullishCoalesce(value.description, () => ( void 0)) }] : [],
       value: _nullishCoalesce(_optionalChain([value, 'optionalAccess', _ => _.id]), () => ( null)),
       onChange: noop,
-      placeholder: _chunkALNP25TXcjs.PACKAGE_SEARCH_PLACEHOLDER
+      placeholder: _chunkZVKJKWABcjs.PACKAGE_SEARCH_PLACEHOLDER
     }
   );
 }
@@ -1939,7 +1939,7 @@ function SoftwareUpdateScreen({ compact = false }) {
     [fixture.devices, fixture.selectedIds]
   );
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg pt-[var(--spacing-system-l)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkALNP25TXcjs.SoftwareActionForm,
+    _chunkZVKJKWABcjs.SoftwareActionForm,
     {
       action: fixture.action,
       showHeader: false,
@@ -1951,7 +1951,7 @@ function SoftwareUpdateScreen({ compact = false }) {
       initialValues: fixture.initialValues,
       renderPackageSearch,
       renderDevicePicker: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkALNP25TXcjs.DeviceSelector,
+        _chunkZVKJKWABcjs.DeviceSelector,
         {
           devices: selected,
           loading: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.771",
+  "version": "0.0.772",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "sideEffects": [

package/src/components/ui/select.tsx

@@ -2,7 +2,7 @@
 
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { ChevronDown, ChevronUp } from 'lucide-react';
-import { type ComponentPropsWithoutRef, type ComponentRef, type ElementRef, forwardRef } from 'react';
+import { type ComponentPropsWithoutRef, type ComponentRef, type ElementRef, forwardRef, type ReactNode } from 'react';
 import { cn } from '../../utils/cn';
 import { Chevron02DownIcon } from '../icons-v2-generated/arrows/chevron-02-down-icon';
 import { CheckIcon } from '../icons-v2-generated/signs-and-symbols/check-icon';
@@ -154,14 +154,26 @@ SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const SelectItem = forwardRef<
   ComponentRef<typeof SelectPrimitive.Item>,
-  ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {
+    /**
+     * A second, secondary-coloured line under the label. The row grows to
+     * fit it and both lines wrap, so a sentence longer than the list is read
+     * in full instead of being clipped at the edge. It sits outside
+     * `ItemText`, so the closed trigger mirrors the label alone and typeahead
+     * matches the label alone.
+     */
+    description?: ReactNode;
+  }
+>(({ className, children, description, ...props }, ref) => (
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      'flex h-11 w-full cursor-pointer select-none items-center justify-between border-b border-ods-border px-4 last:border-b-0 md:h-12',
+      'flex w-full cursor-pointer select-none items-center justify-between gap-2 border-b border-ods-border px-4 last:border-b-0',
       // Typography - match trigger
-      'whitespace-nowrap text-h4',
+      'text-h4',
+      description == null
+        ? 'h-11 whitespace-nowrap md:h-12'
+        : 'min-h-11 whitespace-normal py-[var(--spacing-system-xs)] md:min-h-12',
       // Hover state with visible background change
       'outline-none hover:bg-ods-bg-hover data-[highlighted]:bg-ods-bg-surface',
       'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
@@ -170,8 +182,17 @@ const SelectItem = forwardRef<
     )}
     {...props}
   >
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    <SelectPrimitive.ItemIndicator>
+    {description == null ? (
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    ) : (
+      // min-w-0 lets the column shrink below its longest line, which is what
+      // makes the lines wrap instead of pushing past the list's edge.
+      <span className="flex min-w-0 flex-col text-left">
+        <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+        <span className="text-ods-text-secondary text-h6">{description}</span>
+      </span>
+    )}
+    <SelectPrimitive.ItemIndicator className="shrink-0">
       <CheckIcon className="text-ods-accent" size={20} />
     </SelectPrimitive.ItemIndicator>
   </SelectPrimitive.Item>