@phreshos/react-ui 0.1.43 → 0.1.44

package/dist/grid-list.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { createContext, forwardRef, useContext, useMemo } from "react";
 import { GridList as AriaGridList, GridListHeader as AriaGridListHeader, GridListItem as AriaGridListItem, GridListSection as AriaGridListSection } from "react-aria-components";
 import { useControlMetrics } from "./control/control.js";
-import { separatorColor } from "./control/field.js";
 import { itemSurface, SelectionMark } from "./control/item.js";
 import { ariaSelection } from "./control/selection.js";
 import { surfaceRender } from "./control/surface-render.js";
@@ -31,18 +30,24 @@ const GridListRootImplementation = forwardRef(function GridList(properties, ref)
                     ...style
                 } }) }) });
 });
-/** One card. It holds whatever it is given, shows its edge at rest, and a check in its corner when selected. */
+/** One card. It holds whatever it is given, and shows a check in its corner when selected. */
 const GridListItemImplementation = forwardRef(function GridListItem({ children, className, color, disabled = false, style, textValue, ...properties }, ref) {
     const inherited = useGridListStyle();
     const itemColor = color ?? inherited.color;
     const { metrics } = inherited;
-    return _jsx(AriaGridListItem, { ...properties, ref: ref, textValue: textValue ?? (typeof children === "string" ? children : undefined), className: className, isDisabled: disabled, render: surfaceRender("div", state => itemSurface(metrics.visual, itemColor, {
-            selected: state.isSelected,
-            hovered: state.isHovered,
-            pressed: state.isPressed,
-            focusVisible: state.isFocusVisible,
-            disabled: state.isDisabled
-        }, metrics.radius)), style: {
+    return _jsx(AriaGridListItem, { ...properties, ref: ref, textValue: textValue ?? (typeof children === "string" ? children : undefined), className: className, isDisabled: disabled, render: surfaceRender("div", state => ({
+            ...itemSurface(metrics.visual, itemColor, {
+                selected: state.isSelected,
+                hovered: state.isHovered,
+                pressed: state.isPressed,
+                focusVisible: state.isFocusVisible,
+                disabled: state.isDisabled
+            }, metrics.radius),
+            // Unlike a list row, a card is a whole Surface: flat, in the default color at rest, in its
+            // selection color once selected, with the default material in both.
+            ...(state.isSelected ? {} : { color: "default" }),
+            material: undefined
+        })), style: {
             position: "relative",
             display: "grid",
             alignContent: "start",
@@ -54,15 +59,7 @@ const GridListItemImplementation = forwardRef(function GridListItem({ children,
             userSelect: "none",
             outlineOffset: -1,
             ...style
-        }, children: state => _jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", style: {
-                        position: "absolute",
-                        inset: 0,
-                        // The card's own radius: the edge sits inside the grid cell, not directly in the card.
-                        borderRadius: metrics.radius,
-                        border: `1px solid ${separatorColor(metrics)}`,
-                        opacity: state.isSelected ? 0 : 1,
-                        pointerEvents: "none"
-                    } }), typeof children === "function" ? children(state) : children, _jsx("span", { style: { position: "absolute", insetBlockStart: metrics.inset, insetInlineEnd: metrics.inset, display: "flex" }, children: _jsx(SelectionMark, { visible: state.isSelected }) })] }) });
+        }, children: state => _jsxs(_Fragment, { children: [typeof children === "function" ? children(state) : children, _jsx("span", { style: { position: "absolute", insetBlockStart: metrics.inset, insetInlineEnd: metrics.inset, display: "flex" }, children: _jsx(SelectionMark, { visible: state.isSelected }) })] }) });
 });
 /** A Section spans the whole grid and lays its own Items out in the same columns. */
 const GridListSectionImplementation = forwardRef(function GridListSection({ className, style, ...properties }, ref) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phreshos/react-ui",
-  "version": "0.1.43",
+  "version": "0.1.44",
   "description": "React components for coherent PhreshOS Program interfaces.",
   "type": "module",
   "sideEffects": false,