zui 0.0.1

data/Components/Builtins/TextMetrics.qml

@@ -0,0 +1,39 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+Item {
+  required property var renderer
+      implicitWidth: 0
+      implicitHeight: 0
+      TextMetrics {
+        id: nativeTextMetrics
+        text: String(renderer.prop("text", ""))
+        font.family: String(renderer.prop("font_family", renderer.fontFamily))
+        font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+        font.bold: renderer.prop("bold", false) === true
+        font.italic: renderer.prop("italic", false) === true
+        font.letterSpacing: Number(renderer.prop("letter_spacing", 0))
+        font.wordSpacing: Number(renderer.prop("word_spacing", 0))
+        elide: {
+          var mode = String(renderer.prop("elide", "none"))
+          if (mode === "left") return Text.ElideLeft
+          if (mode === "middle") return Text.ElideMiddle
+          if (mode === "right") return Text.ElideRight
+          return Text.ElideNone
+        }
+        elideWidth: Number(renderer.prop("elide_width", 0))
+        onMetricsChanged: {
+          if (!renderer.subscribed("metrics")) return
+          renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "metrics", {
+            width: width, height: height, advance_width: advanceWidth, elided_text: elidedText,
+            bounding_rect: { x: boundingRect.x, y: boundingRect.y, width: boundingRect.width, height: boundingRect.height },
+            tight_bounding_rect: { x: tightBoundingRect.x, y: tightBoundingRect.y, width: tightBoundingRect.width, height: tightBoundingRect.height }
+          })
+        }
+      }
+    }

data/Components/Builtins/TimePicker.qml

