@pathscale/ui 2.6.2 → 2.6.4

package/dist/components/input/Input.generated.js

@@ -6,7 +6,7 @@ import { twMerge } from "../../lib/twMerge.js";
 import { CLASSES, componentRecipe } from "./Input.recipe.js";
 import { resolveState } from "../vocabulary.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<span>"), _tmpl$3 = /*#__PURE__*/ template("<div><input><!>"), _tmpl$4 = /*#__PURE__*/ template("<label>"), _tmpl$5 = /*#__PURE__*/ template("<p>");
-const InputContext = createContext();
+const InputContext = createContext(null);
 const __solidLayoutInputRoot = (_stable, p)=>{
     const others = omit(p, "children", "class", "size", "fullWidth", "state", "issues", "dataTheme");
     const baseId = createUniqueId();

package/dist/components/radio/Radio.css

@@ -82,10 +82,27 @@
     box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent) 22%, transparent);
   }
 
+  /*
+   * Hover has to reach a radio that carries its own indicator content.
+   *
+   * The second rule below is `:empty::before`, which is right for the dot this
+   * component draws itself: there is nothing to tint but the pseudo-element.
+   * A radio given real content — a colour swatch, an icon, a preview — has a
+   * non-empty indicator, so that half matched nothing, and the surviving half
+   * only moved `border-color` on `.radio__control`. Any consumer that also
+   * restyled the control's border then had no hover feedback at all: that is
+   * what happened to AgencyZero's colour wheel, where 31 petals gave no
+   * indication of which one the pointer was on.
+   *
+   * So the control lifts on hover as well. `transform` is the one channel a
+   * consumer's own border and background overrides cannot silently cancel, and
+   * it reads on a petal whose entire surface is already a colour.
+   */
   @media (hover: hover) {
     .radio:hover:not([data-selected="true"]):not([data-disabled="true"]) .radio__control,
     .radio[data-hovered="true"]:not([data-selected="true"]):not([data-disabled="true"]) .radio__control {
       border-color: color-mix(in oklab, var(--color-base-content) 24%, transparent);
+      transform: scale(1.12);
     }
 
     .radio:hover:not([data-selected="true"]):not([data-disabled="true"]) .radio__indicator:empty::before,

package/dist/components/switch/Switch.css

@@ -1,5 +1,6 @@
 @layer components {
   .switch {
+    --switch-travel: 2.5rem;
     position: relative;
     display: inline-flex;
     align-items: center;
@@ -64,9 +65,20 @@
       0 0 5px 0 rgb(var(--shadow-color, 0 0 0) / 2%),
       0 2px 10px 0 rgb(var(--shadow-color, 0 0 0) / 6%),
       0 0 1px 0 rgb(var(--shadow-color, 0 0 0) / 30%);
+    /*
+     * `transform`, not `margin`.
+     *
+     * Sliding the thumb by animating `margin-inline-start` re-runs layout on
+     * every frame of the 300ms travel, for the whole switch and whatever
+     * shares its formatting context. On a renderer where layout is the
+     * expensive phase that is what a toggle "not feeling smooth" is made of.
+     * A transform composites instead, so the same movement costs no layout at
+     * all, and `will-change` keeps it off the main thread.
+     */
     transition:
-      margin 300ms ease,
+      transform 300ms ease,
       background-color 200ms ease;
+    will-change: transform;
   }
 
   .switch__icon {
@@ -121,7 +133,7 @@
   }
 
   .switch[data-selected="true"] .switch__thumb {
-    margin-inline-start: calc(100% - 1.5rem);
+    transform: translateX(calc(var(--switch-travel, 2.5rem) - 1.625rem));
     box-shadow:
       0 0 5px 0 rgb(var(--shadow-color, 0 0 0) / 2%),
       0 2px 10px 0 rgb(var(--shadow-color, 0 0 0) / 6%),
@@ -157,7 +169,7 @@
   }
 
   .switch--sm[data-selected="true"] .switch__thumb {
-    margin-inline-start: calc(100% - 1.15625rem);
+    transform: translateX(calc(2rem - 1.28125rem));
   }
 
   /* ── Size: md (default) ── */
@@ -179,7 +191,7 @@
   }
 
   .switch--lg[data-selected="true"] .switch__thumb {
-    margin-inline-start: calc(100% - 1.84375rem);
+    transform: translateX(calc(3rem - 1.96875rem));
   }
 
   /* ── Color: default ── */

package/dist/layouts.manifest.json

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

package/dist/purge-manifest.json

@@ -14685,7 +14685,8 @@
           "--switch-control-bg-hover",
           "--switch-control-bg-pressed",
           "--switch-control-border",
-          "--switch-control-border-checked"
+          "--switch-control-border-checked",
+          "--switch-travel"
         ],
         "referenced": [
           "--border",
@@ -14709,7 +14710,8 @@
           "--switch-control-bg-hover",
           "--switch-control-bg-pressed",
           "--switch-control-border",
-          "--switch-control-border-checked"
+          "--switch-control-border-checked",
+          "--switch-travel"
         ]
       },
       "keyframes": {
@@ -34432,6 +34434,14 @@
           "Switch"
         ]
       },
+      "--switch-travel": {
+        "declaredBy": [
+          "Switch"
+        ],
+        "referencedBy": [
+          "Switch"
+        ]
+      },
       "--dropdown-trigger-bg": {
         "declaredBy": [
           "Dropdown"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "2.6.2",
+  "version": "2.6.4",
   "author": "pathscale",
   "repository": {
     "type": "git",