zui 0.0.1

data/Controls/BarIconButton.qml

@@ -0,0 +1,27 @@
+import QtQuick
+import "../Theme"
+
+Item {
+  id: root
+  property string text: ""
+  property string tooltipText: ""
+  property bool active: false
+  property color foreground: Color.foreground
+  property color activeColor: Color.accent
+  property real slotSize: 30
+  property real opticalSize: 18
+  property string fontFamily: Style.font.family
+  property real fontSize: Style.font.icon
+  property real textRotation: 0
+  property bool keepSpace: false
+  property bool dimmed: false
+  property bool concealed: false
+  property bool interactive: true
+  signal pressed(int button)
+  signal wheelMoved(real delta)
+  implicitWidth: concealed && !keepSpace ? 0 : slotSize
+  implicitHeight: slotSize
+  opacity: concealed ? 0 : (dimmed ? 0.45 : 1)
+  Text { anchors.centerIn: parent; text: root.text; color: root.active ? root.activeColor : root.foreground; font.family: root.fontFamily; font.pixelSize: root.fontSize; rotation: root.textRotation }
+  MouseArea { anchors.fill: parent; enabled: root.interactive; acceptedButtons: Qt.AllButtons; onClicked: function(event) { root.pressed(event.button) }; onWheel: function(event) { root.wheelMoved(event.angleDelta.y) } }
+}

data/Controls/BarIndicator.qml

@@ -0,0 +1,22 @@
+import QtQuick
+import "../Theme"
+
+Item {
+  id: root
+  property bool active: false
+  property string activeText: ""
+  property string inactiveText: ""
+  property string activeTooltipText: ""
+  property string inactiveTooltipText: ""
+  property string indicatorBlock: "single"
+  property color foreground: Color.foreground
+  property color activeColor: Color.accent
+  property string fontFamily: Style.font.family
+  property real fontSize: Style.font.caption
+  signal pressed(int button)
+  signal wheelMoved(real delta)
+  implicitWidth: label.implicitWidth
+  implicitHeight: Math.max(Style.spacing.controlHeight, label.implicitHeight)
+  Text { id: label; anchors.centerIn: parent; text: root.active ? root.activeText : root.inactiveText; color: root.active ? root.activeColor : root.foreground; font.family: root.fontFamily; font.pixelSize: root.fontSize }
+  MouseArea { anchors.fill: parent; acceptedButtons: Qt.AllButtons; onClicked: function(event) { root.pressed(event.button) }; onWheel: function(event) { root.wheelMoved(event.angleDelta.y) } }
+}

data/Controls/BorderOverlay.qml

@@ -0,0 +1,10 @@
+import QtQuick
+import "../Theme"
+
+Rectangle {
+  property var borderSpec: Border.none
+  color: "transparent"
+  radius: Style.cornerRadius
+  border.color: borderSpec && borderSpec.color !== undefined ? borderSpec.color : "transparent"
+  border.width: borderSpec && borderSpec.widths ? Number(borderSpec.widths.top || 0) : 0
+}

data/Controls/BorderSurface.qml

@@ -0,0 +1,10 @@
+import QtQuick
+import "../Theme"
+
+Rectangle {
+  property var borderSpec: Border.none()
+  color: Color.popups.background
+  radius: Style.cornerRadius
+  border.color: borderSpec && borderSpec.color !== undefined ? borderSpec.color : "transparent"
+  border.width: borderSpec && borderSpec.widths ? Number(borderSpec.widths.top || 0) : 0
+}

data/Controls/Button.qml

