test(color-wheel): guard native first paint

.github/workflows/ci.yml

@@ -31,33 +31,21 @@ jobs:
 
       - uses: dtolnay/rust-toolchain@stable
 
-      - name: Checkout ps-qa
-        uses: actions/checkout@v4
-        with:
-          repository: pathscale/ps-qa
-          # Pin the reviewed sweep schema. The source branch may be deleted
-          # when its PR merges, but this release gate must remain reproducible.
-          ref: 08007a073164cf3f54214aee2471f2c6c3f939b1
-          path: .qa/ps-qa
-
-      - name: Checkout qa-inspect-host
-        uses: actions/checkout@v4
-        with:
-          repository: pathscale/qa-inspect-host
-          # Pin the reviewed native text-input host for the same reason.
-          ref: b4212ef5cb73e5d2639b9b210672aa96e98cf9a3
-          path: .qa/qa-inspect-host
-
       - uses: Swatinem/rust-cache@v2
         with:
-          workspaces: |
-            .qa/ps-qa
-            .qa/qa-inspect-host
+          # A UI assertion failing after native tool installation must not make
+          # the next corrective run rebuild the observability stack from zero.
+          cache-on-failure: true
 
-      - name: Build native QA tools
+      # Track the current ps-qa release so UI coverage cannot silently remain
+      # on an obsolete harness. Do not inherit a tool crate's packaged lockfile.
+      - name: Install native QA tools
+        env:
+          # cargo install otherwise builds in disposable temporary directories,
+          # which leaves rust-cache nothing useful to restore on the next run.
+          CARGO_TARGET_DIR: target/qa-tools
         run: |
-          cargo build --release --manifest-path .qa/ps-qa/Cargo.toml
-          cargo build --release --manifest-path .qa/qa-inspect-host/Cargo.toml
+          cargo install ps-qa qa-inspect-host
 
       - name: Install Dependencies
         run: bun install
@@ -73,7 +61,7 @@ jobs:
         run: bun run check
 
       - name: Type Check
-        run: npx tsc --noEmit
+        run: bunx tsc --noEmit
 
       - name: Build
         run: bun run build
@@ -83,8 +71,6 @@ jobs:
       # minutes while preserving a clean document between components.
       - name: Rendered component outcomes
         env:
-          QA_PS_QA: ${{ github.workspace }}/.qa/ps-qa/target/release/ps-qa
-          QA_HOST: ${{ github.workspace }}/.qa/qa-inspect-host/target/release/qa-inspect-host
           # GitHub's shared macOS runner took 1.6-1.9s for outcomes that pass
           # locally under 1.25s. This widens scheduling deadlines only; every
           # declared rendered-state transition is still required.
@@ -94,7 +80,7 @@ jobs:
           bun run qa:entries
           git diff --exit-code -- tests/ps-qa tests/qa-harness/entries
           bun run qa:build
-          bash tests/qa-harness/run-all.sh
+          zsh tests/qa-harness/run-all.sh
 
       # Fails when docs/api-contract.md and the shipped types disagree, in
       # either direction. Never runs with --write: regenerating the document on

docs/api-contract.md

@@ -11,7 +11,7 @@ invisible for a day behind a doc that looked correct the whole time.
 When an API change is intentional, run `bun run check:api -- --write`, read the
 diff, and commit it. The diff is the review.
 
-184 components. An empty list means the component adds nothing beyond
+185 components. An empty list means the component adds nothing beyond
 HTML attributes and `UIBaseProps`; that is an assertion, not a gap.
 
 ---
@@ -182,7 +182,7 @@ HTML attributes and `UIBaseProps`; that is an assertion, not a gap.
 
 ### ColorWheelFlower
 
-`class mode palette`
+`class id mode palette`
 
 ### ComboBox
 
@@ -474,7 +474,7 @@ HTML attributes and `UIBaseProps`; that is an assertion, not a gap.
 
 ### LanguageSwitcher
 