@@ -0,0 +1,213 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../../Theme"
+
+QQC.Button {
+  id: picker
+
+  required property var renderer
+  property string externalTime: String(renderer.prop("time", ""))
+  property int hours: 0
+  property int minutes: 0
+  property int seconds: 0
+  property bool syncing: false
+
+  function pad(value) { return value < 10 ? "0" + value : String(value) }
+
+  function parseTime(value) {
+    var match = /^(\d{1,2}):(\d{2})(?::(\d{2}))?$/.exec(String(value || ""))
+    if (!match) return false
+    var nextHours = Number(match[1])
+    var nextMinutes = Number(match[2])
+    var nextSeconds = match[3] === undefined ? 0 : Number(match[3])
+    if (nextHours > 23 || nextMinutes > 59 || nextSeconds > 59) return false
+    syncing = true
+    hours = nextHours
+    minutes = nextMinutes
+    seconds = nextSeconds
+    syncing = false
+    syncControls()
+    return true
+  }
+
+  function displayedHour() {
+    if (renderer.prop("use_24_hour", true) !== false) return hours
+    var value = hours % 12
+    return value === 0 ? 12 : value
+  }
+
+  function formattedTime() {
+    var value = pad(hours) + ":" + pad(minutes)
+    return renderer.prop("show_seconds", false) === true ? value + ":" + pad(seconds) : value
+  }
+
+  function displayText() {
+    if (!externalTime.length) return String(renderer.prop("placeholder", "Choose a time"))
+    if (renderer.prop("use_24_hour", true) !== false) return formattedTime()
+    return pad(displayedHour()) + ":" + pad(minutes)
+      + (renderer.prop("show_seconds", false) === true ? ":" + pad(seconds) : "")
+      + (hours >= 12 ? " PM" : " AM")
+  }
+
+  function syncControls() {
+    if (!hourSpin || !minuteSpin || !secondSpin || !meridiem) return
+    hourSpin.value = displayedHour()
+    minuteSpin.value = minutes
+    secondSpin.value = seconds
+    meridiem.currentIndex = hours >= 12 ? 1 : 0
+  }
+
+  function emitInput() {
+    if (syncing) return
+    var value = formattedTime()
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "input", { value: value })
+  }
+
+  onExternalTimeChanged: parseTime(externalTime)
+  onHoursChanged: syncControls()
+  onMinutesChanged: syncControls()
+  onSecondsChanged: syncControls()
+  Component.onCompleted: parseTime(externalTime)
+
+  implicitWidth: Number(renderer.prop("width", 200))
+  implicitHeight: Number(renderer.prop("height", 40))
+  enabled: renderer.prop("enabled", true) !== false
+  onClicked: timePopup.open()
+
+  background: Rectangle {
+    color: renderer.prop("background", Color.popups.background)
+    radius: Number(renderer.prop("radius", Style.cornerRadius))
+    border.width: Style.normalBorderWidth
+    border.color: picker.activeFocus
+      ? renderer.prop("accent", Color.accent)
+      : renderer.prop("border_color", renderer.foreground)
+    opacity: picker.down ? 0.72 : 1
+  }
+
+  contentItem: Row {
+    spacing: Style.spacing.controlGap
+    Text {
+      anchors.verticalCenter: parent.verticalCenter
+      text: String(renderer.prop("label", ""))
+      visible: text.length > 0
+      color: renderer.prop("muted", Color.muted)
+      font.family: String(renderer.prop("font_family", renderer.fontFamily))
+      font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+    }
+    Text {
+      anchors.verticalCenter: parent.verticalCenter
+      text: picker.displayText()
+      color: renderer.prop("foreground", renderer.foreground)
+      font.family: String(renderer.prop("font_family", renderer.fontFamily))
+      font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+    }
+  }
+
+  QQC.Popup {
+    id: timePopup
+    width: Number(renderer.prop("popup_width", 300))
+    height: timeColumn.implicitHeight + topPadding + bottomPadding
+    visible: renderer.prop("opened", false) === true
+    closePolicy: QQC.Popup.CloseOnEscape | QQC.Popup.CloseOnPressOutside
+    padding: Style.spacing.md
+
+    onOpened: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "open", {})
+    onClosed: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "close", {})
+
+    background: Rectangle {
+      color: renderer.prop("popup_background", Color.popups.background)
+      radius: Number(renderer.prop("radius", Style.cornerRadius))
+      border.width: Style.normalBorderWidth
+      border.color: renderer.prop("border_color", renderer.foreground)
+    }
+
+    contentItem: Column {
+      id: timeColumn
+      spacing: Style.spacing.md
+
+      Row {
+        anchors.horizontalCenter: parent.horizontalCenter
+        spacing: Style.spacing.sm
+
+        QQC.SpinBox {
+          id: hourSpin
+          from: renderer.prop("use_24_hour", true) !== false ? 0 : 1
+          to: renderer.prop("use_24_hour", true) !== false ? 23 : 12
+          editable: true
+          onValueModified: {
+            if (renderer.prop("use_24_hour", true) !== false) picker.hours = value
+            else picker.hours = (value % 12) + (meridiem.currentIndex === 1 ? 12 : 0)
+            picker.emitInput()
+          }
+        }
+        Text {
+          anchors.verticalCenter: parent.verticalCenter
+          text: ":"
+          color: renderer.prop("foreground", renderer.foreground)
+        }
+        QQC.SpinBox {
+          id: minuteSpin
+          from: 0
+          to: 59
+          stepSize: Math.max(1, Number(renderer.prop("minute_step", 1)))
+          editable: true
+          onValueModified: {
+            picker.minutes = value
+            picker.emitInput()
+          }
+        }
+        Text {
+          anchors.verticalCenter: parent.verticalCenter
+          visible: renderer.prop("show_seconds", false) === true
+          text: ":"
+          color: renderer.prop("foreground", renderer.foreground)
+        }
+        QQC.SpinBox {
+          id: secondSpin
+          visible: renderer.prop("show_seconds", false) === true
+          from: 0
+          to: 59
+          stepSize: Math.max(1, Number(renderer.prop("second_step", 1)))
+          editable: true
+          onValueModified: {
+            picker.seconds = value
+            picker.emitInput()
+          }
+        }
+        QQC.ComboBox {
+          id: meridiem
+          visible: renderer.prop("use_24_hour", true) === false
+          model: ["AM", "PM"]
+          onActivated: {
+            picker.hours = (picker.hours % 12) + (currentIndex === 1 ? 12 : 0)
+            picker.emitInput()
+          }
+        }
+      }
+
+      Row {
+        anchors.right: parent.right
+        spacing: Style.spacing.sm
+        QQC.Button {
+          text: String(renderer.prop("cancel_text", "Cancel"))
+          onClicked: {
+            picker.parseTime(picker.externalTime)
+            renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "reject", {
+              value: picker.formattedTime()
+            })
+            timePopup.close()
+          }
+        }
+        QQC.Button {
+          text: String(renderer.prop("accept_text", "OK"))
+          onClicked: {
+            var value = picker.formattedTime()
+            renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", { value: value })
+            renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "accept", { value: value })
+            timePopup.close()
+          }
+        }
+      }
+    }
+  }
+}

