@lerianstudio/sindarian-ui 2.0.0-beta.13 → 2.0.0-beta.14

package/dist/components/form/select-field/index.d.ts

@@ -15,6 +15,20 @@ type SelectFieldSharedProps<T extends FieldValues = FieldValues> = PropsWithChil
     required?: boolean;
     /** Copy for the "nothing to pick" row. Defaults to "No options found." */
     emptyMessage?: string;
+    /**
+     * Rendered inside the trigger, before the value — where a filter bar wants
+     * its glyph. On the single select it shares one flex box with the value so
+     * the trigger keeps exactly two children; on the multi select the trigger
+     * already groups them. The node itself is passed through untouched, with
+     * no `aria-hidden`: the prop takes an arbitrary node, and hiding it from
+     * the accessibility tree on the caller's behalf would silence a node the
+     * caller may have made meaningful on purpose. The trigger is named by its
+     * label and its value, so the node passed here should be decorative.
+     *
+     * Spacing is the caller's: the kit adds no margin, because a gap here
+     * would double with the one every existing call site already carries.
+     */
+    leadingIcon?: ReactNode;
     /**
      * Placed on the field's own root box, merged with its spacing rather than
      * replacing it. The root is the element a parent grid positions, so
@@ -47,6 +61,6 @@ type SelectFieldModeProps = {
     onChange?: (value: string) => void;
 };
 export type SelectFieldProps<T extends FieldValues = FieldValues> = SelectFieldSharedProps<T> & SelectFieldModeProps;
-export declare const SelectField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, required, placeholder, description, disabled, readOnly, multi, control, value, children, emptyMessage, className, onChange, ...others }: SelectFieldProps<T>) => React.JSX.Element;
+export declare const SelectField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, required, placeholder, description, disabled, readOnly, multi, control, value, children, emptyMessage, leadingIcon, className, onChange, ...others }: SelectFieldProps<T>) => React.JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/form/select-field/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/select-field/index.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC3D,OAAO,EACL,OAAO,EAEP,WAAW,EAEZ,MAAM,iBAAiB,CAAA;AAExB,KAAK,sBAAsB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAC7D,iBAAiB,GAAG;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;qCACiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAEH;;;;;;;;GAQG;AACH,KAAK,oBAAoB,GACrB;IACE,KAAK,EAAE,IAAI,CAAA;IACX;yEACqE;IACrE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CACrC,GACD;IACE,KAAK,CAAC,EAAE,KAAK,CAAA;IACb;yEACqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC,CAAA;AAEL,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAC9D,sBAAsB,CAAC,CAAC,CAAC,GAAG,oBAAoB,CAAA;AAWlD,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,6KAkB9D,gBAAgB,CAAC,CAAC,CAAC,sBA6FrB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/select-field/index.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC3D,OAAO,EACL,OAAO,EAEP,WAAW,EAEZ,MAAM,iBAAiB,CAAA;AAExB,KAAK,sBAAsB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAC7D,iBAAiB,GAAG;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;qCACiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;;;;;;;;;OAYG;IACH,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAEH;;;;;;;;GAQG;AACH,KAAK,oBAAoB,GACrB;IACE,KAAK,EAAE,IAAI,CAAA;IACX;yEACqE;IACrE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CACrC,GACD;IACE,KAAK,CAAC,EAAE,KAAK,CAAA;IACb;yEACqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC,CAAA;AAEL,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAC9D,sBAAsB,CAAC,CAAC,CAAC,GAAG,oBAAoB,CAAA;AAWlD,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,0LAmB9D,gBAAgB,CAAC,CAAC,CAAC,sBAgIrB,CAAA"}

package/dist/components/form/select-field/index.js

@@ -6,20 +6,45 @@ const form_1 = require("../../../components/ui/form");
 const multiple_select_1 = require("../../../components/ui/multiple-select");
 const select_1 = require("../../../components/ui/select");
 const utils_1 = require("../../../lib/utils");
-const SelectField = ({ name, label, tooltip, labelExtra, required, placeholder, description, disabled, readOnly, multi, control, value, children, emptyMessage = 'No options found.', className, onChange, ...others }) => {
+const SelectField = ({ name, label, tooltip, labelExtra, required, placeholder, description, disabled, readOnly, multi, control, value, children, emptyMessage = 'No options found.', leadingIcon, className, onChange, ...others }) => {
     // The props union already pairs `multi` with the callback shape that branch
     // emits, but destructuring an intersection loses that correlation — TS sees
     // two unrelated callbacks. Both branches report through this one seam, each
     // with the payload its own union member declared.
     const emitChange = onChange;
+    /**
+     * ⛔ THE GLYPH AND THE VALUE ARE ONE FLEX CHILD, NEVER TWO.
+     *
+     * `.select-trigger` is `flex w-full items-center justify-between`, so a
+     * third child makes it split the free space into TWO gaps: on any trigger
+     * wider than its content — which is every filter bar — the selected value
+     * drifted to the middle of the box instead of sitting beside the glyph.
+     * Wrapped, the trigger is back to two children, content and chevron,
+     * whatever the caller passes.
+     *
+     * `min-w-0` keeps the value truncating: the wrapper is the flex item now,
+     * and a flex item never shrinks below its own min-content width. The
+     * trigger's `VALUE_OVERFLOW_CLASS` reaches through it by descendant
+     * selector.
+     *
+     * No `gap`: the prop's contract is that spacing is the caller's (the Tracer
+     * filter bars carry their own `mr-2`), and a kit gap would double with it.
+     *
+     * The MULTI trigger needs none of this — it already renders its children
+     * inside one `flex grow flex-wrap` box, so the icon already shares a parent
+     * with the value and the trigger root already has exactly two children.
+     * Wrapping there would put the selected-value badges in a non-wrapping row
+     * and stop the trigger growing to a second line.
+     */
+    const withLeadingIcon = (value) => leadingIcon ? ((0, jsx_runtime_1.jsxs)("span", { className: "flex min-w-0 items-center", children: [leadingIcon, value] })) : (value);
     const renderItem = (field) => {
         return ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, className: className, children: [label && ((0, jsx_runtime_1.jsx)(form_1.FormLabel, { extra: tooltip ? (0, jsx_runtime_1.jsx)(form_1.FormTooltip, { children: tooltip }) : labelExtra, children: label })), multi ? ((0, jsx_runtime_1.jsxs)(multiple_select_1.MultipleSelect, { onValueChange: (value) => {
                         field.onChange(value);
                         emitChange?.(value);
-                    }, disabled: disabled, ...field, children: [(0, jsx_runtime_1.jsx)(multiple_select_1.MultipleSelectTrigger, { readOnly: readOnly, children: (0, jsx_runtime_1.jsx)(multiple_select_1.MultipleSelectValue, { placeholder: placeholder }) }), (0, jsx_runtime_1.jsx)(multiple_select_1.MultipleSelectContent, { children: children })] })) : ((0, jsx_runtime_1.jsxs)(select_1.Select, { onValueChange: (value) => {
+                    }, disabled: disabled, ...field, children: [(0, jsx_runtime_1.jsxs)(multiple_select_1.MultipleSelectTrigger, { readOnly: readOnly, children: [leadingIcon, (0, jsx_runtime_1.jsx)(multiple_select_1.MultipleSelectValue, { placeholder: placeholder })] }), (0, jsx_runtime_1.jsx)(multiple_select_1.MultipleSelectContent, { children: children })] })) : ((0, jsx_runtime_1.jsxs)(select_1.Select, { onValueChange: (value) => {
                         field.onChange(value);
                         emitChange?.(value);
-                    }, value: field.value, disabled: disabled, open: readOnly ? false : undefined, onOpenChange: readOnly ? () => { } : undefined, children: [(0, jsx_runtime_1.jsx)(form_1.FormControl, { children: (0, jsx_runtime_1.jsx)(select_1.SelectTrigger, { className: (0, utils_1.cn)(disabled && 'bg-shadcn-100'), readOnly: readOnly, "data-testid": others['data-testid'], children: (0, jsx_runtime_1.jsx)(select_1.SelectValue, { placeholder: placeholder }) }) }), (0, jsx_runtime_1.jsxs)(select_1.SelectContent, { children: [(0, jsx_runtime_1.jsx)(select_1.SelectEmpty, { children: emptyMessage }), children] })] })), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {}), description && (0, jsx_runtime_1.jsx)(form_1.FormDescription, { children: description })] }));
+                    }, value: field.value, disabled: disabled, open: readOnly ? false : undefined, onOpenChange: readOnly ? () => { } : undefined, children: [(0, jsx_runtime_1.jsx)(form_1.FormControl, { children: (0, jsx_runtime_1.jsx)(select_1.SelectTrigger, { className: (0, utils_1.cn)(disabled && 'bg-shadcn-100'), readOnly: readOnly, "data-testid": others['data-testid'], children: withLeadingIcon((0, jsx_runtime_1.jsx)(select_1.SelectValue, { placeholder: placeholder })) }) }), (0, jsx_runtime_1.jsxs)(select_1.SelectContent, { children: [(0, jsx_runtime_1.jsx)(select_1.SelectEmpty, { children: emptyMessage }), children] })] })), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {}), description && (0, jsx_runtime_1.jsx)(form_1.FormDescription, { children: description })] }));
     };
     if (!control) {
         // `value` undefined leaves Radix to keep its own state, so an uncontrolled

package/dist/components/page/index.d.ts

@@ -1,4 +1,38 @@
 export declare function PageRoot({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
 export declare function PageView({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
-export declare function PageContent({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+export type PageContentProps = React.ComponentProps<'div'> & {
+    /**
+     * How much room the container spends on padding.
+     *
+     * `'default'` is 64px a side at every width, and it is what every consumer
+     * that does not ask for anything gets, class for class.
+     *
+     * `'compact'` adds 16px a side below `sm` (640px) and changes nothing above
+     * it. On a 390px phone the default spends 128px — a third of the screen —
+     * before the page has drawn anything: measured at 390 on ten Product Console
+     * screens across Midaz, Pix, Payments, Reporter, Tracer, Flowker and
+     * Settings, each was left with 262px of content, and the pages adding their
+     * own `px-24` inside it were down to 70px, which is where a transaction
+     * receipt's amount ran off its card.
+     *
+     * WHY `max-sm:p-4` AND NOT THE MOBILE-FIRST `p-4 sm:p-16`. A base `p-4`
+     * REPLACES `p-16` for every caller, and `sm:p-16` then re-imposes 64px at
+     * desktop on the pages that deliberately asked for something else — a
+     * full-bleed page would grow a 64px frame at 1440. `max-sm:` only ADDS a rule
+     * below `sm`, so every call site renders identically from 640px up, whatever
+     * padding it passes.
+     *
+     * HOW A CALLER OPTS OUT. Pass the phone value too: `className="p-0
+     * max-sm:p-0"`. `cn` is tailwind-merge, so the caller's `max-sm:p-0` replaces
+     * this rule rather than stacking with it.
+     *
+     * AND AN AXIS PADDING HAS TO REPEAT ITSELF: `className="px-6 max-sm:px-6"`,
+     * never `px-6` alone. tailwind-merge does not treat `max-sm:p-4` and `px-6`
+     * as the same group, so it drops neither, and CSS then gives the media-query
+     * rule the last word — a lone `px-6` is silently 16px on both axes on a
+     * phone.
+     */
+    padding?: 'default' | 'compact';
+};
+export declare function PageContent({ className, padding, ...props }: PageContentProps): import("react").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/page/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/page/index.tsx"],"names":[],"mappings":"AAEA,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAW5E;AAED,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQ5E;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQ7B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/page/index.tsx"],"names":[],"mappings":"AAEA,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAW5E;AAED,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQ5E;AAED,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA8BG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;CAChC,CAAA;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAelB"}

package/dist/components/page/index.js

@@ -11,6 +11,10 @@ function PageRoot({ className, ...props }) {
 function PageView({ className, ...props }) {
     return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "page-view", className: (0, utils_1.cn)('flex min-h-0 flex-1', className), ...props }));
 }
-function PageContent({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "page-content", className: (0, utils_1.cn)('flex grow flex-col overflow-y-auto p-16', className), ...props }));
+function PageContent({ className, padding = 'default', ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "page-content", 
+        // Order is the contract, not a style: `className` last is what lets a
+        // caller's `p-0` beat `p-16` and a caller's `max-sm:p-0` replace the
+        // compact rule instead of stacking with it.
+        className: (0, utils_1.cn)('flex grow flex-col overflow-y-auto p-16', padding === 'compact' && 'max-sm:p-4', className), ...props }));
 }

package/dist/components/table/id-table-cell.d.ts

@@ -6,6 +6,14 @@ export type IdTableCellProps = Omit<React.ComponentProps<typeof TableCell>, 'onC
     head?: number;
     /** Characters kept from the end of the id. */
     tail?: number;
+    /**
+     * Accessible name for the copy button. Override for localization; the kit
+     * ships no i18n. The id is deliberately NOT interpolated into it — a column
+     * of thirty rows would announce thirty different names for the same action,
+     * and the id is already the cell's text and its `title`.
+     * @defaultValue 'Copy id'
+     */
+    copyLabel?: string;
 };
-export declare const IdTableCell: ({ id, onCopy, head, tail, ...others }: IdTableCellProps) => import("react").JSX.Element;
+export declare const IdTableCell: ({ id, onCopy, head, tail, copyLabel, ...others }: IdTableCellProps) => import("react").JSX.Element;
 //# sourceMappingURL=id-table-cell.d.ts.map

package/dist/components/table/id-table-cell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"id-table-cell.d.ts","sourceRoot":"","sources":["../../../src/components/table/id-table-cell.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAGV,MAAM,uBAAuB,CAAA;AAS9B,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EACtC,QAAQ,CACT,GAAG;IACF,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AA6CD,eAAO,MAAM,WAAW,GAAI,uCAMzB,gBAAgB,gCAiClB,CAAA"}
+{"version":3,"file":"id-table-cell.d.ts","sourceRoot":"","sources":["../../../src/components/table/id-table-cell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAoB,MAAM,uBAAuB,CAAA;AASnE,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EACtC,QAAQ,CACT,GAAG;IACF,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AA6CD,eAAO,MAAM,WAAW,GAAI,kDAOzB,gBAAgB,gCAqFlB,CAAA"}

package/dist/components/table/id-table-cell.js

@@ -44,18 +44,66 @@ function truncateMiddle(id, head, tail) {
         ? id
         : `${id.slice(0, start)}…${id.slice(id.length - end)}`;
 }
-const IdTableCell = ({ id, onCopy, head = DEFAULT_HEAD, tail = DEFAULT_TAIL, ...others }) => {
-    const handleCopyToClipboard = () => {
-        // The WHOLE id, never what is rendered. The cell is the only place most
-        // consoles expose it, and a truncated id pasted into a query matches
-        // nothing.
-        navigator.clipboard.writeText(id);
-        onCopy?.(id);
+const IdTableCell = ({ id, onCopy, head = DEFAULT_HEAD, tail = DEFAULT_TAIL, copyLabel = 'Copy id', ...others }) => {
+    /**
+     * ⛔ THE COPY ACTION IS A NAMED BUTTON, NEVER A HANDLER ON THE `<td>`.
+     *
+     * On the cell it had no role, no tab stop and no accessible name: an
+     * operator who does not use a pointer could not copy an id from any table
+     * built on this kit, and a screen reader announced the cell as plain text.
+     * It also made the id column the one cell in a row-activating table that
+     * silently swallowed the click that opens the record.
+     */
+    const handleCopyToClipboard = async (event) => {
+        // A row that opens a record on click must not also open it on a copy.
+        event.stopPropagation();
+        // The same guard `CopyField` uses: an insecure context, and a browser
+        // without the API, both leave `navigator.clipboard` undefined, and the
+        // only thing this cell would otherwise do about it is throw an unhandled
+        // rejection out of a click handler. There is no input here to select as a
+        // fallback, so a silent no-op is the whole of what it can honestly offer.
+        if (!id || typeof navigator.clipboard?.writeText !== 'function') {
+            return;
+        }
+        try {
+            // The WHOLE id, never what is rendered. The cell is the only place most
+            // consoles expose it, and a truncated id pasted into a query matches
+            // nothing.
+            await navigator.clipboard.writeText(id);
+            onCopy?.(id);
+        }
+        catch {
+            // The browser refused the write: nothing reached the clipboard, so
+            // `onCopy` — which consumers hang their "copied" toast off — must not
+            // claim otherwise.
+        }
     };
-    return ((0, jsx_runtime_1.jsx)(table_1.TableCell, { onClick: handleCopyToClipboard, 
+    return ((0, jsx_runtime_1.jsx)(table_1.TableCell
+    // The tooltip is the styled affordance; `title` is the fallback that
+    // survives without it — a printed page, a portal that has not mounted,
+    // and the cell padding outside the trigger.
+    , { 
         // The tooltip is the styled affordance; `title` is the fallback that
         // survives without it — a printed page, a portal that has not mounted,
         // and the cell padding outside the trigger.
-        title: id, ...others, children: (0, jsx_runtime_1.jsxs)(table_1.TableCellWrapper, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, { delayDuration: 300, children: [(0, jsx_runtime_1.jsx)(tooltip_1.TooltipTrigger, { children: id ? truncateMiddle(id, head, tail) : id }), (0, jsx_runtime_1.jsx)(tooltip_1.TooltipContent, { children: id })] }) }), (0, jsx_runtime_1.jsx)(table_1.TableCellAction, { children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "size-3.5" }) })] }) }));
+        title: id, ...others, children: (0, jsx_runtime_1.jsxs)(table_1.TableCellWrapper, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, { delayDuration: 300, children: [(0, jsx_runtime_1.jsx)(tooltip_1.TooltipTrigger, { children: id ? truncateMiddle(id, head, tail) : id }), (0, jsx_runtime_1.jsx)(tooltip_1.TooltipContent, { children: id })] }) }), id ? ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": copyLabel, onClick: handleCopyToClipboard, 
+                    // ⛔ THREE RULES HERE, AND EVERY ONE IS A WAY THE CONTROL
+                    // DISAPPEARS RATHER THAN A DECORATION.
+                    //
+                    // `focus-visible:opacity-100`: a keyboard stop the operator cannot
+                    // see is the same dead end the `<td>` handler was.
+                    //
+                    // `[@media(hover:none)]:opacity-100`: a phone or a tablet has no
+                    // pointer to hover with, so `group-hover` never fires and the only
+                    // control that copies an id stayed fully transparent — invisible
+                    // AND unexplained on the one device where the id is hardest to
+                    // read off the screen. Written as an arbitrary variant because the
+                    // kit's Tailwind theme defines no named one.
+                    //
+                    // `size-6` with `-my-0.5`: WCAG 2.5.8 wants 24×24 CSS px, and the
+                    // glyph alone is 14. The negative margin pulls the button's outer
+                    // box back to the 20px line box of the cell's `text-sm` text, so
+                    // the target grows without the row growing under it.
+                    className: "focus-visible:ring-ring -my-0.5 ml-4 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm opacity-0 transition-opacity group-hover/table-cell:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:outline-none [@media(hover:none)]:opacity-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "size-3.5" }) })) : null] }) }));
 };
 exports.IdTableCell = IdTableCell;

