@phreshos/react-ui 0.1.43 → 0.1.45

package/dist/document-theme.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Keeps the document's color scheme on the Theme of the nearest UIProvider,
+ * or on the browser's without one. It writes the Theme into the document's
+ * `<meta name="color-scheme">`, creating the element when the document has
+ * none, before the browser paints, and follows every change. It renders
+ * nothing; place it once, where the Theme that owns the page is provided.
+ *
+ * A page embedded in a frame needs its color scheme to match the frame's, or
+ * the browser paints the frame opaque instead of letting what is behind it
+ * show.
+ */
+export declare function DocumentTheme(): null;

package/dist/document-theme.js

@@ -0,0 +1,29 @@
+import { useLayoutEffect } from "react";
+import { usePreferences } from "./foundation/visual.js";
+/**
+ * Keeps the document's color scheme on the Theme of the nearest UIProvider,
+ * or on the browser's without one. It writes the Theme into the document's
+ * `<meta name="color-scheme">`, creating the element when the document has
+ * none, before the browser paints, and follows every change. It renders
+ * nothing; place it once, where the Theme that owns the page is provided.
+ *
+ * A page embedded in a frame needs its color scheme to match the frame's, or
+ * the browser paints the frame opaque instead of letting what is behind it
+ * show.
+ */
+export function DocumentTheme() {
+    const { theme } = usePreferences();
+    useLayoutEffect(() => {
+        const existing = document.head.querySelector('meta[name="color-scheme" i]');
+        const meta = existing ?? document.head.appendChild(Object.assign(document.createElement("meta"), { name: "color-scheme" }));
+        const previous = meta.content;
+        meta.content = theme;
+        return () => {
+            if (existing)
+                meta.content = previous;
+            else
+                meta.remove();
+        };
+    }, [theme]);
+    return null;
+}

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/dist/main.d.ts

@@ -6,6 +6,7 @@
  */
 export { appearanceLimits, defaultAppearance, type Appearance, type AppearanceColor, type AppearanceColors, type AppearanceMaterial, type AppearanceRange, type AppearanceShadow, type AppearanceTransaction, type AppearanceUpdate, type Easing, type ThemedValue } from "./foundation/appearance.js";
 export { UIProvider, type UIProviderProps } from "./foundation/provider.js";
+export { DocumentTheme } from "./document-theme.js";
 export { useAppearance, useBrowserPreferences, usePreferences, useThemedValue } from "./foundation/visual.js";
 export { useDirection, useDocumentDirection, type Direction } from "./foundation/direction.js";
 export type { Preferences, PreferencesUpdate, Theme } from "./foundation/preferences.js";

package/dist/main.js

@@ -6,6 +6,7 @@
  */
 export { appearanceLimits, defaultAppearance } from "./foundation/appearance.js";
 export { UIProvider } from "./foundation/provider.js";
+export { DocumentTheme } from "./document-theme.js";
 export { useAppearance, useBrowserPreferences, usePreferences, useThemedValue } from "./foundation/visual.js";
 export { useDirection, useDocumentDirection } from "./foundation/direction.js";
 export { Flex } from "./flex.js";

package/dist/tabs.js

@@ -21,7 +21,6 @@ const TabsRoot = forwardRef(function Tabs({ className, color = "default", defaul
                     gap: metrics.gap,
                     minWidth: 0,
                     fontFamily: "inherit",
-                    fontSize: metrics.fontSize,
                     ...style
                 } }) }) });
 });
@@ -29,7 +28,8 @@ const TabsRoot = forwardRef(function Tabs({ className, color = "default", defaul
 const TabsListImplementation = forwardRef(function TabsList({ className, style, ...properties }, ref) {
     const { color, material, metrics, orientation } = useTabsStyle();
     const selectedKey = useContext(TabListStateContext)?.selectedKey;
-    return _jsx(SelectionTrack, { metrics: metrics, color: color, material: material, orientation: orientation, selectedKey: selectedKey, className: className, style: style, children: _jsx(AriaTabList, { ...properties, ref: ref, "data-selection-list": "", style: selectionListStyle(orientation) }) });
+    // Only the Tabs take the Tabs' size: the Panels hold consumer content, which keeps its own.
+    return _jsx(SelectionTrack, { metrics: metrics, color: color, material: material, orientation: orientation, selectedKey: selectedKey, className: className, style: { fontSize: metrics.fontSize, ...style }, children: _jsx(AriaTabList, { ...properties, ref: ref, "data-selection-list": "", style: selectionListStyle(orientation) }) });
 });
 const TabsTab = forwardRef(function TabsTab({ children, className, disabled = false, style, ...properties }, ref) {
     const { color, metrics, orientation } = useTabsStyle();

package/package.json

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