flea-qml 0.0.0-stage → 0.2.0

package/ui/boot/Ui/BorderOverlay.qml

@@ -0,0 +1,54 @@
+import QtQuick
+import QtQuick.Shapes
+import qs.Commons
+import "../Commons/BorderGeometry.js" as Geometry
+
+// Visual-only border renderer. It draws closed side-run contours, or a
+// compound winding path for all four sides, so asymmetric/gradient borders
+// do not require touching odd-even paths. Flat uniform borders use Rectangle.border.
+Item {
+  id: root
+
+  property var borderSpec: Border.none()
+  property real radius: 0
+
+  readonly property var _widths: borderSpec && borderSpec.widths ? borderSpec.widths : Geometry.parseWidthSpec(0, 0)
+  readonly property bool hasBorder: Geometry.maxWidth(_widths) > 0
+  readonly property var _gradient: borderSpec && borderSpec.gradient ? borderSpec.gradient : ({ colors: [], angle: 0, enabled: false })
+  readonly property var _colors: _gradient.enabled ? _gradient.colors : [Border.color(borderSpec), Border.color(borderSpec)]
+  readonly property var _endpoints: Geometry.gradientEndpoints(width, height, _gradient.angle || 0)
+  readonly property string _path: Geometry.ringPath(width, height, radius, _widths)
+
+  visible: hasBorder && width > 0 && height > 0
+  anchors.fill: parent
+  z: 100000
+
+  Shape {
+    anchors.fill: parent
+    preferredRendererType: Shape.CurveRenderer
+
+    ShapePath {
+      fillRule: ShapePath.WindingFill
+      strokeWidth: 0
+      fillGradient: LinearGradient {
+        x1: root._endpoints.x1
+        y1: root._endpoints.y1
+        x2: root._endpoints.x2
+        y2: root._endpoints.y2
+
+        GradientStop { position: Geometry.stopPosition(root._colors, 0); color: Geometry.stopColor(root._colors, 0) }
+        GradientStop { position: Geometry.stopPosition(root._colors, 1); color: Geometry.stopColor(root._colors, 1) }
+        GradientStop { position: Geometry.stopPosition(root._colors, 2); color: Geometry.stopColor(root._colors, 2) }
+        GradientStop { position: Geometry.stopPosition(root._colors, 3); color: Geometry.stopColor(root._colors, 3) }
+        GradientStop { position: Geometry.stopPosition(root._colors, 4); color: Geometry.stopColor(root._colors, 4) }
+        GradientStop { position: Geometry.stopPosition(root._colors, 5); color: Geometry.stopColor(root._colors, 5) }
+        GradientStop { position: Geometry.stopPosition(root._colors, 6); color: Geometry.stopColor(root._colors, 6) }
+        GradientStop { position: Geometry.stopPosition(root._colors, 7); color: Geometry.stopColor(root._colors, 7) }
+        GradientStop { position: Geometry.stopPosition(root._colors, 8); color: Geometry.stopColor(root._colors, 8) }
+        GradientStop { position: Geometry.stopPosition(root._colors, 9); color: Geometry.stopColor(root._colors, 9) }
+      }
+
+      PathSvg { path: root._path }
+    }
+  }
+}

package/ui/boot/Ui/BorderSurface.qml

@@ -0,0 +1,40 @@
+import QtQuick
+import qs.Commons
+
+// Rectangle-compatible surface with Omarchy border specs. Uses native
+// Rectangle.border for cheap flat/uniform borders and BorderOverlay for
+// gradients or per-side widths.
+Rectangle {
+  id: root
+
+  property var borderSpec: Border.none()
+  property real padding: 0
+  property real topPadding: padding
+  property real rightPadding: padding
+  property real bottomPadding: padding
+  property real leftPadding: padding
+
+  readonly property real borderTop: Border.top(borderSpec)
+  readonly property real borderRight: Border.right(borderSpec)
+  readonly property real borderBottom: Border.bottom(borderSpec)
+  readonly property real borderLeft: Border.left(borderSpec)
+  readonly property real contentTopInset: borderTop + topPadding
+  readonly property real contentRightInset: borderRight + rightPadding
+  readonly property real contentBottomInset: borderBottom + bottomPadding
+  readonly property real contentLeftInset: borderLeft + leftPadding
+  readonly property bool usesOverlayBorder: Border.needsOverlay(borderSpec)
+
+  border.color: Border.canUseNative(borderSpec) ? Border.color(borderSpec) : "transparent"
+  border.width: Border.canUseNative(borderSpec) ? Border.uniformWidth(borderSpec) : 0
+
+  Loader {
+    anchors.fill: parent
+    active: root.usesOverlayBorder
+
+    sourceComponent: BorderOverlay {
+      anchors.fill: parent
+      radius: root.radius
+      borderSpec: root.borderSpec
+    }
+  }
+}