package/dist/components/table/index.d.ts

@@ -1,3 +1,4 @@
 export * from './id-table-cell';
+export * from './locked-table-actions';
 export * from './name-table-cell';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA"}

package/dist/components/table/index.js

@@ -15,4 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./id-table-cell"), exports);
+__exportStar(require("./locked-table-actions"), exports);
 __exportStar(require("./name-table-cell"), exports);

package/dist/components/table/locked-table-actions.d.ts

@@ -1,7 +1,31 @@
 import React from 'react';
 export type LockedTableActionsProps = {
+    /** Why this record cannot be changed. It is the control's accessible name as well as the tooltip's text. */
     message: string;
     className?: string;
 };
+/**
+ * Where a row's action menu would be, on a record the ledger will not let
+ * anyone change — an external account, in double-entry terms.
+ *
+ * ⛔ THE TRIGGER IS A BUTTON. It used to be a `<div>`, so the ONLY explanation
+ * of why the menu is gone lived in a tooltip that a keyboard could not open and
+ * a screen reader had nothing to attach to: the row simply had one control
+ * fewer, unexplained.
+ *
+ * `aria-disabled`, not the `disabled` attribute: a truly disabled button takes
+ * no focus and fires no pointer events, so it would announce as unavailable and
+ * then refuse to open the tooltip that says WHY — the same dead end in a
+ * different shape. This one is reachable, announces its reason as its name,
+ * opens the tooltip on focus as well as hover, and does nothing when pressed.
+ *
+ * ⛔ DOING NOTHING TAKES A HANDLER. `aria-disabled` is a promise to the
+ * accessibility tree, not to the DOM: the press really does dispatch a click,
+ * and a click bubbles. Consumers put this where a row's action menu would be,
+ * in rows that open the record — so with no handler of its own the one control
+ * that says "you cannot change this" would open the record it refuses to
+ * change, from a pointer and, because a button turns Enter and Space into
+ * clicks, from a keyboard too.
+ */
 export declare const LockedTableActions: ({ message, className }: LockedTableActionsProps) => React.JSX.Element;
 //# sourceMappingURL=locked-table-actions.d.ts.map