data/Components/Builtins/Timer.qml

@@ -0,0 +1,13 @@
+import QtQuick
+
+Item {
+  id: timerRoot
+  property var renderer: null
+  Timer {
+    id: nativeTimer
+    interval: Math.max(0,Number(renderer?renderer.prop("interval",1000):1000));repeat:renderer&&renderer.prop("repeat",false)===true;running:renderer&&renderer.prop("running",false)===true;triggeredOnStart:renderer&&renderer.prop("triggered_on_start",false)===true
+    onTriggered:renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"trigger",{})
+    onRunningChanged:renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,running?"start":"stop",{})
+  }
+  Connections{target:renderer;function onNodeChanged(){if(renderer.prop("restart",false)===true)nativeTimer.restart()}}
+}

data/Components/Builtins/Toast.qml

@@ -0,0 +1,213 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import "../../Theme"
+
+QQC.Popup {
+  id: toastRoot
+
+  required property var renderer
+  readonly property bool requestedOpen: renderer.prop("opened", false) === true
+    && renderer.prop("visible", true) !== false
+  readonly property string severity: String(renderer.prop("severity", "info"))
+  readonly property string popupPosition: String(renderer.prop("position", "top_right"))
+  readonly property real popupMargin: Number(renderer.prop("margin", Style.spacing.lg))
+  readonly property real maximumWidth: Number(renderer.prop("max_width", 420))
+  property real remainingDuration: 0
+  property double timeoutDeadline: 0
+
+  function severityIcon() {
+    var explicitIcon = String(renderer.prop("icon", ""))
+    if (explicitIcon.length > 0) return explicitIcon
+    if (severity === "success") return "circle_check"
+    if (severity === "warning") return "warning"
+    if (severity === "error" || severity === "critical") return "circle_xmark"
+    return "circle_info"
+  }
+
+  function severityColor() {
+    if (severity === "success") return renderer.prop("success_color", renderer.prop("accent", Color.accent))
+    if (severity === "warning") return renderer.prop("warning_color", "#d8a657")
+    if (severity === "error" || severity === "critical") return renderer.prop("error_color", Color.urgent)
+    return renderer.prop("accent", Color.accent)
+  }
+
+  function syncOpenState() {
+    if (requestedOpen === opened) return
+    if (requestedOpen) open()
+    else close()
+  }
+
+  function timed() {
+    return renderer.prop("persistent", false) !== true
+      && Number(renderer.prop("duration", 3500)) > 0
+  }
+
+  function startTimeout() {
+    dismissTimer.stop()
+    if (!visible || !timed()) return
+    remainingDuration = Number(renderer.prop("duration", 3500))
+    resumeTimeout()
+  }
+
+  function pauseTimeout() {
+    if (!dismissTimer.running) return
+    remainingDuration = Math.max(1, timeoutDeadline - Date.now())
+    dismissTimer.stop()
+  }
+
+  function resumeTimeout() {
+    if (!visible || !timed() || remainingDuration <= 0) return
+    timeoutDeadline = Date.now() + remainingDuration
+    dismissTimer.interval = remainingDuration
+    dismissTimer.restart()
+  }
+
+  function dismiss(reason) {
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "dismiss", { reason: reason })
+    close()
+  }
+
+  x: {
+    if (!parent) return popupMargin
+    if (popupPosition.indexOf("left") >= 0) return popupMargin
+    if (popupPosition.indexOf("right") >= 0) return parent.width - width - popupMargin
+    return Math.max(popupMargin, (parent.width - width) / 2)
+  }
+  y: {
+    if (!parent) return popupMargin
+    if (popupPosition.indexOf("bottom") === 0) return parent.height - height - popupMargin
+    return popupMargin
+  }
+  width: {
+    var available = parent ? Math.max(0, parent.width - popupMargin * 2) : maximumWidth
+    return Math.min(Number(renderer.prop("width", 360)), available, maximumWidth)
+  }
+  modal: false
+  dim: false
+  focus: false
+  closePolicy: QQC.Popup.NoAutoClose
+  enabled: renderer.prop("enabled", true) !== false
+  padding: Number(renderer.prop("padding", Style.spacing.md))
+
+  background: Rectangle {
+    color: renderer.prop("background", Color.popups.background)
+    radius: Number(renderer.prop("radius", Style.cornerRadius))
+    border.width: Style.normalBorderWidth
+    border.color: renderer.prop("border_color", toastRoot.severityColor())
+  }
+
+  contentItem: RowLayout {
+    spacing: Number(renderer.prop("spacing", Style.spacing.md))
+
+    Text {
+      Layout.alignment: Qt.AlignTop
+      text: renderer.iconGlyph(toastRoot.severityIcon())
+      textFormat: Text.PlainText
+      color: toastRoot.severityColor()
+      font.family: renderer.fontFamily
+      font.pixelSize: Number(renderer.prop("icon_size", 22))
+    }
+
+    ColumnLayout {
+      Layout.fillWidth: true
+      spacing: Style.spacing.xs
+
+      Text {
+        Layout.fillWidth: true
+        visible: text.length > 0
+        text: String(renderer.prop("title", ""))
+        textFormat: Text.PlainText
+        color: renderer.prop("foreground", renderer.foreground)
+        font.family: String(renderer.prop("font_family", renderer.fontFamily))
+        font.pixelSize: Number(renderer.prop("title_size", Style.font.body))
+        font.bold: true
+        wrapMode: Text.Wrap
+      }
+
+      Text {
+        Layout.fillWidth: true
+        text: String(renderer.prop("message", ""))
+        textFormat: Text.PlainText
+        color: String(renderer.prop("title", "")).length > 0
+          ? renderer.prop("muted", Color.muted)
+          : renderer.prop("foreground", renderer.foreground)
+        font.family: String(renderer.prop("font_family", renderer.fontFamily))
+        font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+        wrapMode: Text.Wrap
+      }
+    }
+  }
+
+  TapHandler {
+    onTapped: {
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "click", {})
+      if (renderer.prop("dismiss_on_click", true) !== false) toastRoot.dismiss("click")
+    }
+  }
+
+  HoverHandler {
+    enabled: renderer.prop("pause_on_hover", true) !== false
+    onHoveredChanged: {
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "hover", { value: hovered })
+      if (hovered) toastRoot.pauseTimeout()
+      else toastRoot.resumeTimeout()
+    }
+  }
+
+  Timer {
+    id: dismissTimer
+    repeat: false
+    onTriggered: {
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "timeout", {})
+      toastRoot.dismiss("timeout")
+    }
+  }
+
+  enter: Transition {
+    ParallelAnimation {
+      NumberAnimation {
+        property: "opacity"; from: 0; to: 1
+        duration: renderer.prop("animated", true) !== false
+          ? Number(renderer.prop("animation_duration", 180)) : 0
+        easing.type: renderer.easingType(renderer.prop("easing", "out_cubic"))
+      }
+      NumberAnimation {
+        property: "scale"; from: 0.94; to: 1
+        duration: renderer.prop("animated", true) !== false
+          ? Number(renderer.prop("animation_duration", 180)) : 0
+        easing.type: renderer.easingType(renderer.prop("easing", "out_cubic"))
+      }
+    }
+  }
+
+  exit: Transition {
+    ParallelAnimation {
+      NumberAnimation {
+        property: "opacity"; from: 1; to: 0
+        duration: renderer.prop("animated", true) !== false
+          ? Number(renderer.prop("animation_duration", 140)) : 0
+        easing.type: renderer.easingType("in_cubic")
+      }
+      NumberAnimation {
+        property: "scale"; from: 1; to: 0.94
+        duration: renderer.prop("animated", true) !== false
+          ? Number(renderer.prop("animation_duration", 140)) : 0
+        easing.type: renderer.easingType("in_cubic")
+      }
+    }
+  }
+
+  Component.onCompleted: syncOpenState()
+  onRequestedOpenChanged: syncOpenState()
+  onOpened: {
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "open", {})
+    startTimeout()
+  }
+  onClosed: {
+    dismissTimer.stop()
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "close", {})
+  }
+  onVisibleChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+    visible ? "show" : "hide", {})
+}