@@ -0,0 +1,78 @@
+import QtQuick
+import "../Theme"
+
+Item {
+  id: root
+  property string text: ""
+  property string iconText: ""
+  property string tooltipText: ""
+  property bool selected: false
+  property bool active: false
+  property bool hasCursor: false
+  property bool focusable: true
+  property bool bordered: true
+  property color foreground: Color.foreground
+  property color background: "transparent"
+  property color accent: Color.accent
+  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
+  property color tooltipBackground: Color.tooltip.background
+  property color tooltipForeground: Color.tooltip.text
+  property color tooltipBorder: Color.tooltip.border
+  signal clicked()
+  signal rightClicked()
+  signal hovered(bool value)
+
+  activeFocusOnTab: focusable
+  implicitWidth: content.implicitWidth + horizontalPadding * 2
+  implicitHeight: Math.max(Style.spacing.controlHeight, content.implicitHeight + verticalPadding * 2)
+
+  Rectangle {
+    anchors.fill: parent
+    radius: Style.cornerRadius
+    color: root.selected || root.active ? root.accent : root.background
+    border.width: root.bordered ? Style.normalBorderWidth : 0
+    border.color: root.active || root.selected ? root.accent : Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.3)
+    opacity: mouse.pressed ? 0.78 : (mouse.containsMouse ? 0.9 : 1)
+  }
+
+  Row {
+    id: content
+    anchors.verticalCenter: parent.verticalCenter
+    anchors.left: root.leftAlign ? parent.left : undefined
+    anchors.leftMargin: root.horizontalPadding
+    anchors.horizontalCenter: root.leftAlign ? undefined : parent.horizontalCenter
+    spacing: root.iconText !== "" && root.text !== "" ? Style.spacing.controlGap : 0
+    Text {
+      visible: root.iconText !== ""
+      text: root.iconText
+      color: root.selected || root.active ? Color.background : root.foreground
+      font.family: root.fontFamily
+      font.pixelSize: root.iconSize
+      rotation: root.iconRotation
+    }
+    Text {
+      visible: root.text !== ""
+      text: root.text
+      color: root.selected || root.active ? Color.background : root.foreground
+      font.family: root.fontFamily
+      font.pixelSize: root.fontSize
+    }
+  }
+
+  MouseArea {
+    id: mouse
+    anchors.fill: parent
+    hoverEnabled: true
+    acceptedButtons: Qt.LeftButton | Qt.RightButton
+    cursorShape: root.hasCursor ? Qt.PointingHandCursor : Qt.ArrowCursor
+    onClicked: function(event) { event.button === Qt.RightButton ? root.rightClicked() : root.clicked() }
+    onContainsMouseChanged: root.hovered(containsMouse)
+  }
+}

data/Controls/ButtonGroup.qml

@@ -0,0 +1,19 @@
+import QtQuick
+import "../Theme"
+
+Row {
+  id: root
+  property string value: ""
+  property var options: []
+  property color foreground: Color.foreground
+  property color background: Color.background
+  property color accent: Color.accent
+  property string fontFamily: Style.font.family
+  property real fontSize: Style.font.body
+  property bool focusable: true
+  property int cursorIndex: -1
+  signal changed(string value)
+  signal hovered(int index, string value)
+  spacing: 2
+  Repeater { model: root.options; Button { required property var modelData; required property int index; text: String(modelData); selected: String(modelData) === root.value; foreground: root.foreground; background: root.background; accent: root.accent; fontFamily: root.fontFamily; fontSize: root.fontSize; onClicked: root.changed(String(modelData)); onHovered: function(value) { root.hovered(index, String(modelData)) } } }
+}

data/Controls/ConfirmDialog.qml

@@ -0,0 +1,37 @@
+import QtQuick
+import "../Theme"
+
+Item {
+  id: root
+  property bool opened: false
+  property string message: ""
+  property string cancelText: "Cancel"
+  property string confirmText: "Confirm"
+  property int selectedIndex: 1
+  property color background: Color.background
+  property color foreground: Color.foreground
+  property color scrim: Qt.rgba(0, 0, 0, 0.7)
+  property color selectedBackground: Qt.rgba(1, 1, 1, 0.08)
+  property color selectedText: Color.accent
+  property string fontFamily: Style.font.family
+  property real cornerRadius: Style.cornerRadius
+  signal canceled()
+  signal confirmed()
+  implicitWidth: 420
+  implicitHeight: panel.implicitHeight
+  visible: opened
+  Rectangle { id: panel; anchors.fill: parent; implicitHeight: content.implicitHeight + Style.spacing.xl * 2; color: root.background; radius: root.cornerRadius; border.color: Color.popups.border }
+  Column {
+    id: content
+    anchors.fill: parent
+    anchors.margins: Style.spacing.xl
+    spacing: Style.spacing.lg
+    Text { width: parent.width; text: root.message; color: root.foreground; font.family: root.fontFamily; wrapMode: Text.WordWrap }
+    Row {
+      anchors.right: parent.right
+      spacing: Style.spacing.sm
+      Button { text: root.cancelText; onClicked: root.canceled() }
+      Button { text: root.confirmText; active: true; onClicked: root.confirmed() }
+    }
+  }
+}

