dokril/harbor-net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Simplify rail motion and add routing help toggle
Build and Deploy Gateway / build-and-push (push) Successful in 35s
Details
Build and Deploy Gateway / deploy (push) Successful in 7s
Details

Browse Source
This commit is contained in:
dokril
2026-08-17 17:26:57 +03:00
parent 0a0a932057
commit dc1fd76c44
11 changed files with 91 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test/web/responsive-layout-contract.test.js
+9 -26
View File
@@ -139,36 +139,19 @@ test('secondary menus share one right rail and switch equal drawers as a vertica
assert.match(disabledRulesLabel, /opacity:\s*0/);
assert.match(disabledRulesLabel, /filter:\s*blur\(5px\)/);
assert.match(styles, /\.client-local-rules-toggle:disabled:hover span\s*\{[\s\S]*opacity:\s*1/);
assert.match(subscription, /client-rail-subscription-back[\s\S]*client-rail-subscription-front[\s\S]*client-rail-subscription-lines[\s\S]*client-rail-subscription-scan/);
assert.match(subscription, /client-rail-subscription-back[\s\S]*client-rail-subscription-front[\s\S]*client-rail-subscription-lines/);
assert.match(instructions, /client-rail-book-page-position is-left[\s\S]*client-rail-book-page is-left[\s\S]*client-rail-book-page-position is-right[\s\S]*client-rail-book-page is-right[\s\S]*client-rail-book-spine/);
assert.match(component, /<InstructionsToggle[\s\S]*<DevicesToggle[\s\S]*<DiagnosticsToggle[\s\S]*<RoutingToggle/);
assert.match(diagnosticsFeature, /client-rail-diagnostics-trace[\s\S]*client-rail-diagnostics-scan[\s\S]*client-rail-diagnostics-position[\s\S]*client-rail-diagnostics-glass/);
assert.match(devices, /client-rail-device-monitor[\s\S]*M5 19h5\.5M7 15v4[\s\S]*client-rail-device-phone[\s\S]*client-rail-device-link[\s\S]*M19 16v3h-5\.5[\s\S]*client-rail-device-bridge[\s\S]*M10\.5 19h3[\s\S]*client-rail-device-packet[\s\S]*M7 19h12/);
assert.match(diagnosticsFeature, /client-rail-diagnostics-trace[\s\S]*client-rail-diagnostics-position[\s\S]*client-rail-diagnostics-glass/);
assert.match(devices, /client-rail-device-monitor[\s\S]*M5 19h5\.5M7 15v4[\s\S]*client-rail-device-phone[\s\S]*client-rail-device-link[\s\S]*M19 16v3h-5\.5/);
assert.match(routing, /client-rail-rule-track[\s\S]*client-rail-rule-knob-position is-top[\s\S]*client-rail-rule-knob is-top[\s\S]*client-rail-rule-knob-position is-bottom[\s\S]*client-rail-rule-knob is-bottom/);
assert.match(styles, /\.client-rail-action:active:not\(:disabled\) svg \{[\s\S]*scale\(0\.94\)[\s\S]*120ms/);
assert.match(styles, /\.client-rail-action svg \{[\s\S]*stroke-width:\s*1\.75/);
assert.match(styles, /\.client-subscription-toggle\.is-open \.client-rail-subscription-back \{[\s\S]*translate\(1\.5px, -1px\)/);
assert.match(styles, /\.client-subscription-toggle\.is-open \.client-rail-subscription-front \{[\s\S]*translate\(-2px, 1px\)/);
assert.match(styles, /\.client-instructions-toggle\.is-open \.client-rail-book-page-position\.is-left \{[\s\S]*translateX\(-1\.25px\) rotate\(-2\.5deg\)/);
assert.match(styles, /\.client-instructions-toggle\.is-open \.client-rail-book-page-position\.is-right \{[\s\S]*translateX\(1\.25px\) rotate\(2\.5deg\)/);
assert.match(styles, /@keyframes client-rail-book-turn[\s\S]*scaleX\(0\.18\)[\s\S]*scaleX\(0\.55\)/);
assert.doesNotMatch(styles, /client-rail-info|stroke-dasharray:\s*0\.9 0\.1/);
assert.match(styles, /\.client-devices-toggle\.is-open \.client-rail-device-link \{[\s\S]*opacity:\s*1/);
assert.match(styles, /\.client-devices-toggle\.is-open \.client-rail-device-bridge \{[\s\S]*scaleX\(1\)/);
assert.match(styles, /\.client-diagnostics-toggle\.is-open \.client-rail-diagnostics-position \{[\s\S]*translate\(2px, -1px\) rotate\(-7deg\)/);
assert.match(styles, /@keyframes client-rail-glass-scan[\s\S]*translateX\(-3px\) rotate\(6deg\)[\s\S]*translateX\(1\.5px\) rotate\(-3deg\)/);
assert.match(routing, /client-rail-rule-knob is-top" cx="15"[\s\S]*client-rail-rule-knob is-bottom" cx="9"/);
assert.match(styles, /\.client-local-rules-toggle\.is-open \.client-rail-rule-knob-position\.is-top \{[\s\S]*translateX\(4px\)/);
assert.match(styles, /\.client-local-rules-toggle\.is-open \.client-rail-rule-knob-position\.is-bottom \{[\s\S]*translateX\(-4px\)/);
assert.match(styles, /@keyframes client-rail-rule-tune-top[\s\S]*translateX\(-2px\)/);
assert.match(styles, /@keyframes client-rail-rule-tune-bottom[\s\S]*translateX\(2px\)/);
assert.match(styles, /\.client-subscription-toggle\.is-open \.client-rail-subscription-scan,[\s\S]*\.client-diagnostics-toggle\.is-open \.client-rail-diagnostics-scan \{[\s\S]*client-rail-ambient-trace 10s 1\.1s/);
assert.match(styles, /@keyframes client-rail-ambient-trace[\s\S]*stroke-dashoffset: 1[\s\S]*stroke-dashoffset: 0/);
assert.match(styles, /--client-rail-state-duration:\s*340ms/);
assert.match(styles, /\.client-rail-action\.is-open \{[\s\S]*--client-rail-state-duration:\s*480ms/);
assert.match(styles, /transition: transform var\(--client-rail-state-duration\) cubic-bezier\(0\.16, 1, 0\.3, 1\)/);
assert.doesNotMatch(styles, /client-rail-info|client-rail-device-primary|client-rail-diagnostics-base|client-rail-rule-scan|client-rail-rule-pulse/);
assert.doesNotMatch(styles, /client-secondary-icon-motion|\.client-local-rules-toggle\.is-open svg\s*\{[^}]*rotate/);
assert.match(rule('.client-rail-action.is-open'), /color:\s*var\(--client-accent\)/);
assert.doesNotMatch(`${subscription}\n${devices}\n${diagnosticsFeature}`, /client-rail-(?:subscription-scan|device-bridge|device-packet|diagnostics-scan)/);
assert.doesNotMatch(styles, /client-rail-(?:ambient-trace|book-turn|glass-scan|rule-tune)|--client-rail-state-duration/);
assert.doesNotMatch(styles, /\.client-(?:subscription|instructions|devices|diagnostics|local-rules)-toggle\.is-open [^{]+\{[^}]*(?:transform|animation)/);
assert.doesNotMatch(styles, /\.client-rail-action:active|\.client-rail-action:hover,[\s\S]*?transform:\s*translateX\(-3px\)/);
assert.match(rule('.client-drawer'), /inset:\s*0 0 0 auto/);
assert.match(rule('.client-drawer'), /width:\s*min\(580px, 100vw\)/);
assert.match(rule('.client-drawer'), /transform:\s*translateX\(104%\)/);
@@ -271,7 +254,7 @@ test('responsive motion has a reduced-motion fallback', () => {
assert.match(reducedMotion, /\.client-drawer/);
assert.match(reducedMotion, /transition:\s*none/);
assert.match(reducedMotion, /animation:\s*none/);
assert.match(reducedMotion, /\.client-rail-action:active:not\(:disabled\) svg[\s\S]*transform:\s*none/);
assert.doesNotMatch(styles, /\.client-rail-action:active:not\(:disabled\) svg/);
});
test('tooltips stay opaque, above adjacent content, and do not stick after pointer clicks', () => {