data/Components/Builtins/Toggle.qml

@@ -0,0 +1,19 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+ZuiControls.Toggle {
+  required property var renderer
+      label: renderer.escapeAutoText(renderer.prop("label", "")); description: renderer.escapeAutoText(renderer.prop("description", ""))
+      checked: renderer.prop("checked", false) === true; hasCursor: renderer.prop("cursor", false) === true
+      rounded: renderer.prop("rounded", Style.cornerRadius > 0) === true
+      foreground: renderer.prop("foreground", renderer.foreground); accent: renderer.prop("accent", Color.accent)
+      fontFamily: String(renderer.prop("font_family", renderer.fontFamily)); titleSize: Number(renderer.prop("title_size", Style.font.subtitle))
+      descriptionSize: Number(renderer.prop("description_size", Style.font.caption))
+      onClicked: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", { value: !checked })
+      onHovered: function(value) { renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "hover", { value: value }) }
+    }

data/Components/Builtins/ToggleSwitch.qml

@@ -0,0 +1,22 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+ZuiControls.ToggleSwitch {
+  required property var renderer
+      checked: renderer.prop("checked", false) === true; busy: renderer.prop("busy", false) === true
+      interactive: renderer.prop("interactive", renderer.prop("enabled", true)) !== false
+      hasCursor: renderer.prop("cursor", false) === true; cursorRing: renderer.prop("cursor_ring", true) !== false
+      cursorPad: Number(renderer.prop("cursor_pad", Style.space(6))); rounded: renderer.prop("rounded", Style.cornerRadius > 0) === true
+      foreground: renderer.prop("foreground", renderer.foreground); accent: renderer.prop("accent", Color.accent)
+      trackHeight: Number(renderer.prop("track_height", Math.max(22, Math.round(Style.spacing.controlHeight * 0.55))))
+      trackWidth: Number(renderer.prop("track_width", Math.round(trackHeight * 1.9)))
+      knobSize: Number(renderer.prop("knob_size", Math.max(6, Math.round(trackHeight * 0.72))))
+      knobInset: Number(renderer.prop("knob_inset", Math.max(1, Math.round((trackHeight - knobSize) / 2))))
+      onToggled: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", { value: !checked })
+      onHovered: function(value) { renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "hover", { value: value }) }
+    }