package/ui/boot/Ui/Button.qml

@@ -0,0 +1,224 @@
+import QtQuick
+import QtQuick.Controls
+import qs.Commons
+import qs.Commons as Commons
+
+// The button. One component for every clickable thing in the kit.
+// States compose independently and are applied in priority order:
+//
+//   pressed (mouse down)         pressed fill
+//   activeFocus (Tab focus)      focus fill + focus border token
+//   hasCursor || hover           hover-cursor fill (+ border if `bordered`)
+//   selected                     selected fill + optional selected border
+//   active                       selected fill
+//   idle                         transparent or normal border if `bordered`
+//
+// All fills/borders come from `qs.Commons.Style` tokens, so themes
+// control the look via [controls] in shell.toml.
+//
+// Emits `hovered(bool)` so panels with their own keyboard cursor model
+// can update state on mouse enter/leave.
+BorderSurface {
+  id: root
+
+  property string text: ""
+  property string iconText: ""
+  property string tooltipText: ""
+
+  // State flags (see comment above for paint priority).
+  property bool selected: false
+  property bool active: false
+  property bool hasCursor: false
+  property bool focusable: false
+  property bool bordered: false
+
+  // Colors. Defaults track the theme; per-instance overrides are honored.
+  property color foreground: Commons.Color.foreground
+  property color background: "transparent"
+  property color accent: Commons.Color.accent
+
+  // Sizing.
+  property string fontFamily: Style.font.family
+  property real fontSize: Style.font.body
+  property real iconSize: Style.font.icon
+  property real iconRotation: 0
+  property bool iconSpinning: false
+  property real horizontalPadding: Style.spacing.controlPaddingX
+  property real verticalPadding: Style.spacing.controlPaddingY
+  property bool leftAlign: false
+
+  leftPadding: horizontalPadding
+  rightPadding: horizontalPadding
+  topPadding: verticalPadding
+  bottomPadding: verticalPadding
+
+  // Tooltip palette. Auto-rendered if tooltipText is set. Defaults pull
+  // from [tooltip] in shell.toml; override per-instance only when a button
+  // intentionally wants a tooltip that diverges from the theme.
+  property color tooltipBackground: Commons.Color.tooltip.background
+  property color tooltipForeground: Commons.Color.tooltip.text
+  property color tooltipBorder: Commons.Color.tooltip.border
+
+  signal clicked()
+  signal rightClicked()
+  signal hovered(bool isHovered)
+
+  activeFocusOnTab: focusable
+  Keys.onReturnPressed: if (focusable) root.clicked()
+  Keys.onEnterPressed: if (focusable) root.clicked()
+  Keys.onSpacePressed: if (focusable) root.clicked()
+
+  // Reserve the largest border any visual state can paint. Otherwise a
+  // borderless idle button grows by a pixel per side on hover/focus and
+  // relayouts neighboring controls.
+  // Measured from the label's natural width rather than the row, which
+  // narrows the label when the button is held narrower than that.
+  implicitWidth: _contentNaturalWidth + horizontalPadding * 2 + _reservedBorderLeft + _reservedBorderRight
+  implicitHeight: row.implicitHeight + verticalPadding * 2 + _reservedBorderTop + _reservedBorderBottom
+  radius: Style.cornerRadius
+
+  readonly property bool hot: mouseArea.containsMouse || hasCursor
+  readonly property bool _showFocusRing: focusable && activeFocus
+  readonly property color _selectedColor: Style.selectedStateColor(root.foreground, root.accent)
+  readonly property var _tooltipBorderSpec: Border.localOrSurfaceSpec("tooltip", "border", root.tooltipBorder, Commons.Color.tooltip.border, Math.max(1, Style.normalBorderWidth))
+  readonly property var _focusBorderSpec: Border.controlSpec("focus", root.foreground, root.accent)
+  readonly property var _hoverBorderSpec: Border.controlSpec("hover-cursor", root.foreground, root.accent)
+  readonly property var _selectedBorderSpec: Border.controlSpec("selected", root.foreground, root.accent)
+  readonly property var _normalBorderSpec: Border.controlSpec("normal", root.foreground, root.accent)
+  readonly property real _reservedBorderTop: Math.max(
+    focusable ? Border.top(_focusBorderSpec) : 0,
+    Border.top(_hoverBorderSpec),
+    Border.top(_selectedBorderSpec),
+    bordered ? Border.top(_normalBorderSpec) : 0)
+  readonly property real _reservedBorderRight: Math.max(
+    focusable ? Border.right(_focusBorderSpec) : 0,
+    Border.right(_hoverBorderSpec),
+    Border.right(_selectedBorderSpec),
+    bordered ? Border.right(_normalBorderSpec) : 0)
+  readonly property real _reservedBorderBottom: Math.max(
+    focusable ? Border.bottom(_focusBorderSpec) : 0,
+    Border.bottom(_hoverBorderSpec),
+    Border.bottom(_selectedBorderSpec),
+    bordered ? Border.bottom(_normalBorderSpec) : 0)
+  readonly property real _reservedBorderLeft: Math.max(
+    focusable ? Border.left(_focusBorderSpec) : 0,
+    Border.left(_hoverBorderSpec),
+    Border.left(_selectedBorderSpec),
+    bordered ? Border.left(_normalBorderSpec) : 0)
+  readonly property real _reservedContentLeftInset: _reservedBorderLeft + leftPadding
+  readonly property real _iconRoom: iconGlyph.visible ? iconGlyph.implicitWidth + (label.visible ? row.spacing : 0) : 0
+  readonly property real _contentNaturalWidth: _iconRoom + (label.visible ? label.implicitWidth : 0)
+  // A translated label can outgrow a button laid out at a fixed width (a
+  // grid of equal pills): it first spends half the padding, then shrinks to
+  // fit, and elides only when even the smallest size does not.
+  readonly property real _labelRoom: width - horizontalPadding - _reservedBorderLeft - _reservedBorderRight - _iconRoom
+  readonly property var _borderSpec: _showFocusRing ? _focusBorderSpec
+    : hot                      ? _hoverBorderSpec
+    : selected                 ? (Border.controlHasWidth("selected") ? _selectedBorderSpec : (bordered ? _normalBorderSpec : Border.none()))
+    : bordered                 ? _normalBorderSpec
+    : Border.none()
+
+  color: mouseArea.pressed ? Style.pressedFillFor(root.foreground, root.accent)
+    : _showFocusRing       ? Style.focusFillFor(root.foreground, root.accent)
+    : hot                  ? Style.hoverFillFor(root.foreground, root.accent)
+    : selected             ? Style.selectedFillFor(root.foreground, root.accent)
+    : active               ? Style.selectedFillFor(root.foreground, root.accent)
+    : background
+
+  // Border follows the same state precedence as fill. Buttons stay
+  // borderless at rest unless `bordered` is set, but hover-cursor/focus
+  // always use the shared cursor border so the keyboard target is visible
+  // and consistent with the rest of the kit. Selected borders are off by
+  // default for plain buttons; explicitly bordered buttons keep their
+  // normal border when selected unless selected-border-width opts in to a
+  // dedicated selected border.
+  borderSpec: _borderSpec
+
+  Behavior on color { ColorAnimation { duration: Style.duration(120) } }
+
+  ToolTip {
+    visible: root.tooltipText !== "" && mouseArea.containsMouse
+    text: root.tooltipText
+    delay: 400
+    padding: 0
+    background: BorderSurface {
+      color: root.tooltipBackground
+      borderSpec: root._tooltipBorderSpec
+      radius: 0
+    }
+    contentItem: Text {
+      textFormat: Text.PlainText
+      text: root.tooltipText
+      color: root.tooltipForeground
+      font.family: root.fontFamily
+      font.pixelSize: Style.font.bodySmall
+      leftPadding: Border.left(root._tooltipBorderSpec) + Style.spacing.controlPaddingX
+      rightPadding: Border.right(root._tooltipBorderSpec) + Style.spacing.controlPaddingX
+      topPadding: Border.top(root._tooltipBorderSpec) + Style.spacing.controlPaddingY
+      bottomPadding: Border.bottom(root._tooltipBorderSpec) + Style.spacing.controlPaddingY
+    }
+  }
+
+  Row {
+    id: row
+    anchors.verticalCenter: parent.verticalCenter
+    anchors.left: root.leftAlign ? parent.left : undefined
+    anchors.leftMargin: root.leftAlign ? root._reservedContentLeftInset : 0
+    anchors.horizontalCenter: root.leftAlign ? undefined : parent.horizontalCenter
+    spacing: Style.spacing.controlGap
+
+    Text {
+      id: iconGlyph
+      textFormat: Text.PlainText
+      visible: root.iconText !== ""
+      text: root.iconText
+      color: root.selected ? root._selectedColor : root.foreground
+      font.family: root.fontFamily
+      font.pixelSize: root.iconSize
+      rotation: root.iconSpinning ? 0 : root.iconRotation
+      transformOrigin: Item.Center
+      anchors.verticalCenter: parent.verticalCenter
+
+      RotationAnimation on rotation {
+        from: 0
+        to: 360
+        duration: 900
+        loops: Animation.Infinite
+        running: root.iconSpinning && !Style.reduceMotion
+      }
+    }
+
+    Text {
+      id: label
+      textFormat: Text.PlainText
+      visible: root.text !== ""
+      text: root.text
+      color: root.selected ? root._selectedColor : root.foreground
+      font.family: root.fontFamily
+      font.pixelSize: root.fontSize
+      font.bold: root.selected
+      width: Math.max(0, Math.min(implicitWidth, root._labelRoom))
+      fontSizeMode: Text.HorizontalFit
+      minimumPixelSize: Math.round(root.fontSize * 0.75)
+      elide: Text.ElideRight
+      anchors.verticalCenter: parent.verticalCenter
+    }
+  }
+
+  MouseArea {
+    id: mouseArea
+    anchors.fill: parent
+    hoverEnabled: true
+    cursorShape: Qt.PointingHandCursor
+    acceptedButtons: Qt.LeftButton | Qt.RightButton
+    onClicked: function(mouse) {
+      if (root.focusable) root.forceActiveFocus()
+      if (mouse.button === Qt.RightButton) root.rightClicked()
+      else root.clicked()
+    }
+  }
+
+  HoverHandler {
+    onHoveredChanged: root.hovered(hovered)
+  }
+}

