@raylang/elements 0.4.1 → 0.5.0

package/core/host.js

@@ -64,10 +64,11 @@ const INTERACTIVE = "button, a[href], input, select, textarea, label, summary, [
 /**
  * Makes `el` drag the window when the page runs under a host's title bar
  * (titlebar() is not null): it gets data-ray-drag, the attribute the std/ui
- * shell reads. The shell looks at the event's target, which a shadow root
- * retargets to its host, so for a pointer down on anything interactive
- * inside `el` (a button in its shadow root too) the attribute steps aside
- * until the pointer is up. Returns the function that undoes it.
+ * shell reads. The shell walks the event's composed path, but only spares
+ * buttons, links and form fields; for a pointer down on anything else
+ * interactive inside `el` (a tab, a summary, a [role=button] in a shadow
+ * root) the attribute steps aside until the pointer is up. Returns the
+ * function that undoes it.
  */
 export function dragRegion(el) {
   const guard = (e) => {

package/core/raylang.js

@@ -29,9 +29,8 @@ const MAC_BUTTONS = 78;
  * long to wait for that answer; `ray` replaces window.ray (tests).
  * `windowColors` (default true) keeps the window's background in the
  * theme's background color, so a resize or a reopen never shows the other
- * theme. The title bar is tinted too only when the window has its own bar
- * (not full_content) and the theme is light or dark: with "system" it stays
- * the system's, so the page keeps following the system.
+ * theme. The title bar is tinted too when the theme is light or dark: with
+ * "system" it stays the system's, so the page keeps following the system.
  */
 export function enableRaylang({ timeout = 2000, ray = globalThis.ray, windowColors = true } = {}) {
   if (ray !== globalThis.ray) return connect(ray, timeout, windowColors);
@@ -114,22 +113,20 @@ async function connect(ray, timeout, windowColors) {
   if (windowColors && ops.has("window_colors")) {
     // A title bar color also sets the window's appearance (macOS picks light
     // or dark by its luminance), which the page's prefers-color-scheme
-    // follows, and in a full_content window it brings back the opaque bar.
-    // So the bar is tinted only in a window with its own bar and a chosen
-    // theme (light or dark), and given back to the system once after that.
+    // follows. So the bar is tinted only for a chosen theme (light or dark),
+    // and given back to the system once after that. In a full_content window
+    // the bar stays transparent either way.
     let tinted = false;
     const paint = (theme) => {
       const background = hex(theme.background);
       if (!background) return;
       const colors = { background };
-      if (!host.titlebar) {
-        if (getTheme() !== "system") {
-          colors.titlebar = background;
-          tinted = true;
-        } else if (tinted) {
-          colors.titlebar = "";
-          tinted = false;
-        }
+      if (getTheme() !== "system") {
+        colors.titlebar = background;
+        tinted = true;
+      } else if (tinted) {
+        colors.titlebar = "";
+        tinted = false;
       }
       host.setWindowColors(colors).catch(() => {});
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raylang/elements",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Web components for any app, with raylang extras (shadcn/ui + Mantine inspired)",
   "license": "Apache-2.0",
   "keywords": ["web-components", "custom-elements", "design-system", "ui", "raylang"],