data/Components/Builtins/ToolBar.qml

@@ -0,0 +1,61 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../../Theme"
+
+QQC.ToolBar {
+  id: toolBarRoot
+
+  required property var renderer
+  readonly property string contentLayout: String(renderer.prop("layout", "row"))
+
+  position: String(renderer.prop("position", "header")) === "footer"
+    ? QQC.ToolBar.Footer : QQC.ToolBar.Header
+  implicitWidth: Number(renderer.prop("width", 640))
+  implicitHeight: Number(renderer.prop("height", 52))
+  enabled: renderer.prop("enabled", true) !== false
+  visible: renderer.prop("visible", true) !== false
+  padding: Number(renderer.prop("padding", Style.spacing.sm))
+  LayoutMirroring.enabled: String(renderer.prop("layout_direction", "left_to_right")) === "right_to_left"
+  LayoutMirroring.childrenInherit: true
+
+  background: Rectangle {
+    color: renderer.prop("background", Color.background)
+    radius: Number(renderer.prop("radius", 0))
+    border.width: String(renderer.prop("border_color", "")).length > 0 ? Style.normalBorderWidth : 0
+    border.color: renderer.prop("border_color", "transparent")
+  }
+
+  contentItem: Loader {
+    sourceComponent: toolBarRoot.contentLayout === "column" ? columnContent : rowContent
+  }
+
+  Component {
+    id: rowContent
+    Row {
+      spacing: Number(renderer.prop("spacing", Style.spacing.sm))
+      Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent }
+    }
+  }
+
+  Component {
+    id: columnContent
+    Column {
+      spacing: Number(renderer.prop("spacing", Style.spacing.sm))
+      Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent }
+    }
+  }
+
+  TapHandler {
+    enabled: renderer.subscribed("click")
+    onTapped: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "click", {})
+  }
+  onPositionChanged: {
+    if (renderer.subscribed("position_change"))
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "position_change",
+        { value: position === QQC.ToolBar.Footer ? "footer" : "header" })
+  }
+  onVisibleChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+    visible ? "show" : "hide", {})
+  onActiveFocusChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+    activeFocus ? "focus" : "blur", {})
+}

