@pathscale/ui 2.11.7 → 2.11.8

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

@@ -12,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;
@@ -36,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/layouts.manifest.json

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

package/dist/purge-manifest.json

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

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@pathscale/ui",
-  "version": "2.11.7",
+  "version": "2.11.8",
   "author": "pathscale",
   "repository": {
     "type": "git",
     "url": "https://github.com/pathscale/ui"
   },
   "license": "MIT",
-  "description": "Highly opinionated SolidJS component library \u2014 batteries and kitchen sink included, but optimized and shiny.",
+  "description": "Highly opinionated SolidJS component library — batteries and kitchen sink included, but optimized and shiny.",
   "files": [
     "dist"
   ],
@@ -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"