package/dist/components/table/locked-table-actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"locked-table-actions.d.ts","sourceRoot":"","sources":["../../../src/components/table/locked-table-actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,MAAM,MAAM,uBAAuB,GAAG;IACpC,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,kBAAkB,GAAI,wBAGhC,uBAAuB,sBAkBzB,CAAA"}
+{"version":3,"file":"locked-table-actions.d.ts","sourceRoot":"","sources":["../../../src/components/table/locked-table-actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,MAAM,MAAM,uBAAuB,GAAG;IACpC,4GAA4G;IAC5G,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,kBAAkB,GAAI,wBAGhC,uBAAuB,sBA6BzB,CAAA"}

package/dist/components/table/locked-table-actions.js

@@ -5,7 +5,37 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const tooltip_1 = require("../../components/ui/tooltip");
 const utils_1 = require("../../lib/utils");
+/**
+ * Where a row's action menu would be, on a record the ledger will not let
+ * anyone change — an external account, in double-entry terms.
+ *
+ * ⛔ THE TRIGGER IS A BUTTON. It used to be a `<div>`, so the ONLY explanation
+ * of why the menu is gone lived in a tooltip that a keyboard could not open and
+ * a screen reader had nothing to attach to: the row simply had one control
+ * fewer, unexplained.
+ *
+ * `aria-disabled`, not the `disabled` attribute: a truly disabled button takes
+ * no focus and fires no pointer events, so it would announce as unavailable and
+ * then refuse to open the tooltip that says WHY — the same dead end in a
+ * different shape. This one is reachable, announces its reason as its name,
+ * opens the tooltip on focus as well as hover, and does nothing when pressed.
+ *
+ * ⛔ DOING NOTHING TAKES A HANDLER. `aria-disabled` is a promise to the
+ * accessibility tree, not to the DOM: the press really does dispatch a click,
+ * and a click bubbles. Consumers put this where a row's action menu would be,
+ * in rows that open the record — so with no handler of its own the one control
+ * that says "you cannot change this" would open the record it refuses to
+ * change, from a pointer and, because a button turns Enter and Space into
+ * clicks, from a keyboard too.
+ */
 const LockedTableActions = ({ message, className }) => {
-    return ((0, jsx_runtime_1.jsx)(tooltip_1.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('border-border bg-muted flex size-9 items-center justify-center rounded-md border', className), children: (0, jsx_runtime_1.jsx)(lucide_react_1.LockIcon, { size: 14, className: "text-muted-foreground" }) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.TooltipContent, { side: "left", children: message })] }) }));
+    return ((0, jsx_runtime_1.jsx)(tooltip_1.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { type: "button", "aria-disabled": "true", "aria-label": message, onClick: (event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                        }, className: (0, utils_1.cn)('border-border bg-muted flex size-9 items-center justify-center rounded-md border', 
+                        // Reachable is half the fix: a `border` over a `bg-muted` can
+                        // swallow the browser's default outline entirely, and the other
+                        // two cells in this table carry the same ring.
+                        'focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none', className), children: (0, jsx_runtime_1.jsx)(lucide_react_1.LockIcon, { size: 14, className: "text-muted-foreground" }) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.TooltipContent, { side: "left", children: message })] }) }));
 };
 exports.LockedTableActions = LockedTableActions;

