flea-qml 0.0.0-stage → 0.2.0

package/ui/boot/Ui/SpeedTestOverlay.qml

@@ -0,0 +1,412 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Shapes
+import Quickshell
+import Quickshell.Wayland
+import qs.Commons
+import qs.Commons as Commons
+import qs.Ui
+
+// Centered speed test overlay shared by the network and disk speed tests. No
+// card: like the Tucson's floating cluster, the two dials sit directly on a
+// darkened scrim -- open 270° arcs, faint tick rings, hubless gradient
+// needles, and a digital readout in the middle. Esc, the scrim, or the corner
+// dismiss close it; the needles sweep to full scale and back on open, then
+// track the live readings. Callers name the dials, the unit, and the scale.
+PanelWindow {
+  id: root
+  // Right-to-left languages read this window mirrored.
+  Binding { target: root.contentItem; property: "LayoutMirroring.enabled"; value: Commons.I18n.rightToLeft }
+  Binding { target: root.contentItem; property: "LayoutMirroring.childrenInherit"; value: true }
+
+
+  required property string fontFamily
+  required property bool running
+  required property string leftLabel
+  required property string rightLabel
+  property string unit: "Mbps"
+  property string title: ""
+  property string layerNamespace: "omarchy-speed-test"
+  property string runAgainTooltip: Commons.I18n.t("speedtest.measureAgain")
+  property real leftValue: 0
+  property real rightValue: 0
+  property bool leftLive: false
+  property bool rightLive: false
+  property string error: ""
+  property bool open: false
+  // Full-scale latch points for the dials, smallest first. The first stop is
+  // the base scale a fresh run starts from.
+  property var scaleStops: [100, 250, 500, 1000, 2500, 5000, 10000]
+  property real fullScale: scaleStops[0]
+
+  signal closeRequested()
+  signal runAgainRequested()
+
+  readonly property bool failed: error !== ""
+
+  function resetScale() {
+    fullScale = scaleStops[0]
+  }
+
+  function expandScale(value) {
+    // Either reading ranges the entire cluster upward. Keeping this latch on
+    // the overlay ensures both dials always describe the same scale.
+    for (var i = 0; i < scaleStops.length; i++) {
+      if (value <= scaleStops[i] * 0.92) {
+        if (scaleStops[i] > fullScale) fullScale = scaleStops[i]
+        return
+      }
+    }
+    fullScale = scaleStops[scaleStops.length - 1]
+  }
+
+  onRunningChanged: if (running) resetScale()
+  onScaleStopsChanged: resetScale()
+  onLeftValueChanged: expandScale(leftValue)
+  onRightValueChanged: expandScale(rightValue)
+
+  Behavior on fullScale {
+    NumberAnimation { duration: Style.duration(400); easing.type: Easing.OutCubic }
+  }
+
+  // The scrim below is a fixed near-black regardless of theme, so text and
+  // ticks on it need a fixed light palette, not the themed bar.foreground.
+  readonly property color onScrim: "white"
+  readonly property color onScrimDim: Qt.rgba(1, 1, 1, 0.55)
+  readonly property color onScrimUrgent: "#ff6b6b"
+
+  visible: open
+  // The window is instantiated hidden, so re-acquire focus after mapping and
+  // fire the ignition sweep once the surface is actually on screen.
+  onOpenChanged: {
+    if (open) Qt.callLater(function() {
+      if (!root.open) return
+      keyCatcher.forceActiveFocus()
+      leftDial.ignite()
+      rightDial.ignite()
+    })
+  }
+  anchors { top: true; bottom: true; left: true; right: true }
+  color: "transparent"
+  exclusionMode: ExclusionMode.Ignore
+  WlrLayershell.namespace: root.layerNamespace
+  WlrLayershell.layer: WlrLayer.Overlay
+  WlrLayershell.keyboardFocus: WlrKeyboardFocus.Exclusive
+
+  // Deep scrim: with no card behind them, the floating dials need the
+  // backdrop to carry the contrast on any wallpaper, like the near-black
+  // panel behind a real cluster.
+  Rectangle {
+    anchors.fill: parent
+    color: Qt.rgba(0, 0, 0, 0.78)
+
+    MouseArea {
+      anchors.fill: parent
+      onClicked: root.closeRequested()
+    }
+  }
+
+  Item {
+    id: keyCatcher
+    anchors.fill: parent
+    focus: true
+
+    Keys.onEscapePressed: root.closeRequested()
+    Keys.onReturnPressed: if (!root.running) root.runAgainRequested()
+    Keys.onEnterPressed: if (!root.running) root.runAgainRequested()
+
+    Item {
+      id: cluster
+      anchors.centerIn: parent
+      width: content.implicitWidth
+      height: content.implicitHeight
+      // Narrow or heavily scaled outputs: shrink the whole cluster rather
+      // than clipping it at the screen edge.
+      scale: Math.min(1,
+        (keyCatcher.width - Style.space(32)) / Math.max(1, width),
+        (keyCatcher.height - Style.space(32)) / Math.max(1, height))
+
+      // Swallow clicks so only the scrim outside the cluster dismisses.
+      MouseArea { anchors.fill: parent; onClicked: {} }
+
+      ColumnLayout {
+        id: content
+        anchors.fill: parent
+        spacing: Style.space(16)
+
+        Text {
+          textFormat: Text.PlainText
+          visible: root.title !== ""
+          text: root.title.toUpperCase()
+          color: root.onScrimDim
+          font.family: root.fontFamily
+          font.pixelSize: Style.font.caption
+          font.bold: true
+          font.letterSpacing: 2
+          Layout.fillWidth: true
+          horizontalAlignment: Text.AlignHCenter
+        }
+
+        Row {
+          spacing: Style.space(48)
+          Layout.alignment: Qt.AlignHCenter
+
+          SpeedDial {
+            id: leftDial
+            label: root.leftLabel
+            value: root.leftValue
+            live: root.leftLive
+          }
+
+          SpeedDial {
+            id: rightDial
+            label: root.rightLabel
+            value: root.rightValue
+            live: root.rightLive
+          }
+        }
+
+        // Centered on the dial pair. Fades rather than unmounts while a run
+        // is in flight, so the cluster never shifts.
+        Button {
+          text: Commons.I18n.t("speedtest.runAgain")
+          tooltipText: root.runAgainTooltip
+          bordered: true
+          enabled: !root.running
+          opacity: root.running ? 0 : 1
+          foreground: root.onScrim
+          fontFamily: root.fontFamily
+          fontSize: Style.font.bodySmall
+          horizontalPadding: Style.space(14)
+          verticalPadding: Style.space(4)
+          Layout.alignment: Qt.AlignHCenter
+          onClicked: root.runAgainRequested()
+
+          Behavior on opacity {
+            NumberAnimation { duration: Style.duration(240); easing.type: Easing.OutCubic }
+          }
+        }
+
+        Text {
+          textFormat: Text.PlainText
+          visible: root.failed
+          text: root.error
+          color: root.onScrimUrgent
+          font.family: root.fontFamily
+          font.pixelSize: Style.font.bodySmall
+          wrapMode: Text.Wrap
+          Layout.fillWidth: true
+          Layout.maximumWidth: Style.space(440)
+          horizontalAlignment: Text.AlignHCenter
+        }
+      }
+    }
+  }
+
+  // One floating cluster dial: an open 270° scale with the gap at the
+  // bottom, a faint tick ring, a glowing accent value arc, a hubless needle
+  // that fades toward the pivot, and a digital readout in the middle. All
+  // writes to the needle funnel through `shown` so the ignition sweep and
+  // live readings share one animation.
+  component SpeedDial: Item {
+    id: dial
+
+    required property string label
+    required property real value
+    required property bool live
+
+    readonly property real diameter: Style.space(210)
+    // 0° = 3 o'clock, increasing clockwise (PathAngleArc's convention).
+    readonly property real dialStart: 135
+    readonly property real dialSweep: 270
+    readonly property int tickCount: 46
+    readonly property real arcWidth: Style.space(4)
+    readonly property real arcRadius: diameter / 2 - arcWidth
+    readonly property color trackColor: Qt.rgba(1, 1, 1, 0.14)
+    readonly property color minorTickColor: Qt.rgba(1, 1, 1, 0.12)
+    readonly property color majorTickColor: Qt.rgba(1, 1, 1, 0.3)
+    // The dial that isn't measuring yet sits dimmed until it gets a figure.
+    readonly property bool engaged: live || value > 0
+
+    property real shown: 0
+    // The digital readout stays on the real figure while the ignition sweep
+    // drives the needle -- a cluster sweeps its gauges, not its numerals.
+    readonly property real reading: ignition.running ? value : shown
+    readonly property real fullScale: root.fullScale
+    readonly property real fraction: fullScale > 0 ? Math.max(0, Math.min(1, shown / fullScale)) : 0
+    readonly property bool arcVisible: fraction > 0.004
+
+    width: diameter
+    height: diameter
+    opacity: engaged ? 1 : 0.5
+
+    Behavior on opacity {
+      NumberAnimation { duration: Style.duration(240); easing.type: Easing.OutCubic }
+    }
+
+    // Live readings land once a second; glide between them rather than snap.
+    Behavior on shown {
+      enabled: !ignition.running
+      NumberAnimation { duration: Style.duration(600); easing.type: Easing.OutCubic }
+    }
+
+    onValueChanged: {
+      if (!ignition.running) shown = value
+    }
+
+    function ignite() {
+      ignition.restart()
+    }
+
+    // Car-cluster power-on: needle sweeps to full scale and falls back before
+    // the live figures take over.
+    SequentialAnimation {
+      id: ignition
+      NumberAnimation { target: dial; property: "shown"; to: dial.fullScale; duration: Style.duration(550); easing.type: Easing.InOutCubic }
+      NumberAnimation { target: dial; property: "shown"; to: 0; duration: Style.duration(650); easing.type: Easing.OutCubic }
+      onFinished: dial.shown = dial.value
+    }
+
+    Shape {
+      anchors.fill: parent
+      preferredRendererType: Shape.CurveRenderer
+
+      // Track: the full scale, always visible, dim.
+      ShapePath {
+        strokeWidth: dial.arcWidth
+        strokeColor: dial.trackColor
+        fillColor: "transparent"
+        capStyle: ShapePath.RoundCap
+
+        PathAngleArc {
+          centerX: dial.width / 2
+          centerY: dial.height / 2
+          radiusX: dial.arcRadius
+          radiusY: dial.arcRadius
+          startAngle: dial.dialStart
+          sweepAngle: dial.dialSweep
+        }
+      }
+
+      // Soft under-glow beneath the value arc, standing in for the backlit
+      // ring of a real cluster. Both arcs go transparent at rest, or their
+      // round caps would leave a stray dot at the foot of the scale.
+      ShapePath {
+        strokeWidth: dial.arcWidth * 3
+        strokeColor: dial.arcVisible ? Qt.rgba(Commons.Color.accent.r, Commons.Color.accent.g, Commons.Color.accent.b, 0.18) : "transparent"
+        fillColor: "transparent"
+        capStyle: ShapePath.RoundCap
+
+        PathAngleArc {
+          centerX: dial.width / 2
+          centerY: dial.height / 2
+          radiusX: dial.arcRadius
+          radiusY: dial.arcRadius
+          startAngle: dial.dialStart
+          sweepAngle: dial.dialSweep * dial.fraction
+        }
+      }
+
+      // Value: fills behind the needle.
+      ShapePath {
+        strokeWidth: dial.arcWidth
+        strokeColor: dial.arcVisible ? Commons.Color.accent : "transparent"
+        fillColor: "transparent"
+        capStyle: ShapePath.RoundCap
+
+        PathAngleArc {
+          centerX: dial.width / 2
+          centerY: dial.height / 2
+          radiusX: dial.arcRadius
+          radiusY: dial.arcRadius
+          startAngle: dial.dialStart
+          sweepAngle: dial.dialSweep * dial.fraction
+        }
+      }
+    }
+
+    // Faint tick ring just inside the arc; every fifth tick is a major.
+    Repeater {
+      model: dial.tickCount
+
+      Item {
+        required property int index
+        readonly property bool major: index % 5 === 0
+
+        anchors.fill: parent
+        rotation: dial.dialStart + (index / (dial.tickCount - 1)) * dial.dialSweep - 270
+
+        Rectangle {
+          anchors.horizontalCenter: parent.horizontalCenter
+          y: dial.arcWidth * 2 + (parent.major ? 0 : Style.space(2))
+          width: parent.major ? Math.max(2, Style.space(2)) : 1
+          height: parent.major ? Style.space(10) : Style.space(6)
+          radius: width / 2
+          color: parent.major ? dial.majorTickColor : dial.minorTickColor
+        }
+      }
+    }
+
+    // Hubless needle: a slender sliver that fades out toward the pivot, so
+    // it reads as floating like the rest of the cluster.
+    Item {
+      anchors.fill: parent
+      rotation: dial.dialStart + dial.fraction * dial.dialSweep - 270
+
+      Rectangle {
+        anchors.horizontalCenter: parent.horizontalCenter
+        y: dial.arcWidth * 2 + Style.space(10)
+        width: Math.max(2, Style.space(3))
+        height: dial.diameter * 0.32
+        radius: width / 2
+
+        gradient: Gradient {
+          GradientStop { position: 0.0; color: Commons.Color.accent }
+          GradientStop { position: 0.55; color: Commons.Color.accent }
+          GradientStop { position: 1.0; color: "transparent" }
+        }
+      }
+    }
+
+    Column {
+      anchors.horizontalCenter: parent.horizontalCenter
+      anchors.top: parent.verticalCenter
+      anchors.topMargin: Style.space(14)
+      spacing: 0
+
+      Text {
+        textFormat: Text.PlainText
+        anchors.horizontalCenter: parent.horizontalCenter
+        // Written in the interface language's decimal separator and digits.
+        text: Commons.I18n.formatNumber(dial.reading, dial.reading < 10 ? 1 : 0)
+        color: root.onScrim
+        font.family: root.fontFamily
+        font.pixelSize: Style.font.display
+        font.bold: true
+      }
+
+      Text {
+        textFormat: Text.PlainText
+        anchors.horizontalCenter: parent.horizontalCenter
+        text: root.unit
+        color: root.onScrimDim
+        font.family: root.fontFamily
+        font.pixelSize: Style.font.caption
+      }
+    }
+
+    // The 90° gap at the bottom of the scale is where a cluster prints its
+    // unit; here it names the direction.
+    Text {
+      textFormat: Text.PlainText
+      anchors.horizontalCenter: parent.horizontalCenter
+      anchors.bottom: parent.bottom
+      text: dial.label
+      color: root.onScrimDim
+      font.family: root.fontFamily
+      font.pixelSize: Style.font.caption
+      font.bold: true
+      font.letterSpacing: 1.5
+    }
+  }
+}

