feat: shadow

Border exclusivity
Fix slider handle text colour

config/BarConfig.qml

@@ -19,7 +19,7 @@ Singleton {
         property int totalHeight: height
         property int height: 40
         property int innerHeight: 30
-        property int floatingGap: 10 + BackgroundConfig.border.thickness
+        property int floatingGap: 15
         property int maxLabelWidth: 600
         property int maxLabelHeight: 400
     }

modules/background/Border.qml

@@ -4,54 +4,96 @@ import Quickshell
 import QtQuick
 import QtQuick.Effects
 
-StyledWindow {
-    id: win
+Scope {
+    id: root
 
-    name: "border"
-    exclusionMode: ExclusionMode.Ignore
+    required property ShellScreen screen
 
-    mask: Region {
-        x: BackgroundConfig.border.thickness
-        y: BackgroundConfig.border.thickness
-        width: win.screen.width - BackgroundConfig.border.thickness * 2
-        height: win.screen.height - BackgroundConfig.border.thickness * 2
-        intersection: Intersection.Xor
-    }
+    StyledWindow {
+        id: win
 
-    anchors.top: true
-    anchors.bottom: true
-    anchors.left: true
-    anchors.right: true
+        screen: root.screen
+        name: "border"
+        exclusionMode: ExclusionMode.Ignore
 
-    StyledRect {
-        id: rect
+        mask: Region {
+            x: BackgroundConfig.border.thickness
+            y: BackgroundConfig.border.thickness
+            width: win.screen.width - BackgroundConfig.border.thickness * 2
+            height: win.screen.height - BackgroundConfig.border.thickness * 2
+            intersection: Intersection.Xor
+        }
 
-        anchors.fill: parent
-        color: Appearance.alpha(Appearance.colours.m3surface, false)
-        visible: false
-    }
+        anchors.top: true
+        anchors.bottom: true
+        anchors.left: true
+        anchors.right: true
 
-    Item {
-        id: mask
+        StyledRect {
+            id: rect
 
-        anchors.fill: parent
-        layer.enabled: true
-        visible: false
-
-        Rectangle {
             anchors.fill: parent
-            anchors.margins: BackgroundConfig.border.thickness
-            radius: BackgroundConfig.border.rounding
+            color: Appearance.alpha(Appearance.colours.m3surface, false)
+            visible: false
+        }
+
+        Item {
+            id: mask
+
+            anchors.fill: parent
+            layer.enabled: true
+            visible: false
+
+            Rectangle {
+                anchors.fill: parent
+                anchors.margins: BackgroundConfig.border.thickness
+                radius: BackgroundConfig.border.rounding
+            }
+        }
+
+        MultiEffect {
+            id: effect
+
+            visible: false
+            anchors.fill: parent
+            maskEnabled: true
+            maskInverted: true
+            maskSource: mask
+            source: rect
+            maskThresholdMin: 0.5
+            maskSpreadAtMin: 1
+        }
+
+        LayerShadow {
+            source: effect
         }
     }
 
-    MultiEffect {
-        anchors.fill: parent
-        maskEnabled: true
-        maskInverted: true
-        maskSource: mask
-        source: rect
-        maskThresholdMin: 0.5
-        maskSpreadAtMin: 1
+    ExclusionZone {
+        anchors.left: false
+    }
+
+    ExclusionZone {
+        anchors.top: false
+    }
+
+    ExclusionZone {
+        anchors.right: false
+    }
+
+    ExclusionZone {
+        anchors.bottom: false
+    }
+
+    component ExclusionZone: StyledWindow {
+        screen: root.screen
+        name: "border-exclusion"
+        width: BackgroundConfig.border.thickness
+        height: BackgroundConfig.border.thickness
+
+        anchors.top: true
+        anchors.left: true
+        anchors.bottom: true
+        anchors.right: true
     }
 }

modules/launcher/Launcher.qml

@@ -25,7 +25,6 @@ Scope {
                 item: wrapper
             }
 
-            margins.bottom: BackgroundConfig.border.thickness
             anchors.top: true
             anchors.left: true
             anchors.bottom: true
@@ -34,6 +33,8 @@ Scope {
             Background {
                 id: bg
 
+                visible: false
+
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.bottom: parent.bottom
 
@@ -41,6 +42,10 @@ Scope {
                 realWrapperHeight: Math.min(wrapper.height, content.height)
             }
 
+            LayerShadow {
+                source: bg
+            }
+
             Wrapper {
                 id: wrapper
 

modules/osd/Osd.qml

@@ -64,7 +64,6 @@ Variants {
                     item: wrapper
                 }
 
-                margins.right: BackgroundConfig.border.thickness
                 anchors.left: true
                 anchors.right: true
                 height: wrapper.height
@@ -72,6 +71,8 @@ Variants {
                 Background {
                     id: bg
 
+                    visible: false
+
                     anchors.verticalCenter: parent.verticalCenter
                     anchors.right: parent.right
 
@@ -79,6 +80,10 @@ Variants {
                     realWrapperWidth: Math.min(wrapper.width, content.width)
                 }
 
+                LayerShadow {
+                    source: bg
+                }
+
                 Wrapper {
                     id: wrapper
 

widgets/LayerShadow.qml

@@ -0,0 +1,9 @@
+import "root:/config"
+import Qt5Compat.GraphicalEffects
+
+DropShadow {
+    anchors.fill: source
+    color: Qt.alpha(Appearance.colours.m3shadow, 0.7)
+    radius: 10
+    samples: 1 + radius * 2
+}

widgets/VerticalSlider.qml

@@ -57,7 +57,7 @@ Slider {
 
                 animate: true
                 text: root.icon
-                color: Appearance.colours.m3onInverseSurface
+                color: Appearance.colours.m3inverseOnSurface
                 anchors.centerIn: parent
 
                 states: State {