package/dist/components/table/name-table-cell.d.ts

@@ -1,6 +1,59 @@
 import { TableCell } from '../ui/table';
-export type NameTableCellProps = React.ComponentProps<typeof TableCell> & {
-    name?: string | React.ReactNode;
-};
-export declare const NameTableCell: ({ name, ...props }: NameTableCellProps) => import("react").JSX.Element;
+/** Opens the record. Lands on a real button, never on the `<td>`. */
+type OpenRecord = React.MouseEventHandler<HTMLButtonElement>;
+export type NameTableCellProps = Omit<React.ComponentProps<typeof TableCell>, 'onClick'> & 
+/**
+ * Three shapes, and the only one missing is an interactive cell that can
+ * carry no accessible name.
+ *
+ * 1. A text `name` IS the button's accessible name, so the handler is free
+ *    and `buttonLabel` merely overrides what the button announces.
+ * 2. Anything else rendered inside the button — a badge, an icon, an italic
+ *    placeholder — may carry no text at all, so it has to name its button.
+ * 3. No handler, no control: text in a table has nothing to name.
+ */
+({
+    name: string;
+    onClick?: OpenRecord;
+    buttonLabel?: string;
+} | {
+    name?: React.ReactNode;
+    onClick: OpenRecord;
+    buttonLabel: string;
+} | {
+    name?: React.ReactNode;
+    onClick?: never;
+    buttonLabel?: never;
+});
+/**
+ * The name column, which is how an operator opens a record from a list.
+ *
+ * ⛔ THE CLICK IS A BUTTON, NEVER THE `<td>`. The cell had no click prop at
+ * all, so a consumer wanting a clickable name put `onClick` on the `<td>`
+ * through the spread props: a pointer user saw an affordance under a
+ * `<p class="cursor-pointer">`, and a keyboard or screen-reader user got a
+ * table cell with no control in it — the row's only route to the record was
+ * unreachable. `onClick` is now `Omit`ed from the inherited cell props, so the
+ * `<td>` handler is unrepresentable and the compiler says so at the call site.
+ *
+ * And with no handler there is no pointer cursor: text that says it is
+ * clickable and is not is worse than plain text.
+ *
+ * ⛔ AN INTERACTIVE CELL CANNOT BE ANONYMOUS. `name` renders INSIDE the button,
+ * so whatever it renders is the button's accessible name — and a `ReactNode` is
+ * free to render no text at all, which announces as a bare "button" and leaves
+ * the row's only route to its record as unreachable as the `<td>` handler
+ * above. The props are a union rather than a comment: a text `name` names the
+ * button by itself, anything else has to pass `buttonLabel`, and a cell with no
+ * handler is exempt because it holds no control.
+ *
+ * `buttonLabel` and not an inherited `aria-label`, which the spread puts on the
+ * `<td>` — naming the CELL, never the control inside it.
+ *
+ * ⛔ AND THE UNION STILL LETS THE EMPTY STRING THROUGH, because every string
+ * type does. `name=""` satisfies the text arm and `buttonLabel="   "` satisfies
+ * the labelled one, so the last word is the component's, below.
+ */
+export declare const NameTableCell: ({ name, onClick, buttonLabel, ...props }: NameTableCellProps) => import("react").JSX.Element;
+export {};
 //# sourceMappingURL=name-table-cell.d.ts.map