package/ui/boot/Ui/TextField.qml

@@ -0,0 +1,58 @@
+import QtQuick
+import QtQuick.Controls
+import qs.Commons
+import qs.Commons as Commons
+
+// Single-line text input with the kit's focus + selection styling. Inherits
+// from Qt Quick Controls TextField so the underlying type's API (text,
+// placeholderText, accepted, editingFinished, validator, ...) is available
+// to callers without re-exposing each property.
+//
+// Defaults bind to qs.Commons.Color so a caller with no theme overrides
+// just works; foreground / accent / selectionTint can be overridden per
+// instance. activeFocus and mouse hover / panel cursor use the same
+// hover-cursor defaults, so text inputs match Button, Toggle, and Dropdown.
+//
+// Sizing is driven by font.pixelSize + verticalPadding. The default 30px
+// implicitHeight fits dialog forms; inline callers (wifi's row-embedded
+// passphrase prompt) drop verticalPadding to match a 22-26px row.
+TextField {
+  id: root
+
+  property color foreground: Commons.Color.foreground
+  property color accent: Commons.Color.accent
+  property color selectionTint: Style.selectionFillFor(foreground, accent)
+  property bool password: false
+  property real horizontalPadding: Style.spacing.controlPaddingX
+  property real verticalPadding: Style.spacing.inputPaddingY
+
+  // Panel-cursor flag. When true (and the field isn't already focused),
+  // the background paints the shared hover/cursor state.
+  // For mouse-enter/leave the consumer reads QQC TextField's inherited
+  // `hovered` property (via onHoveredChanged) — we don't add a sibling
+  // signal because the inherited property would shadow it.
+  property bool hasCursor: false
+
+  readonly property bool _focused: activeFocus
+  readonly property bool _hot: hovered || hasCursor
+  readonly property var _borderSpec: Border.controlSpec(_focused ? "focus" : (_hot ? "hover-cursor" : "normal"), root.foreground, root.accent)
+
+  echoMode: password ? TextInput.Password : TextInput.Normal
+  font.family: Style.font.family
+  font.pixelSize: Style.font.body
+  color: foreground
+  selectionColor: selectionTint
+  selectedTextColor: foreground
+  placeholderTextColor: Qt.darker(foreground, 1.6)
+
+  leftPadding: horizontalPadding + Border.left(_borderSpec)
+  rightPadding: horizontalPadding + Border.right(_borderSpec)
+  topPadding: verticalPadding + Border.top(_borderSpec)
+  bottomPadding: verticalPadding + Border.bottom(_borderSpec)
+
+  background: BorderSurface {
+    color: Style.controlFill(root._focused, root._hot, root.foreground, root.accent)
+    borderSpec: root._borderSpec
+    radius: Style.cornerRadius
+  }
+}

