Keep hue slider thumb visible

Issue: #192
User-Visible: yes

demo/smoke_color_picker.mjs

@@ -53,6 +53,9 @@ const result = await page.evaluate(async () => {
     && hue.min === '0' && hue.max === '359' && hue.step === '1'
     && hueStyle.getPropertyValue('--hp-picker-hue-track').includes('linear-gradient')
     && hue.getBoundingClientRect().height >= 40;
+  const thumbShadow = hueStyle.getPropertyValue('--hp-picker-hue-thumb-shadow');
+  out.hueThumbContrastContract = thumbShadow.includes('0 0 0 2px')
+    && thumbShadow.includes('0 0 0 3px');
   ranges()[1].value = '100';
   ranges()[1].dispatchEvent(new Event('input', { bubbles: true, composed: true }));
   ranges()[2].value = '100';

docs/CHANGELOG.md

@@ -4,7 +4,8 @@
 
 - The House Plan color picker now draws the full spectrum directly on the Hue
   track, so the target colour family is visible before moving the slider. Mouse,
-  touch and keyboard values remain unchanged
+  touch and keyboard values remain unchanged, and a contrasting ring keeps the
+  slider visible over every hue
   ([#192](https://github.com/Matysh/houseplan-card/issues/192)).
 - Editor color controls now open a single House Plan picker with saturation,
   brightness, hue, exact HEX and opacity together. The nested browser color

docs/CHANGELOG.ru.md

@@ -10,7 +10,8 @@
 
 - Палитра House Plan теперь показывает полный спектр прямо на шкале «Оттенок»,
   поэтому нужную группу цветов видно ещё до движения ползунка. Значения и
-  управление мышью, касанием и клавиатурой не изменились
+  управление мышью, касанием и клавиатурой не изменились, а контрастный контур
+  сохраняет видимость ползунка на любом оттенке
   ([#192](https://github.com/Matysh/houseplan-card/issues/192)).
 - Выбор цвета в редакторах теперь сразу открывает единую палитру House Plan с
   насыщенностью, яркостью, оттенком, точным HEX и прозрачностью. Вложенный

docs/TESTING.md

@@ -86,9 +86,10 @@
       and native/fallback floating surfaces remain mutually exclusive with help
       [auto: `smoke_help_affordance.mjs`].
 - [ ] The Hue range keeps `0…359`, step 1 and its existing input events while its
-      WebKit/Blink and Gecko tracks expose the same cyclic spectrum; forced-colors
-      falls back to a system track [unit: `color-picker.test.mjs`, auto:
-      `smoke_color_picker.mjs`].
+      WebKit/Blink and Gecko tracks expose the same cyclic spectrum. A dual
+      theme-aware ring keeps the native thumb distinct from every hue, while
+      forced-colors falls back to system track/thumb rendering [unit:
+      `color-picker.test.mjs`, auto: `smoke_color_picker.mjs`].
 - [ ] The dark mobile and light desktop open-picker goldens are reviewed from the
       complete Linux artifact before a beta; baseline acceptance is not part of
       the implementation loop [golden: `decor-color-popover-mobile-ru`,

docs/USER-GUIDE.md

@@ -180,8 +180,9 @@ the tray scrolls horizontally instead of shrinking the plan.
 Where an editor offers a color sample, one click opens the House Plan color
 picker. Hue, saturation, brightness, an exact HEX value and opacity (when the
 setting supports it) are available together; there is no second browser color
-dialog. The Hue track shows the full colour spectrum at a glance. Changes remain
-a draft until the owning properties dialog is saved.
+dialog. The Hue track shows the full colour spectrum at a glance, with a
+contrasting ring keeping its slider visible. Changes remain a draft until the
+owning properties dialog is saved.
 
 <!-- docs-section: input -->
 

docs/USER-GUIDE.ru.md

@@ -189,8 +189,9 @@ title: План дома
 Если редактор показывает образец цвета, один клик открывает палитру House Plan.
 Оттенок, насыщенность, яркость, точное значение HEX и прозрачность (если она
 поддерживается этой настройкой) доступны вместе, без второго системного диалога
-браузера. Шкала «Оттенок» сразу показывает полный цветовой спектр. Изменения
-остаются черновиком до сохранения родительского диалога свойств.
+браузера. Шкала «Оттенок» сразу показывает полный цветовой спектр, а контрастный
+контур сохраняет видимость ползунка. Изменения остаются черновиком до сохранения
+родительского диалога свойств.
 
 <!-- docs-section: input -->
 

src/hp-color-opacity.ts

@@ -236,6 +236,9 @@ export class HpColorOpacity extends LitElement {
       --hp-picker-hue-track: linear-gradient(to right,
         #f00 0%, #ff0 16.667%, #0f0 33.333%, #0ff 50%,
         #00f 66.667%, #f0f 83.333%, #f00 100%);
+      --hp-picker-hue-thumb-shadow:
+        0 0 0 2px var(--card-background-color, #202126),
+        0 0 0 3px var(--primary-text-color, #fff);
     }
     .hue-range::-webkit-slider-runnable-track {
       height: 10px;
@@ -257,6 +260,14 @@ export class HpColorOpacity extends LitElement {
       border-radius: 999px;
       background: transparent;
     }
+    .hue-range::-webkit-slider-thumb {
+      border-radius: 50%;
+      box-shadow: var(--hp-picker-hue-thumb-shadow);
+    }
+    .hue-range::-moz-range-thumb {
+      border-radius: 50%;
+      box-shadow: var(--hp-picker-hue-thumb-shadow);
+    }
     input[type='text'],
     input[type='number'] {
       min-height: 40px;
@@ -308,6 +319,12 @@ export class HpColorOpacity extends LitElement {
         border-color: ButtonText;
         background: Canvas;
       }
+      .hue-range::-webkit-slider-thumb {
+        box-shadow: none;
+      }
+      .hue-range::-moz-range-thumb {
+        box-shadow: none;
+      }
     }
   `;
 

test/color-picker.test.mjs

@@ -58,6 +58,9 @@ test('the hue range exposes one cyclic spectrum without restyling other ranges',
   assert.match(component, /\.hue-range::\-webkit-slider-runnable-track\s*\{[\s\S]*?height:\s*10px;[\s\S]*?background:\s*var\(--hp-picker-hue-track\);/);
   assert.match(component, /\.hue-range::\-moz-range-track\s*\{[\s\S]*?height:\s*10px;[\s\S]*?background:\s*var\(--hp-picker-hue-track\);/);
   assert.match(component, /\.hue-range::\-moz-range-progress\s*\{[\s\S]*?background:\s*transparent;/);
+  assert.match(component, /\.hue-range::\-webkit-slider-thumb\s*\{[\s\S]*?border-radius:\s*50%;[\s\S]*?box-shadow:\s*var\(--hp-picker-hue-thumb-shadow\);/);
+  assert.match(component, /\.hue-range::\-moz-range-thumb\s*\{[\s\S]*?border-radius:\s*50%;[\s\S]*?box-shadow:\s*var\(--hp-picker-hue-thumb-shadow\);/);
+  assert.match(spectrum, /--hp-picker-hue-thumb-shadow:[\s\S]*?card-background-color[\s\S]*?primary-text-color/);
   assert.match(component, /@media \(forced-colors:\s*active\)[\s\S]*?background:\s*Canvas;/);
   assert.match(component, /class="hue-range" type="range" min="0" max="359" step="1"/);
   const commonRange = component.match(/input\[type='range'\]\s*\{[\s\S]*?\n\s*\}/)?.[0] || '';