package/dist/components/table/name-table-cell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"name-table-cell.d.ts","sourceRoot":"","sources":["../../../src/components/table/name-table-cell.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAqC,MAAM,aAAa,CAAA;AAE1E,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IACxE,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;CAChC,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,oBAAoB,kBAAkB,gCAWnE,CAAA"}
+{"version":3,"file":"name-table-cell.d.ts","sourceRoot":"","sources":["../../../src/components/table/name-table-cell.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAqC,MAAM,aAAa,CAAA;AAE1E,qEAAqE;AACrE,KAAK,UAAU,GAAG,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAA;AAE5D,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EACtC,SAAS,CACV;AACC;;;;;;;;;GASG;AACH,CACI;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,UAAU,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,GAC5D;IAAE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,OAAO,EAAE,UAAU,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,GACpE;IAAE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,OAAO,CAAC,EAAE,KAAK,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CACnE,CAAA;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,aAAa,GAAI,0CAK3B,kBAAkB,gCAgDpB,CAAA"}

package/dist/components/table/name-table-cell.js

@@ -4,7 +4,55 @@ exports.NameTableCell = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const table_1 = require("../ui/table");
-const NameTableCell = ({ name, ...props }) => {
-    return ((0, jsx_runtime_1.jsx)(table_1.TableCell, { ...props, children: (0, jsx_runtime_1.jsxs)(table_1.TableCellWrapper, { children: [(0, jsx_runtime_1.jsx)("p", { className: "cursor-pointer", children: name }), (0, jsx_runtime_1.jsx)(table_1.TableCellAction, { children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { className: "size-3.5" }) })] }) }));
+/**
+ * The name column, which is how an operator opens a record from a list.
+ *
+ * ⛔ THE CLICK IS A BUTTON, NEVER THE `<td>`. The cell had no click prop at
+ * all, so a consumer wanting a clickable name put `onClick` on the `<td>`
+ * through the spread props: a pointer user saw an affordance under a
+ * `<p class="cursor-pointer">`, and a keyboard or screen-reader user got a
+ * table cell with no control in it — the row's only route to the record was
+ * unreachable. `onClick` is now `Omit`ed from the inherited cell props, so the
+ * `<td>` handler is unrepresentable and the compiler says so at the call site.
+ *
+ * And with no handler there is no pointer cursor: text that says it is
+ * clickable and is not is worse than plain text.
+ *
+ * ⛔ AN INTERACTIVE CELL CANNOT BE ANONYMOUS. `name` renders INSIDE the button,
+ * so whatever it renders is the button's accessible name — and a `ReactNode` is
+ * free to render no text at all, which announces as a bare "button" and leaves
+ * the row's only route to its record as unreachable as the `<td>` handler
+ * above. The props are a union rather than a comment: a text `name` names the
+ * button by itself, anything else has to pass `buttonLabel`, and a cell with no
+ * handler is exempt because it holds no control.
+ *
+ * `buttonLabel` and not an inherited `aria-label`, which the spread puts on the
+ * `<td>` — naming the CELL, never the control inside it.
+ *
+ * ⛔ AND THE UNION STILL LETS THE EMPTY STRING THROUGH, because every string
+ * type does. `name=""` satisfies the text arm and `buttonLabel="   "` satisfies
+ * the labelled one, so the last word is the component's, below.
+ */
+const NameTableCell = ({ name, onClick, buttonLabel, ...props }) => {
+    // Whitespace names nothing. An `aria-label` of "   " is worse than none: it
+    // OVERRIDES the text inside the button, so a perfectly good name is replaced
+    // by silence. Drop it and the text content names the control again.
+    const label = buttonLabel?.trim() ? buttonLabel : undefined;
+    // Only a text `name` can name the button by itself. Any other node is opaque
+    // here — which is why the type demands a label for it in the first place.
+    const textName = typeof name === 'string' ? name.trim() : '';
+    const named = Boolean(label) || textName !== '';
+    // ⛔ AN UNNAMED BUTTON LOSES ITS HANDLER, IT DOES NOT SHIP. The two failures
+    // are not symmetric: a button announcing "" is invisible to the developer who
+    // wrote it and fatal to the operator who cannot use a mouse, while a name
+    // that does not open its record shows itself on the very first render. So the
+    // cell degrades to the plain text it can still display correctly, and says so
+    // where a developer will see it. Never throws: one nameless row must not take
+    // the whole table down.
+    if (process.env.NODE_ENV !== 'production' && onClick && !named) {
+        console.error(`NameTableCell has no accessible name: \`${typeof name === 'string' ? 'name' : 'buttonLabel'}\` is empty, so its click handler was dropped rather than render a button announcing "".`);
+    }
+    const opensRecord = onClick && named;
+    return ((0, jsx_runtime_1.jsx)(table_1.TableCell, { ...props, children: (0, jsx_runtime_1.jsxs)(table_1.TableCellWrapper, { children: [opensRecord ? ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClick, "aria-label": label, className: "focus-visible:ring-ring cursor-pointer rounded-sm text-left focus-visible:ring-2 focus-visible:outline-none", children: name })) : ((0, jsx_runtime_1.jsx)("p", { children: name })), (0, jsx_runtime_1.jsx)(table_1.TableCellAction, { children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { className: "size-3.5" }) })] }) }));
 };
 exports.NameTableCell = NameTableCell;