package/ui/boot/Ui/Toggle.qml

@@ -0,0 +1,118 @@
+import QtQuick
+import qs.Commons
+import qs.Commons as Commons
+
+// Labeled toggle row: title + optional description on the left, a
+// `ToggleSwitch` on the right. Clicking anywhere on the row emits `clicked()`;
+// consumers flip `checked` in response (the component is stateless about the
+// actual value so it composes cleanly with model-driven UI).
+//
+// Cursor and focus styling match the rest of the kit: hasCursor / mouse
+// hover and activeFocus share the hover-cursor defaults.
+//
+// `rounded` is forwarded to the switch, which auto-detects from
+// Style.cornerRadius: pill shape when Hyprland corners are rounded, square on
+// sharp. Callers can override per-instance.
+BorderSurface {
+  id: root
+
+  property string label: ""
+  property string description: ""
+  property bool checked: false
+
+  // Panel-cursor flag. Same role as Button.hasCursor:
+  // panels with their own keyboard cursor bind this to drive the highlight
+  // separately from activeFocus. Visuals use the same hover-cursor tokens.
+  property bool hasCursor: false
+
+  // Switch shape follows the theme by default: pill on round, square on sharp.
+  // Override per-instance if a caller wants the opposite.
+  property bool rounded: Style.cornerRadius > 0
+
+  property color foreground: Commons.Color.foreground
+  property color accent: Commons.Color.accent
+  property string fontFamily: Style.font.family
+  property real titleSize: Style.font.subtitle
+  property real descriptionSize: Style.font.caption
+
+  signal clicked()
+  signal hovered(bool isHovered)
+
+  activeFocusOnTab: true
+  Keys.onReturnPressed: root.clicked()
+  Keys.onEnterPressed: root.clicked()
+  Keys.onSpacePressed: root.clicked()
+
+  implicitHeight: Math.max(54, content.implicitHeight + Style.spacing.huge)
+  implicitWidth: Style.space(240)
+  radius: Style.cornerRadius
+
+  readonly property bool _hot: hasCursor || mouse.containsMouse
+  readonly property var _borderSpec: Border.controlSpec(activeFocus ? "focus" : (_hot ? "hover-cursor" : "normal"), foreground, accent)
+
+  color: Style.controlFill(activeFocus, _hot, foreground, accent)
+  borderSpec: _borderSpec
+
+  Behavior on color { ColorAnimation { duration: Style.duration(100) } }
+
+  Row {
+    id: content
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.verticalCenter: parent.verticalCenter
+    anchors.leftMargin: root.borderLeft + Style.spacing.rowPaddingX
+    anchors.rightMargin: root.borderRight + Style.spacing.rowPaddingX
+    spacing: Style.spacing.rowPaddingX
+
+    Column {
+      width: parent.width - track.width - parent.spacing
+      spacing: Style.spacing.xs
+      anchors.verticalCenter: parent.verticalCenter
+
+      Text {
+        textFormat: Text.PlainText
+        text: root.label
+        color: root.foreground
+        font.family: root.fontFamily
+        font.pixelSize: root.titleSize
+        font.bold: true
+        elide: Text.ElideRight
+        width: parent.width
+      }
+
+      Text {
+        textFormat: Text.PlainText
+        visible: root.description !== ""
+        text: root.description
+        color: Qt.darker(root.foreground, 1.5)
+        font.family: root.fontFamily
+        font.pixelSize: root.descriptionSize
+        wrapMode: Text.WordWrap
+        width: parent.width
+      }
+    }
+
+    // The row owns the click, so the switch is presentation only here.
+    ToggleSwitch {
+      id: track
+      checked: root.checked
+      rounded: root.rounded
+      foreground: root.foreground
+      accent: root.accent
+      interactive: false
+      anchors.verticalCenter: parent.verticalCenter
+    }
+  }
+
+  MouseArea {
+    id: mouse
+    anchors.fill: parent
+    hoverEnabled: true
+    cursorShape: Qt.PointingHandCursor
+    onClicked: root.clicked()
+  }
+
+  HoverHandler {
+    onHoveredChanged: root.hovered(hovered)
+  }
+}