data/Controls/CursorSurface.qml

@@ -0,0 +1,29 @@
+import QtQuick
+import "../Theme"
+
+BorderSurface {
+  id: root
+
+  property bool hasCursor: false
+  property bool current: false
+  property bool outline: false
+  property bool bordered: false
+  property color foreground: Color.foreground
+  property color accent: Color.accent
+  property color fill: Style.hoverFillFor(foreground, accent)
+  property color currentFill: Style.selectedFillFor(foreground, accent)
+
+  color: hasCursor ? fill : (current ? currentFill : "transparent")
+  radius: Style.cornerRadius
+  borderSpec: hasCursor
+    ? Border.controlSpec("hover-cursor", foreground, accent)
+    : (current
+      ? Border.controlSpec("selected", foreground, accent)
+      : (bordered
+        ? Border.controlSpec("normal", foreground, accent)
+        : Border.none()))
+
+  Behavior on color {
+    ColorAnimation { duration: 60 }
+  }
+}

data/Controls/Dropdown.qml

@@ -0,0 +1,59 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../Theme"
+
+Column {
+  id: root
+
+  property string label: ""
+  property string value: ""
+  property var options: []
+  property color foreground: Color.foreground
+  property color background: Color.popups.background
+  property color popupBorder: Color.popups.border
+  property color accent: Color.accent
+  property string fontFamily: Style.font.family
+  property real rowHeight: Style.spacing.controlHeight
+  property real popupRowHeight: Style.spacing.popupRowHeight
+  property bool showLabel: true
+  property bool hasCursor: false
+
+  signal changed(string value)
+  signal optionHovered(var value)
+
+  spacing: Style.spacing.xs
+
+  Text {
+    visible: root.showLabel && root.label !== ""
+    text: root.label
+    color: root.foreground
+    font.family: root.fontFamily
+    font.pixelSize: Style.font.caption
+  }
+
+  QQC.ComboBox {
+    id: combo
+
+    width: root.width
+    height: root.rowHeight
+    model: root.options
+    currentIndex: Math.max(0, root.options.indexOf(root.value))
+    hoverEnabled: true
+    onActivated: root.changed(String(currentText))
+    onHoveredChanged: root.optionHovered(hovered)
+
+    contentItem: Text {
+      text: combo.displayText
+      color: root.foreground
+      font.family: root.fontFamily
+      verticalAlignment: Text.AlignVCenter
+      leftPadding: Style.spacing.controlPaddingX
+    }
+
+    background: Rectangle {
+      color: root.background
+      radius: Style.cornerRadius
+      border.color: combo.activeFocus ? root.accent : root.popupBorder
+    }
+  }
+}

data/Controls/MultiSelect.qml

