Merge branch 'main' of https://github.com/noctalia-dev/noctalia-shell

Assets/Translations/de.json

@@ -373,6 +373,10 @@
           "description": "Arbeitsbereiche ohne Fenster nicht anzeigen.",
           "label": "Unbesetzte ausblenden"
         },
+        "follow-focused-screen": {
+          "description": "Zeigt Arbeitsbereiche vom aktuell fokussierten Bildschirm an, statt vom Bildschirm, auf dem sich die Leiste befindet.",
+          "label": "Fokussiertem Bildschirm folgen"
+        },
         "label-mode": {
           "description": "Wählen Sie, wie Arbeitsbereichs-Beschriftungen angezeigt werden.",
           "label": "Beschriftungsmodus"
@@ -388,9 +392,9 @@
     "discharging": "Wird entladen.",
     "discharging-rate": "Entladerate: {rate} W.",
     "health": "Zustand: {percent}%",
+    "idle": "Leerlauf.",
     "inhibit-idle-description": "Hält das System wach.",
     "inhibit-idle-label": "Wach halten",
-    "idle": "Leerlauf.",
     "no-battery-detected": "Keine Batterie erkannt.",
     "panel-title": "Akku",
     "plugged-in": "Angeschlossen.",
@@ -678,9 +682,9 @@
     "clipboard-loading-description": "Bitte warten",
     "clipboard-search-description": "Zwischenablageverlauf durchsuchen",
     "emoji": "Emoji-Auswahl",
-    "emoji-search-description": "Emojis suchen und kopieren",
     "emoji-loading": "Lade Emojis...",
-    "emoji-loading-description": "Bitte warten"
+    "emoji-loading-description": "Bitte warten",
+    "emoji-search-description": "Emojis suchen und kopieren"
   },
   "quickSettings": {
     "bluetooth": {
@@ -2259,23 +2263,11 @@
   "widgets": {
     "color-picker": {
       "apply": "Anwenden",
-      "brightness": "Helligkeit",
       "cancel": "Abbrechen",
-      "hex": {
-        "description": "Geben Sie einen hexadezimalen Farbcode ein.",
-        "label": "Hex-Farbe"
-      },
       "palette": {
         "description": "Wählen Sie aus einer großen Auswahl vordefinierter Farben.",
-        "label": "Palette"
-      },
-      "rgb": {
-        "description": "Passen Sie Rot-, Grün-, Blau- und Helligkeitswerte an.",
-        "label": "RGB-Werte"
-      },
-      "theme-colors": {
-        "description": "Schnellzugriff auf die Farbpalette Ihres Themes.",
-        "label": "Theme-Farben"
+        "label": "Palette",
+        "theme-colors": "Schneller Zugriff auf die Farbpalette Ihres Themes."
       },
       "title": "Farbauswahl"
     },

Assets/Translations/en.json

@@ -373,6 +373,10 @@
           "description": "Don't display workspaces without windows.",
           "label": "Hide unoccupied"
         },
+        "follow-focused-screen": {
+          "description": "Display workspaces from the currently focused screen, rather than the screen where the bar is located.",
+          "label": "Follow Focused Screen"
+        },
         "label-mode": {
           "description": "Choose how workspace labels are displayed.",
           "label": "Label Mode"
@@ -388,9 +392,9 @@
     "discharging": "Discharging",
     "discharging-rate": "Discharging rate: {rate} W",
     "health": "Health: {percent}%",
+    "idle": "Idle",
     "inhibit-idle-description": "Keeps the system awake.",
     "inhibit-idle-label": "Keep awake",
-    "idle": "Idle",
     "no-battery-detected": "No battery detected",
     "panel-title": "Battery",
     "plugged-in": "Plugged in",
@@ -678,9 +682,9 @@
     "clipboard-loading-description": "Please wait",
     "clipboard-search-description": "Search clipboard history",
     "emoji": "Emoji picker",
-    "emoji-search-description": "Search and copy emojis",
     "emoji-loading": "Loading emojis...",
-    "emoji-loading-description": "Please wait"
+    "emoji-loading-description": "Please wait",
+    "emoji-search-description": "Search and copy emojis"
   },
   "quickSettings": {
     "bluetooth": {
@@ -2259,23 +2263,11 @@
   "widgets": {
     "color-picker": {
       "apply": "Apply",
-      "brightness": "Brightness",
       "cancel": "Cancel",
-      "hex": {
-        "description": "Enter a hexadecimal color code.",
-        "label": "Hex color"
-      },
       "palette": {
         "description": "Choose from a wide range of predefined colors.",
-        "label": "Palette"
-      },
-      "rgb": {
-        "description": "Adjust red, green, blue, and brightness values.",
-        "label": "RGB values"
-      },
-      "theme-colors": {
-        "description": "Quick access to your theme's color palette.",
-        "label": "Theme colors"
+        "label": "Palette",
+        "theme-colors": "Quick access to your theme's color palette."
       },
       "title": "Color picker"
     },

Assets/Translations/es.json

@@ -373,6 +373,10 @@
           "description": "No mostrar espacios de trabajo sin ventanas.",
           "label": "Ocultar desocupados"
         },
+        "follow-focused-screen": {
+          "description": "Mostrar espacios de trabajo de la pantalla actualmente enfocada, en lugar de la pantalla donde se encuentra la barra.",
+          "label": "Seguir Pantalla Enfocada"
+        },
         "label-mode": {
           "description": "Elegir cómo se muestran las etiquetas de los espacios de trabajo.",
           "label": "Modo de etiqueta"
@@ -388,9 +392,9 @@
     "discharging": "Descargando.",
     "discharging-rate": "Tasa de descarga: {rate} W.",
     "health": "Salud: {percent}%",
+    "idle": "Inactivo.",
     "inhibit-idle-description": "Mantiene el sistema despierto.",
     "inhibit-idle-label": "Mantener despierto",
-    "idle": "Inactivo.",
     "no-battery-detected": "No se detectó ninguna batería.",
     "panel-title": "Batería",
     "plugged-in": "Conectado.",
@@ -678,9 +682,9 @@
     "clipboard-loading-description": "Por favor espera",
     "clipboard-search-description": "Buscar en el historial del portapapeles",
     "emoji": "Selector de emojis",
-    "emoji-search-description": "Buscar y copiar emojis",
     "emoji-loading": "Cargando emojis...",
-    "emoji-loading-description": "Por favor espera"
+    "emoji-loading-description": "Por favor espera",
+    "emoji-search-description": "Buscar y copiar emojis"
   },
   "quickSettings": {
     "bluetooth": {
@@ -2259,23 +2263,11 @@
   "widgets": {
     "color-picker": {
       "apply": "Aplicar",
-      "brightness": "Brillo",
       "cancel": "Cancelar",
-      "hex": {
-        "description": "Ingresa un código de color hexadecimal.",
-        "label": "Color hexadecimal"
-      },
       "palette": {
         "description": "Elige entre una amplia gama de colores predefinidos.",
-        "label": "Paleta"
-      },
-      "rgb": {
-        "description": "Ajusta los valores de rojo, verde, azul y brillo.",
-        "label": "Valores RGB"
-      },
-      "theme-colors": {
-        "description": "Acceso rápido a la paleta de colores de tu tema.",
-        "label": "Colores del tema"
+        "label": "Paleta",
+        "theme-colors": "Acceso rápido a la paleta de colores de tu tema."
       },
       "title": "Selector de colores"
     },

Assets/Translations/fr.json

@@ -373,6 +373,10 @@
           "description": "Ne pas afficher les espaces de travail sans fenêtres.",
           "label": "Masquer les inoccupés"
         },
+        "follow-focused-screen": {
+          "description": "Afficher les espaces de travail de l'écran actuellement ciblé, plutôt que de l'écran où se trouve la barre.",
+          "label": "Suivre l'Écran Ciblé"
+        },
         "label-mode": {
           "description": "Choisir comment les étiquettes d'espace de travail sont affichées.",
           "label": "Mode d'étiquette"
@@ -388,9 +392,9 @@
     "discharging": "En décharge.",
     "discharging-rate": "Taux de décharge : {rate} W.",
     "health": "État : {percent}%",
+    "idle": "Inactif.",
     "inhibit-idle-description": "Maintient le système éveillé.",
     "inhibit-idle-label": "Garder éveillé",
-    "idle": "Inactif.",
     "no-battery-detected": "Aucune batterie détectée.",
     "panel-title": "Batterie",
     "plugged-in": "Branché.",
@@ -678,9 +682,9 @@
     "clipboard-loading-description": "Veuillez patienter",
     "clipboard-search-description": "Rechercher dans l'historique du presse-papiers",
     "emoji": "Sélecteur d'émojis",
-    "emoji-search-description": "Rechercher et copier des émojis",
     "emoji-loading": "Chargement des émojis...",
-    "emoji-loading-description": "Veuillez patienter"
+    "emoji-loading-description": "Veuillez patienter",
+    "emoji-search-description": "Rechercher et copier des émojis"
   },
   "quickSettings": {
     "bluetooth": {
@@ -2259,23 +2263,11 @@
   "widgets": {
     "color-picker": {
       "apply": "Appliquer",
-      "brightness": "Luminosité",
       "cancel": "Annuler",
-      "hex": {
-        "description": "Entrez un code couleur hexadécimal.",
-        "label": "Couleur hexadécimale"
-      },
       "palette": {
         "description": "Choisissez parmi une large gamme de couleurs prédéfinies.",
-        "label": "Palette"
-      },
-      "rgb": {
-        "description": "Ajustez les valeurs de rouge, vert, bleu et de luminosité.",
-        "label": "Valeurs RVB"
-      },
-      "theme-colors": {
-        "description": "Accès rapide à la palette de couleurs de votre thème.",
-        "label": "Couleurs du thème"
+        "label": "Palette",
+        "theme-colors": "Accès rapide à la palette de couleurs de votre thème."
       },
       "title": "Sélecteur de couleurs"
     },

Assets/Translations/nl.json

@@ -373,6 +373,10 @@
           "description": "Werkruimten zonder vensters niet weergeven.",
           "label": "Ongebruikte verbergen"
         },
+        "follow-focused-screen": {
+          "description": "Werkruimten weergeven van het momenteel gefocuste scherm, in plaats van het scherm waar de balk zich bevindt.",
+          "label": "Gefocust Scherm Volgen"
+        },
         "label-mode": {
           "description": "Kies hoe labels van werkruimten worden weergegeven.",
           "label": "Labelmodus"
@@ -388,9 +392,9 @@
     "discharging": "Ontladen.",
     "discharging-rate": "Ontlaadsnelheid: {rate} W.",
     "health": "Gezondheid: {percent}%",
+    "idle": "In rust.",
     "inhibit-idle-description": "Houdt het systeem wakker.",
     "inhibit-idle-label": "Wakker houden",
-    "idle": "In rust.",
     "no-battery-detected": "Geen batterij gedetecteerd.",
     "panel-title": "Batterij",
     "plugged-in": "Op netstroom.",
@@ -678,9 +682,9 @@
     "clipboard-loading-description": "Even geduld",
     "clipboard-search-description": "Zoek in klembordgeschiedenis",
     "emoji": "Emoji-kiezer",
-    "emoji-search-description": "Zoek en kopieer emoji's",
     "emoji-loading": "Emoji's laden...",
-    "emoji-loading-description": "Even geduld"
+    "emoji-loading-description": "Even geduld",
+    "emoji-search-description": "Zoek en kopieer emoji's"
   },
   "quickSettings": {
     "bluetooth": {
@@ -2259,23 +2263,11 @@
   "widgets": {
     "color-picker": {
       "apply": "Toepassen",
-      "brightness": "Helderheid",
       "cancel": "Annuleren",
-      "hex": {
-        "description": "Voer een hexadecimale kleurcode in.",
-        "label": "Hex-kleur"
-      },
       "palette": {
         "description": "Kies uit een breed scala aan vooraf gedefinieerde kleuren.",
-        "label": "Palet"
-      },
-      "rgb": {
-        "description": "Pas de waarden voor rood, groen, blauw en helderheid aan.",
-        "label": "RGB-waarden"
-      },
-      "theme-colors": {
-        "description": "Snelle toegang tot het kleurenpalet van je thema.",
-        "label": "Themakleuren"
+        "label": "Palet",
+        "theme-colors": "Snelle toegang tot het kleurenpalet van je thema."
       },
       "title": "Kleurkiezer"
     },

Assets/Translations/pt.json

@@ -373,6 +373,10 @@
           "description": "Não exibir áreas de trabalho sem janelas.",
           "label": "Ocultar desocupados"
         },
+        "follow-focused-screen": {
+          "description": "Exibir áreas de trabalho da tela atualmente em foco, em vez da tela onde a barra está localizada.",
+          "label": "Seguir Tela em Foco"
+        },
         "label-mode": {
           "description": "Escolher como os rótulos de espaço de trabalho são exibidos.",
           "label": "Modo de rótulo"
@@ -388,9 +392,9 @@
     "discharging": "Descarregando.",
     "discharging-rate": "Taxa de descarregamento: {rate} W.",
     "health": "Saúde: {percent}%",
+    "idle": "Ocioso.",
     "inhibit-idle-description": "Mantém o sistema acordado.",
     "inhibit-idle-label": "Manter acordado",
-    "idle": "Ocioso.",
     "no-battery-detected": "Nenhuma bateria detectada.",
     "panel-title": "Bateria",
     "plugged-in": "Conectado.",
@@ -678,9 +682,9 @@
     "clipboard-loading-description": "Por favor, aguarde",
     "clipboard-search-description": "Pesquisar no histórico da área de transferência",
     "emoji": "Seletor de emojis",
-    "emoji-search-description": "Buscar e copiar emojis",
     "emoji-loading": "Carregando emojis...",
-    "emoji-loading-description": "Por favor, aguarde"
+    "emoji-loading-description": "Por favor, aguarde",
+    "emoji-search-description": "Buscar e copiar emojis"
   },
   "quickSettings": {
     "bluetooth": {
@@ -2259,23 +2263,11 @@
   "widgets": {
     "color-picker": {
       "apply": "Aplicar",
-      "brightness": "Brilho",
       "cancel": "Cancelar",
-      "hex": {
-        "description": "Digite um código de cor hexadecimal.",
-        "label": "Cor hexadecimal"
-      },
       "palette": {
         "description": "Escolha entre uma vasta gama de cores predefinidas.",
-        "label": "Paleta"
-      },
-      "rgb": {
-        "description": "Ajuste os valores de vermelho, verde, azul e brilho.",
-        "label": "Valores RGB"
-      },
-      "theme-colors": {
-        "description": "Acesso rápido à paleta de cores do seu tema.",
-        "label": "Cores do tema"
+        "label": "Paleta",
+        "theme-colors": "Acesso rápido à paleta de cores do seu tema."
       },
       "title": "Seletor de cores"
     },

Assets/Translations/ru.json

@@ -373,6 +373,10 @@
           "description": "Не отображать рабочие пространства без окон.",
           "label": "Скрыть незанятые"
         },
+        "follow-focused-screen": {
+          "description": "Отображать рабочие пространства с текущего активного экрана, а не с экрана, на котором расположена панель.",
+          "label": "Следовать за Активным Экраном"
+        },
         "label-mode": {
           "description": "Выберите, как отображаются метки рабочих пространств.",
           "label": "Режим метки"
@@ -388,9 +392,9 @@
     "discharging": "Разрядка.",
     "discharging-rate": "Скорость разрядки: {rate} Вт.",
     "health": "Здоровье: {percent}%",
+    "idle": "Простой.",
     "inhibit-idle-description": "Не дает системе уснуть.",
     "inhibit-idle-label": "Не давать засыпать",
-    "idle": "Простой.",
     "no-battery-detected": "Батарея не обнаружена.",
     "panel-title": "Батарея",
     "plugged-in": "Подключено.",
@@ -678,9 +682,9 @@
     "clipboard-loading-description": "Пожалуйста, подождите",
     "clipboard-search-description": "Поиск в истории буфера обмена",
     "emoji": "Выбор эмодзи",
-    "emoji-search-description": "Поиск и копирование эмодзи",
     "emoji-loading": "Загрузка эмодзи...",
-    "emoji-loading-description": "Пожалуйста, подождите"
+    "emoji-loading-description": "Пожалуйста, подождите",
+    "emoji-search-description": "Поиск и копирование эмодзи"
   },
   "quickSettings": {
     "bluetooth": {
@@ -2259,23 +2263,11 @@
   "widgets": {
     "color-picker": {
       "apply": "Применить",
-      "brightness": "Яркость",
       "cancel": "Отмена",
-      "hex": {
-        "description": "Введите шестнадцатеричный код цвета.",
-        "label": "Hex-цвет"
-      },
       "palette": {
         "description": "Выберите из широкого диапазона предопределенных цветов.",
-        "label": "Палитра"
-      },
-      "rgb": {
-        "description": "Настройте значения красного, зеленого, синего и яркости.",
-        "label": "Значения RGB"
-      },
-      "theme-colors": {
-        "description": "Быстрый доступ к цветовой палитре вашей темы.",
-        "label": "Цвета темы"
+        "label": "Палитра",
+        "theme-colors": "Быстрый доступ к цветовой палитре вашей темы."
       },
       "title": "Выбор цвета"
     },

Assets/Translations/tr.json

@@ -373,6 +373,10 @@
           "description": "Penceresi olmayan çalışma alanlarını gösterme.",
           "label": "Dolu olmayanları gizle"
         },
+        "follow-focused-screen": {
+          "description": "Çubuğun bulunduğu ekran yerine, şu anda odaklanmış ekrandaki çalışma alanlarını göster.",
+          "label": "Odaklanmış Ekranı Takip Et"
+        },
         "label-mode": {
           "description": "Çalışma alanı etiketlerinin nasıl gösterileceğini seçin.",
           "label": "Etiket Modu"
@@ -388,9 +392,9 @@
     "discharging": "Deşarj oluyor.",
     "discharging-rate": "Deşarj oranı: {rate} W.",
     "health": "Sağlık: {percent}%",
+    "idle": "Boşta.",
     "inhibit-idle-description": "Sistemi uyanık tutar.",
     "inhibit-idle-label": "Uyanık tut",
-    "idle": "Boşta.",
     "no-battery-detected": "Pil tespit edilmedi.",
     "panel-title": "Pil",
     "plugged-in": "Prize takılı.",
@@ -678,9 +682,9 @@
     "clipboard-loading-description": "Lütfen bekleyin",
     "clipboard-search-description": "Panoya geçmişini ara",
     "emoji": "Emoji seçici",
-    "emoji-search-description": "Emoji arama ve kopyalama",
     "emoji-loading": "Emojiler yükleniyor...",
-    "emoji-loading-description": "Lütfen bekleyin"
+    "emoji-loading-description": "Lütfen bekleyin",
+    "emoji-search-description": "Emoji arama ve kopyalama"
   },
   "quickSettings": {
     "bluetooth": {
@@ -2259,23 +2263,11 @@
   "widgets": {
     "color-picker": {
       "apply": "Uygula",
-      "brightness": "Parlaklık",
       "cancel": "İptal",
-      "hex": {
-        "description": "Onaltılık renk kodu girin.",
-        "label": "Hex renk"
-      },
       "palette": {
         "description": "Önceden tanımlı renkler geniş yelpazesinden seçin.",
-        "label": "Palet"
-      },
-      "rgb": {
-        "description": "Kırmızı, yeşil, mavi ve parlaklık değerlerini ayarlayın.",
-        "label": "RGB değerleri"
-      },
-      "theme-colors": {
-        "description": "Temanızın renk paletine hızlı erişim.",
-        "label": "Tema renkleri"
+        "label": "Palet",
+        "theme-colors": "Temanızın renk paletine hızlı erişim."
       },
       "title": "Renk seçici"
     },

Assets/Translations/uk-UA.json

@@ -373,6 +373,10 @@
           "description": "Не відображати робочі простори без вікон.",
           "label": "Приховати незайняті"
         },
+        "follow-focused-screen": {
+          "description": "Відображати робочі простори з поточного активного екрана, а не з екрана, на якому розташована панель.",
+          "label": "Слідувати за Активним Екраном"
+        },
         "label-mode": {
           "description": "Виберіть, як відображаються мітки робочих просторів.",
           "label": "Режим міток"
@@ -388,9 +392,9 @@
     "discharging": "Розрядка.",
     "discharging-rate": "Швидкість розрядки: {rate} Вт.",
     "health": "Здоров'я: {percent}%",
+    "idle": "Бездіяльність.",
     "inhibit-idle-description": "Підтримує систему активною.",
     "inhibit-idle-label": "Не давати заснути",
-    "idle": "Бездіяльність.",
     "no-battery-detected": "Батарею не виявлено.",
     "panel-title": "Батарея",
     "plugged-in": "Підключено.",
@@ -678,9 +682,9 @@
     "clipboard-loading-description": "Зачекайте, будь ласка",
     "clipboard-search-description": "Пошук в історії буфера обміну",
     "emoji": "Обрати емодзі",
-    "emoji-search-description": "Пошук і копіювання емодзі",
     "emoji-loading": "Завантаження емодзі...",
-    "emoji-loading-description": "Зачекайте, будь ласка"
+    "emoji-loading-description": "Зачекайте, будь ласка",
+    "emoji-search-description": "Пошук і копіювання емодзі"
   },
   "quickSettings": {
     "bluetooth": {
@@ -2259,23 +2263,11 @@
   "widgets": {
     "color-picker": {
       "apply": "Застосувати",
-      "brightness": "Яскравість",
       "cancel": "Скасувати",
-      "hex": {
-        "description": "Введіть шістнадцятковий код кольору.",
-        "label": "Hex-колір"
-      },
       "palette": {
         "description": "Виберіть із широкого діапазону попередньо визначених кольорів.",
-        "label": "Палітра"
-      },
-      "rgb": {
-        "description": "Налаштуйте значення червоного, зеленого, синього та яскравості.",
-        "label": "Значення RGB"
-      },
-      "theme-colors": {
-        "description": "Швидкий доступ до колірної палітри вашої теми.",
-        "label": "Кольори теми"
+        "label": "Палітра",
+        "theme-colors": "Швидкий доступ до колірної палітри вашої теми."
       },
       "title": "Вибір кольору"
     },

Assets/Translations/zh-CN.json

@@ -373,6 +373,10 @@
           "description": "不显示没有窗口的工作区。",
           "label": "隐藏未占用"
         },
+        "follow-focused-screen": {
+          "description": "显示当前焦点屏幕的工作区，而不是任务栏所在屏幕的工作区。",
+          "label": "跟随焦点屏幕"
+        },
         "label-mode": {
           "description": "选择工作区标签的显示方式。",
           "label": "标签模式"
@@ -388,9 +392,9 @@
     "discharging": "正在放电。",
     "discharging-rate": "放电速率：{rate} W。",
     "health": "健康状况：{percent}%",
+    "idle": "空闲。",
     "inhibit-idle-description": "保持系统唤醒。",
     "inhibit-idle-label": "保持唤醒",
-    "idle": "空闲。",
     "no-battery-detected": "未检测到电池。",
     "panel-title": "电池",
     "plugged-in": "已接通电源。",
@@ -678,9 +682,9 @@
     "clipboard-loading-description": "请稍候",
     "clipboard-search-description": "搜索剪贴板历史记录",
     "emoji": "表情符号选择器",
-    "emoji-search-description": "搜索和复制表情符号",
     "emoji-loading": "正在加载表情符号...",
-    "emoji-loading-description": "请稍候"
+    "emoji-loading-description": "请稍候",
+    "emoji-search-description": "搜索和复制表情符号"
   },
   "quickSettings": {
     "bluetooth": {
@@ -2259,23 +2263,11 @@
   "widgets": {
     "color-picker": {
       "apply": "应用",
-      "brightness": "亮度",
       "cancel": "取消",
-      "hex": {
-        "description": "输入十六进制颜色代码。",
-        "label": "十六进制颜色"
-      },
       "palette": {
         "description": "从各种预定义颜色中选择。",
-        "label": "调色板"
-      },
-      "rgb": {
-        "description": "调整红、绿、蓝和亮度值。",
-        "label": "RGB 值"
-      },
-      "theme-colors": {
-        "description": "快速访问您的主题调色板。",
-        "label": "主题颜色"
+        "label": "调色板",
+        "theme-colors": "快速访问您主题的调色板。"
       },
       "title": "颜色选择器"
     },

Helpers/ColorList.js

@@ -0,0 +1,187 @@
+var colors = [
+    // --- REDS ---
+    { name: "MistyRose", color: "mistyrose" },
+    { name: "LightPink", color: "lightpink" },
+    { name: "Pink", color: "pink" },
+    { name: "PaleVioletRed", color: "palevioletred" },
+    { name: "Pink 500", color: "#E91E63" }, // Material
+    { name: "HotPink", color: "hotpink" },
+    { name: "DeepPink", color: "deeppink" },
+    { name: "MediumVioletRed", color: "mediumvioletred" },
+    { name: "LightSalmon", color: "lightsalmon" },
+    { name: "Salmon", color: "salmon" },
+    { name: "DarkSalmon", color: "darksalmon" },
+    { name: "LightCoral", color: "lightcoral" },
+    { name: "IndianRed", color: "indianred" },
+    { name: "Alizarin", color: "#E74C3C" }, // Flat UI
+    { name: "Red 500", color: "#F44336" }, // Material
+    { name: "Crimson", color: "crimson" },
+    { name: "Red", color: "red" },
+    { name: "FireBrick", color: "firebrick" },
+    { name: "DarkRed", color: "darkred" },
+    { name: "Maroon", color: "maroon" },
+    { name: "Brown", color: "brown" },
+
+    // --- ORANGES & BROWNS ---
+    { name: "Coral", color: "coral" },
+    { name: "Tomato", color: "tomato" },
+    { name: "OrangeRed", color: "orangered" },
+    { name: "Deep Orange 500", color: "#FF5722" }, // Material
+    { name: "DarkOrange", color: "darkorange" },
+    { name: "Carrot", color: "#E67E22" }, // Flat UI
+    { name: "Orange 500", color: "#FF9800" }, // Material
+    { name: "Orange", color: "orange" },
+    { name: "SandyBrown", color: "sandybrown" },
+    { name: "Peru", color: "peru" },
+    { name: "Chocolate", color: "chocolate" },
+    { name: "SaddleBrown", color: "saddlebrown" },
+    { name: "Sienna", color: "sienna" },
+    { name: "Brown 500", color: "#795548" }, // Material
+
+    // --- YELLOWS, BEIGES & GOLDS ---
+    { name: "LightYellow", color: "lightyellow" },
+    { name: "LemonChiffon", color: "lemonchiffon" },
+    { name: "LightGoldenrodYellow", color: "lightgoldenrodyellow" },
+    { name: "PapayaWhip", color: "papayawhip" },
+    { name: "Moccasin", color: "moccasin" },
+    { name: "PeachPuff", color: "peachpuff" },
+    { name: "NavajoWhite", color: "navajowhite" },
+    { name: "Wheat", color: "wheat" },
+    { name: "BurlyWood", color: "burlywood" },
+    { name: "Tan", color: "tan" },
+    { name: "Bisque", color: "bisque" },
+    { name: "BlanchedAlmond", color: "blanchedalmond" },
+    { name: "Cornsilk", color: "cornsilk" },
+    { name: "PaleGoldenrod", color: "palegoldenrod" },
+    { name: "Khaki", color: "khaki" },
+    { name: "DarkKhaki", color: "darkkhaki" },
+    { name: "Goldenrod", color: "goldenrod" },
+    { name: "DarkGoldenrod", color: "darkgoldenrod" },
+    { name: "Sun Flower", color: "#F1C40F" }, // Flat UI
+    { name: "Yellow 500", color: "#FFEB3B" }, // Material
+    { name: "Yellow", color: "yellow" },
+    { name: "Gold", color: "gold" },
+    { name: "Amber 500", color: "#FFC107" }, // Material
+
+    // --- GREENS ---
+    { name: "GreenYellow", color: "greenyellow" },
+    { name: "Chartreuse", color: "chartreuse" },
+    { name: "LawnGreen", color: "lawngreen" },
+    { name: "Lime 500", color: "#CDDC39" }, // Material
+    { name: "Lime", color: "lime" },
+    { name: "LimeGreen", color: "limegreen" },
+    { name: "PaleGreen", color: "palegreen" },
+    { name: "LightGreen", color: "lightgreen" },
+    { name: "Light Green 500", color: "#8BC34A" }, // Material
+    { name: "MediumSpringGreen", color: "mediumspringgreen" },
+    { name: "SpringGreen", color: "springgreen" },
+    { name: "Emerald", color: "#2ECC71" }, // Flat UI
+    { name: "Green 500", color: "#4CAF50" }, // Material
+    { name: "MediumSeaGreen", color: "mediumseagreen" },
+    { name: "SeaGreen", color: "seagreen" },
+    { name: "ForestGreen", color: "forestgreen" },
+    { name: "Green", color: "green" },
+    { name: "DarkGreen", color: "darkgreen" },
+    { name: "YellowGreen", color: "yellowgreen" },
+    { name: "OliveDrab", color: "olivedrab" },
+    { name: "Olive", color: "olive" },
+    { name: "DarkOliveGreen", color: "darkolivegreen" },
+
+    // --- TEALS & CYANS ---
+    { name: "MediumAquamarine", color: "mediumaquamarine" },
+    { name: "DarkSeaGreen", color: "darkseagreen" },
+    { name: "LightSeaGreen", color: "lightseagreen" },
+    { name: "DarkCyan", color: "darkcyan" },
+    { name: "Teal", color: "teal" },
+    { name: "Turquoise", color: "#1ABC9C" }, // Flat UI
+    { name: "LightCyan", color: "lightcyan" },
+    { name: "PaleTurquoise", color: "paleturquoise" },
+    { name: "Aquamarine", color: "aquamarine" },
+    { name: "Turquoise", color: "turquoise" },
+    { name: "MediumTurquoise", color: "mediumturquoise" },
+    { name: "DarkTurquoise", color: "darkturquoise" },
+    { name: "Aqua", color: "aqua" },
+    { name: "Cyan", color: "cyan" },
+    { name: "Cyan 500", color: "#00BCD4" }, // Material
+    { name: "CadetBlue", color: "cadetblue" },
+    { name: "Teal 500", color: "#009688" }, // Material
+    { name: "DarkSlateGray", color: "darkslategray" },
+
+    // --- BLUES ---
+    { name: "PowderBlue", color: "powderblue" },
+    { name: "LightBlue", color: "lightblue" },
+    { name: "SkyBlue", color: "skyblue" },
+    { name: "LightSkyBlue", color: "lightskyblue" },
+    { name: "Light Blue 500", color: "#03A9F4" }, // Material
+    { name: "DeepSkyBlue", color: "deepskyblue" },
+    { name: "DodgerBlue", color: "dodgerblue" },
+    { name: "CornflowerBlue", color: "cornflowerblue" },
+    { name: "Peter River", color: "#3498DB" }, // Flat UI
+    { name: "Blue 500", color: "#2196F3" }, // Material
+    { name: "SteelBlue", color: "steelblue" },
+    { name: "LightSteelBlue", color: "lightsteelblue" },
+    { name: "RoyalBlue", color: "royalblue" },
+    { name: "Blue", color: "blue" },
+    { name: "MediumBlue", color: "mediumblue" },
+    { name: "Belize Hole", color: "#2980B9" }, // Flat UI
+    { name: "DarkBlue", color: "darkblue" },
+    { name: "Navy", color: "navy" },
+    { name: "MidnightBlue", color: "midnightblue" },
+    { name: "Midnight Blue", color: "#2C3E50" }, // Flat UI (Same name, different color)
+    { name: "Indigo 500", color: "#3F51B5" }, // Material
+    { name: "DarkSlateBlue", color: "darkslateblue" },
+    { name: "MediumSlateBlue", color: "mediumslateblue" },
+    { name: "SlateBlue", color: "slateblue" },
+
+    // --- PURPLES & MAGENTAS ---
+    { name: "Lavender", color: "lavender" },
+    { name: "Thistle", color: "thistle" },
+    { name: "Plum", color: "plum" },
+    { name: "Violet", color: "violet" },
+    { name: "Orchid", color: "orchid" },
+    { name: "Fuchsia", color: "fuchsia" },
+    { name: "Magenta", color: "magenta" },
+    { name: "MediumOrchid", color: "mediumorchid" },
+    { name: "MediumPurple", color: "mediumpurple" },
+    { name: "Amethyst", color: "#9B59B6" }, // Flat UI
+    { name: "Purple 500", color: "#9C27B0" }, // Material
+    { name: "BlueViolet", color: "blueviolet" },
+    { name: "DarkViolet", color: "darkviolet" },
+    { name: "DarkOrchid", color: "darkorchid" },
+    { name: "DarkMagenta", color: "darkmagenta" },
+    { name: "Purple", color: "purple" },
+    { name: "Deep Purple 500", color: "#673AB7" }, // Material
+    { name: "Indigo", color: "indigo" },
+
+    // --- NEUTRALS ---
+    { name: "White", color: "white" },
+    { name: "Snow", color: "snow" },
+    { name: "HoneyDew", color: "honeydew" },
+    { name: "MintCream", color: "mintcream" },
+    { name: "Azure", color: "azure" },
+    { name: "AliceBlue", color: "aliceblue" },
+    { name: "GhostWhite", color: "ghostwhite" },
+    { name: "WhiteSmoke", color: "whitesmoke" },
+    { name: "Seashell", color: "seashell" },
+    { name: "Beige", color: "beige" },
+    { name: "OldLace", color: "oldlace" },
+    { name: "FloralWhite", color: "floralwhite" },
+    { name: "Ivory", color: "ivory" },
+    { name: "AntiqueWhite", color: "antiquewhite" },
+    { name: "Linen", color: "linen" },
+    { name: "LavenderBlush", color: "lavenderblush" },
+    { name: "Gainsboro", color: "gainsboro" },
+    { name: "LightGray", color: "lightgray" },
+    { name: "Silver", color: "silver" },
+    { name: "DarkGray", color: "darkgray" },
+    { name: "Gray", color: "gray" },
+    { name: "Grey 500", color: "#9E9E9E" }, // Material
+    { name: "Concrete", color: "#95A5A6" }, // Flat UI
+    { name: "DimGray", color: "dimgray" },
+    { name: "LightSlateGray", color: "lightslategray" },
+    { name: "SlateGray", color: "slategray" },
+    { name: "Asbestos", color: "#7F8C8D" }, // Flat UI
+    { name: "Blue Grey 500", color: "#607D8B" }, // Material
+    { name: "Wet Asphalt", color: "#34495E" }, // Flat UI
+    { name: "Black", color: "black" }
+  ]

Modules/Bar/Widgets/Workspace.qml

@@ -46,6 +46,7 @@ Item {
 
   readonly property string labelMode: (widgetSettings.labelMode !== undefined) ? widgetSettings.labelMode : widgetMetadata.labelMode
   readonly property bool hideUnoccupied: (widgetSettings.hideUnoccupied !== undefined) ? widgetSettings.hideUnoccupied : widgetMetadata.hideUnoccupied
+  readonly property bool followFocusedScreen: (widgetSettings.followFocusedScreen !== undefined) ? widgetSettings.followFocusedScreen : widgetMetadata.followFocusedScreen
   readonly property int characterCount: isVertical ? 2 : ((widgetSettings.characterCount !== undefined) ? widgetSettings.characterCount : widgetMetadata.characterCount)
 
   property bool isDestroying: false
@@ -162,10 +163,20 @@ Item {
 
   function refreshWorkspaces() {
     localWorkspaces.clear();
+
+    var focusedOutput = null;
+    if (followFocusedScreen) {
+      for (var i = 0; i < CompositorService.workspaces.count; i++) {
+        const ws = CompositorService.workspaces.get(i);
+        if (ws.isFocused) focusedOutput = ws.output.toLowerCase();
+      }
+    }
+
     if (screen !== null) {
       for (var i = 0; i < CompositorService.workspaces.count; i++) {
         const ws = CompositorService.workspaces.get(i);
-        if (ws.output.toLowerCase() === screen.name.toLowerCase()) {
+        if ((followFocusedScreen && ws.output.toLowerCase() == focusedOutput) ||
+          (!followFocusedScreen && ws.output.toLowerCase() == screen.name.toLowerCase())) {
           if (hideUnoccupied && !ws.isOccupied && !ws.isFocused) {
             continue;
           }

Modules/Panels/Battery/BatteryPanel.qml

@@ -28,13 +28,13 @@ SmartPanel {
       return I18n.tr("battery.no-battery-detected");
     if (charging && battery.timeToFull > 0) {
       return I18n.tr("battery.time-until-full", {
-        "time": Time.formatVagueHumanReadableDuration(battery.timeToFull)
-      });
+                       "time": Time.formatVagueHumanReadableDuration(battery.timeToFull)
+                     });
     }
     if (!charging && battery.timeToEmpty > 0) {
       return I18n.tr("battery.time-left", {
-        "time": Time.formatVagueHumanReadableDuration(battery.timeToEmpty)
-      });
+                       "time": Time.formatVagueHumanReadableDuration(battery.timeToEmpty)
+                     });
     }
     return I18n.tr("battery.idle");
   }
@@ -154,7 +154,9 @@ SmartPanel {
             visible: healthAvailable
 
             NText {
-              text: I18n.tr("battery.health", {"percent": healthPercent})
+              text: I18n.tr("battery.health", {
+                              "percent": healthPercent
+                            })
               color: Color.mOnSurface
               pointSize: Style.fontSizeS
               font.weight: Style.fontWeightMedium
@@ -179,7 +181,9 @@ SmartPanel {
             Layout.fillWidth: true
             spacing: Style.marginS
             NIcon {
-              icon: PowerProfileService.getIcon(); pointSize: Style.fontSizeM; color: Color.mPrimary
+              icon: PowerProfileService.getIcon()
+              pointSize: Style.fontSizeM
+              color: Color.mPrimary
             }
             NText {
               text: I18n.tr("battery.power-profile")
@@ -188,7 +192,7 @@ SmartPanel {
               Layout.fillWidth: true
             }
             NText {
-              text: PowerProfileService.getName()
+              text: PowerProfileService.getName(profileIndex)
               color: Color.mOnSurfaceVariant
             }
           }
@@ -273,7 +277,7 @@ SmartPanel {
     interval: 1000
     repeat: true
     running: true
-    onTriggered: manualInhibitActive = manualInhibitorEnabled();
+    onTriggered: manualInhibitActive = manualInhibitorEnabled()
   }
 
   Connections {

Modules/Panels/Settings/Bar/WidgetSettings/WorkspaceSettings.qml

@@ -14,6 +14,7 @@ ColumnLayout {
 
   property string valueLabelMode: widgetData.labelMode !== undefined ? widgetData.labelMode : widgetMetadata.labelMode
   property bool valueHideUnoccupied: widgetData.hideUnoccupied !== undefined ? widgetData.hideUnoccupied : widgetMetadata.hideUnoccupied
+  property bool valueFollowFocusedScreen: widgetData.followFocusedScreen !== undefined ? widgetData.followFocusedScreen : widgetMetadata.followFocusedScreen
   property int valueCharacterCount: widgetData.characterCount !== undefined ? widgetData.characterCount : widgetMetadata.characterCount
 
   function saveSettings() {
@@ -21,6 +22,7 @@ ColumnLayout {
     settings.labelMode = valueLabelMode;
     settings.hideUnoccupied = valueHideUnoccupied;
     settings.characterCount = valueCharacterCount;
+    settings.followFocusedScreen = valueFollowFocusedScreen;
     return settings;
   }
 
@@ -51,6 +53,13 @@ ColumnLayout {
     minimumWidth: 200
   }
 
+  NToggle {
+    label: I18n.tr("bar.widget-settings.workspace.follow-focused-screen.label")
+    description: I18n.tr("bar.widget-settings.workspace.follow-focused-screen.description")
+    checked: valueFollowFocusedScreen
+    onToggled: checked => valueFollowFocusedScreen = checked
+  }
+
   NToggle {
     label: I18n.tr("bar.widget-settings.workspace.hide-unoccupied.label")
     description: I18n.tr("bar.widget-settings.workspace.hide-unoccupied.description")

Modules/Panels/Settings/Tabs/ColorScheme/ColorSchemeTab.qml

@@ -853,7 +853,6 @@ ColumnLayout {
                      }
                    }
       }
-
     }
     // Miscellaneous
     NCollapsible {

Services/UI/BarWidgetRegistry.qml

@@ -223,6 +223,7 @@ Singleton {
                                   "Workspace": {
                                     "allowUserSettings": true,
                                     "labelMode": "index",
+                                    "followFocusedScreen": false,
                                     "hideUnoccupied": false,
                                     "characterCount": 2
                                   },

Shaders/frag/color_picker.frag

@@ -0,0 +1,54 @@
+#version 450
+
+layout(location = 0) in vec2 qt_TexCoord0;
+layout(location = 0) out vec4 fragColor;
+
+layout(std140, binding = 0) uniform buf
+{
+    mat4 qt_Matrix;
+    vec4 params; // x=opacity, y=fixedVal, z=mode, w=padding
+};
+
+vec3 hsv2rgb(vec3 c)
+{
+    vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
+    vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
+    return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
+}
+
+void main()
+{
+    float x = qt_TexCoord0.x;
+    float y = 1.0 - qt_TexCoord0.y; // Flip Y direction
+
+    // Unpack vector
+    float opacity = params.x;
+    float fixedVal = params.y;
+    float mode = params.z + 0.1; // +0.1 safely handles float rounding
+
+    // Build permutation matrices for swizzling
+    vec3 base = vec3(x, y, fixedVal);
+
+    // Determine Mode Logic
+    // 0: (Red/Hue) 1: (Green/Sat) 2: (Blue/Val)
+    int perm = int(mode) % 3;
+
+    float isHSV = step(3.0, mode);
+
+    // Branchless Selection
+    vec3 mask = vec3(
+        float(perm == 0),
+        float(perm == 1),
+        float(perm == 2));
+
+    // Swizzle fo shizzle
+    // If perm 0: base.zxy -> (fixedVal, x, y)
+    // If perm 1: base.xzy -> (x, fixedVal, y)
+    // If perm 2: base.xyz -> (x, y, fixedVal)
+    vec3 rgb_base = (base.zxy * mask.x) + (base.xzy * mask.y) + (base.xyz * mask.z);
+
+    // Final mix
+    vec3 finalColor = mix(rgb_base, hsv2rgb(rgb_base), isHSV);
+
+    fragColor = vec4(finalColor, 1.0) * opacity;
+}

Widgets/NColorPickerDialog.qml

@@ -1,16 +1,35 @@
+import QtQml
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
-import "../Helpers/ColorsConvert.js" as ColorsConvert
+import "../Helpers/ColorList.js" as ColorList
 import qs.Commons
+import qs.Services.UI
 import qs.Widgets
 
 Popup {
   id: root
 
   property color selectedColor: Color.black
-  property real currentHue: 0
-  property real currentSaturation: 0
+
+  enum EditMode {
+    R,
+    G,
+    B,
+    H,
+    S,
+    V
+  }
+  property int editMode: NColorPickerDialog.EditMode.R
+
+  // Code to deal with Hue when color is achromatic
+  property real stableHue: 0
+  onSelectedColorChanged: {
+    if (selectedColor.hsvHue >= 0) {
+      stableHue = selectedColor.hsvHue;
+    }
+  }
+  readonly property real displayHue: selectedColor.hsvHue < 0 ? stableHue : selectedColor.hsvHue
 
   signal colorSelected(color color)
 
@@ -116,256 +135,589 @@ Popup {
         }
       }
 
-      // Hex input
-      RowLayout {
-        Layout.fillWidth: true
-        spacing: Style.marginM
-
-        NLabel {
-          label: I18n.tr("widgets.color-picker.hex.label")
-          description: I18n.tr("widgets.color-picker.hex.description")
-          Layout.fillWidth: true
-        }
-
-        NTextInput {
-          text: root.selectedColor.toString().toUpperCase()
-          fontFamily: Settings.data.ui.fontFixed
-          Layout.fillWidth: true
-          onEditingFinished: {
-            if (/^#[0-9A-F]{6}$/i.test(text)) {
-              root.selectedColor = text;
-            }
-          }
-        }
-      }
-
-      // RGB sliders section
+      // Main Box
       NBox {
         Layout.fillWidth: true
-        Layout.preferredHeight: slidersSection.implicitHeight + Style.marginL * 2
+        Layout.preferredHeight: controlsOutterColumn.implicitHeight + Style.marginL * 2
+
+        ButtonGroup {
+          id: colorValues
+        }
 
         ColumnLayout {
-          id: slidersSection
+          id: controlsOutterColumn
           anchors.fill: parent
           anchors.margins: Style.marginL
           spacing: Style.marginM
 
-          NLabel {
-            label: I18n.tr("widgets.color-picker.rgb.label")
-            description: I18n.tr("widgets.color-picker.rgb.description")
-            Layout.fillWidth: true
-          }
-
           RowLayout {
-            Layout.fillWidth: true
-            spacing: Style.marginM
+            spacing: Style.marginL // Ensure nice gap between Left and Right groups
 
-            NText {
-              text: "R"
-              font.weight: Font.Bold
-              Layout.preferredWidth: 20
-            }
-
-            NValueSlider {
-              id: redSlider
+            // SpinBoxes Column
+            ColumnLayout {
               Layout.fillWidth: true
-              from: 0
-              to: 255
-              value: Math.round(root.selectedColor.r * 255)
-              onMoved: value => {
-                         root.selectedColor = Qt.rgba(value / 255, root.selectedColor.g, root.selectedColor.b, 1);
-                         var hsv = ColorsConvert.rgbToHsv(root.selectedColor.r * 255, root.selectedColor.g * 255, root.selectedColor.b * 255);
-                         root.currentHue = hsv.h;
-                         root.currentSaturation = hsv.s;
-                       }
-              text: Math.round(value)
-            }
-          }
+              Layout.fillHeight: true
+              Layout.alignment: Qt.AlignTop
+              Layout.preferredWidth: 3
 
-          RowLayout {
-            Layout.fillWidth: true
-            spacing: Style.marginM
+              // --- RED ---
+              RowLayout {
+                Layout.fillWidth: true
+                spacing: Style.marginM
 
-            NText {
-              text: "G"
-              font.weight: Font.Bold
-              Layout.preferredWidth: 20
-            }
+                NRadioButton {
+                  ButtonGroup.group: colorValues
+                  text: "R"
+                  font.weight: Font.Bold
+                  checked: true
+                  onClicked: root.editMode = NColorPickerDialog.EditMode.R
+                  Layout.fillWidth: false
+                }
 
-            NValueSlider {
-              id: greenSlider
-              Layout.fillWidth: true
-              from: 0
-              to: 255
-              value: Math.round(root.selectedColor.g * 255)
-              onMoved: value => {
-                         root.selectedColor = Qt.rgba(root.selectedColor.r, value / 255, root.selectedColor.b, 1);
-                         // Update stored hue and saturation when RGB changes
-                         var hsv = ColorsConvert.rgbToHsv(root.selectedColor.r * 255, root.selectedColor.g * 255, root.selectedColor.b * 255);
-                         root.currentHue = hsv.h;
-                         root.currentSaturation = hsv.s;
-                       }
-              text: Math.round(value)
-            }
-          }
+                NSpinBox {
+                  id: redSpinBox
+                  from: 0
+                  to: 255
 
-          RowLayout {
-            Layout.fillWidth: true
-            spacing: Style.marginM
-
-            NText {
-              text: "B"
-              font.weight: Font.Bold
-              Layout.preferredWidth: 20
-            }
-
-            NValueSlider {
-              id: blueSlider
-              Layout.fillWidth: true
-              from: 0
-              to: 255
-              value: Math.round(root.selectedColor.b * 255)
-              onMoved: value => {
-                         root.selectedColor = Qt.rgba(root.selectedColor.r, root.selectedColor.g, value / 255, 1);
-                         // Update stored hue and saturation when RGB changes
-                         var hsv = ColorsConvert.rgbToHsv(root.selectedColor.r * 255, root.selectedColor.g * 255, root.selectedColor.b * 255);
-                         root.currentHue = hsv.h;
-                         root.currentSaturation = hsv.s;
-                       }
-              text: Math.round(value)
-            }
-          }
-
-          RowLayout {
-            Layout.fillWidth: true
-            spacing: Style.marginM
-
-            NText {
-              text: I18n.tr("widgets.color-picker.brightness")
-              font.weight: Font.Bold
-              Layout.preferredWidth: 80
-            }
-
-            NValueSlider {
-              id: brightnessSlider
-              Layout.fillWidth: true
-              from: 0
-              to: 100
-              value: {
-                var hsv = ColorsConvert.rgbToHsv(root.selectedColor.r * 255, root.selectedColor.g * 255, root.selectedColor.b * 255);
-                return hsv.v;
+                  onValueChanged: {
+                    if (!selectedSlider.pressed && !fieldMouse.pressed && !hexInput.activeFocus && value !== Math.round(root.selectedColor.r * 255)) {
+                      root.selectedColor = Qt.rgba(value / 255, root.selectedColor.g, root.selectedColor.b, 1);
+                    }
+                  }
+                  Binding {
+                    target: redSpinBox
+                    property: "value"
+                    value: Math.round(root.selectedColor.r * 255)
+                  }
+                }
               }
-              onMoved: value => {
-                         var hue = root.currentHue;
-                         var saturation = root.currentSaturation;
 
-                         if (hue === 0 && saturation === 0) {
-                           var hsv = ColorsConvert.rgbToHsv(root.selectedColor.r * 255, root.selectedColor.g * 255, root.selectedColor.b * 255);
-                           hue = hsv.h;
-                           saturation = hsv.s;
-                           root.currentHue = hue;
-                           root.currentSaturation = saturation;
-                         }
+              // --- GREEN ---
+              RowLayout {
+                Layout.fillWidth: true
+                spacing: Style.marginM
 
-                         var rgb = ColorsConvert.hsvToRgb(hue, saturation, value);
-                         root.selectedColor = Qt.rgba(rgb.r / 255, rgb.g / 255, rgb.b / 255, 1);
-                       }
-              text: Math.round(brightnessSlider.value) + "%"
-            }
-          }
-        }
-      }
+                NRadioButton {
+                  ButtonGroup.group: colorValues
+                  text: "G"
+                  font.weight: Font.Bold
+                  onClicked: root.editMode = NColorPickerDialog.EditMode.G
+                  Layout.fillWidth: false
+                }
 
-      NBox {
-        Layout.fillWidth: true
-        Layout.preferredHeight: themePalette.implicitHeight + Style.marginL * 2
+                NSpinBox {
+                  id: greenSpinBox
+                  from: 0
+                  to: 255
 
-        ColumnLayout {
-          id: themePalette
-          anchors.fill: parent
-          anchors.margins: Style.marginL
-          spacing: Style.marginS
+                  onValueChanged: {
+                    if (!selectedSlider.pressed && !fieldMouse.pressed && !hexInput.activeFocus && value !== Math.round(root.selectedColor.g * 255)) {
+                      root.selectedColor = Qt.rgba(root.selectedColor.r, value / 255, root.selectedColor.b, 1);
+                    }
+                  }
+                  Binding {
+                    target: greenSpinBox
+                    property: "value"
+                    value: Math.round(root.selectedColor.g * 255)
+                  }
+                }
+              }
 
-          NLabel {
-            label: I18n.tr("widgets.color-picker.theme-colors.label")
-            description: I18n.tr("widgets.color-picker.theme-colors.description")
-            Layout.fillWidth: true
-          }
+              // --- BLUE ---
+              RowLayout {
+                Layout.fillWidth: true
+                spacing: Style.marginM
 
-          Flow {
-            spacing: 6
-            Layout.fillWidth: true
-            flow: Flow.LeftToRight
+                NRadioButton {
+                  ButtonGroup.group: colorValues
+                  text: "B"
+                  font.weight: Font.Bold
+                  onClicked: root.editMode = NColorPickerDialog.EditMode.B
+                  Layout.fillWidth: false
+                }
 
-            Repeater {
-              model: [Color.mPrimary, Color.mSecondary, Color.mTertiary, Color.mError, Color.mSurface, Color.mSurfaceVariant, Color.mOutline, Color.white, Color.black]
+                NSpinBox {
+                  id: blueSpinBox
+                  from: 0
+                  to: 255
 
-              Rectangle {
-                width: 24
-                height: 24
-                radius: 4
-                color: modelData
-                border.color: root.selectedColor === modelData ? Color.mPrimary : Color.mOutline
-                border.width: root.selectedColor === modelData ? 2 : 1
+                  onValueChanged: {
+                    if (!selectedSlider.pressed && !fieldMouse.pressed && !hexInput.activeFocus && value !== Math.round(root.selectedColor.b * 255)) {
+                      root.selectedColor = Qt.rgba(root.selectedColor.r, root.selectedColor.g, value / 255, 1);
+                    }
+                  }
+                  Binding {
+                    target: blueSpinBox
+                    property: "value"
+                    value: Math.round(root.selectedColor.b * 255)
+                  }
+                }
+              }
 
-                MouseArea {
-                  anchors.fill: parent
-                  cursorShape: Qt.PointingHandCursor
-                  onClicked: {
-                    root.selectedColor = modelData;
-                    var hsv = ColorsConvert.rgbToHsv(root.selectedColor.r * 255, root.selectedColor.g * 255, root.selectedColor.b * 255);
-                    root.currentHue = hsv.h;
-                    root.currentSaturation = hsv.s;
+              // Spacer
+              Item {
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+              }
+
+              // --- HUE ---
+              RowLayout {
+                Layout.fillWidth: true
+                spacing: Style.marginM
+
+                NRadioButton {
+                  ButtonGroup.group: colorValues
+                  text: "H"
+                  font.weight: Font.Bold
+                  checked: true
+                  onClicked: root.editMode = NColorPickerDialog.EditMode.H
+                  Layout.fillWidth: false
+                }
+
+                NSpinBox {
+                  id: hueSpinBox
+                  from: 0
+                  to: 360
+
+                  onValueChanged: {
+                    if (!selectedSlider.pressed && !fieldMouse.pressed && !hexInput.activeFocus && value !== Math.round(root.displayHue * 360)) {
+                      var newHue = value / 360;
+                      root.selectedColor = Qt.hsva(newHue, root.selectedColor.hsvSaturation, root.selectedColor.hsvValue, 1);
+                      root.stableHue = newHue;
+                    }
+                  }
+
+                  Binding {
+                    target: hueSpinBox
+                    property: "value"
+                    value: Math.round(root.displayHue * 360)
+                  }
+                }
+              }
+
+              // --- SATURATION ---
+              RowLayout {
+                Layout.fillWidth: true
+                spacing: Style.marginM
+
+                NRadioButton {
+                  ButtonGroup.group: colorValues
+                  text: "S"
+                  font.weight: Font.Bold
+                  onClicked: root.editMode = NColorPickerDialog.EditMode.S
+                  Layout.fillWidth: false
+                }
+
+                NSpinBox {
+                  id: satSpinBox
+                  from: 0
+                  to: 100
+
+                  onValueChanged: {
+                    if (!selectedSlider.pressed && !fieldMouse.pressed && !hexInput.activeFocus && value !== Math.round(root.selectedColor.hsvSaturation * 100)) {
+                      root.selectedColor = Qt.hsva(root.selectedColor.hsvHue, value / 100, root.selectedColor.hsvValue, 1);
+                    }
+                  }
+                  Binding {
+                    target: satSpinBox
+                    property: "value"
+                    value: Math.round(root.selectedColor.hsvSaturation * 100)
+                  }
+                }
+              }
+
+              // --- VALUE ---
+              RowLayout {
+                spacing: Style.marginM
+
+                NRadioButton {
+                  ButtonGroup.group: colorValues
+                  text: "V"
+                  font.weight: Font.Bold
+                  onClicked: root.editMode = NColorPickerDialog.EditMode.V
+                  Layout.fillWidth: false
+                }
+
+                NSpinBox {
+                  id: valSpinBox
+                  from: 0
+                  to: 100
+
+                  onValueChanged: {
+                    if (!selectedSlider.pressed && !fieldMouse.pressed && !hexInput.activeFocus && value !== Math.round(root.selectedColor.hsvValue * 100)) {
+                      root.selectedColor = Qt.hsva(root.selectedColor.hsvHue, root.selectedColor.hsvSaturation, value / 100, 1);
+                    }
+                  }
+                  Binding {
+                    target: valSpinBox
+                    property: "value"
+                    value: Math.round(root.selectedColor.hsvValue * 100)
+                  }
+                }
+              }
+
+              // Spacer
+              Item {
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+              }
+
+              // Hex input
+              RowLayout {
+                id: hexInput
+                Layout.fillWidth: true
+                spacing: Style.marginM
+
+                NLabel {
+                  label: "Hex:"
+                  Layout.alignment: Qt.AlignVCenter
+                }
+
+                NTextInput {
+                  text: root.selectedColor.toString().toUpperCase()
+                  fontFamily: Settings.data.ui.fontFixed
+                  Layout.fillWidth: true
+                  Layout.minimumWidth: implicitWidth
+                  onEditingFinished: {
+                    if (/^#[0-9A-F]{6}$/i.test(text)) {
+                      root.selectedColor = text;
+                    }
                   }
                 }
               }
             }
-          }
-        }
-      }
 
-      NBox {
-        Layout.fillWidth: true
-        Layout.preferredHeight: genericPalette.implicitHeight + Style.marginL * 2
+            RowLayout {
+              Layout.fillWidth: true
+              Layout.fillHeight: true
+              Layout.preferredWidth: 5
+              Layout.alignment: Qt.AlignTop
+              spacing: Style.marginS
 
-        ColumnLayout {
-          id: genericPalette
-          anchors.fill: parent
-          anchors.margins: Style.marginL
-          spacing: Style.marginS
+              Layout.topMargin: Math.round(2 * Style.uiScaleRatio) //Shim to try and line up colorField with SpinBoxes
 
-          NLabel {
-            label: I18n.tr("widgets.color-picker.palette.label")
-            description: I18n.tr("widgets.color-picker.palette.description")
-            Layout.fillWidth: true
-          }
+              // --- SLIDER ---
+              NColorSlider {
+                id: selectedSlider
+                Layout.fillHeight: true
+                rainbowMode: root.editMode === "h"
+                topColor: {
+                  if (rainbowMode)
+                    return "transparent";
+                  switch (root.editMode) {
+                  case NColorPickerDialog.EditMode.R:
+                    return "#FF0000";
+                  case NColorPickerDialog.EditMode.G:
+                    return "#00FF00";
+                  case NColorPickerDialog.EditMode.B:
+                    return "#0000FF";
+                  default:
+                    return "#FFFFFF";
+                  }
+                }
 
-          Flow {
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-            spacing: 6
-            flow: Flow.LeftToRight
+                Binding {
+                  target: selectedSlider
+                  property: "value"
+                  when: !selectedSlider.pressed // Only update from model when NOT dragging
+                  value: {
+                    switch (root.editMode) {
+                    case NColorPickerDialog.EditMode.R:
+                      return root.selectedColor.r;
+                    case NColorPickerDialog.EditMode.G:
+                      return root.selectedColor.g;
+                    case NColorPickerDialog.EditMode.B:
+                      return root.selectedColor.b;
+                    case NColorPickerDialog.EditMode.H:
+                      return root.displayHue;
+                    case NColorPickerDialog.EditMode.S:
+                      return root.selectedColor.hsvSaturation;
+                    case NColorPickerDialog.EditMode.V:
+                      return root.selectedColor.hsvValue;
+                    default:
+                      return 0;
+                    }
+                  }
+                }
 
-            Repeater {
-              model: ["#F44336", "#E91E63", "#9C27B0", "#673AB7", "#3F51B5", "#2196F3", "#03A9F4", "#00BCD4", "#009688", "#4CAF50", "#8BC34A", "#CDDC39", "#FFEB3B", "#FFC107", "#FF9800", "#FF5722", "#795548", "#9E9E9E", "#E74C3C", "#E67E22", "#F1C40F", "#2ECC71", "#1ABC9C", "#3498DB", "#2980B9", "#9B59B6", "#34495E", "#2C3E50", "#95A5A6", "#7F8C8D",
-                Color.white, Color.black]
+                onMoved: {
+                  var v = value;
+                  switch (root.editMode) {
+                  case NColorPickerDialog.EditMode.R:
+                    root.selectedColor = Qt.rgba(v, root.selectedColor.g, root.selectedColor.b, 1);
+                    break;
+                  case NColorPickerDialog.EditMode.G:
+                    root.selectedColor = Qt.rgba(root.selectedColor.r, v, root.selectedColor.b, 1);
+                    break;
+                  case NColorPickerDialog.EditMode.B:
+                    root.selectedColor = Qt.rgba(root.selectedColor.r, root.selectedColor.g, v, 1);
+                    break;
+                  case NColorPickerDialog.EditMode.H:
+                    root.selectedColor = Qt.hsva(v, root.selectedColor.hsvSaturation, root.selectedColor.hsvValue, 1);
+                    root.stableHue = v;
+                    break;
+                  case NColorPickerDialog.EditMode.S:
+                    root.selectedColor = Qt.hsva(root.selectedColor.hsvHue, v, root.selectedColor.hsvValue, 1);
+                    break;
+                  case NColorPickerDialog.EditMode.V:
+                    root.selectedColor = Qt.hsva(root.selectedColor.hsvHue, root.selectedColor.hsvSaturation, v, 1);
+                    break;
+                  }
+                }
+              }
 
+              // Color Field
               Rectangle {
-                width: 24
-                height: 24
-                radius: Style.radiusXXS
-                color: modelData
-                border.color: root.selectedColor === modelData ? Color.mPrimary : Color.mOutline
-                border.width: Math.max(1, root.selectedColor === modelData ? Style.borderM : Style.borderS)
+                id: colorField
+                Layout.fillWidth: true
+
+                Layout.preferredHeight: width
+                Layout.alignment: Qt.AlignTop
+
+                radius: 0
+                border.color: Color.mOutline
+                border.width: Style.borderS
+                clip: true
+
+                ShaderEffect {
+                  anchors.fill: parent
+                  anchors.margins: 1 // Avoid drawing over the border
+
+                  fragmentShader: "../Shaders/qsb/color_picker.frag.qsb"
+
+                  // Pass which radio is selected
+                  readonly property real fixedVal: {
+                    switch (root.editMode) {
+                    case NColorPickerDialog.EditMode.R:
+                      return root.selectedColor.r;
+                    case NColorPickerDialog.EditMode.G:
+                      return root.selectedColor.g;
+                    case NColorPickerDialog.EditMode.B:
+                      return root.selectedColor.b;
+                    case NColorPickerDialog.EditMode.H:
+                      return root.displayHue;
+                    case NColorPickerDialog.EditMode.S:
+                      return root.selectedColor.hsvSaturation;
+                    case NColorPickerDialog.EditMode.V:
+                      return root.selectedColor.hsvValue;
+                    default:
+                      return 0;
+                    }
+                  }
+
+                  // Send as one vector because GPUs are so damn picky
+                  property vector4d params: Qt.vector4d(1.0, fixedVal, root.editMode, 0)
+                }
 
                 MouseArea {
+                  id: fieldMouse
                   anchors.fill: parent
-                  cursorShape: Qt.PointingHandCursor
-                  onClicked: {
-                    root.selectedColor = modelData;
-                    var hsv = ColorsConvert.rgbToHsv(root.selectedColor.r * 255, root.selectedColor.g * 255, root.selectedColor.b * 255);
-                    root.currentHue = hsv.h;
-                    root.currentSaturation = hsv.s;
+                  cursorShape: Qt.CrossCursor
+
+                  // Update color when clicking or dragging
+                  function updateColor(mouse) {
+                    // Normalize X and Y (0.0 to 1.0)
+                    var xVal = Math.max(0, Math.min(1, mouse.x / width));
+                    var yVal = Math.max(0, Math.min(1, 1.0 - (mouse.y / height))); // Flip Y (0 at bottom)
+
+                    // Get the current fixed value (from the slider)
+                    var fixed = 0.0;
+
+                    switch (root.editMode) {
+                    case NColorPickerDialog.EditMode.R:
+                      fixed = root.selectedColor.r;
+                      root.selectedColor = Qt.rgba(fixed, xVal, yVal, 1);
+                      break;
+                    case NColorPickerDialog.EditMode.G:
+                      fixed = root.selectedColor.g;
+                      root.selectedColor = Qt.rgba(xVal, fixed, yVal, 1);
+                      break;
+                    case NColorPickerDialog.EditMode.B:
+                      fixed = root.selectedColor.b;
+                      root.selectedColor = Qt.rgba(xVal, yVal, fixed, 1);
+                      break;
+                    case NColorPickerDialog.EditMode.H:
+                      // Use stableHue to prevent flipping to -1
+                      fixed = root.displayHue;
+                      root.selectedColor = Qt.hsva(fixed, xVal, yVal, 1);
+                      root.stableHue = fixed;
+                      break;
+                    case NColorPickerDialog.EditMode.S:
+                      fixed = root.selectedColor.hsvSaturation;
+                      root.selectedColor = Qt.hsva(xVal, fixed, yVal, 1);
+                      // If we dragged Hue (xVal), update stableHue
+                      root.stableHue = yVal;
+                      break;
+                    case NColorPickerDialog.EditMode.V:
+                      fixed = root.selectedColor.hsvValue;
+                      root.selectedColor = Qt.hsva(xVal, yVal, fixed, 1);
+                      // If we dragged Hue (xVal), update stableHue
+                      root.stableHue = xVal;
+                      break;
+                    }
+                  }
+                  onPressed: mouse => updateColor(mouse)
+                  onPositionChanged: mouse => updateColor(mouse)
+                }
+
+                // Color Indicator
+                Rectangle {
+                  width: 10
+                  height: 10
+                  radius: 5
+                  color: "transparent"
+                  border.color: root.selectedColor.hsvValue < 0.5 ? "white" : "black"
+                  border.width: 1
+
+                  // Find position based on the current color
+                  readonly property point selectedPos: {
+                    switch (root.editMode) {
+                    case NColorPickerDialog.EditMode.R:
+                      return Qt.point(root.selectedColor.g, root.selectedColor.b);
+                    case NColorPickerDialog.EditMode.G:
+                      return Qt.point(root.selectedColor.r, root.selectedColor.b);
+                    case NColorPickerDialog.EditMode.B:
+                      return Qt.point(root.selectedColor.r, root.selectedColor.g);
+                    case NColorPickerDialog.EditMode.H:
+                      return Qt.point(root.selectedColor.hsvSaturation, root.selectedColor.hsvValue);
+                    case NColorPickerDialog.EditMode.S:
+                      return Qt.point(root.displayHue, root.selectedColor.hsvValue);
+                    case NColorPickerDialog.EditMode.V:
+                      return Qt.point(root.displayHue, root.selectedColor.hsvSaturation);
+                    default:
+                      return Qt.point(0, 0);
+                    }
+                  }
+
+                  // Convert values to pixel position
+                  x: (selectedPos.x * parent.width) - width / 2
+                  y: ((1.0 - selectedPos.y) * parent.height) - height / 2
+                }
+
+                // Redraw the border in case Color Indicator is near the edge
+                Rectangle {
+                  anchors.fill: parent
+                  color: "transparent"
+                  border.color: Color.mOutline
+                  border.width: Style.borderS
+                  antialiasing: false
+                }
+              }
+            }
+          }
+
+          NCollapsible {
+            id: paletteCollapsible
+            label: I18n.tr("widgets.color-picker.palette.label")
+            description: I18n.tr("widgets.color-picker.palette.description")
+
+            Layout.fillWidth: true
+            contentSpacing: Style.marginS
+
+            GridLayout {
+              Layout.alignment: Qt.AlignHCenter
+              columns: 15
+              columnSpacing: 6
+              rowSpacing: 6
+
+              Repeater {
+                model: ColorList.colors
+
+                Rectangle {
+                  width: 24
+                  height: 24
+                  radius: Style.radiusXXS
+                  color: modelData.color
+                  border.color: root.selectedColor.toString() === modelData.color.toString() ? Color.mPrimary : Color.mOutline
+                  border.width: Math.max(1, root.selectedColor.toString() === modelData.color.toString() ? Style.borderM : Style.borderS)
+
+                  MouseArea {
+                    anchors.fill: parent
+                    cursorShape: Qt.PointingHandCursor
+                    hoverEnabled: true
+
+                    onEntered: {
+                      TooltipService.show(parent, modelData.name + "\n" + parent.color.toString().toUpperCase());
+                    }
+                    onExited: {
+                      TooltipService.hide();
+                    }
+                    onClicked: {
+                      root.selectedColor = modelData.color;
+                      TooltipService.hide();
+                    }
+                  }
+                }
+              }
+
+              NDivider {
+                Layout.columnSpan: 15
+                Layout.fillWidth: true
+                Layout.topMargin: Style.marginXS
+                Layout.bottomMargin: 0
+              }
+
+              NLabel {
+                Layout.columnSpan: 15
+                Layout.fillWidth: true
+                description: I18n.tr("widgets.color-picker.palette.theme-colors")
+              }
+
+              Repeater {
+                model: [
+                  {
+                    name: "mPrimary",
+                    color: Color.mPrimary
+                  },
+                  {
+                    name: "mSecondary",
+                    color: Color.mSecondary
+                  },
+                  {
+                    name: "mTertiary",
+                    color: Color.mTertiary
+                  },
+                  {
+                    name: "mError",
+                    color: Color.mError
+                  },
+                  {
+                    name: "mSurface",
+                    color: Color.mSurface
+                  },
+                  {
+                    name: "mSurfaceVariant",
+                    color: Color.mSurfaceVariant
+                  },
+                  {
+                    name: "mOutline",
+                    color: Color.mOutline
+                  }
+                ]
+
+                Rectangle {
+                  width: 24
+                  height: 24
+                  radius: 4
+                  color: modelData.color
+                  border.color: root.selectedColor.toString() === modelData.color.toString() ? Color.mPrimary : Color.mOutline
+                  border.width: root.selectedColor.toString() === modelData.color.toString() ? 2 : 1
+
+                  MouseArea {
+                    anchors.fill: parent
+                    cursorShape: Qt.PointingHandCursor
+                    hoverEnabled: true
+
+                    onEntered: {
+                      TooltipService.show(screen, parent, modelData.name + "\n" + parent.color.toString().toUpperCase(), "auto");
+                    }
+                    onExited: {
+                      TooltipService.hide();
+                    }
+                    onClicked: {
+                      root.selectedColor = modelData.color;
+                      TooltipService.hide();
+                    }
                   }
                 }
               }

Widgets/NColorSlider.qml

@@ -0,0 +1,177 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Effects
+import qs.Commons
+import qs.Services.UI
+
+Slider {
+  id: root
+
+  property color fillColor: "transparent"
+  property var cutoutColor: Color.mSurface
+  property bool snapAlways: true
+  property real widthRatio: 0.7
+  property string tooltipText
+  property string tooltipDirection: "auto"
+  property bool hovering: false
+  property color topColor: "white"
+  property color bottomColor: "black"
+  property bool rainbowMode: false
+
+  readonly property real knobDiameter: Math.round((Style.baseWidgetSize * widthRatio * Style.uiScaleRatio) / 2) * 2
+  readonly property real trackWidth: Math.round((knobDiameter * 0.4 * Style.uiScaleRatio) / 2) * 2
+  readonly property real cutoutExtra: Math.round((Style.baseWidgetSize * 0.1 * Style.uiScaleRatio) / 2) * 2
+
+  //horizontal: false
+  orientation: Qt.Vertical
+
+  padding: cutoutExtra / 2
+
+  snapMode: snapAlways ? Slider.SnapAlways : Slider.SnapOnRelease
+  implicitWidth: Math.max(trackWidth, knobDiameter)
+
+  background: Rectangle {
+    anchors.horizontalCenter: parent.horizontalCenter
+    anchors.verticalCenter: parent.verticalCenter
+
+    x: root.leftPadding + root.availableWidth / 2 - width / 2
+
+    height: root.availableHeight - root.knobDiameter
+    width: root.trackWidth
+
+    radius: width / 2
+    color: Qt.alpha(Color.mSurface, 0.5)
+    border.color: Qt.alpha(Color.mOutline, 0.5)
+    border.width: Style.borderS
+
+    // Gradients
+    gradient: root.rainbowMode ? rainbowGradient : standardGradient
+    Gradient {
+      id: standardGradient
+      orientation: Gradient.Vertical
+      GradientStop {
+        position: 0.0
+        color: root.topColor
+      }
+      GradientStop {
+        position: 1.0
+        color: root.bottomColor
+      }
+    }
+    Gradient {
+      id: rainbowGradient
+      orientation: Gradient.Vertical
+      GradientStop {
+        position: 0.000
+        color: "#FF0000"
+      }
+      GradientStop {
+        position: 0.167
+        color: "#FF00FF"
+      }
+      GradientStop {
+        position: 0.333
+        color: "#0000FF"
+      }
+      GradientStop {
+        position: 0.500
+        color: "#00FFFF"
+      }
+      GradientStop {
+        position: 0.667
+        color: "#00FF00"
+      }
+      GradientStop {
+        position: 0.833
+        color: "#FFFF00"
+      }
+      GradientStop {
+        position: 1.000
+        color: "#FF0000"
+      }
+    }
+
+    // Circular cutout
+    Rectangle {
+      id: knobCutout
+      implicitWidth: root.knobDiameter + root.cutoutExtra
+      implicitHeight: root.knobDiameter + root.cutoutExtra
+      radius: width / 2
+      color: root.cutoutColor !== undefined ? root.cutoutColor : Color.mSurface
+
+      y: root.visualPosition * (root.availableHeight - root.knobDiameter) - ((root.knobDiameter + root.cutoutExtra) / 2)
+      anchors.horizontalCenter: parent.horizontalCenter
+    }
+  }
+
+  handle: Item {
+    implicitWidth: root.knobDiameter
+    implicitHeight: root.knobDiameter
+    y: root.topPadding + root.visualPosition * (root.availableHeight - height)
+    anchors.horizontalCenter: parent.horizontalCenter
+
+    Rectangle {
+      id: knob
+      implicitWidth: root.knobDiameter
+      implicitHeight: root.knobDiameter
+      radius: width / 2
+      color: {
+        if (root.rainbowMode) {
+          // Hue Logic: Map position (0.0 to 1.0) directly to Hue
+          return Qt.hsva(1 - root.visualPosition, 1, 1, 1);
+        } else {
+          // Linear Interpolation for Standard Gradients
+          // visualPosition 0.0 = Top, 1.0 = Bottom
+          var t = root.visualPosition;
+          var r = root.topColor.r * (1 - t) + root.bottomColor.r * t;
+          var g = root.topColor.g * (1 - t) + root.bottomColor.g * t;
+          var b = root.topColor.b * (1 - t) + root.bottomColor.b * t;
+          return Qt.rgba(r, g, b, 1);
+        }
+      }
+
+      border.color: root.pressed ? Color.mHover : Color.mPrimary
+      border.width: Style.borderL
+      anchors.centerIn: parent
+
+      Behavior on color {
+        ColorAnimation {
+          duration: Style.animationFast
+        }
+      }
+    }
+
+    MouseArea {
+      enabled: true
+      anchors.fill: parent
+      cursorShape: Qt.PointingHandCursor
+      hoverEnabled: true
+      acceptedButtons: Qt.NoButton // Don't accept any mouse buttons - only hover
+      propagateComposedEvents: true
+
+      onEntered: {
+        root.hovering = true;
+        if (root.tooltipText) {
+          TooltipService.show(screen, knob, root.tooltipText, root.tooltipDirection);
+        }
+      }
+
+      onExited: {
+        root.hovering = false;
+        if (root.tooltipText) {
+          TooltipService.hide();
+        }
+      }
+    }
+
+    // Hide tooltip when slider is pressed (anywhere on the slider)
+    Connections {
+      target: root
+      function onPressedChanged() {
+        if (root.pressed && root.tooltipText) {
+          TooltipService.hide();
+        }
+      }
+    }
+  }
+}