package/ui/boot/Ui/ToggleSwitch.qml

@@ -0,0 +1,115 @@
+import QtQuick
+import qs.Commons
+import qs.Commons as Commons
+
+// Bare on/off switch: a track with a sliding knob and no label. This is the
+// switch `Toggle` parks at the end of its labeled row, factored out so panel
+// headers and other compact controls render the identical thing.
+//
+// The caller owns the value: bind `checked` to real state and flip it in
+// response to `toggled()`. Services that already track a desired state
+// optimistically (see the Tailscale service's `_desired`) get an instant knob
+// throw for free, because `checked` is already the optimistic value.
+//
+// `busy` marks an operation in flight and swallows further clicks, but leaves
+// hover, cursor, and tooltips alone so the control does not flicker every time
+// a background refresh runs.
+//
+// The cursor is a ring drawn outside the track rather than a state on the
+// track itself: themes give normal chrome a stronger border than hover-cursor
+// (0.4 vs 0.25 by default), which is right for controls that are borderless at
+// rest but would make a bordered track go *fainter* under the cursor. On the
+// panel background the ring reads immediately. `cursorRing` follows
+// `interactive` — a switch whose surrounding row owns the click owns the
+// cursor too.
+//
+// `rounded` auto-detects from Style.cornerRadius so the switch follows the
+// theme: pill shape when Hyprland corners are rounded, square on sharp.
+Item {
+  id: root
+
+  property bool checked: false
+  property bool busy: false
+  // The knob is placed by x, so a mirrored (right-to-left) layout throws it
+  // toward the left when on.
+  readonly property bool mirrored: LayoutMirroring.enabled
+
+  // Off when the surrounding row owns the click, as in `Toggle`.
+  property bool interactive: true
+
+  // Panel-cursor flag. Same role as Button.hasCursor: panels with their own
+  // keyboard cursor bind this to drive the highlight separately from hover.
+  property bool hasCursor: false
+
+  property bool cursorRing: interactive
+  property int cursorPad: Style.space(6)
+  property bool rounded: Style.cornerRadius > 0
+  property color foreground: Commons.Color.foreground
+  property color accent: Commons.Color.accent
+
+  signal toggled()
+  signal hovered(bool isHovered)
+
+  readonly property alias containsMouse: mouse.containsMouse
+  readonly property bool hot: hasCursor || mouse.containsMouse
+
+  // `trackHeight` is settable so a compact placement — a switch riding a panel
+  // section header, say — can ask for a genuinely smaller control instead of
+  // scaling a big one down, which lands the track and knob on fractional pixels
+  // and blurs their edges. The derived sizes only carry floors low enough to
+  // stay out of an override's way; at the default track height each one is
+  // already above its floor, so nothing about the normal switch changes.
+  property int trackHeight: Math.max(22, Math.round(Style.spacing.controlHeight * 0.55))
+  property int trackWidth: Math.round(trackHeight * 1.9)
+  property int knobSize: Math.max(6, Math.round(trackHeight * 0.72))
+  property int knobInset: Math.max(1, Math.round((trackHeight - knobSize) / 2))
+
+  readonly property int _pad: cursorRing ? cursorPad : 0
+
+  implicitWidth: trackWidth + _pad * 2
+  implicitHeight: trackHeight + _pad * 2
+
+  BorderSurface {
+    anchors.fill: parent
+    visible: root.cursorRing && root.hot
+    color: "transparent"
+    radius: Style.cornerRadius
+    borderSpec: Border.controlSpec("hover-cursor", root.foreground, root.accent)
+  }
+
+  BorderSurface {
+    id: track
+    width: root.trackWidth
+    height: root.trackHeight
+    anchors.centerIn: parent
+    radius: root.rounded ? height / 2 : 0
+    color: root.checked
+      ? Style.selectedFillFor(root.foreground, root.accent)
+      : Style.normalFillFor(root.foreground, root.accent)
+    borderSpec: Border.controlSpec(root.checked ? "selected" : "normal", root.foreground, root.accent)
+
+    Behavior on color { ColorAnimation { duration: Style.duration(120) } }
+
+    Rectangle {
+      width: root.knobSize
+      height: root.knobSize
+      radius: root.rounded ? height / 2 : 0
+      x: root.checked !== root.mirrored ? track.width - width - root.knobInset : root.knobInset
+      anchors.verticalCenter: parent.verticalCenter
+      color: root.checked ? Style.selectedStateColor(root.foreground, root.accent) : Qt.darker(root.foreground, 1.25)
+
+      Behavior on x { NumberAnimation { duration: Style.duration(120); easing.type: Easing.OutCubic } }
+      Behavior on color { ColorAnimation { duration: Style.duration(120) } }
+    }
+  }
+
+  MouseArea {
+    id: mouse
+    anchors.fill: parent
+    enabled: root.interactive
+    hoverEnabled: true
+    cursorShape: Qt.PointingHandCursor
+    onContainsMouseChanged: root.hovered(containsMouse)
+    onClicked: if (!root.busy) root.toggled()
+  }
+}