package/dist/components/ui/select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/select/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAKzD,iBAAS,MAAM,CAAC,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,qBAEnD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAEpD;AAED;;;;GAIG;AACH,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAEpD;AAED,KAAK,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAC5C,OAAO,eAAe,CAAC,OAAO,CAC/B,GAAG;IACF,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAsBD,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,qBAsBpB;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,cAAc,CAAC,qBAU7D;AACD,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,gBAAgB,CAAC,qBAU/D;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,QAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,qBA0CtD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,qBAQvC;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAQpD;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,qBAgBnD;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,SAAS,CAAC,qBAQxD;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,WAAW,EACX,aAAa,EACb,aAAa,EACb,WAAW,EACX,WAAW,EACX,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,sBAAsB,EACvB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/select/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAKzD,iBAAS,MAAM,CAAC,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,qBAEnD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAEpD;AAED;;;;GAIG;AACH,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAEpD;AAED,KAAK,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAC5C,OAAO,eAAe,CAAC,OAAO,CAC/B,GAAG;IACF,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AA0BD,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,qBAsBpB;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,cAAc,CAAC,qBAU7D;AACD,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,gBAAgB,CAAC,qBAU/D;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,QAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,qBA0CtD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,qBAQvC;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAQpD;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,qBAgBnD;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,SAAS,CAAC,qBAQxD;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,WAAW,EACX,aAAa,EACb,aAAa,EACb,WAAW,EACX,WAAW,EACX,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,sBAAsB,EACvB,CAAA"}

