@xenosystem/components 0.8.0 → 0.8.1

package/dist/catalog.json

@@ -1078,7 +1078,7 @@
         {
           "name": "RowList",
           "file": "rows.tsx",
-          "doc": "A vertical list container for {@link Row}s.\r\n\n@example\r\n```tsx\r\n<RowList role=\"listbox\" aria-label=\"Layers\">\r\n  {items.map((it) => <Row key={it.id} …/>)}\r\n</RowList>\r\n```",
+          "doc": "A vertical list container for {@link Row}s.\n\n@example\n```tsx\n<RowList role=\"listbox\" aria-label=\"Layers\">\n  {items.map((it) => <Row key={it.id} …/>)}\n</RowList>\n```",
           "props": "RowListProps",
           "propList": [
             {
@@ -1104,7 +1104,7 @@
         {
           "name": "Row",
           "file": "rows.tsx",
-          "doc": "One dense list row.\r\n\nInteraction contract: when `onClick` is supplied the row becomes keyboard-operable\r\n(`tabIndex=0`, Enter/Space activate). When `disabled`, pointer and keyboard activation are both\r\nsuppressed — the handler is not called, rather than being called and ignored.\r\n\n@example\r\n```tsx\r\n<Row\r\n  icon={<EyeIcon />}\r\n  label={layer.name}\r\n  meta={layer.kind}\r\n  trailing={<Badge>{layer.opacity}%</Badge>}\r\n  depth={layer.depth}\r\n  selected={layer.id === selectedId}\r\n  onClick={() => select(layer.id)}\r\n/>\r\n```",
+          "doc": "One dense list row.\n\nInteraction contract: when `onClick` is supplied the row becomes keyboard-operable\n(`tabIndex=0`, Enter/Space activate). When `disabled`, pointer and keyboard activation are both\nsuppressed — the handler is not called, rather than being called and ignored.\n\n@example\n```tsx\n<Row\n  icon={<EyeIcon />}\n  label={layer.name}\n  meta={layer.kind}\n  trailing={<Badge>{layer.opacity}%</Badge>}\n  depth={layer.depth}\n  selected={layer.id === selectedId}\n  onClick={() => select(layer.id)}\n/>\n```",
           "props": "RowProps",
           "propList": [
             {

package/dist/chrome/index.d.ts

@@ -376,7 +376,6 @@ declare function iconButtonClass(state?: {
  * @module
  */
 
-/** Props for {@link RowList}. */
 interface RowListProps extends HTMLAttributes<HTMLDivElement> {
     /** Rows. */
     children?: ReactNode;

package/dist/chrome/index.js

@@ -1470,7 +1470,9 @@ function Section({
 }
 
 // src/chrome/rows.tsx
+import { createContext, useContext } from "react";
 import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var RowListContext = createContext(null);
 function RowList({
   children,
   divided = false,
@@ -1479,7 +1481,7 @@ function RowList({
   ...rest
 }) {
   usePanelPrimitives();
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx4(RowListContext.Provider, { value: role, children: /* @__PURE__ */ jsx4(
     "div",
     {
       role,
@@ -1487,7 +1489,7 @@ function RowList({
       ...rest,
       children
     }
-  );
+  ) });
 }
 function Row({
   icon,
@@ -1509,6 +1511,9 @@ function Row({
 }) {
   usePanelPrimitives();
   const interactive = onClick != null && !disabled;
+  const listRole = useContext(RowListContext);
+  const resolvedRole = role ?? (listRole === "listbox" ? "option" : listRole === "tree" ? "treeitem" : listRole ? "listitem" : void 0);
+  const selectable = resolvedRole === "option" || resolvedRole === "treeitem";
   const handleKeyDown = (e) => {
     onKeyDown?.(e);
     if (!interactive || e.defaultPrevented) return;
@@ -1520,8 +1525,9 @@ function Row({
   return /* @__PURE__ */ jsxs4(
     "div",
     {
-      role: role ?? (selected !== void 0 ? "option" : "listitem"),
-      "aria-selected": selected,
+      role: resolvedRole,
+      "aria-selected": selectable ? selected : void 0,
+      "aria-current": !selectable && selected ? true : void 0,
       "aria-disabled": disabled || void 0,
       tabIndex: interactive ? 0 : void 0,
       className: rowClass({ selected, active, disabled, interactive }, className),
@@ -1786,14 +1792,14 @@ function gallery() {
     "line ",
     i + 1
   ] }, i)) }));
-  form("RowList", "divided", () => /* @__PURE__ */ jsxs7(RowList, { divided: true, children: [
-    /* @__PURE__ */ jsx7(Row, { label: "Background", meta: "raster" }),
+  form("RowList", "divided", () => /* @__PURE__ */ jsxs7(RowList, { divided: true, role: "listbox", "aria-label": "Layers", children: [
+    /* @__PURE__ */ jsx7(Row, { label: "Background", meta: "raster", selected: false }),
     /* @__PURE__ */ jsx7(Row, { label: "Title", meta: "text", selected: true }),
-    /* @__PURE__ */ jsx7(Row, { label: "Logo", meta: "vector" })
+    /* @__PURE__ */ jsx7(Row, { label: "Logo", meta: "vector", selected: false })
   ] }));
-  form("Row", "default", () => /* @__PURE__ */ jsx7(Row, { icon: /* @__PURE__ */ jsx7(IconFrame, { icon: /* @__PURE__ */ jsx7(SearchGlyph, {}) }), label: "Layer", meta: "raster", trailing: /* @__PURE__ */ jsx7(Badge, { children: "3" }) }));
-  form("Row", "selected", () => /* @__PURE__ */ jsx7(Row, { label: "Layer", meta: "raster", selected: true }));
-  form("Row", "disabled", () => /* @__PURE__ */ jsx7(Row, { label: "Layer", meta: "raster", disabled: true }));
+  form("Row", "default", () => /* @__PURE__ */ jsx7(RowList, { "aria-label": "Layers", children: /* @__PURE__ */ jsx7(Row, { icon: /* @__PURE__ */ jsx7(IconFrame, { icon: /* @__PURE__ */ jsx7(SearchGlyph, {}) }), label: "Layer", meta: "raster", trailing: /* @__PURE__ */ jsx7(Badge, { children: "3" }) }) }));
+  form("Row", "selected", () => /* @__PURE__ */ jsx7(RowList, { role: "listbox", "aria-label": "Layers", children: /* @__PURE__ */ jsx7(Row, { label: "Layer", meta: "raster", selected: true }) }));
+  form("Row", "disabled", () => /* @__PURE__ */ jsx7(RowList, { "aria-label": "Layers", children: /* @__PURE__ */ jsx7(Row, { label: "Layer", meta: "raster", disabled: true }) }));
   form("Section", "default", () => /* @__PURE__ */ jsx7(Section, { title: "Fill", children: /* @__PURE__ */ jsx7("p", { style: { margin: 0 }, children: "Solid \xB7 white" }) }));
   form("Section", "badge-actions", () => /* @__PURE__ */ jsx7(Section, { title: "Effects", badge: /* @__PURE__ */ jsx7(Badge, { children: "2" }), actions: /* @__PURE__ */ jsx7(TextButton, { onClick: noop, children: "Add" }), children: /* @__PURE__ */ jsx7("p", { style: { margin: 0 }, children: "Drop shadow" }) }));
   door("EmptyState", "default", () => /* @__PURE__ */ jsx7(EmptyState, { title: "No runs yet", hint: "Trigger a workflow and its runs appear here." }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenosystem/components",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "XENO Components \u2014 rung 2 of the front ladder: molecules composed from @xenosystem/elements, with no host contract. Families as subpaths: /auth, /navigation, /feedback, /data.",
   "license": "UNLICENSED",
   "type": "module",