package/ui/boot/Ui/ButtonGroup.qml

@@ -0,0 +1,131 @@
+import QtQuick
+import qs.Commons
+import qs.Commons as Commons
+
+// Mutually-exclusive row of Buttons — the form-style "pick one of N"
+// pattern (bar position top/right/bottom/left, theme preset chips, etc.).
+// Emits `changed(value)` when the user activates a different option.
+//
+// `options` is either a plain string[] (label == value) or an array of
+// { value, label, icon?, tooltip? } objects. Mixing is fine.
+//
+// Keyboard navigation. The group itself is a single Tab stop, not one
+// stop per chip — so in a form that walks `activeFocusOnTab` items with
+// Tab / j / k, the cursor enters the group as a unit. Once focused,
+// h / l / Left / Right walks between chips and Enter / Space activates
+// the current one. The selected chip is the default landing point so
+// users see their existing choice on arrival.
+//
+// Panel-cursor consumers (the bar widget panels) drive `cursorIndex`
+// directly and listen on `hovered` to sync the mouse — Tab focus and
+// `cursorIndex` are independent; either one paints the chip's hot
+// state, and the bar widget panels never give Tab focus to a
+// ButtonGroup so they only see the cursorIndex path.
+Row {
+  id: root
+
+  property var options: []
+  property string value: ""
+  property color foreground: Commons.Color.foreground
+  property color background: Commons.Color.background
+  property color accent: Commons.Color.accent
+  property string fontFamily: Style.font.family
+  property real fontSize: Style.font.body
+  property bool focusable: true
+
+  // -1 disables the external cursor highlight (the panel-cursor case).
+  // Driven by a containing panel; the group's own Tab-focus h/l
+  // tracking is internal and lives in _focusedIndex.
+  property int cursorIndex: -1
+
+  // Internal: which chip h / l / Left / Right is currently sitting on
+  // when the group itself has Tab focus. Reset to the selected option
+  // each time focus arrives so the user sees their existing choice.
+  property int _focusedIndex: -1
+
+  signal changed(string value)
+  signal hovered(int index, bool isHovered)
+
+  spacing: Style.spacing.md
+
+  activeFocusOnTab: focusable
+
+  function optionValue(o) {
+    return (o && typeof o === "object") ? String(o.value) : String(o)
+  }
+  function optionLabel(o) {
+    return (o && typeof o === "object" && o.label !== undefined) ? String(o.label) : String(o)
+  }
+  function optionIcon(o) {
+    return (o && typeof o === "object" && o.icon) ? String(o.icon) : ""
+  }
+  function optionTooltip(o) {
+    return (o && typeof o === "object" && o.tooltip) ? String(o.tooltip) : ""
+  }
+
+  function selectedOptionIndex() {
+    for (var i = 0; i < options.length; i++)
+      if (optionValue(options[i]) === value) return i
+    return -1
+  }
+
+  function activateFocused() {
+    if (_focusedIndex < 0 || _focusedIndex >= options.length) return
+    var v = optionValue(options[_focusedIndex])
+    root.changed(v)
+  }
+
+  onActiveFocusChanged: {
+    if (activeFocus) {
+      var idx = selectedOptionIndex()
+      _focusedIndex = idx < 0 ? 0 : idx
+    } else {
+      _focusedIndex = -1
+    }
+  }
+
+  Keys.priority: Keys.BeforeItem
+  Keys.onPressed: function(event) {
+    if (Util.readingKey(event, true) === Qt.Key_Left) {
+      _focusedIndex = Math.max(0, (_focusedIndex < 0 ? 0 : _focusedIndex) - 1)
+      event.accepted = true
+    } else if (Util.readingKey(event, true) === Qt.Key_Right) {
+      var max = options.length - 1
+      var next = (_focusedIndex < 0 ? 0 : _focusedIndex) + 1
+      _focusedIndex = Math.min(max, next)
+      event.accepted = true
+    } else if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter
+        || event.key === Qt.Key_Space) {
+      activateFocused()
+      event.accepted = true
+    }
+  }
+
+  Repeater {
+    model: root.options
+
+    delegate: Button {
+      required property var modelData
+      required property int index
+      text: root.optionLabel(modelData)
+      iconText: root.optionIcon(modelData)
+      tooltipText: root.optionTooltip(modelData)
+      selected: root.optionValue(modelData) === root.value
+      // Chip lights up when either the external panel cursor lands here
+      // or the group has Tab focus and h/l has walked to this index.
+      hasCursor: root.cursorIndex === index
+        || (root.activeFocus && root._focusedIndex === index)
+      // Every chip carries the standard bordered-button chrome so the
+      // group reads as a row of distinct options. selected / hover-cursor /
+      // focus are all painted by Button from Style's shared state tokens.
+      bordered: true
+      foreground: root.foreground
+      background: root.background
+      accent: root.accent
+      fontFamily: root.fontFamily
+      fontSize: root.fontSize
+      onClicked: root.changed(root.optionValue(modelData))
+      onHovered: function(h) { root.hovered(index, h) }
+    }
+  }
+}