@@ -0,0 +1,32 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../Theme"
+
+Column {
+  id: root
+  property string label: ""
+  property var values: []
+  property var options: []
+  property string placeholderText: "Search..."
+  property var optionsCommand: []
+  property string optionsCommandCwd: ""
+  property string emptyText: "No options"
+  property string noSelectionText: "None selected"
+  property string triggerLabel: ""
+  property bool showLabel: true
+  property color foreground: Color.foreground
+  property color background: Color.popups.background
+  property color popupBorder: Color.popups.border
+  property color accent: Color.accent
+  property string fontFamily: Style.font.family
+  property real rowHeight: Style.spacing.controlHeight
+  property real popupRowHeight: Style.spacing.popupRowHeight
+  property real popupMinHeight: Style.spacing.searchablePopupMinHeight
+  property bool hasCursor: false
+  signal changed(var values)
+  signal optionHovered(var value)
+  spacing: Style.spacing.xs
+  Text { visible: root.showLabel && root.label !== ""; text: root.label; color: root.foreground; font.family: root.fontFamily; font.pixelSize: Style.font.caption }
+  QQC.Button { hoverEnabled: true; text: root.triggerLabel !== "" ? root.triggerLabel : (root.values.length > 0 ? root.values.join(", ") : root.noSelectionText); onClicked: menu.open(); onHoveredChanged: root.optionHovered(hovered); background: Rectangle { color: root.background; radius: Style.cornerRadius; border.color: root.popupBorder } }
+  QQC.Menu { id: menu; Repeater { model: root.options; QQC.MenuItem { required property var modelData; text: String(modelData); checkable: true; checked: root.values.indexOf(String(modelData)) >= 0; onTriggered: { var next = root.values.slice(); var index = next.indexOf(String(modelData)); index >= 0 ? next.splice(index, 1) : next.push(String(modelData)); root.changed(next) } } } }
+}

data/Controls/NumberField.qml

@@ -0,0 +1,24 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../Theme"
+
+Item {
+  id: root
+  property string label: ""
+  property real value: 0
+  property real from: 0
+  property real to: 100
+  property real stepSize: 1
+  property color foreground: Color.foreground
+  property color accent: Color.accent
+  property string fontFamily: Style.font.family
+  property real fontSize: Style.font.body
+  property real fieldWidth: 108
+  property bool hasCursor: false
+  signal modified(real value)
+  signal hovered(bool value)
+  implicitWidth: labelText.implicitWidth + fieldWidth + Style.spacing.controlGap
+  implicitHeight: spin.implicitHeight
+  Row { spacing: Style.spacing.controlGap; Text { id: labelText; anchors.verticalCenter: parent.verticalCenter; text: root.label; color: root.foreground; font.family: root.fontFamily; font.pixelSize: root.fontSize } QQC.SpinBox { id: spin; width: root.fieldWidth; from: Math.round(root.from / root.stepSize); to: Math.round(root.to / root.stepSize); value: Math.round(root.value / root.stepSize); editable: true; onValueModified: root.modified(value * root.stepSize) } }
+  HoverHandler { onHoveredChanged: root.hovered(hovered) }
+}

data/Controls/OpticalGlyph.qml

@@ -0,0 +1,14 @@
+import QtQuick
+import "../Theme"
+
+Item {
+  property alias text: glyph.text
+  property alias color: glyph.color
+  property alias fontFamily: glyph.font.family
+  property alias fontSize: glyph.font.pixelSize
+  property bool debugBounds: false
+  implicitWidth: glyph.implicitWidth
+  implicitHeight: glyph.implicitHeight
+  Rectangle { anchors.fill: parent; visible: parent.debugBounds; color: "transparent"; border.color: Color.accent }
+  Text { id: glyph; anchors.centerIn: parent; color: Color.foreground; font.family: Style.font.family; font.pixelSize: Style.font.icon }
+}

data/Controls/PanelActionButton.qml

@@ -0,0 +1,10 @@
+import QtQuick
+import "../Theme"
+
+Button {
+  property real size: 28
+  property color hoverColor: Color.accent
+  implicitWidth: size
+  implicitHeight: size
+  text: ""
+}

data/Controls/PanelHero.qml

@@ -0,0 +1,18 @@
+import QtQuick
+import "../Theme"
+
+Column {
+  id: root
+  property string title: ""
+  property string meta: ""
+  property string detail: ""
+  property real iconSize: Style.font.display
+  property real iconOpacity: 1
+  property real metaOpacity: 1
+  property color foreground: Color.foreground
+  property string fontFamily: Style.font.family
+  spacing: Style.spacing.xs
+  Text { text: root.title; color: root.foreground; font.family: root.fontFamily; font.pixelSize: Style.font.heading; font.bold: true }
+  Text { text: root.meta; color: root.foreground; opacity: root.metaOpacity; font.family: root.fontFamily; font.pixelSize: Style.font.caption }
+  Text { text: root.detail; color: root.foreground; opacity: 0.72; font.family: root.fontFamily; font.pixelSize: Style.font.body; wrapMode: Text.WordWrap }
+}