data/Components/Builtins/ToolButton.qml

@@ -0,0 +1,41 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+QQC.ToolButton {
+  required property var renderer
+      id: nativeToolButton
+      text: String(renderer.prop("text", ""))
+      checkable: renderer.prop("checkable", false) === true
+      checked: renderer.prop("checked", false) === true
+      enabled: renderer.prop("enabled", true) !== false
+      implicitWidth: Number(renderer.prop("width", 40))
+      implicitHeight: Number(renderer.prop("height", 36))
+      background: Rectangle {
+        radius: Style.cornerRadius
+        color: nativeToolButton.checked
+          ? renderer.prop("checked_background", renderer.prop("accent", Color.accent))
+          : renderer.prop("background", nativeToolButton.hovered ? Color.popups.background : "transparent")
+        border.width: nativeToolButton.activeFocus ? Style.normalBorderWidth : 0
+        border.color: renderer.prop("accent", Color.accent)
+        opacity: nativeToolButton.down ? 0.72 : 1
+      }
+      contentItem: Text {
+        text: String(renderer.prop("icon", "")).length > 0 ? renderer.iconGlyph(renderer.prop("icon", "")) : nativeToolButton.text
+        textFormat: Text.PlainText
+        color: nativeToolButton.checked ? Color.background : renderer.prop("foreground", renderer.foreground)
+        font.family: String(renderer.prop("font_family", renderer.fontFamily))
+        font.pixelSize: Number(String(renderer.prop("icon", "")).length > 0 ? renderer.prop("icon_size", Style.font.icon) : renderer.prop("font_size", Style.font.body))
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+      }
+      onClicked: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "click", { checked: checked })
+      onToggled: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", { value: checked })
+      onPressed: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "press", {})
+      onReleased: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "release", {})
+      onHoveredChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "hover", { value: hovered })
+    }

data/Components/Builtins/ToolSeparator.qml

@@ -0,0 +1,36 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../../Theme"
+
+QQC.ToolSeparator {
+  id: separatorRoot
+
+  required property var renderer
+  orientation: String(renderer.prop("orientation", "vertical")) === "vertical"
+    ? Qt.Vertical : Qt.Horizontal
+  implicitWidth: vertical
+    ? Number(renderer.prop("thickness", 1)) + Number(renderer.prop("padding", 8)) * 2
+    : Number(renderer.prop("length", 32))
+  implicitHeight: vertical
+    ? Number(renderer.prop("length", 32))
+    : Number(renderer.prop("thickness", 1)) + Number(renderer.prop("padding", 8)) * 2
+  enabled: renderer.prop("enabled", true) !== false
+  visible: renderer.prop("visible", true) !== false
+  opacity: Number(renderer.prop("opacity", 0.25))
+  padding: Number(renderer.prop("padding", 8))
+
+  contentItem: Item {}
+  background: Rectangle {
+    anchors.centerIn: parent
+    width: separatorRoot.vertical
+      ? Number(renderer.prop("thickness", 1))
+      : Number(renderer.prop("length", 32))
+    height: separatorRoot.vertical
+      ? Number(renderer.prop("length", 32))
+      : Number(renderer.prop("thickness", 1))
+    color: renderer.prop("color", renderer.foreground)
+  }
+
+  onVisibleChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+    visible ? "show" : "hide", {})
+}

data/Components/Builtins/Tooltip.qml

@@ -0,0 +1,20 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+ZuiControls.PanelToolTip {
+  required property var renderer
+      text: renderer.escapeAutoText(renderer.prop("text", ""))
+      visible: renderer.prop("visible", false) === true
+      delay: Number(renderer.prop("delay", 400))
+      timeout: Number(renderer.prop("timeout", -1))
+      panelForeground: renderer.prop("foreground", Color.tooltip.text)
+      panelBackground: renderer.prop("background", Color.tooltip.background)
+      panelBorder: renderer.prop("border", Color.tooltip.border)
+      fontFamily: String(renderer.prop("font_family", renderer.fontFamily))
+      fontSize: Number(renderer.prop("font_size", Style.font.bodySmall))
+    }