@pathscale/ui 2.11.6 → 2.11.7

package/dist/components/_shared/overlayHost.css

@@ -0,0 +1,44 @@
+/*
+ * The containing block every component that owns a non-portaled overlay needs.
+ *
+ * One definition rather than one per component, for the same reason
+ * `material.css` exists: Dropdown, Select, Popover, Tooltip, Dialog, Drawer and
+ * anything else that opens a floating layer all need exactly this, and copying
+ * a one-line rule into seven files is seven places to be wrong in.
+ *
+ * ## What it is for
+ *
+ * These overlays are `position: fixed` and live inside their owning component's
+ * subtree rather than in a portal. (Portals are what we moved *away* from: under
+ * Blitz a portal makes a transient semantic subtree, so an option can paint for
+ * one frame and vanish before the next sibling opens.) A fixed child positioned
+ * in viewport coordinates routinely lands far outside its parent's box: a
+ * 220x239 dropdown menu under a 72x28 pill trigger overhangs by ~267px.
+ *
+ * A renderer resolves a pointer by descending the box tree, and it descends into
+ * a child that escaped its parent's bounds only when the parent carries the
+ * hoisted-content area that a *stacking context* provides. `position: relative`
+ * alone does not create one unless it also carries a `z-index`. Without a
+ * stacking context the overlay paints, reports itself visible to the semantic
+ * tree, and silently takes no clicks: hit-testing rejects the descent before it
+ * ever reaches the item.
+ *
+ * That failure is invisible to any check that activates a node semantically
+ * rather than by pointer, which is how it shipped: the menu was addressable and
+ * the value changed, so the check passed while a real mouse could not click it.
+ *
+ * `isolation: isolate` exists precisely to create a stacking context with no
+ * other visual effect, which is why it is the property used here rather than a
+ * `z-index` that would also reorder painting.
+ *
+ * ## How to use it
+ *
+ * Import this file and put `ui-overlay-host` on the component's root, alongside
+ * whatever positioning that root already sets.
+ */
+@layer components {
+  .ui-overlay-host {
+    position: relative;
+    isolation: isolate;
+  }
+}

package/dist/components/dropdown/Dropdown.css