data/Controls/PanelKeyCatcher.qml

@@ -0,0 +1,25 @@
+import QtQuick
+
+FocusScope {
+  id: root
+  property bool blocked: false
+  signal closeRequested()
+  signal deleteRequested()
+  signal returnRequested()
+  signal tabRequested(bool reverse)
+  signal moveRequested(int dx, int dy)
+  signal activateRequested()
+  signal textKey(string text)
+  focus: true
+  Keys.onEscapePressed: if (!blocked) closeRequested()
+  Keys.onDeletePressed: if (!blocked) deleteRequested()
+  Keys.onReturnPressed: if (!blocked) returnRequested()
+  Keys.onTabPressed: if (!blocked) tabRequested(false)
+  Keys.onBacktabPressed: if (!blocked) tabRequested(true)
+  Keys.onLeftPressed: if (!blocked) moveRequested(-1, 0)
+  Keys.onRightPressed: if (!blocked) moveRequested(1, 0)
+  Keys.onUpPressed: if (!blocked) moveRequested(0, -1)
+  Keys.onDownPressed: if (!blocked) moveRequested(0, 1)
+  Keys.onSpacePressed: if (!blocked) activateRequested()
+  Keys.onPressed: function(event) { if (!blocked && event.text !== "") root.textKey(event.text) }
+}

data/Controls/PanelSectionHeader.qml

@@ -0,0 +1,11 @@
+import QtQuick
+import "../Theme"
+
+Text {
+  property color foreground: Color.foreground
+  property string fontFamily: Style.font.family
+  color: foreground
+  font.family: fontFamily
+  font.pixelSize: Style.font.subtitle
+  font.bold: true
+}

data/Controls/PanelSeparator.qml

@@ -0,0 +1,10 @@
+import QtQuick
+import "../Theme"
+
+Rectangle {
+  property color foreground: Color.foreground
+  property real strength: 0.12
+  implicitWidth: 160
+  implicitHeight: 1
+  color: Qt.rgba(foreground.r, foreground.g, foreground.b, strength)
+}

data/Controls/PanelSlider.qml

@@ -0,0 +1,36 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../Theme"
+
+Item {
+  id: root
+  property real value: 0
+  property real minimum: 0
+  property real maximum: 1
+  property real step: 0.05
+  property bool integer: false
+  property int tickCount: 0
+  property color trackColor: "#33414a"
+  property color fillColor: Color.accent
+  property color knobColor: Color.foreground
+  property real trackHeight: 4
+  property real knobSize: 16
+  property color tickColor: Color.background
+  signal released(real value)
+  signal moved(real value)
+  signal rightClicked()
+  implicitHeight: Math.max(knobSize, Style.spacing.controlHeight)
+  QQC.Slider {
+    id: slider
+    anchors.fill: parent
+    from: root.minimum
+    to: root.maximum
+    stepSize: root.step
+    value: root.value
+    onMoved: root.moved(root.integer ? Math.round(value) : value)
+    onPressedChanged: if (!pressed) root.released(root.integer ? Math.round(value) : value)
+    background: Rectangle { x: slider.leftPadding; y: slider.topPadding + slider.availableHeight / 2 - height / 2; width: slider.availableWidth; height: root.trackHeight; radius: height / 2; color: root.trackColor; Rectangle { width: slider.visualPosition * parent.width; height: parent.height; radius: parent.radius; color: root.fillColor } }
+    handle: Rectangle { x: slider.leftPadding + slider.visualPosition * (slider.availableWidth - width); y: slider.topPadding + slider.availableHeight / 2 - height / 2; width: root.knobSize; height: root.knobSize; radius: width / 2; color: root.knobColor }
+  }
+  TapHandler { acceptedButtons: Qt.RightButton; onTapped: root.rightClicked() }
+}

data/Controls/PanelToolTip.qml

