QmlDesigner: Update the contextual help documentation

This patch updates the contextual help documentation for the
qtquickdesigner components. It updates images, adds
missing texts, fixes broken links and tries to synchronize the
texts for different components.

Fixes: QDS-13038
Change-Id: I6cf2628877e089577fc7fe0ba2d8547f4171f970
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

38 files changed, 1140 insertions, 1232 deletions

diff --git a/src/imports/components/ArcItem.qml b/src/imports/components/ArcItem.qml
index bdb96dc..d7cbc28 100644
--- a/src/imports/components/ArcItem.qml
+++ b/src/imports/components/ArcItem.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2021 The Qt Company Ltd.
+** Copyright (C) 2024 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Studio Components.
@@ -36,51 +36,45 @@ import QtQuick.Shapes
     \since QtQuick.Studio.Components 1.0
     \inherits Shape
 
-    \brief An arc that ends at the specified position and uses the specified
-    radius.
 
-    An arc is specified by setting values in degrees for the \l begin and
-    \l end properties. The arc can be just a line or a filled outline.
-    The \l strokeColor, \l strokeWidth, and \l strokeStyle properties specify
-    the appearance of the line or outline. The \l dashPattern and \l dashOffset
+    \brief An arc that ends at the specified position and uses the specified radius.
+
+    An arc is specified by setting values in degrees for the \l begin and \l end properties. The arc
+    can be just a line or a filled outline. The \l strokeColor, \l strokeWidth, and \l strokeStyle
+    properties specify the appearance of the line or outline. The \l dashPattern and \l dashOffset
     properties specify the appearance of dashed lines.
 
-    The area between the arc's start and end points or the area inside the
-    outline are painted using either a solid fill color, specified using the
-    \l fillColor property, or a gradient, defined using one of the
-    \l ShapeGradient subtypes and set using the \l gradient property.
-    If both a color and a gradient are specified, the gradient is used.
-
-    To create an arc with an outline, set the \l outlineArc property to \c true.
-    The \l arcWidth property specifies the width of the arc outline, including
-    the stroke. The \l arcWidthBegin and \l arcWidthEnd properties can be used
-    to specify the width of the start and end points of the outline separately.
-    The width of the outline between the start and end points is calculated
-    automatically. The inner and outer curves or the outline can be adjusted by
-    specifying values for the \l radiusInnerAdjust and \l radiusOuterAdjust
-    properties.
-
-    The \l round, \l roundBegin, and \l roundEnd properties specify whether the
-    end points of the arc outline have rounded caps. For an arc that does not
-    have an outline, the \l capStyle property specifies whether the line ends
-    are square or rounded.
-
-    Because an arc has curves, it may be appropriate to set the \c antialiasing
-    property that is inherited from \l Item to improve its appearance.
+    The area between the arc's start and end points or the area inside the outline are painted using
+    either a solid fill color, specified using the \l fillColor property, or a gradient, defined
+    using one of the \l ShapeGradient subtypes and set using the \l gradient property. If both a
+    color and a gradient are specified, the gradient is used.
+
+    To create an arc with an outline, set the \l outlineArc property to \c true. The \l arcWidth
+    property specifies the width of the arc outline, including the stroke. The width of the outline
+    between the start and end points is calculated automatically.
+
+    The \l round, \l roundBegin, and \l roundEnd properties specify whether the end points of the
+    arc outline have rounded caps. For an arc that does not have an outline, the \l capStyle
+    property specifies whether the line ends are square or rounded.
+
+    Because an arc has curves, it may be appropriate to set the \c antialiasing property that is
+    inherited from \l Item to improve its appearance.
 
     \section2 Example Usage
 
     You can use the Arc component in \QDS to create different kinds of arcs.
 
-    \image studio-arc.png
+    \image studio-arc.webp
 
     The QML code looks as follows:
 
     \code