package/ui/boot/Ui/ConfirmDialog.qml

@@ -0,0 +1,134 @@
+import QtQuick
+import qs.Commons
+import qs.Commons as Commons
+
+Item {
+  id: root
+
+  property bool opened: false
+  property string message: ""
+  property string cancelText: Commons.I18n.t("common.cancel")
+  property string confirmText: Commons.I18n.t("common.confirm")
+  property int selectedIndex: 1
+  property color background: Commons.Color.background
+  property color foreground: Commons.Color.foreground
+  property color scrim: Util.alpha(Commons.Color.background, 0.7)
+  property color selectedBackground: Util.alpha(Commons.Color.foreground, 0.08)
+  property color selectedText: Commons.Color.accent
+  property string fontFamily: Style.font.family
+  property int cornerRadius: Style.cornerRadius
+
+  signal canceled()
+  signal confirmed()
+
+  function handleKey(event) {
+    if (!root.opened) return false
+
+    if (event.key === Qt.Key_Escape) {
+      root.canceled()
+      return true
+    } else if (event.key === Qt.Key_Left || event.key === Qt.Key_Right || event.key === Qt.Key_Tab || event.key === Qt.Key_Backtab) {
+      root.selectedIndex = root.selectedIndex === 0 ? 1 : 0
+      return true
+    } else if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
+      if (root.selectedIndex === 0) root.canceled()
+      else root.confirmed()
+      return true
+    }
+
+    return false
+  }
+
+  visible: opened
+
+  Rectangle {
+    anchors.fill: parent
+    color: root.scrim
+
+    MouseArea { anchors.fill: parent; onClicked: root.canceled() }
+
+    BorderSurface {
+      id: card
+      width: Math.min(parent.width - Style.space(32), Style.space(370))
+      // Grows with the wrapped message so narrow hosts (like the menu card)
+      // don't squeeze the text into the buttons.
+      height: card.contentTopInset + card.contentBottomInset + messageText.implicitHeight + Style.space(20) + Style.space(34)
+      anchors.centerIn: parent
+      color: root.background
+      borderSpec: Border.flat(root.selectedText, Style.normalBorderWidth)
+      padding: Style.space(18)
+      radius: root.cornerRadius
+
+      MouseArea { anchors.fill: parent; onClicked: {} }
+
+      Item {
+        anchors.fill: parent
+        anchors.topMargin: card.contentTopInset
+        anchors.rightMargin: card.contentRightInset
+        anchors.bottomMargin: card.contentBottomInset
+        anchors.leftMargin: card.contentLeftInset
+
+        Text {
+          id: messageText
+          textFormat: Text.PlainText
+          anchors.left: parent.left
+          anchors.right: parent.right
+          anchors.top: parent.top
+          text: root.message
+          color: root.foreground
+          font.family: root.fontFamily
+          font.pixelSize: Style.font.title
+          wrapMode: Text.WordWrap
+        }
+
+        Row {
+          anchors.right: parent.right
+          anchors.bottom: parent.bottom
+          spacing: Style.space(10)
+
+          Repeater {
+            model: [root.cancelText, root.confirmText]
+
+            BorderSurface {
+              required property int index
+              required property string modelData
+
+              readonly property bool selected: root.selectedIndex === index
+              readonly property bool destructive: index === 1
+
+              width: Style.space(88)
+              height: Style.space(34)
+              color: selected
+                ? (destructive ? Util.alpha(Commons.Color.urgent, 0.22) : root.selectedBackground)
+                : "transparent"
+              borderSpec: Border.flat(destructive
+                ? (selected ? Commons.Color.urgent : Util.alpha(Commons.Color.urgent, 0.56))
+                : (selected ? root.selectedText : Util.alpha(root.foreground, 0.38)), Style.normalBorderWidth)
+              radius: 0
+
+              Text {
+                textFormat: Text.PlainText
+                anchors.centerIn: parent
+                text: modelData
+                color: destructive ? (selected ? Commons.Color.urgent : root.foreground) : (selected ? root.selectedText : root.foreground)
+                font.family: root.fontFamily
+                font.pixelSize: Style.font.caption
+              }
+
+              MouseArea {
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onEntered: root.selectedIndex = index
+                onClicked: {
+                  if (index === 0) root.canceled()
+                  else root.confirmed()
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/ui/boot/Ui/CursorSurface.qml

@@ -0,0 +1,42 @@
+import QtQuick
+import qs.Commons
+import qs.Commons as Commons
+
+// Shared visual chrome for keyboard-and-mouse-navigable items inside a panel.
+// Contract: items must NOT read `containsMouse` for color/border. Mouse
+// hover updates the panel's cursor state at the root; visuals derive from
+// `hasCursor` / `current`. That's what guarantees a single highlight on
+// screen at any time across both keyboard and mouse interaction.
+//
+// Cursor paint is always the shared hover-cursor fill plus optional
+// hover-cursor border. `outline` remains as a compatibility flag for
+// callers that used to request border-only rows, but slider rows still
+// receive the same hover-cursor background as every other row.
+BorderSurface {
+  id: root
+
+  property bool hasCursor: false
+  property bool current: false
+  property bool outline: false
+  property bool bordered: false
+
+  property color foreground: Commons.Color.foreground
+  property color accent: Commons.Color.accent
+  property color fill: Style.hoverFillFor(foreground, accent)
+  property color currentFill: Style.selectedFillFor(foreground, accent)
+
+  radius: Style.cornerRadius
+
+  color: hasCursor ? fill : (current ? currentFill : "transparent")
+  borderSpec: root.hasCursor
+    ? Border.controlSpec("hover-cursor", root.foreground, root.accent)
+    : (root.current
+      ? Border.controlSpec("selected", root.foreground, root.accent)
+      : (root.bordered
+        ? Border.controlSpec("normal", root.foreground, root.accent)
+        : Border.none()))
+
+  Behavior on color {
+    ColorAnimation { duration: Style.duration(60) }
+  }
+}