@@ -0,0 +1,13 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../Theme"
+
+QQC.ToolTip {
+  property color panelForeground: Color.tooltip.text
+  property color panelBackground: Color.tooltip.background
+  property color panelBorder: Color.tooltip.border
+  property string fontFamily: Style.font.family
+  property real fontSize: Style.font.bodySmall
+  contentItem: Text { text: parent.text; color: parent.panelForeground; font.family: parent.fontFamily; font.pixelSize: parent.fontSize }
+  background: Rectangle { color: parent.panelBackground; radius: Style.cornerRadius; border.color: parent.panelBorder }
+}

data/Controls/SearchableDropdown.qml

@@ -0,0 +1,11 @@
+import QtQuick
+import "../Theme"
+
+Dropdown {
+  property string placeholderText: "Search..."
+  property string emptyText: "No matches"
+  property string triggerLabel: ""
+  property color popupBorder: Color.popups.border
+  property real popupRowHeight: Style.spacing.popupRowHeight
+  property real popupMinHeight: Style.spacing.searchablePopupMinHeight
+}

data/Controls/TextField.qml

@@ -0,0 +1,25 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../Theme"
+
+QQC.TextField {
+  id: root
+  property bool password: false
+  property color foreground: Color.foreground
+  property color accent: Color.accent
+  property color selectionTint: Style.selectionFillFor(foreground, accent)
+  property real horizontalPadding: Style.spacing.controlPaddingX
+  property real verticalPadding: Style.spacing.inputPaddingY
+  property bool hasCursor: false
+  color: foreground
+  selectionColor: selectionTint
+  selectedTextColor: foreground
+  echoMode: password ? TextInput.Password : TextInput.Normal
+  leftPadding: horizontalPadding
+  rightPadding: horizontalPadding
+  topPadding: verticalPadding
+  bottomPadding: verticalPadding
+  font.family: Style.font.family
+  font.pixelSize: Style.font.body
+  background: Rectangle { color: Color.popups.background; radius: Style.cornerRadius; border.color: root.activeFocus ? root.accent : Color.popups.border; border.width: 1 }
+}

data/Controls/Toggle.qml

@@ -0,0 +1,22 @@
+import QtQuick
+import "../Theme"
+
+Item {
+  id: root
+  property string label: ""
+  property string description: ""
+  property bool checked: false
+  property bool hasCursor: false
+  property bool rounded: true
+  property color foreground: Color.foreground
+  property color accent: 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 value)
+  implicitWidth: content.implicitWidth
+  implicitHeight: Math.max(toggle.implicitHeight, labels.implicitHeight)
+  Row { id: content; spacing: Style.spacing.controlGap; ToggleSwitch { id: toggle; checked: root.checked; accent: root.accent; foreground: root.foreground; interactive: false } Column { id: labels; Text { text: root.label; color: root.foreground; font.family: root.fontFamily; font.pixelSize: root.titleSize } Text { text: root.description; visible: text !== ""; color: root.foreground; opacity: 0.65; font.family: root.fontFamily; font.pixelSize: root.descriptionSize } } }
+  MouseArea { anchors.fill: parent; hoverEnabled: true; cursorShape: root.hasCursor ? Qt.PointingHandCursor : Qt.ArrowCursor; onClicked: root.clicked(); onContainsMouseChanged: root.hovered(containsMouse) }
+}

data/Controls/ToggleSwitch.qml

