@phreshos/react-ui 0.1.44 → 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/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.44",
+  "version": "0.1.45",
   "description": "React components for coherent PhreshOS Program interfaces.",
   "type": "module",
   "sideEffects": false,