+
     ArcItem {
         id: arc
-        x: 31
-        y: 31
+        x: 667
+        y: 490
+        fillColor: "#00ffffff"
         capStyle: 32
         end: 180
         strokeWidth: 6
@@ -89,6 +83,8 @@ import QtQuick.Shapes
 
     ArcItem {
         id: arcOutline
+        x: 910
+        y: 490
         strokeColor: "gray"
         arcWidth: 13
         end: 180
@@ -100,6 +96,9 @@ import QtQuick.Shapes
 
     ArcItem {
         id: circle
+        x: 811
+        y: 490
+        fillColor: "#02ffffff"
         end: 360
         strokeWidth: 5
         strokeColor: "#000000"
@@ -107,6 +106,9 @@ import QtQuick.Shapes
 
     ArcItem {
         id: circleOutline
+        x: 1046
+        y: 490
+        antialiasing: false
         outlineArc: true
         round: true
         strokeColor: "gray"
@@ -124,124 +126,63 @@ Shape {
     height: 100
 
 /*!
-    The gradient of the arc fill color.
-
-    By default, no gradient is enabled and the value is null. In this case, the
-    fill uses a solid color based on the value of \l fillColor.
-
-    When set, \l fillColor is ignored and filling is done using one of the
-    \l ShapeGradient subtypes.
-
-    \note The \l Gradient type cannot be used here. Rather, prefer using one of
-    the advanced subtypes, like \l LinearGradient.
+    \include CommonItemDescriptions.qdocinc {component-gradient} {arc}
 */
     property alias gradient: path.fillGradient
 
 /*!
-    The style of the arc line or outline.
-
-    \value ShapePath.SolidLine
-           A solid line. This is the default value.
-    \value ShapePath.DashLine
-           Dashes separated by a few pixels.
-           The \l dashPattern property specifies the dash pattern.
-
-    \sa Qt::PenStyle
-*/
-
-/*!
-    The width of the arc line or outline.
+    \include CommonItemDescriptions.qdocinc {component-strokeWidth} {arc}
 
-    When set to a negative value, no line is drawn.
-
-    The default value is 4.
-
-    The total width of an arc that has an outline (that is, the outline and the
-    fill) is specified by \l arcWidth.
+    The total width of an arc that has an outline (that is, the outline and the fill) is specified
+    by \l arcWidth.
 */
     property alias strokeWidth: path.strokeWidth
 
 /*!
-    The color of the arc line or outline.
-
-    When set to \c transparent, no line is drawn.
-
-    The default value is \c red.
-
-    \sa QColor
+    \include CommonItemDescriptions.qdocinc {component-strokeColor} {arc}
 */
     property alias strokeColor: path.strokeColor
 
 /*!
-    The dash pattern of the arc or arc outline specified as the dashes and the
-    gaps between them.
-
-    The dash pattern is specified in units of the pen's width. That is, a dash
-    with the length 5 and width 10 is 50 pixels long.
-
-    Each dash is also subject to cap styles, and therefore a dash of 1 with
-    square cap set will extend 0.5 pixels out in each direction resulting in
-    a total width of 2.
-
-    The default \l capStyle is \c {ShapePath.SquareCap}, meaning that a square
-    line end covers the end point and extends beyond it by half the line width.
-
-    The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels
-    followed by a space of 2 * \l strokeWidth pixels.
-
-    \sa QPen::setDashPattern()
+    \include CommonItemDescriptions.qdocinc {component-dashPattern} {arc}
 */
     property alias dashPattern: path.dashPattern
 
+/*!
+    \include CommonItemDescriptions.qdocinc component-joinStyle
+*/
     //property alias joinStyle: path.joinStyle
     property int joinStyle: ShapePath.BevelJoin //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc component-capStyle
+*/
     //property alias capStyle: path.capStyle
     property int capStyle: ShapePath.FlatCap //workaround for regression in Qt 6.6.1 (QDS-11845)
-    //property alias strokeStyle: path.strokeStyle
-    property int strokeStyle: ShapePath.SolidLine //workaround for regression in Qt 6.6.1 (QDS-11845)
 
 /*!
-    The arc fill color.
-
-    If the arc is just a line, the area between its \l begin and \l end
-    points is filled.
-
-    If the arc has an outline, the area within the outline is filled.
-
-    A gradient for the fill can be specified by using \l gradient. If both a
-    color and a gradient are specified, the gradient is used.
-
-    When set to \c transparent, no filling occurs.
-
-    The default value is \c white.
+    \include CommonItemDescriptions.qdocinc {component-strokeStyle} {arc}
 */
-    property alias fillColor: path.fillColor
+    //property alias strokeStyle: path.strokeStyle
+    property int strokeStyle: ShapePath.SolidLine //workaround for regression in Qt 6.6.1 (QDS-11845)
 
 /*!
-    The cap style of the line if the arc does not have an outline.
-
-    \value ShapePath.FlatCap
-           A square line end that does not cover the end point of the line.
-    \value ShapePath.SquareCap
-           A square line end that covers the end point and extends beyond it
-           by half the line width. This is the default value.
-    \value ShapePath.RoundCap
-           A rounded line end.
+    \include CommonItemDescriptions.qdocinc {component-fillColor} {arc}
 
-    \sa round, roundBegin, roundEnd, Qt::PenCapStyle
+    If the arc is just a line, the area between its \l begin and \l end points is filled. If the arc
+    has an outline, the area within the outline is filled.
 */
-
+    property alias fillColor: path.fillColor
 
 /*!
     The starting point of the dash pattern for the arc or arc outline.
 
-    The offset is measured in terms of the units used to specify the dash
-    pattern. For example, a pattern where each stroke is four units long,
-    followed by a gap of two units, will begin with the stroke when drawn
-    as a line. However, if the dash offset is set to 4.0, any line drawn
-    will begin with the gap. Values of the offset up to 4.0 will cause part
-    of the stroke to be drawn first, and values of the offset between 4.0 and
-    6.0 will cause the line to begin with part of the gap.
+    The offset is measured in terms of the units used to specify the dash pattern. For example, a
+    pattern where each stroke is four units long, followed by a gap of two units, will begin with
+    the stroke when drawn as a line. However, if the dash offset is set to 4.0, any line drawn will
+    begin with the gap. Values of the offset up to 4.0 will cause part of the stroke to be drawn
+    first, and values of the offset between 4.0 and 6.0 will cause the line to begin with part of
+    the gap.
 
     The default value is 0.
 
@@ -254,8 +195,7 @@ Shape {
 
     The default value is 0.
 
-    To create a circle, set the value of this property to 0 and the value
-    of the \l end property to 360.
+    To create a circle, set the value of \c begin to 0 and the value of the \c end to 360.
 */
     property real begin: 0
 
@@ -264,18 +204,16 @@ Shape {
 
     The default value is 90.
 
-    To create a circle, set the value of this property to 360 and the value of
-    the \l begin property to 0.
+    To create a circle, set the value of \c end to 360 and the value of the \c begin to 0.
 */
     property real end: 90
 
 /*!
-    The total width of an arc that has an outline, including the outline and
-    fill.
+    The total width of an arc that has an outline, including the outline and fill.
 
     The default value is 10.
 
-    \sa arcWidthBegin, arcWidthEnd, strokeWidth
+    \sa strokeWidth
 */
     property real arcWidth: 10
 
@@ -295,15 +233,15 @@ Shape {
 /*!
     Whether the arc has an outline.
 
-    \sa arcWidth, arcWidthBegin, arcWidthEnd, round, roundBegin, roundEnd,
+    \sa arcWidth, round, roundBegin, roundEnd
 */
     property bool outlineArc: false
 
 /*!
     Whether the arc outline end points have round caps.
 
-    The \l roundBegin and \l roundEnd properties can be used to specify the
-    caps separately for the end points.
+    The \l roundBegin and \l roundEnd properties can be used to specify the caps separately for the
+    end points.
 */
     property bool round: false
 
diff --git a/src/imports/components/BorderItem.qml b/src/imports/components/BorderItem.qml
index 193ea44..9a364c9 100644
--- a/src/imports/components/BorderItem.qml
+++ b/src/imports/components/BorderItem.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2021 The Qt Company Ltd.
+** Copyright (C) 2024 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Studio Components.
@@ -38,35 +38,31 @@ import QtQuick.Shapes
 
     \brief A border drawn in four segments: left, top, right, and bottom.
 
-    The Border type is used to create borders out of four segments: left,
-    top, right, and bottom. The \l drawLeft, \l drawTop, \l drawRight, and
-    \l drawBottom properties can be used to determine whether each of the
-    segments is visible.
+    The Border type is used to create borders out of four segments: left, top, right, and bottom.
+    The \l drawLeft, \l drawTop, \l drawRight, and \l drawBottom properties can be used to determine
+    whether each of the segments is visible.
 
-    The \l borderMode property determines whether the border is drawn along
-    the inside or outside edge of the item, or on top of the edge.
+    The \l borderMode property determines whether the border is drawn along the inside or outside
+    edge of the item, or on top of the edge.
 
-    The \l radius property specifies whether the border corners are rounded.
-    The radius can also be specified separately for each corner. Because this
-    introduces curved edges to the corners, it may be appropriate to set the
-    \c antialiasing property that is inherited from \l Item to improve the
-    appearance of the border.
+    The \l radius property specifies whether the border corners are rounded. The radius can also be
+    specified separately for each corner. Because this introduces curved edges to the corners, it
+    may be appropriate to set the \c antialiasing property that is inherited from \l Item to improve
+    the appearance of the border.
 
     The \l joinStyle property specifies how to connect two border line segments.
 
-    The \l strokeColor, \l strokeWidth, and \l strokeStyle properties specify
-    the appearance of the border line. The \l dashPattern and \l dashOffset
-    properties specify the appearance of dashed lines.
+    The \l strokeColor, \l strokeWidth, and \l strokeStyle properties specify the appearance of the
+    border line. The \l dashPattern and \l dashOffset properties specify the appearance of dashed
+    lines.
 
-    The \l capStyle property specifies whether line ends are square or
-    rounded.
+    The \l capStyle property specifies whether line ends are square or rounded.
 
     \section2 Example Usage
 
-    You can use the Border component in \QDS to create different kinds of
-    borders.
+    You can use the Border component in \QDS to create different kinds of borders.
 
-    \image studio-border.png
+    \image studio-border.webp
 
     The QML code looks as follows:
 
@@ -114,16 +110,12 @@ Shape {
     id: root
     width: 200
     height: 150
-
 /*!
-    The radius used to draw rounded corners.
-
-    The default value is 10.
+    \include CommonItemDescriptions.qdocinc {component-radius} {10}
 
-    If radius is non-zero, the corners will be rounded, otherwise they will
-    be sharp. The radius can also be specified separately for each corner by
-    using the \l bottomLeftRadius, \l bottomRightRadius, \l topLeftRadius, and
-    \l topRightRadius properties.
+    If radius is non-zero, the corners will be rounded, otherwise they will be sharp. The radius can
+    also be specified separately for each corner by using the \l bottomLeftRadius,
+    \l bottomRightRadius, \l topLeftRadius, and \l topRightRadius properties.
 */
     property int radius: 10
 
@@ -189,34 +181,17 @@ Shape {
     property bool bottomLeftBevel: root.bevel
 
 /*!
-    The style of the border line.
-
-    \value ShapePath.SolidLine
-           A solid line. This is the default value.
-    \value ShapePath.DashLine
-           Dashes separated by a few pixels.
-           The \l dashPattern property specifies the dash pattern.
-
-    \sa Qt::PenStyle
-*/
-
-/*!
     The width of the border line.
-
-    When set to a negative value, no line is drawn.
-
     The default value is 4.
+    A width of 1 creates a thin line. For no line, use a negative value or a transparent color.
+
+    \note The width of the border does not affect its position relative to other items if
+    anchors are used.
 */
     property alias strokeWidth: path.strokeWidth
 
 /*!
-    The color of the border line.
-
-    When set to \c transparent, no line is drawn.
-
-    The default value is \c red.
-
-    \sa QColor
+    \include CommonItemDescriptions.qdocinc {component-strokeColor} {border}
 */
     property alias strokeColor: path.strokeColor
 
@@ -224,55 +199,49 @@ Shape {
     The dash pattern of the border line specified as the dashes and the gaps
     between them.
 
-    The dash pattern is specified in units of the pen's width. That is, a dash
-    with the length 5 and width 10 is 50 pixels long.
+    The dash pattern is specified in units of the pen's width. That is, a dash with the length 5
+    and width 10 is 50 pixels long.
 
-    Each dash is also subject to cap styles, and therefore a dash of 1 with
-    square cap set will extend 0.5 pixels out in each direction resulting in
-    a total width of 2.
+    Each dash is also subject to cap styles, and therefore a dash of 1 with square cap set will
+    extend 0.5 pixels out in each direction resulting in a total width of 2.
 
-    The default \l capStyle is \c {ShapePath.SquareCap}, meaning that a square
-    line end covers the end point and extends beyond it by half the line width.
+    The default \l capStyle is \c {ShapePath.SquareCap}, meaning that a square line end covers the
+    end point and extends beyond it by half the line width.
 
-    The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels
-    followed by a space of 2 * \l strokeWidth pixels.
+    The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels followed by a space
+    of 2 * \l strokeWidth pixels.
 
     \sa QPen::setDashPattern()
 */
     property alias dashPattern: path.dashPattern
 
 /*!
-    The join style used to connect two border line segments.
-
-    \value ShapePath.MiterJoin
-           The outer edges of the lines are extended to meet at an angle, and
-           this area is filled.
-    \value ShapePath.BevelJoin
-           The triangular notch between the two lines is filled.
-           This is the default value.
-    \value ShapePath.RoundJoin
-           A circular arc between the two lines is filled.
-
-    \sa Qt::PenJoinStyle
+    \include CommonItemDescriptions.qdocinc component-joinStyle
 */
-
     //property alias joinStyle: path.joinStyle
     property int joinStyle: ShapePath.MiterJoin //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc component-capStyle
+*/
     //property alias capStyle: path.capStyle
     property int capStyle: ShapePath.SquareCap //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeStyle} {border}
+*/
     //property alias strokeStyle: path.strokeStyle
     property int strokeStyle: ShapePath.SolidLine //workaround for regression in Qt 6.6.1 (QDS-11845)
 
 /*!
     The starting point of the dash pattern for the border line.
 
-    The offset is measured in terms of the units used to specify the dash
-    pattern. For example, a pattern where each stroke is four units long,
-    followed by a gap of two units, will begin with the stroke when drawn
-    as a line. However, if the dash offset is set to 4.0, any line drawn
-    will begin with the gap. Values of the offset up to 4.0 will cause part
-    of the stroke to be drawn first, and values of the offset between 4.0 and
-    6.0 will cause the line to begin with part of the gap.
+    The offset is measured in terms of the units used to specify the dash pattern. For example, a
+    pattern where each stroke is four units long, followed by a gap of two units, will begin with
+    the stroke when drawn as a line. However, if the dash offset is set to 4.0, any line drawn will
+    begin with the gap. Values of the offset up to 4.0 will cause part of the stroke to be drawn
+    first, and values of the offset between 4.0 and 6.0 will cause the line to begin with part of
+    the gap.
 
     The default value is 0.
 
@@ -280,20 +249,6 @@ Shape {
 */
     property alias dashOffset: path.dashOffset
 
-/*!
-    The cap style of the line.
-
-    \value ShapePath.FlatCap
-           A square line end that does not cover the end point of the line.
-    \value ShapePath.SquareCap
-           A square line end that covers the end point and extends beyond it
-           by half the line width. This is the default value.
-    \value ShapePath.RoundCap
-           A rounded line end.
-
-    \sa Qt::PenCapStyle
-*/
-
     //property alias fillColor: path.fillColor
 
 /*!
@@ -333,20 +288,7 @@ Shape {
     layer.samples: root.antialiasing && !root.__curveRendererActive ? 4 : 0
 
 /*!
-    Where the border is drawn.
-
-    \value Border.Inside
-           The border is drawn along the inside edge of the item and does not
-           affect the item width.
-           This is the default value.
-    \value Border.Middle
-           The border is drawn over the edge of the item and does not
-           affect the item width.
-    \value Border.Outside
-           The border is drawn along the outside edge of the item and increases
-           the item width by the value of \l strokeWidth.
-
-    \sa strokeWidth
+    \include CommonItemDescriptions.qdocinc component-borderMode
 */
     property int borderMode: 0
 
@@ -360,8 +302,7 @@ Shape {
     }
 
 /*!
-    The property changes the way border radius is calculated.
-    Deactivated by default.
+    \include CommonItemDescriptions.qdocinc component-adjustBorderRadius
 */
     property bool adjustBorderRadius: false
 
diff --git a/src/imports/components/CMakeLists.txt b/src/imports/components/CMakeLists.txt
index aeeb221..7f3a0bc 100644
--- a/src/imports/components/CMakeLists.txt
+++ b/src/imports/components/CMakeLists.txt
@@ -12,7 +12,6 @@ qt_internal_add_qml_module(QuickStudioComponents
         EllipseItem.qml
         FlipableItem.qml
         GroupItem.qml
-        IsoItem.qml
         PieItem.qml
         RectangleItem.qml
         RegularPolygonItem.qml
diff --git a/src/imports/components/CommonItemDescriptions.qdocinc b/src/imports/components/CommonItemDescriptions.qdocinc
new file mode 100644
index 0000000..372bb0a
--- /dev/null
+++ b/src/imports/components/CommonItemDescriptions.qdocinc
@@ -0,0 +1,162 @@
+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+
+//! [component-radius]
+
+    The radius used to draw rounded corners.
+    The default value is \1.
+    If radius is non-zero, the corners will be rounded, otherwise they will be sharp.
+
+//! [component-radius]
+
+//! [component-fillColor]
+
+    The \1 fill color.
+
+    A \1 can be filled with a \c solid color or with any of the \c linear, \c radial, or
+    \c conical gradients.
+
+    When set to \c transparent, no filling occurs.
+
+    The default value is \c white.
+//! [component-fillColor]
+
+//! [component-gradient]
+
+    The gradient of the \1 fill color.
+
+    By default, no gradient is enabled and the value is null. In this case, the fill uses a solid
+    color based on the value of \l fillColor.
+
+    When set, \l fillColor is ignored and filling is done using one of the \l ShapeGradient
+    subtypes.
+//! [component-gradient]
+
+//! [component-joinStyle]
+
+    The join style is used to connect two border line segments.
+
+    \value ShapePath.MiterJoin
+           The outer edges of the lines are extended to meet at an angle, and
+           this area is filled.
+    \value ShapePath.BevelJoin
+           The triangular notch between the two lines is filled.
+           This is the default value.
+    \value ShapePath.RoundJoin
+           A circular arc between the two lines is filled.
+
+    \sa Qt::PenJoinStyle
+//! [component-joinStyle]
+
+//! [component-capStyle]
+
+    The cap style defines how the end points of lines are drawn using QPainter. The cap style
+    only applies to lines with width 1 or greater. The cap style can be \c square, \c flat, or
+    \c round.
+
+    The default is \l Qt::SquareCap
+
+    \sa QPen::capStyle()
+
+//! [component-capStyle]
+
+//! [component-strokeStyle]
+
+    The style of the \1 stroke.
+
+    When set to \c None, no stroke is drawn.
+
+    The stroke can be set to have a \c Solid, \c Dash, \c Dot, \c {Dash Dot}, or \c {Dash Dot Dot}
+    pattern.
+
+    The default value is \c Solid.
+
+//! [component-strokeStyle]
+
+//! [component-strokeWidth]
+
+    The width of the border of the \1.
+    The default value is 4.
+    A width of 1 creates a thin line. For no line, use a negative value or a transparent color.
+
+    \note The width of the \1's border does not affect the geometry of the \1 itself or its
+    position relative to other items if anchors are used.
+
+    The border is rendered within the \1's boundaries.
+
+//! [component-strokeWidth]
+
+//! [component-strokeColor]
+
+    The color used to draw the border of the \1.
+    When set to \c transparent, no line is drawn.
+    The default value is \c red.
+
+    \sa QColor
+
+//! [component-strokeColor]
+
+//! [component-dashPattern]
+
+    The dash pattern of the \1 border specified as the dashes and the gaps between them.
+
+    The dash pattern is specified in units of the pen's width. That is, a dash with the length 5
+    and width 10 is 50 pixels long.
+
+    Each dash is also subject to cap styles, and therefore a dash of 1 with square cap set will
+    extend 0.5 pixels out in each direction resulting in a total width of 2.
+
+    The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels followed by a space
+    of 2 * \l strokeWidth pixels.
+
+    \sa QPen::setDashPattern()
+
+//! [component-dashPattern]
+
+//! [component-dashOffset]
+
+    The starting point of the dash pattern for the \1 border.
+
+    The offset is measured in terms of the units used to specify the dash pattern. For example, a
+    pattern where each stroke is four units long, followed by a gap of two units, will begin with
+    the stroke when drawn as a line. However, if the dash offset is set to 4.0, any line drawn will
+    begin with the gap. Values of the offset up to 4.0 will cause part of the stroke to be drawn
+    first, and values of the offset between 4.0 and 6.0 will cause the line to begin with part of
+    the gap.
+
+    The default value is 0.
+
+    \sa QPen::setDashOffset()
+
+//! [component-dashOffset]
+
+//! [component-borderMode]
+
+    It defines where the border is drawn.
+
+    \value Border.Inside
+           The border is drawn along the inside edge of the item and does not
+           affect the item width.
+           This is the default value.
+    \value Border.Middle
+           The border is drawn over the edge of the item and does not
+           affect the item width.
+    \value Border.Outside
+           The border is drawn along the outside edge of the item and increases
+           the item width by the value of \l strokeWidth.
+
+    The default value is 0, which sets the border along the inside edge of the \l Item.
+
+    \sa strokeWidth
+
+//! [component-borderMode]
+
+//! [component-adjustBorderRadius]
+
+    It defines how the border radius is calculated for the corners.
+
+//! [component-adjustBorderRadius]
+
+*/
diff --git a/src/imports/components/EllipseItem.qml b/src/imports/components/EllipseItem.qml
index cad154f..e953742 100644
--- a/src/imports/components/EllipseItem.qml
+++ b/src/imports/components/EllipseItem.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2021 The Qt Company Ltd.
+** Copyright (C) 2024 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Studio Components.
@@ -37,109 +37,119 @@ import QtQuick.Shapes
     \inherits Shape
 
     \brief A filled ellipse with an optional border.
+
+    An ellipse can be just an ellipse shaped stroke, a filling, or a stroke with filling. The
+    \l strokeColor, \l strokeWidth, and \l strokeStyle properties specify the appearance of the
+    outline. The \l dashPattern and \l dashOffset properties specify the appearance of a dashed
+    stroke.
+
+    The area inside the stroke is painted using either a solid fill color, specified using the
+    \l fillColor property, or a gradient, defined using one of the \l ShapeGradient subtypes and set
+    using the \l gradient property. If both a color and a gradient are specified, the gradient is
+    used.
+
+    To create an ellipse with a stroke, set a \l strokeWidth property that is greater than 0. The
+    \l strokeWidth property specifies the width of the ellipse stroke. The default \l strokeWidth
+    value is 4. Setting the \l strokeWidth value to -1 hides the border. To set the border outside,
+    inside, or on top of the ellipse's boundary, use \l borderMode. The default value 0 sets the
+    border inside the ellipse's boundary.
+
+    \section2 Example Usage
+
+    \image studio-ellipse.webp
+
+    The QML code looks as follows:
+
+    \code
+    EllipseItem {
+        id: ellipse
+        x: 571
+        y: 199
+        width: 167
+        height: 125
+        strokeColor: "#808080"
+        strokeStyle: 1
+        borderMode: 0
+        strokeWidth: 4
+    }
+
+    EllipseItem {
+        id: ellipseStroke
+        x: 773
+        y: 199
+        width: 167
+        height: 125
+        fillColor: "#00ffffff"
+        strokeWidth: 4
+        strokeStyle: 1
+        strokeColor: "#808080"
+        borderMode: 0
+    }
+
+    EllipseItem {
+        id: ellipseFilling
+        x: 571
+        y: 350
+        width: 167
+        height: 125
+        strokeWidth: -1
+        strokeStyle: 1
+        strokeColor: "#808080"
+        borderMode: 0
+    }
+
+    EllipseItem {
+        id: ellipseDashDotStroke
+        x: 773
+        y: 350
+        width: 167
+        height: 125
+        strokeWidth: 4
+        strokeStyle: 4
+        strokeColor: "#808080"
+        fillColor: "#00ffffff"
+        borderMode: 0
+    }
+    \endcode
 */
 
 Shape {
     id: root
     width: 200
     height: 150
-
 /*!
-    The gradient of the rectangle fill color.
-
-    By default, no gradient is enabled and the value is null. In this case, the
-    fill uses a solid color based on the value of \l fillColor.
-
-    When set, \l fillColor is ignored and filling is done using one of the
-    \l ShapeGradient subtypes.
-
-    \note The \l Gradient type cannot be used here. Rather, prefer using one of
-    the advanced subtypes, like \l LinearGradient.
+    \include CommonItemDescriptions.qdocinc {component-gradient} {ellipse}
 */
     property alias gradient: path.fillGradient
 
 /*!
-    The style of the rectangle border.
-
-    \value ShapePath.SolidLine
-           A solid line. This is the default value.
-    \value ShapePath.DashLine
-           Dashes separated by a few pixels.
-           The \l dashPattern property specifies the dash pattern.
-
-    \sa Qt::PenStyle
+    \include CommonItemDescriptions.qdocinc {component-strokeStyle} {ellipse}
 */
-
     //property alias strokeStyle: path.strokeStyle
     property int strokeStyle: ShapePath.SolidLine //workaround for regression in Qt 6.6.1 (QDS-11845)
 
 /*!
-    The width of the border of the rectangle.
-
-    The default value is 4.
-
-    A width of 1 creates a thin line. For no line, use a negative value or a
-    transparent color.
-
-    \note The width of the rectangle's border does not affect the geometry of
-    the rectangle itself or its position relative to other items if anchors are
-    used.
-
-    The border is rendered within the rectangle's boundaries.
+    \include CommonItemDescriptions.qdocinc {component-strokeWidth} {ellipse}
 */
     property alias strokeWidth: path.strokeWidth
 
 /*!
-    The color used to draw the border of the rectangle.
-
-    When set to \c transparent, no line is drawn.
-
-    The default value is \c red.
-
-    \sa QColor
+    \include CommonItemDescriptions.qdocinc {component-strokeColor} {ellipse}
 */
     property alias strokeColor: path.strokeColor
 
 /*!
-    The dash pattern of the rectangle border specified as the dashes and the
-    gaps between them.
-
-    The dash pattern is specified in units of the pen's width. That is, a dash
-    with the length 5 and width 10 is 50 pixels long.
-
-    The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels
-    followed by a space of 2 * \l strokeWidth pixels.
-
-    \sa QPen::setDashPattern()
+    \include CommonItemDescriptions.qdocinc {component-dashPattern} {ellipse}
 */
     property alias dashPattern: path.dashPattern
 
 /*!
-    The rectangle fill color.
-
-    A gradient for the fill can be specified by using \l gradient. If both a
-    color and a gradient are specified, the gradient is used.
-
-    When set to \c transparent, no filling occurs.
-
-    The default value is \c white.
+    \include CommonItemDescriptions.qdocinc {component-fillColor} {ellipse}
 */
     property alias fillColor: path.fillColor
 
 /*!
-    The starting point of the dash pattern for the rectangle border.
-
-    The offset is measured in terms of the units used to specify the dash
-    pattern. For example, a pattern where each stroke is four units long,
-    followed by a gap of two units, will begin with the stroke when drawn
-    as a line. However, if the dash offset is set to 4.0, any line drawn
-    will begin with the gap. Values of the offset up to 4.0 will cause part
-    of the stroke to be drawn first, and values of the offset between 4.0 and
-    6.0 will cause the line to begin with part of the gap.
-
-    The default value is 0.
-
-    \sa QPen::setDashOffset()
+    \include CommonItemDescriptions.qdocinc {component-dashOffset} {ellipse}
 */
     property alias dashOffset: path.dashOffset
 
@@ -152,8 +162,7 @@ Shape {
     layer.samples: root.antialiasing && !root.__curveRendererActive ? 4 : 0
 
 /*!
-    The border is rendered within the rectangle's boundaries, outside of them,
-    or on top of them.
+    \include CommonItemDescriptions.qdocinc component-borderMode
 */
     property int borderMode: 0
 
diff --git a/src/imports/components/FlipableItem.qml b/src/imports/components/FlipableItem.qml
index 7ca6a9f..f4725bb 100644
--- a/src/imports/components/FlipableItem.qml
+++ b/src/imports/components/FlipableItem.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2021 The Qt Company Ltd.
+** Copyright (C) 2024 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Studio Components.
@@ -36,44 +36,57 @@ import QtQuick
 
     \brief Provides a surface that can be flipped.
 
-    A Flipable type can be visibly \e flipped between its front and back sides,
-    like a card. The front and back sides are specified by using any two types
-    inside the Flipable type. The type with the higher z-order is the front
-    side. The \l opacityFront and \l opacityBack properties are used to hide
-    and show either the front or back side of the item at a time.
+    A Flipable type can be visibly flipped between its front and back sides, like a card. The front
+    and back sides are specified by using any two types inside the Flipable type. The type with the
+    higher z-order is the front side. The \l opacityFront and \l opacityBack properties are used to
+    hide and show either the front or back side of the item at a time.
 
-    The \l flipAngle property is used to animate the angle of the type to
-    produce the flipping effect. The value of the \l rotationalAxis property
-    determines which axis the type is rotated around.
+    The \l flipAngle property is used to animate the angle of the type to produce the flipping
+    effect. The value of the \l rotationalAxis property determines which axis the type is rotated
+    around.
 
     \section2 Example Usage
 
-    You can use the Flipable component in \QDS to create an item that can be
-    flipped. In this example, the two sides of the item show ISO 7000 icons.
+    You can use the Flipable component in \QDS to create an item that can be flipped.
 
-    \image studio-flipable.png
+    \image studio-flipable.webp
 
     The QML code looks as follows:
 
     \code
     FlipableItem {
         id: flipable
-        width: 90
-        height: 89
-        opacityBack: 0
-
-        IsoItem {
-            id: arrowIsoIcon
-            color: "#808080"
-            anchors.fill: parent
-            source: "./iso-icons/iso_grs_7000_4_0251.dat"
+        x: 595
+        y: 277
+        width: 493
+        height: 493
+        opacityFront: 1
+        opacityBack: 0.09412
+        flipAngle: 45
+        rotationalAxis: 1
+
+        TriangleItem {
+            id: triangle
+            x: 122
+            y: 122
+            width: 250
+            height: 250
+            opacity: 1
+            z: 0
+            strokeWidth: 10
+            fillColor: "#6cff9f"
+            rotation: -270
         }
 
-        IsoItem {
-            id: questionIsoIcon
-            color: "#808080"
-            anchors.fill: parent
-            source: "./iso-icons/iso_grs_7000_4_0435.dat"
+        TriangleItem {
+            id: triangle1
+            x: 16
+            y: 122
+            width: 250
+            height: 250
+            strokeWidth: 10
+            rotation: 270
+            fillColor: "#6cff9f"
         }
     }
     \endcode
diff --git a/src/imports/components/GroupItem.qml b/src/imports/components/GroupItem.qml
index 3b290f1..50f168a 100644
--- a/src/imports/components/GroupItem.qml
+++ b/src/imports/components/GroupItem.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2021 The Qt Company Ltd.
+** Copyright (C) 2024 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Studio Components.
@@ -37,35 +37,37 @@ import QtQuick
 
     \brief A group item that gets its size from its children.
 
-    The Group type is an \l Item type extended with the size property. The value
-    of size is automatically calculated to fit the children of the group.
+    The Group type is an \l Item type extended with the size property. The value of size is
+    automatically calculated to fit the children of the group.
 
     \section2 Example Usage
 
     You can use the Group type to specify the size of one or several items.
 
-    \image studio-group.png
+    \image studio-group.webp
 
     The QML code looks as follows:
 
     \code
-    GroupItem {
+     GroupItem {
         id: group
+        x: 820
+        y: 437
 
         Rectangle {
-        id: rectangle
-        width: 200
-        height: 200
-        color: "#c2c2c2"
+            id: rectangle1
+            width: 200
+            height: 200
+            color: "#c2c2c2"
         }
 
         Rectangle {
-        id: rectangle1
-        x: 140
-        y: 140
-        width: 200
-        height: 200
-        color: "#000000"
+            id: rectangle2
+            x: 140
+            y: 140
+            width: 200
+            height: 200
+            color: "#000000"
         }
     }
     \endcode
diff --git a/src/imports/components/IsoItem.qml b/src/imports/components/IsoItem.qml
deleted file mode 100644
index 5ab86b2..0000000
--- a/src/imports/components/IsoItem.qml
+++ /dev/null
@@ -1,67 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2021 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of Qt Quick Studio Components.
-**
-** $QT_BEGIN_LICENSE:GPL$
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and The Qt Company. For licensing terms
-** and conditions see https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** GNU General Public License Usage
-** Alternatively, this file may be used under the terms of the GNU
-** General Public License version 3 or (at your option) any later version
-** approved by the KDE Free Qt Foundation. The licenses are as published by
-** the Free Software Foundation and appearing in the file LICENSE.GPL3
-** included in the packaging of this file. Please review the following
-** information to ensure the GNU General Public License requirements will
-** be met: https://www.gnu.org/licenses/gpl-3.0.html.
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick
-import QtQuick
-import QtQuick.Extras
-
-/*!
-    \qmltype IsoItem
-    \inqmlmodule QtQuick.Studio.Components
-    \since QtQuick.Studio.Components 1.0
-    \inherits ShapePath
-    \ingroup qtquickstudio-components
-
-    \brief An ISO 7000 icon.
-
-    The IsoItem type specifies an icon from an ISO 7000 icon library as a
-    \l [QtQuickExtras] {Picture} type. The icon to use for the type and its
-    color can be specified.
-
-    \section2 Example Usage
-
-    You can use the IsoItem type in \QDS to add ISO 7000 icons.
-
-    \image studio-flipable.png
-
-    The QML code looks as follows:
-
-    \code
-    IsoItem {
-        id: arrowIsoIcon
-        color: "#808080"
-        anchors.fill: parent
-        source: "./iso-icons/iso_grs_7000_4_0251.dat"
-    }
-    \endcode
-*/
-
-Picture {
-
-}
diff --git a/src/imports/components/PieItem.qml b/src/imports/components/PieItem.qml
index dde9f19..c476b6f 100644
--- a/src/imports/components/PieItem.qml
+++ b/src/imports/components/PieItem.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2021 The Qt Company Ltd.
+** Copyright (C) 2024 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Studio Components.
@@ -38,37 +38,35 @@ import QtQuick.Shapes
 
     \brief A pie.
 
-    The Pie type is used to create a pie slice, a pie that is missing slices,
-    or just the pie rind (similar to an \l ArcItem), depending on the \l begin
-    and \l end property values and the \l hideLine value.
+    The Pie type is used to create a pie slice, a pie that is missing slices, or just the pie stroke
+    (similar to an \l ArcItem), depending on the \l begin and \l end property values and the
+    \l hideLine value.
 
-    The filling of the pie is painted using either a solid fill color, specified
-    using the \l fillColor property, or a gradient, defined using one of the
-    \l ShapeGradient subtypes and set using the \l gradient property.
-    If both a color and a gradient are specified, the gradient is used.
+    The filling of the pie is painted using either a solid fill color, specified using the
+    \l fillColor property, or a gradient, defined using one of the \l ShapeGradient subtypes and set
+    using the \l gradient property. If both a color and a gradient are specified, the gradient is
+    used.
 
-    The \l strokeColor, \l strokeWidth, and \l strokeStyle properties specify
-    the appearance of the pie outline. The \l dashPattern and \l dashOffset
-    properties specify the appearance of dashed lines.
+    The \l strokeColor, \l strokeWidth, and \l strokeStyle properties specify the appearance of the
+    pie outline. The \l dashPattern and \l dashOffset properties specify the appearance of dashed
+    lines.
 
-    The \l capStyle property specifies whether line ends are square or
-    rounded.
-
-    Because a pie has curved edges, it may be appropriate to set the
-    \c antialiasing property that is inherited from \l Item to improve
-    its appearance.
+    The \l capStyle property specifies whether line ends are square or rounded.
 
     \section2 Example Usage
 
     You can use the Pie component in \QDS to create different kinds of pies.
 
-    \image studio-pie.png
+    \image studio-pie.webp
 
     The QML code looks as follows:
 
     \code
-        PieItem {
+    PieItem {
         id: pieSlice
+        x: 920
+        y: 416
+        strokeWidth: -1
         antialiasing: true
         strokeColor: "gray"
         fillColor: "light gray"
@@ -76,6 +74,8 @@ import QtQuick.Shapes
 
     PieItem {
         id: pie
+        x: 1118
+        y: 407
         end: 300
         fillColor: "#d3d3d3"
         strokeColor: "#808080"
@@ -83,7 +83,10 @@ import QtQuick.Shapes
     }
 
     PieItem {
-        id: pieRind
+        id: pieStroke
+        x: 1022
+        y: 548
+        fillColor: "#00ffffff"
         strokeWidth: 4
         capStyle: 32
         hideLine: true
@@ -101,135 +104,66 @@ Shape {
     height: 100
 
 /*!
-    The gradient of the pie fill color.
-
-    By default, no gradient is enabled and the value is null. In this case, the
-    fill uses a solid color based on the value of \l fillColor.
-
-    When set, \l fillColor is ignored and filling is done using one of the
-    \l ShapeGradient subtypes.
-
-    \note The \l Gradient type cannot be used here. Rather, prefer using one of
-    the advanced subtypes, like \l LinearGradient.
+    \include CommonItemDescriptions.qdocinc {component-gradient} {pie}
 */
     property alias gradient: path.fillGradient
 
 /*!
-    The style of the border line.
-
-    \value ShapePath.SolidLine
-           A solid line. This is the default value.
-    \value ShapePath.DashLine
-           Dashes separated by a few pixels.
-           The \l dashPattern property specifies the dash pattern.
-
-    \sa Qt::PenStyle
+    \include CommonItemDescriptions.qdocinc component-joinStyle
 */
-
     //property alias joinStyle: path.joinStyle
     property int joinStyle: ShapePath.BevelJoin //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc component-capStyle
+*/
     //property alias capStyle: path.capStyle
     property int capStyle: ShapePath.FlatCap //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeStyle} {pie}
+*/
     //property alias strokeStyle: path.strokeStyle
     property int strokeStyle: ShapePath.SolidLine //workaround for regression in Qt 6.6.1 (QDS-11845)
 
 /*!
-    The width of the line.
-
-    When set to a negative value, no line is drawn.
-
-    The default value is 4.
+    \include CommonItemDescriptions.qdocinc {component-strokeWidth} {pie}
 */
     property alias strokeWidth: path.strokeWidth
 
 /*!
-    The color of the line.
-
-    When set to \c transparent, no line is drawn.
-
-    The default value is \c red.
-
-    \sa QColor
+    \include CommonItemDescriptions.qdocinc {component-strokeColor} {pie}
 */
     property alias strokeColor: path.strokeColor
 
 /*!
-    The dash pattern of the line specified as the dashes and the gaps between
-    them.
-
-    The dash pattern is specified in units of the pen's width. That is, a dash
-    with the length 5 and width 10 is 50 pixels long.
-
-    Each dash is also subject to cap styles, and therefore a dash of 1 with
-    square cap set will extend 0.5 pixels out in each direction resulting in
-    a total width of 2.
-
-    The default \l capStyle is \c {ShapePath.SquareCap}, meaning that a square
-    line end covers the end point and extends beyond it by half the line width.
-
-    The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels
-    followed by a space of 2 * \l strokeWidth pixels.
-
-    \sa QPen::setDashPattern()
+    \include CommonItemDescriptions.qdocinc {component-dashPattern} {pie}
 */
     property alias dashPattern: path.dashPattern
 
 /*!
-    The pie fill color.
-
-    If \l hideLine is \c false, a pie slice is drawn using the values of the
-    \l begin and \l end properties and filled with this color.
-
-    If \l hideLine is \c true, just the pie rind is drawn and the area between
-    the \l begin and \l end points is filled.
-
-    A gradient for the fill can be specified by using \l gradient. If both a
-    color and a gradient are specified, the gradient is used.
+    \include CommonItemDescriptions.qdocinc {component-fillColor} {pie}
 
-    When set to \c transparent, no filling occurs.
+    If \l hideLine is \c false, a pie slice is drawn using the values of the \l begin and \l end
+    properties and filled with this color.
 
-    The default value is \c white.
+    If \l hideLine is \c true, just the pie stroke is drawn and the area between the \l begin and
+    \l end points is filled.
 */
     property alias fillColor: path.fillColor
 
 /*!
-    The starting point of the dash pattern for the line.
-
-    The offset is measured in terms of the units used to specify the dash
-    pattern. For example, a pattern where each stroke is four units long,
-    followed by a gap of two units, will begin with the stroke when drawn
-    as a line. However, if the dash offset is set to 4.0, any line drawn
-    will begin with the gap. Values of the offset up to 4.0 will cause part
-    of the stroke to be drawn first, and values of the offset between 4.0 and
-    6.0 will cause the line to begin with part of the gap.
-
-    The default value is 0.
-
-    \sa QPen::setDashOffset()
+    \include CommonItemDescriptions.qdocinc {component-dashOffset} {pie}
 */
     property alias dashOffset: path.dashOffset
 
 /*!
-    The cap style of the line.
-
-    \value ShapePath.FlatCap
-           A square line end that does not cover the end point of the line.
-    \value ShapePath.SquareCap
-           A square line end that covers the end point and extends beyond it
-           by half the line width. This is the default value.
-    \value ShapePath.RoundCap
-           A rounded line end.
-
-    \sa Qt::PenCapStyle
-*/
-
-/*!
     The position in degrees where the pie begins.
 
     The default value is 0.
 
-    To create a circle, set the value of this property to 0 and the value of the
-    \l end property to 360.
+    To create a circle, set the value of this property to 0 and the value of the \l end property to
+    360.
 */
     property real begin: 0
 
@@ -238,8 +172,8 @@ Shape {
 
     The default value is 90.
 
-    To create a circle, set the value of this property to 360 and the value of
-    the \l begin property to 0.
+    To create a circle, set the value of this property to 360 and the value of the \l begin property
+    to 0.
 */
     property real end: 90
 
@@ -261,7 +195,7 @@ Shape {
     }
 
 /*!
-    Whether to draw a pie slice or just the pie rind (similar to an \l ArcItem).
+    Whether to draw a pie slice or just the pie stroke (similar to an \l ArcItem).
 */
     property bool hideLine: {
         if (root.alpha <= 0)
diff --git a/src/imports/components/RectangleItem.qml b/src/imports/components/RectangleItem.qml
index 7d7881a..7982fb1 100644
--- a/src/imports/components/RectangleItem.qml
+++ b/src/imports/components/RectangleItem.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2021 The Qt Company Ltd.
+** Copyright (C) 2024 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Studio Components.
@@ -38,109 +38,121 @@ import QtQuick.Shapes
 
     \brief A filled rectangle with an optional border.
 
-    Rectangle items are used to fill areas with solid color or gradients and
-    to provide a rectangular border.
+    Rectangle items are used to fill areas with solid color or gradients and to provide a
+    rectangular border.
 
-    Each Rectangle item is painted using either a solid fill color, specified
-    using the \l fillColor property, or a gradient, defined using one of the
-    \l ShapeGradient subtypes and set using the \l gradient property.
-    If both a color and a gradient are specified, the gradient is used.
+    Each Rectangle item is painted using either a solid fill color, specified using the \l fillColor
+    property, or a gradient, defined using one of the \l ShapeGradient subtypes and set using the
+    \l gradient property. If both a color and a gradient are specified, the gradient is used.
 
-    An optional border can be added to a rectangle with its own color and
-    thickness by setting the \l strokeColor and \l strokeWidth properties.
-    Setting the color to \c transparent creates a border without a fill color.
+    An optional border can be added to a rectangle with its own color and thickness by setting the
+    \l strokeColor and \l strokeWidth properties. Setting the color to \c transparent creates a
+    border without a fill color.
 
-    Rounded rectangles can be drawn using the \l radius property. The radius
-    can also be specified separately for each corner. Because this introduces
-    curved edges to the corners of a rectangle, it may be appropriate to set
-    the \c antialiasing property that is inherited from \l Item to improve the
-    appearance of the rectangle.
+    Rounded rectangles can be drawn using the \l radius property. The radius can also be specified
+    separately for each corner. Because this introduces curved edges to the corners of a rectangle.
+    Additionally, \l bevel can be applied on any corner to cut it off sharply.
 
     \section2 Example Usage
 
-    You can use the Rectangle component in \QDS to create different kinds of
-    rectangles.
+    You can use the Rectangle component in \QDS to create different kinds of rectangles.
 
-    \image studio-rectangle.png
+    \image studio-rectangle.webp
 
     The QML code looks as follows:
 
     \code
     RectangleItem {
-        id: rectangle
-        gradient: RadialGradient {
-            focalRadius: 0
-            centerY: 38.5
-            focalY: 38.5
-            centerX: 51.5
-            centerRadius: 38.5
-            GradientStop {
-                position: 0
-                color: "#ffffff"
-            }
-
-            GradientStop {
-                position: 1
-                color: "#000000"
-            }
-            focalX: 51.5
-        }
-        bottomRightRadius: 0
-        topLeftRadius: 0
-        strokeColor: "gray"
-    }
-
-    RectangleItem {
         id: rectangle1
-        gradient: LinearGradient {
-            y1: 0
-            y2: 77
-            x2: 103
-            x1: 0
+        x: 480
+        y: 164
+        width: 409
+        height: 307
+        radius: 0
+        gradient: RadialGradient {
             GradientStop {
                 position: 0
-                color: "#ffffff"
+                color: "#cea1f9fc"
             }
 
             GradientStop {
                 position: 1
-                color: "#000000"
+                color: "#ec7d7d"
             }
+            focalY: rectangle1.height * 0.5
+            focalX: rectangle1.width * 0.5
+            focalRadius: Math.min(rectangle1.width, rectangle1.height) * 0
+            centerY: rectangle1.height * 0.5
+            centerX: rectangle1.width * 0.5
+            centerRadius: Math.min(rectangle1.width, rectangle1.height) * 0.5
         }
-        topRightRadius: 0
-        bottomLeftRadius: 0
-        strokeColor: "#808080"
+        strokeWidth: 6
+        strokeColor: "#ff0000"
+        bottomLeftRadius: 30
+        topRightRadius: 30
+        adjustBorderRadius: true
     }
 
     RectangleItem {
         id: rectangle2
-        topLeftRadius: 0
-        bottomRightRadius: 0
-        fillColor: "#d3d3d3"
-        strokeColor: "#808080"
+        x: 954
+        y: 164
+        width: 409
+        height: 307
+        radius: 0
+        fillColor: "#c062606a"
+        strokeWidth: -1
+        topRightRadius: 30
+        strokeColor: "#8b8a8a"
+        bottomLeftRadius: 30
+        adjustBorderRadius: true
     }
 
     RectangleItem {
         id: rectangle3
-        fillColor: "#000000"
+        x: 480
+        y: 533
+        width: 409
+        height: 307
+        radius: 0
         gradient: LinearGradient {
-            y1: 0
-            y2: 77
-            x2: 103
-            x1: 0
+            y2: rectangle3.height * 1
+            y1: rectangle3.height * 0
+            x2: rectangle3.width * 1
+            x1: rectangle3.width * 0
             GradientStop {
-                position: 0
-                color: "#000000"
+                position: 0.10526
+                color: "#e77979"
             }
-
             GradientStop {
-                position: 1
-                color: "#fdf9f9"
+                position: 0.67105
+                color: "#716767"
             }
         }
-        topRightRadius: 0
+        topRightBevel: true
+        topRightRadius: 30
+        strokeWidth: 6
+        strokeColor: "#ff0000"
         bottomLeftRadius: 0
-        strokeColor: "#808080"
+        adjustBorderRadius: true
+    }
+
+    RectangleItem {
+        id: rectangle4
+        x: 954
+        y: 533
+        width: 409
+        height: 307
+        radius: 30
+        fillColor: "#d87c7c"
+        borderMode: 2
+        dashOffset: 3
+        joinStyle: 2
+        strokeStyle: 5
+        topRightBevel: false
+        strokeWidth: 6
+        strokeColor: "#ff0000"
+        adjustBorderRadius: true
     }
     \endcode
 */
@@ -149,16 +161,12 @@ Shape {
     id: root
     width: 200
     height: 150
-
 /*!
-    The radius used to draw rounded corners.
+    \include CommonItemDescriptions.qdocinc {component-radius} {10}
 
-    The default value is 10.
-
-    If radius is non-zero, the corners will be rounded, otherwise they will
-    be sharp. The radius can also be specified separately for each corner by
-    using the \l bottomLeftRadius, \l bottomRightRadius, \l topLeftRadius, and
-    \l topRightRadius properties.
+    If radius is non-zero, the corners will be rounded, otherwise they will be sharp. The radius can
+    also be specified separately for each corner by using the \l bottomLeftRadius,
+    \l bottomRightRadius, \l topLeftRadius, and \l topRightRadius properties.
 */
     property int radius: 10
 
@@ -183,135 +191,81 @@ Shape {
     property int bottomRightRadius: root.radius
 
 /*!
-    The gradient of the rectangle fill color.
-
-    By default, no gradient is enabled and the value is null. In this case, the
-    fill uses a solid color based on the value of \l fillColor.
-
-    When set, \l fillColor is ignored and filling is done using one of the
-    \l ShapeGradient subtypes.
-
-    \note The \l Gradient type cannot be used here. Rather, prefer using one of
-    the advanced subtypes, like \l LinearGradient.
+    \include CommonItemDescriptions.qdocinc {component-gradient} {rectangle}
 */
     property ShapeGradient gradient: null
 
 /*!
-    The style of the rectangle border.
-
-    \value ShapePath.SolidLine
-           A solid line. This is the default value.
-    \value ShapePath.DashLine
-           Dashes separated by a few pixels.
-           The \l dashPattern property specifies the dash pattern.
-
-    \sa Qt::PenStyle
+    \include CommonItemDescriptions.qdocinc component-joinStyle
 */
     //property alias joinStyle: path.joinStyle
     property int joinStyle: ShapePath.MiterJoin //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc component-capStyle
+*/
     //property alias capStyle: path.capStyle
     property int capStyle: ShapePath.SquareCap //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeStyle} {rectangle}
+*/
     //property alias strokeStyle: path.strokeStyle
     property int strokeStyle: ShapePath.SolidLine //workaround for regression in Qt 6.6.1 (QDS-11845)
 
 /*!
-    The width of the border of the rectangle.
-
-    The default value is 4.
-
-    A width of 1 creates a thin line. For no line, use a negative value or a
-    transparent color.
-
-    \note The width of the rectangle's border does not affect the geometry of
-    the rectangle itself or its position relative to other items if anchors are
-    used.
-
-    The border is rendered within the rectangle's boundaries.
+    \include CommonItemDescriptions.qdocinc {component-strokeWidth} {rectangle}
 */
     property alias strokeWidth: path.strokeWidth
 
 /*!
-    The color used to draw the border of the rectangle.
-
-    When set to \c transparent, no line is drawn.
-
-    The default value is \c red.
-
-    \sa QColor
+    \include CommonItemDescriptions.qdocinc {component-strokeColor} {rectangle}
 */
     property alias strokeColor: path.strokeColor
 
 /*!
-    The dash pattern of the rectangle border specified as the dashes and the
-    gaps between them.
-
-    The dash pattern is specified in units of the pen's width. That is, a dash
-    with the length 5 and width 10 is 50 pixels long.
-
-    The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels
-    followed by a space of 2 * \l strokeWidth pixels.
-
-    \sa QPen::setDashPattern()
+    \include CommonItemDescriptions.qdocinc {component-dashPattern} {rectangle}
 */
     property alias dashPattern: path.dashPattern
 
 /*!
-    The rectangle fill color.
-
-    A gradient for the fill can be specified by using \l gradient. If both a
-    color and a gradient are specified, the gradient is used.
-
-    When set to \c transparent, no filling occurs.
-
-    The default value is \c white.
+    \include CommonItemDescriptions.qdocinc {component-fillColor} {rectangle}
 */
     property alias fillColor: path.fillColor
 
 /*!
-    The starting point of the dash pattern for the rectangle border.
-
-    The offset is measured in terms of the units used to specify the dash
-    pattern. For example, a pattern where each stroke is four units long,
-    followed by a gap of two units, will begin with the stroke when drawn
-    as a line. However, if the dash offset is set to 4.0, any line drawn
-    will begin with the gap. Values of the offset up to 4.0 will cause part
-    of the stroke to be drawn first, and values of the offset between 4.0 and
-    6.0 will cause the line to begin with part of the gap.
-
-    The default value is 0.
-
-    \sa QPen::setDashOffset()
+    \include CommonItemDescriptions.qdocinc {component-dashOffset} {rectangle}
 */
     property alias dashOffset: path.dashOffset
 
 /*!
-    Whether the border corner is beveled.
+    Whether the rectangle corner is beveled.
 */
     property bool bevel: false
 
 /*!
-    The bevel of the top left border corner.
+    The bevel of the top left rectangle corner.
 
     \sa bevel
 */
     property bool topLeftBevel: root.bevel
 
 /*!
-    The bevel of the top right border corner.
+    The bevel of the top right rectangle corner.
 
     \sa bevel
 */
     property bool topRightBevel: root.bevel
 
 /*!
-    The bevel of the bottom right border corner.
+    The bevel of the bottom right rectangle corner.
 
     \sa bevel
 */
     property bool bottomRightBevel: root.bevel
 
 /*!
-    The bevel of the bottom left border corner.
+    The bevel of the bottom left rectangle corner.
 
     \sa bevel
 */
@@ -326,8 +280,7 @@ Shape {
     layer.samples: root.antialiasing && !root.__curveRendererActive ? 4 : 0
 
 /*!
-    The border is rendered within the rectangle's boundaries, outside of them,
-    or on top of them.
+    \include CommonItemDescriptions.qdocinc component-borderMode
 */
     property int borderMode: 0
 
@@ -341,8 +294,7 @@ Shape {
     }
 
 /*!
-    The property changes the way border radius is calculated.
-    Deactivated by default.
+    \include CommonItemDescriptions.qdocinc component-adjustBorderRadius
 */
     property bool adjustBorderRadius: false
 
diff --git a/src/imports/components/RegularPolygonItem.qml b/src/imports/components/RegularPolygonItem.qml
index 4f44771..c8fa420 100644
--- a/src/imports/components/RegularPolygonItem.qml
+++ b/src/imports/components/RegularPolygonItem.qml
@@ -37,6 +37,126 @@ import QtQuick.Shapes
     \inherits Shape
 
     \brief A filled regular polygon with an optional border.
+
+    A regular polygon can be just a 2D polygon shaped stroke, a filling, or a stroke with filling.
+    The \l strokeColor, \l strokeWidth, and \l strokeStyle properties specify the appearance of the
+    outline. The \l dashPattern and \l dashOffset properties specify the appearance of dashed stroke.
+
+    The area inside the stroke is painted using either a solid fill color, specified using the
+    \l fillColor property, or a gradient, defined using one of the \l ShapeGradient subtypes and set
+    using the \l gradient property. If both a color and a gradient are specified, the gradient is
+    used.
+
+    To create a polygon with a stroke, set the \sideCount property between 3 to 100 and the
+    \l strokeWidth property greater than 0. The \l strokeWidth property specifies the width of the
+    polygon stroke.The default \l sideCount value is 6 and the default \l strokeWidth value is 4.
+    Setting the \l strokeWidth value to a negetive value hides the border.
+
+    The \l radius property specifies whether the polygon corners are rounded. Because this
+    introduces curved edges to the corners, it may be appropriate to set the \c antialiasing
+    property that is inherited from \l Item to improve the appearance of the stroke.
+
+    \section2 Example Usage
+
+    \image studio-regularpolygon.webp
+
+    The QML code looks as follows:
+
+    \code
+    RegularPolygonItem {
+        id: regularPolygon
+        x: 817
+        y: 404
+        width: 133
+        height: 133
+        radius: 10
+        strokeColor: "#262525"
+        fillColor: "#766e6e"
+    }
+
+    RegularPolygonItem {
+        id: regularPolygon1
+        x: 973
+        y: 404
+        width: 133
+        height: 133
+        sideCount: 15
+        gradient: RadialGradient {
+            GradientStop {
+                position: 0
+                color: "#c56060"
+            }
+
+            GradientStop {
+                position: 1
+                color: "#665e5e"
+            }
+            focalY: regularPolygon1.height * 0.5
+            focalX: regularPolygon1.width * 0.5
+            focalRadius: Math.min(regularPolygon1.width, regularPolygon1.height) * 0
+            centerY: regularPolygon1.height * 0.5
+            centerX: regularPolygon1.width * 0.5
+            centerRadius: Math.min(regularPolygon1.width, regularPolygon1.height) * 0.5
+        }
+        strokeColor: "#262525"
+    }
+
+    RegularPolygonItem {
+        id: regularPolygon2
+        x: 817
+        y: 567
+        width: 133
+        height: 133
+        gradient: ConicalGradient {
+            centerY: regularPolygon2.height * 0.5
+            centerX: regularPolygon2.width * 0.5
+            angle: 0
+
+            GradientStop {
+                position: 0
+                color: "#fc8e8e"
+            }
+
+            GradientStop {
+                position: 1
+                color: "#f0b9b9"
+            }
+        }
+        joinStyle: 1
+        strokeStyle: 4
+        strokeColor: "#262525"
+        sideCount: 10
+    }
+
+    RegularPolygonItem {
+        id: regularPolygon3
+        x: 973
+        y: 567
+        width: 133
+        height: 133
+        strokeWidth: -1
+        strokeColor: "#262525"
+        sideCount: 7
+        gradient: RadialGradient {
+            GradientStop {
+                position: 0.21053
+                color: "#60c2c5"
+            }
+
+            GradientStop {
+                position: 1
+                color: "#deb2b2"
+            }
+            focalY: regularPolygon3.height * 0.5
+            focalX: regularPolygon3.width * 0.5
+            focalRadius: Math.min(regularPolygon3.width, regularPolygon3.height) * 0
+            centerY: regularPolygon3.height * 0.5
+            centerX: regularPolygon3.width * 0.5
+            centerRadius: Math.min(regularPolygon3.width, regularPolygon3.height) * 0.5
+        }
+    }
+    \endcode
+
 */
 
 Shape {
@@ -45,119 +165,62 @@ Shape {
     height: 200
 
 /*!
-    The radius used to draw rounded corners.
-
-    The default value is 10.
-
-    If radius is non-zero, the corners will be rounded, otherwise they will
-    be sharp.
+    \include CommonItemDescriptions.qdocinc {component-radius} {10}
 */
     property int radius: 10
 
 /*!
-    The gradient of the regular polygon fill color.
-
-    By default, no gradient is enabled and the value is null. In this case, the
-    fill uses a solid color based on the value of \l fillColor.
-
-    When set, \l fillColor is ignored and filling is done using one of the
-    \l ShapeGradient subtypes.
-
-    \note The \l Gradient type cannot be used here. Rather, prefer using one of
-    the advanced subtypes, like \l LinearGradient.
+    \include CommonItemDescriptions.qdocinc {component-gradient} {regular polygon}
 */
     property alias gradient: path.fillGradient
 
 /*!
-    The style of the regular polygon border.
-
-    \value ShapePath.SolidLine
-           A solid line. This is the default value.
-    \value ShapePath.DashLine
-           Dashes separated by a few pixels.
-           The \l dashPattern property specifies the dash pattern.
-
-    \sa Qt::PenStyle
+    \include CommonItemDescriptions.qdocinc component-joinStyle
 */
     //property alias joinStyle: path.joinStyle
     property int joinStyle: ShapePath.MiterJoin //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc component-capStyle
+*/
     //property alias capStyle: path.capStyle
     property int capStyle: ShapePath.SquareCap //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeStyle} {regular polygon}
+*/
     //property alias strokeStyle: path.strokeStyle
     property int strokeStyle: ShapePath.SolidLine //workaround for regression in Qt 6.6.1 (QDS-11845)
 
 /*!
-    The width of the border of the regular polygon.
-
-    The default value is 4.
-
-    A width of 1 creates a thin line. For no line, use a negative value or a
-    transparent color.
-
-    \note The width of the regular polygon's border does not affect the geometry of
-    the regular polygon itself or its position relative to other items if anchors are
-    used.
-
-    The border is rendered within the regular polygon's boundaries.
+    \include CommonItemDescriptions.qdocinc {component-strokeWidth} {regular polygon}
 */
     property alias strokeWidth: path.strokeWidth
 
 /*!
-    The color used to draw the border of the regular polygon.
-
-    When set to \c transparent, no line is drawn.
-
-    The default value is \c red.
-
-    \sa QColor
+    \include CommonItemDescriptions.qdocinc {component-strokeColor} {regular polygon}
 */
     property alias strokeColor: path.strokeColor
 
 /*!
-    The dash pattern of the regular polygon border specified as the dashes and the
-    gaps between them.
-
-    The dash pattern is specified in units of the pen's width. That is, a dash
-    with the length 5 and width 10 is 50 pixels long.
-
-    The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels
-    followed by a space of 2 * \l strokeWidth pixels.
-
-    \sa QPen::setDashPattern()
+    \include CommonItemDescriptions.qdocinc {component-dashPattern} {regular polygon}
 */
     property alias dashPattern: path.dashPattern
 
 /*!
-    The regular polygon fill color.
-
-    A gradient for the fill can be specified by using \l gradient. If both a
-    color and a gradient are specified, the gradient is used.
-
-    When set to \c transparent, no filling occurs.
-
-    The default value is \c white.
+    \include CommonItemDescriptions.qdocinc {component-fillColor} {regular polygon}
 */
     property alias fillColor: path.fillColor
 
 /*!
-    The starting point of the dash pattern for the regular polygon border.
-
-    The offset is measured in terms of the units used to specify the dash
-    pattern. For example, a pattern where each stroke is four units long,
-    followed by a gap of two units, will begin with the stroke when drawn
-    as a line. However, if the dash offset is set to 4.0, any line drawn
-    will begin with the gap. Values of the offset up to 4.0 will cause part
-    of the stroke to be drawn first, and values of the offset between 4.0 and
-    6.0 will cause the line to begin with part of the gap.
-
-    The default value is 0.
-
-    \sa QPen::setDashOffset()
+    \include CommonItemDescriptions.qdocinc {component-dashOffset} {regular polygon}
 */
     property alias dashOffset: path.dashOffset
 
 /*!
-    The number of sides on the polygon.
+    The number of edges on the regular polygon.
+    The minimum number of edges can be 3.
+    The default value is 6.
 */
     property int sideCount: 6
 
diff --git a/src/imports/components/StarItem.qml b/src/imports/components/StarItem.qml
index 0103af4..1608936 100644
--- a/src/imports/components/StarItem.qml
+++ b/src/imports/components/StarItem.qml
@@ -31,12 +31,121 @@ import QtQuick
 import QtQuick.Shapes
 
 /*!
-    \qmltype RegularPolygon
+    \qmltype Star
     \inqmlmodule QtQuick.Studio.Components
     \since QtQuick.Studio.Components 1.0
     \inherits Shape
 
-    \brief A filled polygon that is arranged in a star shape with an optional border.
+    \brief A filled star-shaped polygon with an optional border.
+
+    A star can be a star shaped stroke, a filling, or a stroke with filling. The \l strokeColor,
+    \l strokeWidth, and \l strokeStyle properties specify the appearance of the outline. The
+    \l dashPattern and \l dashOffset properties specify the appearance of dashed stroke.
+
+    Set the \l count property between 3 and 60 to specify the number of points of the star. Set the
+    \l ratio between 0.1 and 1 to specify the distance of the inner points of the star from the
+    center.
+
+    The area inside the stroke is painted using either a solid fill color, specified using the
+    \l fillColor property, or a gradient, defined using one of the \l ShapeGradient subtypes and set
+    using the \l gradient property. If both a color and a gradient are specified, the gradient is
+    used.
+
+    To create a star with a stroke, set the \l strokeWidth property to a value greater than 0. The
+    \l strokeWidth property specifies the width of the polygon stroke.The default \l count value is
+    6 and the default \l strokeWidth value is 4. Setting the \l strokeWidth value to a negative
+    value hides the border.
+
+    The \l radius property specifies whether the star corners are rounded. Because this introduces
+    curved edges to the corners, it may be appropriate to set the \c antialiasing property that is
+    inherited from \l Item to improve the appearance of the stroke.
+
+    \section2 Example Usage
+
+    \image studio-star.webp
+
+    The QML code looks as follows:
+
+    \code
+
+    StarItem {
+        id: star
+        x: 621
+        y: 433
+        width: 142
+        height: 142
+        radius: 10
+    }
+
+    StarItem {
+        id: star1
+        x: 786
+        y: 433
+        width: 142
+        height: 142
+        radius: 1
+        gradient: RadialGradient {
+            GradientStop {
+                position: 0
+                color: "#ce9d9d"
+            }
+
+            GradientStop {
+                position: 1
+                color: "#000000"
+            }
+            focalY: star1.height * 0.5
+            focalX: star1.width * 0.5
+            focalRadius: Math.min(star1.width, star1.height) * 0
+            centerY: star1.height * 0.5
+            centerX: star1.width * 0.5
+            centerRadius: Math.min(star1.width, star1.height) * 0.5
+        }
+        count: 7
+    }
+
+    StarItem {
+        id: star2
+        x: 786
+        y: 603
+        width: 142
+        height: 142
+        radius: 1
+        fillColor: "#00ffffff"
+        strokeColor: "#000000"
+        ratio: 0.2
+        count: 3
+    }
+
+    StarItem {
+        id: star3
+        x: 621
+        y: 603
+        width: 142
+        height: 142
+        radius: 1
+        gradient: LinearGradient {
+            y2: star3.height * 1
+            y1: star3.height * 0
+            x2: star3.width * 1
+            x1: star3.width * 0
+
+            GradientStop {
+                position: 0
+                color: "#ff8686"
+            }
+
+            GradientStop {
+                position: 1
+                color: "#5c5e5d"
+            }
+        }
+        strokeColor: "#00ff0000"
+        ratio: 0.6
+        count: 25
+    }
+
+    \endcode
 */
 
 Shape {
@@ -45,126 +154,71 @@ Shape {
     height: 200
 
 /*!
-    The radius used to draw rounded corners.
-
-    The default value is 10.
-
-    If radius is non-zero, the corners will be rounded, otherwise they will
-    be sharp.
+    \include CommonItemDescriptions.qdocinc {component-radius} {10}
 */
     property int radius: 10
 
 /*!
-    The gradient of the regular polygon fill color.
-
-    By default, no gradient is enabled and the value is null. In this case, the
-    fill uses a solid color based on the value of \l fillColor.
-
-    When set, \l fillColor is ignored and filling is done using one of the
-    \l ShapeGradient subtypes.
-
-    \note The \l Gradient type cannot be used here. Rather, prefer using one of
-    the advanced subtypes, like \l LinearGradient.
+    \include CommonItemDescriptions.qdocinc {component-gradient} {star}
 */
     property alias gradient: path.fillGradient
 
 /*!
-    The style of the regular polygon border.
-
-    \value ShapePath.SolidLine
-           A solid line. This is the default value.
-    \value ShapePath.DashLine
-           Dashes separated by a few pixels.
-           The \l dashPattern property specifies the dash pattern.
-
-    \sa Qt::PenStyle
+    \include CommonItemDescriptions.qdocinc component-joinStyle
 */
     //property alias joinStyle: path.joinStyle
     property int joinStyle: ShapePath.MiterJoin //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc component-capStyle
+*/
     //property alias capStyle: path.capStyle
     property int capStyle: ShapePath.SquareCap //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeStyle} {star}
+*/
     //property alias strokeStyle: path.strokeStyle
     property int strokeStyle: ShapePath.SolidLine //workaround for regression in Qt 6.6.1 (QDS-11845)
 
 /*!
-    The width of the border of the regular polygon.
-
-    The default value is 4.
-
-    A width of 1 creates a thin line. For no line, use a negative value or a
-    transparent color.
-
-    \note The width of the regular polygon's border does not affect the geometry of
-    the regular polygon itself or its position relative to other items if anchors are
-    used.
-
-    The border is rendered within the regular polygon's boundaries.
+    \include CommonItemDescriptions.qdocinc {component-strokeWidth} {star}
 */
     property alias strokeWidth: path.strokeWidth
 
 /*!
-    The color used to draw the border of the regular polygon.
-
-    When set to \c transparent, no line is drawn.
-
-    The default value is \c red.
-
-    \sa QColor
+    \include CommonItemDescriptions.qdocinc {component-strokeColor} {star}
 */
     property alias strokeColor: path.strokeColor
 
 /*!
-    The dash pattern of the regular polygon border specified as the dashes and the
-    gaps between them.
-
-    The dash pattern is specified in units of the pen's width. That is, a dash
-    with the length 5 and width 10 is 50 pixels long.
-
-    The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels
-    followed by a space of 2 * \l strokeWidth pixels.
-
-    \sa QPen::setDashPattern()
+    \include CommonItemDescriptions.qdocinc {component-dashPattern} {star}
 */
     property alias dashPattern: path.dashPattern
 
 /*!
-    The regular polygon fill color.
-
-    A gradient for the fill can be specified by using \l gradient. If both a
-    color and a gradient are specified, the gradient is used.
-
-    When set to \c transparent, no filling occurs.
-
-    The default value is \c white.
+    \include CommonItemDescriptions.qdocinc {component-fillColor} {star}
 */
     property alias fillColor: path.fillColor
 
 /*!
-    The starting point of the dash pattern for the regular polygon border.
-
-    The offset is measured in terms of the units used to specify the dash
-    pattern. For example, a pattern where each stroke is four units long,
-    followed by a gap of two units, will begin with the stroke when drawn
-    as a line. However, if the dash offset is set to 4.0, any line drawn
-    will begin with the gap. Values of the offset up to 4.0 will cause part
-    of the stroke to be drawn first, and values of the offset between 4.0 and
-    6.0 will cause the line to begin with part of the gap.
-
-    The default value is 0.
-
-    \sa QPen::setDashOffset()
+    \include CommonItemDescriptions.qdocinc {component-dashOffset} {star}
 */
     property alias dashOffset: path.dashOffset
 
 /*!
-    The number of points there are to the star. The minimum is three and
-    the maximum is 60.
+    The number of points in the star. It supports a minimum of 3 and a maximum of 60 points. Set the
+    count to 3 and the \l ratio to 0.5 to create a triangle.
+
+    The default value is 6.
 */
     property int count: 6
 
 /*!
     The distance of the inner points of the star from the center. This
     is represented as percentage of the star's diameter.
+
+    The default value is 0.5.
 */
     property real ratio: 0.5
 
diff --git a/src/imports/components/SvgPathItem.qml b/src/imports/components/SvgPathItem.qml
index eaf9693..7654712 100644
--- a/src/imports/components/SvgPathItem.qml
+++ b/src/imports/components/SvgPathItem.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2019 The Qt Company Ltd.
+** Copyright (C) 2024 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Studio Components.
@@ -40,22 +40,101 @@ import QtQuick.Shapes
 
     The SvgPathItem type uses an SVG path data string to draw a path as a line.
 
-    The \l strokeColor, \l strokeWidth, and \l strokeStyle, properties specify
-    the appearance of the path. The \l dashPattern and \l dashOffset properties
-    specify the appearance of dashed lines.
+    The \l strokeColor, \l strokeWidth, and \l strokeStyle, properties specify the appearance of the
+    path. The \l dashPattern and \l dashOffset properties specify the appearance of dashed lines.
 
-    The \l capStyle property specifies whether line ends are square or
-    rounded.
+    The \l capStyle property specifies whether line ends are square or rounded.
 
-    The \l joinStyle property specifies how to connect two path segments.
-    If the path segments enclose areas, they can be painted using either
-    a solid fill color, specified using the \l fillColor property, or a
-    gradient, defined using one of the \l ShapeGradient subtypes and set
-    using the \l gradient property. If both a color and a gradient are
-    specified, the gradient is used.
+    The \l joinStyle property specifies how to connect two path segments. If the path segments
+    enclose areas, they can be painted using either a solid fill color, specified using the
+    \l fillColor property, or a gradient, defined using one of the \l ShapeGradient subtypes and set
+    using the \l gradient property. If both a color and a gradient are specified, the gradient is
+    used.
+
+    If the path has curves, it may be appropriate to set the \c antialiasing property that is
+    inherited from \l Item to improve its appearance.
+
+    \section2 Example Usage
+
+    \image studio-svgpathitem.webp
+
+    The QML code looks as follows:
+
+    \code
+        SvgPathItem {
+            id: sVGPathItem
+            x: 2
+            y: 3
+            width: 152
+            height: 154
+            strokeWidth: 4
+            strokeColor: "black"
+            path: "M127.99,0 L150.061,124.052 L22.0704,146.823 L0,22.7711 L127.99,0"
+            fillColor: "transparent"
+        }
+
+        SvgPathItem {
+            id: sVGPathItem1
+            x: 56.32
+            y: 44.32
+            width: 150.06
+            height: 146.82
+            strokeWidth: 4
+            strokeColor: "black"
+            path: "M127.99,0 L150.061,124.052 L22.0704,146.823 L0,22.7711 L127.99,0"
+            fillColor: "transparent"
+        }
+
+        SvgPathItem {
+            id: sVGPathItem2
+            x: 3.18
+            y: 27.38
+            width: 55
+            height: 40
+            strokeWidth: 4
+            strokeColor: "black"
+            path: "M0,0 L55,40"
+            fillColor: "transparent"
+        }
+
+        SvgPathItem {
+            id: sVGPathItem3
+            x: 130.21
+            y: 2.41
+            width: 55
+            height: 42
+            strokeWidth: 4
+            strokeColor: "black"
+            path: "M0,0 L55,42"
+            fillColor: "transparent"
+        }
+
+        SvgPathItem {
+            id: sVGPathItem4
+            x: 22
+            y: 148
+            width: 56
+            height: 43
+            strokeWidth: 4
+            strokeColor: "black"
+            path: "M0,0 L54,40"
+            fillColor: "transparent"
+        }
+
+        SvgPathItem {
+            id: sVGPathItem5
+            x: 151.21
+            y: 126.41
+            width: 55
+            height: 42
+            strokeWidth: 4
+            strokeColor: "black"
+            path: "M0,0 L55,42"
+            fillColor: "transparent"
+        }
+        clip: false
+    \endcode
 
-    If the path has curves, it may be appropriate to set the \c antialiasing
-    property that is inherited from \l Item to improve its appearance.
 */
 
 Shape {
@@ -64,102 +143,45 @@ Shape {
     height: 200
 
 /*!
-    The gradient of the fill color.
-
-    By default, no gradient is enabled and the value is null. In this case, the
-    fill uses a solid color based on the value of \l fillColor.
-
-    When set, \l fillColor is ignored and filling is done using one of the
-    \l ShapeGradient subtypes.
-
-    \note The \l Gradient type cannot be used here. Rather, prefer using one of
-    the advanced subtypes, like \l LinearGradient.
+    \include CommonItemDescriptions.qdocinc {component-gradient} {SVG Path Item}
 */
     property alias gradient: shape.fillGradient
 
 /*!
-    The style of the line.
-
-    \value Shape.SolidLine
-           A solid line. This is the default value.
-    \value Shape.DashLine
-           Dashes separated by a few pixels.
-           The \l dashPattern property specifies the dash pattern.
-
-    \sa Qt::PenStyle
+    \include CommonItemDescriptions.qdocinc component-joinStyle
 */
     //property alias joinStyle: path.joinStyle
     property int joinStyle: ShapePath.MiterJoin //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc component-capStyle
+*/
     //property alias capStyle: path.capStyle
     property int capStyle: ShapePath.SquareCap //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeStyle} {SVG Path Item}
+*/
     //property alias strokeStyle: path.strokeStyle
     property int strokeStyle: ShapePath.SolidLine //workaround for regression in Qt 6.6.1 (QDS-11845)
 
 /*!
-    The width of the line.
-
-    When set to a negative value, no line is drawn.
-
-    The default value is 4.
+    \include CommonItemDescriptions.qdocinc {component-strokeWidth} {SVG Path Item}
 */
     property alias strokeWidth: shape.strokeWidth
 
 /*!
-    The color of the line.
-
-    When set to \c transparent, no line is drawn.
-
-    The default value is \c red.
-
-    \sa QColor
+    \include CommonItemDescriptions.qdocinc {component-strokeColor} {SVG Path Item}
 */
     property alias strokeColor: shape.strokeColor
 
 /*!
-    The dash pattern of the line specified as the dashes and the gaps between
-    them.
-
-    The dash pattern is specified in units of the pen's width. That is, a dash
-    with the length 5 and width 10 is 50 pixels long.
-
-    Each dash is also subject to cap styles, and therefore a dash of 1 with
-    square cap set will extend 0.5 pixels out in each direction resulting in
-    a total width of 2.
-
-    The default \l capStyle is \c {ShapePath.SquareCap}, meaning that a square
-    line end covers the end point and extends beyond it by half the line width.
-
-    The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels
-    followed by a space of 2 * \l strokeWidth pixels.
-
-    \sa QPen::setDashPattern()
+    \include CommonItemDescriptions.qdocinc {component-dashPattern} {SVG Path Item}
 */
     property alias dashPattern: shape.dashPattern
 
 /*!
-    The join style used to connect two path segments.
-
-    \value Shape.MiterJoin
-           The outer edges of the lines are extended to meet at an angle, and
-           this area is filled.
-    \value Shape.BevelJoin
-           The triangular notch between the two lines is filled.
-           This is the default value.
-    \value Shape.RoundJoin
-           A circular arc between the two lines is filled.
-
-    \sa Qt::PenJoinStyle
-*/
-
-/*!
-    The fill color of enclosed path segments.
-
-    A gradient for the fill can be specified by using \l gradient. If both a
-    color and a gradient are specified, the gradient is used.
-
-    When set to \c transparent, no filling occurs.
-
-    The default value is \c white.
+    \include CommonItemDescriptions.qdocinc {component-fillColor} {SVG Path Item}
 */
     property alias fillColor: shape.fillColor
 
@@ -168,42 +190,15 @@ Shape {
 
     The SVG path data string specifying the path.
 
-    For more information, see \l{https://www.w3.org/TR/SVG/paths.html#PathData}
-    {W3C SVG Path Data}.
+    For more information, see \l{https://www.w3.org/TR/SVG/paths.html#PathData} {W3C SVG Path Data}.
 */
     property alias path: pathSvg.path
 
 /*!
-    The starting point of the dash pattern for the line.
-
-    The offset is measured in terms of the units used to specify the dash
-    pattern. For example, a pattern where each stroke is four units long,
-    followed by a gap of two units, will begin with the stroke when drawn
-    as a line. However, if the dash offset is set to 4.0, any line drawn
-    will begin with the gap. Values of the offset up to 4.0 will cause part
-    of the stroke to be drawn first, and values of the offset between 4.0 and
-    6.0 will cause the line to begin with part of the gap.
-
-    The default value is 0.
-
-    \sa QPen::setDashOffset()
+    \include CommonItemDescriptions.qdocinc {component-dashOffset} {SVG Path Item}
 */
     property alias dashOffset: shape.dashOffset
 
-/*!
-    The cap style of the line.
-
-    \value Shape.FlatCap
-           A square line end that does not cover the end point of the line.
-    \value Shape.SquareCap
-           A square line end that covers the end point and extends beyond it
-           by half the line width. This is the default value.
-    \value Shape.RoundCap
-           A rounded line end.
-
-    \sa Qt::PenCapStyle
-*/
-
     property bool __preferredRendererTypeAvailable: root.preferredRendererType !== undefined
     property bool __curveRendererActive: root.__preferredRendererTypeAvailable
                                          && root.rendererType === Shape.CurveRenderer
diff --git a/src/imports/components/TextItem.qml b/src/imports/components/TextItem.qml
index d8b4037..843a96c 100644
--- a/src/imports/components/TextItem.qml
+++ b/src/imports/components/TextItem.qml
@@ -35,8 +35,112 @@ import QtQuick.Shapes
     \inqmlmodule QtQuick.Studio.Components
     \since QtQuick.Studio.Components 1.0
     \inherits Shape
+    \inherits Text
 
     \brief A filled text with an optional border.
+
+    A text can be a text shaped stroke, a filling, or a stroke with filling. The
+    \l strokeColor, \l strokeWidth, and \l strokeStyle properties specify the appearance of the
+    outline. The \l dashPattern and \l dashOffset properties specify the appearance of a dashed
+    stroke.
+
+    The area inside the text is painted using either a solid fill color, specified using the
+    \l fillColor property, or a gradient, defined using one of the \l ShapeGradient subtypes and set
+    using the \l gradient property. If both a color and a gradient are specified, the gradient is
+    used.
+
+    To create a text with a stroke, set a \l strokeWidth property that is greater than 0. The
+    \l strokeWidth property specifies the width of the text stroke. The default \l strokeWidth
+    value is 4. Setting the \l strokeWidth value to -1 hides the border.
+
+    Text supports only plain strings. The \l font properties are applied to the \l text.
+
+    \section2 Example Usage
+
+    \image studio-text.webp
+
+    The QML code looks as follows:
+
+    \code
+    TextItem {
+        id: _text
+        x: 874
+        y: 213
+        text: qsTr("Qt")
+        font.pixelSize: 120
+        fillColor: "#00ffffff"
+        strokeColor: "#1e8f00"
+        font.bold: true
+        strokeWidth: 2
+    }
+
+    TextItem {
+        id: _text1
+        x: 1033
+        y: 213
+        text: qsTr("Qt")
+        font.pixelSize: 120
+        gradient: LinearGradient {
+            y2: _text1.height * 1
+            y1: _text1.height * 0
+            x2: _text1.width * 1
+            x1: _text1.width * 0
+            GradientStop {
+                position: 0
+                color: "#00d158"
+            }
+
+            GradientStop {
+                position: 0.55263
+                color: "#ffffff"
+            }
+        }
+        strokeWidth: 2
+        strokeColor: "#ff0000"
+        font.bold: true
+    }
+
+    TextItem {
+        id: _text2
+        x: 874
+        y: 402
+        text: qsTr("Qt")
+        font.pixelSize: 120
+        strokeStyle: 3
+        strokeWidth: 2
+        strokeColor: "#474747"
+        font.bold: true
+    }
+
+    TextItem {
+        id: _text3
+        x: 1033
+        y: 402
+        text: qsTr("Qt")
+        font.pixelSize: 120
+        gradient: RadialGradient {
+            focalY: _text3.height * 0.5
+            focalX: _text3.width * 0.5
+            focalRadius: Math.min(_text3.width, _text3.height) * 0
+            centerY: _text3.height * 0.5
+            centerX: _text3.width * 0.5
+            centerRadius: Math.min(_text3.width, _text3.height) * 0.5
+
+            GradientStop {
+                position: 0.10526
+                color: "#00ffab"
+            }
+
+            GradientStop {
+                position: 1
+                color: "#ff000000"
+            }
+        }
+        strokeWidth: -1
+        strokeColor: "#1e8f00"
+        font.bold: true
+    }
+    \endcode
 */
 
 Shape {
@@ -45,114 +149,70 @@ Shape {
     height: Math.ceil(textMetrics.height) // TODO
 
 /*!
-    The gradient of the regular polygon fill color.
-
-    By default, no gradient is enabled and the value is null. In this case, the
-    fill uses a solid color based on the value of \l fillColor.
-
-    When set, \l fillColor is ignored and filling is done using one of the
-    \l ShapeGradient subtypes.
-
-    \note The \l Gradient type cannot be used here. Rather, prefer using one of
-    the advanced subtypes, like \l LinearGradient.
+    \include CommonItemDescriptions.qdocinc {component-gradient} {text}
 */
     property alias gradient: path.fillGradient
 
 /*!
-    The style of the regular polygon border.
-
-    \value ShapePath.SolidLine
-           A solid line. This is the default value.
-    \value ShapePath.DashLine
-           Dashes separated by a few pixels.
-           The \l dashPattern property specifies the dash pattern.
-
-    \sa Qt::PenStyle
+    \include CommonItemDescriptions.qdocinc component-joinStyle
 */
     //property alias joinStyle: path.joinStyle
     property int joinStyle: ShapePath.MiterJoin //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc component-capStyle
+*/
     //property alias capStyle: path.capStyle
     property int capStyle: ShapePath.SquareCap //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+ /*!
+    \include CommonItemDescriptions.qdocinc {component-strokeStyle} {text}
+*/
     //property alias strokeStyle: path.strokeStyle
     property int strokeStyle: ShapePath.SolidLine //workaround for regression in Qt 6.6.1 (QDS-11845)
 
 /*!
-    The width of the border of the regular polygon.
-
-    The default value is 4.
-
-    A width of 1 creates a thin line. For no line, use a negative value or a
-    transparent color.
-
-    \note The width of the regular polygon's border does not affect the geometry of
-    the regular polygon itself or its position relative to other items if anchors are
-    used.
-
-    The border is rendered within the regular polygon's boundaries.
+    \include CommonItemDescriptions.qdocinc {component-strokeWidth} {text}
 */
     property alias strokeWidth: path.strokeWidth
 
 /*!
-    The color used to draw the border of the regular polygon.
-
-    When set to \c transparent, no line is drawn.
-
-    The default value is \c red.
-
-    \sa QColor
+    \include CommonItemDescriptions.qdocinc {component-strokeColor} {text}
 */
     property alias strokeColor: path.strokeColor
 
 /*!
-    The dash pattern of the regular polygon border specified as the dashes and the
-    gaps between them.
-
-    The dash pattern is specified in units of the pen's width. That is, a dash
-    with the length 5 and width 10 is 50 pixels long.
-
-    The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels
-    followed by a space of 2 * \l strokeWidth pixels.
-
-    \sa QPen::setDashPattern()
+    \include CommonItemDescriptions.qdocinc {component-dashPattern} {text}
 */
     property alias dashPattern: path.dashPattern
 
 /*!
-    The regular polygon fill color.
-
-    A gradient for the fill can be specified by using \l gradient. If both a
-    color and a gradient are specified, the gradient is used.
-
-    When set to \c transparent, no filling occurs.
-
-    The default value is \c white.
+    \include CommonItemDescriptions.qdocinc {component-fillColor} {text}
 */
     property alias fillColor: path.fillColor
 
 /*!
-    The starting point of the dash pattern for the regular polygon border.
-
-    The offset is measured in terms of the units used to specify the dash
-    pattern. For example, a pattern where each stroke is four units long,
-    followed by a gap of two units, will begin with the stroke when drawn
-    as a line. However, if the dash offset is set to 4.0, any line drawn
-    will begin with the gap. Values of the offset up to 4.0 will cause part
-    of the stroke to be drawn first, and values of the offset between 4.0 and
-    6.0 will cause the line to begin with part of the gap.
-
-    The default value is 0.
-
-    \sa QPen::setDashOffset()
+    \include CommonItemDescriptions.qdocinc {component-dashOffset} {text}
 */
     property alias dashOffset: path.dashOffset
 
 /*!
-    TODO
+    The font properties for the \l text. Change the \l {QFont::family} {family},
+    \l {QFont::letterSpacing} {letterSpacing}, \l {QFont::pixelSize} {pixelSize},
+    \l {QFont::wordSpacing} {wordSpacing}, \l {QFont::weight} {weight} of the \l text using these
+    properties.You can also set wheather the \l text has auto \l {QFont::kerning} {kerning} or if it
+    follows the \l {QtQuick::Text::font.preferShaping} {preferShaping} using the font specific
+    features. Also sets your preferred font \l {QFont::capitalization} {capitalization} method and
+    \l {QFont::styleName} {styleName} for the \l text.
+
+    \sa QFont Text
 */
     property alias font: pathText.font
 
 /*!
     The text to display. Text supports only plain strings.
+
+    \sa QFont Text
 */
     property alias text: pathText.text
 
diff --git a/src/imports/components/TriangleItem.qml b/src/imports/components/TriangleItem.qml
index e80b2f8..3009efb 100644
--- a/src/imports/components/TriangleItem.qml
+++ b/src/imports/components/TriangleItem.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2021 The Qt Company Ltd.
+** Copyright (C) 2024 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Studio Components.
@@ -38,41 +38,42 @@ import QtQuick.Shapes
 
     \brief A triangle.
 
-    The Triangle type can be used to draw triangles with different dimensions
-    and shapes. The type is enclosed in an invisible \l Rectangle type. The size
-    of the triangle is determined by the size of the bounding rectangle. The
-    dimensions of the triangle can be changed to make it elongated or squat
-    with space around it by using the \l leftMargin, \l topMargin,
-    \l rightMargin, and \l bottomMargin properties. The margins are set between
-    the triangle and the edges of the parent rectangle.
+    The Triangle type can be used to draw triangles with different dimensions and shapes. The type
+    is enclosed in an invisible \l Rectangle type. The size of the triangle is determined by the
+    size of the bounding rectangle. The dimensions of the triangle can be changed to make it
+    elongated or squat with space around it by using the \l leftMargin, \l topMargin, \l rightMargin,
+    and \l bottomMargin properties. The margins are set between the triangle and the edges of the
+    parent rectangle.
 
-    Each Triangle item is painted using either a solid fill color, specified
-    using the \l fillColor property, or a gradient, defined using one of the
-    \l ShapeGradient subtypes and set using the \l gradient property.
-    If both a color and a gradient are specified, the gradient is used.
+    Each Triangle item is painted using either a solid fill color, specified using the \l fillColor
+    property, or a gradient, defined using one of the \l ShapeGradient subtypes and set using the
+    \l gradient property. If both a color and a gradient are specified, the gradient is used.
 
-    An optional border can be added to a triangle with its own color and
-    thickness by setting the \l strokeColor and \l strokeWidth properties.
-    Setting the color to \c transparent creates a border without a fill color.
+    An optional border can be added to a triangle with its own color and thickness by setting the
+    \l strokeColor and \l strokeWidth properties. Setting the color to \c transparent creates a
+    border without a fill color.
 
     \section2 Example Usage
 
-    You can use the Triangle component in \QDS to create triangles in different
-    shapes and colors.
+    You can use the Triangle component in \QDS to create triangles in different shapes and colors.
 
-    \image studio-triangle.png
+    \image studio-triangle.webp
 
     The QML code looks as follows:
 
     \code
     TriangleItem {
         id: triangle
+        x: 845
+        y: 265
         strokeColor: "gray"
         fillColor: "light gray"
     }
 
     TriangleItem {
         id: squatTriangle
+        x: 1009
+        y: 265
         bottomMargin: 10
         topMargin: 30
         fillColor: "#d3d3d3"
@@ -81,14 +82,18 @@ import QtQuick.Shapes
 
     TriangleItem {
         id: elongatedTriangle
-        leftMargin: 15
-        rightMargin: 15
+        x: 845
+        y: 394
+        rightMargin: 10
+        leftMargin: 10
         fillColor: "#d3d3d3"
         strokeColor: "#808080"
     }
 
     TriangleItem {
         id: pear
+        x: 1009
+        y: 394
         radius: 20
         fillColor: "light gray"
         bottomMargin: 10
@@ -105,120 +110,50 @@ Shape {
     height: 100
 
 /*!
-    The gradient of the triangle fill color.
-
-    By default, no gradient is enabled and the value is null. In this case, the
-    fill uses a solid color based on the value of \l fillColor.
-
-    When set, \l fillColor is ignored and filling is done using one of the
-    \l ShapeGradient subtypes.
-
-    \note The \l Gradient type cannot be used here. Rather, prefer using one of
-    the advanced subtypes, like \l LinearGradient.
+    \include CommonItemDescriptions.qdocinc {component-gradient} {triangle}
 */
     property alias gradient: path.fillGradient
 
 /*!
-    The style of the triangle border.
-
-    \value ShapePath.SolidLine
-           A solid line. This is the default value.
-    \value ShapePath.DashLine
-           Dashes separated by a few pixels.
-           The \l dashPattern property specifies the dash pattern.
-
-    \sa Qt::PenStyle
+    \include CommonItemDescriptions.qdocinc {component-strokeWidth} {triangle}
 */
-
-/*!
-    The width of the border of the rectangle.
-
-    The default value is 4.
-
-    A width of 1 creates a thin line. For no line, use a negative value or a
-    transparent color.
-
-    \note The width of the rectangle's border does not affect the geometry of
-    the rectangle itself or its position relative to other items if anchors are
-    used.
-
-    The border is rendered within the rectangle's boundaries.
-*/
-
     property alias strokeWidth: path.strokeWidth
 
 /*!
-    The color used to draw the border of the triangle.
-
-    When set to \c transparent, no line is drawn.
-
-    The default value is \c red.
-
-    \sa QColor
+    \include CommonItemDescriptions.qdocinc {component-strokeColor} {triangle}
 */
     property alias strokeColor: path.strokeColor
 
 /*!
-    The dash pattern of the triangle border specified as the dashes and the
-    gaps between them.
-
-    The dash pattern is specified in units of the pen's width. That is, a dash
-    with the length 5 and width 10 is 50 pixels long.
-
-    The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels
-    followed by a space of 2 * \l strokeWidth pixels.
-
-    \sa QPen::setDashPattern()
+    \include CommonItemDescriptions.qdocinc {component-dashPattern} {triangle}
 */
     property alias dashPattern: path.dashPattern
 
 /*!
-    The join style used to connect two triangle line segments.
-
-    \value ShapePath.MiterJoin
-           The outer edges of the lines are extended to meet at an angle, and
-           this area is filled.
-    \value ShapePath.BevelJoin
-           The triangular notch between the two lines is filled.
-           This is the default value.
-    \value ShapePath.RoundJoin
-           A circular arc between the two lines is filled.
-
-    \sa Qt::PenJoinStyle
+    \include CommonItemDescriptions.qdocinc component-joinStyle
 */
     //property alias joinStyle: path.joinStyle
     property int joinStyle: ShapePath.MiterJoin //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc component-capStyle
+*/
     //property alias capStyle: path.capStyle
     property int capStyle: ShapePath.FlatCap //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeStyle} {triangle}
+*/
     //property alias strokeStyle: path.strokeStyle
     property int strokeStyle: ShapePath.SolidLine //workaround for regression in Qt 6.6.1 (QDS-11845)
 
 /*!
-    The triangle fill color.
-
-    A gradient for the fill can be specified by using \l gradient. If both a
-    color and a gradient are specified, the gradient is used.
-
-    When set to \c transparent, no filling occurs.
-
-    The default value is \c white.
+    \include CommonItemDescriptions.qdocinc {component-fillColor} {triangle}
 */
     property alias fillColor: path.fillColor
 
 /*!
-    The starting point of the dash pattern for the triangle border.
-
-    The offset is measured in terms of the units used to specify the dash
-    pattern. For example, a pattern where each stroke is four units long,
-    followed by a gap of two units, will begin with the stroke when drawn
-    as a line. However, if the dash offset is set to 4.0, any line drawn
-    will begin with the gap. Values of the offset up to 4.0 will cause part
-    of the stroke to be drawn first, and values of the offset between 4.0 and
-    6.0 will cause the line to begin with part of the gap.
-
-    The default value is 0.
-
-    \sa QPen::setDashOffset()
+    \include CommonItemDescriptions.qdocinc {component-dashOffset} {triangle}
 */
     property alias dashOffset: path.dashOffset
 
@@ -235,27 +170,17 @@ Shape {
     property point rightIntersection2
 
 /*!
-    The radius used to draw rounded corners.
+    \include CommonItemDescriptions.qdocinc {component-radius} {5}
 
-    The default value is 5.
-
-    If radius is non-zero, the corners will be rounded, otherwise they will
-    be sharp.
-
-    This property can be used together with the \l arcRadius property to
-    determine the shape of the triangle.
+    This property can be used together with the \l arcRadius property to determine the shape of the
+    triangle.
 
     \sa arcRadius
 */
     property int radius: 5
 
 /*!
-    The radius used to draw rounded corners.
-
-    The default value is 5.
-
-    If radius is non-zero, the corners will be rounded, otherwise they will
-    be sharp.
+    \include CommonItemDescriptions.qdocinc {component-radius} {5}
 
     This property can be used together with the \l radius property to
     determine the shape of the triangle.
@@ -264,9 +189,7 @@ Shape {
 
 /*!
     The left margin between the triangle and the bounding rectangle.
-
-    Setting the left and right margins makes the triangle thinner and moves it
-    away from the edge.
+    Setting the left and right margins makes the triangle thinner and moves it away from the edge.
 
     \sa rightMargin, topMargin, bottomMargin
 */
@@ -274,19 +197,15 @@ Shape {
 
 /*!
     The top margin between the triangle and the bounding rectangle.
-
-    Setting the top and bottom margins makes the triangle lower and moves it
-    away from the edge.
+    Setting the top and bottom margins makes the triangle lower and moves it away from the edge.
 
     \sa bottomMargin, leftMargin, rightMargin
 */
     property real topMargin: 0
 
 /*!
-    The left margin between the triangle and the bounding rectangle.
-
-    Setting the left and right margins makes the triangle thinner and moves it
-    away from the edge.
+    The right margin between the triangle and the bounding rectangle.
+    Setting the left and right margins makes the triangle thinner and moves it away from the edge.
 
     \sa leftMargin, topMargin, bottomMargin
 */
@@ -296,9 +215,7 @@ Shape {
     \qmlproperty real Triangle::bottomMargin
 
     The top margin between the triangle and the bounding rectangle.
-
-    Setting the top and bottom margins makes the triangle shorter and moves it
-    away from the edge.
+    Setting the top and bottom margins makes the triangle shorter and moves it away from the edge.
 
     \sa topMargin, leftMargin, rightMargin
 */
diff --git a/src/imports/components/designer/IsoItemSpecifics.qml b/src/imports/components/designer/IsoItemSpecifics.qml
deleted file mode 100644
index df35ea4..0000000
--- a/src/imports/components/designer/IsoItemSpecifics.qml
+++ /dev/null
@@ -1,52 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2021 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of Qt Quick Designer Components.
-**
-** $QT_BEGIN_LICENSE:GPL$
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and The Qt Company. For licensing terms
-** and conditions see https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** GNU General Public License Usage
-** Alternatively, this file may be used under the terms of the GNU
-** General Public License version 3 or (at your option) any later version
-** approved by the KDE Free Qt Foundation. The licenses are as published by
-** the Free Software Foundation and appearing in the file LICENSE.GPL3
-** included in the packaging of this file. Please review the following
-** information to ensure the GNU General Public License requirements will
-** be met: https://www.gnu.org/licenses/gpl-3.0.html.
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
-import HelperWidgets 2.0
-
-Column {
-    anchors.left: parent.left
-    anchors.right: parent.right
-
-    Section {
-        anchors.left: parent.left
-        anchors.right: parent.right
-        caption: qsTr("Iso Icon")
-
-        SectionLayout {
-            PropertyLabel { text: qsTr("Icon color") }
-
-            ColorEditor {
-                backendValue: backendValues.color
-                supportGradient: false
-            }
-        }
-    }
-}
diff --git a/src/imports/components/designer/components.metainfo b/src/imports/components/designer/components.metainfo
index 2d8b994..31cfeb7 100644
--- a/src/imports/components/designer/components.metainfo
+++ b/src/imports/components/designer/components.metainfo
@@ -143,19 +143,6 @@ MetaInfo {
     }
 
     Type {
-        name: "QtQuick.Studio.Components.IsoItem"
-        icon: "images/iso-icons-16px.png"
-
-        ItemLibraryEntry {
-            name: "Iso Icon"
-            category: "Studio Components"
-            libraryIcon: "images/iso-icons-24px.png"
-            version: "1.0"
-            requiredImport: "QtQuick.Studio.Components"
-        }
-    }
-
-    Type {
         name: "QtQuick.Studio.Components.TextItem"
         icon: "images/text-16px.png"
 
diff --git a/src/imports/components/doc/images/studio-arc.png b/src/imports/components/doc/images/studio-arc.png
deleted file mode 100644
index 3d1a1da..0000000
--- a/src/imports/components/doc/images/studio-arc.png
+++ /dev/null
diff --git a/src/imports/components/doc/images/studio-arc.webp b/src/imports/components/doc/images/studio-arc.webp
new file mode 100644
index 0000000..cd30e1e
--- /dev/null
+++ b/src/imports/components/doc/images/studio-arc.webp
diff --git a/src/imports/components/doc/images/studio-border.png b/src/imports/components/doc/images/studio-border.png
deleted file mode 100644
index df9f12c..0000000
--- a/src/imports/components/doc/images/studio-border.png
+++ /dev/null
diff --git a/src/imports/components/doc/images/studio-border.webp b/src/imports/components/doc/images/studio-border.webp
new file mode 100644
index 0000000..79334e0
--- /dev/null
+++ b/src/imports/components/doc/images/studio-border.webp
diff --git a/src/imports/components/doc/images/studio-ellipse.webp b/src/imports/components/doc/images/studio-ellipse.webp
new file mode 100644
index 0000000..e8e95b0
--- /dev/null
+++ b/src/imports/components/doc/images/studio-ellipse.webp
diff --git a/src/imports/components/doc/images/studio-flipable.png b/src/imports/components/doc/images/studio-flipable.png
deleted file mode 100644
index d4b490b..0000000
--- a/src/imports/components/doc/images/studio-flipable.png
+++ /dev/null
diff --git a/src/imports/components/doc/images/studio-flipable.webp b/src/imports/components/doc/images/studio-flipable.webp
new file mode 100644
index 0000000..7c21974
--- /dev/null
+++ b/src/imports/components/doc/images/studio-flipable.webp
diff --git a/src/imports/components/doc/images/studio-group.png b/src/imports/components/doc/images/studio-group.png
deleted file mode 100644
index 27a5f79..0000000
--- a/src/imports/components/doc/images/studio-group.png
+++ /dev/null
diff --git a/src/imports/components/doc/images/studio-group.webp b/src/imports/components/doc/images/studio-group.webp
new file mode 100644
index 0000000..8fb4dfb
--- /dev/null
+++ b/src/imports/components/doc/images/studio-group.webp
diff --git a/src/imports/components/doc/images/studio-pie.png b/src/imports/components/doc/images/studio-pie.png
deleted file mode 100644
index f2e67a6..0000000
--- a/src/imports/components/doc/images/studio-pie.png
+++ /dev/null
diff --git a/src/imports/components/doc/images/studio-pie.webp b/src/imports/components/doc/images/studio-pie.webp
new file mode 100644
index 0000000..1b0413f
--- /dev/null
+++ b/src/imports/components/doc/images/studio-pie.webp
diff --git a/src/imports/components/doc/images/studio-rectangle.png b/src/imports/components/doc/images/studio-rectangle.png
deleted file mode 100644
index 0d545b8..0000000
--- a/src/imports/components/doc/images/studio-rectangle.png
+++ /dev/null
diff --git a/src/imports/components/doc/images/studio-rectangle.webp b/src/imports/components/doc/images/studio-rectangle.webp
new file mode 100644
index 0000000..828d8ce
--- /dev/null
+++ b/src/imports/components/doc/images/studio-rectangle.webp
diff --git a/src/imports/components/doc/images/studio-regularpolygon.webp b/src/imports/components/doc/images/studio-regularpolygon.webp
new file mode 100644
index 0000000..bcf9fbd
--- /dev/null
+++ b/src/imports/components/doc/images/studio-regularpolygon.webp
diff --git a/src/imports/components/doc/images/studio-star.webp b/src/imports/components/doc/images/studio-star.webp
new file mode 100644
index 0000000..ba39ba7
--- /dev/null
+++ b/src/imports/components/doc/images/studio-star.webp
diff --git a/src/imports/components/doc/images/studio-svgpathitem.webp b/src/imports/components/doc/images/studio-svgpathitem.webp
new file mode 100644
index 0000000..410a332
--- /dev/null
+++ b/src/imports/components/doc/images/studio-svgpathitem.webp
diff --git a/src/imports/components/doc/images/studio-text.webp b/src/imports/components/doc/images/studio-text.webp
new file mode 100644
index 0000000..bdb3dce
--- /dev/null
+++ b/src/imports/components/doc/images/studio-text.webp
diff --git a/src/imports/components/doc/images/studio-triangle.png b/src/imports/components/doc/images/studio-triangle.png
deleted file mode 100644
index 948e670..0000000
--- a/src/imports/components/doc/images/studio-triangle.png
+++ /dev/null
diff --git a/src/imports/components/doc/images/studio-triangle.webp b/src/imports/components/doc/images/studio-triangle.webp
new file mode 100644
index 0000000..d4ce107
--- /dev/null
+++ b/src/imports/components/doc/images/studio-triangle.webp
diff --git a/src/imports/components/doc/src/qtquickstudiocomponents-index.qdoc b/src/imports/components/doc/src/qtquickstudiocomponents-index.qdoc
index 395f089..17a8ab5 100644
--- a/src/imports/components/doc/src/qtquickstudiocomponents-index.qdoc
+++ b/src/imports/components/doc/src/qtquickstudiocomponents-index.qdoc
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2021 The Qt Company Ltd.
+** Copyright (C) 2024 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the documentation of the Qt Toolkit.
@@ -41,7 +41,7 @@
     statement in your .qml file:
 
     \code
-    import QtQuick.Studio.Components 1.0
+    import QtQuick.Studio.Components
     \endcode
 
     \section1 Reference
diff --git a/src/imports/components/doc/src/qtquickstudiocomponents-qmlmodule.qdoc b/src/imports/components/doc/src/qtquickstudiocomponents-qmlmodule.qdoc
index 2722409..09fc961 100644
--- a/src/imports/components/doc/src/qtquickstudiocomponents-qmlmodule.qdoc
+++ b/src/imports/components/doc/src/qtquickstudiocomponents-qmlmodule.qdoc
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2021 The Qt Company Ltd.
+** Copyright (C) 2024 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the documentation of the Qt Toolkit.
@@ -26,21 +26,22 @@
 ****************************************************************************/
 
 /*!
-    \qmlmodule QtQuick.Studio.Components 1.0
+    \qmlmodule QtQuick.Studio.Components
     \title Qt Quick Studio Components QML Types
     \ingroup qmlmodules
     \brief Provides components enhanced for creating animated UIs.
 
     Preset components are available for creating differently shaped objects,
-    such as arcs, pies, or triangles, as well as objects with particular
-    abilities, such as being visibly \e flipped between their front and back
+    such as arcs, pies, regular polygons, stars, texts, or triangles, as well
+    as objects with particular abilities, such as being visibly
+    \e flipped between their front and back
     sides, like a card. The components are built on top of
     \l {Qt Quick Shapes QML Types}, with some additional properties.
 
     The QML types can be imported into your application using the following
     import statements in your .qml file:
 
-    \badcode
-    import QtQuick.Studio.Components 1.0
+    \code
+    import QtQuick.Studio.Components
     \endcode
 */