@@ -0,0 +1,26 @@
+import QtQuick
+import "../Theme"
+
+Item {
+  id: root
+  property bool checked: false
+  property bool busy: false
+  property bool interactive: true
+  property bool hasCursor: false
+  property bool cursorRing: true
+  property real cursorPad: 6
+  property bool rounded: true
+  property color foreground: Color.foreground
+  property color accent: Color.accent
+  property real trackHeight: 24
+  property real trackWidth: 46
+  property real knobSize: 18
+  property real knobInset: 3
+  signal toggled()
+  signal hovered(bool value)
+  implicitWidth: trackWidth
+  implicitHeight: trackHeight
+  Rectangle { anchors.fill: parent; radius: root.rounded ? height / 2 : 2; color: root.checked ? root.accent : Color.muted; opacity: root.busy ? 0.55 : 1 }
+  Rectangle { width: root.knobSize; height: root.knobSize; radius: root.rounded ? width / 2 : 2; color: root.foreground; y: root.knobInset; x: root.checked ? root.trackWidth - width - root.knobInset : root.knobInset; Behavior on x { NumberAnimation { duration: 140 } } }
+  MouseArea { anchors.fill: parent; enabled: root.interactive && !root.busy; hoverEnabled: true; cursorShape: root.hasCursor ? Qt.PointingHandCursor : Qt.ArrowCursor; onClicked: root.toggled(); onContainsMouseChanged: root.hovered(containsMouse) }
+}

data/Controls/WidgetButton.qml

@@ -0,0 +1,35 @@
+import QtQuick
+import "../Theme"
+
+Item {
+  id: root
+  property string text: ""
+  property string tooltipText: ""
+  property bool active: false
+  property bool dimmed: false
+  property bool concealed: false
+  property bool interactive: true
+  property bool pressable: true
+  property string fontFamily: Style.font.family
+  property real fontSize: Style.font.body
+  property color foreground: Color.foreground
+  property color activeColor: Color.accent
+  property real horizontalMargin: 8.5
+  property real verticalPadding: 6
+  property real fixedWidth: -1
+  property real fixedHeight: -1
+  property real textRotation: 0
+  property bool keepSpace: false
+  property bool useActiveColor: true
+  property bool maintainIndicatorReveal: false
+  property bool labelVisible: true
+  property bool hasVisualContent: text !== ""
+  signal pressed(int button)
+  signal wheelMoved(real delta)
+  implicitWidth: fixedWidth >= 0 ? fixedWidth : label.implicitWidth + horizontalMargin * 2
+  implicitHeight: fixedHeight >= 0 ? fixedHeight : label.implicitHeight + verticalPadding * 2
+  opacity: concealed ? 0 : (dimmed ? 0.45 : 1)
+  visible: !concealed || keepSpace
+  Text { id: label; anchors.centerIn: parent; visible: root.labelVisible; text: root.text; color: root.active && root.useActiveColor ? root.activeColor : root.foreground; font.family: root.fontFamily; font.pixelSize: root.fontSize; rotation: root.textRotation }
+  MouseArea { anchors.fill: parent; enabled: root.interactive && root.pressable; acceptedButtons: Qt.AllButtons; onClicked: function(event) { root.pressed(event.button) }; onWheel: function(event) { root.wheelMoved(event.angleDelta.y) } }
+}

data/Controls/qmldir

@@ -0,0 +1,25 @@
+module Zui.Controls
+PanelActionButton 1.0 PanelActionButton.qml
+BarIconButton 1.0 BarIconButton.qml
+BarIndicator 1.0 BarIndicator.qml
+BorderOverlay 1.0 BorderOverlay.qml
+BorderSurface 1.0 BorderSurface.qml
+Button 1.0 Button.qml
+ButtonGroup 1.0 ButtonGroup.qml
+ConfirmDialog 1.0 ConfirmDialog.qml
+CursorSurface 1.0 CursorSurface.qml
+Dropdown 1.0 Dropdown.qml
+MultiSelect 1.0 MultiSelect.qml
+NumberField 1.0 NumberField.qml
+OpticalGlyph 1.0 OpticalGlyph.qml
+PanelHero 1.0 PanelHero.qml
+PanelKeyCatcher 1.0 PanelKeyCatcher.qml
+PanelSectionHeader 1.0 PanelSectionHeader.qml
+PanelSeparator 1.0 PanelSeparator.qml
+PanelSlider 1.0 PanelSlider.qml
+PanelToolTip 1.0 PanelToolTip.qml
+SearchableDropdown 1.0 SearchableDropdown.qml
+TextField 1.0 TextField.qml
+Toggle 1.0 Toggle.qml
+ToggleSwitch 1.0 ToggleSwitch.qml
+WidgetButton 1.0 WidgetButton.qml