-`align aria-label currentLanguageLabel i18n loadingLabel onLanguageChange optionsLabel`
+`align aria-label currentLanguageLabel i18n id loadingLabel onLanguageChange optionsLabel`
 
 ### Link
 
@@ -560,6 +560,10 @@ HTML attributes and `UIBaseProps`; that is an assertion, not a gap.
 
 `onChange page state total`
 
+### PanelToggle
+
+`aria-controls aria-label expanded id side`
+
 ### PasswordField
 
 `aria-describedby autocomplete autofocus class disabled hiddenIcon hideLabel id inputClass inputRef invalid label name onBlur onInput onVisibilityChange placeholder required showLabel startIcon value visibleIcon`

layouts.library.json

@@ -144,6 +144,7 @@
     "NoiseBackground",
     "PWAInstallPrompt",
     "Pagination",
+    "PanelToggle",
     "PasswordField",
     "PasswordRequirements",
     "Popover",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "2.11.8",
+  "version": "2.11.9",
   "author": "pathscale",
   "repository": {
     "type": "git",
@@ -75,6 +75,7 @@
     "@rsbuild/plugin-solid": "^1.2.1",
     "@rslib/core": "^0.22.0",
     "@solidjs/h": "^2.0.0-rc.0",
+    "@solidjs/web": "next",
     "@standard-schema/spec": "^1.1.0",
     "@tailwindcss/postcss": "^4.3.3",
     "@types/bun": "^1.3.14",
@@ -86,7 +87,7 @@
     "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-js": "next",
     "solid-layouts": "^0.2.1",
     "solid-layouts-oxc": "^0.2.1",
     "svgo": "^3.3.3",
@@ -97,12 +98,12 @@
     "babel-preset-solid": "^2.0.0-rc.0"
   },
   "dependencies": {
-    "@solidjs/web": "^2.0.0-rc.0",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.6.0"
   },
   "peerDependencies": {
     "@standard-schema/spec": "^1.0.0",
+    "@solidjs/web": ">=2.0.0-rc.0",
     "popmotion": "^11.0.5",
     "solid-js": ">=2.0.0-rc.0",
     "solid-layouts": "^0.2.0"
@@ -134,7 +135,7 @@
     "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",
+    "qa:build": "bun run build && bun run qa:checks && 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",
     "qa:lint": "bun biome lint tests/qa-harness"

rslib.config.ts

@@ -2,6 +2,20 @@ import { pluginBabel } from "@rsbuild/plugin-babel";
 import { pluginSolid } from "@rsbuild/plugin-solid";
 import { pluginSolidLayoutsLibrary } from "rsbuild-plugin-solid-layouts";
 import { defineConfig } from "@rslib/core";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const packageVersion = (name: string) =>
+  JSON.parse(readFileSync(resolve(__dirname, "node_modules", name, "package.json"), "utf8"))
+    .version as string;
+const solidVersion = packageVersion("solid-js");
+const solidWebVersion = packageVersion("@solidjs/web");
+
+if (solidVersion !== solidWebVersion || !solidVersion.startsWith("2.")) {
+  throw new Error(
+    `UI requires one matching Solid 2 runtime; resolved solid-js=${solidVersion}, @solidjs/web=${solidWebVersion}`,
+  );
+}
 
 export default defineConfig({
   source: {

src/components/color-wheel-flower/ColorWheelFlower.css

@@ -49,20 +49,55 @@
 
   .color-wheel-flower__dot {
     position: absolute;
-    transform: translate(-50%, -50%);
+    z-index: 1;
+  }
+
+  .color-wheel-flower__dot--pulsing {
+    z-index: 20;
+  }
+
+  .color-wheel-flower:not(.color-wheel-flower--disabled)
+    .color-wheel-flower__dot:hover,
+  .color-wheel-flower:not(.color-wheel-flower--disabled)
+    .color-wheel-flower__dot:focus-within {
+    z-index: 30;
   }
 
   .color-wheel-flower__dot-frame {
     position: relative;
     width: 32px;
     height: 32px;
+    margin-top: -16px;
+    margin-left: -16px;
   }
 
   .color-wheel-flower__dot-motion {
     position: relative;
     width: 100%;
     height: 100%;
-    will-change: transform, opacity;
+    opacity: 1;
+    transform: translate(0, 0) scale(1);
+    transform-origin: center;
+    transition: transform 100ms ease-out;
+  }
+
+  .color-wheel-flower:not(.color-wheel-flower--disabled)
+    .color-wheel-flower__dot:hover
+    .color-wheel-flower__dot-motion,
+  .color-wheel-flower:not(.color-wheel-flower--disabled)
+    .color-wheel-flower__dot:focus-within
+    .color-wheel-flower__dot-motion {
+    transform: translate(0, 0) scale(1.1);
+  }
+
+  .color-wheel-flower:not(.color-wheel-flower--disabled)
+    .color-wheel-flower__dot:active
+    .color-wheel-flower__dot-motion {
+    transform: translate(0, 0) scale(1.04);
+  }
+
+  .color-wheel-flower__dot--pulsing .color-wheel-flower__dot-motion {
+    animation: color-wheel-flower-pulse 220ms ease-out;
   }
 
   .color-wheel-flower__halo {
@@ -73,18 +108,35 @@
     bottom: -5px;
     border-radius: var(--radius-pill, 9999px);
     pointer-events: none;
+    opacity: 0;
     background: radial-gradient(
       circle,
       rgb(255 255 255 / 25%) 0%,
       rgb(255 255 255 / 0%) 70%
     );
+    transition: opacity 100ms ease-out;
+  }
+
+  .color-wheel-flower:not(.color-wheel-flower--disabled)
+    .color-wheel-flower__dot:hover
+    .color-wheel-flower__halo,
+  .color-wheel-flower:not(.color-wheel-flower--disabled)
+    .color-wheel-flower__dot:focus-within
+    .color-wheel-flower__halo {
+    opacity: 0.6;
+  }
+
+  .color-wheel-flower__dot--pulsing .color-wheel-flower__halo {
+    opacity: 0.35;
   }
 
   .color-wheel-flower__swatch {
     position: relative !important;
     z-index: 10;
     width: 100% !important;
     height: 100% !important;
+    border: 1px solid
+      color-mix(in srgb, var(--color-base-content) 72%, transparent) !important;
     border-radius: var(--radius-pill, 9999px) !important;
     background: var(--color-swatch-current) !important;
     transform: none !important;
@@ -120,6 +172,7 @@
 
   .color-wheel-flower__highlight {
     position: absolute;
+    z-index: 11;
     inset: 0;
     border-radius: var(--radius-pill, 9999px);
     border: 2px solid rgb(255 255 255 / 100%);
@@ -131,13 +184,41 @@
       box-shadow 300ms ease-out;
   }
 
-  .color-wheel-flower__highlight--hovered {
+  .color-wheel-flower:not(.color-wheel-flower--disabled)
+    .color-wheel-flower__dot:hover
+    .color-wheel-flower__highlight,
+  .color-wheel-flower:not(.color-wheel-flower--disabled)
+    .color-wheel-flower__dot:focus-within
+    .color-wheel-flower__highlight {
     opacity: 0.75;
     box-shadow: 0 0 6px rgb(255 255 255 / 45%);
+    transition: none;
   }
 
   .color-wheel-flower__highlight--pulsing {
     opacity: 0.45;
     box-shadow: 0 0 4px rgb(255 255 255 / 35%);
   }
+
+  @keyframes color-wheel-flower-pulse {
+    0%,
+    100% {
+      transform: translate(0, 0) scale(1);
+    }
+    55% {
+      transform: translate(0, 0) scale(1.12);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .color-wheel-flower__dot-motion,
+    .color-wheel-flower__halo,
+    .color-wheel-flower__highlight {
+      transition: none;
+    }
+
+    .color-wheel-flower__dot--pulsing .color-wheel-flower__dot-motion {
+      animation: none;
+    }
+  }
 }