package/dist/components/ui/select/index.js

@@ -73,15 +73,19 @@ function SelectValue({ ...props }) {
  * slot shrink, `truncate` ellipsises what no longer fits — the chevron keeps its
  * place because the value absorbs all the shrinkage.
  *
- * Written as a child-scoped variant on the TRIGGER because Radix strips
- * `className` off `Select.Value` itself; the `>` combinator holds because Radix
- * renders that span as the trigger's direct child.
+ * Written as a descendant-scoped variant on the TRIGGER because Radix strips
+ * `className` off `Select.Value` itself. DESCENDANT, not `>`: a trigger that
+ * carries a leading glyph groups the glyph and the value into one flex child
+ * (see `SelectField`'s `leadingIcon`), so the value span is no longer the
+ * trigger's direct child and a `>` combinator stopped truncating exactly where
+ * the trigger has the least room. The wrapper carries `min-w-0` itself, which
+ * is what lets the shrinkage reach the value.
  *
  * Truncation hides text, so a trigger showing a long value should also carry
  * `title` — on the trigger, never on the value slot, which Radix renders
  * `pointer-events: none`.
  */
-const VALUE_OVERFLOW_CLASS = '[&>[data-slot=select-value]]:min-w-0 [&>[data-slot=select-value]]:truncate';
+const VALUE_OVERFLOW_CLASS = '[&_[data-slot=select-value]]:min-w-0 [&_[data-slot=select-value]]:truncate';
 function SelectTrigger({ className, readOnly, children, ...props }) {
     return ((0, jsx_runtime_1.jsxs)(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": "default", className: (0, utils_1.cn)('select-trigger select-read-only select-disabled', VALUE_OVERFLOW_CLASS, className), "aria-readonly": readOnly, "data-read-only": readOnly ? '' : undefined, ...props, children: [children, !readOnly && ((0, jsx_runtime_1.jsx)(SelectPrimitive.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "select-chevron" }) }))] }));
 }