@@ -1,3 +1,5 @@
+@import "../_shared/overlayHost.css";
+
 @layer components {
   .dropdown {
     position: relative;

package/dist/components/dropdown/Dropdown.recipe.d.ts

@@ -1,5 +1,5 @@
 export declare const CLASSES: {
-    readonly base: "dropdown";
+    readonly base: "dropdown ui-overlay-host";
     readonly slot: {
         readonly trigger: "dropdown__trigger";
         readonly popover: "dropdown__popover";

package/dist/components/dropdown/Dropdown.recipe.js

@@ -1,6 +1,6 @@
 import { recipe } from "../../lib/layouts/index.js";
 const CLASSES = {
-    base: "dropdown",
+    base: "dropdown ui-overlay-host",
     slot: {
         trigger: "dropdown__trigger",
         popover: "dropdown__popover",

package/dist/components/select/Select.css

@@ -1,3 +1,5 @@
+@import "../_shared/overlayHost.css";
+
 @layer components {
   .ui-select {
     position: relative;
@@ -162,8 +164,7 @@
     pointer-events: none;
     transition:
       opacity 150ms cubic-bezier(0.22, 1, 0.36, 1),
-      transform 150ms cubic-bezier(0.22, 1, 0.36, 1),
-      visibility 150ms ease;
+      transform 150ms cubic-bezier(0.22, 1, 0.36, 1);
   }
 
   .ui-select__popover[data-open="true"] {

package/dist/components/select/Select.generated.d.ts

@@ -1,6 +1,6 @@
 import "./Select.css";
 import { type Component } from "solid-js";
-import { type JSX } from "@solidjs/web";
+import type { JSX } from "@solidjs/web";
 import { type OverlayPlacement } from "../_shared/overlayPosition";
 import type { UIBaseProps, State } from "../vocabulary";
 type SelectKey = string | number;

package/dist/components/select/Select.generated.js

@@ -1,4 +1,4 @@
-import { Portal, createComponent, insert, memo, mergeProps, ref, spread, template } from "@solidjs/web";
+import { createComponent, insert, memo, mergeProps, ref, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Select.css";
 import { createContext, createMemo, createSignal, createTrackedEffect, createUniqueId, omit, onCleanup, onSettled, useContext } from "solid-js";
@@ -502,36 +502,32 @@ const __solidLayoutSelectPopover = (_stable, p)=>{
             ...overlayStyle
         };
     };
-    return createComponent(Portal, {
-        get children () {
-            var _el$19 = _tmpl$();
-            var _ref$ = ctx?.setPopoverRef;
-            ("function" == typeof _ref$ || Array.isArray(_ref$)) && ref(()=>_ref$, _el$19);
-            spread(_el$19, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.slot.popover, p.class)
-                }), {
-                get ["data-theme"] () {
-                    return p.dataTheme;
-                },
-                "data-slot": "ui-select-popover",
-                get ["data-open"] () {
-                    return ctx?.open() ? "true" : "false";
-                },
-                get ["data-placement"] () {
-                    return overlayPosition.placement();
-                },
-                get style () {
-                    return popoverStyle();
-                },
-                onPointerDown: (event)=>{
-                    invokeEventHandler(p.onPointerDown, event);
-                    if (!event.defaultPrevented) event.stopPropagation();
-                }
-            }), true);
-            insert(_el$19, ()=>p.children);
-            return _el$19;
+    var _el$19 = _tmpl$();
+    var _ref$ = ctx?.setPopoverRef;
+    ("function" == typeof _ref$ || Array.isArray(_ref$)) && ref(()=>_ref$, _el$19);
+    spread(_el$19, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.slot.popover, p.class)
+        }), {
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        "data-slot": "ui-select-popover",
+        get ["data-open"] () {
+            return ctx?.open() ? "true" : "false";
+        },
+        get ["data-placement"] () {
+            return overlayPosition.placement();
+        },
+        get style () {
+            return popoverStyle();
+        },
+        onPointerDown: (event)=>{
+            invokeEventHandler(p.onPointerDown, event);
+            if (!event.defaultPrevented) event.stopPropagation();
         }
-    });
+    }), true);
+    insert(_el$19, ()=>p.children);
+    return _el$19;
 };
 const SelectPopover = defineComponent({
     recipe: componentRecipe,

package/dist/components/select/Select.recipe.d.ts

@@ -1,5 +1,5 @@
 export declare const CLASSES: {
-    readonly base: "ui-select";
+    readonly base: "ui-select ui-overlay-host";
     readonly flag: {
         readonly fullWidth: "ui-select--full-width";
     };

package/dist/components/select/Select.recipe.js

@@ -1,6 +1,6 @@
 import { recipe } from "../../lib/layouts/index.js";
 const CLASSES = {
-    base: "ui-select",
+    base: "ui-select ui-overlay-host",
     flag: {
         fullWidth: "ui-select--full-width"
     },

package/dist/layouts.manifest.json

@@ -1,7 +1,7 @@
 {
   "format": "solid-layouts-library-v2",
   "package": "@pathscale/ui",
-  "version": "2.11.6",
+  "version": "2.11.7",
   "components": {
     "Accordion": {
       "kind": "embedded"

package/dist/purge-manifest.json

@@ -11255,7 +11255,8 @@
       "component": "Select",
       "classes": {
         "always": [
-          "ui-select"
+          "ui-select",
+          "ui-overlay-host"
         ],
         "byProp": {
           "fullWidth": [
@@ -15150,7 +15151,8 @@
       "component": "Dropdown",
       "classes": {
         "always": [
-          "dropdown"
+          "dropdown",
+          "ui-overlay-host"
         ],
         "byProp": {
           "slot": {

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@pathscale/ui",
-  "version": "2.11.6",
+  "version": "2.11.7",
   "author": "pathscale",
   "repository": {
     "type": "git",
     "url": "https://github.com/pathscale/ui"
   },
   "license": "MIT",
-  "description": "Highly opinionated SolidJS component library — batteries and kitchen sink included, but optimized and shiny.",
+  "description": "Highly opinionated SolidJS component library \u2014 batteries and kitchen sink included, but optimized and shiny.",
   "files": [
     "dist"
   ],
@@ -73,27 +73,30 @@
     "@rsbuild/core": "^2.0.9",
     "@rsbuild/plugin-solid": "^1.2.1",
     "@rslib/core": "^0.22.0",
-    "@solidjs/h": "2.0.0-rc.0",
+    "@solidjs/h": "^2.0.0-rc.0",
     "@standard-schema/spec": "^1.1.0",
+    "@tailwindcss/postcss": "^4.3.3",
     "@types/bun": "^1.3.14",
-    "babel-preset-solid": "2.0.0-rc.0",
+    "babel-preset-solid": "^2.0.0-rc.0",
     "cally": "^0.8.0",
     "cssnano": "^7.1.9",
+    "popmotion": "^11.0.5",
     "postcss": "^8.5.15",
     "postcss-cli": "^11.0.1",
     "postcss-selector-parser": "^7.1.1",
-    "rsbuild-plugin-solid-layouts": "0.2.1",
-    "solid-js": "2.0.0-rc.0",
-    "solid-layouts": "0.2.0",
-    "solid-layouts-oxc": "0.2.1",
+    "rsbuild-plugin-solid-layouts": "^0.2.1",
+    "solid-js": "^2.0.0-rc.0",
+    "solid-layouts": "^0.2.1",
+    "solid-layouts-oxc": "^0.2.1",
     "svgo": "^3.3.3",
+    "tailwindcss": "^4.3.3",
     "typescript": "^6.0.3"
   },
   "overrides": {
-    "babel-preset-solid": "2.0.0-rc.0"
+    "babel-preset-solid": "^2.0.0-rc.0"
   },
   "dependencies": {
-    "@solidjs/web": "2.0.0-rc.0",
+    "@solidjs/web": "^2.0.0-rc.0",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.6.0"
   },
@@ -121,14 +124,19 @@
     "clean": "rm -rf dist node_modules",
     "format": "bun biome format --write",
     "lint": "bun run lint:code && bun run lint:layouts",
-    "lint:code": "bun biome lint --write",
+    "lint:code": "bun biome lint --write src qa",
     "lint:layouts": "solid-layouts-lint",
     "check": "bun run layouts:generate && bun run scripts/check-contracts.ts",
     "check:package": "bun run scripts/check-package.ts",
     "next-version": "bun run scripts/next-version.ts",
     "smoke": "bun run scripts/smoke-consumer.ts",
+    "qa:checks": "bun run tests/qa-harness/generate-checks.ts",
+    "qa:entries": "bun run tests/qa-harness/generate-entries.ts",
+    "qa:dev": "rsbuild dev --config tests/qa-harness/rsbuild.config.ts",
+    "qa:build": "bun run qa:entries && rsbuild build --config tests/qa-harness/rsbuild.config.ts",
     "test": "bun test --conditions=browser",
-    "check:api": "bun run scripts/check-api-contract.ts"
+    "check:api": "bun run scripts/check-api-contract.ts",
+    "qa:lint": "bun biome lint tests/qa-harness"
   },
   "sideEffects": [
     "**/*.css"