@pathscale/ui 2.11.6 → 2.11.8

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/dock/Dock.generated.js

@@ -5,7 +5,7 @@ import { For, Show, createSignal, omit, onCleanup, onSettled } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import { CLASSES, componentRecipe } from "./Dock.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<div><div>"), _tmpl$3 = /*#__PURE__*/ template("<button>"), _tmpl$4 = /*#__PURE__*/ template("<a>"), _tmpl$5 = /*#__PURE__*/ template("<div><!><!>"), _tmpl$6 = /*#__PURE__*/ template("<div><button>"), _tmpl$7 = /*#__PURE__*/ template('<svg><path d="M4 6h16"></path><path d="M4 12h16"></path><path d="M4 18h16">');
-const prefersReducedMotion = "u" > typeof window && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+const prefersReducedMotion = "u" > typeof window && "function" == typeof window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 function createSpring(initial, opts = {}) {
     const mass = opts.mass ?? 1;
     const stiffness = opts.stiffness ?? 150;

package/dist/components/dropdown/Dropdown.css

@@ -1,3 +1,5 @@
+@import "../_shared/overlayHost.css";
+
 @layer components {
   .dropdown {
     position: relative;
@@ -10,6 +12,20 @@
     position: relative;
     isolation: isolate;
     display: inline-flex;
+    /*
+     * The border is inside the height a consumer asks for.
+     *
+     * There is no global `box-sizing` reset in this library, so this element
+     * was `content-box`: `height: 24px` set the *content* box and the 1px
+     * border on each side was added on top. AgencyZero's composer pill asks
+     * for `h-[24px]` and rendered at 28, measured on a running app, which is
+     * the sort of few-pixel drift that reads as a component quietly breaking
+     * its own contract.
+     *
+     * `border-box` makes an explicit height mean the height that lands on
+     * screen, which is what every caller already assumed.
+     */
+    box-sizing: border-box;
     min-height: 2.25rem;
     width: fit-content;
     align-items: center;
@@ -34,9 +50,26 @@
     background-color: var(--dropdown-trigger-bg);
     color: var(--dropdown-trigger-fg);
     border-color: var(--dropdown-trigger-border);
-    box-shadow:
+    /*
+     * The drop shadow is a variable so a caller can turn it off.
+     *
+     * `0 1px 2px` paints about 3px below the border box, and a shadow is not
+     * part of the box: an element declared `24px` occupies 24px of layout and
+     * reports bounds of 27.8. That is correct CSS and still wrong for a pill
+     * sized to sit inside a fixed-height composer row, where the visual result
+     * reads as the control quietly ignoring its own height. Measured on the
+     * running application: border-box 24.1, outer bounds 27.8, with border
+     * 0.9 and zero vertical padding - the whole 3.7px difference is this
+     * shadow.
+     *
+     * A variable rather than removal, because a dropdown on an ordinary
+     * surface wants the elevation. Set `--dropdown-trigger-shadow: none` on
+     * the trigger to opt out.
+     */
+    --dropdown-trigger-shadow:
       0 1px 2px rgb(var(--shadow-color, 0 0 0) / 6%),
       0 1px 0 oklch(100% 0 0 / 0.03) inset;
+    box-shadow: var(--dropdown-trigger-shadow);
     transition:
       transform 250ms cubic-bezier(0.22, 1, 0.36, 1),
       background-color 150ms ease,

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

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Dropdown.css";
-import type { JSX } from "@solidjs/web";
+import { type JSX } from "@solidjs/web";
 import { type OverlayPlacement } from "../_shared/overlayPosition";
 type DropdownAlign = "start" | "end";
 type DropdownPlacement = OverlayPlacement;

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

@@ -1,7 +1,7 @@
-import { createComponent, insert, mergeProps, ref, spread, template } from "@solidjs/web";
+import { Portal, createComponent, insert, mergeProps, ref, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Dropdown.css";
-import { Show, createContext, createSignal, createTrackedEffect, createUniqueId, omit, onCleanup, onSettled, useContext } from "solid-js";
+import { Show, createContext, createSignal, createTrackedEffect, createUniqueId, flush, omit, onCleanup, onSettled, useContext } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import { createOverlayPosition } from "../_shared/overlayPosition.js";
 import { CLASSES, componentRecipe } from "./Dropdown.recipe.js";
@@ -117,6 +117,7 @@ const __solidLayoutDropdownRoot = (_stable, p)=>{
             if (menuRef()?.contains(target)) return;
             if (triggerRef()?.contains(target)) return;
             setOpen(false);
+            flush();
         };
         document.addEventListener("pointerdown", handlePointerDown);
         return ()=>{
@@ -337,44 +338,48 @@ const __solidLayoutDropdownMenu = (_stable, p)=>{
             return ctx.open();
         },
         get children () {
-            var _el$6 = _tmpl$3(), _el$7 = _el$6.firstChild;
-            var _ref$ = ctx.setMenuRef;
-            "function" == typeof _ref$ || Array.isArray(_ref$) ? ref(()=>_ref$, _el$6) : ctx.setMenuRef = _el$6;
-            spread(_el$6, mergeProps(others, {
-                get id () {
-                    return ctx.menuId;
+            return createComponent(Portal, {
+                get children () {
+                    var _el$6 = _tmpl$3(), _el$7 = _el$6.firstChild;
+                    var _ref$ = ctx.setMenuRef;
+                    "function" == typeof _ref$ || Array.isArray(_ref$) ? ref(()=>_ref$, _el$6) : ctx.setMenuRef = _el$6;
+                    spread(_el$6, mergeProps(others, {
+                        get id () {
+                            return ctx.menuId;
+                        }
+                    }, ()=>({
+                            class: twMerge(CLASSES.slot.popover, p.class)
+                        }), {
+                        get role () {
+                            return p.role ?? "menu";
+                        },
+                        "data-slot": "dropdown-popover",
+                        get ["data-open"] () {
+                            return ctx.open() ? "true" : "false";
+                        },
+                        get ["data-align"] () {
+                            return p.align ?? "start";
+                        },
+                        get ["data-placement"] () {
+                            return overlayPosition.placement();
+                        },
+                        get ["aria-hidden"] () {
+                            return ctx.open() ? "false" : "true";
+                        },
+                        get style () {
+                            return menuStyle();
+                        },
+                        onKeyDown: handleKeyDown
+                    }), true);
+                    spread(_el$7, mergeProps(()=>({
+                            class: CLASSES.slot.menu
+                        }), {
+                        "data-slot": "dropdown-menu"
+                    }), true);
+                    insert(_el$7, ()=>p.children);
+                    return _el$6;
                 }
-            }, ()=>({
-                    class: twMerge(CLASSES.slot.popover, p.class)
-                }), {
-                get role () {
-                    return p.role ?? "menu";
-                },
-                "data-slot": "dropdown-popover",
-                get ["data-open"] () {
-                    return ctx.open() ? "true" : "false";
-                },
-                get ["data-align"] () {
-                    return p.align ?? "start";
-                },
-                get ["data-placement"] () {
-                    return overlayPosition.placement();
-                },
-                get ["aria-hidden"] () {
-                    return ctx.open() ? "false" : "true";
-                },
-                get style () {
-                    return menuStyle();
-                },
-                onKeyDown: handleKeyDown
-            }), true);
-            spread(_el$7, mergeProps(()=>({
-                    class: CLASSES.slot.menu
-                }), {
-                "data-slot": "dropdown-menu"
-            }), true);
-            insert(_el$7, ()=>p.children);
-            return _el$6;
+            });
         }
     });
 };

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.8",
   "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": {
@@ -15224,7 +15226,8 @@
           "--dropdown-trigger-bg-hover",
           "--dropdown-trigger-bg-pressed",
           "--dropdown-trigger-border",
-          "--dropdown-trigger-fg"
+          "--dropdown-trigger-fg",
+          "--dropdown-trigger-shadow"
         ],
         "referenced": [
           "--border",
@@ -15237,6 +15240,7 @@
           "--dropdown-trigger-bg-pressed",
           "--dropdown-trigger-border",
           "--dropdown-trigger-fg",
+          "--dropdown-trigger-shadow",
           "--focus-ring-offset",
           "--focus-ring-width",
           "--radius-pill",
@@ -34638,6 +34642,14 @@
           "Dropdown"
         ]
       },
+      "--dropdown-trigger-shadow": {
+        "declaredBy": [
+          "Dropdown"
+        ],
+        "referencedBy": [
+          "Dropdown"
+        ]
+      },
       "--color-swatch-current": {
         "declaredBy": [],
         "referencedBy": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "2.11.6",
+  "version": "2.11.8",
   "author": "pathscale",
   "repository": {
     "type": "git",
@@ -60,6 +60,7 @@
       "types": "./dist/motion/index.d.ts",
       "import": "./dist/motion/index.js"
     },
+    "./package.json": "./package.json",
     "./styles/*": "./dist/styles/*",
     "./dist/styles/*": "./dist/styles/*",
     "./index.css": "./dist/index.css"
@@ -73,27 +74,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 +125,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"