@harborclient/sdk 1.1.8 → 1.1.9

package/dist/components/Resizable/ResizeHandle.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentPropsWithoutRef, JSX, KeyboardEvent as ReactKeyboardEvent, MouseEvent as ReactMouseEvent } from 'react';
-interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'aria-label' | 'aria-valuenow' | 'aria-valuemin' | 'aria-valuemax'> {
+interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'aria-label' | 'aria-valuenow' | 'aria-valuemin' | 'aria-valuemax' | 'aria-valuetext'> {
     /**
      * Handle orientation: horizontal resizes height, vertical resizes width.
      */
@@ -28,10 +28,15 @@ interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'aria
      * Accessible label for the separator.
      */
     ariaLabel: string;
+    /**
+     * Formats the spoken value for assistive tech. Defaults to
+     * e.g. "Width 487 pixels" based on orientation.
+     */
+    formatValueText?: (value: number, orientation: 'horizontal' | 'vertical') => string;
 }
 /**
  * Draggable separator handle for resizable panels.
  */
-export declare function ResizeHandle({ orientation, value, min, max, onResizeStart, onKeyboardResize, ariaLabel, className, ...props }: Props): JSX.Element;
+export declare function ResizeHandle({ orientation, value, min, max, onResizeStart, onKeyboardResize, ariaLabel, formatValueText, className, ...props }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=ResizeHandle.d.ts.map

package/dist/components/Resizable/ResizeHandle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../../src/components/Resizable/ResizeHandle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,wBAAwB,EACxB,GAAG,EACH,aAAa,IAAI,kBAAkB,EACnC,UAAU,IAAI,eAAe,EAC9B,MAAM,OAAO,CAAC;AAGf,UAAU,KAAM,SAAQ,IAAI,CAC1B,wBAAwB,CAAC,KAAK,CAAC,EAC/B,UAAU,GAAG,YAAY,GAAG,eAAe,GAAG,eAAe,GAAG,eAAe,CAChF;IACC;;OAEG;IACH,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IAEvC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAEhD;;OAEG;IACH,gBAAgB,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAEtD;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAC3B,WAAW,EACX,KAAK,EACL,GAAG,EACH,GAAG,EACH,aAAa,EACb,gBAAgB,EAChB,SAAS,EACT,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAiCrB"}
+{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../../src/components/Resizable/ResizeHandle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,wBAAwB,EACxB,GAAG,EACH,aAAa,IAAI,kBAAkB,EACnC,UAAU,IAAI,eAAe,EAC9B,MAAM,OAAO,CAAC;AAGf,UAAU,KAAM,SAAQ,IAAI,CAC1B,wBAAwB,CAAC,KAAK,CAAC,EAC/B,UAAU,GAAG,YAAY,GAAG,eAAe,GAAG,eAAe,GAAG,eAAe,GAAG,gBAAgB,CACnG;IACC;;OAEG;IACH,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IAEvC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAEhD;;OAEG;IACH,gBAAgB,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAEtD;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,YAAY,GAAG,UAAU,KAAK,MAAM,CAAC;CACrF;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAC3B,WAAW,EACX,KAAK,EACL,GAAG,EACH,GAAG,EACH,aAAa,EACb,gBAAgB,EAChB,SAAS,EACT,eAAe,EACf,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAsCrB"}

package/dist/components/Resizable/ResizeHandle.js

@@ -3,11 +3,15 @@ import { cn } from '../utils.js';
 /**
  * Draggable separator handle for resizable panels.
  */
-export function ResizeHandle({ orientation, value, min, max, onResizeStart, onKeyboardResize, ariaLabel, className, ...props }) {
+export function ResizeHandle({ orientation, value, min, max, onResizeStart, onKeyboardResize, ariaLabel, formatValueText, className, ...props }) {
     const isHorizontal = orientation === 'horizontal';
+    const dimension = isHorizontal ? 'Height' : 'Width';
+    const valueText = formatValueText
+        ? formatValueText(value, orientation)
+        : `${dimension} ${Math.round(value)} pixels`;
     return (_jsx("div", { ...props, role: "separator", tabIndex: 0, className: cn('hc-resize-handle font-inherit app-no-drag m-0 flex shrink-0 items-center justify-center bg-control p-0 text-inherit hover:bg-selection/60', isHorizontal
             ? 'h-1.5 w-full cursor-row-resize border-b border-separator'
-            : 'h-full w-1.5 cursor-col-resize border-r border-separator', className), onMouseDown: onResizeStart, onKeyDown: onKeyboardResize, "aria-orientation": orientation, "aria-label": ariaLabel, "aria-valuenow": Math.round(value), "aria-valuemin": min, "aria-valuemax": Math.round(max), children: _jsx("div", { className: isHorizontal
+            : 'h-full w-1.5 cursor-col-resize border-r border-separator', className), onMouseDown: onResizeStart, onKeyDown: onKeyboardResize, "aria-orientation": orientation, "aria-label": ariaLabel, "aria-valuenow": Math.round(value), "aria-valuemin": min, "aria-valuemax": Math.round(max), "aria-valuetext": valueText, children: _jsx("div", { className: isHorizontal
                 ? 'hc-resize-handle-grip h-0.5 w-8 rounded-full bg-muted/50'
                 : 'hc-resize-handle-grip h-8 w-0.5 rounded-full bg-muted/50', "aria-hidden": true }) }));
 }

package/dist/components/SidebarItem/SidebarColorDot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarColorDot.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarColorDot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAEjC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,OAAc,EAAE,KAAK,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAa3F"}
+{"version":3,"file":"SidebarColorDot.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarColorDot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAEjC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,OAAc,EAAE,KAAK,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAY3F"}

package/dist/components/SidebarItem/SidebarColorDot.js

@@ -7,5 +7,5 @@ export function SidebarColorDot({ color, visible = true, label }) {
     if (!visible || color == null || color.trim() === '') {
         return null;
     }
-    return (_jsx("span", { className: "inline-block h-4 w-4 shrink-0 rounded-full", style: { backgroundColor: color }, "aria-hidden": label == null ? true : undefined, "aria-label": label }));
+    return (_jsx("span", { className: "inline-block h-4 w-4 shrink-0 rounded-full", style: { backgroundColor: color }, ...(label != null ? { role: 'img', 'aria-label': label } : { 'aria-hidden': true }) }));
 }

package/dist/components/SidebarItem/SidebarCommitItem.d.ts

@@ -21,11 +21,17 @@ interface Props {
      * Called when the commit row button is clicked.
      */
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * HTML element for the row container. Use `li` inside {@link SidebarList}.
+     */
+    as?: 'div' | 'li';
 }
 /**
  * Renders a recent commit row in the Git sidebar Commits section.
  * Uses a distinct two-line layout rather than the standard sourceRow shell.
+ *
+ * Wrap lists in {@link SidebarList} and pass `as="li"` for valid list semantics.
  */
-export declare function SidebarCommitItem({ message, author, timestampLabel, icon, onClick }: Props): JSX.Element;
+export declare function SidebarCommitItem({ message, author, timestampLabel, icon, onClick, as: Container }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=SidebarCommitItem.d.ts.map

package/dist/components/SidebarItem/SidebarCommitItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarCommitItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarCommitItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAG7C,UAAU,KAAK;IACb;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,cAAc,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,IAAI,EAAE,cAAc,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC1D;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,MAAM,EACN,cAAc,EACd,IAAI,EACJ,OAAO,EACR,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAgBrB"}
+{"version":3,"file":"SidebarCommitItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarCommitItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAG7C,UAAU,KAAK;IACb;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,cAAc,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,IAAI,EAAE,cAAc,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;CACnB;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,MAAM,EACN,cAAc,EACd,IAAI,EACJ,OAAO,EACP,EAAE,EAAE,SAAgB,EACrB,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkBrB"}

package/dist/components/SidebarItem/SidebarCommitItem.js

@@ -3,7 +3,9 @@ import { FaIcon } from '../FaIcon/index.js';
 /**
  * Renders a recent commit row in the Git sidebar Commits section.
  * Uses a distinct two-line layout rather than the standard sourceRow shell.
+ *
+ * Wrap lists in {@link SidebarList} and pass `as="li"` for valid list semantics.
  */
-export function SidebarCommitItem({ message, author, timestampLabel, icon, onClick }) {
-    return (_jsxs("button", { type: "button", className: "hc-sidebar-commit-item group app-no-drag flex w-full cursor-pointer rounded-md p-2 text-left hover:bg-selection/60", onClick: onClick, children: [_jsx(FaIcon, { icon: icon, className: "mr-2 h-4 w-4 shrink-0 text-muted", "aria-hidden": true }), _jsxs("div", { className: "-mt-1.5 flex flex-col gap-0.5", children: [_jsx("span", { className: "block min-w-0 truncate font-medium text-text", children: message }), _jsxs("span", { className: "block min-w-0 truncate text-[14px] text-muted", children: [author, " \u00B7 ", timestampLabel] })] })] }));
+export function SidebarCommitItem({ message, author, timestampLabel, icon, onClick, as: Container = 'li' }) {
+    return (_jsx(Container, { children: _jsxs("button", { type: "button", className: "hc-sidebar-commit-item group app-no-drag flex w-full cursor-pointer rounded-md p-2 text-left hover:bg-selection/60", onClick: onClick, children: [_jsx(FaIcon, { icon: icon, className: "mr-2 h-4 w-4 shrink-0 text-muted", "aria-hidden": true }), _jsxs("div", { className: "-mt-1.5 flex flex-col gap-0.5", children: [_jsx("span", { className: "block min-w-0 truncate font-medium text-text", children: message }), _jsxs("span", { className: "block min-w-0 truncate text-[14px] text-muted", children: [author, " \u00B7 ", timestampLabel] })] })] }) }));
 }

package/dist/components/SidebarItem/SidebarEnvironmentItem.d.ts

@@ -21,14 +21,6 @@ interface Props {
      * Whether this row should use selected/highlighted row styling.
      */
     selected?: boolean;
-    /**
-     * When true, sets aria-current="true" on the primary button.
-     */
-    ariaCurrent?: boolean;
-    /**
-     * When true, sets aria-selected="true" on the primary button.
-     */
-    ariaSelected?: boolean;
     /**
      * dnd-kit sortable configuration for environment reordering.
      */
@@ -38,21 +30,17 @@ interface Props {
      */
     onContextMenu?: (event: MouseEvent<HTMLElement>) => void;
     /**
-     * Called when the primary label button is clicked.
+     * Called when the primary label area is activated.
      */
-    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
     /**
-     * Called when the primary label button is double-clicked.
+     * Called when the primary label area is double-clicked.
      */
-    onDoubleClick?: () => void;
+    onDoubleClick?: (event: MouseEvent<HTMLElement>) => void;
     /**
-     * Called when Enter is pressed on the primary label button.
+     * Called when Enter is pressed on the primary label area.
      */
     onEnter?: () => void;
-    /**
-     * Accessible label for the primary button.
-     */
-    ariaLabel?: string;
     /**
      * Trailing actions slot, typically a row actions menu.
      */
@@ -61,10 +49,16 @@ interface Props {
      * Optional data attribute value for keyboard navigation focus targets.
      */
     dataSidebarEnvironmentId?: string | number;
+    /**
+     * HTML element for the row container. Use `li` inside {@link SidebarListbox}.
+     */
+    as?: 'div' | 'li';
 }
 /**
  * Renders an environment row in the Collections sidebar Environments section.
+ *
+ * The accessible name is derived from visible row content (name, variable summary).
  */
-export declare function SidebarEnvironmentItem({ name, variableSummary, colorDot, selected, ariaCurrent, ariaSelected, sortable, onContextMenu, onClick, onDoubleClick, onEnter, ariaLabel, actions, dataSidebarEnvironmentId }: Props): JSX.Element;
+export declare function SidebarEnvironmentItem({ name, variableSummary, colorDot, selected, sortable, onContextMenu, onClick, onDoubleClick, onEnter, actions, dataSidebarEnvironmentId, as }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=SidebarEnvironmentItem.d.ts.map

package/dist/components/SidebarItem/SidebarEnvironmentItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarEnvironmentItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarEnvironmentItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAiB,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAe,KAAK,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAG/E,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,eAAe,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE;QACT,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;QACjC,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IAEF;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IAErC;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAE3B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,wBAAwB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5C;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,eAAe,EACf,QAAQ,EACR,QAAgB,EAChB,WAAmB,EACnB,YAAoB,EACpB,QAAQ,EACR,aAAa,EACb,OAAO,EACP,aAAa,EACb,OAAO,EACP,SAAS,EACT,OAAO,EACP,wBAAwB,EACzB,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA4CrB"}
+{"version":3,"file":"SidebarEnvironmentItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarEnvironmentItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAiB,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAe,KAAK,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAG/E,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,eAAe,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE;QACT,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;QACjC,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IAEF;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IAErC;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEnD;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,wBAAwB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE3C;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;CACnB;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,eAAe,EACf,QAAQ,EACR,QAAgB,EAChB,QAAQ,EACR,aAAa,EACb,OAAO,EACP,aAAa,EACb,OAAO,EACP,OAAO,EACP,wBAAwB,EACxB,EAAS,EACV,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAqDrB"}

package/dist/components/SidebarItem/SidebarEnvironmentItem.js

@@ -4,18 +4,29 @@ import { SidebarItem } from './SidebarItem.js';
 import { SIDEBAR_ITEM_BUTTON_CLASS } from './sidebarItemClasses.js';
 /**
  * Renders an environment row in the Collections sidebar Environments section.
+ *
+ * The accessible name is derived from visible row content (name, variable summary).
  */
-export function SidebarEnvironmentItem({ name, variableSummary, colorDot, selected = false, ariaCurrent = false, ariaSelected = false, sortable, onContextMenu, onClick, onDoubleClick, onEnter, ariaLabel, actions, dataSidebarEnvironmentId }) {
+export function SidebarEnvironmentItem({ name, variableSummary, colorDot, selected = false, sortable, onContextMenu, onClick, onDoubleClick, onEnter, actions, dataSidebarEnvironmentId, as = 'li' }) {
+    const useListboxOption = as === 'li';
     /**
-     * Opens environment settings when Enter is pressed on the name button.
+     * Opens environment settings when Enter is pressed on the name area.
      */
     const handleKeyDown = (event) => {
-        if (event.key !== 'Enter')
+        if (event.key !== 'Enter' || onEnter == null) {
             return;
+        }
         event.preventDefault();
-        onEnter?.();
+        event.stopPropagation();
+        onEnter();
     };
-    return (_jsx(SidebarItem, { selected: selected, sortable: sortable, onContextMenu: onContextMenu, actions: actions, children: _jsxs("button", { type: "button", className: SIDEBAR_ITEM_BUTTON_CLASS, ...(dataSidebarEnvironmentId != null
+    return (_jsx(SidebarItem, { selected: selected, sortable: sortable, onContextMenu: onContextMenu, actions: actions, as: as, listboxOption: useListboxOption
+            ? {
+                onClick,
+                onDoubleClick,
+                onKeyDown: onEnter != null ? handleKeyDown : undefined
+            }
+            : undefined, children: _jsxs("span", { className: SIDEBAR_ITEM_BUTTON_CLASS, ...(dataSidebarEnvironmentId != null
                 ? { 'data-sidebar-environment-id': String(dataSidebarEnvironmentId) }
-                : {}), "aria-current": ariaCurrent ? 'true' : undefined, "aria-selected": ariaSelected ? 'true' : undefined, "aria-label": ariaLabel, onClick: onClick, onDoubleClick: onDoubleClick, onKeyDown: handleKeyDown, children: [_jsxs("span", { className: "inline-flex min-w-0 flex-1 items-center gap-1.5", children: [_jsx("span", { className: "min-w-0 truncate", children: name }), colorDot != null ? (_jsx(SidebarColorDot, { color: colorDot.color, visible: colorDot.visible, label: colorDot.label })) : null] }), _jsx("span", { className: "shrink-0 text-muted", children: variableSummary })] }) }));
+                : {}), children: [_jsxs("span", { className: "inline-flex min-w-0 flex-1 items-center gap-1.5", children: [_jsx("span", { className: "min-w-0 truncate", children: name }), colorDot != null ? (_jsx(SidebarColorDot, { color: colorDot.color, visible: colorDot.visible, label: colorDot.label })) : null] }), _jsx("span", { className: "shrink-0 text-muted", children: variableSummary })] }) }));
 }

package/dist/components/SidebarItem/SidebarFolderItem.d.ts

@@ -10,6 +10,26 @@ interface Props {
      * Whether the folder tree node is expanded.
      */
     expanded: boolean;
+    /**
+     * Id of the child region controlled by this folder (`SidebarTreeGroup` id).
+     */
+    childrenId?: string;
+    /**
+     * 1-based depth in the tree.
+     */
+    level?: number;
+    /**
+     * Total siblings at this level.
+     */
+    setSize?: number;
+    /**
+     * 1-based position among siblings at this level.
+     */
+    posInSet?: number;
+    /**
+     * Accessible label for the treeitem row.
+     */
+    ariaLabel?: string;
     /**
      * Optional color dot beside the folder name.
      */
@@ -39,15 +59,15 @@ interface Props {
      */
     onToggleExpand: () => void;
     /**
-     * Called when the folder name button is clicked.
+     * Called when the folder name area is activated.
      */
     onNameClick: () => void;
     /**
-     * Called when the folder name button is double-clicked.
+     * Called when the folder name area is double-clicked.
      */
     onNameDoubleClick?: () => void;
     /**
-     * Called when Enter is pressed on the folder name button.
+     * Called when Enter is pressed on the folder name area.
      */
     onNameEnter?: () => void;
     /**
@@ -59,11 +79,17 @@ interface Props {
      */
     expandIcon: IconDefinition;
     collapseIcon: IconDefinition;
+    /**
+     * HTML element for the row container. Use `li` inside {@link SidebarTree}.
+     */
+    as?: 'div' | 'li';
 }
 /**
  * Renders a collection folder row with expand/collapse control, optional color dot,
  * and optional drag-drop highlight affordance.
+ *
+ * Wrap folder trees in {@link SidebarTree} and pass `as="li"` for valid tree semantics.
  */
-export declare function SidebarFolderItem({ name, expanded, colorDot, dropHighlighted, selected, sortable, onContextMenu, onToggleExpand, onNameClick, onNameDoubleClick, onNameEnter, actions, expandIcon, collapseIcon }: Props): JSX.Element;
+export declare function SidebarFolderItem({ name, expanded, childrenId, level, setSize, posInSet, ariaLabel, colorDot, dropHighlighted, selected, sortable, onContextMenu, onToggleExpand, onNameClick, onNameDoubleClick, onNameEnter, actions, expandIcon, collapseIcon, as }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=SidebarFolderItem.d.ts.map

package/dist/components/SidebarItem/SidebarFolderItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarFolderItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarFolderItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,GAAG,EAAiB,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvE,OAAO,EAAe,KAAK,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAG/E,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE;QACT,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;QACjC,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IAEF;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,yBAAyB,CAAC;IAEpC;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,cAAc,EAAE,MAAM,IAAI,CAAC;IAE3B;;OAEG;IACH,WAAW,EAAE,MAAM,IAAI,CAAC;IAExB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAE/B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,UAAU,EAAE,cAAc,CAAC;IAC3B,YAAY,EAAE,cAAc,CAAC;CAC9B;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,eAAuB,EACvB,QAAgB,EAChB,QAAQ,EACR,aAAa,EACb,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,WAAW,EACX,OAAO,EACP,UAAU,EACV,YAAY,EACb,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAiDrB"}
+{"version":3,"file":"SidebarFolderItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarFolderItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,GAAG,EAAiB,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvE,OAAO,EAAe,KAAK,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAG/E,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE;QACT,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;QACjC,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IAEF;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,yBAAyB,CAAC;IAEpC;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,cAAc,EAAE,MAAM,IAAI,CAAC;IAE3B;;OAEG;IACH,WAAW,EAAE,MAAM,IAAI,CAAC;IAExB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAE/B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,UAAU,EAAE,cAAc,CAAC;IAC3B,YAAY,EAAE,cAAc,CAAC;IAE7B;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;CACnB;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,KAAK,EACL,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,eAAuB,EACvB,QAAgB,EAChB,QAAQ,EACR,aAAa,EACb,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,WAAW,EACX,OAAO,EACP,UAAU,EACV,YAAY,EACZ,EAAS,EACV,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAwErB"}

package/dist/components/SidebarItem/SidebarFolderItem.js

@@ -6,16 +6,37 @@ import { stopSortableDragPointerDown } from './stopSortableDragPointerDown.js';
 /**
  * Renders a collection folder row with expand/collapse control, optional color dot,
  * and optional drag-drop highlight affordance.
+ *
+ * Wrap folder trees in {@link SidebarTree} and pass `as="li"` for valid tree semantics.
  */
-export function SidebarFolderItem({ name, expanded, colorDot, dropHighlighted = false, selected = false, sortable, onContextMenu, onToggleExpand, onNameClick, onNameDoubleClick, onNameEnter, actions, expandIcon, collapseIcon }) {
+export function SidebarFolderItem({ name, expanded, childrenId, level, setSize, posInSet, ariaLabel, colorDot, dropHighlighted = false, selected = false, sortable, onContextMenu, onToggleExpand, onNameClick, onNameDoubleClick, onNameEnter, actions, expandIcon, collapseIcon, as = 'li' }) {
+    const useTreeItem = as === 'li';
     /**
-     * Opens folder settings when Enter is pressed on the name button.
+     * Opens folder settings when Enter is pressed on the name area.
      */
     const handleNameKeyDown = (event) => {
-        if (event.key !== 'Enter')
+        if (event.key !== 'Enter' || onNameEnter == null) {
             return;
+        }
         event.preventDefault();
-        onNameEnter?.();
+        event.stopPropagation();
+        onNameEnter();
     };
-    return (_jsxs(SidebarItem, { selected: selected, sortable: sortable, onContextMenu: onContextMenu, actions: actions, children: [_jsx("button", { type: "button", className: "app-no-drag inline-flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded border-none bg-transparent p-0 text-muted hover:text-text", onClick: onToggleExpand, onPointerDown: stopSortableDragPointerDown, "aria-expanded": expanded, "aria-label": expanded ? 'Collapse folder' : 'Expand folder', children: _jsx(FaIcon, { icon: expanded ? collapseIcon : expandIcon, className: "h-2 w-2" }) }), _jsxs("button", { type: "button", className: "app-no-drag ml-0.5 min-w-0 flex-1 cursor-pointer truncate border-none bg-transparent py-0 text-left leading-none font-medium text-inherit", "aria-current": selected ? 'true' : undefined, onClick: onNameClick, onDoubleClick: onNameDoubleClick, onKeyDown: handleNameKeyDown, children: [_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1.5", children: [name, colorDot != null ? (_jsx(SidebarColorDot, { color: colorDot.color, visible: colorDot.visible, label: colorDot.label })) : null] }), dropHighlighted ? _jsx("span", { className: "ml-1.5 font-normal text-info", children: "Drop here" }) : null] })] }));
+    const chevronLabel = expanded ? `Collapse folder "${name}"` : `Expand folder "${name}"`;
+    return (_jsxs(SidebarItem, { selected: selected, sortable: sortable, onContextMenu: onContextMenu, actions: actions, as: as, treeItem: useTreeItem
+            ? {
+                ariaLabel,
+                expanded,
+                controlsId: childrenId,
+                level,
+                setSize,
+                posInSet,
+                onClick: () => onNameClick(),
+                onDoubleClick: onNameDoubleClick != null ? () => onNameDoubleClick() : undefined,
+                onKeyDown: onNameEnter != null ? handleNameKeyDown : undefined
+            }
+            : undefined, children: [_jsx("button", { type: "button", className: "app-no-drag inline-flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded border-none bg-transparent p-0 text-muted hover:text-text", onClick: (event) => {
+                    event.stopPropagation();
+                    onToggleExpand();
+                }, onPointerDown: stopSortableDragPointerDown, tabIndex: -1, "aria-label": chevronLabel, children: _jsx(FaIcon, { icon: expanded ? collapseIcon : expandIcon, className: "h-2 w-2" }) }), _jsxs("span", { className: "app-no-drag ml-0.5 min-w-0 flex-1 cursor-pointer truncate border-none bg-transparent py-0 text-left leading-none font-medium text-inherit", "aria-current": selected ? 'true' : undefined, children: [_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1.5", children: [name, colorDot != null ? (_jsx(SidebarColorDot, { color: colorDot.color, visible: colorDot.visible, label: colorDot.label })) : null] }), dropHighlighted ? _jsx("span", { className: "ml-1.5 font-normal text-info", children: "Drop here" }) : null] })] }));
 }

package/dist/components/SidebarItem/SidebarHistoryItem.d.ts

@@ -30,11 +30,11 @@ interface Props {
      */
     selected?: boolean;
     /**
-     * Tooltip title for the primary button.
+     * Tooltip title for the primary label area.
      */
     title?: string;
     /**
-     * Accessible label for the primary button.
+     * Accessible label for the listbox option.
      */
     ariaLabel: string;
     /**
@@ -42,17 +42,21 @@ interface Props {
      */
     onContextMenu?: (event: MouseEvent<HTMLElement>) => void;
     /**
-     * Called when the primary row button is clicked.
+     * Called when the primary row area is activated.
      */
-    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
     /**
      * Trailing actions slot, typically a row actions menu.
      */
     actions?: ReactNode;
+    /**
+     * HTML element for the row container. Use `li` inside {@link SidebarListbox}.
+     */
+    as?: 'div' | 'li';
 }
 /**
  * Renders a request or run history entry row in the Collections sidebar History section.
  */
-export declare function SidebarHistoryItem({ method, name, isRun, status, statusText, runIcon, selected, title, ariaLabel, onContextMenu, onClick, actions }: Props): JSX.Element;
+export declare function SidebarHistoryItem({ method, name, isRun, status, statusText, runIcon, selected, title, ariaLabel, onContextMenu, onClick, actions, as }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=SidebarHistoryItem.d.ts.map

package/dist/components/SidebarItem/SidebarHistoryItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarHistoryItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarHistoryItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOxD,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,IAAI,EACJ,KAAa,EACb,MAAM,EACN,UAAU,EACV,OAAO,EACP,QAAgB,EAChB,KAAK,EACL,SAAS,EACT,aAAa,EACb,OAAO,EACP,OAAO,EACR,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA8BrB"}
+{"version":3,"file":"SidebarHistoryItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarHistoryItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOxD,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEnD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;CACnB;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,IAAI,EACJ,KAAa,EACb,MAAM,EACN,UAAU,EACV,OAAO,EACP,QAAgB,EAChB,KAAK,EACL,SAAS,EACT,aAAa,EACb,OAAO,EACP,OAAO,EACP,EAAS,EACV,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAuCrB"}

package/dist/components/SidebarItem/SidebarHistoryItem.js

@@ -1,12 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
-import { Button } from '../Button/index.js';
 import { FaIcon } from '../FaIcon/index.js';
 import { SidebarItem } from './SidebarItem.js';
 import { SidebarMethodBadge } from './SidebarMethodBadge.js';
-import { statusDotClass } from './sidebarItemClasses.js';
+import { SidebarStatusDot } from './SidebarStatusDot.js';
+import { SIDEBAR_ITEM_BUTTON_CLASS, statusDotClass } from './sidebarItemClasses.js';
 /**
  * Renders a request or run history entry row in the Collections sidebar History section.
  */
-export function SidebarHistoryItem({ method, name, isRun = false, status, statusText, runIcon, selected = false, title, ariaLabel, onContextMenu, onClick, actions }) {
-    return (_jsx(SidebarItem, { selected: selected, onContextMenu: onContextMenu, actions: actions, children: _jsxs(Button, { variant: "toolbar", className: "flex min-w-0 flex-1 items-center gap-2 py-0.5 text-left text-text hover:bg-transparent", title: title, "aria-label": ariaLabel, "aria-selected": selected ? 'true' : undefined, onClick: onClick, children: [_jsx(SidebarMethodBadge, { method: method, uppercase: true }), _jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: [_jsx("span", { className: "min-w-0 truncate text-text", children: name }), isRun && runIcon != null ? (_jsx(FaIcon, { icon: runIcon, className: "h-3.5 w-3.5 shrink-0 text-muted", "aria-hidden": true })) : null] }), !isRun && status != null && statusText != null ? (_jsxs("span", { className: "flex shrink-0 items-center gap-1.5 text-muted tabular-nums", children: [_jsx("span", { className: `inline-block h-2 w-2 shrink-0 rounded-full ${statusDotClass(status)}`, "aria-hidden": "true" }), status, " ", statusText] })) : null] }) }));
+export function SidebarHistoryItem({ method, name, isRun = false, status, statusText, runIcon, selected = false, title, ariaLabel, onContextMenu, onClick, actions, as = 'li' }) {
+    const useListboxOption = as === 'li';
+    const optionAriaLabel = !isRun && status != null && statusText != null
+        ? `${ariaLabel}, responded ${status} ${statusText}`
+        : ariaLabel;
+    return (_jsx(SidebarItem, { selected: selected, onContextMenu: onContextMenu, actions: actions, as: as, listboxOption: useListboxOption
+            ? {
+                ariaLabel: optionAriaLabel,
+                onClick
+            }
+            : undefined, children: _jsxs("span", { className: `${SIDEBAR_ITEM_BUTTON_CLASS} py-0.5`, title: title, children: [_jsx(SidebarMethodBadge, { method: method, uppercase: true }), _jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: [_jsx("span", { className: "min-w-0 truncate text-text", children: name }), isRun && runIcon != null ? (_jsx(FaIcon, { icon: runIcon, className: "h-3.5 w-3.5 shrink-0 text-muted", "aria-hidden": true })) : null] }), !isRun && status != null && statusText != null ? (_jsxs("span", { className: "flex shrink-0 items-center gap-1.5 text-muted tabular-nums", children: [_jsx(SidebarStatusDot, { className: statusDotClass(status) }), status, " ", statusText] })) : null] }) }));
 }

package/dist/components/SidebarItem/SidebarItem.d.ts

@@ -1,4 +1,4 @@
-import type { JSX, MouseEvent, ReactNode } from 'react';
+import type { JSX, KeyboardEvent, MouseEvent, ReactNode } from 'react';
 /**
  * Sortable drag configuration for a sidebar row.
  */
@@ -16,6 +16,76 @@ export interface SidebarItemSortableConfig {
      */
     disabled?: boolean;
 }
+/**
+ * Tree item interaction props for a sidebar row rendered inside {@link SidebarTree}.
+ */
+export interface SidebarItemTreeItem {
+    /**
+     * Accessible label for the treeitem.
+     */
+    ariaLabel?: string;
+    /**
+     * Whether the treeitem is expanded. Omit for leaf nodes.
+     */
+    expanded?: boolean;
+    /**
+     * Id of the controlled child region (`SidebarTreeGroup` id).
+     */
+    controlsId?: string;
+    /**
+     * 1-based depth in the tree.
+     */
+    level?: number;
+    /**
+     * Total siblings at this level.
+     */
+    setSize?: number;
+    /**
+     * 1-based position among siblings at this level.
+     */
+    posInSet?: number;
+    /**
+     * Explicit tab index override. Defaults to `0` when selected, otherwise `-1`.
+     */
+    tabIndex?: number;
+    /**
+     * Called when the treeitem is activated via click or keyboard.
+     */
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Called when the treeitem receives a double-click.
+     */
+    onDoubleClick?: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Additional keyboard handling composed before default Enter/Space activation.
+     */
+    onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
+}
+/**
+ * Listbox option interaction props for a sidebar row rendered inside {@link SidebarListbox}.
+ */
+export interface SidebarItemListboxOption {
+    /**
+     * Accessible label for the listbox option. When omitted, the name is derived from visible content.
+     */
+    ariaLabel?: string;
+    /**
+     * Explicit tab index override. Defaults to `0` when selected, otherwise `-1`.
+     */
+    tabIndex?: number;
+    /**
+     * Called when the option is activated via click or keyboard.
+     */
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Called when the option receives a double-click.
+     */
+    onDoubleClick?: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Additional keyboard handling composed before default Enter/Space activation.
+     */
+    onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
+}
 interface Props {
     /**
      * Whether this row should use selected/highlighted row styling.
@@ -29,6 +99,14 @@ interface Props {
      * Optional dnd-kit sortable configuration.
      */
     sortable?: SidebarItemSortableConfig;
+    /**
+     * When set, exposes the row as a listbox option (`role="option"`).
+     */
+    listboxOption?: SidebarItemListboxOption;
+    /**
+     * When set, exposes the row as a tree item (`role="treeitem"`).
+     */
+    treeItem?: SidebarItemTreeItem;
     /**
      * Called when the user right-clicks the row container.
      */
@@ -39,6 +117,7 @@ interface Props {
     actions?: ReactNode;
     /**
      * When true, wraps the actions slot with {@link stopSortableDragPointerDown}.
+     * Harmless when sortable: drag activation lives on the grip handle, not the row.
      */
     actionsStopDrag?: boolean;
     /**
@@ -56,8 +135,9 @@ interface Props {
 }
 /**
  * Base shell for sidebar list rows. Applies shared row chrome, optional sortable
- * drag behavior, and a trailing actions slot suitable for future Sidebar layout reuse.
+ * drag behavior via a leading grip handle, and a trailing actions slot suitable
+ * for future Sidebar layout reuse.
  */
-export declare function SidebarItem({ selected, compact, sortable, onContextMenu, actions, actionsStopDrag, as: Container, className, children }: Props): JSX.Element;
+export declare function SidebarItem({ selected, compact, sortable, listboxOption, treeItem, onContextMenu, actions, actionsStopDrag, as: Container, className, children }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=SidebarItem.d.ts.map

package/dist/components/SidebarItem/SidebarItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMxD;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,eAAe,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IAErC;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAgB,EAChB,OAAc,EACd,QAAQ,EACR,aAAa,EACb,OAAO,EACP,eAAsB,EACtB,EAAE,EAAE,SAAiB,EACrB,SAAS,EACT,QAAQ,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAoCrB"}
+{"version":3,"file":"SidebarItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvE;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,eAAe,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEnD;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACzD;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEnD;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACzD;AAED,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IAErC;;OAEG;IACH,aAAa,CAAC,EAAE,wBAAwB,CAAC;IAEzC;;OAEG;IACH,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAE/B;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAgB,EAChB,OAAc,EACd,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,aAAa,EACb,OAAO,EACP,eAAsB,EACtB,EAAE,EAAE,SAAiB,EACrB,SAAS,EACT,QAAQ,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA2FrB"}

package/dist/components/SidebarItem/SidebarItem.js

@@ -2,16 +2,66 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@harborclient
 import { cn } from '../utils.js';
 import { SortableSidebarItem } from './SortableSidebarItem.js';
 import { sourceRow } from './sidebarItemClasses.js';
+import { handleSidebarOptionKeyDown } from './sidebarListOption.js';
 import { stopSortableDragPointerDown } from './stopSortableDragPointerDown.js';
 /**
  * Base shell for sidebar list rows. Applies shared row chrome, optional sortable
- * drag behavior, and a trailing actions slot suitable for future Sidebar layout reuse.
+ * drag behavior via a leading grip handle, and a trailing actions slot suitable
+ * for future Sidebar layout reuse.
  */
-export function SidebarItem({ selected = false, compact = true, sortable, onContextMenu, actions, actionsStopDrag = true, as: Container = 'div', className, children }) {
+export function SidebarItem({ selected = false, compact = true, sortable, listboxOption, treeItem, onContextMenu, actions, actionsStopDrag = true, as: Container = 'div', className, children }) {
     const rowClassName = cn('hc-sidebar-item', sourceRow(selected, compact), className);
     const rowContent = (_jsxs(_Fragment, { children: [children, actions != null ? (_jsx("div", { className: "shrink-0", ...(actionsStopDrag ? { onPointerDown: stopSortableDragPointerDown } : {}), children: actions })) : null] }));
+    const listboxOptionProps = listboxOption != null
+        ? {
+            role: 'option',
+            'aria-selected': selected ? 'true' : 'false',
+            ...(listboxOption.ariaLabel != null ? { 'aria-label': listboxOption.ariaLabel } : {}),
+            tabIndex: listboxOption.tabIndex ?? (selected ? 0 : -1),
+            ...(listboxOption.onClick != null ? { onClick: listboxOption.onClick } : {}),
+            ...(listboxOption.onDoubleClick != null
+                ? { onDoubleClick: listboxOption.onDoubleClick }
+                : {}),
+            onKeyDown: (event) => {
+                listboxOption.onKeyDown?.(event);
+                if (event.defaultPrevented) {
+                    return;
+                }
+                handleSidebarOptionKeyDown(event, () => {
+                    listboxOption.onClick?.(event);
+                });
+            }
+        }
+        : {};
+    const treeItemProps = treeItem != null
+        ? {
+            role: 'treeitem',
+            'aria-selected': selected ? 'true' : 'false',
+            ...(treeItem.ariaLabel != null ? { 'aria-label': treeItem.ariaLabel } : {}),
+            ...(treeItem.expanded != null
+                ? { 'aria-expanded': treeItem.expanded ? 'true' : 'false' }
+                : {}),
+            ...(treeItem.controlsId != null ? { 'aria-controls': treeItem.controlsId } : {}),
+            ...(treeItem.level != null ? { 'aria-level': treeItem.level } : {}),
+            ...(treeItem.setSize != null ? { 'aria-setsize': treeItem.setSize } : {}),
+            ...(treeItem.posInSet != null ? { 'aria-posinset': treeItem.posInSet } : {}),
+            tabIndex: treeItem.tabIndex ?? (selected ? 0 : -1),
+            ...(treeItem.onClick != null ? { onClick: treeItem.onClick } : {}),
+            ...(treeItem.onDoubleClick != null ? { onDoubleClick: treeItem.onDoubleClick } : {}),
+            onKeyDown: (event) => {
+                treeItem.onKeyDown?.(event);
+                if (event.defaultPrevented) {
+                    return;
+                }
+                handleSidebarOptionKeyDown(event, () => {
+                    treeItem.onClick?.(event);
+                });
+            }
+        }
+        : {};
+    const interactiveProps = listboxOption != null ? listboxOptionProps : treeItemProps;
     if (sortable != null) {
-        return (_jsx(SortableSidebarItem, { id: sortable.id, className: rowClassName, dragHandleLabel: sortable.dragHandleLabel, disabled: sortable.disabled, onRowContextMenu: onContextMenu, children: rowContent }));
+        return (_jsx(SortableSidebarItem, { id: sortable.id, as: Container, className: rowClassName, dragHandleLabel: sortable.dragHandleLabel, disabled: sortable.disabled, onRowContextMenu: onContextMenu, ...interactiveProps, children: rowContent }));
     }
-    return (_jsx(Container, { className: rowClassName, onContextMenu: onContextMenu, children: rowContent }));
+    return (_jsx(Container, { className: rowClassName, onContextMenu: onContextMenu, ...interactiveProps, children: rowContent }));
 }