@harborclient/sdk 1.1.6 → 1.1.9

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 }));
 }

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

@@ -0,0 +1,30 @@
+import type { JSX, ReactNode } from 'react';
+interface Props {
+    /**
+     * List rows. Each child should render as an `<li>` (e.g. {@link SidebarCommitItem} `as="li"`).
+     */
+    children: ReactNode;
+    /**
+     * Accessible name for the list when the section title is not sufficient.
+     */
+    'aria-label'?: string;
+    /**
+     * Additional classes merged onto the list element.
+     */
+    className?: string;
+}
+/**
+ * Accessible list container for non-selectable sidebar rows.
+ *
+ * Wrap rows rendered with `as="li"` so each child is a `role="listitem"`.
+ *
+ * @example
+ * ```tsx
+ * <SidebarList aria-label="Commits">
+ *   <SidebarCommitItem as="li" message="Fix auth" author="Alex" timestampLabel="2h ago" icon={faCodeBranch} />
+ * </SidebarList>
+ * ```
+ */
+export declare function SidebarList({ children, 'aria-label': ariaLabel, className }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=SidebarList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarList.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAMhG"}

package/dist/components/SidebarItem/SidebarList.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+import { cn } from '../utils.js';
+/**
+ * Accessible list container for non-selectable sidebar rows.
+ *
+ * Wrap rows rendered with `as="li"` so each child is a `role="listitem"`.
+ *
+ * @example
+ * ```tsx
+ * <SidebarList aria-label="Commits">
+ *   <SidebarCommitItem as="li" message="Fix auth" author="Alex" timestampLabel="2h ago" icon={faCodeBranch} />
+ * </SidebarList>
+ * ```
+ */
+export function SidebarList({ children, 'aria-label': ariaLabel, className }) {
+    return (_jsx("ul", { role: "list", "aria-label": ariaLabel, className: cn('m-0 list-none p-0', className), children: children }));
+}

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

@@ -0,0 +1,35 @@
+import type { JSX, ReactNode } from 'react';
+interface Props {
+    /**
+     * Listbox option rows. Each child should be a {@link SidebarItem} with `as="li"`.
+     */
+    children: ReactNode;
+    /**
+     * When true, multiple options may be selected at once.
+     */
+    multiselectable?: boolean;
+    /**
+     * Accessible name for the listbox when the section title is not sufficient.
+     */
+    'aria-label'?: string;
+    /**
+     * Additional classes merged onto the listbox element.
+     */
+    className?: string;
+}
+/**
+ * Accessible listbox container for flat sidebar item lists.
+ *
+ * Wrap rows rendered with {@link SidebarItem} `as="li"` and `listboxOption` so
+ * each row exposes `role="option"` and `aria-selected` correctly.
+ *
+ * @example
+ * ```tsx
+ * <SidebarListbox aria-label="Collections">
+ *   <SidebarRequestItem as="li" name="List users" method="GET" />
+ * </SidebarListbox>
+ * ```
+ */
+export declare function SidebarListbox({ children, multiselectable, 'aria-label': ariaLabel, className }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=SidebarListbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarListbox.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarListbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,eAAuB,EACvB,YAAY,EAAE,SAAS,EACvB,SAAS,EACV,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAWrB"}

package/dist/components/SidebarItem/SidebarListbox.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+import { cn } from '../utils.js';
+/**
+ * Accessible listbox container for flat sidebar item lists.
+ *
+ * Wrap rows rendered with {@link SidebarItem} `as="li"` and `listboxOption` so
+ * each row exposes `role="option"` and `aria-selected` correctly.
+ *
+ * @example
+ * ```tsx
+ * <SidebarListbox aria-label="Collections">
+ *   <SidebarRequestItem as="li" name="List users" method="GET" />
+ * </SidebarListbox>
+ * ```
+ */
+export function SidebarListbox({ children, multiselectable = false, 'aria-label': ariaLabel, className }) {
+    return (_jsx("ul", { role: "listbox", "aria-multiselectable": multiselectable ? true : undefined, "aria-label": ariaLabel, className: cn('m-0 list-none p-0', className), children: children }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"SidebarMethodBadge.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarMethodBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIjC,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,MAAM,EAAE,SAAiB,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAYpF"}
+{"version":3,"file":"SidebarMethodBadge.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarMethodBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIjC,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,MAAM,EAAE,SAAiB,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CASpF"}

package/dist/components/SidebarItem/SidebarMethodBadge.js

@@ -7,5 +7,5 @@ import { METHOD_CLASSES } from './sidebarItemClasses.js';
 export function SidebarMethodBadge({ method, uppercase = false }) {
     const methodKey = method.toLowerCase();
     const colorClass = METHOD_CLASSES[methodKey] ?? 'text-info';
-    return (_jsx("span", { className: cn('shrink-0 px-1 py-px', uppercase && 'font-medium uppercase', colorClass), "aria-hidden": uppercase ? true : undefined, children: method }));
+    return (_jsx("span", { className: cn('shrink-0 px-1 py-px', uppercase && 'font-medium uppercase', colorClass), children: method }));
 }

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

@@ -43,35 +43,27 @@ 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;
-    /**
-     * Accessible label for the primary button.
-     */
-    ariaLabel?: string;
-    /**
-     * When true, sets aria-current="true" on the primary button.
-     */
-    ariaCurrent?: boolean;
-    /**
-     * When true, sets aria-selected="true" on the primary button.
-     */
-    ariaSelected?: boolean;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
     /**
      * Trailing actions slot, typically a row actions menu.
      */
     actions?: ReactNode;
     /**
-     * HTML element for the row container when not sortable.
+     * HTML element for the row container. Use `li` inside {@link SidebarListbox}.
      */
     as?: 'div' | 'li';
 }
 /**
  * Renders a saved-request sidebar row with method badge, optional color dot or git
  * status marker, and shared row chrome. Used in both Collections and Git sidebars.
+ *
+ * The accessible name is derived from visible row content (method, name, markers).
+ *
+ * Wrap lists in {@link SidebarListbox} and pass `as="li"` for valid listbox semantics.
  */
-export declare function SidebarRequestItem({ method, name, nameClassName, colorDot, statusMarker, selected, sortable, onContextMenu, onClick, ariaLabel, ariaCurrent, ariaSelected, actions, as }: Props): JSX.Element;
+export declare function SidebarRequestItem({ method, name, nameClassName, colorDot, statusMarker, selected, sortable, onContextMenu, onClick, actions, as }: Props): JSX.Element;
 interface DocumentProps {
     /**
      * Icon shown before the document name. Defaults to a file-lines icon when omitted.
@@ -110,34 +102,28 @@ interface DocumentProps {
      */
     onContextMenu?: (event: MouseEvent<HTMLElement>) => void;
     /**
-     * Called when the primary label button is clicked.
-     */
-    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Called when the primary label button is double-clicked.
-     */
-    onDoubleClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Accessible label for the primary button.
+     * Called when the primary label area is activated.
      */
-    ariaLabel?: string;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
     /**
-     * When true, sets aria-current="true" on the primary button.
+     * Called when the primary label area is double-clicked.
      */
-    ariaCurrent?: boolean;
+    onDoubleClick?: (event: MouseEvent<HTMLElement>) => void;
     /**
      * Trailing actions slot, typically a row actions menu.
      */
     actions?: ReactNode;
     /**
-     * HTML element for the row container.
+     * HTML element for the row container. Use `li` inside {@link SidebarListbox}.
      */
     as?: 'div' | 'li';
 }
 /**
  * Renders a markdown document sidebar row with file icon, optional color dot or git
  * status marker, and shared row chrome. Used in both Collections and Git sidebars.
+ *
+ * The accessible name is derived from visible row content (name, markers).
  */
-export declare function SidebarDocumentItem({ icon, name, nameClassName, colorDot, statusMarker, selected, onContextMenu, onClick, onDoubleClick, ariaLabel, ariaCurrent, actions, as }: DocumentProps): JSX.Element;
+export declare function SidebarDocumentItem({ icon, name, nameClassName, colorDot, statusMarker, selected, onContextMenu, onClick, onDoubleClick, actions, as }: DocumentProps): JSX.Element;
 export {};
 //# sourceMappingURL=SidebarRequestItem.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SidebarRequestItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarRequestItem.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SidebarRequestItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarRequestItem.tsx"],"names":[],"mappings":"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"}

package/dist/components/SidebarItem/SidebarRequestItem.js

@@ -9,14 +9,31 @@ import { SIDEBAR_ITEM_BUTTON_CLASS } from './sidebarItemClasses.js';
 /**
  * Renders a saved-request sidebar row with method badge, optional color dot or git
  * status marker, and shared row chrome. Used in both Collections and Git sidebars.
+ *
+ * The accessible name is derived from visible row content (method, name, markers).
+ *
+ * Wrap lists in {@link SidebarListbox} and pass `as="li"` for valid listbox semantics.
  */
-export function SidebarRequestItem({ method, name, nameClassName, colorDot, statusMarker, selected = false, sortable, onContextMenu, onClick, ariaLabel, ariaCurrent = false, ariaSelected = false, actions, as = 'div' }) {
-    return (_jsx(SidebarItem, { selected: selected, sortable: sortable, onContextMenu: onContextMenu, actions: actions, as: as, children: _jsxs("button", { type: "button", className: SIDEBAR_ITEM_BUTTON_CLASS, "aria-current": ariaCurrent ? 'true' : undefined, "aria-selected": ariaSelected ? 'true' : undefined, "aria-label": ariaLabel, onClick: onClick, children: [_jsx(SidebarMethodBadge, { method: method }), colorDot != null ? (_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1.5", children: [_jsx("span", { className: `min-w-0 truncate ${nameClassName ?? ''}`, children: name }), _jsx(SidebarColorDot, { color: colorDot.color, visible: colorDot.visible, label: colorDot.label })] })) : (_jsx("span", { className: `min-w-0 truncate ${nameClassName ?? ''}`, children: name })), statusMarker != null ? (_jsx(SidebarStatusMarker, { marker: statusMarker.marker, className: statusMarker.className, label: statusMarker.label })) : null] }) }));
+export function SidebarRequestItem({ method, name, nameClassName, colorDot, statusMarker, selected = false, sortable, onContextMenu, onClick, actions, as = 'li' }) {
+    const useListboxOption = as === 'li';
+    return (_jsx(SidebarItem, { selected: selected, sortable: sortable, onContextMenu: onContextMenu, actions: actions, as: as, listboxOption: useListboxOption
+            ? {
+                onClick
+            }
+            : undefined, children: _jsxs("span", { className: SIDEBAR_ITEM_BUTTON_CLASS, children: [_jsx(SidebarMethodBadge, { method: method }), colorDot != null ? (_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1.5", children: [_jsx("span", { className: `min-w-0 truncate ${nameClassName ?? ''}`, children: name }), _jsx(SidebarColorDot, { color: colorDot.color, visible: colorDot.visible, label: colorDot.label })] })) : (_jsx("span", { className: `min-w-0 truncate ${nameClassName ?? ''}`, children: name })), statusMarker != null ? (_jsx(SidebarStatusMarker, { marker: statusMarker.marker, className: statusMarker.className, label: statusMarker.label })) : null] }) }));
 }
 /**
  * Renders a markdown document sidebar row with file icon, optional color dot or git
  * status marker, and shared row chrome. Used in both Collections and Git sidebars.
+ *
+ * The accessible name is derived from visible row content (name, markers).
  */
-export function SidebarDocumentItem({ icon = faFileLines, name, nameClassName, colorDot, statusMarker, selected = false, onContextMenu, onClick, onDoubleClick, ariaLabel, ariaCurrent = false, actions, as = 'div' }) {
-    return (_jsx(SidebarItem, { selected: selected, onContextMenu: onContextMenu, actions: actions, as: as, children: _jsxs("button", { type: "button", className: SIDEBAR_ITEM_BUTTON_CLASS, "aria-current": ariaCurrent ? 'true' : undefined, "aria-label": ariaLabel, onClick: onClick, onDoubleClick: onDoubleClick, children: [_jsx(FaIcon, { icon: icon, className: "h-3.5 w-3.5 shrink-0 text-muted", "aria-hidden": true }), colorDot != null ? (_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1.5", children: [_jsx("span", { className: `min-w-0 truncate ${nameClassName ?? ''}`, children: name }), _jsx(SidebarColorDot, { color: colorDot.color, visible: colorDot.visible, label: colorDot.label })] })) : (_jsx("span", { className: `min-w-0 truncate ${nameClassName ?? ''}`, children: name })), statusMarker != null ? (_jsx(SidebarStatusMarker, { marker: statusMarker.marker, className: statusMarker.className, label: statusMarker.label })) : null] }) }));
+export function SidebarDocumentItem({ icon = faFileLines, name, nameClassName, colorDot, statusMarker, selected = false, onContextMenu, onClick, onDoubleClick, actions, as = 'li' }) {
+    const useListboxOption = as === 'li';
+    return (_jsx(SidebarItem, { selected: selected, onContextMenu: onContextMenu, actions: actions, as: as, listboxOption: useListboxOption
+            ? {
+                onClick,
+                onDoubleClick
+            }
+            : undefined, children: _jsxs("span", { className: SIDEBAR_ITEM_BUTTON_CLASS, children: [_jsx(FaIcon, { icon: icon, className: "h-3.5 w-3.5 shrink-0 text-muted", "aria-hidden": true }), colorDot != null ? (_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1.5", children: [_jsx("span", { className: `min-w-0 truncate ${nameClassName ?? ''}`, children: name }), _jsx(SidebarColorDot, { color: colorDot.color, visible: colorDot.visible, label: colorDot.label })] })) : (_jsx("span", { className: `min-w-0 truncate ${nameClassName ?? ''}`, children: name })), statusMarker != null ? (_jsx(SidebarStatusMarker, { marker: statusMarker.marker, className: statusMarker.className, label: statusMarker.label })) : null] }) }));
 }

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

@@ -25,21 +25,17 @@ 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.
-     */
-    ariaLabel: string;
     /**
      * Called when the user right-clicks the row container.
      */
     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.
      */
@@ -48,10 +44,17 @@ interface Props {
      * Optional data attribute value for keyboard navigation focus targets.
      */
     dataSidebarRunResultId?: string | number;
+    /**
+     * HTML element for the row container. Use `li` inside {@link SidebarListbox}.
+     */
+    as?: 'div' | 'li';
 }
 /**
  * Renders a saved run result row in the Collections sidebar Runs section.
+ *
+ * The accessible name is derived from visible row content (method, label, connection badge,
+ * status summary).
  */
-export declare function SidebarRunItem({ method, label, connectionBadge, statusDotClassName, statusSummary, selected, title, ariaLabel, onContextMenu, onClick, actions, dataSidebarRunResultId }: Props): JSX.Element;
+export declare function SidebarRunItem({ method, label, connectionBadge, statusDotClassName, statusSummary, selected, title, onContextMenu, onClick, actions, dataSidebarRunResultId, as }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=SidebarRunItem.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SidebarRunItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarRunItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMxD,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,kBAAkB,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;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;IAEpB;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1C;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,aAAa,EACb,QAAgB,EAChB,KAAK,EACL,SAAS,EACT,aAAa,EACb,OAAO,EACP,OAAO,EACP,sBAAsB,EACvB,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA8BrB"}
+{"version":3,"file":"SidebarRunItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarRunItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMxD,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,kBAAkB,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;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,sBAAsB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzC;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;CACnB;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,aAAa,EACb,QAAgB,EAChB,KAAK,EACL,aAAa,EACb,OAAO,EACP,OAAO,EACP,sBAAsB,EACtB,EAAS,EACV,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAwCrB"}

package/dist/components/SidebarItem/SidebarRunItem.js

@@ -1,13 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
-import { Button } from '../Button/index.js';
 import { SidebarItem } from './SidebarItem.js';
 import { SidebarMethodBadge } from './SidebarMethodBadge.js';
 import { SidebarStatusDot } from './SidebarStatusDot.js';
+import { SIDEBAR_ITEM_BUTTON_CLASS } from './sidebarItemClasses.js';
 /**
  * Renders a saved run result row in the Collections sidebar Runs section.
+ *
+ * The accessible name is derived from visible row content (method, label, connection badge,
+ * status summary).
  */
-export function SidebarRunItem({ method, label, connectionBadge, statusDotClassName, statusSummary, selected = false, title, ariaLabel, onContextMenu, onClick, actions, dataSidebarRunResultId }) {
-    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", ...(dataSidebarRunResultId != null
+export function SidebarRunItem({ method, label, connectionBadge, statusDotClassName, statusSummary, selected = false, title, onContextMenu, onClick, actions, dataSidebarRunResultId, as = 'li' }) {
+    const useListboxOption = as === 'li';
+    return (_jsx(SidebarItem, { selected: selected, onContextMenu: onContextMenu, actions: actions, as: as, listboxOption: useListboxOption
+            ? {
+                onClick
+            }
+            : undefined, children: _jsxs("span", { className: `${SIDEBAR_ITEM_BUTTON_CLASS} py-0.5`, title: title, ...(dataSidebarRunResultId != null
                 ? { 'data-sidebar-run-result-id': String(dataSidebarRunResultId) }
-                : {}), title: title, "aria-label": ariaLabel, "aria-selected": selected ? 'true' : undefined, onClick: onClick, children: [method != null && method !== '' ? _jsx(SidebarMethodBadge, { method: method, uppercase: true }) : null, _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: label }), connectionBadge != null ? (_jsx("span", { className: "shrink-0 rounded bg-info/15 px-1.5 py-0.5 text-[14px] font-medium text-info", title: `Stored in ${connectionBadge}`, children: connectionBadge })) : null] }), _jsx(SidebarStatusDot, { className: statusDotClassName, srOnlyLabel: statusSummary })] }) }));
+                : {}), children: [method != null && method !== '' ? _jsx(SidebarMethodBadge, { method: method, uppercase: true }) : null, _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: label }), connectionBadge != null ? (_jsx("span", { className: "shrink-0 rounded bg-info/15 px-1.5 py-0.5 text-[14px] font-medium text-info", title: `Stored in ${connectionBadge}`, children: connectionBadge })) : null] }), _jsx(SidebarStatusDot, { className: statusDotClassName, srOnlyLabel: statusSummary })] }) }));
 }

package/dist/components/SidebarItem/SidebarStatusMarker.js

@@ -4,5 +4,5 @@ import { cn } from '../utils.js';
  * Renders a git change status marker in square brackets after a file name.
  */
 export function SidebarStatusMarker({ marker, className, label }) {
-    return (_jsxs("span", { className: cn('shrink-0', className), title: label, "aria-label": label, children: ["[", marker, "]"] }));
+    return (_jsxs("span", { className: cn('shrink-0', className), role: "img", title: label, "aria-label": label, children: ["[", marker, "]"] }));
 }

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

@@ -35,17 +35,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 tab group row in the Collections sidebar Tab Groups section.
  */
-export declare function SidebarTabGroupItem({ name, summary, icon, colorDot, selected, sortable, onContextMenu, onClick, actions }: Props): JSX.Element;
+export declare function SidebarTabGroupItem({ name, summary, icon, colorDot, selected, sortable, onContextMenu, onClick, actions, as }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=SidebarTabGroupItem.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SidebarTabGroupItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarTabGroupItem.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;AAIxD,OAAO,EAAe,KAAK,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAE/E,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,IAAI,EAAE,cAAc,CAAC;IAErB;;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,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,QAAgB,EAChB,QAAQ,EACR,aAAa,EACb,OAAO,EACP,OAAO,EACR,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA6BrB"}
+{"version":3,"file":"SidebarTabGroupItem.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarTabGroupItem.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;AAGxD,OAAO,EAAe,KAAK,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAG/E,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,IAAI,EAAE,cAAc,CAAC;IAErB;;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,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;CACnB;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,QAAgB,EAChB,QAAQ,EACR,aAAa,EACb,OAAO,EACP,OAAO,EACP,EAAS,EACV,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkCrB"}

package/dist/components/SidebarItem/SidebarTabGroupItem.js

@@ -1,11 +1,16 @@
 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 { SidebarColorDot } from './SidebarColorDot.js';
 import { SidebarItem } from './SidebarItem.js';
+import { SIDEBAR_ITEM_BUTTON_CLASS } from './sidebarItemClasses.js';
 /**
  * Renders a tab group row in the Collections sidebar Tab Groups section.
  */
-export function SidebarTabGroupItem({ name, summary, icon, colorDot, selected = false, sortable, onContextMenu, onClick, actions }) {
-    return (_jsx(SidebarItem, { selected: selected, sortable: sortable, onContextMenu: onContextMenu, actions: actions, children: _jsxs(Button, { variant: "toolbar", className: "min-w-0 flex-1 justify-start gap-2 rounded-md px-2 py-1 text-left text-text hover:bg-transparent", "aria-selected": selected ? 'true' : undefined, onClick: onClick, children: [_jsx(FaIcon, { icon: icon, className: "h-3.5 w-3.5 shrink-0 text-muted", "aria-hidden": true }), _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: summary })] }) }));
+export function SidebarTabGroupItem({ name, summary, icon, colorDot, selected = false, sortable, onContextMenu, onClick, actions, as = 'li' }) {
+    const useListboxOption = as === 'li';
+    return (_jsx(SidebarItem, { selected: selected, sortable: sortable, onContextMenu: onContextMenu, actions: actions, as: as, listboxOption: useListboxOption
+            ? {
+                onClick
+            }
+            : undefined, children: _jsxs("span", { className: `${SIDEBAR_ITEM_BUTTON_CLASS} gap-2 rounded-md px-2 py-1`, children: [_jsx(FaIcon, { icon: icon, className: "h-3.5 w-3.5 shrink-0 text-muted", "aria-hidden": true }), _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: summary })] }) }));
 }

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

@@ -0,0 +1,55 @@
+import type { JSX, ReactNode } from 'react';
+interface TreeProps {
+    /**
+     * Tree rows. Each child should be a {@link SidebarFolderItem} with `as="li"`.
+     */
+    children: ReactNode;
+    /**
+     * Accessible name for the tree when the section title is not sufficient.
+     */
+    'aria-label'?: string;
+    /**
+     * Additional classes merged onto the tree element.
+     */
+    className?: string;
+}
+/**
+ * Accessible tree container for nested sidebar folder hierarchies.
+ *
+ * Wrap folder rows rendered with {@link SidebarFolderItem} `as="li"` and
+ * `treeItem` so each row exposes `role="treeitem"` with expand/collapse state.
+ *
+ * @example
+ * ```tsx
+ * <SidebarTree aria-label="Collections">
+ *   <SidebarFolderItem as="li" name="Auth" expanded childrenId="auth-children" />
+ *   <SidebarTreeGroup id="auth-children">
+ *     <SidebarRequestItem as="li" name="Login" method="POST" />
+ *   </SidebarTreeGroup>
+ * </SidebarTree>
+ * ```
+ */
+export declare function SidebarTree({ children, 'aria-label': ariaLabel, className }: TreeProps): JSX.Element;
+interface TreeGroupProps {
+    /**
+     * Child tree rows or nested groups.
+     */
+    children: ReactNode;
+    /**
+     * Stable id referenced by the parent treeitem's `aria-controls`.
+     */
+    id: string;
+    /**
+     * Additional classes merged onto the group element.
+     */
+    className?: string;
+}
+/**
+ * Child region for an expanded folder treeitem.
+ *
+ * Renders `role="group"` and must use the same `id` passed to the parent
+ * folder's `childrenId` / `aria-controls`.
+ */
+export declare function SidebarTreeGroup({ children, id, className }: TreeGroupProps): JSX.Element;
+export {};
+//# sourceMappingURL=SidebarTree.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarTree.d.ts","sourceRoot":"","sources":["../../../src/components/SidebarItem/SidebarTree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,UAAU,SAAS;IACjB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,SAAS,EACV,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAMzB;AAED,UAAU,cAAc;IACtB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAMzF"}

package/dist/components/SidebarItem/SidebarTree.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+import { cn } from '../utils.js';
+/**
+ * Accessible tree container for nested sidebar folder hierarchies.
+ *
+ * Wrap folder rows rendered with {@link SidebarFolderItem} `as="li"` and
+ * `treeItem` so each row exposes `role="treeitem"` with expand/collapse state.
+ *
+ * @example
+ * ```tsx
+ * <SidebarTree aria-label="Collections">
+ *   <SidebarFolderItem as="li" name="Auth" expanded childrenId="auth-children" />
+ *   <SidebarTreeGroup id="auth-children">
+ *     <SidebarRequestItem as="li" name="Login" method="POST" />
+ *   </SidebarTreeGroup>
+ * </SidebarTree>
+ * ```
+ */
+export function SidebarTree({ children, 'aria-label': ariaLabel, className }) {
+    return (_jsx("ul", { role: "tree", "aria-label": ariaLabel, className: cn('m-0 list-none p-0', className), children: children }));
+}
+/**
+ * Child region for an expanded folder treeitem.
+ *
+ * Renders `role="group"` and must use the same `id` passed to the parent
+ * folder's `childrenId` / `aria-controls`.
+ */
+export function SidebarTreeGroup({ children, id, className }) {
+    return (_jsx("ul", { role: "group", id: id, className: cn('m-0 list-none p-0', className), children: children }));
+}

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

@@ -1,9 +1,13 @@
-import type { JSX, MouseEvent, ReactNode } from 'react';
+import type { JSX, KeyboardEvent, MouseEvent, ReactNode } from 'react';
 interface Props {
     /**
      * Stable dnd-kit sortable id for this row.
      */
     id: string;
+    /**
+     * Row container element.
+     */
+    as?: 'div' | 'li';
     /**
      * Row container class names.
      */
@@ -24,12 +28,27 @@ interface Props {
      * Called when the user right-clicks the row container.
      */
     onRowContextMenu?: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Optional listbox option or treeitem attributes forwarded from {@link SidebarItem}.
+     */
+    role?: 'option' | 'treeitem';
+    'aria-selected'?: 'true' | 'false';
+    'aria-label'?: string;
+    'aria-expanded'?: 'true' | 'false';
+    'aria-controls'?: string;
+    'aria-level'?: number;
+    'aria-setsize'?: number;
+    'aria-posinset'?: number;
+    tabIndex?: number;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    onDoubleClick?: (event: MouseEvent<HTMLElement>) => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
 }
 /**
- * Wraps a sidebar row with dnd-kit sortable drag behavior. The row itself is
- * the drag activator; nested controls should call
- * {@link stopSortableDragPointerDown} so expand and menu actions do not start a drag.
+ * Wraps a sidebar row with dnd-kit sortable drag behavior. Reordering is activated
+ * from a dedicated grip handle so keyboard users can focus it and use the keyboard
+ * sensor; listbox option interaction and nested row controls stay on the row container.
  */
-export declare function SortableSidebarItem({ id, className, dragHandleLabel, children, disabled, onRowContextMenu }: Props): JSX.Element;
+export declare function SortableSidebarItem({ id, as: Container, className, dragHandleLabel, children, disabled, onRowContextMenu, role, 'aria-selected': ariaSelected, 'aria-label': ariaLabel, 'aria-expanded': ariaExpanded, 'aria-controls': ariaControls, 'aria-level': ariaLevel, 'aria-setsize': ariaSetSize, 'aria-posinset': ariaPosInSet, tabIndex, onClick, onDoubleClick, onKeyDown }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=SortableSidebarItem.d.ts.map